/* Fonts vendored from Google Fonts (OFL): Griffy, Nunito (variable 400-800), Latin subset. */
@font-face { font-family: "Griffy"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/griffy-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Trailer player: a 16:9 stage (sky canvas, three.js canvas, effects canvas, HTML captions) above a video-style control bar. */
:root {
  color-scheme: dark;
  --deep: #0c0918;
  --night: #1b1530;
  --panel: #282046;
  --panel-2: #33295a;
  --ink: #f7eedf;
  --muted: #b9add6;
  --pumpkin: #ff9b3d;
  --beet: #e2456a;
  --moon: #ffe7a3;
  --mint: #6fe3c1;
  --line: #4a3d78;
  --display: "Griffy", "Comic Sans MS", "Trebuchet MS", cursive;
  --body: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--deep); color: var(--ink); }
body { font-family: var(--body); font-size: 16px; line-height: 1.4; }
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px;
  background: radial-gradient(ellipse at 50% 0%, #241a44 0%, var(--deep) 70%);
}
.player { width: 100%; max-width: min(1280px, max(320px, calc((100dvh - 150px) * 16 / 9))); margin: 0 auto; display: grid; gap: 8px; }
.player:fullscreen { max-width: none; width: 100%; height: 100%; background: var(--deep); padding: 12px; align-content: center; }
.player:fullscreen .stage, .player:fullscreen .bar { width: min(100%, calc((100vh - 130px) * 16 / 9)); margin-inline: auto; }

/* ---------- Stage ---------- */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #120c28;
  container-type: inline-size;
  isolation: isolate;
  box-shadow: 0 0 0 2px var(--line), 0 18px 50px rgba(0, 0, 0, .55);
  user-select: none;
  -webkit-user-select: none;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; pointer-events: none; opacity: 0; visibility: hidden; will-change: opacity, transform; }

.title-block { left: 4%; right: 4%; top: 8%; display: grid; justify-items: center; gap: 1.1cqw; text-align: center; }
.eyebrow { margin: 0; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: max(9px, 1.4cqw); color: var(--muted); }
.title-block h1 {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: 8.6cqw; line-height: 1; color: var(--moon);
  letter-spacing: .03em; text-shadow: 0 .4cqw 0 #2a1f45, 0 0 3cqw rgba(255, 155, 61, .35);
}
.title-block h1 .v { color: var(--beet); }
.ch { display: inline-block; white-space: pre; will-change: transform; }
.tagline { margin: 0; font-size: max(12px, 2.7cqw); font-weight: 800; color: var(--ink); text-shadow: 0 .2cqw .8cqw rgba(12, 9, 24, .9); }

.cap {
  top: 4.2%; left: 5%; right: 5%; margin: 0; text-align: center; font-family: var(--display); font-weight: 400;
  font-size: 4.3cqw; line-height: 1.12; color: #fff; text-wrap: balance;
  text-shadow: 0 .3cqw 0 #1b1530, 0 0 1.6cqw rgba(12, 9, 24, .95);
}
.cap-hl { color: var(--pumpkin); }
.sub {
  bottom: 4%; left: 8%; right: 8%; margin: 0 auto; width: fit-content; max-width: 84%; text-align: center;
  font-size: max(11px, 2.05cqw); font-weight: 800; color: var(--ink);
  background: rgba(12, 9, 24, .78); padding: .35em .9em; border-radius: .7em;
}

.card {
  right: 6%; top: 24%; width: 40%; padding: 2cqw 2.4cqw; border-radius: 2cqw;
  background: rgba(40, 32, 70, .92); border: .3cqw solid var(--line); box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .45);
  display: grid; gap: .8cqw;
}
.card-k { margin: 0; font-size: max(9px, 1.35cqw); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 4.2cqw; line-height: 1.05; color: var(--moon); }
.card-order { margin: 0; font-size: max(11px, 2.1cqw); font-weight: 600; color: var(--muted); }
.card-order b { display: block; font-family: var(--display); font-weight: 400; font-size: 2.9cqw; line-height: 1.1; color: var(--pumpkin); }
.card-quirk { margin: 0; font-size: max(10px, 1.8cqw); font-style: italic; color: var(--ink); }

.level { left: 0; right: 0; top: 36%; display: grid; justify-items: center; gap: .4cqw; text-align: center; }
.level span { font-size: max(10px, 1.7cqw); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--moon); text-shadow: 0 0 1cqw #1b1530; }
.level b {
  font-family: var(--display); font-weight: 400; font-size: 7cqw; line-height: 1; color: #fff;
  text-shadow: 0 .4cqw 0 #1b1530, 0 0 2.5cqw rgba(255, 155, 61, .6);
}

.end { left: 4%; right: 4%; top: 21%; display: grid; justify-items: center; gap: 1.6cqw; text-align: center; }
.end h2 {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: 7.2cqw; line-height: 1; color: var(--moon);
  text-shadow: 0 .4cqw 0 #2a1f45, 0 0 3cqw rgba(255, 155, 61, .35);
}
.end h2 span { color: var(--beet); }
.end-url {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1.3em; border-radius: 999px;
  font-family: var(--display); font-size: max(14px, 3cqw); color: #2a1a0a; background: var(--pumpkin); text-decoration: none;
  box-shadow: 0 .5cqw 0 #b8601a;
}
.end-url:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }
.end-meta { margin: 0; font-size: max(11px, 2.1cqw); font-weight: 800; color: var(--ink); }
.layer.live { pointer-events: auto; }

.dim { inset: 0; background: #0c0918; }
.bigplay {
  position: absolute; left: 50%; top: 71%; translate: -50% -50%; z-index: 5;
  width: max(64px, 10cqw); height: max(64px, 10cqw); border-radius: 50%; border: .35cqw solid var(--moon);
  background: rgba(226, 69, 106, .92); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 .8cqw rgba(255, 231, 163, .18), 0 1cqw 3cqw rgba(0, 0, 0, .5); transition: transform .15s ease;
}
.bigplay:hover { transform: scale(1.06); }
.bigplay:focus-visible { outline: 3px solid var(--moon); outline-offset: 4px; }
.bigplay svg { width: 44%; height: 44%; }
.bigplay[hidden] { display: none; }

/* ---------- Controls ---------- */
.bar { display: grid; gap: 2px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 4px 8px 6px; }
.seek { position: relative; height: 44px; }
.seek input {
  position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; --p: 0%;
}
.seek input::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--pumpkin) 0 var(--p), #4a3d78 var(--p) 100%);
}
.seek input::-moz-range-track { height: 8px; border-radius: 99px; background: #4a3d78; }
.seek input::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--pumpkin); }
.seek input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%;
  background: var(--moon); border: 3px solid var(--beet);
}
.seek input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--moon); border: 3px solid var(--beet); }
.seek input:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; border-radius: 8px; }
.marks { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; pointer-events: none; }
.mark { position: absolute; top: 13px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--moon); opacity: .75; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cbtn {
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 2px solid transparent;
  background: var(--panel-2); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer;
  font: inherit; font-weight: 800;
}
.cbtn:hover { border-color: var(--pumpkin); }
.cbtn:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; }
.cbtn svg { width: 22px; height: 22px; }
.cbtn[aria-pressed="true"] { background: var(--pumpkin); color: #2a1a0a; }
.cbtn[hidden] { display: none; }
.time { font-variant-numeric: tabular-nums; font-weight: 800; font-size: .95rem; padding: 0 6px; white-space: nowrap; }
.chap { flex: 1 1 140px; min-width: 0; font-weight: 700; color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chap b { color: var(--moon); font-weight: 800; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico-pause, .ico-replay, .ico-on { display: none; }
.is-playing .ico-play { display: none; }
.is-playing .ico-pause { display: block; }
.is-ended .ico-play { display: none; }
.is-ended .ico-replay { display: block; }
.snd-on .ico-off { display: none; }
.snd-on .ico-on { display: block; }
@media (max-width: 520px) {
  .bar { padding: 2px 6px 4px; }
  .time { font-size: .85rem; }
  .chap { flex-basis: 100%; order: 9; padding: 0 4px 2px; }
}
.back {
  justify-self: start; display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 14px;
  border-radius: 999px; color: var(--muted); font-weight: 800; text-decoration: none; border: 2px solid var(--line); background: var(--panel);
}
.back:hover { color: var(--ink); border-color: var(--pumpkin); }
.back:focus-visible { outline: 3px solid var(--moon); outline-offset: 2px; }
.player { max-width: min(1280px, max(320px, calc((100dvh - 210px) * 16 / 9))); }

/* ---------- Embed mode (index.html?embed=1): the game's full-viewport intro ----------
   No controls or back link (the host page draws its own Play now + sound buttons); the 16:9 stage
   is letterboxed on a matte that continues the sky gradient so it reads edge to edge. */
html.embed, html.embed body { height: 100%; overflow: hidden; }
html.embed .page {
  min-height: 0; height: 100%; padding: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, #120c28 0%, #2a1f5c 55%, #4a2f72 100%);
}
html.embed .player { width: min(100vw, calc(100dvh * 16 / 9)); max-width: none; gap: 0; }
html.embed .stage { border-radius: 0; box-shadow: none; cursor: default; }
html.embed .bar, html.embed .back, html.embed .bigplay, html.embed .end-url { display: none; }