/* SLAM BLOCKS in the UGLY Games look (22 Oct 2026): the same family as UGLY MAZE (the maze skin at the end of
   arena-screens.css) but basketball. Chunky toy stickers in the studio's bruise-purple ink, the SLAM BLOCKS logo for a
   title, the key art behind the lobby, and a lime admission ticket for the one button. Art in assets/slam-ui/
   (src/slam-ui.js). Every id and class the game uses is the arena's own, so the game code only fills them. */
body[data-theme="slam"]{--s-ink:#2a1240;--s-glass:rgba(30,13,52,.86);--s-glass2:rgba(42,18,64,.92);--s-rim:rgba(124,255,79,.5);--s-orange:#ff8a1f;--s-bone:#fff4e0;
 --a-accent:#7cff4f;--a-lime:#baff38;--a-dim:#c9a9e6;--a-soft:#eadcff;--a-gold:#ffd23a;background:#0b0616}

/* ---------- lobby ---------- */
body[data-theme="slam"] #start.lobby{align-items:flex-start;
 background:linear-gradient(90deg,rgba(11,6,22,.95) 0,rgba(11,6,22,.82) 34%,rgba(11,6,22,.25) 60%,rgba(11,6,22,0) 78%),url('assets/slam-ui/key.webp') 70% 50%/cover no-repeat,#0b0616}
body[data-theme="slam"] #start[data-mode="pause"].lobby{background:linear-gradient(90deg,rgba(11,6,22,.95),rgba(11,6,22,.62) 60%,rgba(11,6,22,.35))}
body[data-theme="slam"] .lobby-slash{display:none}
body[data-theme="slam"] #start .lobby-inner{width:min(700px,100%);padding:clamp(12px,2.6vh,28px) clamp(22px,4.4vw,64px) 18px}
body[data-theme="slam"] #start .lobby-live{margin:0 0 4px;background:var(--s-ink);border-color:var(--s-orange);color:#7cff4f;letter-spacing:.18em;font-size:11px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
body[data-theme="slam"] #start .lobby-live .live-dot{background:#7cff4f;animation:none;box-shadow:0 0 10px #7cff4f}
body[data-theme="slam"] #start .lobby-title,body[data-theme="slam"] #start[data-mode="lobby"] .lobby-title{margin:0 0 6px;font-size:0;line-height:0;transform:none;text-shadow:none;animation:slam-logo .7s .05s cubic-bezier(.2,1.5,.3,1) both}
.slam-logo{display:block;width:clamp(210px,23vw,300px);height:auto;margin:0 0 0 -10px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
body[data-theme="slam"] #start[data-mode="pause"] .slam-logo{width:clamp(170px,18vw,230px)}
body[data-theme="slam"] .lobby-facts{gap:7px;margin:0 0 12px;flex-wrap:nowrap}
body[data-theme="slam"] .lobby-facts li{display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 3px;border-radius:12px;background:var(--s-glass);border:2px solid var(--s-rim);box-shadow:0 3px 0 var(--s-ink);color:var(--s-bone);font-size:12.5px;white-space:nowrap;transform:rotate(-1.5deg)}
body[data-theme="slam"] .lobby-facts li:nth-child(even){transform:rotate(1.5deg)}
body[data-theme="slam"] .lobby-facts li img{width:28px;height:28px}
body[data-theme="slam"] .lobby-facts li b{color:#7cff4f}

/* The modes: toy stickers with their 3D icons; the one you are on glows lime. */
body[data-theme="slam"] .lobby-modes{gap:8px;margin:0 0 12px;max-width:600px}
body[data-theme="slam"] .lobby-modes button,body[data-theme="slam"] #onlineBtn{height:44px;padding:0 13px 0 4px;border-radius:13px;background:var(--s-glass);border:2.5px solid #5a2f86;box-shadow:0 4px 0 var(--s-ink);color:var(--s-bone);transform:none;transition:transform .1s,border-color .15s}
body[data-theme="slam"] .lobby-modes button:hover{transform:translateY(-2px) rotate(-1deg);border-color:#ff8a1f}
body[data-theme="slam"] .lobby-modes button i{width:36px;height:36px;border-radius:10px;background:none}
body[data-theme="slam"] .lobby-modes button i img{width:34px;height:34px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
body[data-theme="slam"] .lobby-modes button[aria-pressed="true"]{border-color:#7cff4f;background:linear-gradient(180deg,rgba(124,255,79,.24),rgba(42,18,64,.92));box-shadow:0 4px 0 var(--s-ink),0 0 18px rgba(124,255,79,.35)}
body[data-theme="slam"] .lobby-modes button[aria-pressed="true"] i{background:none}
body[data-theme="slam"] .lobby-modes .lm-two em{color:var(--a-dim)}
body[data-theme="slam"] .lobby-note{margin:-4px 0 12px;color:var(--a-soft)}
body[data-theme="slam"] .lobby-note b{color:#ff5fb4}

/* The UGLY SLAM CUP line: a sticker with UGLY's face. */
body[data-theme="slam"] .lobby-cup{margin:0 0 14px;max-width:600px;padding:6px 12px 6px 6px;border-radius:14px;background:var(--s-glass2);border:2.5px solid var(--s-ink);box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.55),0 4px 0 var(--s-ink);color:var(--a-soft)}
body[data-theme="slam"] .lobby-cup img{width:36px;height:36px;border:2.5px solid #7cff4f;box-sizing:border-box}
body[data-theme="slam"] .lobby-cup b{color:#7cff4f}
body[data-theme="slam"] .cup-signin{background:#7cff4f;color:var(--s-ink);border:2.5px solid var(--s-ink);box-shadow:0 3px 0 var(--s-ink)}

/* The way in: a lime admission ticket with a torn-off stub for the key (UGLY MAZE's is pumpkin orange). */
body[data-theme="slam"] .lobby-cta{margin:0 0 12px;gap:16px}
body[data-theme="slam"] #start .drop,body[data-theme="slam"] #after .drop{gap:0;padding:0;min-height:66px;border:3px solid var(--s-ink);border-radius:12px;background:linear-gradient(180deg,#c6ff8a,#7cff4f 52%,#4fd82a);color:var(--s-ink);box-shadow:0 7px 0 #1d5a0a,0 0 0 0 rgba(124,255,79,.5);transform:rotate(-2deg);overflow:hidden}
body[data-theme="slam"] #start .drop::before,body[data-theme="slam"] #after .drop::before{content:"";position:absolute;left:10px;top:50%;width:26px;height:26px;margin-top:-13px;background:url('assets/slam-ui/icon-ball.webp') center/contain no-repeat;filter:drop-shadow(0 2px 0 rgba(42,18,64,.45))}
body[data-theme="slam"] #start .drop:active,body[data-theme="slam"] #after .drop:active{transform:rotate(-2deg) translateY(4px);box-shadow:0 3px 0 #1d5a0a}
body[data-theme="slam"] #start .drop:disabled{background:#4b3566;color:#d8c6f0;box-shadow:0 7px 0 #24133a}
body[data-theme="slam"] #start .drop:disabled::before{opacity:.4}
body[data-theme="slam"] #start .drop:not(:disabled){animation:slam-ticket 2.4s 1s ease-in-out infinite}
body[data-theme="slam"] .drop-label{padding:0 20px 0 44px;font-size:32px;color:var(--s-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}
body[data-theme="slam"] .drop-key{align-self:stretch;display:grid;place-items:center;padding:0 14px;border:0;border-left:3px dashed rgba(42,18,64,.55);border-radius:0;background:rgba(255,244,224,.38);color:var(--s-ink)}
body[data-theme="slam"] #start #onGo.on{background:linear-gradient(180deg,#ff9fd2,#ff5fb4 55%,#e83f97);box-shadow:0 7px 0 #7a1d52}
body[data-theme="slam"] .lobby-xp{max-width:300px;color:var(--a-soft)}
body[data-theme="slam"] .lobby-xp b,body[data-theme="slam"] .lobby-xp .ugly{color:#7cff4f}

/* Keys: four across, on purple glass. */
body[data-theme="slam"] #start .lobby-keys{display:flex;flex-wrap:wrap;gap:7px 16px;padding:9px 12px;margin:0 0 12px;width:min(600px,100%);border-radius:14px;background:rgba(26,12,44,.78);border:2px solid rgba(124,255,79,.28);box-shadow:0 4px 0 var(--s-ink)}
body[data-theme="slam"] .lobby-keys div{gap:6px}
body[data-theme="slam"] .lobby-keys dd{font-size:11.5px;white-space:nowrap;color:var(--a-soft)}
body[data-theme="slam"] .lobby-keys kbd{background:var(--s-ink);border-color:rgba(124,255,79,.55);color:var(--s-bone);box-shadow:0 2px 0 #12081f}
body[data-theme="slam"] .lobby-keys kbd.wide{min-width:38px}
body[data-theme="slam"] #start .ghost,body[data-theme="slam"] #after .ghost{border:2.5px solid #6b3a99;background:var(--s-glass);color:#f3e8ff;box-shadow:0 4px 0 var(--s-ink)}
body[data-theme="slam"] #start .ghost:hover,body[data-theme="slam"] #after .ghost:hover{border-color:#7cff4f;background:#3a1b5c}

/* Online: the room card in the same stickers. */
body[data-theme="slam"] .on-btn,body[data-theme="slam"] .on-seat,body[data-theme="slam"] .on-join input{transform:none;border:2.5px solid #5a2f86;background:var(--s-glass);box-shadow:0 4px 0 var(--s-ink);color:var(--s-bone)}
body[data-theme="slam"] .on-btn:hover,body[data-theme="slam"] .on-btn:focus-visible{border-color:#7cff4f}
body[data-theme="slam"] .on-btn b{color:#7cff4f}
body[data-theme="slam"] .on-btn.pink b{color:#ff5fb4}
body[data-theme="slam"] .on-join input{background:#16091f;color:var(--s-bone)}
body[data-theme="slam"] .on-code{transform:rotate(-2deg);color:#7cff4f;-webkit-text-stroke:7px var(--s-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--s-ink)}
body[data-theme="slam"] .on-head>span:first-child{color:var(--a-dim)}
body[data-theme="slam"] .on-team h4{font:400 14px/1 Launch,'Lilita One',sans-serif;letter-spacing:.06em;color:#baff38;text-shadow:0 2px 0 var(--s-ink)}
body[data-theme="slam"] .on-team.t1 h4{color:#ff5fb4}
body[data-theme="slam"] .on-team.t0 .on-seat.person{border-color:#baff38}
body[data-theme="slam"] .on-team.t1 .on-seat.person{border-color:#ff5fb4}
body[data-theme="slam"] .on-seat.open{border-style:dashed;color:var(--a-dim)}
body[data-theme="slam"] .on-seat.cpu{color:#8d76ab}
body[data-theme="slam"] .on-seat.me{background:rgba(124,255,79,.16)}
body[data-theme="slam"] .on-team.t1 .on-seat.me{background:rgba(255,95,180,.16)}
body[data-theme="slam"] .on-note,body[data-theme="slam"] .on-msg{color:var(--a-soft)}

/* ---------- results: UGLY lifts the cup, or the ball bounces off his head ---------- */
body[data-theme="slam"] #after.results{align-items:flex-start;padding:14px 16px 20px;
 background:linear-gradient(180deg,rgba(11,6,22,.7),rgba(11,6,22,.55) 30%,rgba(11,6,22,.86) 62%,rgba(11,6,22,.94)),url('assets/slam-ui/win.webp') center 60%/cover no-repeat,#0b0616}
body[data-theme="slam"] #after.results.lost{background:linear-gradient(180deg,rgba(11,6,22,.7),rgba(11,6,22,.55) 30%,rgba(11,6,22,.86) 62%,rgba(11,6,22,.94)),url('assets/slam-ui/lost.webp') center 60%/cover no-repeat,#0b0616}
body[data-theme="slam"] #after .res-inner{margin:auto 0}
.slam-res-logo{display:block;width:clamp(110px,11vw,150px);height:auto;margin:0 auto -4px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:fade-up .4s both}
body[data-theme="slam"] .res-kicker{color:#ff8a1f;font:400 15px/1 Launch,'Lilita One',sans-serif;letter-spacing:.12em;text-shadow:0 2px 0 var(--s-ink)}
body[data-theme="slam"] #after .res-place{margin:2px 0 0;font:400 clamp(60px,8.6vw,112px)/.9 Launch,'Lilita One',sans-serif;letter-spacing:.01em;color:var(--place,#7cff4f);-webkit-text-stroke:13px var(--s-ink);paint-order:stroke fill;
 text-shadow:0 9px 0 var(--s-ink),0 0 60px color-mix(in srgb,var(--place,#7cff4f) 45%,transparent);transform:rotate(-3deg);animation:slam-stamp .6s .1s cubic-bezier(.2,1.5,.3,1) both}
body[data-theme="slam"] #after .res-place{--place:#7cff4f}
body[data-theme="slam"] #after.lost .res-place{--place:#ff5fb4}
body[data-theme="slam"] .res-sub{margin:6px 0 14px;color:var(--s-bone);text-shadow:0 2px 0 var(--s-ink)}
body[data-theme="slam"] .res-sub b{color:var(--s-bone)}
body[data-theme="slam"] .res-slam{margin-bottom:10px;padding:9px 16px;background:var(--s-glass2);border:2.5px solid var(--s-ink);box-shadow:inset 0 0 0 1.5px rgba(124,255,79,.6),0 4px 0 var(--s-ink)}
body[data-theme="slam"] .res-slam img{width:48px;height:48px;border:2.5px solid #7cff4f;box-sizing:border-box}
body[data-theme="slam"] .res-slam span{color:var(--a-dim)}
body[data-theme="slam"] .res-slam b{color:#7cff4f;transform:rotate(-2deg);-webkit-text-stroke:6px var(--s-ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--s-ink);font-size:42px}
body[data-theme="slam"] .res-slam .best{background:#ffd23a;color:var(--s-ink);border:2.5px solid var(--s-ink);transform:rotate(3deg)}
body[data-theme="slam"] .res-slam .parts i{background:var(--s-ink);color:var(--a-soft)}
body[data-theme="slam"] .res-slam .parts i.u{background:rgba(124,255,79,.22);color:#7cff4f}
body[data-theme="slam"] .res-stats{margin-bottom:10px}
body[data-theme="slam"] .res-stat{position:relative;padding:26px 8px 9px;margin-top:18px;border-radius:14px;background:var(--s-glass);border:2.5px solid #5a2f86;box-shadow:0 4px 0 var(--s-ink)}
body[data-theme="slam"] .res-stat img{position:absolute;left:50%;top:-22px;width:44px;height:44px;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
body[data-theme="slam"] .res-stat:nth-child(even) img{transform:translateX(-50%) rotate(6deg)}
body[data-theme="slam"] .res-stat b{color:var(--s-bone);font-size:34px}
body[data-theme="slam"] .res-stat span{color:var(--a-dim)}
body[data-theme="slam"] .res-stat.hot{border-color:#7cff4f}
body[data-theme="slam"] .res-stat.hot b{color:#7cff4f}
body[data-theme="slam"] .res-xp{margin-bottom:10px}
body[data-theme="slam"] .res-xp-note{border-color:#5a2f86;color:var(--a-soft);background:rgba(26,12,44,.7)}
body[data-theme="slam"] .res-xp-bar{background:var(--s-glass);border:2.5px solid var(--s-ink)}
body[data-theme="slam"] .res-xp-bar i{background:linear-gradient(90deg,#39d353,#7cff4f)}
body[data-theme="slam"] .res-board{gap:4px;margin-bottom:14px}
body[data-theme="slam"] .res-board li{height:31px;background:var(--s-glass);border:2px solid rgba(90,47,134,.8)}
body[data-theme="slam"] .res-board li .pos{border:2px solid var(--s-ink)}
body[data-theme="slam"] .res-board li .kd{color:var(--a-dim)}
body[data-theme="slam"] .res-board li .sc{color:var(--s-bone)}
body[data-theme="slam"] .res-cup h3{font:400 14px/1 Launch,'Lilita One',sans-serif;letter-spacing:.08em;color:#7cff4f;text-shadow:0 2px 0 var(--s-ink)}
body[data-theme="slam"] .res-cup li{background:var(--s-glass);border:2px solid rgba(90,47,134,.8)}
body[data-theme="slam"] .res-cup li:first-child .pos{background:#ffd23a;color:var(--s-ink)}
body[data-theme="slam"] .res-cup li .sc{color:#7cff4f}
body[data-theme="slam"] .res-actions{gap:14px}
body[data-theme="slam"] .go-stamp span{color:var(--s-bone);transform:rotate(-4deg);-webkit-text-stroke:12px #2a1240;paint-order:stroke fill;text-shadow:0 10px 0 #2a1240}

@keyframes slam-logo{0%{opacity:0;transform:translateY(-24px) rotate(-6deg) scale(1.15)}100%{opacity:1;transform:none}}
@keyframes slam-stamp{0%{opacity:0;transform:rotate(-3deg) scale(1.4)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes slam-ticket{0%,100%{box-shadow:0 7px 0 #1d5a0a,0 0 0 0 rgba(124,255,79,.45)}50%{box-shadow:0 7px 0 #1d5a0a,0 0 0 12px rgba(124,255,79,0)}}

/* Laptops that are short: the card tightens so PLAY and Back fit without scrolling. */
@media (max-height:760px) and (min-height:521px){
 .slam-logo{width:clamp(190px,20vw,240px)}
 .slam-res-logo{width:110px}
 body[data-theme="slam"] .res-stat{margin-top:16px;padding-top:22px}
 body[data-theme="slam"] .res-stat b{font-size:30px}
}
/* Phones held sideways (slam.html puts the lobby in two columns there). */
@media (max-height:520px){
 body.touch[data-theme="slam"] #start .lobby-inner{width:100%;max-width:980px;padding:8px max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left))}
 body.touch[data-theme="slam"] #start .lobby-keys{display:grid}
 body.touch[data-theme="slam"] #start .lobby-keys dd{white-space:normal}
 .slam-logo{width:clamp(130px,19vw,180px);margin-left:-6px}
 body[data-theme="slam"] #start.lobby,body.touch[data-theme="slam"] #start.lobby{align-items:center;
  background:linear-gradient(90deg,rgba(11,6,22,.95) 0,rgba(11,6,22,.86) 44%,rgba(11,6,22,.55) 62%,rgba(11,6,22,.35)),url('assets/slam-ui/key-sm.webp') 70% 50%/cover no-repeat,#0b0616}
 body[data-theme="slam"] #start .lobby-title{margin:0 0 6px}
 body[data-theme="slam"] #start[data-mode="pause"].lobby,body.touch[data-theme="slam"] #start[data-mode="pause"].lobby{background:linear-gradient(90deg,rgba(11,6,22,.95),rgba(11,6,22,.7) 55%,rgba(11,6,22,.45))}
 body[data-theme="slam"] .lobby-modes button,body[data-theme="slam"] #onlineBtn{height:38px}
 body[data-theme="slam"] .lobby-modes button i img{width:28px;height:28px}
 body[data-theme="slam"] .lobby-cup{margin:0 0 10px;font-size:11.5px}
 body[data-theme="slam"] .lobby-cup img{width:30px;height:30px}
 body[data-theme="slam"] #start .drop{min-height:56px}
 body[data-theme="slam"] .drop-label{font-size:27px}
 body.touch[data-theme="slam"] #start .lobby-keys{grid-template-columns:1fr;width:100%;gap:8px;padding:10px 12px}
 body.touch[data-theme="slam"] #start .lobby-keys dd{font-size:12px}
 body[data-theme="slam"] #start .ghost{min-height:38px}
 .slam-res-logo{display:none}
 body[data-theme="slam"] #after.results{padding:8px 16px}
 body[data-theme="slam"] #after .res-place{font-size:clamp(52px,15vh,72px);-webkit-text-stroke:10px var(--s-ink);text-shadow:0 6px 0 var(--s-ink)}
 body[data-theme="slam"] .res-sub{margin:4px 0 8px;font-size:15px}
 body[data-theme="slam"] .res-slam{padding:6px 12px;margin-bottom:8px}
 body[data-theme="slam"] .res-slam b{font-size:30px;-webkit-text-stroke:5px var(--s-ink)}
 body[data-theme="slam"] .res-slam img{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){body[data-theme="slam"] #start .lobby-title,body[data-theme="slam"] #after .res-place,body[data-theme="slam"] #start .drop:not(:disabled){animation:none}}