/* warmth.css — BingoX warmth-pass skin (dashboard only; the family pilot).
 * Layers over core.css+style.css: retints the token bridge to the warm plum
 * night from the chosen Constellation direction, glasses the panels, and now
 * carries the FULL layout reshape (hero jewel, stat strip, link rows,
 * standings) from design/warmth/constellation-v2.html (Joey pick, Jul 19).
 * All reshape classes are wm-prefixed so style.css landing rules can't leak in.
 * Loaded ONLY by dashboard.html — overlay/cards/landing are untouched.
 */

:root{
  --bg:#12101d;
  --surface:#1a1630; --surface2:#231d40;
  --border:#2e2750; --border2:#403a68;
  --accent:#22e0c8; --accent-hover:#2ee6cf;
  --muted:#a29bc4; --muted2:#8d86ad;
  --wm-ink:#f4f1fd; --wm-faint:#6f688f;
  --wm-teal:#2ee6cf; --wm-teal-deep:#0fb5a3;
  --wm-lilac:#a78bfa; --wm-gold:#ffd23f;
  --wm-ease-out:cubic-bezier(.22,1,.36,1);
  --wm-ease-in:cubic-bezier(.55,0,.85,.4);
  --wm-spring:cubic-bezier(.34,1.42,.44,1);
}

/* warm night backdrop with breathing aurora — replaces the cool teal glow */
body{
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(46,230,207,.10), transparent 60%),
    linear-gradient(175deg,#151226,#0f0d1a 55%,#141020) fixed;
}
.glow.g1{display:none}
.bg-grid{opacity:.4}

/* content rides above the sky canvas (z0) + grain (z1). The toast is NOT in
   this list: it must keep style.css's position:fixed (a relative toast sits
   invisibly at the bottom of the page flow - the silent-button bug, Jul 20). */
.app-nav,.app-main{position:relative;z-index:2}

/* film grain */
.sx-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* glass panels — the pane recipe over the warm night */
.panel{
  border-radius:20px;border-color:transparent;
  background:linear-gradient(160deg,rgba(43,36,72,.62),rgba(24,20,44,.55));
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.065),0 30px 60px -32px rgba(0,0,0,.75);
}
.panel::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none}

/* ── floating pill topbar ─────────────────────────────────────────────── */
.app-nav{
  position:sticky;top:14px;z-index:50;max-width:1120px;margin:14px auto 6px;
  border-radius:999px;border-bottom:none;
  background:linear-gradient(160deg,rgba(43,36,72,.72),rgba(24,20,44,.66));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 18px 44px -24px rgba(0,0,0,.8);
}
.app-nav-inner{padding:10px 18px}
.wm-nav{display:flex;gap:4px;margin-left:10px}
.wm-nav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:999px;
  transition:color .18s var(--wm-ease-out),background .18s var(--wm-ease-out)}
.wm-nav a:hover{color:var(--wm-ink);background:rgba(255,255,255,.07)}
.wm-nav a.on{color:var(--wm-ink);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#roundPill{margin-right:10px}

/* the account corner replaces the old pill + logout button */
#who,#logout{display:none!important}

/* ── entrance choreography ────────────────────────────────────────────── */
.wm-rise{opacity:0;transform:translateY(18px);animation:wmRise .7s var(--wm-spring) forwards}
@keyframes wmRise{to{opacity:1;transform:none}}
.wm-d1{animation-delay:.05s}.wm-d2{animation-delay:.12s}.wm-d3{animation-delay:.19s}
.wm-d4{animation-delay:.26s}.wm-d5{animation-delay:.33s}.wm-d6{animation-delay:.4s}.wm-d7{animation-delay:.47s}

/* ── hero ─────────────────────────────────────────────────────────────── */
.wm-hero{display:grid;grid-template-columns:1.35fr .9fr;gap:0;overflow:hidden;padding:0;margin-bottom:22px}
.wm-copy{padding:40px 16px 38px 40px}
.wm-eyebrow{font-size:11px;font-weight:800;letter-spacing:3.5px;color:var(--wm-teal);text-transform:uppercase;
  margin-bottom:14px;display:flex;align-items:center;gap:10px}
.wm-eyebrow::after{content:"";height:1px;width:52px;background:linear-gradient(90deg,rgba(46,230,207,.6),transparent)}
.wm-hero h1{font-size:clamp(28px,3.6vw,40px);line-height:1.08;letter-spacing:-.7px;font-weight:800;margin:0 0 13px;border:none;padding:0}
.wm-shine{background:linear-gradient(100deg,var(--wm-ink) 30%,var(--wm-teal) 50%,var(--wm-lilac) 65%,var(--wm-ink) 80%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wmSheen 9s var(--wm-ease-out) infinite}
@keyframes wmSheen{0%,72%{background-position:120% 0}88%,100%{background-position:-60% 0}}
.wm-sub{color:var(--muted);font-size:15px;line-height:1.6;max-width:46ch;margin:0 0 22px}
.wm-sub b{color:var(--wm-ink);font-weight:700}
/* stacked CTA: the big play button on top, the two helper buttons side by
   side beneath it (Joey, Jul 19) */
.wm-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.wm-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wm-cta .btn-primary{
  font-size:16px;font-weight:800;padding:15px 28px;border-radius:14px;color:#04211c;border:none;
  background:linear-gradient(135deg,#43f0da,var(--wm-teal) 45%,var(--wm-teal-deep));
  box-shadow:0 14px 38px -12px rgba(46,230,207,.55),inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;overflow:hidden;
  transition:transform .18s var(--wm-spring),box-shadow .22s var(--wm-ease-out)}
.wm-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(46,230,207,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.wm-cta .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .5s var(--wm-ease-out)}
.wm-cta .btn-primary:hover::after{left:130%}
.wm-cta .btn-ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);border:none;
  font-weight:800;padding:13px 20px;border-radius:14px;color:var(--wm-ink);
  transition:background .18s var(--wm-ease-out),transform .18s var(--wm-spring)}
.wm-cta .btn-ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.wm-note{font-size:12.5px;color:var(--wm-faint);margin:15px 0 0}
.wm-note b{color:var(--muted)}

/* hero jewel — the live ball */
.wm-jewel{position:relative;display:grid;place-items:center;padding:30px;min-height:320px}
.wm-orbit{position:absolute;width:260px;height:260px;border-radius:50%;
  border:1px dashed rgba(167,139,250,.25);animation:wmSpin 46s linear infinite}
.wm-orbit.o2{width:330px;height:330px;border-color:rgba(46,230,207,.14);animation-duration:70s;animation-direction:reverse}
@keyframes wmSpin{to{transform:rotate(360deg)}}
.wm-orbit .wm-mote{position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--wm-lilac);box-shadow:0 0 10px 2px rgba(167,139,250,.6)}
.wm-orbit.o2 .wm-mote{background:var(--wm-teal);box-shadow:0 0 10px 2px rgba(46,230,207,.6)}
.wm-ball{position:relative;width:160px;height:160px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#7df5e6,var(--wm-teal) 42%,#0a8577 88%);
  box-shadow:0 30px 70px -18px rgba(46,230,207,.55),inset -14px -18px 40px rgba(0,40,35,.55),inset 10px 12px 26px rgba(255,255,255,.35);
  animation:wmFloat 7s ease-in-out infinite;
  cursor:pointer;color:inherit;text-decoration:none}
/* the whole jewel is a door into the game — hover lifts the face, not the ball
   (the float animation owns the ball's transform) */
.wm-ball .wm-ball-inner{transition:transform .22s var(--wm-spring)}
.wm-ball:hover .wm-ball-inner{transform:scale(1.07)}
@keyframes wmFloat{50%{transform:translateY(-12px)}}
.wm-ball-inner{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:radial-gradient(circle at 38% 30%,#fffef4,#f2ecdc 70%);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.18);color:#0d3f38;text-align:center;font-weight:900;padding:8px}
.wm-ball-inner .wm-letter{font-size:14px;letter-spacing:1px;line-height:1;opacity:.75}
.wm-ball-inner .wm-letter.sm{font-size:10.5px;letter-spacing:.6px;line-height:1.2}
.wm-ball-inner .wm-num{font-size:40px;line-height:1.05;letter-spacing:-1px}
.wm-ball-inner .wm-num.txt{font-size:12.5px;letter-spacing:0;line-height:1.25;font-weight:800}
/* idle face: the brand X (no lobby to join yet) */
.wm-ball-inner .wm-num.x{font-size:44px;letter-spacing:0;
  background:linear-gradient(125deg,var(--wm-teal-deep) 20%,#7c5cf0 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wm-lastcalls{position:absolute;bottom:24px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wm-callchip{font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:999px;color:var(--wm-ink);
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-variant-numeric:tabular-nums}
.wm-callchip.hot{color:#06211d;background:linear-gradient(135deg,#57f2de,var(--wm-teal));box-shadow:0 6px 18px -6px rgba(46,230,207,.6)}

/* ── stat strip ───────────────────────────────────────────────────────── */
.wm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.wm-stat{padding:18px 22px 16px;transition:transform .2s var(--wm-spring)}
.wm-stat:hover{transform:translateY(-3px)}
.wm-stat .wm-lbl{font-size:10.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--wm-faint);margin-bottom:6px}
.wm-stat .wm-val{font-size:30px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--wm-ink)}
.wm-stat .wm-val small{font-size:15px;color:var(--muted);font-weight:700;letter-spacing:0}
.wm-stat .wm-statsub{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-meter{height:4px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.wm-meter i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--wm-teal),var(--wm-lilac));box-shadow:0 0 8px rgba(46,230,207,.5);
  transition:width .6s var(--wm-ease-out)}

/* ── locker banner (Phase 2 locker discovery) ─────────────────────────── */
/* A large, premium door to the streamer's own flair locker, right under the
   stats so customising your card is never buried in a settings panel. */
.wm-locker-banner{display:flex;align-items:center;gap:20px;margin-bottom:22px;padding:18px 24px;border-radius:20px;
  text-decoration:none;
  background:linear-gradient(135deg,rgba(255,122,40,.16),rgba(151,70,255,.15));
  box-shadow:0 20px 50px -26px #000,inset 0 0 0 1.5px rgba(255,255,255,.10);
  transition:transform .2s var(--wm-spring),box-shadow .2s var(--wm-ease-out)}
.wm-locker-banner:hover{transform:translateY(-3px);
  box-shadow:0 28px 62px -26px #000,inset 0 0 0 1.5px rgba(255,255,255,.2)}
.wm-locker-banner:active{transform:scale(.99)}
.wm-lb-mini{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:60px;height:60px;padding:7px;border-radius:14px;
  background:rgba(8,10,20,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wm-lb-mini span{border-radius:4px;background:rgba(255,255,255,.08)}
.wm-lb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wm-lb-eyebrow{font:800 11px/1 ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:#ffb98a}
.wm-lb-title{font-weight:900;font-size:20px;letter-spacing:-.3px;color:var(--wm-ink,#fff)}
.wm-lb-sub{font-size:13.5px;line-height:1.5;color:var(--muted)}
.wm-lb-cta{flex:none;font-weight:900;font-size:14px;color:#0a0b14;padding:11px 20px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,#fff,#ffe6d2);box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  transition:transform .16s var(--wm-spring)}
.wm-locker-banner:hover .wm-lb-cta{transform:translateY(-1px)}
@media(max-width:640px){.wm-locker-banner{flex-wrap:wrap}.wm-lb-txt{flex-basis:60%}.wm-lb-cta{width:100%;text-align:center}}

/* ── two-column main grid ─────────────────────────────────────────────── */
/* Columns stretch to the same height (their bottom edges must LINE UP — Joey
   Jul 20) and the last card in each column grows to close the gap. min-width:0
   lets fr tracks shrink: without it a long name/URL row widens its column and
   the whole grid overflows the page edge (the settings card below then looks
   "narrower" — it was the grid that was too wide). */
.wm-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch}
.wm-cols>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.wm-cols>div>.panel:last-child{flex:1}
.wm-cols .panel{margin:0}
.wm-round .wm-winner,.wm-standing .wm-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-round .wm-meta{flex:none;white-space:nowrap}
/* Full-width settings card below the columns (a lone tall settings column
   beside empty space read as broken): form rows flow as many fields across
   as fit, hints stay readable-length. */
.wm-settings{margin-top:14px}
.wm-settings .grid2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wm-settings .hint{max-width:78ch}
.wm-cardsub{font-size:13px;color:var(--muted);margin:-4px 0 16px;line-height:1.5}
/* Heading icons are full Ember Glass renders — no tile behind them (a dark
   chip swallowed the dark glass); the icon IS the ornament, sized to be SEEN.
   Panel headings go flex so icon + text truly center on each other. */
.panel h2{display:flex;align-items:center;gap:11px}
.wm-ico{width:40px;height:40px;display:inline-grid;place-items:center;flex:none}
.wm-ico .sxi{height:40px;width:40px;vertical-align:middle;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(46,230,207,.22))}
.panel h2>.sxi{flex:none;height:34px;width:34px;vertical-align:middle;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(46,230,207,.22))}

/* link rows (share-the-game card) */
.wm-link{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:13px;margin-bottom:10px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:background .18s var(--wm-ease-out)}
.wm-link:hover{background:rgba(255,255,255,.08)}
.wm-link .wm-what{font-weight:800;font-size:13.5px;white-space:nowrap;flex:none;width:104px}
.wm-link input{flex:1;min-width:0;border:none;background:none;box-shadow:none;padding:0;
  font-family:Consolas,ui-monospace,monospace;font-size:12.5px;color:var(--muted);text-overflow:ellipsis}
.wm-link input:focus{outline:none;color:var(--wm-ink)}
.wm-link .btn{white-space:nowrap;flex:none}
.wm-linknote{font-size:12px;color:var(--wm-faint);margin:2px 2px 12px}

/* standings */
.wm-standing{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:12px;margin-bottom:8px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background .18s var(--wm-ease-out),transform .18s var(--wm-ease-out)}
.wm-standing:hover{background:rgba(255,255,255,.075);transform:translateX(3px)}
.wm-rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;flex:none;
  background:rgba(255,255,255,.09);color:var(--muted)}
.wm-rank.r1{color:#3b2c00;background:linear-gradient(135deg,#ffe27a,var(--wm-gold));box-shadow:0 0 14px -2px rgba(255,210,63,.6)}
.wm-rank.r2{color:#222;background:linear-gradient(135deg,#e8e8f2,#b9b9cc)}
.wm-rank.r3{color:#2e1503;background:linear-gradient(135deg,#e8a468,#c07a3e)}
.wm-standing .wm-who{flex:1;font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-standing .wm-who b{color:var(--wm-gold)}
.wm-away{font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;color:var(--muted);flex:none;
  background:rgba(255,255,255,.07);font-variant-numeric:tabular-nums}
.wm-away.hot{color:#06211d;background:linear-gradient(135deg,#57f2de,var(--wm-teal));animation:wmHot 1.9s ease-in-out infinite}
@keyframes wmHot{50%{box-shadow:0 0 16px -2px rgba(46,230,207,.75)}}

/* recent rounds */
.wm-round{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:13px;margin-bottom:8px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background .18s var(--wm-ease-out),transform .18s var(--wm-ease-out)}
.wm-round:hover{background:rgba(255,255,255,.075);transform:translateX(3px)}
.wm-round .wm-winner{flex:1;font-weight:700;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-round .wm-winner .wm-star{color:var(--wm-gold);text-shadow:0 0 8px rgba(255,210,63,.6)}
.wm-round .wm-winner small{color:var(--muted);font-weight:600}
.wm-round .wm-meta{font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}

/* ── Game screen store (Phase 3): the streamer's overlay-skin wardrobe ───── */
.sk-credits{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sk-bal{font-size:14px;color:var(--muted);font-weight:600}
.sk-bal b{font-family:var(--sx-mono,ui-monospace,monospace);font-size:20px;color:var(--wm-gold,#ffd23f);font-weight:800}
.sk-bal small{color:var(--muted);font-weight:600}
.sk-packs{display:flex;gap:8px;flex-wrap:wrap}
.sk-pack{white-space:nowrap}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.sk-card{padding:12px;border-radius:16px;background:linear-gradient(160deg,rgba(38,32,64,.55),rgba(16,14,30,.6));
  box-shadow:0 14px 40px -20px #000,inset 0 0 0 1px rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:10px;transition:transform var(--sx-dur-2,.18s) var(--sx-ease-out,ease),box-shadow var(--sx-dur-2,.18s) ease}
.sk-card:hover{transform:translateY(-3px);box-shadow:0 24px 54px -22px #000,inset 0 0 0 1px rgba(255,255,255,.14)}
.sk-card.on{box-shadow:0 20px 50px -22px #000,inset 0 0 0 2px rgba(46,230,207,.6)}
.sk-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sk-head b{font-family:'Lilita One',var(--font,inherit);font-weight:400;font-size:19px;letter-spacing:.4px}
.sk-mood{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:var(--muted);
  background:rgba(255,255,255,.06);padding:3px 8px;border-radius:999px;white-space:nowrap;flex:none}
.sk-blurb{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;flex:1}
.sk-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sk-act .btn{flex:1;justify-content:center}
.sk-owned{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.sk-worn{background:rgba(46,230,207,.16)!important;box-shadow:inset 0 0 0 1px rgba(46,230,207,.5)!important;
  color:#bfffef!important;cursor:default;opacity:1!important}

/* reduced motion: land everything instantly */
@media (prefers-reduced-motion: reduce){
  .wm-rise{opacity:1;transform:none;animation:none}
  .wm-shine{animation:none}
  .wm-ball,.wm-orbit{animation:none}
  .sk-card{transition:none}
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .wm-hero{grid-template-columns:1fr}
  .wm-jewel{min-height:290px}
  .wm-stats{grid-template-columns:repeat(2,1fr)}
  .wm-cols{grid-template-columns:1fr}
}
@media (max-width:430px){
  .app-nav{margin:10px 10px 4px}
  .wm-nav{display:none}
  #roundPill{display:none}
  .wm-copy{padding:26px 20px}
  .wm-stats{gap:10px}
  .wm-stat .wm-val{font-size:24px}
  .wm-link{flex-wrap:wrap}
  .wm-link .wm-what{width:auto}
  .wm-link input{flex-basis:100%;order:3}
}

/* ── Unsaved settings must LOOK unsaved ──────────────────────────────────────
   A streamer ran a whole night on the wrong win target because a picked-but-unsaved
   choice was visually identical to a saved one (2026-09-11). The Save button now
   announces pending work and the win target names what is PLAYING vs merely picked. */
.wm-savestate{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--warn);
}
/* The display above beats the browser's own [hidden] rule, so without this the
   marker showed "Not saved yet" forever, even right after a good save (2026-09-25). */
.wm-savestate[hidden]{ display:none; }
.wm-savestate::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--warn); }
.btn.wm-needsave{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent),
             0 8px 24px -8px color-mix(in srgb, var(--warn) 55%, transparent);
}
.field .f-note.wm-unsaved{ color:var(--warn); }
.field .f-note.wm-unsaved b{ color:var(--warn); }
@media (prefers-reduced-motion:no-preference){
  .btn.wm-needsave{ animation:wmNeedSave 2.4s ease-in-out infinite; }
  @keyframes wmNeedSave{
    0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent),
                         0 8px 24px -8px color-mix(in srgb, var(--warn) 45%, transparent); }
    50%    { box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 90%, transparent),
                         0 10px 30px -8px color-mix(in srgb, var(--warn) 70%, transparent); }
  }
}

/* ── Settings in folded groups (v0.39.3, the 2026-10-10 review) ─────────────
   Four groups and More options, each a <details> row that names what is inside.
   Folded by default, so the dashboard opens on going live, not on 28 settings. */
.wm-group{border-radius:14px;margin:0 0 10px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:background .18s var(--wm-ease-out)}
.wm-group[open]{background:rgba(255,255,255,.05)}
.wm-group>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
  padding:15px 44px 15px 18px;position:relative;min-height:48px;border-radius:14px}
.wm-group>summary::-webkit-details-marker{display:none}
.wm-group>summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s var(--wm-ease-out)}
.wm-group[open]>summary::after{transform:rotate(225deg);margin-top:-2px}
.wm-group>summary:hover{background:rgba(255,255,255,.04)}
.wm-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wm-gt{font-weight:800;font-size:15.5px;color:var(--wm-ink)}
.wm-gs{font-size:13px;color:var(--muted)}
.wm-gbody{padding:4px 18px 18px}
.wm-subh{font-size:14px;font-weight:800;margin:20px 0 6px;color:var(--wm-ink)}
/* Unsaved changes stay in reach: the save bar sticks to the bottom while pending. */
.wm-savebar:has(.wm-needsave){position:sticky;bottom:12px;z-index:5;padding:10px 12px;border-radius:14px;
  background:rgba(26,22,48,.94);box-shadow:0 10px 30px -10px #000,inset 0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:430px){ .wm-gbody{padding:4px 12px 14px} .wm-group>summary{padding:14px 40px 14px 14px} }
/* Phones: going live comes first, so the decorative ball steps aside on a phone,
   either way up (the hero line already says the round, the ball and the count). */
@media (max-height:500px),(max-width:600px){ .wm-jewel{display:none} }