@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #0b1210;
  --panel: #111d18;
  --lime: #c5f36a;
  --text: #f2f5ed;
  --muted: #91a098;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse at 50% -20%, #263d2c 0, #101b16 42%, var(--bg) 75%);
  font-family: 'DM Sans', sans-serif; display: flex; justify-content: center;
  padding: 28px 18px 20px;
}
.game-shell { width: min(100%, 1000px); }
.topbar { display:flex; justify-content:space-between; align-items:center; margin: 0 2px 16px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:2px; font-size:14px; }
.brand b { color:var(--lime); }
.brand-icon { color:var(--lime); font-size:23px; }
.best { color:#9aa79e; font-size:10px; letter-spacing:2px; display:flex; align-items:center; gap:10px; }
.best strong { color:var(--text); font-size:14px; letter-spacing:0; }
.game-card { position:relative; overflow:hidden; border:1px solid #344b3b; border-radius:22px; background:#172a1b; box-shadow:0 24px 70px #0008, inset 0 0 0 1px #ffffff08; aspect-ratio: 3 / 2; min-height:300px; }
canvas { display:block; width:100%; height:100%; position:absolute; inset:0; }
.hud { position:absolute; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; pointer-events:none; }
.hud-box { min-width:86px; padding:9px 12px; border:1px solid #ffffff22; border-radius:10px; background:#08130eb8; backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:3px; }
.hud-box small { color:#9cac9e; font-size:9px; letter-spacing:1.7px; font-weight:700; }
.hud-box strong { font:700 19px 'Space Grotesk',sans-serif; letter-spacing:1px; }
.coins-box { flex-direction:row; align-items:center; gap:9px; }
.coins-box > span { color:#ffd85a; font-size:18px; text-shadow:0 0 12px #ffce3a; }
.coins-box div { display:flex; flex-direction:column; gap:3px; }
.overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:26px; background:linear-gradient(90deg,#07110bd9,#07110b99 55%,#07110b9c); }
.overlay.hidden { display:none; }
.eyebrow { color:var(--lime); font-weight:800; letter-spacing:3px; font-size:10px; margin-bottom:10px; }
h1 { margin:0; font:700 clamp(42px, 8vw, 78px)/.95 'Space Grotesk',sans-serif; letter-spacing:-4px; }
h1 em { color:var(--lime); font-style:normal; }
h1 span { color:var(--lime); }
.overlay p { color:#c1cec3; line-height:1.65; font-size:14px; margin:17px 0 24px; }
.primary-btn { cursor:pointer; border:0; border-radius:9px; background:var(--lime); color:#17210e; font:800 11px 'DM Sans',sans-serif; letter-spacing:1.5px; padding:15px 20px; min-width:200px; box-shadow:0 7px 25px #b8f35b24; transition:transform .18s,filter .18s; }
.primary-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.primary-btn span { font-size:17px; margin-left:13px; vertical-align:-1px; }
.hint { color:#a6b4a8; font-size:9px; letter-spacing:1.5px; margin-top:24px; }
.hint i { color:var(--lime); font-style:normal; padding:0 7px; }
.toast { position:absolute; z-index:3; top:30%; left:50%; transform:translateX(-50%); color:#ffdf64; font-size:12px; font-weight:800; letter-spacing:2px; text-shadow:0 2px 10px #000; pointer-events:none; }
.toast.hidden { display:none; }
.controls { display:flex; justify-content:center; align-items:center; gap:clamp(18px, 5vw, 56px); padding:22px 0 14px; flex-wrap:wrap; }
.controls > div:not(.mobile-note) { text-align:center; }
.keycap { display:inline-flex; width:28px; height:28px; justify-content:center; align-items:center; border:1px solid #405347; border-bottom-width:3px; border-radius:6px; background:#15221a; color:#dce8db; font-weight:700; margin:0 2px; }
.controls p { color:#91a198; font-size:9px; letter-spacing:1.5px; margin:8px 0 0; }
.mobile-note { color:#9aa79e; font-size:11px; }
footer { text-align:center; color:#586b5e; font-size:9px; letter-spacing:1.8px; padding:10px 0 0; }
@media (max-width:600px) {
  body { padding:14px 10px; }
  .game-card { border-radius:14px; aspect-ratio: 3 / 4; min-height:460px; }
  .hud { top:12px; left:10px; right:10px; }
  .hud-box { min-width:70px; padding:7px 8px; }
  .hud-box strong { font-size:16px; }
  .overlay { background:#07110ba8; }
  .hint { line-height:2; max-width:260px; }
  .controls { gap:15px; }
  .mobile-note { width:100%; text-align:center; }
  footer { line-height:1.8; }
}