*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--black);color:var(--cream);font-family:'DM Mono',monospace;touch-action:none}
body{overflow:hidden}
body.game-locked{overflow:hidden}

/* ── Animated Pils background (behind everything) ───────────────────────── */
#pils-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%, #2a1a00 0%, #0d0600 55%, #060400 100%)}
#pils-bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 15%, rgba(245,176,48,.08) 0%, transparent 35%),
             radial-gradient(circle at 80% 90%, rgba(212,146,10,.06) 0%, transparent 40%)}
/* Falling beer stream (right side, loops) */
.pils-pour{position:absolute;right:14%;top:-10%;width:14px;height:48%;
  background:linear-gradient(to bottom, transparent 0%, rgba(245,176,48,.35) 10%,
    rgba(245,176,48,.85) 40%, rgba(212,146,10,.95) 100%);
  border-radius:50%;filter:blur(1px);opacity:.6;
  animation:pourFall 3.2s ease-in infinite;transform-origin:top center}
@keyframes pourFall{
  0%   {transform:scaleY(0);opacity:0}
  10%  {opacity:.6}
  70%  {transform:scaleY(1);opacity:.6}
  90%  {opacity:.25}
  100% {transform:scaleY(1);opacity:0}
}
/* Glass fill (bottom-right, rises with pour) */
.pils-fill{position:absolute;right:8%;bottom:8%;width:26%;max-width:240px;height:42%;
  background:linear-gradient(to top, rgba(212,146,10,.55) 0%, rgba(245,176,48,.42) 70%, rgba(245,176,48,.2) 100%);
  border-radius:4px 4px 14px 14px;filter:blur(3px);opacity:.5;
  animation:fillRise 3.2s ease-in-out infinite}
@keyframes fillRise{
  0%,100% {transform:scaleY(.4);transform-origin:bottom}
  50%     {transform:scaleY(1);transform-origin:bottom}
}
/* Foam cap on the glass */
.pils-foam{position:absolute;right:8%;bottom:calc(8% + 38%);width:26%;max-width:240px;height:8%;
  background:radial-gradient(ellipse at 50% 80%, rgba(255,250,220,.75) 0%, rgba(255,243,208,.3) 60%, transparent 100%);
  filter:blur(4px);opacity:.45;
  animation:foamPulse 3.2s ease-in-out infinite}
@keyframes foamPulse{
  0%,100% {transform:translateY(14px) scale(.8);opacity:.2}
  50%     {transform:translateY(0) scale(1);opacity:.55}
}
/* Floating bubbles */
.pils-bubble{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.85) 0%, rgba(255,243,208,.25) 40%, transparent 70%);
  filter:blur(.5px);opacity:.35;pointer-events:none}
.pils-bubble.b1{width:22px;height:22px;left:18%;bottom:12%;animation:bubbleUp 6s ease-in infinite}
.pils-bubble.b2{width:14px;height:14px;left:32%;bottom:8%;animation:bubbleUp 4.7s ease-in .6s infinite}
.pils-bubble.b3{width:28px;height:28px;left:12%;bottom:22%;animation:bubbleUp 7.4s ease-in 1.2s infinite}
.pils-bubble.b4{width:10px;height:10px;left:6%;bottom:35%;animation:bubbleUp 3.8s ease-in 1.8s infinite}
.pils-bubble.b5{width:18px;height:18px;left:24%;bottom:6%;animation:bubbleUp 5.6s ease-in .3s infinite}
@keyframes bubbleUp{
  0%   {transform:translateY(0) scale(.4);opacity:0}
  15%  {opacity:.5}
  85%  {opacity:.35}
  100% {transform:translateY(-110vh) scale(1.2);opacity:0}
}

/* ── Foam sweep overlay (T20 / Bull / 180) ──────────────────────────────── */
#foam-sweep{position:fixed;inset:0;z-index:450;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,250,220,.92) 0%, rgba(255,243,208,.55) 30%, transparent 55%),
    radial-gradient(circle at 25% 10%, rgba(255,255,255,.8) 0%, transparent 8%),
    radial-gradient(circle at 65% 18%, rgba(255,255,255,.6) 0%, transparent 6%),
    radial-gradient(circle at 85% 8%, rgba(255,255,255,.7) 0%, transparent 7%),
    radial-gradient(circle at 42% 5%, rgba(255,255,255,.5) 0%, transparent 5%);
  transform:translateY(-100%)}
#foam-sweep.fire{animation:foamSweep 1.4s cubic-bezier(.4,.0,.2,1) forwards}
@keyframes foamSweep{
  0%   {transform:translateY(-100%);opacity:0}
  22%  {transform:translateY(-20%);opacity:1}
  55%  {transform:translateY(0);opacity:.85}
  100% {transform:translateY(30%);opacity:0}
}

.screen{display:none;flex-direction:column;min-height:100%;align-items:center;justify-content:flex-start;
  padding:3rem 1.1rem calc(104px + env(safe-area-inset-bottom,0px));text-align:center;gap:.55rem;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.active{display:flex}
#screen-intro,#screen-names{gap:.55rem}
#screen-result{justify-content:center;gap:.7rem;padding-top:2rem}
body.game-locked #screen-game{overflow:hidden;height:100%;min-height:0;padding:.4rem .3rem .3rem}

#back{position:fixed;top:.8rem;left:.8rem;z-index:300;color:rgba(255,243,208,.6);text-decoration:none;font-size:1.3rem;padding:.3rem}

/* Intro */
.logo{font-family:Anton,sans-serif;font-size:2.2rem;color:var(--amber-hi);line-height:1;letter-spacing:.05em;margin-top:.2rem}
.intro-quote{font-size:.82rem;color:rgba(255,243,208,.55);font-style:italic;margin-bottom:.15rem}

/* Mode select */
.mode-select{display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:330px;margin-top:.15rem}
.mode-card{position:relative;background:rgba(245,176,48,.06);border:2px solid rgba(255,243,208,.12);
  border-radius:12px;padding:.65rem .95rem;cursor:pointer;text-align:left;
  transition:border-color .12s ease-out,background .12s ease-out,transform .1s ease-out,box-shadow .12s ease-out}
.mode-card:active{transform:scale(.98)}
.mode-card.selected{border-color:var(--amber-hi);background:rgba(245,176,48,.14);box-shadow:0 0 18px rgba(245,176,48,.28)}
.mode-card .mode-label{font-family:'Anton',sans-serif;font-size:1.65rem;color:var(--cream);line-height:1;letter-spacing:.04em}
.mode-card.selected .mode-label{color:var(--amber-hi)}
.mode-card .mode-sub{font-size:.68rem;color:rgba(255,243,208,.55);margin-top:.12rem;letter-spacing:.06em}
.mode-card .mode-tag{position:absolute;top:.4rem;right:.5rem;font-size:.55rem;letter-spacing:.15em;
  color:var(--amber-hi);background:rgba(245,176,48,.18);padding:.15rem .42rem;border-radius:4px}

/* Difficulty chip (collapsible) */
.diff-chip-wrap{width:100%;max-width:330px;margin-top:.35rem;position:relative}
.diff-chip{display:flex;align-items:center;gap:.6rem;width:100%;
  background:rgba(245,176,48,.08);border:1px solid rgba(245,176,48,.35);border-radius:10px;
  padding:.5rem .75rem;cursor:pointer;color:var(--cream);text-align:left;
  transition:border-color .12s ease-out,background .12s ease-out,transform .1s ease-out}
.diff-chip:active{transform:scale(.98)}
.diff-chip[aria-expanded="true"]{border-color:var(--amber-hi);background:rgba(245,176,48,.14);box-shadow:0 0 14px rgba(245,176,48,.25)}
.diff-chip-icon{font-size:1.1rem;flex-shrink:0}
.diff-chip-text{display:flex;flex-direction:column;gap:.08rem;flex:1;min-width:0}
.diff-chip-name{font-family:'Anton',sans-serif;font-size:.95rem;letter-spacing:.06em;color:var(--amber-hi);line-height:1}
.diff-chip-sub{font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.08em;color:rgba(255,243,208,.55);line-height:1.1}
.diff-chip-caret{font-size:.85rem;color:var(--amber-hi);transition:transform .15s ease-out;flex-shrink:0}
.diff-chip[aria-expanded="true"] .diff-chip-caret{transform:rotate(180deg)}

.diff-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.4rem}
.diff-panel[hidden]{display:none}
.diff-opt{background:rgba(245,176,48,.05);border:2px solid rgba(255,243,208,.1);border-radius:10px;
  padding:.45rem .35rem;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:.25rem;
  color:var(--cream);transition:border-color .12s ease-out,background .12s ease-out,transform .1s ease-out}
.diff-opt:active{transform:scale(.96)}
.diff-opt.selected{border-color:var(--amber-hi);background:rgba(245,176,48,.14);box-shadow:0 0 14px rgba(245,176,48,.25)}
.diff-opt-name{font-family:'Anton',sans-serif;font-size:.9rem;color:var(--cream);letter-spacing:.05em;line-height:1}
.diff-opt.selected .diff-opt-name{color:var(--amber-hi)}
.diff-opt-sub{font-size:.54rem;letter-spacing:.08em;color:rgba(255,243,208,.5);line-height:1.25}

/* TTS switch */
.tts-switch{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;margin-top:.15rem;
  padding:.45rem .7rem;background:rgba(245,176,48,.06);border:1px solid rgba(255,243,208,.12);border-radius:10px;
  max-width:330px;width:100%;justify-content:center}
.tts-switch input{position:absolute;opacity:0;width:0;height:0}
.tts-switch-slider{position:relative;display:inline-block;width:38px;height:22px;background:rgba(255,243,208,.15);
  border-radius:11px;transition:background .15s ease-out;flex-shrink:0}
.tts-switch-slider::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:#FFF3D0;border-radius:50%;transition:transform .15s ease-out, background .15s ease-out}
.tts-switch input:checked + .tts-switch-slider{background:var(--amber)}
.tts-switch input:checked + .tts-switch-slider::after{transform:translateX(16px);background:#FFF3D0}
.tts-switch-label{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--cream)}

/* Hero + Char Picker */
.darts-hero-card{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;border:2px solid var(--amber-hi);
  border-radius:12px;background:rgba(245,176,48,.08);width:100%;max-width:320px;box-sizing:border-box}
.darts-hero-photo{width:50px;height:50px;border-radius:50%;background:#1a0f00 center/cover;
  border:2px solid var(--amber-hi);flex-shrink:0}
.darts-hero-info{flex:1;min-width:0;text-align:left}
.darts-hero-label{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--amber-hi);letter-spacing:.1em}
.darts-hero-name{font-family:'Anton',sans-serif;font-size:1.25rem;color:var(--cream);letter-spacing:.04em}
.darts-vs{font-family:'Anton',sans-serif;font-size:1.2rem;color:var(--amber);letter-spacing:.15em;margin:.15rem 0}
.darts-p2-label{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--cream);opacity:.8;
  letter-spacing:.12em;margin-bottom:.2rem}
.darts-p2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;width:100%;max-width:320px;
  padding:.15rem;box-sizing:border-box}
.darts-p2-item{aspect-ratio:1;border-radius:8px;background:#1a0f00 center/cover;
  border:2px solid transparent;position:relative;cursor:pointer;overflow:hidden;
  transition:border-color .12s ease-out,box-shadow .12s ease-out,transform .1s ease-out}
.darts-p2-item:active{transform:scale(.95)}
.darts-p2-item.selected{border-color:var(--amber-hi);box-shadow:0 0 12px rgba(245,176,48,.6)}
.darts-p2-item-name{position:absolute;bottom:0;left:0;right:0;font-family:'DM Mono',monospace;
  font-size:.55rem;background:rgba(0,0,0,.78);color:var(--cream);text-align:center;padding:2px 1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Buttons — aligned to M3 Button Standard */
.btn{font-family:Anton,sans-serif;font-size:1.15rem;letter-spacing:.04em;padding:.85rem 2.2rem;
  min-height:44px;min-width:44px;
  border:none;border-radius:8px;cursor:pointer;transition:opacity .1s ease-out}
.btn:active{opacity:.6}
.btn[disabled]{opacity:.4;pointer-events:none;filter:saturate(.5)}
.btn-primary{background:var(--amber);color:var(--black);border:2px solid var(--cream)}
.btn-ghost{background:rgba(255,243,208,.08);color:var(--cream);border:1px solid rgba(255,243,208,.15);font-size:.95rem;padding:.65rem 1.5rem}

/* Game screen */
#screen-game{justify-content:flex-start;padding:.4rem .3rem .3rem;gap:.35rem}

/* ── PILS DASHBOARD: Tavern-plank frame + two Pilsgläser + Kreidetafel ── */
.hud{width:100%;max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem;
  padding:.55rem .8rem .7rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(40,20,0,.18) 0px, rgba(40,20,0,.18) 2px,
      transparent 2px, transparent 7px),
    linear-gradient(180deg, #3a2208 0%, #1d1003 60%, #0f0700 100%);
  border:2px solid rgba(245,176,48,.6);
  border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(245,176,48,.3),
    inset 0 -3px 6px rgba(0,0,0,.7),
    0 6px 20px rgba(0,0,0,.65),
    0 0 26px rgba(245,176,48,.18);
  position:relative;overflow:hidden}
/* Messing-Nieten in den Ecken */
.hud::before,.hud::after{content:'';position:absolute;top:7px;width:7px;height:7px;
  background:radial-gradient(circle at 35% 35%, #F5B030 0%, #8C5B10 70%, #3A1E00 100%);
  border-radius:50%;box-shadow:0 0 5px rgba(245,176,48,.7),inset 0 -1px 1px rgba(0,0,0,.5)}
.hud::before{left:7px}
.hud::after{right:7px}

/* Jeder Spieler = Pilsglas (Flüssigkeit sinkt mit dem Score) */
.hud-player{
  --fill:1;
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  width:100%;max-width:118px;margin:0 auto;
  padding:22px 6px 8px;min-height:92px;
  border:2px solid rgba(255,255,255,.38);border-top:none;
  border-radius:3px 3px 9px 9px;
  background:
    /* Flüssigkeitsspiegel */
    linear-gradient(to top,
      #6B4810 0%,
      #D4920A calc(var(--fill) * 100% - 6%),
      #F5B030 calc(var(--fill) * 100% - 2%),
      rgba(245,176,48,.1) calc(var(--fill) * 100%),
      transparent calc(var(--fill) * 100%)),
    /* Glas-Glanz links */
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.04) 16%,
      transparent 32%,
      transparent 70%,
      rgba(255,255,255,.08) 90%,
      rgba(255,255,255,.03) 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.45),
    inset 2px 0 3px rgba(255,255,255,.1);
  transition:border-color .2s ease-out,box-shadow .2s ease-out,opacity .2s ease-out,filter .2s ease-out;
  overflow:hidden}
/* Schaumkrone */
.hud-player::before{content:'';position:absolute;top:-6px;left:-5px;right:-5px;height:22px;
  background:radial-gradient(ellipse at 50% 80%, #FFFDF5 0%, #FFF3D0 55%, #E8D8A8 95%, transparent 100%);
  border-radius:50% 50% 35% 35% / 75% 75% 35% 35%;
  box-shadow:0 -1px 2px rgba(255,255,255,.4), inset 0 -2px 2px rgba(180,140,60,.35);
  z-index:1}
/* Aufsteigende Blasen */
.hud-player::after{content:'';position:absolute;left:18%;right:18%;bottom:10%;top:36%;
  background:
    radial-gradient(circle 1.4px at 22% 72%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(circle 1.1px at 62% 52%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(circle 1.3px at 42% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(circle 1px at 78% 80%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(circle 1.1px at 14% 40%, rgba(255,255,255,.75), transparent 60%);
  pointer-events:none;
  animation:hudBubble 2.8s ease-in-out infinite}
@keyframes hudBubble{
  0%,100%{transform:translateY(0);opacity:.65}
  50%    {transform:translateY(-7px);opacity:1}
}
.hud-player.active{
  border-color:#F5B030;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.5),
    inset 2px 0 3px rgba(255,255,255,.12),
    0 0 16px rgba(245,176,48,.6)}
.hud-player.inactive{opacity:.55;filter:grayscale(.45) brightness(.8)}

.hud-name{position:relative;z-index:2;
  font-size:.62rem;letter-spacing:.1em;color:#FFF3D0;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8);
  margin-bottom:3px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-player.active .hud-name{color:#FFF9E8;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(245,176,48,.7)}
.hud-score{position:relative;z-index:2;
  font-family:'Anton',sans-serif;font-size:2.1rem;line-height:1;color:#FFF3D0;
  text-shadow:
    0 0 4px #000,
    0 0 8px rgba(0,0,0,.9),
    0 2px 3px rgba(0,0,0,.85);
  letter-spacing:.02em}
.hud-player.active .hud-score{color:#FFF9E8;
  text-shadow:0 0 4px #000,0 0 10px rgba(245,176,48,.85),0 2px 3px rgba(0,0,0,.9)}

/* Kreidetafel in der Mitte */
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.5rem .55rem;min-width:78px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.04) 0%, transparent 70%),
    linear-gradient(180deg, #1b1b1b 0%, #0a0a0a 100%);
  border:1.5px solid rgba(180,140,60,.55);
  border-radius:6px;
  box-shadow:inset 0 0 10px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.5);
  position:relative}
.hud-round{font-family:'Anton',sans-serif;font-size:1rem;color:#F5B030;letter-spacing:.15em;
  text-shadow:0 0 8px rgba(245,176,48,.55)}
.hud-darts{font-size:.8rem;letter-spacing:.12em;color:rgba(255,243,208,.7);min-height:1.1em}
.hud-mute{background:rgba(245,176,48,.12);border:1px solid rgba(245,176,48,.35);border-radius:50%;
  width:26px;height:26px;font-size:.78rem;color:var(--cream);cursor:pointer;padding:0;line-height:1;
  margin-top:.15rem;transition:background .12s ease-out,opacity .12s ease-out}
.hud-mute:active{transform:scale(.9)}
.hud-mute.muted{opacity:.5;background:rgba(255,243,208,.05);border-color:rgba(255,243,208,.15)}

/* Cricket marks grid */
#cricket-marks{display:grid;grid-template-columns:1fr 34px 1fr;gap:.15rem .35rem;width:100%;max-width:280px;
  padding:.15rem .5rem .25rem;font-family:'Anton',sans-serif;font-size:.95rem;align-self:center}
.cm-col{display:flex;flex-direction:column;gap:.05rem}
.cm-col-l{text-align:right}
.cm-col-r{text-align:left}
.cm-col-m{align-items:center;color:rgba(255,243,208,.45);font-size:.75rem;text-align:center}
.cm-label{font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:.15em;color:var(--amber-hi);margin-bottom:.1rem;
  min-height:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-cell{min-height:1.1em;line-height:1.1;letter-spacing:.04em}
.cm-mid{color:var(--amber);font-family:'Anton',sans-serif}
.cm-closed{color:var(--amber-hi);text-shadow:0 0 8px rgba(245,176,48,.6)}
.cm-empty{color:rgba(255,243,208,.18)}

/* Canvas */
.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;min-height:220px}
#dart-canvas{display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));transition:filter .25s ease-out}

/* ── Event-Badge (zeigt aktuelles Round-Event an) ── */
.event-badge{
  position:absolute;top:.5rem;left:50%;transform:translateX(-50%) translateY(-6px);
  padding:.35rem .8rem;border-radius:6px;
  font-family:Anton,sans-serif;font-size:.85rem;letter-spacing:.12em;
  background:rgba(6,4,0,.92);color:var(--cream);
  border:1px solid rgba(245,176,48,.55);
  white-space:nowrap;opacity:0;pointer-events:none;z-index:5;
  transition:opacity .25s ease-out,transform .25s cubic-bezier(.2,.6,.35,1);
}
.event-badge.show{opacity:1;transform:translateX(-50%) translateY(0)}
.event-badge.bad{border-color:#ff6b6b;color:#ff9999;box-shadow:0 0 14px rgba(255,107,107,.35)}
.event-badge.good{border-color:#F5B030;color:#F5B030;box-shadow:0 0 18px rgba(245,176,48,.55);animation:evGoodPulse 1.2s ease-in-out infinite}
@keyframes evGoodPulse{
  0%,100%{box-shadow:0 0 14px rgba(245,176,48,.45)}
  50%   {box-shadow:0 0 26px rgba(245,176,48,.9)}
}

/* ── Event-Effekte auf Canvas ── */
/* Goldwasser-Flash: kurzer Amber-Pulse + leichter Blur */
.canvas-wrap.eff-flash::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,rgba(245,176,48,.38),transparent 62%);
  animation:effFlash 2.1s ease-in-out infinite;
}
@keyframes effFlash{
  0%,100%{opacity:.15}
  50%{opacity:.85}
}
.canvas-wrap.eff-flash #dart-canvas{filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)) blur(1.2px)}

/* Zittrige Hand: Canvas zittert */
.canvas-wrap.eff-shake #dart-canvas{animation:effShake .28s ease-in-out infinite}
@keyframes effShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2px,1px) rotate(-.4deg)}
  40%{transform:translate(2px,-1px) rotate(.5deg)}
  60%{transform:translate(-1px,2px) rotate(-.3deg)}
  80%{transform:translate(1px,-2px) rotate(.3deg)}
}

/* Herrengedeck: Comeback-Halo rund um die Scheibe */
.canvas-wrap.eff-halo::after{
  content:'';position:absolute;inset:-6%;pointer-events:none;z-index:2;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(245,176,48,.7),0 0 28px 10px rgba(245,176,48,.45) inset;
  animation:effHalo 1.6s ease-in-out infinite;
}
@keyframes effHalo{
  0%,100%{opacity:.55;transform:scale(.98)}
  50%   {opacity:1;transform:scale(1.02)}
}

/* Bottom info */
.bottom-info{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.15rem 0}
#golden-hint{font-family:Anton,sans-serif;font-size:.82rem;color:var(--amber-hi);letter-spacing:.1em;
  background:rgba(245,176,48,.14);padding:.24rem .75rem;border-radius:8px;
  animation:goldPulse 1.3s ease-in-out infinite}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 8px rgba(245,176,48,.35)}
  50%   {box-shadow:0 0 20px rgba(245,176,48,.75)}
}
.tap-hint{font-size:.58rem;color:rgba(255,243,208,.28);letter-spacing:.14em}

/* Banner overlay */
#banner{position:fixed;inset:0;z-index:200;background:rgba(6,4,0,.93);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;text-align:center;padding:2rem}
#banner.show{display:flex}
.banner-title{font-family:Anton,sans-serif;font-size:2.4rem;color:var(--amber-hi);letter-spacing:.04em;line-height:1.1}
.banner-sub{font-size:.9rem;color:rgba(255,243,208,.65);max-width:280px;line-height:1.5}

/* Turn summary overlay */
#turn-summary{position:fixed;inset:0;z-index:190;background:rgba(6,4,0,.95);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:.55rem;text-align:center;padding:1.5rem}
#turn-summary.show{display:flex}
.ts-title{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.22em;color:var(--amber)}
.ts-name{font-family:Anton,sans-serif;font-size:1.9rem;color:var(--amber-hi);letter-spacing:.04em;line-height:1}
.ts-darts{display:flex;flex-direction:column;gap:.3rem;width:100%;max-width:280px;margin-top:.45rem}
.ts-dart{display:flex;justify-content:space-between;align-items:center;padding:.48rem .8rem;
  background:rgba(255,243,208,.06);border-radius:8px;font-family:'DM Mono',monospace;
  border-left:3px solid var(--amber-hi)}
.ts-dart.ts-dart-skip{border-left-color:rgba(255,243,208,.1);opacity:.4}
.ts-idx{font-size:.68rem;color:var(--amber);letter-spacing:.14em;min-width:30px;text-align:left}
.ts-lbl{flex:1;font-size:.9rem;color:var(--cream);text-align:center;font-family:'Anton',sans-serif;letter-spacing:.05em}
.ts-pts{font-family:'Anton',sans-serif;font-size:1.05rem;color:var(--amber-hi);min-width:42px;text-align:right}
.ts-total-row{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:280px;
  padding:.55rem .8rem;border-top:2px solid rgba(245,176,48,.35);margin-top:.15rem}
.ts-total-label{font-size:.72rem;letter-spacing:.16em;color:var(--amber-hi)}
.ts-total{font-family:'Anton',sans-serif;font-size:1.7rem;color:var(--amber-hi)}
.ts-rest{font-family:'Anton',sans-serif;font-size:.92rem;color:var(--cream);letter-spacing:.1em;margin-bottom:.4rem}

/* Result */
.res-emmy-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.res-emmy-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--amber);box-shadow:0 0 14px rgba(245,166,35,.35)}
.res-emmy-photo[src=""]{display:none}
.res-emmy-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:rgba(245,166,35,.65)}
.result-winner{font-family:Anton,sans-serif;font-size:2.4rem;color:var(--amber-hi);line-height:1.1}
.result-scores{font-size:.85rem;color:rgba(255,243,208,.5);margin:.4rem 0}
.result-verdict{font-size:.85rem;color:var(--cream);font-style:italic;max-width:300px;line-height:1.6;
  background:rgba(212,146,10,.1);border-left:3px solid var(--amber);padding:.8rem 1rem;border-radius:0 3px 3px 0;text-align:left}
.result-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}

/* Bust-Schluck popup */
#bust-schluck{position:fixed;inset:0;z-index:260;background:rgba(6,4,0,.95);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.8rem;text-align:center}
#bust-schluck.show{display:flex;animation:bustPop .25s ease-out}
@keyframes bustPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.bs-emmy{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--amber);
  box-shadow:0 0 28px rgba(245,166,35,.55)}
.bs-emmy[src=""]{display:none}
.bs-title{font-family:Anton,sans-serif;font-size:2.1rem;color:#e84040;letter-spacing:.04em;line-height:1;
  text-shadow:0 0 20px rgba(232,64,64,.6)}
.bs-verdict{font-size:.95rem;color:var(--cream);font-style:italic;max-width:320px;line-height:1.5;
  background:rgba(232,64,64,.1);border-left:3px solid #e84040;padding:.7rem .95rem;border-radius:0 3px 3px 0;text-align:left}
.bs-target{font-family:'DM Mono',monospace;font-size:.82rem;letter-spacing:.12em;color:var(--amber-hi);opacity:.85}

/* Pils icon on board (rendered via canvas — placeholder for consistency) */

/* Confetti */
.confetti{position:fixed;top:-20px;width:8px;height:14px;z-index:400;pointer-events:none;
  animation:confettiFall linear forwards}
@keyframes confettiFall{
  to{transform:translateY(110vh) rotate(720deg);opacity:.2}
}

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