:root{
  --bg: #141615; --card: #2d312d; --line: #efe3c5; --line-dim: #8f846f;
  --text: #ece4d3; --text-muted: #a89e8c;
  --red: #c14a3d; --red-dark: #16130f; --green: #4f8c5b; --green-light: #f2ede0;
  --amber: #e0a23c; --board:#242822; --rim:#625943; --cool:#5fa5a0;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--bg);
  font-family:'Inter',system-ui,sans-serif; color:var(--text);
  display:flex; justify-content:center; padding:24px 16px 48px;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  background-image:
    radial-gradient(circle at 16% 6%, rgba(224,162,60,0.10), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(95,165,160,0.11), transparent 31%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 44%);
}
.wrap{width:100%;max-width:480px;}
.screen{display:none;}
.screen.active{display:block;}
h1{
  font-family:'Caveat',cursive; font-weight:700; font-size:44px;
  margin:0 0 2px; text-align:center; color:var(--line); letter-spacing:1px;
}
h2{ font-family:'Caveat',cursive; font-weight:700; font-size:30px; margin:0 0 10px; color:var(--line); }
.sub{ text-align:center; color:var(--text-muted); font-size:13px; margin:0 0 20px; }
#screen-game.active{min-height:calc(100vh - 72px);display:flex;flex-direction:column;}
#screen-game .topbar{flex:0 0 auto;margin-bottom:10px;}
.status{margin-bottom:10px;flex:0 0 auto;}
.player-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;background:var(--card);border-radius:12px;padding:10px 12px;
  border:1px solid rgba(239,227,197,0.12);box-shadow:inset 0 1px rgba(255,255,255,0.05);
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.player-strip.bottom{margin-top:10px;flex:0 0 auto;}
.player-strip.active{border-color:var(--player-color,var(--amber));box-shadow:0 0 0 1px color-mix(in srgb, var(--player-color,var(--amber)) 42%, transparent), inset 0 1px rgba(255,255,255,0.08);}
.player-main{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;}
.player-name{white-space:normal;overflow-wrap:anywhere;line-height:1.2;color:var(--player-color,var(--line));}
.player-strip:not(.active) .player-name{opacity:0.72;}
.player-state{font-size:11px;color:var(--text-muted);font-weight:500;margin-top:2px;}
.player-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.turn-timer{
  --timer-angle:360deg;--timer-color:var(--player-color,var(--amber));
  width:42px;height:42px;border-radius:50%;display:none;place-items:center;position:relative;
  background:conic-gradient(var(--timer-color) var(--timer-angle), rgba(255,255,255,0.12) 0deg);
  color:var(--line);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12),0 5px 14px rgba(0,0,0,0.22);
}
.local-timer .turn-timer{display:grid;}
.turn-timer:before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 10px rgba(0,0,0,0.28);}
.turn-timer b{position:relative;z-index:1;}
.player-strip:not(.active) .turn-timer{opacity:0.24;filter:grayscale(1);}
.turn-timer.danger{--timer-color:#e56b5d;color:#ffd0c7;animation:timerPulse 760ms ease-in-out infinite;}
.dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid currentColor;}
.dot.red{background:var(--red);border-color:var(--red-dark);}
.dot.green{background:var(--green);border-color:var(--green-light);}
@keyframes timerPulse{50%{transform:scale(1.06);}}
.board-card{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;
  position:relative; background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 22%),
    radial-gradient(circle at 28% 20%, rgba(224,162,60,0.10), transparent 32%),
    linear-gradient(160deg, var(--card), var(--board));
  border:1px solid rgba(239,227,197,0.18); border-radius:16px; padding:18px;
  box-shadow:0 18px 48px rgba(0,0,0,0.50), inset 0 1px rgba(255,255,255,0.08), inset 0 -18px 36px rgba(0,0,0,0.18);
}
.board-card:before{
  content:""; position:absolute; inset:9px; pointer-events:none; border-radius:11px;
  border:1px solid rgba(239,227,197,0.11);
  box-shadow:inset 0 0 28px rgba(0,0,0,0.24);
}
svg{width:100%;height:auto;display:block;touch-action:manipulation;}
#board{filter:drop-shadow(0 12px 16px rgba(0,0,0,0.22));max-height:min(58vh,480px);}
.node-hit{cursor:pointer;}
.msg{ min-height:20px; text-align:center; font-size:13px; color:var(--amber); margin:12px 0 4px; }
.rule-hint{font-size:12px;color:var(--text-muted);line-height:1.45;margin:10px 0 0;text-align:center;}
.row{display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
button{
  font-family:inherit; font-size:14px; font-weight:500; color:var(--text);
  background:transparent; border:1px solid var(--line-dim); border-radius:8px;
  padding:10px 18px; cursor:pointer;
}
button:hover{border-color:var(--line);}
button.primary{ background:var(--amber); color:#2a1c05; border-color:var(--amber); font-weight:600; }
button.big{ display:block; width:100%; padding:16px; font-size:16px; margin-bottom:10px; text-align:left; }
button.big#btnShare{ border-color:rgba(95,165,160,0.55); }
button.choice{ padding:10px 16px; }
button.choice.selected{ border-color:var(--amber); color:var(--amber); }
button:disabled{ opacity:0.4; cursor:not-allowed; }
.overlay{
  position:fixed;inset:0; background:rgba(10,8,6,0.72);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:10;
}
.overlay.show{display:flex;}
.overlay-card{ background:var(--card); border-radius:16px; padding:28px 24px; text-align:center; max-width:320px; }
.overlay-card h2{ font-size:34px; margin:0 0 8px; color:var(--amber); }
.overlay-card p{color:var(--text-muted);font-size:14px;margin:0 0 18px;}
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.coinpill{
  display:flex; align-items:center; gap:6px; background:var(--card); border-radius:20px;
  padding:6px 14px; font-size:14px; font-weight:600; color:var(--amber);
}
.progress-card{background:var(--card);border:1px solid rgba(239,227,197,0.12);border-radius:12px;padding:12px 14px;margin:0 0 12px;box-shadow:inset 0 1px rgba(255,255,255,0.05);}
.progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-muted);}
.progress-top strong{font-size:15px;color:var(--line);}
.xpbar{height:8px;border-radius:999px;background:rgba(0,0,0,0.24);overflow:hidden;margin-top:9px;}
.xpbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--cool));border-radius:inherit;transition:width 260ms ease;}
.daily-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(224,162,60,0.10);border:1px solid rgba(224,162,60,0.30);border-radius:12px;padding:11px 13px;margin-bottom:12px;}
.daily-card.claimed{background:rgba(255,255,255,0.04);border-color:rgba(239,227,197,0.12);}
.daily-title{font-size:13px;font-weight:700;color:var(--line);}
.daily-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
.room-code{font-family:ui-monospace,Consolas,monospace;font-size:28px;letter-spacing:4px;color:var(--amber);background:rgba(0,0,0,0.18);border-radius:12px;padding:14px;margin:12px 0;text-align:center;}
.fine-print{font-size:12px;color:var(--text-muted);line-height:1.45;text-align:center;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dim);
  background:var(--card); display:flex;align-items:center;justify-content:center;
  cursor:pointer; font-size:16px; color:var(--text);
}
.card{ background:var(--card); border-radius:14px; padding:18px; margin-bottom:14px; }
.grp-label{ font-size:13px; color:var(--text-muted); margin:14px 0 8px; }
.theme-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--card); border-radius:12px; padding:14px 16px; margin-bottom:10px;
}
.theme-item .swatch{ width:34px;height:34px;border-radius:8px;flex-shrink:0;margin-right:12px; }
.theme-item .name{ font-weight:500; }
.theme-row{ display:flex; align-items:center; flex:1; }
.player-assignments{display:grid;gap:8px;margin-top:12px;}
.player-card{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,0.16);border:1px solid rgba(239,227,197,0.12);border-radius:8px;padding:10px 12px;text-align:left;}
.player-card .mini-dot{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;flex:0 0 auto;}
.player-card strong{display:block;font-size:14px;}
.player-card span{display:block;font-size:12px;color:var(--text-muted);margin-top:2px;}
.dots{ display:flex; justify-content:center; gap:6px; margin:14px 0; }
.dots span{ width:7px;height:7px;border-radius:50%;background:var(--line-dim); }
.dots span.on{ background:var(--amber); }
.skip{ position:absolute; top:24px; right:24px; font-size:13px; color:var(--text-muted); background:none; border:none; cursor:pointer; }
.piece-pop,.capture-pulse,.setup-seed{transform-box:fill-box;transform-origin:center;}
.piece-pop{animation:piecePop 170ms ease-out;}
.setup-seed{opacity:0;animation:seedEnter 620ms cubic-bezier(.18,.88,.24,1.08) forwards;}
.setup-seed.red{--seed-start-x:-260px;}
.setup-seed.green{--seed-start-x:260px;}
.capture-pulse{animation:capturePulse 280ms ease-out;}
@keyframes piecePop{from{transform:scale(0.72);opacity:0.65;}to{transform:scale(1);opacity:1;}}
@keyframes seedEnter{0%{transform:translateX(var(--seed-start-x)) scale(0.58);opacity:0;}62%{opacity:1;}82%{transform:translateX(0) scale(1.08);}100%{transform:translateX(0) scale(1);opacity:1;}}
@keyframes capturePulse{from{opacity:0.95;transform:scale(0.8);}to{opacity:0;transform:scale(1.45);}}
@media (max-width:420px){
  body{padding:14px 10px 28px;}
  h1{font-size:40px;}
  .board-card{padding:12px;border-radius:12px;}
  button.big{font-size:15px;padding:14px;}
  #screen-game.active{min-height:calc(100vh - 42px);}
  .player-strip{min-height:50px;padding:8px 10px;}
  .turn-timer{width:38px;height:38px;font-size:12px;}
  #board{max-height:52vh;}
}