/* =========================================================
   OTSEK — bunker control-panel aesthetic.
   Tokens
   ========================================================= */
:root{
  --bg: #0a0c08;
  --bg-2: #0e120c;
  --panel: rgba(22,26,18,0.86);
  --panel-solid: #171b13;
  --panel-border: rgba(210,220,190,0.10);
  --panel-border-strong: rgba(210,220,190,0.20);

  --amber: #ffb020;
  --amber-dim: #9a6a18;
  --amber-glow: rgba(255,176,32,0.35);
  --red: #e8432f;
  --red-glow: rgba(232,67,47,0.35);
  --green: #8fe86a;
  --green-glow: rgba(143,232,106,0.30);

  --text: #eae4d4;
  --text-dim: #9aa08c;
  --text-faint: #5d6152;

  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 6px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ overflow-x: hidden; width:100%; }
body{
  margin:0;
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #171d10 0%, var(--bg) 55%), var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width:100%;
  min-height: 100vh;
  min-height: 100dvh;
}
/* every tap target gets manipulation so mobile browsers skip the ~300ms
   double-tap-to-zoom delay — this is a fast-paced party game, that lag hurts */
button, a, .vote-opt, .pool-card, .intercept-target-btn, .word-vote-btn, .avatar-opt,
.settings-toggle, .swatch, .swatch-picker, .gallery-cell img, .rules-collapse summary{
  touch-action: manipulation;
}
input, select, textarea{ font-size: max(16px, 1rem); } /* iOS Safari auto-zooms on focus below 16px */
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing:0.02em; }
p{ margin:0; }
button{ font-family: inherit; }
.mono{ font-family: var(--font-mono); }
.muted{ color: var(--text-dim); }
.small{ font-size: 0.82rem; }
::selection{ background: var(--amber); color:#151710; }

/* focus visibility */
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }

/* =========================================================
   Atmosphere overlays
   ========================================================= */
#noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index: 2; opacity:0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0.5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.0) 4px);
}
#flicker-flash{
  position:fixed; inset:0; pointer-events:none; z-index:50; background: var(--amber); opacity:0; mix-blend-mode: screen;
}
#flicker-flash.fire{ animation: powerFlicker 620ms steps(1,end); }
@keyframes powerFlicker{
  0%{ opacity:0; } 6%{ opacity:0.9; } 12%{ opacity:0.05; } 18%{ opacity:0.7; } 25%{ opacity:0; }
  40%{ opacity:0.35; } 46%{ opacity:0; } 60%{ opacity:0.5; } 70%{ opacity:0; } 100%{ opacity:0; }
}
body.flicker-shake{ animation: shakeBody 620ms steps(1,end); }
@keyframes shakeBody{
  10%{ transform: translate(1px,0); } 20%{ transform: translate(-1px,1px); }
  30%{ transform: translate(1px,-1px); } 40%{ transform: translate(0,0); } 100%{ transform: translate(0,0); }
}

/* =========================================================
   Screens
   ========================================================= */
.screen{ display:none; min-height:100vh; position:relative; z-index:1; flex-direction:column; }
.screen.active{ display:flex; }

.hazard-strip{
  height:10px; width:100%;
  background: repeating-linear-gradient(135deg, var(--amber) 0 14px, #141608 14px 28px);
  opacity:0.55;
}

/* =========================================================
   Landing
   ========================================================= */
.landing-wrap{ max-width: 640px; margin: 0 auto; padding: 3rem 1.25rem 4rem; width:100%; flex:1; }
.brand-block{ text-align:center; margin-bottom: 2.2rem; }
.brand-mark{ font-size: 2.4rem; color: var(--amber); text-shadow: 0 0 18px var(--amber-glow); }
.brand-title{
  font-size: clamp(2.4rem, 13vw, 5rem); font-weight:700; letter-spacing:0.08em; line-height:0.95;
  color: var(--text);
  text-shadow: 0 0 30px var(--amber-glow), 2px 2px 0 rgba(0,0,0,0.6);
}
.brand-tagline{ font-family: var(--font-mono); color: var(--amber); letter-spacing:0.12em; margin-top:0.4rem; text-transform:uppercase; font-size:0.9rem; }
.brand-desc{ color: var(--text-dim); max-width:46ch; margin: 1rem auto 0; line-height:1.55; font-size:0.95rem; }

.panel{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
}
.auth-card{ padding: 1.5rem; display:flex; flex-direction:column; gap:1.1rem; }

.field-row{ display:flex; flex-direction:column; gap:0.5rem; }
.field-label{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-dim); }

.text-input{
  background: #0c0e08; border: 1px solid var(--panel-border-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-size:1rem; font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
.text-input:focus{ border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,176,32,0.15); outline:none; }
.code-input{ text-transform:uppercase; letter-spacing:0.3em; font-family: var(--font-mono); text-align:center; }

.avatar-picker{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.avatar-opt{
  width:44px; height:44px; border-radius: 50%; border:1px solid var(--panel-border-strong); color: var(--amber);
  background:#0c0e08; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.avatar-opt svg{ width:60%; height:60%; display:block; }
.avatar-opt:hover{ transform: translateY(-2px); }
.avatar-opt.selected{ border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,176,32,0.18); }

.btn{
  font-family: var(--font-display); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  border-radius: var(--radius-sm); border: 1px solid transparent; padding: 0.8rem 1.2rem; font-size:1rem;
  cursor:pointer; transition: transform .1s ease, box-shadow .15s, background .15s, opacity .15s;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-primary{
  background: linear-gradient(180deg, #ffc450, var(--amber)); color:#191204;
  box-shadow: 0 6px 24px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover:not(:disabled){ box-shadow: 0 8px 30px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-ghost{
  background: transparent; color: var(--text); border-color: var(--panel-border-strong);
}
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); }
.btn-lg{ width:100%; padding: 1rem 1.2rem; font-size:1.1rem; }
.btn-danger{ background: linear-gradient(180deg,#ff6a53,var(--red)); color:#1a0603; }

.divider{ display:flex; align-items:center; gap:0.75rem; color: var(--text-faint); font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background: var(--panel-border-strong); }
.join-row{ display:flex; gap:0.6rem; }
.join-row .text-input{ flex:1; }

.error-text{ color: var(--red); font-size:0.85rem; font-family: var(--font-mono); }

.rules-collapse{ margin-top:1.6rem; }
.rules-collapse summary{
  cursor:pointer; font-family: var(--font-mono); color: var(--text-dim); font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.08em; padding: 0.6rem 0; text-align:center;
}
.rules-grid{ display:grid; gap:0.9rem; grid-template-columns: 1fr; padding: 0.5rem 0.2rem; font-size:0.88rem; color: var(--text-dim); line-height:1.5; }
.rules-grid b{ color: var(--text); }
@media(min-width:560px){ .rules-grid{ grid-template-columns: 1fr 1fr; } }

/* =========================================================
   HUD (top bar, present in lobby + game)
   ========================================================= */
.hud-top{
  display:flex; align-items:center; gap:1.2rem; padding: 0.9rem 1.1rem; flex-wrap:wrap;
  border-bottom: 1px solid var(--panel-border); background: linear-gradient(180deg, rgba(20,24,15,0.9), rgba(20,24,15,0.5));
  position: sticky; top:0; z-index:10; backdrop-filter: blur(8px);
}
.hud-item{ display:flex; align-items:center; gap:0.55rem; }
.hud-label{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color: var(--text-faint); text-transform:uppercase; }
.hud-value{ font-size:1.05rem; color: var(--amber); }
.room-code-chip{ display:flex; align-items:center; gap:0.6rem; }
.room-code-value{ font-family: var(--font-mono); font-size:1.4rem; letter-spacing:0.28em; color: var(--amber); text-shadow:0 0 12px var(--amber-glow); }
.icon-btn{
  background: transparent; border:1px solid var(--panel-border-strong); color: var(--text-dim); border-radius: var(--radius-sm);
  width:34px; height:34px; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ color: var(--amber); border-color: var(--amber); }
.hud-spacer{ flex:1; }
.icon-btn-exit:hover{ color: var(--red); border-color: var(--red); }

.rations-wrap{ display:flex; align-items:center; gap:0.5rem; }
.rations-wrap .hud-value{ font-size:1.3rem; color: var(--green); text-shadow: 0 0 10px var(--green-glow); }

/* avatar icon sizing: every .avatar wraps one inline SVG glyph, colored via currentColor */
.avatar svg{ width:62%; height:62%; display:block; }
.avatar{ color: var(--amber); }

/* =========================================================
   Lobby
   ========================================================= */
.lobby-body{ max-width:760px; margin:0 auto; padding: 1.6rem 1.1rem; flex:1; width:100%; }
.section-title{ font-size:1.4rem; margin-bottom:0.3rem; }
.player-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:0.8rem; margin-top:1.2rem; }
.player-card{
  background: var(--panel-solid); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
  padding:0.8rem; display:flex; align-items:center; gap:0.6rem; position:relative;
}
.player-card::before{ content:''; position:absolute; top:6px; left:6px; width:5px; height:5px; border-radius:50%; background:#3a3f2e; box-shadow: 108px 0 0 #3a3f2e; }
.player-card .avatar{ font-size:1.4rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#0c0e08; border-radius:50%; border:1px solid var(--panel-border-strong); flex-shrink:0; }
.player-card .pname{ font-weight:600; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-card .ptag{ font-family: var(--font-mono); font-size:0.65rem; color: var(--amber); text-transform:uppercase; }
.player-card.offline{ opacity:0.4; }
.player-card.dead{ opacity:0.35; filter: grayscale(1); }
.player-card.dead .pname::after{ content:' ☠'; }

.lobby-footer{ padding: 1.2rem; text-align:center; max-width:520px; margin: 0 auto; width:100%; }

/* =========================================================
   Role reveal
   ========================================================= */
.role-card-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; gap:1rem; }
.role-card{
  width:min(92vw, 420px); border-radius: 16px; padding: 2rem 1.6rem; text-align:center;
  background: linear-gradient(180deg, #191d10, #12150c); border: 1px solid var(--panel-border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 40px var(--amber-glow);
  animation: cardIn 700ms cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn{ from{ opacity:0; transform: scale(0.85) rotateX(12deg); } to{ opacity:1; transform:none; } }
.role-eyebrow{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.2em; color: var(--text-faint); text-transform:uppercase; }
.role-badge{
  font-family: var(--font-display); font-weight:700; font-size:2rem; margin: 0.5rem 0 0.5rem; letter-spacing:0.03em;
  color: var(--amber); text-shadow: 0 0 20px var(--amber-glow);
}
.spec-desc{ margin-bottom:1.2rem; }
.role-facts{ display:grid; gap:0.7rem; margin:0 0 1.2rem; text-align:left; }
.role-facts div{ display:flex; justify-content:space-between; gap:0.6rem; border-bottom:1px dashed var(--panel-border); padding-bottom:0.5rem; }
.role-facts dt{ color: var(--text-faint); font-family: var(--font-mono); font-size:0.78rem; text-transform:uppercase; }
.role-facts dd{ margin:0; font-weight:600; text-align:right; }
.role-briefing{ color: var(--text-dim); font-size:0.9rem; line-height:1.5; }
.role-hint{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; }

/* =========================================================
   Game stage (shared shell for challenge / bid / council cut)
   ========================================================= */
.stage{ flex:1; max-width:760px; margin:0 auto; padding: 1.5rem 1.1rem 2rem; width:100%; display:flex; flex-direction:column; gap:1.2rem; }
.stage-card{ padding: 1.4rem; }
.stage-eyebrow{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--amber); margin-bottom:0.5rem; }
.stage-title{ font-size:1.3rem; line-height:1.35; margin-bottom:0.9rem; }
.stage-note{ color: var(--text-dim); font-size:0.86rem; margin-top:0.7rem; }

.waiting-block{ text-align:center; padding: 2.5rem 1rem; color: var(--text-dim); }
.waiting-pulse{ display:inline-block; width:12px; height:12px; border-radius:50%; background: var(--amber); box-shadow:0 0 16px var(--amber-glow); animation: pulseDot 1.4s ease-in-out infinite; margin-bottom:0.8rem; }
@keyframes pulseDot{ 0%,100%{ opacity:0.35; transform:scale(0.85);} 50%{ opacity:1; transform:scale(1.15);} }

textarea.text-input{ resize:vertical; min-height:88px; font-family: var(--font-body); line-height:1.5; }
.char-count{ text-align:right; font-family: var(--font-mono); font-size:0.72rem; color: var(--text-faint); }

/* bid pools */
.pool-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:0.8rem; margin-top:1rem; }
.pool-card{
  padding:1.1rem 0.9rem; border-radius: var(--radius-sm); border:1px solid var(--panel-border-strong); background:#12140c;
  cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.pool-card:hover{ transform: translateY(-2px); }
.pool-card.sel{ border-color: var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.pool-icon{ width:38px; height:38px; color: var(--green); }
.pool-icon svg{ width:100%; height:100%; display:block; }
.pool-card .pool-name{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; }
.pool-card .pool-perk{ color: var(--text-dim); font-size:0.78rem; line-height:1.4; }
.pool-card .pool-total{ font-family: var(--font-mono); font-size:0.8rem; color: var(--amber); }
.bid-amount-row{ display:flex; align-items:center; gap:0.8rem; margin-top:1rem; justify-content:center; }
.bid-amount-row input[type=range]{ flex:1; max-width:260px; accent-color: var(--green); }
.bid-amount-value{ font-family: var(--font-mono); font-size:1.2rem; color: var(--green); min-width:3.5ch; text-align:right; }

/* council cut */
.council-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:0.7rem; margin-top:1rem; }
.council-card{ background:#12140c; border:1px solid var(--red); box-shadow:0 0 0 2px var(--red-glow); border-radius: var(--radius-sm); padding:0.9rem; text-align:center; }
.council-card .avatar{ width:40px; height:40px; margin:0 auto 0.4rem; background:#0c0e08; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--red); }
.council-card .pname{ font-weight:700; }
.council-card .ration-tag{ font-family: var(--font-mono); font-size:0.72rem; color: var(--red); margin-top:0.2rem; }

/* roulette */
.roulette-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; margin-top:1rem; }
.wheel-outer{
  position:relative; width:min(84vw,340px); height:min(84vw,340px);
  padding:10px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--amber-dim), var(--amber), var(--amber-dim), var(--amber), var(--amber-dim));
  box-shadow: 0 0 0 2px rgba(255,176,32,0.25), 0 24px 60px rgba(0,0,0,0.55);
}
.wheel-pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); z-index:3;
  width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:22px solid var(--amber);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.7));
}
.wheel{
  width:100%; height:100%; border-radius:50%; border:5px solid #0c0e08;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), inset 0 0 50px rgba(0,0,0,.55);
  transition: transform 8.5s cubic-bezier(.13,.75,.16,1);
}
.wheel-outer.spinning{ animation: wheelRimPulse 0.9s ease-in-out infinite; }
@keyframes wheelRimPulse{
  0%,100%{ box-shadow: 0 0 0 2px rgba(255,176,32,0.25), 0 24px 60px rgba(0,0,0,0.55); }
  50%{ box-shadow: 0 0 0 4px rgba(255,176,32,0.55), 0 0 45px rgba(255,176,32,0.45), 0 24px 60px rgba(0,0,0,0.55); }
}
.wheel-outer.landed::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:3px solid var(--green);
  animation: wheelBurst 700ms ease-out forwards; pointer-events:none;
}
@keyframes wheelBurst{
  0%{ transform:scale(0.7); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
.wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:22%; height:22%; border-radius:50%; background: radial-gradient(circle at 35% 30%, #23261a, #0c0e08 75%);
  border:3px solid var(--amber); box-shadow: 0 0 20px rgba(255,176,32,0.5), 0 4px 10px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; color: var(--amber);
}
.wheel-hub svg{ width:48%; height:48%; }
.wheel-empty{ background: #12140c !important; display:flex; align-items:center; justify-content:center; text-align:center; color: var(--text-faint); font-family: var(--font-mono); font-size:0.75rem; padding:1rem; }
.wheel-legend{ display:flex; flex-direction:column; gap:0.5rem; width:100%; max-width:360px; }
.legend-row{
  display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; padding:0.4rem 0.6rem;
  background:#12140c; border:1px solid var(--panel-border); border-radius: var(--radius-sm);
}
.legend-swatch{ width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.legend-row .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend-row .pct{ font-family: var(--font-mono); color: var(--text-dim); font-size:0.78rem; }
.legend-row .amt{ font-family: var(--font-mono); color: var(--green); min-width:2.5ch; text-align:right; }
.legend-row.winner{ border-color: var(--green); box-shadow:0 0 0 2px var(--green-glow); }
.legend-row.winner .name{ color: var(--green); font-weight:700; }
.roulette-banner{ text-align:center; font-family: var(--font-display); font-size:1.8rem; color: var(--green); text-shadow:0 0 24px var(--green-glow); animation: cardIn 500ms cubic-bezier(.2,.8,.2,1); }

/* wordle vote among actual suggestions */
.word-vote-grid{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-top:1rem; }
.word-vote-btn{
  font-family: var(--font-mono); letter-spacing:0.15em; padding:0.7rem 1.1rem; border-radius: var(--radius-sm);
  border:1px solid var(--panel-border-strong); background:#12140c; color: var(--text); cursor:pointer; font-size:1rem;
}
.word-vote-btn:hover{ border-color: var(--amber); }
.word-vote-btn.sel{ border-color: var(--amber); box-shadow:0 0 0 3px var(--amber-glow); color: var(--amber); }

/* voting grid */
.vote-grid{ display:grid; gap:0.8rem; }
.vote-opt{
  border:1px solid var(--panel-border-strong); border-radius: var(--radius-sm); background:#12140c; padding:0.9rem;
  cursor:pointer; text-align:left; display:flex; gap:0.8rem; align-items:flex-start; transition: border-color .12s, box-shadow .12s;
}
.vote-opt:hover{ border-color: var(--amber); }
.vote-opt.sel{ border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.vote-opt.own{ opacity:0.45; cursor:not-allowed; }
.vote-opt img{ width:90px; height:64px; object-fit:cover; border-radius:6px; background:#fff; flex-shrink:0; }
.vote-opt .txt{ font-size:0.95rem; line-height:1.45; }

/* sketch voting — big thumbnails you can actually see, plus a zoom button */
.vote-grid.sketch-grid{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.vote-opt.sketch-vote-opt{ position:relative; padding:0.5rem; display:block; }
.vote-opt.sketch-vote-opt img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.img-zoom-btn{
  position:absolute; top:0.7rem; right:0.7rem; width:32px; height:32px; border-radius:50%;
  background: rgba(6,7,4,0.72); border:1px solid rgba(255,255,255,0.25); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.img-zoom-btn svg{ width:16px; height:16px; }
.img-zoom-btn:hover{ border-color: var(--amber); color: var(--amber); }

/* result gallery — every drawing, not just the winner */
.result-gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:0.8rem; margin-top:0.8rem; }
.gallery-cell{ background:#12140c; border:1px solid var(--panel-border-strong); border-radius: var(--radius-sm); padding:0.5rem; }
.gallery-cell.winner{ border-color: var(--green); box-shadow: 0 0 0 2px var(--green-glow); }
.gallery-cell img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; cursor:zoom-in; background:#fff; }
.gallery-caption{ display:flex; justify-content:space-between; gap:0.5rem; font-size:0.8rem; margin-top:0.4rem; }

/* lightbox */
.lightbox-wrap{ display:flex; align-items:center; justify-content:center; }
.lightbox-wrap img{ max-width:100%; max-height:80vh; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.6); }

/* canvas */
.canvas-wrap{ display:flex; flex-direction:column; gap:0.7rem; align-items:center; width:100%; }
#draw-canvas{ background:#f4f1e6; border-radius: 10px; touch-action:none; width:100%; max-width:640px; aspect-ratio: 4/3; box-shadow: 0 10px 30px rgba(0,0,0,0.4); cursor:crosshair; }
.canvas-toolbar{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); cursor:pointer; flex-shrink:0; }
.swatch.sel{ border-color: var(--amber); box-shadow:0 0 0 3px var(--amber-glow); }
.swatch-picker{
  -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,0.25);
  cursor:pointer; padding:0; background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); flex-shrink:0;
}
.swatch-picker::-webkit-color-swatch-wrapper{ padding:0; border-radius:50%; }
.swatch-picker::-webkit-color-swatch{ border:none; border-radius:50%; }
.swatch-picker.sel{ border-color: var(--amber); box-shadow:0 0 0 3px var(--amber-glow); }
.tool-btn{
  background:#12140c; border:1px solid var(--panel-border-strong); color: var(--text); border-radius: var(--radius-sm);
  padding:0.55rem 0.9rem; cursor:pointer; font-size:0.85rem; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:0.3rem;
}
.tool-btn svg{ width:16px; height:16px; }
.tool-btn.active{ border-color: var(--amber); color: var(--amber); }

/* wordle grid */
.wordle-board{ display:flex; flex-direction:column; gap:0.4rem; align-items:center; margin: 0.6rem 0; }
.wordle-row{ display:flex; gap:0.4rem; }
.wordle-cell{
  width:44px; height:44px; border-radius:6px; border:1px solid var(--panel-border-strong); background:#12140c;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:1.3rem;
  text-transform:uppercase; color: var(--text);
}
.wordle-cell.hit{ background: var(--green); border-color: var(--green); color:#0c1806; }
.wordle-cell.present{ background: var(--amber); border-color: var(--amber); color:#1a1204; }
.wordle-cell.miss{ background:#1c1f14; color: var(--text-faint); }
.wordle-row-wrap{ display:flex; flex-direction:column; align-items:center; gap:0.15rem; }
.wordle-row-author{ font-family: var(--font-mono); font-size:0.66rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
.wordle-cell.typed{ border-color: var(--amber); color: var(--amber); }

/* on-screen ЙЦУКЕН keyboard — click to build a guess, no OS keyboard popup */
.keyboard{ display:flex; flex-direction:column; gap:0.35rem; margin-top:1rem; width:100%; }
.kb-row{ display:flex; gap:0.28rem; justify-content:center; }
.kb-key{
  flex:1; max-width:38px; height:46px; border-radius:6px; border:1px solid var(--panel-border-strong);
  background:#171a10; color: var(--text); font-family: var(--font-display); font-weight:600; font-size:1rem;
  text-transform:uppercase; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  transition: background .15s, border-color .15s;
}
.kb-key:active{ transform: translateY(1px); }
.kb-key.hit{ background: var(--green); border-color: var(--green); color:#0c1806; }
.kb-key.present{ background: var(--amber); border-color: var(--amber); color:#1a1204; }
.kb-key.miss{ background:#0e0f0a; color: var(--text-faint); border-color: var(--panel-border); }
.kb-key.kb-wide{ max-width:56px; font-size:0.72rem; letter-spacing:0.03em; }
.kb-key.kb-enter{ color: var(--amber); border-color: var(--amber-dim); }
.keyboard.kb-disabled{ opacity:0.4; pointer-events:none; }

@media (max-width:420px){
  .kb-key{ height:42px; font-size:0.9rem; }
  .kb-key.kb-wide{ font-size:0.62rem; }
}

.wordle-legend{ display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; margin-top:0.7rem; }
.wordle-legend-item{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.76rem; color: var(--text-dim); }
.wordle-legend-swatch{ width:14px; height:14px; border-radius:4px; display:inline-block; flex-shrink:0; }
.wordle-legend-swatch.hit{ background: var(--green); }
.wordle-legend-swatch.present{ background: var(--amber); }
.wordle-legend-swatch.miss{ background:#1c1f14; border:1px solid var(--panel-border-strong); }

.wordle-answer-reveal{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin:0.8rem 0 0.4rem; }
.wordle-answer-label{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-dim); }
.wordle-answer-word{
  font-family: var(--font-display); font-weight:700; font-size:2.1rem; letter-spacing:0.4em; padding:0.35rem 0.9rem 0.25rem 1.1rem;
  border-radius:8px; background: var(--amber); color:#1a1204; text-shadow:none; box-shadow: 0 0 24px var(--amber-glow);
}

/* hangman (виселица) — same gallows silhouette used both for your own board
   (bigger) and every opponent's mini board, revealed one part per wrong letter */
.hangman-main{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin:0.6rem 0; }
.hangman-rig{ width:150px; color: var(--amber); }
.hg-svg{ width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; }
.hg-part{ stroke: var(--red); opacity:0; transition: opacity 180ms ease; fill:none; }
.hg-part.show{ opacity:1; }
circle.hg-part{ fill: var(--red); stroke:none; }
.hangman-word{ display:flex; flex-wrap:wrap; gap:0.3rem; justify-content:center; }
.hg-cell{
  width:32px; height:38px; border-radius:6px; border:1px solid var(--panel-border-strong); background:#12140c;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:1.1rem;
  text-transform:uppercase; color: var(--text);
}
.hg-cell.filled{ border-color: var(--green); color: var(--green); }

.hangman-opponents{ display:flex; gap:0.6rem; overflow-x:auto; padding:0.8rem 0.1rem 0.2rem; margin-top:0.6rem; border-top:1px dashed var(--panel-border); }
.hg-opp-tile{
  flex:0 0 auto; width:92px; text-align:center; background:#12140c; border:1px solid var(--panel-border);
  border-radius:8px; padding:0.5rem 0.4rem;
}
.hg-opp-tile .hg-svg{ width:56px; }
.hg-opp-tile .hg-opp-name{ font-size:0.72rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.2rem; }
.hg-opp-tile .hg-opp-status{ font-family: var(--font-mono); font-size:0.68rem; color: var(--text-faint); margin-top:0.2rem; }
.hg-opp-tile.won{ border-color: var(--green); box-shadow:0 0 0 2px var(--green-glow); }
.hg-opp-tile.won .hg-opp-status{ color: var(--green); }
.hg-opp-tile.lost{ border-color: var(--red); box-shadow:0 0 0 2px var(--red-glow); opacity:0.75; }
.hg-opp-tile.lost .hg-opp-status{ color: var(--red); }

@media (max-width:420px){
  .hangman-rig{ width:120px; }
  .hg-cell{ width:26px; height:32px; font-size:0.95rem; }
  .hg-opp-tile{ width:78px; }
  .hg-opp-tile .hg-svg{ width:46px; }
}

/* Ассоциации (contexto-style semantic guessing) */
.assoc-input-row{ display:flex; gap:0.5rem; margin:0.6rem 0; }
.assoc-input-row .text-input{ flex:1; }
.assoc-board{ display:flex; flex-direction:column; gap:0.35rem; margin-top:0.8rem; max-height:420px; overflow-y:auto; }
.assoc-row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:0.7rem;
  padding:0.5rem 0.8rem; border-radius:7px; font-family: var(--font-mono); font-size:0.9rem;
  background:#12140c; border:1px solid var(--panel-border);
}
.assoc-word{ font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.assoc-author{ font-size:0.72rem; color: var(--text-faint); text-transform:uppercase; }
.assoc-dist{ font-weight:700; min-width:3ch; text-align:right; }
.assoc-row.mine{ box-shadow: 0 0 0 2px #fff; }

.assoc-row.orange{ background:#ff8a3d; border-color:#ff8a3d; color:#2a1200; }
.assoc-row.orange .assoc-author{ color:#4a2400; }
.assoc-row.hotpink{ background:#ff3d8f; border-color:#ff3d8f; color:#2a0016; }
.assoc-row.hotpink .assoc-author{ color:#5c0030; }
.assoc-row.pink{ background:#e087b3; border-color:#e087b3; color:#2a0e1c; }
.assoc-row.pink .assoc-author{ color:#4a1830; }
.assoc-row.gray{ background:#181a11; border-color:var(--panel-border); border-left:4px solid #c05a86; color: var(--text); }
.assoc-row.gray .assoc-author{ color: var(--text-faint); }
.assoc-row.solved{
  background: var(--green); border-color: var(--green); color:#0c1806; box-shadow:0 0 0 2px var(--green-glow);
}
.assoc-row.solved .assoc-author{ color:#12300a; }
.assoc-row.solved .assoc-dist{ font-size:1.1rem; }

@media (max-width:420px){
  .assoc-row{ grid-template-columns:1fr auto; grid-template-areas:"word dist" "author author"; font-size:0.82rem; }
  .assoc-row .assoc-word{ grid-area:word; }
  .assoc-row .assoc-dist{ grid-area:dist; }
  .assoc-row .assoc-author{ grid-area:author; }
}

/* ai dilemma */
.dilemma-text{ font-size:1.05rem; line-height:1.55; color: var(--text); background:#12140c; border-left:3px solid var(--red); padding:0.9rem 1rem; border-radius:6px; }

.alarm-go{ border-color: var(--red) !important; box-shadow: 0 0 0 2px var(--red-glow), 0 0 40px var(--red-glow); animation: alarmPulse 0.5s ease-in-out infinite; }
@keyframes alarmPulse{ 0%,100%{ background: rgba(232,67,47,0.05);} 50%{ background: rgba(232,67,47,0.16);} }
.alarm-go .btn-danger{ font-size:1.6rem; letter-spacing:0.08em; }
.verdict-text{ font-style: normal; line-height:1.6; color: var(--amber); background: rgba(255,176,32,0.06); border:1px dashed var(--amber-dim); padding:1rem; border-radius:8px; }

/* result panel */
.result-panel{ text-align:center; }
.result-delta{ font-family: var(--font-display); font-size:2.4rem; font-weight:700; margin: 0.4rem 0; }
.result-delta.up{ color: var(--green); }
.result-delta.down{ color: var(--red); }
.result-winner{ font-size:1rem; color: var(--text-dim); margin-top:0.3rem; }
.result-all{ margin-top:1rem; display:grid; gap:0.5rem; text-align:left; }
.result-all .row{ display:flex; justify-content:space-between; gap:0.6rem; font-size:0.85rem; padding:0.4rem 0.6rem; background:#12140c; border-radius:6px; }

/* chat (available during bid phase for banter) */
.chat-feed{ height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; padding:0.8rem; background:#0c0e08; border-radius:8px; border:1px solid var(--panel-border); }
.chat-msg{ font-size:0.86rem; line-height:1.4; display:flex; align-items:center; flex-wrap:wrap; gap:0.3rem; }
.chat-msg .who{ color: var(--amber); font-weight:600; display:inline-flex; align-items:center; gap:0.3rem; }
.chat-msg .who svg{ width:14px; height:14px; flex-shrink:0; }
.chat-input-row{ display:flex; gap:0.6rem; margin-top:0.7rem; }
.chat-input-row .text-input{ flex:1; }

/* =========================================================
   Player rail
   ========================================================= */
.player-rail{ display:flex; gap:0.6rem; padding: 0.8rem 1.1rem 1.4rem; overflow-x:auto; max-width:900px; margin:0 auto; width:100%; }
.rail-chip{
  display:flex; align-items:center; gap:0.4rem; background: var(--panel-solid); border:1px solid var(--panel-border);
  border-radius: 999px; padding: 0.35rem 0.7rem 0.35rem 0.35rem; flex-shrink:0; font-size:0.78rem;
}
.rail-chip .avatar{ width:26px; height:26px; border-radius:50%; background:#0c0e08; display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.rail-chip.dead{ opacity:0.35; filter:grayscale(1); text-decoration: line-through; }
.rail-chip.offline{ opacity:0.5; }

/* =========================================================
   Game over
   ========================================================= */
.over-wrap{ max-width: 760px; margin:0 auto; padding: 2.4rem 1.1rem 3rem; width:100%; }
.over-banner{
  font-size: clamp(1.8rem,7vw,2.8rem); text-align:center; color: var(--green); text-shadow:0 0 30px var(--green-glow);
  animation: cardIn 700ms cubic-bezier(.2,.8,.2,1);
}
.over-sub{ text-align:center; color: var(--text-dim); margin: 0.6rem 0 1.8rem; font-family: var(--font-mono); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.1em; }

.leaderboard{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:2rem; }
.lb-row{
  display:flex; align-items:center; gap:0.8rem; background: var(--panel-solid); border:1px solid var(--panel-border-strong);
  border-radius: var(--radius-sm); padding:0.6rem 0.9rem;
}
.lb-row.first{ border-color: var(--green); box-shadow:0 0 0 2px var(--green-glow); }
.lb-row.cut{ opacity:0.5; filter:grayscale(0.6); }
.lb-rank{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--text-faint); width:2ch; text-align:center; }
.lb-row.first .lb-rank{ color: var(--green); }
.lb-avatar{ width:34px; height:34px; border-radius:50%; background:#0c0e08; display:flex; align-items:center; justify-content:center; border:1px solid var(--panel-border-strong); flex-shrink:0; color: var(--amber); }
.lb-avatar svg{ width:60%; height:60%; display:block; }
.lb-name{ flex:1; font-weight:600; }
.lb-rations{ font-family: var(--font-mono); color: var(--green); }

.awards-row{ display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:0.8rem; margin-bottom:2rem; }
.award-card{ background: var(--panel-solid); border:1px solid var(--panel-border-strong); border-radius: var(--radius); padding:1rem; text-align:center; }
.award-card .title{ font-family: var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--amber); margin-bottom:0.5rem; }
.award-card .avatar{ width:36px; height:36px; margin:0 auto; background:#0c0e08; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--panel-border-strong); }
.award-card .name{ font-weight:700; margin-top:0.3rem; }

.story-log{ display:flex; flex-direction:column; gap:0.7rem; margin: 0.8rem 0 2rem; }
.story-item{ background:#12140c; border-left:3px solid var(--amber-dim); border-radius:6px; padding:0.7rem 0.9rem; font-size:0.88rem; line-height:1.5; color: var(--text-dim); }
.story-item .rlabel{ font-family: var(--font-mono); font-size:0.68rem; color: var(--text-faint); text-transform:uppercase; margin-right:0.5rem; }
.story-item img{ display:block; max-width:160px; border-radius:6px; margin-top:0.5rem; background:#fff; }

.reveal-roles{ display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:0.7rem; margin-bottom:2rem; }
.reveal-card{ background:#12140c; border:1px solid var(--panel-border-strong); border-radius: var(--radius-sm); padding:0.8rem; text-align:center; }
.reveal-card .avatar{ width:36px; height:36px; margin:0 auto 0.4rem; background:#0c0e08; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--panel-border-strong); }
.reveal-card .role-tag{ font-family: var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; margin-top:0.35rem; color: var(--amber); }

/* =========================================================
   Toasts
   ========================================================= */
#toast-stack{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:0.5rem; align-items:center; pointer-events:none; }
.toast{
  font-family: var(--font-mono); font-size:0.8rem; background: rgba(15,17,10,0.92); border:1px solid var(--panel-border-strong);
  padding:0.55rem 0.9rem; border-radius: 999px; color: var(--text); box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation: toastIn 220ms ease;
}
.toast.error{ border-color: var(--red); color: #ffb3a6; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(-8px); } to{ opacity:1; transform:none; } }

/* =========================================================
   Modal (personal file / lobby settings / intercept)
   ========================================================= */
.modal-backdrop{
  position:fixed; inset:0; z-index:80; background: rgba(6,7,4,0.78); backdrop-filter: blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding: 3vh 1rem; overflow-y:auto;
}
.modal-backdrop[hidden]{ display:none !important; }
.modal-panel{
  position:relative; width:min(560px, 100%); background: linear-gradient(180deg,#191d10,#12150c);
  border:1px solid var(--panel-border-strong); border-radius: 14px; padding: 1.6rem 1.4rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px var(--amber-glow);
  animation: cardIn 300ms cubic-bezier(.2,.8,.2,1);
}
.modal-close{ position:absolute; top:0.9rem; right:0.9rem; }
.modal-panel h3{ margin-top:0; }

.item-box, .intercept-box{
  margin-top:1.1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm);
  background:#12140c; border:1px solid var(--panel-border);
}
.item-box .item-title{ font-weight:700; margin-bottom:0.25rem; }
.item-effect-desc, .intercept-box p{ color: var(--text-dim); font-size:0.86rem; margin-bottom:0.7rem; }
.intercept-target-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap:0.5rem; }
.intercept-target-btn{
  display:flex; flex-direction:column; align-items:center; gap:0.3rem; padding:0.6rem 0.4rem;
  background:#171a10; border:1px solid var(--panel-border-strong); border-radius: var(--radius-sm);
  color: var(--text); cursor:pointer; font-size:0.8rem;
}
.intercept-target-btn:hover{ border-color: var(--amber); }
.intercept-target-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.intercept-target-btn .avatar{ width:30px; height:30px; border-radius:50%; background:#0c0e08; display:flex; align-items:center; justify-content:center; color: var(--amber); }
.intercept-target-btn .avatar svg{ width:60%; height:60%; }
.intercept-reveal{ margin-top:0.8rem; padding:0.8rem; border-radius:8px; background: rgba(255,176,32,0.08); border:1px dashed var(--amber-dim); font-size:0.88rem; }

/* lobby settings */
.settings-panel{ margin-top:1.4rem; }
.settings-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:0.6rem; margin: 0.6rem 0 1rem; }
.settings-toggle{
  display:flex; align-items:center; gap:0.5rem; padding:0.55rem 0.7rem; background:#12140c;
  border:1px solid var(--panel-border-strong); border-radius: var(--radius-sm); cursor:pointer; font-size:0.85rem;
}
.settings-toggle input{ accent-color: var(--amber); width:16px; height:16px; }
.settings-toggle.disabled{ opacity:0.45; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.5rem 0; border-bottom:1px dashed var(--panel-border); font-size:0.86rem; }
.settings-row input[type=number]{ width:70px; background:#0c0e08; border:1px solid var(--panel-border-strong); color:var(--text); border-radius:6px; padding:0.3rem 0.5rem; font-family:var(--font-mono); }
.settings-summary{ font-family: var(--font-mono); font-size:0.72rem; color: var(--text-faint); margin-top:0.5rem; }

/* =========================================================
   Misc / responsive
   ========================================================= */
.host-only[hidden]{ display:none !important; }

/* Safe-area padding for notches / home-indicator / Dynamic Island, since the
   viewport meta uses viewport-fit=cover so content can sit under them. */
.hud-top{ padding-top: max(0.9rem, env(safe-area-inset-top)); padding-left: max(1.1rem, env(safe-area-inset-left)); padding-right: max(1.1rem, env(safe-area-inset-right)); }
#toast-stack{ top: max(14px, env(safe-area-inset-top)); }
.modal-backdrop{ padding-top: max(3vh, env(safe-area-inset-top)); padding-bottom: max(3vh, env(safe-area-inset-bottom)); }
.landing-wrap{ padding-bottom: max(4rem, env(safe-area-inset-bottom)); }
.over-wrap{ padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
.lobby-footer{ padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }

@media (max-width:600px){
  .stage{ padding:1.1rem 0.8rem 1.6rem; }
  .landing-wrap{ padding-left:1rem; padding-right:1rem; }
  .lobby-body{ padding:1.2rem 0.9rem; }
  .over-wrap{ padding-left:0.9rem; padding-right:0.9rem; }
  .modal-panel{ padding:1.3rem 1.1rem; }
  .stage-card{ padding:1.1rem; }
}

@media (max-width:480px){
  .hud-top{ gap:0.6rem; padding-left: max(0.8rem, env(safe-area-inset-left)); padding-right: max(0.8rem, env(safe-area-inset-right)); padding-top: max(0.65rem, env(safe-area-inset-top)); padding-bottom:0.65rem; }
  .hud-label{ font-size:0.6rem; }
  .hud-value{ font-size:0.95rem; }
  .room-code-value{ font-size:1.15rem; letter-spacing:0.2em; }
  .avatar-opt{ width:40px; height:40px; }
  .icon-btn{ width:36px; height:36px; }
  .btn{ padding:0.75rem 1rem; }
  .over-banner{ font-size: clamp(1.5rem,9vw,2.4rem); }
  .lb-row, .award-card, .gallery-cell, .council-card, .reveal-card{ padding:0.6rem; }
  .wordle-answer-word{ font-size:1.6rem; letter-spacing:0.28em; padding:0.3rem 0.7rem 0.2rem 0.85rem; }
  .wheel-outer{ width:min(88vw,300px); height:min(88vw,300px); }
}

@media (max-width:360px){
  .hud-top{ gap:0.4rem; }
  .hud-label{ display:none; } /* icon/value alone still reads fine at this width, labels just crowd it */
  .brand-desc{ font-size:0.88rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}