/* Arcade home page: the arcade floor. A neon sign, then an aisle of cabinets (a carousel):
   the chosen one stands in front, its neighbors sit to the sides, angled like cabinets down an aisle.
   The cabinets themselves are drawn by shared/cabinets.js + shared/cabinets.css. */

/* THE CHECKERED FLOOR'S VISIBILITY: 0 = no checks, 1 = the strongest. Used by both the 3D floor (arcade3d.js) and
   the 2D one below. Change the number and reload. (It was .35 until the checks were made a little more visible.) */
:root{--floor-checks:.55}

/* the neon sign's size (--logo) and the cabinet size: as big as fits, leaving room for the sign above and the
   description below (the room for the sign grows with it, so a bigger sign never pushes START off the screen) */
.floor-page{
  --logo:clamp(36px, min(10.2vw, 11vh), 96px);
  --cab-w:clamp(180px, min(64vw, calc((100vh - 320px - max(0px, (var(--logo) - 57px) * 1.1)) / 2)), 290px);
  --step:calc(var(--cab-w) * .9);          /* distance from the front cabinet to its neighbors */
  overflow-x:hidden;
}
@supports (height:100svh){ .floor-page{--logo:clamp(36px, min(10.2vw, 11svh), 96px);
  --cab-w:clamp(180px, min(64vw, calc((100svh - 320px - max(0px, (var(--logo) - 57px) * 1.1)) / 2)), 290px)} }

/* ---------- the room: dark, a little haze, light pooling on the floor ---------- */
.room{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 34% at 50% 44%, rgba(184,107,255,.14), transparent 70%),        /* haze */
    radial-gradient(50% 22% at 18% 8%, rgba(255,79,179,.12), transparent 70%),
    radial-gradient(50% 22% at 82% 8%, rgba(58,232,255,.1), transparent 70%),
    linear-gradient(180deg, var(--deep) 0, var(--floor) 58%, var(--floor-2) 76%, var(--deep) 100%)}
/* the floor: a faint checkerboard receding under the cabinets */
.room::after{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:34%;opacity:var(--floor-checks,.55);
  background:repeating-conic-gradient(var(--floor-3) 0 25%, transparent 0 50%) 0 0/64px 64px;
  transform:perspective(300px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}

/* ---------- THE TOP BAR (lobby, zones, ARCADE VIEW): three groups on a 1fr | auto | 1fr grid, so the CENTER group (ARCADE
   VIEW, TUNE UP, LEADERBOARD) sits in the middle of the SCREEN whatever the sides hold.
     LEFT    back + where you are (the title shrinks with an ellipsis, never wraps)
     CENTER  the three buttons, even 14 px gaps
     RIGHT   the avatar badge, then sound/settings
   One row, always. arcade.js fitBar() picks the widest step that fits (each a class on .fbar):
     (none)     full labels ("Arcade view", "Tune up", "Leaderboard")
     fit-short    short labels ("View", "Tune up", "Leaders"), the badge's instrument line and Settings' word hidden
     fit-compact  + the back button just its arrow, the badge just its picture (iPad portrait)
     fit-icons    + the center buttons icons only (each keeps its aria-label and a tooltip; phones ≤ 600 px start here)
     fit-tight    + TUNE UP and LEADERBOARD move into the avatar badge's menu
   --z (the zone's color) tints it inside a zone */
.fbar{position:relative;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px;
  padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}
.fb-left{display:flex;align-items:center;gap:10px;min-width:0;justify-self:start;max-width:100%}
.fb-center{display:flex;align-items:center;gap:14px;justify-self:center}
.fb-right{display:flex;align-items:center;gap:8px;min-width:0;justify-self:end;flex-wrap:nowrap}
.fbar .sound-ctl{padding:0;flex-wrap:nowrap}
.fb-back,.fb-btn,.fb-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:6px 14px;border-radius:999px;flex:none;white-space:nowrap;
  border:2px solid var(--z,var(--cyan));background:var(--deep);color:var(--text-hi);font:700 15px var(--text);letter-spacing:.03em;text-decoration:none;cursor:pointer}
.fb-back{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--z-hi,var(--cyan-hi));box-shadow:0 0 10px color-mix(in srgb,var(--z,var(--cyan)) 45%,transparent)}
.fb-back[hidden],.fb-btn[hidden],.fb-title[hidden]{display:none}
.fb-btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fb-view{border-color:var(--yellow-ink);color:var(--yellow-hi)}
.fb-view[data-mode="list"] .fbv-cab,.fb-view[data-mode="cabinets"] .fbv-list{display:none}
.fb-view[aria-pressed="true"]{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 18%,var(--deep));box-shadow:0 0 12px color-mix(in srgb,var(--yellow) 50%,transparent),inset 0 0 8px color-mix(in srgb,var(--yellow) 30%,transparent)}
.fb-tune{border-color:var(--green-ink);color:var(--green-hi)}
.fb-lb{border-color:var(--amber-ink);color:var(--amber-hi)}
.fb-btn:hover,.fb-back:hover,.fb-chip:hover{background:var(--floor-3)}
.fb-view[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--yellow) 26%,var(--deep))}
.fb-btn:focus-visible,.fb-back:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
.fb-short{display:none}
.fbar.fit-short .fb-long{display:none}
.fbar.fit-short .fb-short{display:inline}
.fbar.fit-short .avb-sub,.fbar.fit-short .snd-lbl{display:none}
.fbar.fit-compact .fb-back-l,.fbar.fit-compact .avb-txt,.fbar.fit-compact .avb-pen{display:none}
.fbar.fit-compact .fb-back{padding:6px 10px}
.fbar.fit-compact .avb-btn{padding:4px}
.fbar.fit-icons .fb-l{display:none}
.fbar.fit-icons .fb-btn{padding:6px 10px}
.fbar.fit-icons{column-gap:8px}                     /* phones: every side button 44 px, so the three still fit around the middle */
.fbar.fit-icons .fb-right{gap:6px}
.fbar.fit-icons .avb-btn{padding:2px}
.fbar.fit-icons .snd-btn{padding:6px 9px}
.fbar.fit-icons .fb-center{gap:12px}
.fbar.fit-tight #tuneBtn,.fbar.fit-tight #lbBtn{display:none}
/* the same steps by screen width too, so the bar fits even before (or without) fitBar(): ≤ 900 px short labels and
   compact sides, ≤ 600 px icons. fitBar() can still go further (fit-tight), never wider than these. */
@media (max-width:900px){
  .fbar .fb-long,.fbar .avb-sub,.fbar .snd-lbl,.fbar .fb-back-l,.fbar .avb-txt,.fbar .avb-pen{display:none}
  .fbar .fb-short{display:inline}
  .fbar .fb-back{padding:6px 10px}
  .fbar .avb-btn{padding:4px}
  .fbar .fb-title{font-size:18px}
}
@media (max-width:600px){
  .fbar .fb-l{display:none}
  .fbar .fb-btn{padding:6px 10px}
  .fbar{column-gap:8px}
  .fbar .fb-right{gap:6px}
  .fbar .avb-btn{padding:2px}
  .fbar .snd-btn{padding:6px 9px}
  .fbar .fb-center{gap:12px}
  .fbar .fb-title{font-size:16px}
}
.fb-chip{border-color:var(--line);padding:4px 14px 4px 4px}
.fb-chip .chip-pic{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--floor-3);display:grid;place-items:center}
.fb-chip .chip-pic .pt-box{width:34px}
.fb-title{margin:0;min-width:0;font-family:var(--display);font-weight:400;font-size:clamp(18px,2.6vw,30px);letter-spacing:.05em;text-transform:uppercase;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--z-hi,var(--text-hi));text-shadow:0 0 4px var(--z,transparent),0 0 16px var(--z-ink,transparent)}
.fbar.fit-compact .fb-title{font-size:18px}
.fbar.fit-icons .fb-title{font-size:16px}
/* the avatar badge's menu entries for TUNE UP (and the LEADERBOARD it always has) when the bar is too narrow for them */
.avb-item.avb-tune{display:none}
.fbar.fit-tight .avb-item.avb-tune{display:flex}

/* ---------- ARCADE VIEW's switch (top of LIST and CABINETS): [▦ LIST | 🕹 CABINETS], a radiogroup ---------- */
.vsw{display:flex;justify-content:center;margin:2px auto 8px;padding:0 12px;width:max-content;max-width:100%;gap:0}
.zone .vsw{display:none}
.v-full .zone .vsw{display:flex}
.vsw-opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:6px 18px;border:2px solid var(--yellow-ink);background:var(--deep);
  color:var(--text-lo);font:400 15px var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.vsw-opt:first-child{border-radius:999px 0 0 999px;border-right-width:1px}
.vsw-opt:last-child{border-radius:0 999px 999px 0;border-left-width:1px}
.vsw-opt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vsw-opt[aria-checked="true"]{color:var(--deep);background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 12px color-mix(in srgb,var(--yellow) 55%,transparent)}
.vsw-opt:not([aria-checked="true"]):hover{background:var(--floor-3);color:var(--text-hi)}
.vsw-opt:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px;position:relative;z-index:1}

/* ---------- neon sign ---------- */
.sign{text-align:center;padding:0 16px 4px}
.neon{font-family:var(--neon-font);font-weight:400;font-size:var(--logo,48px);line-height:1.1;letter-spacing:.04em;
  color:var(--pink-hi);text-shadow:0 0 2px var(--pink-hi),0 0 8px var(--pink),0 0 22px var(--pink-ink)}
.neon span{color:var(--cyan-hi);text-shadow:0 0 2px var(--cyan-hi),0 0 8px var(--cyan),0 0 22px var(--cyan-ink)}
.neon span{animation:flicker 7s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:1}91%{opacity:.55}92%{opacity:1}94%{opacity:.7}95%{opacity:1}}
.sign p{margin:4px auto 0;max-width:40ch;color:var(--text-lo);font-size:17px}

/* ---------- A ZONE: the carousel with only its cabinets (there's no big sign here, so the cabinets get its room) ---------- */
.floor-page.v-zone{--cab-w:clamp(180px, min(64vw, calc((100vh - 300px) / 2)), 290px)}
@supports (height:100svh){ .floor-page.v-zone{--cab-w:clamp(180px, min(64vw, calc((100svh - 300px) / 2)), 290px)} }
.zone[hidden],.lobby[hidden],.allg[hidden]{display:none}
.zone.single .nav,.zone.single .lights{display:none}
.aisle-flags{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:6px;pointer-events:none}
.slot.nofit .cab{filter:brightness(.5) saturate(.45)}

/* ---------- THE FULL ARCADE (#full-arcade): every cabinet in one carousel, a zone tag under each, the jump strip ---------- */
.floor-page.v-full{--cab-w:clamp(170px, min(60vw, calc((100vh - 380px) / 2.1)), 280px)}
@supports (height:100svh){ .floor-page.v-full{--cab-w:clamp(170px, min(60vw, calc((100svh - 380px) / 2.1)), 280px)} }
.v-full .aisle{height:calc(var(--cab-w) * 2.2)}
.v-full .lights{display:none}
.cab-ztag{position:absolute;left:50%;top:calc(var(--cab-w) * 2.02);transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.info-tags .ztag{font-size:13px}
.jump-strip{display:flex;align-items:stretch;gap:6px;max-width:100%;margin:6px auto 0;padding:6px 16px 10px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.jump-strip[hidden]{display:none}
.jump-strip::before,.jump-strip::after{content:"";flex:1 0 0}          /* centered when it fits, scrolls when it doesn't */
.jg{flex:none;display:flex;flex-direction:column;gap:3px;padding-left:6px;border-left:3px solid var(--z)}
.jg-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--z-hi);white-space:nowrap;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.jg-row{display:flex;gap:5px}
.jump{flex:none;width:90px;min-height:44px;padding:3px;border-radius:10px;border:2px solid var(--floor-3);background:var(--deep);cursor:pointer;display:grid;place-items:center}
.jump .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:6px}
.jump .mq-wait{background:var(--floor-2)}
.jump:hover{border-color:var(--z)}
.jump.nofit .mq-thumb{opacity:.5;filter:saturate(.35)}
.jump[aria-current="true"]{border-color:var(--z-hi);box-shadow:0 0 0 2px var(--z),0 0 14px var(--z)}
.jump:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
@media (max-width:640px){ .jump{width:74px} .jg-name{font-size:10px} .jump-strip{padding:4px 12px 8px} }
.start3d.nofit,.cab-start.nofit{filter:saturate(.35) brightness(.8)}
.info-tags{margin:0 0 8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.info-tags:empty{display:none}
.info-tags .as-note{color:var(--yellow-hi);font-weight:700}

/* ---------- badges and tags (lobby, zones, ALL GAMES) ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font:400 12px var(--display);letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.b-assigned{background:var(--yellow);color:var(--deep);box-shadow:var(--glow-yellow)}
.b-2p{background:var(--pink);color:var(--deep)}
.fit-tag{display:inline-block;padding:3px 9px;border-radius:8px;border:2px solid var(--amber);color:var(--amber-hi);background:var(--deep);font-weight:700;font-size:13px}

/* ---------- carousel ---------- */
.carousel{position:relative;margin-top:14px}
.aisle{position:relative;height:calc(var(--cab-w) * 2.08);perspective:1000px;perspective-origin:50% 40%;touch-action:pan-y;overflow:hidden;
  -webkit-user-select:none;user-select:none}
.slot{position:absolute;top:0;left:50%;width:var(--cab-w);margin-left:calc(var(--cab-w) / -2);
  transition:transform .42s cubic-bezier(.25,.8,.3,1),opacity .42s;will-change:transform}
.slot.jump{transition:none}
.slot[data-d="0"]{z-index:5}
.slot[data-d="-1"]{transform:translateX(calc(var(--step) * -1)) translateZ(-180px) rotateY(-34deg);opacity:.5;z-index:4;cursor:pointer}
.slot[data-d="1"]{transform:translateX(var(--step)) translateZ(-180px) rotateY(34deg);opacity:.5;z-index:4;cursor:pointer}
.slot[data-d="-2"]{transform:translateX(calc(var(--step) * -1.75)) translateZ(-420px) rotateY(-40deg);opacity:.22;z-index:3;cursor:pointer}
.slot[data-d="2"]{transform:translateX(calc(var(--step) * 1.75)) translateZ(-420px) rotateY(40deg);opacity:.22;z-index:3;cursor:pointer}
.slot[data-d="-3"]{transform:translateX(calc(var(--step) * -2.4)) translateZ(-600px) rotateY(-44deg);opacity:0;visibility:hidden}
.slot[data-d="3"]{transform:translateX(calc(var(--step) * 2.4)) translateZ(-600px) rotateY(44deg);opacity:0;visibility:hidden}
.slot:not([data-d="0"]) .cab-start{pointer-events:none}
.slot:not([data-d="0"]) .cab::after{opacity:.15}

/* 3D view (arcade3d.js): the canvas fills the aisle; START is a real link placed over the front cabinet */
.aisle.loading-3d .slot{visibility:hidden}
.aisle.is-3d .slot{display:none}
.floor3d{position:absolute;inset:0;display:block;cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.start3d{position:absolute;z-index:6;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-width:120px;min-height:48px;padding:8px 26px;
  font-family:var(--display);font-size:20px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--deep);background:var(--t,var(--yellow));
  border:3px solid var(--t-hi,var(--yellow-hi));border-radius:999px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),var(--t-glow,var(--glow-yellow))}
.fps3d{position:absolute;left:8px;bottom:8px;z-index:7;padding:4px 8px;border-radius:6px;background:var(--deep);color:var(--text-lo);font-size:13px;font-variant-numeric:tabular-nums}
.start3d:hover{background:var(--t-hi,var(--yellow-hi))}
.start3d:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px}

/* big arrow buttons, level with the cabinet's screen */
.nav{position:absolute;top:calc(var(--cab-w) * .62);z-index:10;display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;
  background:var(--deep);border:3px solid var(--cyan);color:var(--cyan-hi);box-shadow:var(--glow-cyan)}
.nav svg{width:26px;height:26px;fill:currentColor}
.nav:hover{background:var(--cyan);color:var(--deep)}
.nav:active{transform:scale(.94)}
.nav:disabled{opacity:.3;cursor:default;box-shadow:none}
.nav:disabled:hover{background:var(--deep);color:var(--cyan-hi)}
.nav:disabled:active{transform:none}
.nav-prev{left:max(16px, calc(50% - var(--cab-w) * 1.55))}
.nav-next{right:max(16px, calc(50% - var(--cab-w) * 1.55))}

/* indicator lights */
.lights{display:flex;justify-content:center;gap:4px;margin-top:4px}
.light{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%}
.light i{display:block;width:16px;height:16px;border-radius:50%;background:var(--led-off);border:2px solid var(--floor-3)}
.light:hover i{background:var(--text-dim)}
.light[aria-current="true"] i{background:var(--yellow);border-color:var(--yellow-hi);box-shadow:var(--glow-yellow)}

/* ---------- about the front game (real text, AA contrast) ---------- */
.info{max-width:560px;margin:4px auto 0;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center}
.info-skill{margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.info-name{font-family:var(--display);font-weight:400;font-size:clamp(24px,5vw,32px);line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:var(--text-hi);margin:2px 0 6px}
.info-blurb{margin:0;color:var(--text-lo);font-size:17px}
.hiscore{display:inline-block;margin:0 0 10px;padding:6px 14px;border:2px solid var(--yellow-ink);border-radius:10px;background:var(--deep);
  font-weight:700;font-size:16px;letter-spacing:.04em;color:var(--text-hi);font-variant-numeric:tabular-nums}
.hiscore b{font-family:var(--display);font-weight:400;color:var(--yellow);letter-spacing:.08em}
.hiscore .star{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)}
.hiscore .who{color:var(--text-lo);font-weight:400}
.hiscore .scales-note{display:block;margin-top:2px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--text-lo)}
.hiscore .np-link{color:var(--yellow-hi);font-weight:700;text-underline-offset:3px}
.note{color:var(--text-lo);font-size:15px;text-align:center;margin:0 16px 24px}

/* one cabinet at a time on phones: the neighbors step out of view, the arrows sit beside it */
@media (max-width:599px){
  .floor-page{--step:calc(var(--cab-w) * 1.5)}
  .slot:not([data-d="0"]){opacity:0;visibility:hidden}
  .nav{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  .neon span{animation:none}
  .slot{transition:none}
  .aisle.fade{animation:fade .25s ease-out}
  @keyframes fade{from{opacity:0}}
}

/* ---------- PRESS START: the attract screen on the first visit (arcade.js). A real button covering everything. ---------- */
.press-start{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);
  width:100%;margin:0;padding:24px 16px;border:0;cursor:pointer;color:var(--text-hi);font:inherit;text-align:center;
  background:radial-gradient(60% 40% at 50% 42%, rgba(184,107,255,.16), transparent 70%),linear-gradient(180deg,var(--deep),var(--floor) 70%,var(--deep))}
.press-start[hidden]{display:none}
.press-start:focus-visible{outline:3px solid var(--cyan);outline-offset:-10px}
.ps-sign{font-size:clamp(40px,min(11vw,12vh),110px)}
.ps-start{font-family:var(--display);font-size:clamp(26px,5.5vw,48px);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow-hi);text-shadow:var(--glow-yellow)}
.ps-hint{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-lo)}
@media (prefers-reduced-motion:no-preference){
  .ps-start{animation:ps-blink 1.1s steps(1) infinite}
  .press-start.go{animation:ps-flash .32s ease-out forwards}
}
@keyframes ps-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes ps-flash{0%{background:var(--white-hi);opacity:1}35%{opacity:.9}100%{opacity:0}}
.press-start.go{pointer-events:auto}

/* ---------- SELECT YOUR PLAYER as a view on this page (select-player/player.js + style.css) ----------
   It covers the floor and scrolls by itself; the floor behind it is hidden (and the 3D view stops drawing). */
.sp-view{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--deep),var(--floor) 60%,var(--deep))}
/* overlays added to the page (the skins catch-up card, BACKUP / RESTORE, "Create your player?") go above the view */
body.in-select>.overlay{z-index:40}
.sp-view[hidden]{display:none}
body.in-select{overflow:hidden}
body.in-select>.sign,body.in-select>main,body.in-select>#soundCtl{visibility:hidden}
body.in-select>.fbar,body.in-select>.lobby,body.in-select>main,body.in-select>.allg{visibility:hidden}
.sp-view.pick .sp-marquee{width:auto;height:auto;justify-content:center}
.sp-view.pick .sp-arcade{margin:0 auto;text-align:center;font-size:clamp(26px,min(5vw,6vh),48px);white-space:nowrap}

/* ---------- THE ZONE LOBBY (lobby.js): a dark arcade wall, one neon sign per zone. Flat HTML/CSS, no 3D. ---------- */
.lobby{position:relative;padding:0 max(16px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.lobby .sign{--logo:clamp(34px, min(8.5vw, 8vh), 80px)}
.lobby-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1100px;margin:10px auto 14px}
.lobby-cards[hidden]{display:none}
.lcard{flex:1 1 320px;max-width:520px;display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;text-align:left;cursor:pointer;
  border:2px solid var(--z,var(--cyan));background:linear-gradient(90deg,var(--deep),var(--floor-2));color:var(--text-hi)}
.lc-assigned{border-color:var(--yellow);box-shadow:var(--glow-yellow),inset 0 0 18px color-mix(in srgb,var(--yellow) 18%,transparent)}
.lc-pic{flex:0 0 min(46%,220px)}
.lc-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:8px}
.lc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-label{font:400 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--z-hi,var(--cyan-hi))}
.lc-assigned .lc-label{color:var(--yellow-hi)}
.lc-name{font:400 clamp(17px,2.4vw,22px) var(--display);letter-spacing:.03em;text-transform:uppercase}
.lc-note{color:var(--yellow-hi);font-weight:700;font-size:15px}
.lcard:hover{background:var(--floor-3)}

/* ---------- TODAY'S PRACTICE (lobby.js practiceCard, shared/practice.js): the first card, the whole row. The steps in a row
   (stacked on narrow phones), THIS WEEK at the right (below on phones). Done = a green ✓ + "Done" (never color alone),
   dimmed a little; the next step glows gently (none under reduced motion); all 3 = gold + the stamp (once). ---------- */
.pr-card{--pr:var(--cyan);--pr-hi:var(--cyan-hi);--pr-ink:var(--cyan-ink);flex:1 1 100%;max-width:1100px;min-width:0;box-sizing:border-box;display:flex;
  flex-direction:column;gap:10px;padding:12px 14px 14px;border-radius:18px;border:3px solid var(--pr);color:var(--text-hi);
  background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--pr) 14%,transparent),transparent 70%),linear-gradient(90deg,var(--deep),var(--floor-2));
  box-shadow:0 0 0 3px var(--deep),0 0 16px color-mix(in srgb,var(--pr) 40%,transparent),inset 0 0 20px color-mix(in srgb,var(--pr) 12%,transparent)}
.pr-card.gold{--pr:var(--yellow);--pr-hi:var(--yellow-hi);--pr-ink:var(--amber-ink)}
html[data-slook] .pr-card{background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--pr) 14%,transparent),transparent 70%),color-mix(in srgb,var(--deep) 88%,transparent)}
.pr-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;align-items:stretch;min-width:0}
.pr-body[hidden]{display:none}
.pr-head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;cursor:pointer;min-width:0}
/* ▲ / ▼: hide the card to its slim bar (lobby.js togglePractice); the chevron turns ▼ when collapsed */
.pr-toggle{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:-6px -6px -6px auto;border-radius:12px;border:2px solid transparent;
  background:transparent;color:var(--pr-hi);cursor:pointer}
.pr-toggle:hover{background:var(--floor-3)}
.pr-toggle:focus-visible{outline:4px solid var(--text-hi);outline-offset:2px}
.pr-toggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pr-card.collapsed .pr-toggle svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:no-preference){ .pr-toggle svg{transition:transform .2s ease} }
.pr-seal+.pr-toggle{margin-left:4px}
/* THE SLIM BAR (collapsed): one line, the title, three small step dots, "1 of 3", ▼ */
.pr-card.collapsed{padding:6px 10px 6px 14px}
.pr-card.collapsed .pr-head{flex-wrap:nowrap;gap:10px}
.pr-card.collapsed .pr-title{font-size:clamp(15px,2.2vw,22px);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pr-mini{display:flex;align-items:center;gap:8px;flex:none}
.pr-dots{display:flex;gap:4px}
.pr-mdot{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--text-lo);box-sizing:border-box}
.pr-mdot.on{border-color:var(--green);background:var(--green);color:var(--deep)}
.pr-mdot svg{width:80%;height:80%;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pr-count{font-weight:700;font-size:15px;color:var(--text-hi);white-space:nowrap}
@media (max-width:480px){
  .pr-card.collapsed{padding:4px 6px 4px 12px}
  .pr-card.collapsed .pr-head{gap:7px}
  .pr-card.collapsed .pr-title{font-size:13px;letter-spacing:.01em}
  .pr-mini{gap:6px} .pr-dots{gap:3px} .pr-mdot{width:16px;height:16px} .pr-count{font-size:14px}
}
.pr-title{margin:0;font:400 clamp(20px,3vw,30px) var(--display);letter-spacing:.04em;text-transform:uppercase;line-height:1.1;color:var(--pr-hi);
  text-shadow:0 0 3px var(--pr-hi),0 0 12px var(--pr),0 0 24px var(--pr-ink)}
.pr-plus{white-space:nowrap}
.pr-sub{margin:0;color:var(--text-lo);font-size:16px}
.gold .pr-sub{color:var(--text-hi);font-weight:700}
.pr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pr-steps>li{display:flex;min-width:0}
.pr-step{position:relative;flex:1;min-width:0;min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:8px 10px;
  padding:8px 10px 10px;border-radius:14px;border:2px solid var(--floor-3);background:var(--deep);color:var(--text-hi);text-align:left;cursor:pointer}
.pr-step:hover{background:var(--floor-3)}
.pr-step:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.pr-pic{grid-column:1/-1;display:block;min-width:0}
.pr-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:8px}
.pr-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-word{font:400 14px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--pr-hi)}
.pr-n{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:4px;border-radius:50%;background:var(--pr);color:var(--deep);font-weight:400;letter-spacing:0}
.pr-task{font-weight:700;font-size:16px;line-height:1.25;overflow-wrap:break-word}
.pr-why{color:var(--text-lo);font-size:14px;line-height:1.25}
.pr-mark{align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.pr-check{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--text-lo);flex:none}
.pr-check svg,.pr-dot svg,.pr-seal svg{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pr-step.done{border-color:var(--green)}
.pr-step.done .pr-pic,.pr-step.done .pr-txt{opacity:.72}
.pr-step.done .pr-check{border-color:var(--green);background:var(--green);color:var(--deep)}
.pr-done{font:700 13px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--green-hi)}
.pr-step.next{border-color:var(--pr)}
@media (prefers-reduced-motion:no-preference){ .pr-step.next{animation:pr-glow 2.6s ease-in-out infinite} }
@keyframes pr-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 14px color-mix(in srgb,var(--pr) 55%,transparent)}}
/* THIS WEEK: 7 stamps, Monday to Sunday (filled = a ✓, today outlined) */
.pr-week{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px 12px;border-radius:14px;
  border:1px solid var(--floor-3);background:color-mix(in srgb,var(--deep) 70%,transparent)}
.pr-week-h{margin:0;font:400 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--pr-hi)}
.pr-stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.pr-stamp{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:26px}
.pr-day{font-size:13px;font-weight:700;color:var(--text-lo)}
.pr-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px dashed var(--floor-3);box-sizing:border-box}
.pr-stamp.on .pr-dot{border:2px solid var(--yellow);background:var(--yellow);color:var(--deep)}
.pr-stamp.today .pr-dot{outline:2px solid var(--text-hi);outline-offset:2px}
.pr-stamp.today .pr-day{color:var(--text-hi)}
.pr-week-n{margin:0;font-size:14px;color:var(--text-hi);text-align:center}
/* the gold card's stamp: one press, once a day (stamp-go); a plain fade under reduced motion (stamp-fade) */
.pr-seal{margin-left:auto;display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:3px solid var(--yellow);
  color:var(--yellow-hi);font:400 14px var(--display);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);background:var(--deep)}
.pr-seal svg{width:18px;height:18px}
.pr-card.stamp-go .pr-seal{animation:pr-stamp .6s cubic-bezier(.2,1.4,.4,1) both}
.pr-card.stamp-fade .pr-seal{animation:pr-fade .5s ease-out both}
@keyframes pr-stamp{0%{opacity:0;transform:rotate(-6deg) scale(2.2)}70%{opacity:1;transform:rotate(-6deg) scale(.92)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes pr-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .pr-card.stamp-go .pr-seal{animation:pr-fade .5s ease-out both} }
@media (max-width:860px){ .pr-body{grid-template-columns:minmax(0,1fr)} .pr-week{flex-direction:row;flex-wrap:wrap;gap:6px 14px} }
/* ---------- SAVE YOUR PROGRESS (shared/backup-nudge.js): now and then, a slim banner under the lobby cards (never a popup).
   A drawn floppy disk, one friendly line, SAVE NOW + Not now (48 px). It fades in once; no motion under reduced motion. ---------- */
.save-nudge{max-width:1100px;margin:0 auto}
.save-nudge:empty{display:none}
.bn-card{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px;padding:10px 14px;border-radius:16px;
  border:2px solid var(--cyan);background:linear-gradient(90deg,var(--deep),var(--floor-2));color:var(--text-hi)}
.bn-break{border-color:var(--yellow)}
.bn-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--cyan-hi);border:2px solid var(--cyan-ink);background:var(--deep)}
.bn-break .bn-icon{color:var(--yellow-hi);border-color:var(--yellow-ink)}
.bn-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bn-text{flex:1 1 260px;min-width:0}
.bn-msg{margin:0;font-size:16px;line-height:1.35}
.bn-msg b{color:var(--cyan-hi)}
.bn-break .bn-msg b{color:var(--yellow-hi)}
.bn-tip{margin:4px 0 0;font-size:14px;line-height:1.35;color:var(--text-lo)}
.bn-acts{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.bn-acts .btn{min-height:48px}
.bn-card.bn-in{animation:bn-fade .45s ease-out both}
@keyframes bn-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .bn-card.bn-in{animation:none} }
@media (max-width:600px){ .bn-acts{margin-left:0;width:100%} .bn-acts .btn{flex:1 1 auto} }
@media (max-width:600px){
  .pr-steps{grid-template-columns:minmax(0,1fr)}
  .pr-step{grid-template-columns:minmax(0,96px) minmax(0,1fr) auto;grid-template-rows:auto;align-items:center}
  .pr-pic{grid-column:auto}
  .pr-why{display:none}
}

.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);max-width:1100px;margin:0 auto}
@media (orientation:portrait),(max-width:700px){ .zones{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* a lone sign on the last row (7 zones: 3 + 3 + 1, or 2 + 2 + 2 + 1) stands in the middle, the same size as the others */
@media (orientation:landscape) and (min-width:701px){
  .zones{grid-template-columns:repeat(6,minmax(0,1fr))} .zsign{grid-column:span 2}
  .zsign:last-child:nth-child(3n+1){grid-column:3/5}
  .zsign:nth-last-child(2):nth-child(3n+1){grid-column:2/4} .zsign:last-child:nth-child(3n+2){grid-column:4/6}
}
@media (orientation:portrait),(max-width:700px){
  .zones{grid-template-columns:repeat(4,minmax(0,1fr))} .zsign{grid-column:span 2}
  .zsign:last-child:nth-child(2n+1){grid-column:2/4}
}
.zsign{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:clamp(150px,22vh,220px);padding:16px 12px 12px;
  border-radius:20px;border:3px solid var(--z);cursor:pointer;color:var(--text-hi);text-align:center;
  background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--z) 16%,transparent),transparent 70%),var(--deep);
  box-shadow:0 0 0 3px var(--deep),0 0 18px color-mix(in srgb,var(--z) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--z) 14%,transparent)}
.zsign:hover,.zsign:focus-visible{background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--z) 26%,transparent),transparent 72%),var(--deep)}
.zsign:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px}
.zsign:active{transform:scale(.98)}
.zs-name{font:400 clamp(20px,3.2vw,34px) var(--display);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;color:var(--z-hi);
  text-shadow:0 0 3px var(--z-hi),0 0 12px var(--z),0 0 26px var(--z-ink)}
.zs-tag{color:var(--text-lo);font-size:clamp(13px,1.6vw,16px);max-width:32ch}
.zs-cabs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,1vw,6px);height:clamp(34px,6vh,54px);margin-top:2px;max-width:100%}
/* a sign with many games (No Instrument Needed: 7) shrinks its silhouettes to fit, never past its border */
.zs-cabs .cab-sil{flex:0 1 auto;min-width:0}
.cab-sil{height:100%;width:auto;overflow:visible}
.cab-sil path{fill:var(--cab-face);stroke:var(--t);stroke-width:14;stroke-linejoin:round}
.zs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font-size:15px;color:var(--text-lo)}
.zs-stars{font-variant-numeric:tabular-nums;color:var(--text-hi)}
.zs-stars .star,.gc-stars .star{color:var(--yellow);text-shadow:0 0 6px rgba(255,225,77,.6)}
.zsign .b-assigned{position:absolute;top:-11px;right:14px}
/* each sign turns on with a short, gentle flicker (twice, once per page load, one after another, only the sign itself:
   well under 3 flashes a second), then hums: a slow breathing glow */
@media (prefers-reduced-motion:no-preference){
  .zsign.flick{animation:zs-on 1s linear both;animation-delay:calc(var(--i) * .16s)}
  .zs-name{animation:zs-hum 4.5s ease-in-out infinite}
}
@keyframes zs-on{0%{opacity:.18}18%{opacity:.7}30%{opacity:.35}55%{opacity:1}66%{opacity:.8}100%{opacity:1}}
@keyframes zs-hum{0%,100%{text-shadow:0 0 3px var(--z-hi),0 0 12px var(--z),0 0 26px var(--z-ink)}50%{text-shadow:0 0 3px var(--z-hi),0 0 8px var(--z),0 0 18px var(--z-ink)}}
/* THE PRIZE COUNTER's sign (lobby.js prizeSign; the counter itself: shared/prizes.css): the balance and the WISH bar */
.zs-prize .zs-bal{display:flex;align-items:center;gap:6px;color:var(--text-hi);font-size:16px}
.zs-prize .zs-bal b{font:400 20px var(--display);color:var(--yellow)}
.zs-prize .zs-bal small{color:var(--text-lo);font-size:14px}
.zs-prize .tk-ic{--tk-size:18px;vertical-align:-3px}
.zs-wish{display:flex;flex-direction:column;align-items:center;gap:3px;width:min(92%,300px);font-size:14px;color:var(--text-lo)}
.zs-wish-t{color:var(--text-hi);font-weight:700;text-wrap:balance}
.zs-bar{display:flex;width:100%;height:10px;border-radius:6px;background:var(--floor-3);overflow:hidden;box-shadow:inset 0 0 0 1px var(--amber-ink)}
.zs-have{background:var(--yellow)}.zs-wait{background:color-mix(in srgb,var(--yellow) 38%,transparent)}
.zs-wish-go{color:var(--yellow);font-weight:700}
.zs-wish-left{color:var(--amber-hi);font-weight:700}
/* the wish pulse waits while the lobby queue has a panel or toast up or next (shared/lobby-queue.js sets body.lq-quiet) */
@media (prefers-reduced-motion:no-preference){ .lq-quiet .zs-wish.ready .zs-wish-go{animation:zs-ready 2.4s ease-in-out infinite} }
@keyframes zs-ready{0%,100%{opacity:1}50%{opacity:.6}}

/* ---------- ALL GAMES (lobby.js): every game once, as a card; the page scrolls ---------- */
.allg{padding:4px max(16px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.allg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;max-width:1200px;margin:0 auto}
.gcard{display:flex;flex-direction:column;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;color:var(--text-hi);
  border:2px solid var(--z,var(--line));background:var(--floor-2);box-shadow:0 0 12px color-mix(in srgb,var(--z,transparent) 30%,transparent)}
.gcard:hover{background:var(--floor-3)}
.gcard:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.gc-pic{position:relative;display:block}
.gc-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1}
.gc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.gc-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;flex:none}
.gc-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.gc-name{font:400 19px var(--display);letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.gc-skill{color:var(--text-lo);font-size:14px}
.gc-zones{display:flex;flex-wrap:wrap;gap:4px}
.ztag{padding:2px 8px;border-radius:999px;border:2px solid var(--z);color:var(--z-hi);font-size:12px;font-weight:700;background:var(--deep)}
.gc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px;font-size:15px}
/* "No instrument needed": the card's tag and ALL GAMES' filter chip (lobby.js; games.js noInstrument) */
.ni-tag{padding:2px 8px;border-radius:999px;border:2px dashed var(--cyan);color:var(--cyan-hi);font-size:12px;font-weight:700;background:var(--deep)}
.allg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:1200px;margin:0 auto 12px}
.allg-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border-radius:999px;cursor:pointer;
  border:2px solid var(--cyan);background:var(--deep);color:var(--cyan-hi);font:700 15px var(--text)}
.allg-chip:hover{background:var(--floor-3)}
.allg-chip:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.allg-chip[aria-pressed="true"]{background:var(--cyan);color:var(--deep);box-shadow:var(--glow-cyan)}
.allg-chk{width:16px;height:16px;border-radius:4px;border:2px solid currentColor;flex:none;position:relative}
.allg-chip[aria-pressed="true"] .allg-chk::after{content:'';position:absolute;left:3px;top:0;width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.allg-count{color:var(--text-lo);font-size:14px}
.gc-stars{font-variant-numeric:tabular-nums}
.gc-sum{color:var(--text-lo);font-size:14px}
.mq-none{display:grid;place-items:center;aspect-ratio:4/1;background:var(--deep);font:400 18px var(--display)}
/* a game that doesn't suit the instrument: still there, dimmed, with its tag (the tag stays bright to read) */
.nofit .mq-thumb,.nofit .gc-name,.nofit .lc-name,.nofit .gc-skill{opacity:.5;filter:saturate(.35)}

/* the "doesn't suit your instrument" panel */
.fit-panel .fit-pic .mq-thumb{display:block;width:100%;aspect-ratio:4/1;border-radius:10px;margin-bottom:12px}
.fit-panel p{color:var(--text-hi)}

/* ---------- SEASONAL EVENTS (season-lobby.js, shared/seasons.js): the banner, the event panel, the signs' touch ----------
   --ev / --ev2 = the event's two theme colors. Nothing flashes; the gift breathes only without reduced motion and with
   MOVING BACKGROUNDS on (.ev-still). The whole backdrop is SEASONAL LOOKS (end of this file). */
.ev-banner-row{display:flex;justify-content:center;max-width:1100px;margin:6px auto 0;position:relative;z-index:1}
.ev-banner{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 10px;min-height:44px;padding:8px 18px;border-radius:999px;cursor:pointer;
  border:2px solid var(--ev);color:var(--text-hi);font:400 clamp(14px,1.9vw,18px) var(--display);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ev) 30%,var(--deep)),var(--deep) 50%,color-mix(in srgb,var(--ev2) 26%,var(--deep)));
  box-shadow:0 0 14px color-mix(in srgb,var(--ev) 45%,transparent),inset 0 0 12px color-mix(in srgb,var(--ev) 20%,transparent)}
.ev-banner:hover,.ev-banner:focus-visible{background:linear-gradient(90deg,color-mix(in srgb,var(--ev) 45%,var(--deep)),var(--floor-2) 50%,color-mix(in srgb,var(--ev2) 36%,var(--deep)))}
.ev-banner:focus-visible{outline:3px solid var(--text-hi);outline-offset:3px}
.ev-emoji{font-size:1.25em;line-height:1}
.ev-name{color:var(--ev-hi)}
.ev-gift,.ev-count,.ev-pv{font:700 12px/1 var(--text);letter-spacing:.04em;padding:5px 8px;border-radius:999px;text-transform:uppercase}
.ev-gift{background:var(--ev2);color:var(--deep)}
.ev-count{border:1px solid var(--ev2-hi);color:var(--ev2-hi)}
.ev-pv{border:1px dashed var(--text-lo);color:var(--text-lo)}
@media (prefers-reduced-motion:no-preference){ .lobby:not(.ev-still) .ev-gift{animation:ev-breathe 2.4s ease-in-out infinite} }
@keyframes ev-breathe{50%{box-shadow:0 0 10px var(--ev2)}}

.ev-pan{max-width:640px;text-align:left;border-color:var(--ev);box-shadow:0 0 24px color-mix(in srgb,var(--ev) 40%,transparent)}
.ev-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ev-head h2{margin:0;font:400 clamp(20px,3.4vw,28px) var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ev-hi);text-wrap:balance}
.ev-emoji.big{font-size:40px}
.ev-when{margin:2px 0 0;color:var(--text-lo)}
.ev-pan h3{margin:14px 0 8px;font:400 15px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ev2-hi)}
.ev-giftbox{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 14px;padding:10px 14px;border-radius:14px;border:2px solid var(--ev2);background:color-mix(in srgb,var(--ev2) 10%,var(--deep))}
.ev-giftbox h3{grid-column:1/-1;margin:0}
.ev-done{margin:0;color:var(--green-hi);font-weight:700}
.ev-item{display:flex;align-items:center;gap:12px;min-width:0}
.ev-pic{position:relative;flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:12px;background:var(--floor-2);overflow:hidden}
.ev-pic .pt-box{width:72px;height:72px}
.ev-pic.locked>:not(.ev-lock){filter:saturate(.55) brightness(.8)}
.ev-lock{position:absolute;right:2px;bottom:0;font-size:16px}
.ev-sprite img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain}
.ev-plate{padding:0 4px;font-size:11px;font-weight:700;text-align:center;text-wrap:balance;overflow-wrap:break-word;color:var(--text-hi)}
.ev-iname{font-weight:700;color:var(--text-hi);text-wrap:balance}
.ev-ladder ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ev-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px 14px;padding:8px 12px;border-radius:14px;border:1px solid var(--floor-3);background:var(--deep)}
.ev-step.done{border-color:var(--green)}
.ev-goal{display:flex;flex-direction:column;gap:5px}
.ev-goal b{color:var(--text-hi)}
.ev-goal small{color:var(--text-lo);font-size:14px}
.ev-step.done .ev-goal small{color:var(--green-hi);font-weight:700}
.ev-bar{display:block;height:12px;border-radius:999px;background:var(--floor-3);overflow:hidden}
.ev-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ev),var(--ev2))}
.ev-step.done .ev-bar i{background:var(--green)}
.ev-foot{margin:12px 0 0}
.ev-pan .acts{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ev-decot{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-lo);cursor:pointer}
.ev-decot input{width:22px;height:22px;accent-color:var(--ev)}
/* THE BONUS LADDER (an event's optional `bonus`): locked = one line + the bonus items as dark silhouettes */
.ev-bonus{margin-top:4px}
.ev-bonus-locked{padding:10px 14px;border-radius:14px;border:1px dashed var(--ev2);background:color-mix(in srgb,var(--ev2) 8%,var(--deep))}
.ev-bonus-locked h3{margin-top:0}
.ev-bonus-line{margin:0;color:var(--text-hi);font-weight:700;text-wrap:balance}
.ev-sils{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ev-sil{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:10px;background:var(--floor-2);overflow:hidden}
.ev-sil .pt-box{width:52px;height:52px}
.ev-sil>*{filter:brightness(0) drop-shadow(0 0 1px var(--text-lo))}
.ev-sil .ev-plate{font-size:8px;padding:0 2px}
@media (max-width:520px){ .ev-step{grid-template-columns:1fr} .ev-giftbox{grid-template-columns:1fr} }

.lobby>.sign,.lobby>.lobby-cards,.lobby>.save-nudge,.lobby>.zones{position:relative;z-index:1}
/* the signs themselves: snow on top (Winter Fest), a small flower (Spring Bloom) */
.lobby[data-deco="winter"] .zsign::before{content:"";position:absolute;left:10px;right:10px;top:-7px;height:12px;border-radius:12px 12px 6px 6px;background:var(--av-white);opacity:.8;
  box-shadow:0 2px 0 var(--cyan-hi)}
.lobby[data-deco="flowers"] .zsign::before{content:"";position:absolute;left:12px;top:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(var(--yellow) 30%,var(--pink-hi) 32%);opacity:.85}
.lobby[data-deco="spooky"] .zsign::before{content:"";position:absolute;right:10px;bottom:6px;width:26px;height:26px;opacity:.28;
  background:linear-gradient(45deg,transparent 48%,var(--text-lo) 49% 51%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--text-lo) 49% 51%,transparent 52%),
  radial-gradient(circle,transparent 5px,var(--text-lo) 6px,transparent 7px,transparent 10px,var(--text-lo) 11px,transparent 12px)}

/* ---------- THE LEADERBOARD (leaderboard-screen.js): a full screen over the floor ---------- */
body.lb-open{overflow:hidden}
.lb-view{position:fixed;inset:0;z-index:70;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--amber) 14%,transparent),transparent 60%),var(--floor);color:var(--text-hi);
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.lb-view[hidden]{display:none}
.lb-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* the header: [empty 48 px | 🏆 LEADERBOARD 🏆 | ✕ 48 px], so the title is centered on the whole panel and ✕ never pushes it;
   the title (≈ 12 em wide) is sized to the room between the two side columns, so a phone never squeezes it under ✕ */
.lb-head{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px}
.lb-title{margin:0;display:flex;align-items:center;justify-content:center;gap:.3em;white-space:nowrap;min-width:0;
  font:400 clamp(14px,min(5.6vw,(100vw - 150px) / 13),42px) var(--neon-font,var(--display));color:var(--amber-hi);text-shadow:0 0 4px var(--amber-hi),0 0 14px var(--amber),0 0 28px var(--amber-ink)}
.lb-trophy{display:inline-block;flex:none;font-size:.85em;line-height:1;text-shadow:none}
.lb-trophy-r{transform:scaleX(-1)}
.lb-x{min-width:48px;min-height:48px;border-radius:50%;border:2px solid var(--text-lo);background:var(--deep);color:var(--text-hi);font-size:22px;cursor:pointer}
.lb-x:hover,.lb-x:focus-visible{border-color:var(--text-hi)}
.lb-ask{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8vh;text-align:center}
.lb-ask h3{margin:0;font:400 clamp(22px,4vw,32px) var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--cyan-hi)}
.lb-grades{display:flex;gap:16px}
.lb-g{width:clamp(76px,16vw,110px);aspect-ratio:1;border-radius:20px;border:3px solid var(--cyan);background:var(--deep);color:var(--cyan-hi);font:400 clamp(34px,7vw,52px) var(--display);cursor:pointer;box-shadow:var(--glow-cyan)}
.lb-g:hover,.lb-g:focus-visible{background:var(--floor-3);outline:3px solid var(--text-hi);outline-offset:3px}
.lb-note{margin:0;color:var(--text-lo);font-size:15px}
.lb-gradesw,.lb-tabs,.lb-games{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lb-gs,.lb-tab,.lb-gm,.lb-mg{min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--floor-3);background:var(--deep);color:var(--text-lo);font:700 15px var(--text);cursor:pointer}
.lb-gs small{margin-left:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-hi)}
.lb-tab{font:400 14px var(--display);letter-spacing:.06em;text-transform:uppercase}
.lb-gs.on,.lb-gm.on,.lb-mg.on{border-color:var(--cyan);color:var(--cyan-hi);background:color-mix(in srgb,var(--cyan) 14%,var(--deep))}
.lb-tab[aria-selected="true"]{border-color:var(--amber);color:var(--amber-hi);background:color-mix(in srgb,var(--amber) 16%,var(--deep));box-shadow:0 0 10px color-mix(in srgb,var(--amber) 40%,transparent)}
.lb-gs:focus-visible,.lb-tab:focus-visible,.lb-gm:focus-visible,.lb-mg:focus-visible,.lb-ref:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
.lb-board{min-height:120px}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lb-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;border:2px solid var(--floor-3);background:var(--deep)}
.lb-rank{font:400 20px var(--display);text-align:center;color:var(--text-lo)}
.lb-name{font-weight:700;font-size:17px;text-wrap:balance;overflow-wrap:break-word}
.lb-val{font:400 18px var(--display);color:var(--text-hi);white-space:nowrap}
.lb-row.m-gold{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,var(--deep))}.lb-row.m-gold .lb-rank{color:var(--yellow-hi)}
.lb-row.m-silver{border-color:var(--silver,var(--text-lo));background:color-mix(in srgb,var(--text-lo) 12%,var(--deep))}.lb-row.m-silver .lb-rank{color:var(--text-hi)}
.lb-row.m-bronze{border-color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 10%,var(--deep))}.lb-row.m-bronze .lb-rank{color:var(--amber-hi)}
.lb-row.me{outline:3px solid var(--cyan);outline-offset:2px;box-shadow:var(--glow-cyan)}
.lb-you{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--cyan);color:var(--deep);font-size:11px;letter-spacing:.08em}
.lb-id{margin-left:6px;padding:1px 6px;border-radius:6px;border:1px dashed var(--text-lo);color:var(--yellow-hi);font:700 13px ui-monospace,Menlo,Consolas,monospace}
.lb-msg{margin:24px 0;text-align:center;color:var(--text-hi);font-size:18px}   /* + .ui-msg (shared/ui-kit.css) */
.lb-break{color:var(--amber-hi)}
.lb-stale{margin:10px 0 0;text-align:center;color:var(--amber-hi);font-size:15px}   /* the last good board, shown when a refresh failed */
.lb-diag{text-align:center;color:var(--yellow-hi)}
.lb-own{margin:0;padding:10px 14px;border-radius:14px;border:2px dashed var(--cyan);color:var(--cyan-hi);font-weight:700;text-align:center}
.lb-foot{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;color:var(--text-lo)}
.lb-ref{min-height:40px;padding:4px 14px;border-radius:999px;border:2px solid var(--text-lo);background:var(--deep);color:var(--text-hi);cursor:pointer;font:700 14px var(--text)}
.lb-mine{margin-top:8px;padding:12px 16px;border-radius:16px;border:1px solid var(--floor-3);background:var(--floor-2);display:flex;flex-direction:column;gap:8px}
.lb-mine h3{margin:0;font:400 14px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-lo)}
.lb-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lb-mg{min-width:52px}
.lb-tog{cursor:pointer;min-height:44px;font-weight:700}
.lb-tog input{width:24px;height:24px;accent-color:var(--cyan)}
.lb-teach{color:var(--yellow-hi)}

/* ALL-CAPS TITLES (only these): the arcade's name (the lobby sign and PRESS START) and the Leaderboard (the top bar's
   button's label and the leaderboard screen's heading word). CSS only: the text itself (screen readers, <title>) stays as written. */
#arcadeName,#psName,#lbBtn .fb-l,#lbTitle .lb-t-word{text-transform:uppercase}

/* ---------- SEASONAL LOOKS (season-look.js): a themed backdrop behind the arcade's menus while a season runs ----------
   .slook = the backdrop (behind the floor; a copy inside PRESS START and Choose Your Instrument). Everything dark, the
   props at the edges, the middle darkened again (.sl-dim) so every sign and text on top keeps its contrast. Drifting
   bits: transforms/opacity only, slow; html.slook-still (reduced motion or MOTION off) = all still, where they rest. */
.slook,.slook-front{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
/* THE FRONT LAYER (.slook-front, right after .room / after the copy's .slook): the props marked {front: true}, standing ON
   the floor, so its lines and the fog never cross them. Same z-index as .room but later in the page, so it paints above
   the floor and below every sign, card, bar, panel and toast (all in the normal flow or above 0).
   In a zone / the FULL ARCADE (2D and 3D) the floor is part of the 3D canvas (or the 2D aisle), so the layer rises to
   z-index 1: over the canvas and the floor, under the arrows (10), the top bar (20) and every panel. There each prop
   with its own size (.sl-pl) is moved to a free spot by season-look.js placeFront() (clear of the cabinets, START,
   QUICK JUMP, the arrows, the lights, the info panel), or hidden (.sl-hide) when none is free; the strips across the
   whole screen (.sl-p without .sl-pl) show the backdrop's copy (.sl-fb) instead, behind the floor and the cabinets. */
body:not(.v-zone)>.slook .sl-fb,.slook.sl-in .sl-fb,body.v-zone>.slook .sl-fb.sl-pl{display:none}
body.v-zone>.slook-front{z-index:1}
body.v-zone>.slook-front .sl-p:not(.sl-pl){display:none}
.slook-front .sl-pl{transform-origin:50% 100%}
.slook-front .sl-hide{visibility:hidden}
html[data-slook] .room{background:none}
html[data-slook] body{background:transparent}           /* the root keeps the color: the backdrop (z-index -1) paints above it */
html[data-slook] .press-start,html[data-slook] .sp-view{background:var(--deep)}
.sl-sky,.sl-fx,.sl-dim{position:absolute;inset:0}
.sl-dim{background:radial-gradient(ellipse 60% 55% at 50% 46%,color-mix(in srgb,var(--deep) 66%,transparent),transparent 100%)}
.sl-p{position:absolute;display:block}
.sl-p>svg,.sl-seg>svg{display:block;width:100%;height:100%;overflow:visible}
/* strips along the top: fixed-shape pieces in a row (never stretched), the row cut off at the right */
.sl-lights,.sl-bunting{display:flex;height:clamp(26px,4.6vmin,44px);overflow:hidden;opacity:.75}
.sl-seg{flex:none;height:100%;aspect-ratio:200/44}
.sl-x{position:absolute;top:0;width:calc(26px * var(--s,1));aspect-ratio:1;opacity:.5;will-change:transform;
  transform:translate3d(0,calc(12vh + var(--s,1) * 46vh),0)}                         /* the resting place (still) */
.sl-x>svg{display:block;width:100%;height:100%;overflow:visible}
.sl-snow,.sl-petal,.sl-leaf{animation:sl-fall var(--d,20s) linear var(--dl,0s) infinite}
.sl-heart,.sl-note{animation:sl-rise var(--d,20s) linear var(--dl,0s) infinite}
.sl-bat{width:calc(46px * var(--s,1));aspect-ratio:2;top:6%;transform:translate3d(0,calc(var(--s,1) * 14vh),0);animation:sl-bat calc(var(--d,20s) * .6) ease-in-out var(--dl,0s) infinite alternate}
@keyframes sl-fall{0%{transform:translate3d(0,-12vh,0) rotate(0);opacity:0}10%{opacity:.55}90%{opacity:.55}100%{transform:translate3d(5vw,108vh,0) rotate(220deg);opacity:0}}
@keyframes sl-rise{0%{transform:translate3d(0,108vh,0);opacity:0}12%{opacity:.5}85%{opacity:.5}100%{transform:translate3d(-4vw,-10vh,0);opacity:0}}
@keyframes sl-bat{0%{transform:translate3d(-5vw,calc(var(--s,1) * 14vh),0)}100%{transform:translate3d(5vw,calc(var(--s,1) * 14vh + 3vh),0)}}
@keyframes sl-drift{0%{transform:translateX(0)}100%{transform:translateX(-12%)}}
@keyframes sl-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sl-sway{0%{transform:rotate(-6deg)}100%{transform:rotate(6deg)}}
html.slook-still .slook *,html.slook-still .slook-front *{animation:none!important}
@media (prefers-reduced-motion:reduce){ .slook *,.slook-front *{animation:none!important} }

/* SPOOKY: the moon (the hero: Mr. Graham's favorite, keep its drawing), the haunted band hall in front of it, a bat that
   crosses it now and then, purple fog, bats, jack-o'-lanterns with a candle glow on the floor (front layer).
   --mw the moon's size (2× the old clamp(64px,11vmin,140px)), --mt its top (--sl-top from season-look.js place(): under
   the top bar and any bare text), --hw the hall's width (never into the middle 40 %: ≤ 25vw, its left edge ≥ 70vw). */
.slook[data-look=spooky],.slook-front[data-look=spooky]{--mw:clamp(128px,22vmin,280px);--mt:var(--sl-top,max(12vh,74px));
  --hw:min(clamp(150px,26vmin,330px),25vw);--hr:min(max(1.5vw,calc(4vw + var(--mw) / 2 - var(--hw) / 2)),calc(28vw - var(--hw)));
  --ht:calc(var(--mt) + var(--mw) * .67 - var(--hw) * .31)}
.slook[data-look=spooky] .sl-sky{background:radial-gradient(calc(var(--mw) * 1.9) calc(var(--mw) * 1.7) at calc(100% - 4vw - var(--mw) / 2) calc(var(--mt) + var(--mw) / 2),color-mix(in srgb,var(--purple) 26%,transparent),transparent 70%),
  radial-gradient(70% 30% at 50% 100%,color-mix(in srgb,var(--purple-ink) 45%,transparent),transparent 80%),
  linear-gradient(180deg,color-mix(in srgb,var(--purple-ink) 22%,var(--deep)),var(--deep) 70%)}
.sl-moon .mn{fill:var(--yellow-hi);opacity:.8}.sl-moon .mc{fill:var(--yellow-ink);opacity:.35}
.sl-moon{background:radial-gradient(circle,color-mix(in srgb,var(--yellow) 26%,transparent) 36%,transparent 70%)}
/* the bat across the moon: a box the moon's size; .fly (season-look.js, every 20–35 s) = one 3 s pass, left to right on a
   gentle arc (.mb across, .mby up and down), a slow flap (≥ 300 ms each way). Not drawn at all when still. */
.sl-mbat .mb{position:absolute;left:0;top:30%;width:34%;aspect-ratio:2;opacity:0}
.sl-mbat .mby{position:absolute;inset:0}
.sl-mbat svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 45%}
.sl-mbat .bt{fill:color-mix(in srgb,var(--purple-ink) 35%,var(--deep))}
.sl-mbat.fly .mb{animation:sl-mbx 3s linear both}
.sl-mbat.fly .mby{animation:sl-mby 1.5s ease-in-out 2 alternate both}
.sl-mbat.fly svg{animation:sl-flap .4s ease-in-out infinite alternate}
@keyframes sl-mbx{0%{transform:translateX(-120%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(314%);opacity:0}}
@keyframes sl-mby{0%{transform:translateY(80%)}100%{transform:translateY(-70%)}}
@keyframes sl-flap{0%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
html.slook-still .sl-mbat{display:none}
@media (prefers-reduced-motion:reduce){ .sl-mbat{display:none} }
/* the haunted band hall: a silhouette (--purple-ink into --deep), windows glowing amber and breathing slowly (6 s,
   staggered); the hill's foot fades into the fog (::after) */
.sl-hall .hs>*,.sl-hall .hs path,.sl-hall .hs ellipse{fill:var(--sl-hall)}
.sl-hall .hs .vs{fill:none;stroke:var(--sl-hall);stroke-width:2;stroke-linecap:round}
.sl-hall .hb{fill:color-mix(in srgb,var(--purple-ink) 42%,var(--deep))}
.sl-hall .hr{fill:none;stroke:color-mix(in srgb,var(--amber-ink) 45%,var(--deep));stroke-width:1.6}
.sl-hall .hw{fill:color-mix(in srgb,var(--amber) 75%,transparent);opacity:.7;animation:sl-win 6s ease-in-out infinite}
.sl-hall .w0{fill:color-mix(in srgb,var(--amber) 45%,transparent)}
.sl-hall .w1{animation-delay:-1.5s}.sl-hall .w2{animation-delay:-3s}.sl-hall .w3{animation-delay:-4.5s}.sl-hall .w4{animation-delay:-2.2s}
.sl-hall .hp{fill:none;stroke:color-mix(in srgb,var(--purple-ink) 55%,var(--deep));stroke-width:3.5;stroke-linecap:round}
.sl-hall{--sl-hall:color-mix(in srgb,var(--purple-ink) 30%,var(--deep))}
.sl-hall::after{content:"";position:absolute;left:-8%;right:-8%;top:calc(100% - 1px);height:30vh;clip-path:polygon(6.9% 0,93.1% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,var(--sl-hall),color-mix(in srgb,var(--sl-hall) 40%,transparent) 30%,transparent)}
@keyframes sl-win{0%,100%{opacity:.55}50%{opacity:.85}}
.sl-fog .fg{fill:var(--purple-ink);opacity:.28}.sl-fog.f2 .fg{opacity:.2}
.sl-fog{animation:sl-drift 60s ease-in-out infinite alternate}.sl-fog.f2{animation-duration:80s}
/* the jack-o'-lanterns (front layer): a soft ground shadow, the body, the candle glow, then the carved face on top */
.sl-pk>svg,.sl-pk>b{position:absolute;inset:0}
.sl-pk .pks{inset:auto -4% -9% -4%;height:26%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--deep) 85%,transparent),transparent)}
.sl-pk .pk{fill:var(--amber);opacity:.85}.sl-pk .pr{fill:none;stroke:var(--amber-ink);stroke-width:2}.sl-pk .st{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}
.sl-pk .pkg{inset:-22% -26% -12%;border-radius:50%;opacity:.75;
  background:radial-gradient(closest-side at 50% 62%,color-mix(in srgb,var(--yellow) 55%,transparent),color-mix(in srgb,var(--amber) 28%,transparent) 50%,transparent);
  animation:sl-candle 4.6s ease-in-out var(--ph,0s) infinite}
.sl-pk .pf{fill:var(--yellow-hi);opacity:.9;animation:sl-face 4.6s ease-in-out var(--ph,0s) infinite}
@keyframes sl-candle{0%,100%{opacity:.6}50%{opacity:.9}}
@keyframes sl-face{0%,100%{opacity:.8}50%{opacity:1}}
.sl-bat .bt{fill:color-mix(in srgb,var(--purple-ink) 60%,var(--deep))}.sl-bat{opacity:.75}

/* WINTER FEST: a snowy night, string lights */
.slook[data-look=winter] .sl-sky{background:radial-gradient(1.5px 1.5px at 12% 18%,var(--white) 99%,transparent),radial-gradient(1.5px 1.5px at 72% 12%,var(--white) 99%,transparent),
  radial-gradient(1.2px 1.2px at 42% 26%,var(--white) 99%,transparent),radial-gradient(1.2px 1.2px at 88% 34%,var(--white) 99%,transparent),radial-gradient(1.2px 1.2px at 24% 40%,var(--white) 99%,transparent),
  radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--blue-ink) 40%,transparent),transparent 80%),linear-gradient(180deg,color-mix(in srgb,var(--blue-ink) 26%,var(--deep)),var(--deep) 75%)}
.sl-hills .sn{fill:var(--white);opacity:.14}.sl-hills .sn2{fill:var(--white);opacity:.1}
.sl-lights .wr,.sl-bunting .wr{fill:none;stroke:var(--floor-3);stroke-width:1.6}
.sl-lights .lc{fill:var(--floor-3)}
.sl-lights .lb{opacity:.85}
.sl-lights .l1{fill:var(--pink)}.sl-lights .l2{fill:var(--yellow)}.sl-lights .l3{fill:var(--cyan)}.sl-lights .l4{fill:var(--green)}
/* the lights breathe a strand at a time (whole pieces: cheap to draw), slowly, never a blink */
.sl-lights .sl-seg{animation:sl-glow 4.5s ease-in-out infinite}.sl-lights .sl-seg:nth-child(2n){animation-duration:5.6s;animation-delay:-2s}.sl-lights .sl-seg:nth-child(3n){animation-delay:-3.3s}
.sl-snow .fk{fill:none;stroke:var(--white-hi);stroke-width:1.6;stroke-linecap:round}.sl-snow{width:calc(20px * var(--s,1))}
.sl-snow.quiet{opacity:.35;animation-duration:calc(var(--d,20s) * 1.5)}

/* FRIENDSHIP WEEK: soft hearts, pink and red */
.slook[data-look=friendship] .sl-sky{background:radial-gradient(45% 40% at 12% 30%,color-mix(in srgb,var(--pink) 20%,transparent),transparent 70%),
  radial-gradient(45% 40% at 88% 78%,color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--pink-ink) 18%,var(--deep)),var(--deep) 80%)}
.sl-bh .hto{fill:none;stroke:var(--pink);stroke-width:1;opacity:.32}.sl-bh.b2 .hto{stroke:var(--red)}
.sl-heart .ht{fill:var(--pink)}.sl-heart:nth-child(3n) .ht{fill:var(--red)}.sl-heart:nth-child(3n+1) .ht{fill:var(--pink-hi)}

/* MUSIC IN OUR SCHOOLS MONTH: floating notes, marching-band colors (red, gold, blue) */
.slook[data-look=miosm] .sl-sky{background:radial-gradient(40% 40% at 15% 20%,color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),
  radial-gradient(40% 40% at 85% 25%,color-mix(in srgb,var(--blue) 20%,transparent),transparent 70%),radial-gradient(60% 30% at 50% 100%,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 80%),var(--deep)}
.sl-bunting .fl{opacity:.8}.sl-bunting .f1{fill:var(--red)}.sl-bunting .f2{fill:var(--yellow)}.sl-bunting .f3{fill:var(--blue)}.sl-bunting .f4{fill:var(--white)}
.sl-drum .dh{fill:color-mix(in srgb,var(--white) 12%,var(--deep))}.sl-drum .dr{fill:none;stroke:var(--red);stroke-width:3}
.sl-drum.d2 .dr{stroke:var(--blue)}.sl-drum{opacity:.8}
.sl-note .nt{fill:var(--yellow)}.sl-note .ns{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linejoin:round}
.sl-note:nth-child(3n) .nt{fill:var(--red-hi,var(--red))}.sl-note:nth-child(3n) .ns{stroke:var(--red)}.sl-note:nth-child(3n+1) .nt{fill:var(--blue-hi)}.sl-note:nth-child(3n+1) .ns{stroke:var(--blue-hi)}

/* SPRING BLOOM: blossoms, green */
.slook[data-look=spring] .sl-sky{background:radial-gradient(45% 35% at 10% 8%,color-mix(in srgb,var(--pink) 18%,transparent),transparent 70%),
  radial-gradient(45% 35% at 90% 8%,color-mix(in srgb,var(--pink) 14%,transparent),transparent 70%),radial-gradient(80% 30% at 50% 100%,color-mix(in srgb,var(--green) 18%,transparent),transparent 80%),
  linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--green-ink) 14%,var(--deep)))}
.sl-branch{opacity:.5}.sl-branch .br{fill:none;stroke:var(--sl-boards);stroke-width:5;stroke-linecap:round}
.sl-branch .bl circle{fill:var(--pink-hi);opacity:.85}.sl-branch .b2 circle{fill:var(--pink)}.sl-branch .bl .bc{fill:var(--yellow)}
.sl-grass{opacity:.7}.sl-grass .gr{fill:color-mix(in srgb,var(--green-ink) 42%,var(--deep))}
.sl-petal .pt{fill:var(--pink-hi)}.sl-petal{width:calc(14px * var(--s,1))}

/* SUMMER SEND-OFF: a sunset, a beach boardwalk in neon */
.slook[data-look=summer] .sl-sky{background:linear-gradient(180deg,color-mix(in srgb,var(--purple-ink) 30%,var(--deep)) 0,color-mix(in srgb,var(--pink-ink) 32%,var(--deep)) 52%,color-mix(in srgb,var(--amber-ink) 38%,var(--deep)) 80%,var(--deep) 90%)}
.sl-sun .su{fill:var(--amber);opacity:.5}
.sl-wheel .wh *{fill:none;stroke:var(--cyan);stroke-width:2.5}.sl-wheel .wh rect{fill:color-mix(in srgb,var(--pink) 60%,transparent);stroke:var(--pink)}
.sl-wheel{opacity:.7;}
.sl-palm .pm{fill:none;stroke:var(--deep);stroke-width:7;stroke-linecap:round}.sl-palm .pml{fill:none;stroke:var(--deep);stroke-width:6;stroke-linecap:round}
.sl-boards .bw{fill:var(--sl-boards)}.sl-boards .bwl{fill:none;stroke:color-mix(in srgb,var(--amber) 40%,var(--deep));stroke-width:1.2}
.sl-wave .wv{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.6}

/* CONCERT SEASON: stage curtains, spotlights, footlights */
.slook[data-look=concert] .sl-sky{background:radial-gradient(60% 40% at 50% 100%,color-mix(in srgb,var(--amber) 16%,transparent),transparent 80%),linear-gradient(180deg,color-mix(in srgb,var(--sl-curtain) 30%,var(--deep)),var(--deep) 70%)}
.sl-curtain .ct{fill:var(--sl-curtain)}.sl-curtain .cf{stroke:var(--sl-curtain-2);stroke-width:5;opacity:.7}
.sl-valance .ct{fill:var(--sl-curtain-2)}.sl-valance .vt{stroke:var(--yellow-ink);stroke-width:2.5}
.sl-spot{transform-origin:50% 0;background:linear-gradient(180deg,color-mix(in srgb,var(--yellow-hi) 22%,transparent),color-mix(in srgb,var(--yellow-hi) 3%,transparent));
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:sl-sway 12s ease-in-out infinite alternate}
.sl-spot.s2{animation-delay:-6s;animation-duration:14s}
.sl-foot{display:flex;justify-content:space-between;padding:0 clamp(50px,11vw,170px);height:10px;bottom:3px!important}
.sl-fls{flex:none;width:10px;height:10px;display:block}
.sl-fl{display:block;width:10px;height:6px;margin-top:4px;border-radius:5px 5px 0 0;background:var(--yellow-hi);box-shadow:0 -4px 14px 4px color-mix(in srgb,var(--amber) 45%,transparent);opacity:.8}
@media (max-width:700px){ .sl-fls:nth-child(2n){display:none} }

/* BACK TO SCHOOL: a chalkboard, notebook doodles in neon */
.slook[data-look=school] .sl-sky{background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--cyan) 7%,transparent) 31px 32px),
  radial-gradient(70% 60% at 50% 40%,var(--sl-chalk-2),var(--sl-chalk) 70%,var(--deep))}
.sl-dood .dd{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}.sl-dood .dash{stroke-dasharray:3 5}
.sl-dood .d1{stroke:var(--yellow)}.sl-dood .d2{stroke:var(--cyan)}.sl-dood .d3{stroke:var(--pink)}.sl-dood .d4{stroke:var(--green)}

/* FALL HARVEST: autumn leaves, warm amber and orange */
.slook[data-look=harvest] .sl-sky{background:radial-gradient(50% 40% at 15% 90%,color-mix(in srgb,var(--sl-orange) 18%,transparent),transparent 70%),
  radial-gradient(50% 40% at 85% 90%,color-mix(in srgb,var(--amber) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--amber-ink) 16%,var(--deep)))}
.sl-leaf .lf{fill:var(--sl-orange)}.sl-leaf .lv{stroke:var(--sl-orange-ink);stroke-width:1}.sl-leaf:nth-child(3n) .lf{fill:var(--amber)}.sl-leaf:nth-child(3n+1) .lf{fill:var(--red-ink)}
.sl-wheat .wt{stroke:var(--amber-ink);stroke-width:2.5}.sl-wheat .wg{fill:var(--amber);opacity:.75}
.sl-gourd .pk{fill:var(--sl-orange);opacity:.8}.sl-gourd.g2 .pk{fill:var(--amber)}.sl-gourd .pr{fill:none;stroke:var(--sl-orange-ink);stroke-width:2}.sl-gourd .st{fill:none;stroke:var(--green-ink);stroke-width:3;stroke-linecap:round}

/* FROST: icy blues, quiet snow */
.slook[data-look=frost] .sl-sky{background:radial-gradient(45% 40% at 8% 6%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 70%),
  radial-gradient(45% 40% at 92% 94%,color-mix(in srgb,var(--blue) 18%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--blue-ink) 16%,var(--deep)),var(--deep))}
.sl-crystal .cr{fill:none;stroke:var(--cyan-hi);stroke-width:1.4;stroke-linecap:round;opacity:.22}.sl-crystal.c3 .cr{opacity:.3}

/* THE PRIZE COUNTER in a zone's aisle (shared/prizes.js opens on a tap): 3D = a see-through button over the counter
   arcade3d.js draws on the back wall; 2D = a small counter drawn here, top left (hidden on narrow screens) */
.prize3d{position:absolute;z-index:5;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.prize3d:hover{box-shadow:0 0 0 2px var(--amber),0 0 18px var(--amber-ink)}
.prize3d:focus-visible,.prize2d:focus-visible{outline:4px solid var(--text-hi);outline-offset:3px}
.prize2d{position:absolute;z-index:6;top:8px;left:8px;display:grid;grid-template-rows:auto 1fr auto;width:clamp(96px,10vw,132px);height:clamp(76px,8vw,104px);padding:4px;
  border:2px solid var(--pz-wood-2);border-radius:10px;background:var(--pz-peg);cursor:pointer;opacity:.9}
.prize2d:hover{opacity:1;box-shadow:0 0 14px var(--amber-ink)}
.p2-sign{font:400 clamp(13px,1.4vw,17px) var(--neon-font,var(--display));letter-spacing:.06em;text-transform:uppercase;color:var(--amber-hi);text-shadow:0 0 4px var(--amber),0 0 10px var(--amber-ink)}
.p2-wall{background-image:radial-gradient(circle,var(--pz-peg-hole) 22%,transparent 24%);background-size:10px 10px;border-bottom:4px solid var(--pz-wood-2)}
.p2-counter{height:14px;border-radius:0 0 6px 6px;background:linear-gradient(color-mix(in srgb,var(--pz-glass) 30%,transparent),var(--pz-wood) 60%)}
@media (max-width:700px){ .prize2d{display:none} }
.ev-shopline{margin:10px 0 4px;text-align:center}.ev-shop{min-height:44px}

/* ---------- WEEKLY CHAMPIONS (champion-lobby.js): the lobby's CHAMPION card ---------- */
.ch-pan{position:relative;max-width:520px;width:100%;text-align:center;overflow:hidden;border-color:var(--yellow);box-shadow:0 0 0 1px var(--amber-ink) inset,var(--glow-yellow)}
.ch-stage{position:relative;display:grid;place-items:center;height:clamp(150px,30vh,210px);margin:-4px auto 6px}
.ch-spot{position:absolute;inset:0 12%;background:radial-gradient(ellipse 50% 60% at 50% 70%,color-mix(in srgb,var(--yellow) 30%,transparent),transparent 70%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.ch-stage .avf-still,.ch-stage .ch-bust{position:relative;height:100%;max-height:200px}
.ch-stage .avf-img{height:100%;width:auto;image-rendering:pixelated}
.ch-cup{position:absolute;right:calc(50% - 92px);top:12%;font-size:40px;filter:drop-shadow(0 0 6px var(--amber))}
.ch-title{margin:2px 0 8px;font-size:clamp(28px,7vw,38px)}
.ch-lines{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;color:var(--text-hi);font-size:17px;line-height:1.35}
.ch-lines li{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--yellow) 10%,transparent);border:1px solid color-mix(in srgb,var(--yellow) 35%,transparent)}
.ch-name{margin:0 0 8px;font:400 16px var(--display);color:var(--cyan-hi);letter-spacing:.06em}
.ch-tokens{margin:0 0 10px;font:400 24px var(--display);color:var(--amber-hi);display:flex;align-items:center;justify-content:center;gap:8px}
.ch-small{margin:0 0 14px;color:var(--text-lo);font-size:14px}
.ch-small code{font:700 15px ui-monospace,Menlo,Consolas,monospace;color:var(--text-hi);letter-spacing:.08em}
.ch-pan .acts{display:flex;justify-content:center}
.ch-pan .ch-claim{min-width:180px}
.ch-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ch-confetti i{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;opacity:0;
  background:var(--pink);animation:ch-fall 2.4s ease-in 0s 1 forwards}
.ch-confetti i:nth-child(4n+1){background:var(--yellow)}.ch-confetti i:nth-child(4n+2){background:var(--cyan)}.ch-confetti i:nth-child(4n+3){background:var(--green)}
@keyframes ch-fall{0%{opacity:1;transform:translateY(0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translateY(560px) rotate(540deg)}}
.ch-ov .ch-pan{animation:ch-in .35s ease-out}
.ch-ov.ch-still .ch-pan{animation:ch-fade .4s ease-out}
@keyframes ch-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ch-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.ch-confetti{display:none}.ch-ov .ch-pan{animation:ch-fade .4s ease-out}}
html.no-motion .ch-confetti{display:none}

/* LAST WEEK'S CHAMPIONS (leaderboard-screen.js) */
.lb-champs{margin:10px 0 4px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--yellow) 45%,transparent);background:color-mix(in srgb,var(--yellow) 7%,transparent)}
.lb-champs-t{margin:0 0 8px;font:400 15px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.lb-plaques{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
@media (max-width:560px){.lb-plaques{grid-template-columns:1fr 1fr;gap:6px}.lb-plaque{padding:6px 8px}.lb-pl-name{font-size:14px}.lb-champs{padding:8px}}
.lb-plaque{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--floor-2);border:1px solid var(--floor-3);min-width:0}
.lb-plaque.me{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.lb-pl-board{font-size:13px;color:var(--text-lo)}
.lb-pl-name{font-weight:700;color:var(--text-hi);overflow-wrap:anywhere}
.lb-pl-val{font:400 15px var(--display);color:var(--amber-hi)}
.lb-cup{font-size:.9em}
.lb-champ-teach{margin-top:12px;padding-top:10px;border-top:1px dashed var(--floor-3)}
.lb-champ-teach h3{margin:0 0 6px;font-size:15px}
.lb-awards{margin:4px 0 8px;padding-left:18px}

/* THE GRADE QUESTION (leaderboard-screen.js askGrade): a lobby card like SAVE YOUR PROGRESS */
.grade-ask{max-width:1100px;margin:0 auto}
.grade-ask:empty{display:none}
.gq-icon{font-size:26px;line-height:1}
.gq-card .gq-g{min-width:56px;font:400 20px var(--display)}

/* ?teacher: this device's leaderboard state (leaderboard-screen.js deviceDiag) */
.lb-dev{margin-top:12px;padding-top:10px;border-top:1px dashed var(--floor-3)}
.lb-dev h3{margin:0 0 6px;font-size:15px}
.lb-dev-list{margin:4px 0 8px;padding-left:18px}
.lb-send-res{margin-top:6px}