@import url('../_shared/arcade.css?v=20260607c');
:root{ --accent:#4dd66a; --accent2:#ffd24a; --gold:#ffd24a; --hot:#ff3b5c; --royal:#b16cff; }
.game-shell{ background:radial-gradient(circle at 50% 4%,#12341a 0%,#0a1f10 46%,#050d07 100%); }

/* Three.js canvas fills the play area */
.game-wrap{display:block;background:#050d07}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- HUD ---------- */
.turn-banner{display:flex;align-items:center;gap:8px;padding:.34rem .8rem;border-radius:999px;
  background:rgba(6,16,8,.66);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  font-weight:900;font-size:.8rem;letter-spacing:.04em;box-shadow:0 0 18px -6px var(--accent)}
.turn-dot{width:10px;height:10px;border-radius:50%;background:var(--tc,#4dd66a);box-shadow:0 0 10px var(--tc,#4dd66a);flex:none}
.turn-banner.cpu-thinking .turn-dot{animation:thinkblink .8s ease-in-out infinite}
@keyframes thinkblink{50%{opacity:.25}}

.players-rail{position:absolute;right:10px;top:52px;display:flex;flex-direction:column;gap:6px;z-index:12}
.pr-chip{display:flex;align-items:center;gap:6px;padding:.26rem .6rem;border-radius:999px;
  background:rgba(6,16,8,.6);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);
  font-size:.68rem;font-weight:900;transition:transform .2s,box-shadow .2s;color:#eaf7ec}
.pr-chip .pr-dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}
.pr-chip .pr-tile{margin-left:2px;opacity:.85;font-variant-numeric:tabular-nums}
.pr-chip.active{transform:scale(1.06);box-shadow:0 0 16px -4px var(--c);border-color:var(--c)}

.event-banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.7);z-index:14;pointer-events:none;
  opacity:0;transition:opacity .22s,transform .22s;text-align:center;font-weight:1000;
  font-size:clamp(1.1rem,5.5vw,1.9rem);letter-spacing:.04em;color:#fff;
  text-shadow:0 0 26px rgba(0,0,0,.75),0 0 40px var(--ec,rgba(77,214,106,.9))}
.event-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.event-banner small{display:block;font-size:.55em;opacity:.9;font-weight:800;letter-spacing:.12em}

/* Dice tray */
.hud-bottom{position:absolute;left:0;right:0;bottom:max(12px,var(--safe-bottom));display:flex;justify-content:center;pointer-events:none;z-index:12}
.dice-tray{display:flex;align-items:center;gap:12px;pointer-events:auto}
.dice-result{min-width:52px;height:52px;border-radius:14px;display:none;align-items:center;justify-content:center;
  font-weight:1000;font-size:1.5rem;color:#1c2b12;background:linear-gradient(160deg,#fff,#ffe9b0);
  border:2px solid rgba(255,210,74,.8);box-shadow:0 6px 22px -6px rgba(0,0,0,.7),0 0 18px -4px var(--gold)}
.dice-result.show{display:flex;animation:dicepop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes dicepop{0%{transform:scale(.4) rotate(-14deg)}100%{transform:scale(1) rotate(0)}}
.roll-btn{display:flex;align-items:center;gap:9px;padding:.85rem 1.7rem;border-radius:999px;border:none;cursor:pointer;
  font-family:inherit;font-weight:1000;font-size:1.02rem;letter-spacing:.1em;color:#132a10;
  background:linear-gradient(135deg,#7dff9b,#ffd24a);box-shadow:0 8px 30px -8px rgba(125,255,155,.75),0 3px 0 rgba(0,0,0,.35);
  transition:transform .12s,box-shadow .2s,opacity .2s}
.roll-btn:active{transform:translateY(2px) scale(.98)}
.roll-btn .roll-die{font-size:1.3rem;animation:dieidle 2.4s ease-in-out infinite}
@keyframes dieidle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.roll-btn:disabled{opacity:0;pointer-events:none;transform:scale(.9)}
.roll-btn.pulse{animation:rollpulse 1.4s ease-in-out infinite}
@keyframes rollpulse{50%{box-shadow:0 8px 42px -4px rgba(125,255,155,.95),0 3px 0 rgba(0,0,0,.35)}}

/* ---------- Setup screens ---------- */
.bot-list{display:flex;flex-direction:column;gap:8px;margin:0.5rem 0 1rem}
.bot-card{display:flex;align-items:center;gap:12px;padding:.62rem .9rem;border-radius:14px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);font-family:inherit;color:#eaf7ec;
  transition:border-color .15s,background .15s,transform .15s;width:100%}
.bot-card:hover{background:rgba(255,255,255,.09)}
.bot-card.on{border-color:var(--accent);background:rgba(77,214,106,.12);transform:scale(1.015);box-shadow:0 0 20px -8px var(--accent)}
.bot-card .bot-emoji{font-size:1.5rem;flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:rgba(0,0,0,.3)}
.bot-card b{display:block;font-size:.92rem}
.bot-card small{display:block;opacity:.7;font-size:.7rem;margin-top:1px}
.bot-card .bot-stars{margin-left:auto;color:var(--gold);font-size:.72rem;letter-spacing:.08em;flex:none}

.color-pick{margin:.4rem 0 1rem}
.pick-label{display:block;font-size:.68rem;font-weight:900;letter-spacing:.14em;opacity:.7;margin-bottom:7px;text-transform:uppercase}
.color-row{display:flex;gap:10px}
.color-swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;background:var(--c);
  box-shadow:0 3px 12px -3px var(--c);transition:transform .15s,border-color .15s;padding:0}
.color-swatch.on{border-color:#fff;transform:scale(1.14)}
.color-swatch:disabled{opacity:.28;cursor:not-allowed;transform:scale(.92)}

.party-count{display:flex;gap:10px;margin:.5rem 0 .9rem}
.party-count button{width:46px;height:46px;border-radius:13px;border:1.5px solid rgba(255,255,255,.14);cursor:pointer;
  background:rgba(255,255,255,.05);color:#eaf7ec;font-family:inherit;font-weight:1000;font-size:1.15rem;transition:all .15s}
.party-count button.on{border-color:var(--accent);background:rgba(77,214,106,.14);box-shadow:0 0 16px -6px var(--accent)}
.party-names{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.party-row{display:flex;align-items:center;gap:9px}
.party-row .p-dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}
.party-row input{flex:1;padding:.55rem .8rem;border-radius:11px;border:1.5px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.3);color:#fff;font-family:inherit;font-weight:700;font-size:.88rem;outline:none}
.party-row input:focus{border-color:var(--accent)}

/* ---------- Achievements ---------- */
.ach-list{display:flex;flex-direction:column;gap:7px;margin:.5rem 0 1rem;max-height:46vh;overflow-y:auto}
.ach-row{display:flex;align-items:center;gap:11px;padding:.5rem .8rem;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ach-row .a-emoji{font-size:1.3rem;flex:none;filter:grayscale(1);opacity:.45}
.ach-row b{display:block;font-size:.85rem;opacity:.65}
.ach-row small{display:block;font-size:.68rem;opacity:.5;margin-top:1px}
.ach-row.unlocked{border-color:rgba(255,210,74,.45);background:rgba(255,210,74,.07)}
.ach-row.unlocked .a-emoji{filter:none;opacity:1}
.ach-row.unlocked b{opacity:1;color:var(--gold)}
.ach-row.unlocked small{opacity:.75}
.ach-toast-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:.5rem 0}
.ach-toast{display:flex;align-items:center;gap:6px;padding:.32rem .7rem;border-radius:999px;font-size:.72rem;font-weight:900;
  background:rgba(255,210,74,.12);border:1px solid rgba(255,210,74,.5);color:var(--gold);
  animation:achpop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes achpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

/* Winner screen confetti (DOM sprinkle on top of 3D celebration) */
.confetti-bit{position:absolute;top:-16px;z-index:16;width:9px;height:14px;border-radius:2px;pointer-events:none;
  animation:confall linear forwards}
@keyframes confall{0%{transform:translateY(-4vh) rotate(0)}100%{transform:translateY(108vh) rotate(720deg)}}

.small{font-size:.78rem}

@media (max-width:560px){
  .player-pill{display:none}
  .players-rail{top:48px;right:7px}
  .pr-chip{font-size:.62rem;padding:.2rem .5rem}
  .roll-btn{padding:.75rem 1.4rem;font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .roll-btn .roll-die,.roll-btn.pulse,.turn-banner.cpu-thinking .turn-dot{animation:none}
  .confetti-bit{display:none}
  .event-banner{transition:opacity .22s}
}

/* ---------- Theme picker ---------- */
.board-pick { margin: .7rem 0 1rem; }
.board-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.board-btn {
  flex: 1 1 calc(33.33% - 8px);
  padding: .52rem .4rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  color: #eaf7ec;
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  text-align: center;
  transition: all .15s;
  min-width: 80px;
}
.board-btn:hover { background: rgba(255, 255, 255, 0.08); }
.board-btn.on {
  border-color: var(--accent);
  background: rgba(77, 214, 106, 0.14);
  box-shadow: 0 0 14px -4px var(--accent);
}