:root {
  --bg: #09090b; --card: #16161a; --card2: #1c1c22;
  --text: #f4f4f5; --muted: #a1a1aa;
  --accent: #34d399; --on-accent: #04140c;
  --line-soft: rgba(255,255,255,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; user-select:none; -webkit-user-select:none; overflow:hidden; }
.game-shell { display:flex; flex-direction:column; height:100dvh; }
.hud { flex:none; display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top) 16px 0; height:calc(60px + env(safe-area-inset-top)); z-index:10; position:relative; }
.hud-back { width:40px; height:40px; display:grid; place-items:center; color:var(--text); }
.hud-back svg { width:24px; height:24px; }
.hud-mid { text-align:center; display:flex; flex-direction:column; }
.hud-kicker { font-size:10px; color:var(--accent); letter-spacing:0.15em; font-weight:700; margin-bottom:2px; }
.hud-title { font-size:16px; font-weight:600; }
.hud-turn { font-size:14px; font-weight:600; color:var(--accent); background:rgba(52,211,153,0.1); padding:4px 10px; border-radius:12px; margin-right: 16px;}
.stage-wrap { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding: 20px;}
.board-container { width: 100%; max-width: 500px; aspect-ratio: 1; position: relative; }
#gameCanvas { display:block; width:100%; height:100%; touch-action: none; background: #c9a227; border-radius: 4px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }

/* Overlay */
.overlay { position:absolute; inset:0; background:rgba(9,9,11,0.8); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:20; }
.overlay.is-open { opacity:1; pointer-events:auto; }
.overlay-card { background:var(--card); border:1px solid var(--line-soft); border-radius:24px; padding:32px 24px; width:100%; max-width:320px; text-align:center; box-shadow:0 12px 32px rgba(0,0,0,0.5); transform:scale(0.95); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.overlay.is-open .overlay-card { transform:scale(1); }
.overlay-icon { width:64px; height:64px; background:rgba(52,211,153,0.1); border-radius:50%; display:grid; place-items:center; color:var(--accent); margin:0 auto 16px; }
.overlay-icon svg { width:32px; height:32px; }
.overlay-card h1, .overlay-card h2 { font-size:24px; font-weight:700; margin-bottom:12px; }
.overlay-card p { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.overlay-kicker { font-size:11px; letter-spacing:0.2em; color:var(--muted); display:block; margin-bottom:8px; }

/* Buttons */
.btn-primary, .btn-ghost { display:block; width:100%; padding:14px; border-radius:99px; font-size:16px; font-weight:600; text-align:center; border:none; cursor:pointer; text-decoration:none; transition:all 0.2s; }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:0 4px 12px rgba(52,211,153,0.3); }
.btn-primary:active { transform:scale(0.97); }
.btn-ghost { background:rgba(255,255,255,0.06); color:var(--text); margin-bottom:12px; }
.btn-ghost:active { background:rgba(255,255,255,0.1); }
.is-hidden { display:none !important; }