:root {
  --ink: #f3e7d0;
  --dim: #b8a88c;
  --ember: #ffaa4a;
  --hot: #ff4a1a;
  --deep: #05060c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--deep); color: var(--ink); overflow: hidden; font-family: var(--sans); }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
.hidden { display: none !important; }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.life { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); text-align: center; width: 260px; }
.life-n { font-family: var(--serif); color: var(--ink); text-shadow: 0 0 14px rgba(255, 140, 40, 0.6), 0 0 4px #000; }
.life-n b { font-size: 46px; font-weight: 600; font-variant-numeric: tabular-nums; }
.life-n span { font-size: 22px; color: var(--dim); margin-left: 2px; }
.life-bar { height: 5px; margin: 2px 20px 0; background: rgba(255, 240, 220, 0.12); border-radius: 3px; overflow: hidden; }
.life-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff6a1a, #ffc060); box-shadow: 0 0 8px rgba(255, 150, 60, 0.8); transition: width 0.12s linear; }
.life.low .life-n b { color: #ff7a4a; animation: throb 0.5s infinite alternate; }
.life.low .life-bar i { background: linear-gradient(90deg, #c01a0a, #ff4a1a); }
@keyframes throb { from { opacity: 0.55; } to { opacity: 1; } }
.life-why { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #9ac8ff; height: 16px; margin-top: 6px; text-shadow: 0 0 6px #000; }
.pops { position: absolute; left: 0; right: 0; top: 40px; height: 0; }
.pop { position: absolute; left: 50%; top: 0; transform: translateX(30px); font: 600 22px var(--sans); animation: pop 1.1s ease-out forwards; text-shadow: 0 0 8px #000; }
.pop.gain { color: #ffd680; }
.pop.cost { color: #ff6a4a; transform: translateX(-90px); }
@keyframes pop { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -40px; } }
.lvl { position: absolute; left: 24px; top: 20px; font-family: var(--serif); text-shadow: 0 0 10px #000; display: flex; flex-direction: column; }
.lvl span { font-size: 13px; letter-spacing: 0.25em; color: var(--dim); font-family: var(--sans); }
.lvl b { font-size: 26px; font-weight: 400; letter-spacing: 0.06em; }
.lvl .run { margin-top: 6px; font-size: 12px; letter-spacing: 0.06em; }
.lvl .run em { font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.lvl .run .medal { width: 9px; height: 9px; }
.abil { position: absolute; left: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); }
.chip { opacity: 0.25; text-shadow: 0 0 6px #000; }
.chip.on { opacity: 0.85; }
.chip em { font-style: normal; color: #ff8a5a; }
kbd { font: 600 10px var(--sans); border: 1px solid rgba(243, 231, 208, 0.4); border-radius: 3px; padding: 1px 5px; margin-right: 4px; color: var(--ink); }
.banner { position: absolute; left: 0; right: 0; top: 24vh; text-align: center; opacity: 0; transition: opacity 1s; text-shadow: 0 0 20px #000; }
.banner.on { opacity: 1; }
.banner p:first-child { margin: 0; font-size: 13px; letter-spacing: 0.4em; color: var(--dim); text-transform: uppercase; }
.banner h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 76px); letter-spacing: 0.18em; }
.banner p:last-child { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--dim); }
.hint { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); max-width: min(720px, 90vw); text-align: center; font-family: var(--serif); font-size: 22px; text-shadow: 0 0 10px #000, 0 0 3px #000; opacity: 0; transition: opacity 0.4s; }
.hint.on { opacity: 1; }
.toast { position: absolute; left: 50%; top: 31vh; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #ffd680; opacity: 0; transition: opacity 0.4s; text-shadow: 0 0 10px #000; white-space: nowrap; }
.toast.on { opacity: 1; }
.died { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--ink); opacity: 0; transition: opacity 0.3s; text-shadow: 0 0 12px #000; }
.died.on { opacity: 1; }
.flash { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; background: radial-gradient(ellipse at center, rgba(60, 140, 255, 0) 40%, rgba(60, 140, 255, 0.45)); }
.flash.on { opacity: 1; transition: none; }

/* Screens */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.title { background: radial-gradient(ellipse at 50% 50%, rgba(5, 6, 12, 0.25) 0%, rgba(5, 6, 12, 0.55) 45%, rgba(5, 6, 12, 0.92) 100%); }
.title-body { text-align: center; }
#title-flame { width: 80px; height: 120px; display: block; margin: 0 auto 4px; }
.title h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 9vw, 104px); letter-spacing: 0.32em; margin-left: 0.32em; color: #f6e4c2; text-shadow: 0 0 40px rgba(255, 140, 40, 0.35); }
.tagline { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--dim); margin: 6px 0 34px; }
.menu { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn { font: 500 14px var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid rgba(243, 231, 208, 0.35); padding: 12px 34px; min-width: 240px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.btn:hover, .btn:focus-visible { border-color: var(--ember); background: rgba(255, 170, 74, 0.08); outline: none; }
.btn.ghost { border-color: transparent; color: var(--dim); }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--ink); border-color: rgba(243, 231, 208, 0.2); }
.how { margin-top: 26px; font-size: 12px; letter-spacing: 0.08em; color: #7a6e5c; }
.intro, .ending { background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; }
.ending { background: transparent; pointer-events: none; justify-content: flex-end; padding-bottom: 12vh; }
.intro-line, .end-line { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2.6vw, 30px); opacity: 0; transition: opacity 1.4s; max-width: 760px; text-shadow: 0 0 14px #000; }
.intro-line.on, .end-line.on { opacity: 1; }
.gold { color: #ffc878; font-style: italic; margin-top: 10px; }
.panel { text-align: center; width: 100%; max-width: 520px; }
.panel.wide { max-width: 760px; }
.panel h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: 0.3em; margin: 0 0 28px; }
.settings, .pause, .levels { background: rgba(5, 6, 12, 0.9); }
.settings label { display: block; color: var(--dim); font-size: 13px; letter-spacing: 0.08em; text-align: left; margin: 0 auto; max-width: 320px; }
.settings input[type="range"] { display: block; width: 100%; accent-color: var(--ember); margin: 6px 0 22px; }
.settings select { display: block; margin: 6px 0 22px; width: 100%; background: #111; color: var(--ink); border: 1px solid #333; padding: 6px; font: inherit; }
.settings label.check { margin-bottom: 24px; }
.credits { margin-top: 26px; font-size: 11px; line-height: 1.6; color: #7a6e5c; }
.credits a { color: var(--dim); }
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.level-card { font: inherit; color: var(--ink); background: rgba(255, 170, 74, 0.04); border: 1px solid rgba(243, 231, 208, 0.18); padding: 16px 10px; cursor: pointer; text-align: center; transition: border-color 0.2s, background 0.2s; }
.level-card:hover, .level-card:focus-visible { border-color: var(--ember); background: rgba(255, 170, 74, 0.1); outline: none; }
.level-card .n { font-size: 11px; letter-spacing: 0.3em; color: var(--dim); }
.level-card .name { display: block; font-family: var(--serif); font-size: 22px; margin: 4px 0; }
.level-card .best { font-size: 12px; color: #ffd680; min-height: 16px; }
.level-card.locked { opacity: 0.3; cursor: default; }
.level-card.final .name { color: #ffb070; }
.win { background: radial-gradient(ellipse at 50% 60%, rgba(40, 20, 6, 0.8), rgba(5, 6, 12, 0.92)); }
.win-n { font-size: 12px; letter-spacing: 0.4em; color: var(--dim); text-transform: uppercase; margin: 0; }
.win h2, .final-h { margin: 8px 0 20px !important; }
.medal-big { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; }
.medal { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }
.medal.gold { background: radial-gradient(circle at 35% 35%, #fff2b0, #e0a820 60%, #8a5a08); box-shadow: 0 0 8px rgba(255, 200, 60, 0.7); }
.medal.silver { background: radial-gradient(circle at 35% 35%, #ffffff, #b8c0cc 60%, #5a6270); }
.medal.bronze { background: radial-gradient(circle at 35% 35%, #ffd0a0, #b8682a 60%, #5a2a08); }
.win-par { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; margin: 0 0 6px; }
.level-card .lamps { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.win-stats { font-size: 15px; letter-spacing: 0.08em; color: var(--ink); margin: 0 0 6px; }
.win-best { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #ffd680; min-height: 18px; margin: 0 0 26px; }
.final { background: radial-gradient(ellipse at 50% 60%, rgba(60, 20, 4, 0.75), rgba(5, 6, 12, 0.94)); }
.final-h { color: #ffc878; font-size: clamp(36px, 6vw, 60px) !important; letter-spacing: 0.15em !important; }
.final .panel { max-width: 560px; }
.final-medals { font-size: 13px; letter-spacing: 0.12em; color: var(--dim); margin: 0 0 14px; }
.final-medals .medal { margin-left: 10px; }
.final-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 13px; }
.final-table td { padding: 4px 6px; border-bottom: 1px solid rgba(243, 231, 208, 0.08); text-align: left; color: var(--dim); }
.final-table td:first-child { color: var(--ink); font-family: var(--serif); font-size: 17px; }
.final-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.fs { position: absolute; right: 16px; bottom: 16px; z-index: 20; width: 40px; height: 40px; padding: 8px; background: rgba(5, 6, 12, 0.45); border: 1px solid rgba(243, 231, 208, 0.25); border-radius: 6px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.fs:hover, .fs:focus-visible { border-color: var(--ember); background: rgba(255, 170, 74, 0.12); outline: none; }
.fs svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs .fs-out, :fullscreen .fs .fs-in { display: none; }
:fullscreen .fs .fs-out { display: inline; }
body.playing .fs { opacity: 0; pointer-events: none; }
.fade { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.fade.on { opacity: 1; }
@media (max-width: 760px) {
  .life { top: 64px; }
  .banner { top: 30vh; }
}
@media (max-width: 640px) {
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .abil { display: none; }
}
@media (max-height: 620px) {
  #title-flame { width: 56px; height: 84px; }
  .tagline { margin-bottom: 18px; }
  .how { margin-top: 14px; }
}