:root{
  --surface: #18181c;
  --surface-2: #1c1c21;
  --input-bg: #0c0c0e;
  --border: #2a2a2e;
  --border-soft: rgba(255,255,255,.08);
  --text-soft: #9a9aa2;
  --text-faint: #6c6c74;
  --danger: #e05555;
  --radius-s: 8px;
  --radius-m: 12px;
}
*{ box-sizing: border-box; }
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.hidden{ display:none !important; }

body{
  overflow-x:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink); transition:padding-left .25s ease;
}
body:not(.live-mode){ padding-left:360px; }
@media (max-width:900px){ body:not(.live-mode){ padding-left:0; } }
body.live-mode .stage{ margin:0; max-width:100%; width:100vw; height:100vh; height:100dvh; border-radius:0; }

/* --- Stage: a deep night-sky card — the silhouette's warm glow is the one
   spot of color, same "single bold thing on a dark ground" staging the
   reference clip uses. --- */
.stage{
  position:relative; width:100%; max-width:520px; height:720px; margin:24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:56px 22px 32px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 8%, rgba(120,90,220,.25), transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% 115%, rgba(20,10,40,.9), transparent),
    linear-gradient(180deg, #1c1030 0%, #140a24 55%, #0e081c 100%);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.watermark{
  position:absolute; top:8px; right:22px;
  height:40px; width:auto;
  opacity:1; pointer-events:none; z-index:5;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.streak-pill{
  position:absolute; top:14px; left:22px; z-index:5;
  background:linear-gradient(180deg,var(--green),var(--green-dark));
  border-radius:999px; padding:7px 16px; min-width:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft);
}
.streak-pill span{ font-family:var(--font); font-weight:900; font-size:20px; color:#0c2a10; line-height:1; }
.streak-pill small{ font-weight:800; color:#0c2a10; letter-spacing:1px; font-size:9px; margin-top:1px; }

.quiz-wrap{ width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.quiz-title{
  margin:0; text-align:center; color:var(--text-color, #fff); font-family:var(--font); font-weight:800;
  font-size:clamp(19px,4vw,24px); text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.timer-pill{ display:flex; align-items:baseline; gap:4px; margin:2px 0 18px; }
.timer-pill span{
  font-family:var(--font); font-weight:900; font-size:clamp(30px,7vw,40px); color:#c9c3e6;
  line-height:1; transition:color .2s ease;
}
.timer-pill small{ font-weight:700; color:#8f88b0; font-size:13px; }
.timer-pill.critical span{ color:#ff5a5a; }
.timer-pill.critical span{ animation:timerPulse .5s ease infinite alternate; }
@keyframes timerPulse{ from{ transform:scale(1); } to{ transform:scale(1.12); } }

/* --- The silhouette itself: the official artwork turned solid black via
   filter (no separate "shadow" asset needed — brightness(0) collapses every
   opaque pixel to black while keeping the artwork's own alpha shape), sat
   on a warm radial glow like a spotlight. Revealing it is just lifting
   that filter back off. The artwork is 475px, not the 96px pixel sprite
   the race uses — filling a whole circle from a 96px image meant blowing
   it up into big hard-edged blocks. --- */
.silhouette-stage{
  position:relative; width:min(66vw,240px); height:min(66vw,240px);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.silhouette-glow{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, rgba(244,150,40,.5), rgba(244,150,40,.16) 55%, transparent 76%);
  filter:blur(1px);
}
/* No transition on the base state, on purpose: a transition is picked from
   the *destination* style, so with it here, starting a round (revealed →
   black) animated the filter over .45s and the new sprite was visible in
   colour, fading out, for the first half-second — it gave the answer away.
   Black has to be instant; only the reveal (black → colour) is animated,
   so the transition lives on .revealed instead. */
/* Fills the whole stage box, and --fit-k / --fit-tx / --fit-ty (measured per
   Pokémon in JS, see fitSpriteToCircle) scale and re-centre it so its own
   farthest pixel lands on the glow's edge. A fixed size can't do that: the
   transparent margin around a Pokémon varies a lot, so any single size is
   either tiny for most of them or pokes out of the circle for the big ones.
   Uses the standalone `scale`/`translate` properties rather than `transform`
   on purpose — the keyframes below animate `transform`, and these compose
   with it instead of being overwritten (and snapping back) when they run. */
.silhouette-img{
  position:relative; width:100%; height:100%; object-fit:contain;
  filter:brightness(0) saturate(100%);
  opacity:0;
  scale:var(--fit-k, .9);
  translate:var(--fit-tx, 0%) var(--fit-ty, 0%);
}
.silhouette-img.shown{ opacity:1; animation:silhouetteIn .4s ease; }
.silhouette-img.revealed{ filter:none; transition:filter .45s ease; animation:silhouettePop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes silhouetteIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }
/* Peaks at 1.05, not the old 1.1: the sprite now already touches the edge of
   the circle, and a bigger pop would push it visibly past it. */
@keyframes silhouettePop{ 0%{ transform:scale(.94); } 55%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
.idle-msg{
  position:absolute; margin:0; color:var(--text-color, #fff); opacity:.6; font-size:13px; text-align:center;
  font-family:var(--font); text-transform:uppercase; letter-spacing:.5px; max-width:80%;
}
.idle-msg.hidden{ display:none; }

.guess-form{ width:100%; display:flex; gap:8px; }
.guess-form input[type="text"]{
  flex:1; min-width:0; font-size:15px; padding:13px 16px; border-radius:999px;
  border:2px solid rgba(223,32,48,.5); background:rgba(0,0,0,.4); color:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.guess-form input[type="text"]::placeholder{ color:rgba(255,255,255,.4); }
.guess-form input[type="text"]:disabled{ opacity:.5; }
.guess-form input[type="text"].wrong{ animation:guessShake .35s ease; border-color:var(--danger); }
@keyframes guessShake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}
.guess-form button{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand-red); color:#fff; font-size:18px; font-weight:800;
  transition:background .15s ease, transform .1s ease;
}
.guess-form button:hover:not(:disabled){ background:var(--brand-red-dark); }
.guess-form button:disabled{ opacity:.4; cursor:not-allowed; }
.guess-form button:active:not(:disabled){ transform:scale(.92); }

.round-status{
  margin:14px 0 0; min-height:20px; text-align:center; font-family:var(--font); font-weight:800;
  font-size:14px; letter-spacing:.2px; text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.round-status.correct{ color:#5ee08a; }
.round-status.timeup{ color:#ff8686; }

/* --- Corner gear + dock (same convention as the other games) --- */
.corner-hover{ position:fixed; top:0; right:0; width:76px; height:76px; display:flex; align-items:flex-start; justify-content:flex-end; padding:12px; opacity:0; transition:opacity .2s ease; z-index:100; }
.corner-hover:hover{ opacity:1; }
.dock-toggle{ width:38px; height:38px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; font-size:18px; cursor:pointer; }

.dock{
  position:fixed; top:0; left:0; width:360px; height:100vh; overflow-y:auto;
  background:#141417; border-right:1px solid rgba(255,255,255,.08);
  padding:20px; display:flex; flex-direction:column; gap:16px; z-index:80;
}
body.live-mode .dock{ display:none; }
.dock .back-link{ font-size:12px; color:#888; text-decoration:none; }
.dock .back-link:hover{ color:#fff; }
.dock h2{ margin:0; font-size:16px; font-family:var(--font); color:#fff; }
.dock .hint{ margin:0; font-size:11px; color:#777; }
.live-toggle{ appearance:none; cursor:pointer; border:none; border-radius:12px; padding:12px; font-weight:800; font-size:13px; background:#232327; color:#fff; }

button.call-btn{
  appearance:none; border:none; cursor:pointer; width:100%; background:var(--brand-red); color:#fff;
  font-family:var(--font); font-weight:800; font-size:16px; border-radius:12px; padding:12px;
  transition:background .15s ease;
}
button.call-btn:hover{ background:var(--brand-red-dark); }
button.call-btn:disabled{ opacity:.5; cursor:not-allowed; }

.seg-details{ border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
.seg-details summary{ cursor:pointer; font-size:13px; font-weight:800; font-family:var(--font); letter-spacing:.02em; text-transform:uppercase; color:#ddd; list-style:none; display:flex; align-items:center; gap:6px; }
.seg-details summary::-webkit-details-marker{ display:none; }
.seg-details summary::before{ content:'▸'; color:var(--brand-red); font-size:12px; transition:transform .15s ease; }
.seg-details[open] summary::before{ transform:rotate(90deg); }
.count-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; padding:0 6px; height:18px; border-radius:999px;
  background:var(--brand-red); color:#fff; font-size:10px; font-weight:800;
}
.section-body{ margin-top:12px; }
.hint-text{ font-size:11.5px; color:var(--text-faint); margin:0 0 12px; line-height:1.5; }

.pool-size-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pool-size-row label{ font-size:12.5px; color:var(--text-soft); white-space:nowrap; }
.pool-size-row input[type="number"]{
  width:64px; font-size:13px; padding:8px 10px; border-radius:var(--radius-m);
  border:1px solid var(--border); background:var(--input-bg); color:#fff;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  appearance:none; cursor:pointer; font-size:13px; font-weight:700;
  padding:8px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:#ddd;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ border-color:var(--brand-red); }
.chip .check{ display:inline-block; width:13px; height:13px; border-radius:4px; border:1.5px solid var(--border); margin-right:7px; vertical-align:-2px; position:relative; }
.chip:disabled{ cursor:not-allowed; }
.chip .chip-region{ color:var(--text-faint); font-size:11px; margin-left:2px; }
.chip[aria-pressed="true"] .chip-region{ color:rgba(255,255,255,.65); }
.gen-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.gen-pool-info{ font-size:12px; color:var(--text-soft); }
.gen-all-btn{ background:none; border:1px solid var(--border); color:var(--text-soft); border-radius:999px; padding:5px 12px; font-size:12px; font-family:var(--font); cursor:pointer; }
.gen-all-btn:hover:not(:disabled){ border-color:var(--brand-red); color:#fff; }
.gen-all-btn:disabled{ opacity:.45; cursor:default; }
.chip[aria-pressed="true"]{ background:rgba(223,32,48,.16); border-color:var(--brand-red); color:#fff; }
.chip[aria-pressed="true"] .check{ background:var(--brand-red); border-color:var(--brand-red); }
.chip[aria-pressed="true"] .check::after{
  content:""; position:absolute; left:2.5px; top:-0.5px; width:4px; height:7px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg);
}

.color-field{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.color-field label{ flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--text-soft); min-width:88px; }
.color-field input[type="text"]{
  flex:1; min-width:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; padding:9px 10px;
  border-radius:var(--radius-s); border:1px solid var(--border); background:var(--input-bg); color:#fff;
}
.color-field input[type="color"]{
  width:34px; height:34px; padding:0; border-radius:8px; border:1px solid var(--border); background:none; cursor:pointer; flex:0 0 auto;
}

.round-reset-btn{ border-radius:12px; padding:12px; font-weight:800; font-size:13px; cursor:pointer; background:#232327; color:#e0b84c; border:1px solid #3a331a; }
.round-reset-btn:disabled{ opacity:.5; cursor:not-allowed; }

.modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box{ background:#18181c; border:1px solid #2e2e34; border-radius:16px; padding:22px; max-width:360px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.modal-box p{ margin:0 0 18px; color:#fff; font-size:14px; line-height:1.4; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; }
.modal-btn{ border:none; border-radius:10px; padding:10px 16px; font-weight:700; font-size:13px; cursor:pointer; }
.modal-btn-ghost{ background:#232327; color:#ccc; }
.modal-btn-ghost:hover{ background:#2e2e34; }
.modal-btn-primary{ background:var(--brand-red); color:#fff; }
.modal-btn-primary:hover{ background:var(--brand-red-dark); }

#confettiLayer{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999; }
.confetti-piece{ position:absolute; top:-12px; width:8px; height:14px; opacity:.95; animation:confettiFall linear forwards; }
@keyframes confettiFall{ to{ transform:translateY(105vh) translateX(var(--dx)) rotate(var(--rot)); opacity:.25; } }

/* Phones: the silhouette gives up some size when the screen is short, so the answer box always stays above
   the bottom bar (the stage is as tall as the visible area, see .fills-screen in shared/mobile-dock.css). */
@media (max-width:900px){
  .silhouette-stage{
    width:min(66vw, 240px, max(150px, calc(100vh - 425px)));
    height:min(66vw, 240px, max(150px, calc(100vh - 425px)));
    width:min(66vw, 240px, max(150px, calc(100dvh - 425px)));
    height:min(66vw, 240px, max(150px, calc(100dvh - 425px)));
  }
}
/* Held sideways there is no room to fit the whole round above the bar: the stage keeps its natural height and the page scrolls. */
@media (max-width:900px) and (max-height:520px){ .stage{ --stage-min:480px; } }

/* --- Espejo dentro del live de Chasers (shared/espejo.js): la silueta se queda con su cielo
   nocturno (sobre el video no se leería). Quien mira no adivina escribiendo, adivina en el
   chat: la caja de respuesta es del vendedor. --- */
html.modo-espejo .guess-form, html.modo-espejo .idle-msg{ display: none !important; }

/* --- Dentro del live: la sala adivina en el chat. La pista y el marcador sólo salen ahí
   (control y espejo); abierto a secas se adivina escribiendo en la caja. --- */
.chat-hint{
  margin:6px 0 0; text-align:center; font-family:var(--font); font-weight:800; font-size:12.5px;
  color:rgba(255,255,255,.78); text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.marcador{
  list-style:none; margin:10px 0 0; padding:8px 12px; width:100%; max-width:300px;
  background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.12); border-radius:14px;
  display:flex; flex-direction:column; gap:4px; font-family:var(--font); font-weight:800; font-size:13px; color:#fff;
}
.marcador li{ display:flex; align-items:center; gap:8px; }
.marcador .m-pos{ width:18px; color:rgba(255,255,255,.6); font-size:11px; }
.marcador .m-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marcador .m-puntos{ color:#5ee08a; }
html.modo-espejo .guess-form{ display:none !important; }
html.modo-control .guess-form input::placeholder{ color:rgba(255,255,255,.45); }