* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b1020; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
body { position: fixed; inset: 0; }

#app { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }

#game { display: block; width: 100%; height: 100%; background: #0b1020; }

/* ----------- HUD ----------- */
.hud { position: absolute; inset: 0; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; justify-content: space-between; }
.hud.hidden { display: none; }
.hud-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hud-row.top { align-items: flex-start; }
.badge { background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.08); padding: 8px 12px; border-radius: 14px; font-weight: 700; font-size: 18px; display: flex; flex-direction: column; min-width: 70px; text-align: center; line-height: 1.1; }
.badge .lbl { font-size: 10px; opacity: .65; letter-spacing: 2px; font-weight: 600; margin-bottom: 2px; }
.badge.coin { flex-direction: row; align-items: center; gap: 6px; font-size: 20px; }
.coin-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffe680, #d4a017); box-shadow: 0 0 6px rgba(255,200,80,.6); }
.progress { width: 100%; height: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4cc9f0, #7cf5a0); transition: width .15s linear; }
.progress-text { position: absolute; top: -22px; right: 0; font-size: 12px; opacity: .75; }

/* ----------- Overlays ----------- */
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: radial-gradient(circle at 50% 30%, rgba(20,30,80,.85), rgba(10,15,35,.95) 70%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10; text-align: center; }
.overlay.hidden { display: none; }
.overlay h1 { font-size: clamp(32px, 8vw, 56px); letter-spacing: 4px; background: linear-gradient(90deg, #4cc9f0, #b388ff, #ff79c6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(80, 120, 255, .35)); }
.overlay h2 { font-size: clamp(28px, 7vw, 44px); letter-spacing: 3px; }
.tagline { opacity: .8; max-width: 360px; font-size: 14px; }
.btn { background: linear-gradient(180deg, #2b3a76, #1a2350); color: #fff; border: 1px solid rgba(255,255,255,.15); padding: 14px 28px; min-width: 200px; font-size: 18px; font-weight: 700; letter-spacing: 2px; border-radius: 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); touch-action: manipulation; -webkit-touch-callout: none; position: relative; z-index: 11; }
.btn:active { transform: translateY(1px); filter: brightness(1.1); }
.btn.primary { background: linear-gradient(180deg, #4cc9f0, #2a72c4); }
.btn.hidden { display: none; }
.hint { opacity: .7; font-size: 13px; line-height: 1.7; margin-top: 8px; }
.hint b { color: #ffd966; font-weight: 700; }

.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 360px; width: 100%; }
.level-tile { aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; cursor: pointer; border: 2px solid rgba(255,255,255,.1); background: rgba(0,0,0,.35); position: relative; touch-action: manipulation; }
.level-tile .name { font-size: 9px; opacity: .8; letter-spacing: 1px; margin-top: 2px; font-weight: 600; }
.level-tile.locked { opacity: .35; cursor: not-allowed; }
.level-tile.selected { border-color: #4cc9f0; box-shadow: 0 0 0 3px rgba(76,201,240,.25); transform: scale(1.05); }
.level-tile .lock { position: absolute; font-size: 16px; }

.result { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 8px 0 4px; }
.result > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.result .lbl { font-size: 11px; opacity: .6; letter-spacing: 2px; }
.result span:last-child { font-size: 22px; font-weight: 800; }

.pause-btn { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(72px, env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.45); color: #fff; font-weight: 800; letter-spacing: 1px; cursor: pointer; backdrop-filter: blur(6px); z-index: 5; }
.pause-btn.hidden { display: none; }

@media (orientation: landscape) and (max-height: 480px) {
  .overlay h1 { font-size: 36px; }
  .level-grid { grid-template-columns: repeat(10, 1fr); max-width: 600px; }
  .hint { font-size: 11px; }
  .btn { padding: 10px 20px; min-width: 160px; }
}