:root {
  --night: #121417;
  --cream: #f3ecd2;
  --ink: #16181b;
  --green: #8cbf4f;
  --hood: #5e7f5f;
  --red: #b8452f;
  --bowl: #c4412f;
  --orange: #e46c1d;
  --mask: #b9bcc2;
  --font-ui: "Space Mono", ui-monospace, monospace;
  --font-hand: "Permanent Marker", "Comic Sans MS", cursive;
  --font-g: "Rubik Bubbles", "Arial Black", sans-serif;
  --font-b: "Archivo Black", "Arial Black", sans-serif;
  --shadow: 5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--cream); font-family: var(--font-ui); }
body { -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; }
#scene:active { cursor: grabbing; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; border: 2px solid currentColor; border-radius: 4px; font: 700 .8em var(--font-ui); text-align: center; line-height: 1.5; }

/* HUD */
.hud { position: fixed; top: 14px; left: 16px; right: 70px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; pointer-events: none; z-index: 5; }
.logo { margin: 0; font: 400 28px/1 var(--font-g); color: var(--green); -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.progress { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.progress li { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(18,20,23,.75); border: 2px solid #3a3f46; border-radius: 8px; font-size: 17px; filter: grayscale(1) opacity(.55); transition: all .3s; position: relative; }
.progress li em { position: absolute; left: -9999px; }
.progress li.done { filter: none; border-color: var(--green); background: rgba(140,191,79,.18); }
.secrets { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mask); background: rgba(18,20,23,.75); padding: 6px 10px; border-radius: 6px; }
.icon-btn { background: rgba(18,20,23,.8); color: var(--cream); border: 2px solid #3a3f46; border-radius: 8px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.icon-btn:hover { border-color: var(--cream); }
.mute { position: fixed; top: 12px; right: 16px; z-index: 6; }

/* prompt + toast */
.prompt { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 10px 16px; font: 700 15px var(--font-ui); border-radius: 6px; z-index: 5; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.prompt .sep { opacity: .4; margin: 0 4px; }
.toast { position: fixed; top: 70px; left: 50%; transform: translate(-50%, -20px); opacity: 0; max-width: min(560px, calc(100vw - 32px)); background: var(--ink); border: 2px solid var(--green); padding: 12px 18px; border-radius: 8px; text-align: center; z-index: 7; pointer-events: none; transition: opacity .35s, transform .35s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast p { margin: 0; font: 400 19px/1.35 var(--font-hand); color: var(--cream); }
.toast cite { display: block; margin-top: 6px; font: 400 12px/1.4 var(--font-ui); color: var(--green); font-style: normal; }

/* card */
.card-wrap { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8,9,11,.55); z-index: 20; padding: 16px; }
.card { position: relative; width: min(460px, 100%); background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 22px 24px 20px; border-radius: 4px; transform: rotate(-1deg) scale(.96); opacity: 0; transition: transform .25s, opacity .25s; }
.card-wrap .card::before { content: ""; position: absolute; top: -14px; left: 40%; width: 90px; height: 26px; background: rgba(140,191,79,.7); transform: rotate(-3deg); }
.card-wrap:not([hidden]) .card { transform: rotate(-1deg) scale(1); opacity: 1; }
.kicker { margin: 0 0 6px; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--bowl); }
.card h2 { margin: 0 0 10px; font: 400 30px/1.05 var(--font-b); }
.card p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.card .small, .small { font-size: 12px; opacity: .75; }
.btn { appearance: none; background: var(--ink); color: var(--cream); border: 3px solid var(--ink); padding: 9px 16px; font: 700 14px var(--font-ui); border-radius: 6px; cursor: pointer; }
.btn:hover { background: var(--hood); }
.btn kbd { margin-left: 6px; font-size: .7em; }
.btn.big { font-size: 17px; padding: 13px 26px; background: var(--green); color: var(--ink); box-shadow: var(--shadow); }
.btn.big:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:disabled { opacity: .6; cursor: progress; }

/* panel */
.panel { position: fixed; right: 16px; top: 64px; bottom: 16px; width: min(560px, calc(100vw - 32px)); background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); border-radius: 6px; z-index: 15; display: flex; flex-direction: column; overflow: hidden; }
.panel > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px 18px; border-bottom: 3px solid var(--ink); background: var(--green); }
.panel h2 { margin: 0; font: 400 20px var(--font-b); }
.panel .icon-btn { background: var(--ink); }
#panel-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.lede { margin: 0 0 14px; font-size: 13px; line-height: 1.55; }
.panel button { font-family: var(--font-ui); cursor: pointer; }
.ghost { background: transparent; border: 2px solid var(--ink); color: var(--ink); padding: 7px 12px; border-radius: 6px; font-weight: 700; }
.ghost:hover { background: rgba(0,0,0,.06); }

.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dish { text-align: left; background: #fff; border: 3px solid var(--ink); border-left: 14px solid var(--c); padding: 12px; border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); }
.dish b { display: block; font: 400 16px var(--font-b); }
.dish small { font-size: 11px; opacity: .7; }
.dish.done { background: #eef6e2; }
.dish:hover { transform: translate(-1px, -1px); }
.chips { display: flex; gap: 8px; margin-bottom: 14px; }
.chip { flex: 1; text-align: center; border: 2px dashed var(--ink); padding: 8px; border-radius: 6px; font-weight: 700; }
.chip.on { border-style: solid; background: var(--green); }
.pantry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.pantry button { background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 10px 6px; font-weight: 700; }
.pantry button:disabled { opacity: .3; }
.pantry button.nope { animation: shake .3s; background: #f6c3c3; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.sampler { display: grid; gap: 16px; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pad { aspect-ratio: 1.3; border: 3px solid var(--ink); border-radius: 8px; background: #3a3a3a; color: var(--cream); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 6px 8px; font-size: 11px; box-shadow: 0 4px 0 var(--ink); transition: transform .05s, background .05s; touch-action: manipulation; }
.pad.tone { background: #4a5a3c; }
.pad kbd { font-size: 10px; border-width: 1px; }
.pad.hit { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); background: var(--orange); }
.pad.tone.hit { background: var(--green); color: var(--ink); }
.seq .row { display: grid; grid-template-columns: 44px repeat(16, 1fr); gap: 3px; margin-bottom: 4px; align-items: center; }
.seq label { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.step { aspect-ratio: 1; border: 2px solid var(--ink); background: #fff; border-radius: 3px; padding: 0; }
.step.beat { background: #e8e0c8; }
.step.on { background: var(--bowl); }
.step.now { outline: 2px solid var(--green); outline-offset: 1px; }
.seq-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.seq-ctl > button:first-child { background: var(--ink); color: var(--cream); border: 2px solid var(--ink); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
.bpm { font-size: 11px; opacity: .7; }

.crate { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sleeve-view { display: grid; place-items: center; }
.sleeve-canvas { width: min(300px, 100%); aspect-ratio: 1; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 2px; }
.rec-name { text-align: center; font: 400 20px var(--font-b); margin: 14px 0 6px; }
.rec-name small { font: 400 12px var(--font-ui); opacity: .6; }

.paper { background: repeating-linear-gradient(#fbf8ef 0 31px, #c9d8ea 31px 32px); border: 2px solid var(--ink); padding: 18px 18px 10px 54px; border-radius: 4px; position: relative; min-height: 200px; }
.paper::before { content: ""; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: #e8a0a0; }
.ink { margin: 0; font: 400 19px/32px var(--font-hand); color: #1d2a5a; }
.ink.done { opacity: .55; }
.ink.small { font-size: 15px; }
.ink u { text-decoration-color: var(--bowl); text-decoration-thickness: 3px; }
.blank { color: var(--bowl); }
.src { font-size: 11px; margin: 4px 0 0; opacity: .6; line-height: 32px; }
.options { display: flex; gap: 10px; margin-top: 14px; }
.options button { flex: 1; background: #fff; border: 3px solid var(--ink); border-radius: 6px; padding: 12px; font: 400 18px var(--font-hand); box-shadow: 3px 3px 0 var(--ink); }
.options button:hover { background: var(--green); }
.msg { min-height: 1.4em; font-size: 13px; color: var(--bowl); font-weight: 700; }

.np { position: fixed; left: 16px; bottom: 16px; z-index: 6; width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; background: var(--ink); border: 2px solid #3a3f46; border-radius: 10px; padding: 8px 10px; transform: translateY(calc(100% + 24px)); transition: transform .35s; }
.np.on { transform: none; }
.np-cover { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; border: 2px solid var(--cream); }
.np-meta { min-width: 0; }
.np-title { margin: 0; font: 400 16px/1.2 var(--font-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { margin: 2px 0 6px; font-size: 11px; color: var(--mask); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-progress { height: 3px; background: #2a2e34; border-radius: 2px; overflow: hidden; }
.np-progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width .25s linear; }
.np-actions { display: flex; gap: 6px; align-items: center; }
.np-actions .icon-btn { width: 32px; height: 32px; font-size: 13px; }
.np-link { font-size: 11px; color: var(--green); text-decoration: none; white-space: nowrap; }
.np-link:hover, .np-link:focus-visible { text-decoration: underline; }
.np-prov { grid-column: 1 / -1; display: flex; gap: 4px; }
.np-prov button { flex: 1; background: transparent; color: var(--mask); border: 1px solid #3a3f46; border-radius: 5px; padding: 3px 0; font: 700 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.np-prov button[aria-pressed="true"] { background: var(--green); color: var(--ink); border-color: var(--green); }
.np.on ~ .prompt { bottom: 128px; }

/* telescope view: a dark surround with a round glass, a faint ring and a fine reticle */
.scope { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent 36vmin, rgba(5,5,6,.55) 37.2vmin, #050506 38.6vmin); }
.scope i { position: absolute; left: 50%; top: 50%; width: 74vmin; height: 74vmin; margin: -37vmin 0 0 -37vmin; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(243,236,210,.22), inset 0 0 9vmin rgba(0,0,0,.55);
  background:
    linear-gradient(rgba(243,236,210,.28), rgba(243,236,210,.28)) 50% 50% / 1px 9vmin no-repeat,
    linear-gradient(rgba(243,236,210,.28), rgba(243,236,210,.28)) 50% 50% / 9vmin 1px no-repeat; }
body.in-scope .scope { opacity: 1; }
body.in-scope .hud, body.in-scope .np { opacity: 0; transition: opacity .4s; }

/* loading: a bar and a line saying what is arriving */
.load { width: min(340px, 82vw); margin: 0 auto; }
.load-bar { height: 12px; border: 3px solid var(--ink); border-radius: 8px; background: rgba(243,236,210,.12); overflow: hidden; box-shadow: var(--shadow); }
.load-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .25s ease-out; }
.load-line { display: flex; justify-content: space-between; gap: 12px; margin: 12px 2px 0; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--mask); }
.load-line span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .load-bar i { transition: none; } }

/* intro */
.intro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; overflow-y: auto; touch-action: pan-y; background: var(--night); }
.intro.gone { opacity: 0; pointer-events: none; }
.intro-card { max-width: 520px; text-align: center; }
.intro .kicker { color: var(--green); }
.intro-title { margin: 0 0 clamp(20px, 5vh, 48px); font: 400 clamp(96px, 27vw, 300px)/0.82 var(--font-g); color: var(--green); -webkit-text-stroke: clamp(3px, .6vw, 7px) var(--ink); paint-order: stroke fill; text-shadow: clamp(5px, 1vw, 12px) clamp(5px, 1vw, 12px) 0 #000; letter-spacing: -.01em; }
.intro-sub { font: 400 20px var(--font-hand); margin: 8px 0 18px; }
.how { list-style: none; padding: 0; margin: 0 0 24px; font-size: 13px; line-height: 2.1; color: var(--mask); }
.fine { margin-top: 22px; font-size: 11px; color: #7d828a; line-height: 1.5; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; }

/* touch */
.touch-zone, .stick, .act, .leave { display: none; }
@media (pointer: coarse) {
  .touch-zone { display: block; position: fixed; left: 0; bottom: 0; width: 45vw; height: 60vh; z-index: 4; }
  .stick { display: block; position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border: 3px solid rgba(243,236,210,.5); border-radius: 50%; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .15s; }
  .stick.on { opacity: 1; }
  .knob { position: absolute; left: 30px; top: 30px; width: 44px; height: 44px; border-radius: 50%; background: rgba(243,236,210,.75); }
  .act { display: block; position: fixed; right: 22px; bottom: 90px; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--ink); background: var(--green); color: var(--ink); font-size: 26px; box-shadow: var(--shadow); z-index: 6; }
  body.seated .leave { display: block; position: fixed; right: 22px; bottom: 176px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); font: 700 13px var(--font-ui); padding: 8px 12px; border-radius: 6px; z-index: 6; }
  .prompt { bottom: 22px; font-size: 13px; left: 16px; transform: none; max-width: calc(100vw - 120px); }
  .np { width: calc(100vw - 120px); }
  .np.on ~ .prompt { bottom: 150px; }
  .prompt kbd { display: none; }
  .panel { top: auto; height: 70vh; left: 16px; right: 16px; width: auto; }
  .logo { font-size: 22px; }
  .progress li { width: 28px; height: 28px; font-size: 14px; }
}
@media (max-width: 520px) {
  .hud { right: 64px; }
  .pantry { grid-template-columns: repeat(2, 1fr); }
  .toast p { font-size: 16px; }
  .toast { top: 112px; }
}

/* intro, second pass: title, loader, button. Nothing behind it. */
.intro-card { max-width: none; text-align: center; }
.saved { margin: 22px 0 0; font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mask); }
.saved b { color: var(--green); font-weight: 700; }
.rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 29; pointer-events: none; }
.help-btn { position: fixed; top: 12px; right: 64px; z-index: 6; font: 700 18px var(--font-ui); }
.card.help { width: min(520px, 100%); }
.card.help h2 { margin-bottom: 10px; }
.help-lede { margin: 0 0 26px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.keys { margin: 0 0 26px; padding: 18px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); display: grid; gap: 12px; text-align: left; }
.keys > div { display: grid; grid-template-columns: 172px 1fr; align-items: center; gap: 14px; }
.keys dt { display: flex; gap: 5px; }
.keys dd { margin: 0; font-size: 15px; color: var(--ink); }
.keys kbd { min-width: 34px; height: 34px; padding: 0 9px; font-size: 16px; line-height: 30px; border-radius: 6px; background: #fff; box-shadow: 0 2px 0 var(--ink); }
.keys .drag { height: 34px; padding: 0 10px; border: 2px dashed var(--ink); border-radius: 6px; font: 700 14px/30px var(--font-ui); }
.help-note { margin: 0 0 22px; font-size: 13px; color: #4a4e55; }
.card.help .fine { color: #5b5f66; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #c9c2a8; line-height: 1.6; }
.card.help .fine + .fine { margin-top: 10px; padding-top: 0; border-top: 0; }
@media (max-width: 480px) { .keys > div { grid-template-columns: 150px 1fr; } .keys kbd { min-width: 30px; height: 30px; line-height: 26px; font-size: 14px; } }
body.in-scope .help-btn { opacity: 0; }
@media (pointer: coarse) { .help-btn { right: 62px; } }

/* a sleeve waiting for its real cover */
.sleeve-wait { background: linear-gradient(110deg, #1d1f24 30%, #2b2e35 50%, #1d1f24 70%) 0 0 / 200% 100%; animation: sleeve-wait 1.1s linear infinite; }
@keyframes sleeve-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sleeve-wait { animation: none; } }

/* Touch controls you can see: the joystick rests bottom-left with a label, and follows your thumb
   when you press anywhere on that side. The action button is a plain colour. */
.look-hint { display: none; }
@media (pointer: coarse) {
  .stick { opacity: .6; left: 88px; top: calc(100% - 118px); border-color: rgba(243,236,210,.75); background: rgba(18,20,23,.28); transition: opacity .15s; }
  .stick.on { opacity: 1; }
  .stick-label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 3px #000; transition: opacity .4s; white-space: nowrap; }
  body.moved .stick-label { opacity: 0; }
  .act { font-size: 0; background: var(--green); width: 76px; height: 76px; }
  .act:active { transform: scale(.94); background: #a6d86a; }
  .look-hint { display: block; position: fixed; right: 20px; top: 46%; margin: 0; z-index: 4; pointer-events: none; font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 3px #000; background: rgba(18,20,23,.45); padding: 6px 10px; border-radius: 6px; transition: opacity .4s; }
  body.looked .look-hint, body:not(.ready) .look-hint { opacity: 0; }
  body.in-scope .stick, body.in-scope .act, body.in-scope .look-hint { opacity: 0; }
}

/* the crates: six tabs, one sleeve, a row of spines to jump along */
.dug { white-space: nowrap; color: var(--bowl); }
.crate-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.crate-tabs button { background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 7px 4px 6px; font: 700 12px var(--font-ui); display: flex; flex-direction: column; gap: 2px; align-items: center; }
.crate-tabs button small { font-weight: 400; font-size: 10px; opacity: .65; }
.crate-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 var(--green); }
.spines { display: flex; gap: 3px; margin-top: 14px; align-items: flex-end; height: 34px; }
.spine { flex: 1; min-width: 0; height: 24px; padding: 0; border: 2px solid var(--ink); border-radius: 2px; background: hsl(var(--h), 45%, 46%); transition: height .12s; }
.spine.dug { background: hsl(var(--h), 30%, 72%); }
.spine.on { height: 34px; outline: 2px solid var(--green); outline-offset: 1px; }
.spine:hover { height: 30px; }

/* the secrets counter is a quiet button; its list shows names you've earned and blanks for the rest */
button.secrets { pointer-events: auto; border: 0; cursor: pointer; font-family: var(--font-ui); }
button.secrets:hover, button.secrets:focus-visible { color: var(--cream); outline: 2px solid var(--green); outline-offset: 2px; }
.secret-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.secret-list li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px; align-items: baseline; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font-size: 13px; }
.secret-list li.found { background: #eef6e2; }
.secret-list b { font: 400 15px var(--font-b); }
.secret-list .mark { font-weight: 700; text-align: center; }
.secret-list .blank { letter-spacing: .28em; opacity: .45; }
.secret-list .hint { grid-column: 2; font: 400 14px/1.35 var(--font-hand); color: #1d2a5a; }
.secret-foot { margin: 16px 0 0; font-size: 11px; opacity: .6; text-align: center; }
.sleeve-view .sleeve-canvas, .sleeve-view img { width: min(300px, 100%, 36vh); height: auto; aspect-ratio: 1; }

/* Loader and button share one fixed slot and cross-fade, so nothing moves when loading ends. */
.intro-stage { display: grid; place-items: center; height: 60px; }
.intro-stage > * { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
.intro-stage #enter { opacity: 0; visibility: hidden; transform: translateY(6px); }
.intro.ready .load { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.intro.ready #enter { opacity: 1; visibility: visible; transform: none; transition-delay: .2s; }
.intro.ready #enter:hover:not(:disabled) { transform: translate(-2px, -2px); transition-delay: 0s; }
.saved { min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { .intro-stage > * { transition: none; } }

/* ---------- Touch layout ----------
   Three bands, nothing shared between them:
   top    - title, progress, secrets; beneath them one notice slot (now playing, then toasts)
   middle - the room, free for dragging
   bottom - joystick on the left, the action button on the right with its label sitting on top of it
   Cards and panels take the whole screen and put the controls away while they are open. */
@media (pointer: coarse) {
  :root { --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px); }
  :root { --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --edge-l: calc(16px + var(--sal)); --edge-r: calc(16px + var(--sar)); }
  /* top band: one 40px row (title left, ? and sound right), then one 32px row (progress left, secrets right) */
  .hud { top: calc(10px + var(--sat)); left: var(--edge-l); right: var(--edge-r); gap: 8px; align-items: center; }
  .logo { flex-basis: 100%; height: 40px; line-height: 40px; font-size: 24px; }
  .progress { gap: 6px; }
  .progress li { width: 32px; height: 32px; font-size: 15px; }
  button.secrets, .secrets { margin-left: auto; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 8px; border: 2px solid #3a3f46; }
  .mute, #mute { top: calc(10px + var(--sat)); right: var(--edge-r); }
  .help-btn { top: calc(10px + var(--sat)); right: calc(var(--edge-r) + 46px); }

  /* notice slot */
  .np { top: calc(var(--hud-b, 92px) + 8px); bottom: auto; left: var(--edge-l); right: var(--edge-r); width: auto; max-width: 440px; padding: 6px 8px; gap: 0 10px;
        opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
  .np.on { opacity: 1; pointer-events: auto; transform: none; }
  .np-cover { width: 38px; height: 38px; }
  .np-title { font-size: 14px; } .np-artist { margin: 1px 0 4px; }
  .np-link, .np-prov { display: none; }
  .np.open .np-prov { display: flex; margin-top: 8px; }
  .np.open .np-link { display: inline; }
  .np-prov button { padding: 8px 0; }
  .toast { top: calc(var(--hud-b, 92px) + 8px); left: var(--edge-l); right: var(--edge-r); max-width: none; transform: translateY(-12px); padding: 10px 14px; }
  .toast.show { transform: none; }
  .np.on ~ .toast { top: calc(var(--hud-b, 92px) + 74px); }
  .np.on.open ~ .toast { top: calc(var(--hud-b, 92px) + 124px); }

  /* controls */
  .stick { top: calc(100% - 112px - var(--sab)); }
  .stick { left: calc(88px + var(--sal)); }
  .act { right: calc(20px + var(--sar)); bottom: calc(26px + var(--sab)); }
  .prompt, .np.on ~ .prompt { left: auto; right: calc(20px + var(--sar)); bottom: calc(116px + var(--sab)); transform: none; max-width: min(300px, calc(100vw - 190px - var(--sal) - var(--sar))); white-space: normal; text-align: right; border-radius: 10px 10px 2px 10px; }
  body.seated .leave { right: calc(110px + var(--sar)); bottom: calc(46px + var(--sab)); }
  .look-hint { top: 44%; }

  /* cards and panels own the screen */
  .card-wrap { padding: 12px; align-items: center; }
  .card-wrap .card { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .panel { top: calc(8px + var(--sat)); bottom: calc(8px + var(--sab)); left: 8px; right: 8px; width: auto; height: auto; z-index: 15; }
  body.panel-open .stick, body.panel-open .act, body.panel-open .prompt, body.panel-open .look-hint, body.panel-open .leave, body.panel-open .touch-zone,
  body.card-open .stick, body.card-open .act, body.card-open .prompt, body.card-open .look-hint, body.card-open .leave { display: none; }
  body.panel-open .np { opacity: 0; pointer-events: none; }
  body.panel-open .toast, body.panel-open .np.on ~ .toast { top: calc(14px + var(--sat)); z-index: 25; }
}

/* Touch, landscape: height is the scarce thing. The top band folds into one row; the player leaves the
   notice slot and takes the gap at the bottom between the joystick and the button; toasts stay top centre. */
@media (pointer: coarse) and (orientation: landscape) {
  .logo { flex-basis: auto; margin-right: 6px; }
  .hud { right: calc(var(--edge-r) + 96px); flex-wrap: nowrap; }
  button.secrets, .secrets { margin-left: 4px; }
  .np { top: auto; bottom: calc(14px + var(--sab)); left: 50%; right: auto; width: min(360px, calc(100vw - 400px - var(--sal) - var(--sar))); max-width: none; transform: translate(-50%, 10px); }
  .np.on { transform: translate(-50%, 0); }
  .toast, .np.on ~ .toast, .np.on.open ~ .toast { top: calc(var(--hud-b, 52px) + 8px); left: 50%; right: auto; width: min(460px, calc(100vw - 460px)); transform: translate(-50%, -12px); }
  .toast.show { transform: translate(-50%, 0); }
  .stick { left: calc(84px + var(--sal)); top: calc(100% - 84px - var(--sab)); }
  .stick-label { display: none; }
  .act { bottom: calc(18px + var(--sab)); }
  .prompt, .np.on ~ .prompt { bottom: calc(106px + var(--sab)); max-width: min(300px, 40vw); }
  body.seated .leave { bottom: calc(38px + var(--sab)); }
  .look-hint { top: calc(var(--hud-b, 52px) + 12px); right: var(--edge-r); }
}

/* help: keyboard keys on a desktop, the touch controls on a phone */
.touch-keys { display: none; }
.keys .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); }
.keys .dot.ring { background: transparent; border-width: 3px; box-shadow: inset 0 0 0 7px var(--cream), inset 0 0 0 20px #9a9482; }
.keys .drag.solid { border-style: solid; background: #fff; }
@media (pointer: coarse) {
  .desk-keys { display: none; } .touch-keys { display: grid; }
  .keys > div { grid-template-columns: 84px 1fr; }
  #help-close kbd { display: none; }
}

/* a short window: the crates fold their tabs into one row and shrink the sleeve, so the pull button is always in view */
@media (pointer: fine) and (max-height: 780px) {
  .crate-tabs { grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
  .crate-tabs button { font-size: 10.5px; padding: 5px 2px 4px; white-space: nowrap; }
  .sleeve-view .sleeve-canvas, .sleeve-view img { width: min(300px, 100%, 29vh); }
  .rec-name { margin: 8px 0 4px; } .spines { margin-top: 10px; }
}
/* help: saved progress and the way to clear it */
.help-saved { margin: 18px 0 0; font-size: 12px; color: #4a4e55; }
.link-btn { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
.link-btn.sure { color: #b3261e; }