/* Retro JRPG presentation: flat colours, hard pixel borders, hard shadows. No blur, glow, gradients or rounding. */
:root {
  --bg: #0b0718;
  --ink: #fff4e0;
  --dim: #a898c0;
  --orange: #f0802a;
  --orange-dk: #a8441a;
  --gold: #ffd34a;
  --green: #9cff6a;
  --win: #120a2e;
  --win-hi: #fff4e0;
  --win-lo: #3a2a6a;
  --pixel: "Press Start 2P", monospace;
  --body: "Press Start 2P", monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: var(--body); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: none; }
body { display: flex; justify-content: center; align-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
#app { position: relative; width: 100%; max-width: 520px; height: 100dvh; overflow: hidden; background: var(--bg); }
@media (min-width: 560px) { #app { height: min(100dvh, 980px); box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--win-lo); } }
canvas#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
img, .art-bg, .lvl { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font-family: var(--pixel); }
.hidden { display: none !important; }

/* classic double-bordered window */
.win, .card, .caption, .pill, .lvl .meta, .story-inner, .intro-inner {
  background: var(--win);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, inset 0 0 0 6px var(--win-lo), 4px 4px 0 2px #000;
}

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .3s steps(3); z-index: 20; }
.screen.active { opacity: 1; pointer-events: auto; }
.screen.modal { background: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 4px 4px; align-items: center; justify-content: center; z-index: 40; padding: 20px; }
.art-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.shade { display: none; }

/* ---------- logo ---------- */
.logo { font-family: var(--pixel); font-size: clamp(24px, 8vw, 40px); letter-spacing: 2px; text-align: center; line-height: 1; color: var(--gold);
  text-shadow: 0 3px 0 var(--orange), 0 6px 0 var(--orange-dk), 4px 9px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000; }
.logo span { color: var(--green); text-shadow: 0 3px 0 #3cb04a, 0 6px 0 #1a5a2a, 4px 9px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000; }
.logo.small { font-size: 22px; }
.tagline { text-align: center; color: var(--ink); font-family: var(--pixel); font-size: 9px; line-height: 1.6; margin-top: 18px; text-shadow: 2px 2px 0 #000; }

/* ---------- buttons ---------- */
.btn { appearance: none; border: 0; cursor: pointer; font-size: 12px; line-height: 1.4; color: var(--ink); padding: 14px 18px; min-width: 150px; position: relative;
  background: var(--win); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, 4px 4px 0 2px #000; text-shadow: 2px 2px 0 #000; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, 2px 2px 0 2px #000; }
.btn.primary { background: var(--orange); color: #fff; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #ffd0a0, inset 0 -4px 0 2px var(--orange-dk), 4px 4px 0 2px #000; }
.btn.primary:active { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #ffd0a0, inset 0 -4px 0 2px var(--orange-dk), 2px 2px 0 2px #000; }
.btn.primary::before, .btn:focus-visible::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 14px; margin-top: -7px;
  background: url(assets/ui/cursor.png) center / contain no-repeat; animation: blinkc .8s steps(2) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.btn.ghost { min-width: 0; }
.btn.danger { color: #ff8a8a; }
.btn:disabled { color: var(--dim); }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.row .btn { min-width: 0; flex: 1; }

/* ---------- boot / title ---------- */
#boot { align-items: center; justify-content: center; background: var(--bg); }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px; text-align: center; }
.bar { width: 224px; height: 16px; background: #000; box-shadow: 0 0 0 2px var(--win-hi), 0 0 0 4px #000; padding: 2px; }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--orange) 0 10px, transparent 10px 12px); }
.fine { color: var(--dim); font-size: 9px; margin: 0; line-height: 1.9; }
.title-inner { position: relative; flex: 1; padding: calc(40px + var(--safe-t)) 24px calc(34px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; }
.title-inner .logo { padding: 14px 12px 18px; background: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.menu { display: flex; flex-direction: column; gap: 4px; margin-top: auto; width: 230px; padding: 18px 16px; background: var(--win);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, inset 0 0 0 6px var(--win-lo), 4px 4px 0 2px #000; }
.menu .btn { width: 100%; background: transparent; box-shadow: none; text-align: left; padding: 10px 10px 10px 30px; color: var(--ink); }
.menu .btn:active { transform: none; box-shadow: none; color: var(--gold); }
.menu .btn.primary { color: var(--gold); }
.menu .btn.primary::before { left: 8px; }
.press { animation: blinkc 1.2s steps(2) infinite; }

/* ---------- story / intro ---------- */
.story-inner, .intro-inner { position: relative; margin: auto 10px calc(12px + var(--safe-b)); padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.kicker { font-family: var(--pixel); font-size: 9px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.story-text { font-size: 11px; line-height: 2; margin: 0; min-height: 10em; }
.intro-inner h1 { font-family: var(--pixel); font-size: clamp(14px, 4.6vw, 19px); line-height: 1.5; margin: 0; color: #fff; text-shadow: 2px 2px 0 var(--orange-dk); }
.help { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.help li { font-size: 10px; line-height: 1.9; }
.story-inner::after, .intro-inner .help::after { content: ""; align-self: flex-end; width: 12px; height: 8px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: blinkc .6s steps(2) infinite; }
.intro-inner .help::after { display: block; margin: 4px 0 0 auto; }
.controls-hint { font-size: 8px; line-height: 1.9; color: var(--dim); }

/* ---------- map ---------- */
#map { background: var(--bg); }
.map-head { display: flex; align-items: center; gap: 10px; padding: calc(14px + var(--safe-t)) 14px 12px; background: #000; box-shadow: 0 2px 0 var(--win-lo); }
.map-title { flex: 1; font-family: var(--pixel); font-size: 11px; color: var(--gold); text-align: center; }
.map-stars { font-family: var(--pixel); font-size: 10px; color: var(--gold); min-width: 64px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.map-stars img { width: 14px; height: 14px; }
.back { padding: 10px 12px; font-size: 10px; }
.map-list { position: relative; flex: 1; overflow-y: auto; padding: 14px 16px calc(24px + var(--safe-b)); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; grid-auto-rows: max-content; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.map-sep { grid-column: 1 / -1; font-family: var(--pixel); font-size: 9px; color: var(--green); padding: 8px 2px 0; }
.lvl { position: relative; display: block; width: 100%; height: calc((min(100vw, 520px) - 48px) / 2 * 1.5); background-size: cover; background-position: center top; border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--win-hi), 0 0 0 6px #000, 4px 4px 0 6px #000; color: var(--ink); text-align: left; }
.lvl:active { transform: translate(2px, 2px); }
.lvl .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 9px; box-shadow: inset 0 2px 0 var(--win-hi), inset 0 4px 0 #000; }
.lvl .num { font-family: var(--pixel); font-size: 7px; color: var(--gold); }
.lvl .name { font-size: 10px; line-height: 1.5; margin-top: 6px; }
.lvl .st { margin-top: 6px; display: flex; gap: 3px; }
.lvl .st img { width: 14px; height: 14px; }
.lvl.locked { filter: grayscale(1) brightness(.35); pointer-events: none; }
.lvl.locked .meta::before { content: "Locked"; font-family: var(--pixel); font-size: 7px; color: #fff; display: block; margin-bottom: 4px; }
.lvl.next { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 6px #000, 4px 4px 0 6px #000; animation: nextb .6s steps(2) infinite; }
@keyframes nextb { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--orange), 0 0 0 6px #000, 4px 4px 0 6px #000; } }

/* ---------- modal cards ---------- */
.card { width: 100%; max-width: 360px; padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: center; }
.card h2 { font-family: var(--pixel); font-size: 12px; line-height: 1.7; margin: 0 0 4px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.pause-goal { color: var(--ink); font-size: 10px; line-height: 1.9; }
.stars { display: flex; justify-content: center; gap: 12px; margin: 4px 0; }
.stars i { width: 45px; height: 45px; display: block; background: url(assets/ui/star-off.png) center / contain no-repeat; image-rendering: pixelated; }
.stars i.on { background-image: url(assets/ui/star-on.png); animation: starpop .3s steps(3); }
@keyframes starpop { from { transform: scale(2); } }
.star-list { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 15px; color: var(--dim); display: flex; flex-direction: column; gap: 8px; font-size: 9px; line-height: 1.6; }
.star-list li { padding-left: 22px; position: relative; }
.star-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background: url(assets/ui/star-off.png) center / contain no-repeat; image-rendering: pixelated; }
.star-list li.on { color: var(--ink); }
.star-list li.on::before { background-image: url(assets/ui/star-on.png); }
.tally { font-family: var(--pixel); font-size: 10px; line-height: 2.2; color: var(--ink); }
.tally b { color: var(--gold); font-weight: 400; }
.slider, .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; }
.slider input { -webkit-appearance: none; appearance: none; flex: 1; max-width: 170px; height: 12px; background: #000; box-shadow: 0 0 0 2px var(--win-hi); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; background: var(--orange); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #ffd0a0; border: 0; border-radius: 0; }
.slider input::-moz-range-thumb { width: 14px; height: 22px; background: var(--orange); border: 2px solid #000; border-radius: 0; }
.toggle input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: #000; box-shadow: 0 0 0 2px var(--win-hi); margin: 0; }
.toggle input:checked { background: var(--orange); box-shadow: 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(10px + var(--safe-t)) 10px 10px; display: flex; align-items: center; gap: 8px; background: var(--win); box-shadow: inset 0 -2px 0 var(--win-hi), inset 0 -4px 0 #000, inset 0 -6px 0 var(--win-lo), 0 2px 0 #000; }
.hearts { display: flex; gap: 2px; min-width: 70px; }
.hearts img { width: 22px; height: 22px; }
.hearts img.off { filter: grayscale(1) brightness(.35); }
.hearts img.lost { animation: blinkc .15s steps(2) 4; }
.pill { flex: 1; text-align: center; font-family: var(--pixel); font-size: 9px; padding: 10px 8px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.done { color: #000; background: var(--gold); animation: blinkc .5s steps(2) infinite alternate; }
.score { font-family: var(--pixel); font-size: 10px; min-width: 62px; text-align: right; color: var(--ink); }
.icon-btn { pointer-events: auto; height: 34px; padding: 0 10px; border: 0; background: var(--win); color: var(--ink); font-size: 8px; text-shadow: 1px 1px 0 #000; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000; cursor: pointer; }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(104px + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; align-items: center; justify-content: center; background: var(--win); box-shadow: inset 0 2px 0 var(--win-hi), inset 0 4px 0 #000, inset 0 6px 0 var(--win-lo), 0 -2px 0 #000; }
.flare { pointer-events: auto; position: relative; width: 76px; height: 84px; border: 0; padding: 0; cursor: pointer; background: var(--win); --m: 0; --f: 0;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, 4px 4px 0 2px #222; }
.flare:active { transform: translate(2px, 2px); }
.flare img { position: absolute; left: 50%; top: 10px; width: 40px; height: 50px; margin-left: -20px; filter: grayscale(.8) brightness(.6); }
.flare-ring { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 10px; background: #000;
  background-image: repeating-linear-gradient(90deg, var(--green) 0 4px, transparent 4px 6px); background-size: calc(var(--m) * 100%) 100%; background-repeat: no-repeat; box-shadow: 0 0 0 2px #2a2a2a; }
.flare.ready img { filter: none; animation: blinkc .5s steps(2) infinite alternate; }
.flare.ready { background: #1a3a14; }
.flare.active .flare-ring { background-image: repeating-linear-gradient(90deg, #fff4e0 0 4px, transparent 4px 6px); background-size: calc(var(--f) * 100%) 100%; }
.flare.active img { filter: none; }
.wax { position: absolute; left: 14px; bottom: calc(34px + var(--safe-b)); width: calc(50% - 60px); }
.wax-label { font-family: var(--pixel); font-size: 8px; color: #ffe08a; margin-bottom: 6px; }
.wax-bar { height: 14px; background: #000; box-shadow: 0 0 0 2px var(--win-hi); padding: 2px; }
.wax-bar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #ffd34a 0 6px, transparent 6px 8px); }
.wax.low .wax-bar i { background: repeating-linear-gradient(90deg, #ff4a2a 0 6px, transparent 6px 8px); animation: blinkc .3s steps(2) infinite; }
.swipe-hint { position: absolute; right: 12px; bottom: calc(40px + var(--safe-b)); font-size: 8px; line-height: 1.8; color: var(--dim); width: calc(50% - 60px); text-align: right; transition: opacity .6s steps(3); }

/* ---------- caption / toast ---------- */
.caption { position: absolute; left: 10px; right: 10px; bottom: calc(116px + var(--safe-b)); z-index: 50; padding: 14px 16px; font-size: 10px; line-height: 1.9; opacity: 0; pointer-events: none; }
.caption.show { opacity: 1; }
.caption b { display: block; font-family: var(--pixel); font-size: 8px; color: var(--green); margin-bottom: 6px; font-weight: 400; }
.caption.menu-pos { bottom: auto; top: calc(12px + var(--safe-t)); }
.toast { position: absolute; left: 50%; top: 26%; z-index: 45; transform: translateX(-50%); font-family: var(--pixel); font-size: 13px; color: var(--gold); text-align: center; white-space: nowrap;
  padding: 12px 16px; background: #000; box-shadow: 0 0 0 2px var(--win-hi), 0 0 0 4px #000; opacity: 0; pointer-events: none; }
.toast.show { opacity: 1; }

/* ---------- ending ---------- */
.ending-inner { position: relative; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px calc(16px + var(--safe-b)); height: 64%; }
.credits { flex: 1; overflow: hidden; width: 100%; text-align: center; background: var(--win); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, inset 0 0 0 6px var(--win-lo); }
.credits > * { animation: roll 34s steps(340) forwards; }
.credits h3 { font-family: var(--pixel); font-size: 8px; color: var(--gold); margin: 22px 0 6px; font-weight: 400; }
.credits p { margin: 0; font-size: 10px; line-height: 1.8; }
.credits .big { font-family: var(--pixel); font-size: 11px; color: var(--green); margin: 26px 0; line-height: 1.8; }
@keyframes roll { from { transform: translateY(380px); } to { transform: translateY(-560px); } }
.ts { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 90px; }

/* keyboard focus: blinking cursor on buttons, gold frame on cards and inputs */
button:focus { outline: none; }
.btn:focus-visible { color: var(--gold); }
.screen:focus-within .btn.primary:not(:focus-visible)::before { display: none; }
.screen:not(:focus-within) .btn.primary::before, .btn:focus-visible::before { display: block; }
.lvl:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 6px #000, 0 0 0 8px var(--gold); }
.slider input:focus-visible, .toggle input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.menu .btn:hover, .btn.ghost:hover { color: var(--gold); }

/* ---------- jukebox ---------- */
#jukebox { background: var(--bg); }
.jb-now { margin: 14px 12px 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.jb-now .win, .win { background: var(--win); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-hi), inset 0 0 0 4px #000, inset 0 0 0 6px var(--win-lo), 4px 4px 0 2px #000; }
#jb-viz { width: 100%; height: 72px; background: #000; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--win-lo); }
.jb-meta { display: flex; flex-direction: column; gap: 6px; }
.jb-title { font-size: 12px; line-height: 1.6; color: #fff; }
.jb-note, .jb-time { font-size: 8px; color: var(--dim); }
.jb-bar { height: 16px; background: #000; box-shadow: 0 0 0 2px var(--win-hi); padding: 3px; cursor: pointer; touch-action: none; }
.jb-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--orange) 0 6px, transparent 6px 8px); }
.jb-bar:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.jb-ctl .btn { padding: 12px 6px; font-size: 10px; }
.jb-list { flex: 1; overflow-y: auto; padding: 4px 12px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; }
.jb-track { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 0; background: var(--win); color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--win-lo); font-size: 10px; line-height: 1.5; }
.jb-track small { display: block; font-size: 7px; color: var(--dim); margin-top: 4px; }
.jb-no { color: var(--dim); font-size: 8px; }
.jb-track.on { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold); color: var(--gold); }
.jb-track.on .jb-no::before { content: ""; display: inline-block; width: 6px; height: 10px; margin-right: 6px; background: url(assets/ui/cursor.png) center / contain no-repeat; animation: blinkc .8s steps(2) infinite; }
.jb-track:focus-visible { box-shadow: 0 0 0 2px #000, inset 0 0 0 2px var(--gold), 0 0 0 4px var(--gold); }

/* ---------- music video ---------- */
#mv { background: #000; }
#mv-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.mv-back { position: absolute; top: calc(12px + var(--safe-t)); left: 12px; z-index: 2; opacity: .85; }

/* small creator link under the title menu */
.xlink { margin-top: 14px; font-size: 8px; color: var(--dim); text-decoration: none; padding: 6px 8px; background: #000; box-shadow: 0 0 0 2px var(--win-lo); }
.xlink:hover, .xlink:focus-visible { color: var(--gold); outline: none; box-shadow: 0 0 0 2px var(--gold); }