/* ───────── Base ───────── */
:root {
  --ink: #eef4ff;
  --muted: #9fb0cc;
  --cyan: #3ad6ff;
  --pink: #ff3ea5;
  --gold: #f1cf7d;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #070c1c; color: var(--ink); font-family: var(--sans);
  overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 .1em;
  border: 1px solid rgba(255,255,255,.25); border-bottom-width: 2px; border-radius: 4px;
  font: 500 .78em/1.5 var(--sans); text-align: center; background: rgba(255,255,255,.06);
}
[hidden] { display: none !important; }

/* ───────── HUD ───────── */
#hud {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 14px;
  background: linear-gradient(rgba(5,8,18,.8), transparent); pointer-events: none;
}
.brand { font: 600 1.35rem/1 var(--serif); letter-spacing: .06em; color: var(--ink); }
.brand-mark { color: var(--cyan); font-size: .8em; }
#place {
  font: 600 .7rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--cyan);
  padding: 6px 12px; border: 1px solid rgba(58,214,255,.35); border-radius: 999px; background: rgba(5,8,18,.5);
}
#hint {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%);
  z-index: 15; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(5,8,18,.72); backdrop-filter: blur(6px); font-size: .82rem; color: var(--muted); transition: opacity .8s;
}
#hint.gone { opacity: 0; pointer-events: none; }

/* ───────── World ───────── */
#viewport { position: fixed; inset: 0; overflow: hidden; }
#viewport.fade #world { opacity: 0; }
#world { position: absolute; left: 0; top: 0; height: 720px; transform-origin: 0 0; will-change: transform; transition: opacity .25s; }
.scene { position: absolute; left: 0; top: 0; height: 720px; --ceiling: #000; --under: #000; }
.scene::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2000px; background: var(--ceiling); }
.scene::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 2000px; background: var(--under); }
.backdrop { position: absolute; left: 0; top: 0; display: block; }

.scene-plaza {
  --ceiling: #4a78c2; --under: #9a9284;
  background:
    linear-gradient(rgba(0,0,0,.12), transparent 30px) 0 564px / 100% 156px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(80,70,55,.25) 118px 120px) 0 564px / 100% 156px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 50px, rgba(80,70,55,.25) 50px 52px) 0 564px / 100% 156px no-repeat,
    linear-gradient(#c6bdac, #a9a091) 0 564px / 100% 156px no-repeat;
}
.scene-foyer {
  --ceiling: #070c1c; --under: #060a16;
  background:
    radial-gradient(ellipse 30% 60% at 50% 0, rgba(58,214,255,.10), transparent) 0 564px / 100% 156px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(58,214,255,.22) 158px 160px) 0 564px / 100% 156px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(58,214,255,.14) 38px 40px) 0 564px / 100% 156px no-repeat,
    linear-gradient(#111a36, #070b18) 0 564px / 100% 156px no-repeat;
}
.scene-arcade {
  --ceiling: #0b0618; --under: #140a28;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cpath d='M10 20 l8 -10 l8 10 z' fill='%23ff3ea5' fill-opacity='.55'/%3E%3Ccircle cx='70' cy='18' r='6' fill='none' stroke='%235ff3ff' stroke-opacity='.55' stroke-width='3'/%3E%3Cpath d='M40 55 q8 -10 16 0 t16 0' fill='none' stroke='%23ffd23a' stroke-opacity='.5' stroke-width='3'/%3E%3Crect x='96' y='50' width='10' height='10' fill='%238f6cff' fill-opacity='.55' transform='rotate(20 101 55)'/%3E%3C/svg%3E") 0 564px / 120px 80px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cpath d='M10 20 l8 -10 l8 10 z' fill='%23ff3ea5' fill-opacity='.55'/%3E%3Ccircle cx='70' cy='18' r='6' fill='none' stroke='%235ff3ff' stroke-opacity='.55' stroke-width='3'/%3E%3Cpath d='M40 55 q8 -10 16 0 t16 0' fill='none' stroke='%23ffd23a' stroke-opacity='.5' stroke-width='3'/%3E%3Crect x='96' y='50' width='10' height='10' fill='%238f6cff' fill-opacity='.55' transform='rotate(20 101 55)'/%3E%3C/svg%3E") 60px 644px / 120px 80px repeat-x,
    linear-gradient(rgba(0,0,0,.35), transparent 30px) 0 564px / 100% 156px no-repeat,
    linear-gradient(#1a0e33, #140a28) 0 564px / 100% 156px no-repeat;
}

/* Plaza props */
.door-leaf {
  position: absolute; top: 300px; width: 92px; height: 228px; border: 6px solid #5c4626;
  background: linear-gradient(135deg, rgba(255,240,200,.35), rgba(255,215,140,.12)), rgba(120,80,30,.25);
  transition: transform .6s cubic-bezier(.6,.05,.3,1);
}
.door-leaf::after { content: ''; position: absolute; top: 46%; width: 6px; height: 34px; border-radius: 3px; background: #c9a45c; }
.door-leaf.l { left: 1208px; transform-origin: left center; }
.door-leaf.l::after { right: 6px; }
.door-leaf.r { left: 1300px; transform-origin: right center; }
.door-leaf.r::after { left: 6px; }
.scene.open .door-leaf.l { transform: perspective(600px) rotateY(70deg); }
.scene.open .door-leaf.r { transform: perspective(600px) rotateY(-70deg); }

.bench { position: absolute; top: 566px; width: 220px; height: 52px; pointer-events: none; filter: brightness(.85); }
.bench::before { content: ''; position: absolute; inset: 0 0 34px; background: #3a2a1c; border-radius: 4px; box-shadow: 0 4px 0 #2a1d12; }
.bench::after { content: ''; position: absolute; left: 14px; right: 14px; top: 26px; bottom: 0; border-left: 10px solid #2a1d12; border-right: 10px solid #2a1d12; }

.welcome-sign {
  position: absolute; top: 300px; width: 330px; padding: 18px 22px 20px;
  background: #1f2a48; color: #f3ead6; border: 3px solid #c9a45c; box-shadow: 0 10px 24px rgba(0,0,0,.35);
  font: 600 3rem/1 var(--serif);
}
.welcome-sign small { display: block; font: 600 .7rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.welcome-sign span { display: block; margin-top: 10px; font: 400 .95rem/1.45 var(--sans); color: #cfd6e6; }
.welcome-sign::before, .welcome-sign::after { content: ''; position: absolute; top: 100%; width: 8px; height: 140px; background: #2b2b33; }
.welcome-sign::before { left: 40px; } .welcome-sign::after { right: 40px; }

/* Foyer & arcade bits */
.holo { animation: holo 4s ease-in-out infinite; }
@keyframes holo { 50% { opacity: .82; } }
.neon-flicker { animation: flicker 6s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 42% { opacity: 1; } 44% { opacity: .4; } 45% { opacity: 1; } }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cabinet { position: absolute; top: 160px; width: 220px; height: 440px; cursor: pointer; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.cabinet svg { display: block; }
.scoreboard {
  position: absolute; top: 150px; width: 250px; padding: 16px 18px 18px;
  background: #07040f; border: 3px solid #8f6cff; border-radius: 6px;
  box-shadow: 0 0 24px rgba(143,108,255,.35), inset 0 0 30px rgba(143,108,255,.15);
  font: 10px/1.6 var(--pixel); color: #fff;
}
.scoreboard h3 { margin: 0 0 8px; font: 12px/1 var(--pixel); color: #ffd23a; text-align: center; }
.scoreboard p { margin: 0 0 12px; font: 7px/1 var(--pixel); color: #5ff3ff; text-align: center; }
.scoreboard ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.scoreboard li { display: flex; gap: 8px; padding: 4px 0; counter-increment: r; }
.scoreboard li::before { content: counter(r) '.'; color: #5ff3ff; }
.scoreboard li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard li b { color: #ffd23a; font-weight: normal; }
.scoreboard li.empty { display: block; text-align: center; color: #c9b6ff; font-size: 8px; }
.scoreboard li.empty::before { content: none; }

/* "▲ Go inside" bubbles */
.prompt {
  position: absolute; transform: translate(-50%, 8px); z-index: 4;
  padding: 7px 15px; border-radius: 999px; background: #fff; color: #10142a; white-space: nowrap;
  font: 600 .9rem/1.2 var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.prompt.show { opacity: 1; transform: translate(-50%, 0); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -4px); } }

/* Visitor — same figure as the museum */
#visitor { position: absolute; top: 512px; width: 64px; height: 164px; z-index: 5; pointer-events: none; }
#visitor .body { width: 100%; height: 100%; transition: transform .12s; }
#visitor.left .body { transform: scaleX(-1); }
#visitor svg { width: 100%; height: 100%; overflow: visible; }
#visitor .leg, #visitor .arm { transform-box: view-box; }
#visitor .leg { transform-origin: 32px 96px; }
#visitor .arm { transform-origin: 32px 54px; }
#visitor.walking .leg.a, #visitor.walking .arm.b { animation: swing var(--stride, .55s) ease-in-out infinite alternate; }
#visitor.walking .leg.b, #visitor.walking .arm.a { animation: swing var(--stride, .55s) ease-in-out infinite alternate-reverse; }
#visitor.walking .torso { animation: bounce var(--stride, .55s) ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-2px); } }
#visitor .shadow { position: absolute; left: 50%; bottom: -4px; width: 60px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); }

/* ───────── The machine (Jumping Beans up close) ───────── */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: radial-gradient(ellipse at 50% 40%, rgba(60,20,110,.75), rgba(4,2,10,.94));
  animation: fadein .25s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
.cab {
  --cab-pad: 22px;
  --screen-w: min(76vw, calc((100vh - 250px) * 2 / 3), 400px, calc(100vw - 52px - 2 * var(--cab-pad)));
  --screen-w: min(76vw, calc((100dvh - 250px) * 2 / 3), 400px, calc(100vw - 52px - 2 * var(--cab-pad)));
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--cab-pad) 18px; background: linear-gradient(#2a1650, #1c0d38);
  border-radius: 14px 14px 6px 6px; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 3px #3b2270;
  animation: rise .3s ease-out;
}
@keyframes rise { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.cab-marquee {
  align-self: stretch; margin-inline: calc(-1 * var(--cab-pad)); padding: 14px 10px 12px; margin-bottom: 16px; border-radius: 14px 14px 0 0;
  background: linear-gradient(#ffe680, #ffa53a); text-align: center; box-shadow: 0 0 30px rgba(255,190,80,.5);
  font: 22px/1.25 var(--pixel); color: #7a2a10;
}
.cab-marquee span { display: block; }
.cab-bezel { padding: 14px; background: #0b0b12; border-radius: 10px; box-shadow: inset 0 0 0 2px #2b2b3a; }
.cab-screen { position: relative; width: var(--screen-w); aspect-ratio: 2 / 3; }
.cab-screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; border-radius: 4px; }
.entry-form {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-38%);
  padding: 18px 14px; text-align: center; background: rgba(20,10,40,.94); border: 3px solid #ffd23a;
  font-family: var(--pixel); color: #fff; user-select: text; -webkit-user-select: text;
}
.entry-form .entry-title { margin: 0 0 14px; font-size: clamp(10px, 2.6vw, 14px); color: #ffd23a; }
.entry-form label { display: block; font-size: clamp(7px, 1.8vw, 9px); color: #5ff3ff; margin-bottom: 10px; }
.entry-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(9px, 2.4vw, 12px); }
.entry-row input {
  width: 9.5em; min-width: 0; padding: 8px; border: 2px solid #8f6cff; background: #07040f; color: #fff;
  font: inherit; text-align: center; outline: none; border-radius: 0;
}
.entry-row input:focus { border-color: #ffd23a; }
.entry-row span { color: #ffd23a; }
.entry-form button { margin-top: 14px; padding: 8px 14px; border: 0; background: #ffd23a; color: #3b1d0a; font: clamp(8px, 2vw, 10px)/1 var(--pixel); }
.cab-panel {
  align-self: stretch; margin-inline: calc(-1 * var(--cab-pad)); margin-top: 18px; padding: 14px clamp(12px, 4vw, 26px); gap: 8px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#3b2270, #2a1650); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.cab-btn {
  width: clamp(50px, 15vw, 66px); height: clamp(50px, 15vw, 66px); flex: none; padding: 0; border-radius: 50%; border: 0; font: 9px/1.4 var(--pixel);
  box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.2); transition: transform .06s;
}
.cab-btn small { font-size: 7px; opacity: .8; }
.cab-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cab-btn.jump { background: #ffd23a; color: #3b1d0a; width: clamp(56px, 17vw, 78px); height: clamp(56px, 17vw, 78px); }
.cab-btn.exit { background: #5ff3ff; color: #0b2a30; }
.stick { width: 14px; height: 40px; border-radius: 4px; background: #111; position: relative; }
.stick::before { content: ''; position: absolute; left: 50%; top: -14px; width: 30px; height: 30px; transform: translateX(-50%); border-radius: 50%; background: #e8343a; box-shadow: inset -4px -4px 0 rgba(0,0,0,.2); }

.machine-stack .cab { background: linear-gradient(#123b2e, #0d2a22); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 3px #1d5a45; }
.machine-stack .cab-marquee { background: linear-gradient(#c8f56e, #4caf50); color: #123b12; box-shadow: 0 0 30px rgba(140,230,90,.45); }
.machine-stack .cab-panel { background: linear-gradient(#1d5a45, #12352b); }
.machine-stack.overlay { background: radial-gradient(ellipse at 50% 40%, rgba(20,80,50,.75), rgba(2,8,5,.94)); }
.stack-panel .pad { display: flex; gap: clamp(4px, 1.5vw, 8px); min-width: 0; }
.stack-panel .pad button {
  width: clamp(32px, 9.5vw, 44px); height: clamp(32px, 9.5vw, 44px); flex: none; border-radius: 50%; border: 0; background: #e8e1cf; color: #123b12; font-size: 1.1rem; line-height: 1;
  box-shadow: 0 4px 0 rgba(0,0,0,.45); touch-action: none;
}
.stack-panel .pad button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }

.machine-bass .cab { background: linear-gradient(#2a1238, #170a22); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 3px #4a1f5e; }
.machine-bass .cab-marquee { background: linear-gradient(#ff8fb1, #ff5f7a 45%, #8f6cff); color: #2a0a1e; box-shadow: 0 0 30px rgba(255,95,122,.45); }
.machine-bass .cab-panel { background: linear-gradient(#4a1f5e, #2a1238); }
.machine-bass.overlay { background: radial-gradient(ellipse at 50% 40%, rgba(90,20,80,.75), rgba(8,2,10,.94)); }
/* ESC and PAUSE live in the title bar, away from the note buttons. */
.machine-bass .cab-marquee { position: relative; }
.marquee-btn {
  position: absolute; top: 50%; transform: translateY(-50%); padding: 9px 8px; min-width: 48px;
  border: 2px solid rgba(42,10,30,.6); border-radius: 8px; background: rgba(255,255,255,.35); color: #2a0a1e;
  font: 8px/1 var(--pixel); touch-action: manipulation;
}
.marquee-btn[data-act="exit"] { left: 12px; }
.marquee-btn[data-act="pause"] { right: 12px; }
.marquee-btn[aria-pressed="true"] { background: #2a0a1e; color: #ffd23a; }
/* The note buttons sit directly under the five lanes on the screen: the highway spans
   x 30-330 of the 360-wide screen, so each button is centred in its 1/6 lane slot. */
.bass-panel { justify-content: center; padding-inline: 0; }
.bass-panel .frets {
  width: var(--screen-w); padding-inline: calc(var(--screen-w) * 30 / 360);
  display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center;
}
.fret {
  --c: #8f6cff;
  width: calc(var(--screen-w) * 60 / 360 * .9); aspect-ratio: 1; flex: none; padding: 0; border: 0; border-radius: 8px;
  background: #2a1238;
  background: color-mix(in srgb, var(--c) 55%, #1a0d22); color: rgba(255,255,255,.85); font: 10px/1 var(--pixel);
  box-shadow: 0 5px 0 rgba(0,0,0,.5), inset 0 0 0 3px var(--c); touch-action: none; transition: transform .05s, background .05s, box-shadow .05s;
}
.fret[data-lane="1"] { --c: #3ad6ff; }
.fret[data-lane="2"] { --c: #7cc04f; }
.fret[data-lane="3"] { --c: #ffd23a; }
.fret[data-lane="4"] { --c: #ff5f7a; }
.fret.on { background: var(--c); color: #1a0d22; transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 18px var(--c); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ───────── Touch ───────── */
#touch { display: none; }
/* Nothing on an open machine should pan or zoom; touch-action isn't inherited,
   so it's set on every element inside. The name box still takes focus. */
.overlay, .overlay * { touch-action: none; -webkit-touch-callout: none; }
.overlay input { touch-action: manipulation; }

@media (hover: none) and (pointer: coarse) {
  /* iOS zooms into text boxes with text under 16px. */
  .entry-row input { font-size: 16px; width: 7.5em; }
  #touch {
    position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 18;
    display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px; pointer-events: none;
  }
  #touch button {
    pointer-events: auto; width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25); background: rgba(5,8,18,.6); backdrop-filter: blur(6px); font-size: 1.3rem; touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  #touch button.on { background: rgba(58,214,255,.85); color: #05121a; }
  #touch .mid { display: flex; gap: 12px; }
  #touch .mid button { width: 54px; height: 54px; }
  #hint { display: none; }
  .cab { --screen-w: min(80vw, calc((100dvh - 230px) * 2 / 3), 400px, calc(100vw - 52px - 2 * var(--cab-pad))); }
}
@media (max-width: 520px) { #hint { display: none; } .cab-marquee { font-size: 16px; } .cab { --cab-pad: 12px; } .cab-btn small { font-size: 6px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font: 1.3rem var(--serif); background: #070c1c; z-index: 99; margin: 0; padding: 24px; text-align: center; }
.noscript a { color: var(--cyan); }