:root { color-scheme: dark; --stage: #07050a; --gold: #ffcf3f; --magenta: #ff2e9a; --cyan: #28e0f5; --ink: #fff4d6; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--stage); overflow: hidden; }
#encore { position: fixed; inset: 0; }
#stage { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.round { pointer-events: auto; border: 0; background: none; padding: 0; cursor: pointer; }
.round:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; border-radius: 50%; }
#replay, #tomenu { width: clamp(80px, 13vmin, 120px); aspect-ratio: 1; }
#replay svg, #tomenu svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(255, 46, 154, 0.5)); }
.end-buttons { display: none; gap: 20px; pointer-events: auto; }
#encore[data-state="done"] .end-buttons { display: flex; }
#mute { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; pointer-events: auto; opacity: 0.7; }
#mute:hover { opacity: 1; }
#mute .off { display: none; }
#mute[data-muted="true"] .on { display: none; }
#mute[data-muted="true"] .off { display: inline; }


.powers { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 6px; pointer-events: none; }
.power { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 244, 214, 0.18); color: rgba(255, 244, 214, 0.14); background: rgba(7, 5, 10, 0.45); transition: all 0.3s; }
.power.on { color: var(--c); border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.power.new { animation: gain 0.4s ease-out 3; }
@keyframes gain { 50% { transform: scale(1.5); } }
.horn-btn { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); width: 64px; height: 64px; border-radius: 50%; background: rgba(7, 5, 10, 0.55) !important; border: 2px solid #ffcf3f !important; pointer-events: auto; display: grid; place-items: center; }
@media (max-width: 520px) { .power { width: 22px; height: 22px; } .power svg { width: 14px; height: 14px; } .powers { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .power.new { animation: none; } }
.notes-hud { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(7, 5, 10, 0.55); border: 1.5px solid rgba(255, 207, 63, 0.45); pointer-events: none; }
.notes-hud .count { font: 700 22px/1 "Trebuchet MS", system-ui, sans-serif; color: #ffcf3f; font-variant-numeric: tabular-nums; min-width: 1.6em; text-shadow: 0 0 10px rgba(255, 207, 63, 0.5); }
.notes-hud.bump { animation: bump 0.25s ease-out; }
@keyframes bump { 50% { transform: scale(1.15); } }
.notes-hud.zero { border-color: #ff4b5f; animation: warn 0.9s ease-in-out infinite; }
.notes-hud.zero .count { color: #ff4b5f; text-shadow: 0 0 10px rgba(255, 75, 95, 0.6); }
@keyframes warn { 50% { box-shadow: 0 0 16px rgba(255, 75, 95, 0.7); } }
.notes-hud .buff { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: 4px; background: conic-gradient(#ffcf3f var(--p, 360deg), rgba(255, 244, 214, 0.12) 0); }
.notes-hud .buff svg { background: #0b0710; border-radius: 50%; padding: 2px; width: 24px; height: 24px; }
.fade { position: absolute; inset: 0; background: #07050a; opacity: 0; pointer-events: none; transition: opacity 0.6s ease 0.5s; }
.fade.on { opacity: 0.92; }
#encore[data-state="loading"] .notes-hud, #encore[data-state="ready"] .notes-hud { display: none; }
@media (prefers-reduced-motion: reduce) { .notes-hud.bump, .notes-hud.zero { animation: none; } }
[hidden] { display: none !important; }
#encore[data-state="loading"] .powers, #encore[data-state="ready"] .powers { display: none; }

/* ---------- loading + main menu ---------- */
:root { --display: "Bungee", "Arial Black", Impact, sans-serif; --body: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif; }
.loading, .menu, .credits { position: absolute; inset: 0; }
.loading { display: grid; place-content: center; justify-items: center; gap: 22px; background: radial-gradient(circle at 50% 40%, #1c0f22, #07050a 70%); transition: opacity 0.5s; z-index: 5; }
.loading-logo { display: flex; align-items: flex-end; gap: 12px; font-family: var(--display); color: var(--gold); text-shadow: 0 0 18px rgba(255, 207, 63, 0.4); }
.l-top { font-size: clamp(22px, 4vw, 40px); }
.l-num { font-size: clamp(40px, 7vw, 72px); line-height: 0.85; color: var(--magenta); text-shadow: 0 0 22px rgba(255, 46, 154, 0.6); }
.loading-bar { width: min(420px, 70vw); height: 10px; border-radius: 999px; background: rgba(255, 244, 214, 0.1); overflow: hidden; border: 1px solid rgba(255, 207, 63, 0.3); }
.loading-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--magenta), var(--gold)); transition: width 0.3s; box-shadow: 0 0 12px var(--magenta); }
.loading-step { margin: 0; font: 500 15px/1.4 var(--body); color: #c9bfa7; letter-spacing: 0.04em; }
#encore:not([data-state="loading"]) .loading { opacity: 0; pointer-events: none; }

.menu { display: none; pointer-events: none; background: linear-gradient(90deg, rgba(7, 5, 10, 0.78) 0%, rgba(7, 5, 10, 0.35) 38%, rgba(7, 5, 10, 0) 60%); }
#encore[data-state="menu"] .menu, #encore[data-state="leaving"] .menu { display: block; }
#encore[data-state="leaving"] .menu { opacity: 0; transition: opacity 0.5s; }
.menu-col { position: absolute; left: max(40px, 6vw); top: 50%; transform: translateY(-50%); display: grid; gap: 22px; max-width: 460px; pointer-events: auto; animation: menuIn 0.9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes menuIn { from { opacity: 0; transform: translate(-30px, -50%); } }
.logo { margin: 0; font-family: var(--display); font-weight: 400; line-height: 0.92; letter-spacing: 0.01em; }
.logo-top { display: block; font-size: clamp(38px, 6.2vw, 78px); color: var(--gold); text-shadow: 0 3px 0 #9a6b00, 0 0 30px rgba(255, 207, 63, 0.45); }
.logo-sub { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.logo-sub b { font-weight: 400; font-size: clamp(56px, 9vw, 116px); line-height: 0.8; color: var(--magenta); text-shadow: 0 4px 0 #7a0f4a, 0 0 34px rgba(255, 46, 154, 0.6); animation: pulse2 1.2s ease-in-out infinite; }
@keyframes pulse2 { 50% { text-shadow: 0 4px 0 #7a0f4a, 0 0 48px rgba(255, 46, 154, 0.9); } }
.logo-sub i { font-style: normal; font-size: clamp(26px, 4vw, 50px); color: transparent; -webkit-text-stroke: 2px var(--cyan); text-shadow: 0 0 18px rgba(40, 224, 245, 0.55); letter-spacing: 0.06em; }
.tagline { margin: 0; font: 500 clamp(16px, 1.6vw, 20px)/1.4 var(--body); color: #e8dcc0; }
.menu-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.cta { display: inline-flex; align-items: center; gap: 10px; font: 400 22px/1 var(--display); padding: 16px 30px 16px 24px; border-radius: 999px; border: 0; background: var(--gold); color: #07050a; cursor: pointer; box-shadow: 0 6px 0 #9a6b00, 0 0 30px rgba(255, 207, 63, 0.5); transition: transform 0.12s, box-shadow 0.12s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #9a6b00, 0 0 40px rgba(255, 207, 63, 0.7); }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a6b00; }
.ghost { font: 600 17px/1 var(--body); padding: 15px 22px; border-radius: 999px; border: 1.5px solid rgba(255, 244, 214, 0.35); background: rgba(7, 5, 10, 0.4); color: #fff4d6; cursor: pointer; letter-spacing: 0.04em; }
.ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.cta:focus-visible, .ghost:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font: 500 14px/1 var(--body); color: #c9bfa7; }
.controls div { display: flex; gap: 7px; align-items: center; }
.controls dt { font: 600 12px/1 var(--body); color: #fff4d6; padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(255, 244, 214, 0.3); background: rgba(255, 244, 214, 0.06); }
.controls dd { margin: 0; }
.menu-foot { position: absolute; left: max(40px, 6vw); bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; font: 500 13px/1.4 var(--body); color: rgba(255, 244, 214, 0.55); }
.credits { display: grid; place-items: center; background: rgba(7, 5, 10, 0.72); z-index: 6; padding-inline: 16px; }
.credits-card { max-width: 560px; max-height: 80vh; overflow: auto; background: #120c16; border: 1px solid rgba(255, 207, 63, 0.35); border-radius: 14px; padding: 26px 28px; font: 400 16px/1.55 var(--body); color: #e8dcc0; display: grid; gap: 10px; }
.credits-card h2 { margin: 0 0 4px; font: 400 26px/1 var(--display); color: var(--gold); }
.credits-card p { margin: 0; }
.credits-card strong { color: #fff4d6; }
.credits-card .fine { font-size: 14px; color: #a99f8a; }
.credits-card button { justify-self: start; margin-top: 8px; }
#encore[data-state="menu"] #mute, #encore[data-state="loading"] #mute { bottom: max(16px, env(safe-area-inset-bottom)); }
#encore[data-state="menu"] .notes-hud, #encore[data-state="leaving"] .notes-hud, #encore[data-state="menu"] .powers, #encore[data-state="leaving"] .powers, #encore[data-state="loading"] .powers { display: none; }
@media (max-width: 720px) {
  .menu { background: linear-gradient(0deg, rgba(7, 5, 10, 0.85) 0%, rgba(7, 5, 10, 0.4) 50%, rgba(7, 5, 10, 0) 75%); }
  .menu-col { left: 16px; right: 16px; top: auto; bottom: 56px; transform: none; animation: none; gap: 16px; }
  .menu-foot { left: 16px; right: 70px; font-size: 12px; }
  .controls { display: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-col, .logo-sub b { animation: none; } }

/* ---------- opening cinematic ---------- */
.letterbox { position: absolute; inset: 0; pointer-events: none; }
.letterbox i { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: scaleY(0); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.letterbox i:first-child { top: 0; transform-origin: top; }
.letterbox i:last-child { bottom: 0; transform-origin: bottom; }
#encore[data-state="intro"] .letterbox i { transform: scaleY(1); }
@media (orientation: portrait) { .letterbox i { height: 7vh; } }
.skip { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); display: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 244, 214, 0.4); background: rgba(7, 5, 10, 0.5); color: #fff4d6; cursor: pointer; opacity: 0.75; z-index: 5; }
.skip:hover, .skip:focus-visible { opacity: 1; border-color: var(--cyan); color: var(--cyan); outline: none; }
#encore[data-state="intro"] .skip { display: flex; animation: skipIn 0.5s 1.2s both; }
@keyframes skipIn { from { opacity: 0; } }
#encore[data-state="intro"] .notes-hud, #encore[data-state="intro"] .powers, #encore[data-state="intro"] .horn-btn { display: none !important; }

/* ---------- touch ---------- */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.touch-hint { position: absolute; inset: 0; pointer-events: none; display: none; }
.touch-hint .th { position: absolute; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); width: 92px; height: 92px; color: rgba(255, 244, 214, 0.55); }
.touch-hint .th-run { left: max(24px, env(safe-area-inset-left)); }
.touch-hint .th-jump { right: calc(max(24px, env(safe-area-inset-right)) + 70px); }
.touch-hint svg { width: 100%; height: 100%; }
#encore.is-touch[data-state="play"] .touch-hint { display: block; animation: hintOut 1s 6s forwards; }
@keyframes hintOut { to { opacity: 0; } }

/* short landscape phones: compact menu */
@media (max-height: 500px) and (min-width: 721px) {
  .menu-col { gap: 12px; top: 50%; }
  .logo-top { font-size: clamp(28px, 5vw, 44px); }
  .logo-sub b { font-size: clamp(40px, 7vw, 64px); }
  .logo-sub i { font-size: clamp(20px, 3vw, 30px); }
  .tagline { font-size: 15px; }
  .cta { font-size: 18px; padding: 12px 22px 12px 18px; }
  .ghost { font-size: 15px; padding: 11px 18px; }
  .controls { display: none; }
  .menu-foot { font-size: 11px; bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* ---------- explore mode ---------- */
.ghost.explore { display: inline-flex; align-items: center; gap: 8px; border-color: rgba(40, 224, 245, 0.55); color: #bff6ff; }
.xhud { position: absolute; inset: 0; pointer-events: none; display: none; }
#encore[data-state="explore"] .xhud { display: block; }
#encore[data-state="explore"] .notes-hud, #encore[data-state="explore"] .powers, #encore[data-state="explore"] .horn-btn, #encore[data-state="explore"] .touch-hint { display: none !important; }
.x-area { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -8px); font: 400 clamp(26px, 4.4vw, 48px)/1 var(--display); color: var(--gold); text-shadow: 0 3px 0 #9a6b00, 0 0 24px rgba(255, 207, 63, 0.5); opacity: 0; transition: opacity 0.5s, transform 0.5s; white-space: nowrap; }
.x-area.show { opacity: 1; transform: translate(-50%, 0); }
.x-notes { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(7, 5, 10, 0.55); border: 1.5px solid rgba(255, 207, 63, 0.45); color: var(--gold); font: 700 18px/1 var(--body); font-variant-numeric: tabular-nums; }
.x-back { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); pointer-events: auto; padding: 10px 18px; font-size: 15px; }
.x-prompt { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: rgba(7, 5, 10, 0.78); border: 1.5px solid var(--gold); color: #fff4d6; font: 600 15px/1 var(--body); white-space: nowrap; animation: promptBob 1.2s ease-in-out infinite; }
.x-prompt kbd { font: 700 12px/1 var(--body); color: #07050a; background: var(--gold); border-radius: 5px; padding: 4px 6px; }
.is-touch .x-prompt kbd { display: none; }
@keyframes promptBob { 50% { margin-top: -4px; } }
.x-act { position: absolute; right: calc(max(16px, env(safe-area-inset-right)) + 4px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); min-width: 88px; height: 88px; border-radius: 999px; padding: 0 18px; border: 2px solid var(--gold); background: rgba(7, 5, 10, 0.6); color: var(--gold); font: 400 17px/1 var(--display); pointer-events: auto; }
.x-stick { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 2px dashed rgba(255, 244, 214, 0.45); background: rgba(7, 5, 10, 0.25); }
.x-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 244, 214, 0.55); transform: translate(-50%, -50%); }
.x-fade { position: absolute; inset: 0; background: #07050a; opacity: 0; transition: opacity 0.3s; }
.x-fade.on { opacity: 1; }
.dlg { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100% - 32px)); pointer-events: auto; background: rgba(14, 9, 20, 0.94); border: 2px solid var(--accent, var(--gold)); border-radius: 16px; padding: 18px 22px 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--accent, #ffcf3f) 25%, transparent); cursor: pointer; animation: dlgIn 0.22s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, 12px); } }
.dlg-name { position: absolute; top: -15px; left: 18px; padding: 5px 12px; border-radius: 8px; background: var(--accent, var(--gold)); color: #07050a; font: 400 15px/1 var(--display); letter-spacing: 0.02em; }
.dlg-text { margin: 6px 0 0; min-height: 3.2em; font: 500 clamp(16px, 2vw, 19px)/1.45 var(--body); color: #fff4d6; }
.dlg-next { position: absolute; right: 14px; bottom: 10px; border: 0; background: none; color: var(--accent, var(--gold)); animation: promptBob 0.9s ease-in-out infinite; cursor: pointer; }
.dlg-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dlg-choices:empty { display: none; }
.dlg-choice { text-align: left; font: 600 16px/1.3 var(--body); padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(255, 244, 214, 0.25); background: rgba(255, 244, 214, 0.05); color: #fff4d6; cursor: pointer; }
.dlg-choice:hover, .dlg-choice:focus-visible { border-color: var(--accent, var(--gold)); color: var(--accent, var(--gold)); outline: none; }
.dlg-choice:last-child { color: #c9bfa7; }
@media (max-width: 600px) { .dlg { padding: 16px 16px 14px; } .dlg-choice { font-size: 15px; padding: 9px 12px; } .x-back { padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .x-prompt, .dlg-next { animation: none; } .dlg { animation: none; } }
.x-help { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 16px; padding: 8px 16px; border-radius: 999px; background: rgba(7, 5, 10, 0.6); color: #e8dcc0; font: 500 14px/1 var(--body); white-space: nowrap; opacity: 0; }
.x-help kbd { font: 700 11px/1 var(--body); color: #07050a; background: #fff4d6; border-radius: 4px; padding: 3px 5px; margin-right: 4px; }
.x-help.show { animation: helpShow 9s ease forwards; }
@keyframes helpShow { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.is-touch .x-help { display: none; }