:root { --ink:#eaf6ff; --bg:#0b1b26; --amber:#ffb347; --mint:#4fffb0; }
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; background:var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; }
#hud { position:fixed; top:0; left:0; right:0; pointer-events:none; z-index:5; }
#hud-top { display:flex; flex-wrap:wrap; gap:8px; padding:10px; justify-content:center; }
.hud-chip { background:rgba(10,25,36,.72); border:1px solid rgba(255,179,71,.35);
  border-radius:10px; padding:6px 12px; font-size:13px; letter-spacing:.08em;
  backdrop-filter:blur(4px); }
.hud-chip b { color:var(--amber); font-size:15px; margin-left:4px; }
#overlays { position:fixed; inset:0; z-index:10; display:flex; pointer-events:none; }
.overlay { pointer-events:auto; margin:auto; text-align:center; padding:28px 22px; max-width:520px; width:92%;
  background:rgba(9,22,32,.86); border:1px solid rgba(79,255,176,.25); border-radius:18px;
  backdrop-filter:blur(6px); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.overlay.flash { background:rgba(9,22,32,.6); border:none; box-shadow:none; }
.ov-title { font-size:clamp(28px,6vw,44px); letter-spacing:.04em;
  background:linear-gradient(90deg,var(--amber),var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ov-title.mid { font-size:clamp(24px,5vw,34px); }
.ov-title.win { background:linear-gradient(90deg,#4fffb0,#9fe8ff); -webkit-background-clip:text; }
.ov-title.lose { background:linear-gradient(90deg,#ff6b6b,#ffb347); -webkit-background-clip:text; }
.ov-sub { margin-top:10px; font-size:15px; opacity:.85; }
.ov-card { margin:18px 0; text-align:left; font-size:14px; line-height:1.55;
  background:rgba(255,255,255,.05); border-radius:12px; padding:14px 16px; }
.ov-card p + p { margin-top:8px; }
.ov-card .goal { color:var(--mint); font-weight:600; }
.ov-card .coin { color:#ffd23f; font-weight:600; }
.ov-btn { pointer-events:auto; cursor:pointer; margin-top:12px; border:none;
  font-size:17px; font-weight:700; letter-spacing:.06em; padding:14px 34px;
  border-radius:12px; color:#08222f; background:linear-gradient(120deg,var(--amber),var(--mint));
  box-shadow:0 6px 24px rgba(79,255,176,.35); }
.ov-btn:hover { transform:translateY(-2px); }
#touchpad { position:fixed; z-index:8; right:14px; bottom:14px; width:170px; height:170px;
  opacity:.55; }
.tbtn { position:absolute; width:52px; height:52px; border-radius:14px; border:1px solid rgba(255,179,71,.5);
  background:rgba(10,25,36,.6); color:var(--ink); font-size:20px; touch-action:none;
  user-select:none; -webkit-user-select:none; }
.tbtn.on { background:rgba(255,179,71,.55); color:#08222f; }
@media (pointer:fine) { #touchpad { opacity:.28; } }