/* 車窓の映画『147分』 — one dark auditorium; the train window is the screen. Single dark look by design. */
@font-face { font-family: "WF Mincho"; font-style: normal; font-weight: 400 599; font-display: swap; src: url("fonts/window-film/wf-mincho-500.woff2") format("woff2"); }
@font-face { font-family: "WF Mincho"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("fonts/window-film/wf-mincho-700.woff2") format("woff2"); }
@font-face { font-family: "WF Dot"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/window-film/wf-dot-400.woff2") format("woff2"); }
/* Layout: one dark auditorium. The train window is the screen, the cabin wall is the house,
   and the player rail sits under it like the front row. Single dark world by design. */
:root {
  --house: #06080c;
  --rail: #0e1218;
  --line: #222934;
  --text: #eef1f3;
  --muted: #a3adb8;
  --faint: #6f7a87;
  --led: #ffab3d;
  --led-red: #ff6b4a;
  --sea: #62c6ee;
  --mtn: #9ed99a;
  --stripe: #2f6fd6;
  --paper: #dcebe3;
  --paper-line: rgba(38, 104, 84, .085);
  --ink: #1c2830;
  --stamp: #b83a2a;
  --f-display: "WF Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --f-ui: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", -apple-system, "Segoe UI", sans-serif;
  --f-dot: "WF Dot", "Osaka-Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:lang(ja) body { word-break: auto-phrase; }
body { margin: 0; background: var(--house); color: var(--text); font: 400 15px/1.75 var(--f-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; }

.page { max-width: 1480px; margin: 0 auto; padding-inline: 16px; padding-block: 8px 64px; }

/* ── header ─────────────────────────────── */
.top { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding-block: 6px 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 18px/1 var(--f-display); letter-spacing: .06em; }
.brand svg { width: 34px; height: 26px; color: var(--text); flex: none; }
.top-title { margin: 0; font: 400 14px/1 var(--f-dot); color: var(--led); letter-spacing: .08em; }
.top-title { font-weight: 400; }
.top-back { font: 500 13px/1.2 var(--f-ui); color: var(--muted); text-decoration: none; }
.top-back:hover { color: var(--text); }
.lang { margin-left: auto; display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { padding: 6px 12px; border-radius: 999px; font: 500 13px/1 var(--f-ui); color: var(--muted); text-decoration: none; }
.lang a[aria-current="page"] { background: #1d2430; color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { margin: 0 0 8px; color: var(--led); }

/* ── theater ────────────────────────────── */
.theater { display: grid; justify-items: center; gap: 10px; }
#stageBox { position: relative; width: var(--sw, 960px); height: var(--sh, 540px); max-width: 100%; }
#stageBox:fullscreen { width: 100vw; height: 100vh; background: #000; display: grid; place-items: center; }
#stage { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; background: var(--house); container-type: size; isolation: isolate; cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px #171c25, 0 40px 90px -40px rgba(47, 111, 214, .35); }
#stageBox:fullscreen #stage { position: relative; inset: auto; width: var(--fw); height: var(--fh); border-radius: 0; }

.house { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, #0d1118, var(--house) 70%); }

/* projector */
.beam { position: absolute; left: 50%; top: -34cqh; width: 220cqw; height: 170cqh; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.beam i { position: absolute; inset: 0; background: conic-gradient(at 50% 0%, transparent 0deg 163deg, rgba(255, 236, 200, .05) 169deg, rgba(255, 236, 200, .15) 180deg, rgba(255, 236, 200, .05) 191deg, transparent 197deg 360deg); filter: blur(1.6cqmin); }
.beam::after { content: ""; position: absolute; left: 50%; top: 54%; width: 150cqmin; height: 90cqmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 232, 190, .17), transparent); }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ticket */
.tk-wrap { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1400px; transition: transform .25s ease-out; }
.ticket { position: relative; width: min(106cqmin, 88cqw); aspect-ratio: 2.3 / 1; display: flex; container-type: inline-size; opacity: 0; filter: drop-shadow(0 2.6cqmin 3cqmin rgba(0, 0, 0, .55)); }
.tk-main, .tk-stub { position: relative; color: var(--ink);
  background:
    repeating-linear-gradient(118deg, var(--paper-line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(62deg, var(--paper-line) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #e4f1ea, var(--paper) 55%, #cfe3d8); }
.tk-main { flex: 1 1 76%; display: flex; flex-direction: column; gap: 1.5cqi; padding: 4cqi 4.4cqi 3.2cqi; border-radius: 1.4cqi 0 0 1.4cqi; }
.tk-head { display: flex; align-items: baseline; gap: 2cqi; white-space: nowrap; padding-bottom: 1.6cqi; border-bottom: .3cqi solid var(--ink); }
.tk-brand { font: 800 5.2cqi/1 var(--f-display); letter-spacing: .08em; }
.tk-brand-en { font: 400 2.1cqi/1 var(--f-dot); letter-spacing: .22em; opacity: .7; }
.tk-kind { margin-left: auto; padding: .6cqi 1.5cqi; border: .25cqi solid; border-radius: .6cqi; font: 700 2.3cqi/1 var(--f-ui); letter-spacing: .12em; }
.tk-rows { display: grid; gap: .8cqi; }
.tk-row { display: grid; grid-template-columns: 17cqi 1fr; align-items: baseline; }
.tk-k { font: 400 2.1cqi/1.2 var(--f-dot); letter-spacing: .1em; opacity: .72; }
.tk-v { font: 400 3.2cqi/1.25 var(--f-dot); }
.lang-en .tk-brand { font-size: 4.3cqi; letter-spacing: .05em; }
.lang-en .tk-k { letter-spacing: .04em; }
.tk-v.tk-title { font: 800 4.3cqi/1.15 var(--f-display); letter-spacing: .04em; }
.tk-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4cqi 2cqi; font: 400 1.9cqi/1.3 var(--f-dot); opacity: .75; }
.tk-punch { position: absolute; top: -.2cqi; left: 64%; width: 3.2cqi; height: 3.4cqi; background: var(--house); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); opacity: 0; }
.tk-stub { flex: 0 0 24%; display: grid; place-content: center; justify-items: center; gap: .6cqi; text-align: center; border-radius: 0 1.4cqi 1.4cqi 0;
  border-left: .45cqi dotted rgba(28, 40, 48, .4); }
.st-l { font: 400 2.1cqi/1 var(--f-dot); letter-spacing: .2em; opacity: .7; }
.tk-stub b { font: 800 9.6cqi/.9 var(--f-display); letter-spacing: -.02em; }
.st-u { font: 500 2.4cqi/1 var(--f-ui); }
.tk-stub em { display: grid; place-items: center; width: 6.4cqi; height: 6.4cqi; margin-top: .8cqi; border-radius: 50%; border: .35cqi solid #2e7d4f; color: #2e7d4f; font: 800 3.6cqi/1 var(--f-ui); font-style: normal; }

/* cabin */
.cabin { position: absolute; inset: 0; opacity: 0; }
.wall { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 22cqw),
  radial-gradient(120% 95% at 50% 45%, #2c3038 0%, #1c1f25 55%, #111317 100%); }
.led { position: absolute; display: flex; align-items: center; gap: 2.2cqmin; padding-inline: 2.4cqmin; background: #07080a; border-radius: .9cqmin; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 .35cqmin #272b32, 0 .5cqmin 1.4cqmin rgba(0, 0, 0, .5); font: 400 3.3cqmin/1 var(--f-dot); color: var(--led); }
.led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, transparent 0 38%, rgba(7, 8, 10, .6) 64%); background-size: .52cqmin .52cqmin; }
.led-fixed { flex: none; color: var(--led-red); text-shadow: 0 0 .9cqmin rgba(255, 90, 60, .7); }
.led-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 .9cqmin rgba(255, 165, 50, .75); }
.plate { position: absolute; display: flex; align-items: center; gap: 1.1cqmin; padding-inline: 1.8cqmin; border-radius: .9cqmin; background: #e6eaee; color: #12161c; font: 700 2.5cqmin/1 var(--f-ui); box-shadow: 0 .5cqmin 1.4cqmin rgba(0, 0, 0, .5); --seat-ink: #2e7d4f; }
.plate b { font: 800 4.2cqmin/1 var(--f-ui); color: var(--seat-ink); }
.plate.is-A { --seat-ink: #1f6fa8; }
.land .led { left: 50%; top: 4.6cqh; width: 48cqw; height: 7cqh; transform: translateX(-50%); }
.land .plate { right: 6cqw; top: 4.6cqh; height: 7cqh; }
.port .led { left: 5cqw; top: 11cqh; width: 63cqw; height: 5.4cqh; }
.port .plate { right: 5cqw; top: 11cqh; height: 5.4cqh; }

.win { position: absolute; overflow: hidden; border-radius: 3.6cqmin; background: #0b0d10;
  box-shadow: 0 0 0 1.2cqmin #30343c, 0 0 0 1.55cqmin #0c0e12, 0 0 0 1.8cqmin #3b404a, 0 2.6cqmin 6cqmin rgba(0, 0, 0, .65); }
.win::after { content: ""; position: absolute; inset: 0; z-index: 30; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 .45cqmin rgba(0, 0, 0, .7), inset 0 1.6cqmin 3cqmin rgba(0, 0, 0, .35), inset 0 -1cqmin 2cqmin rgba(0, 0, 0, .3); }
.land .win { left: 6cqw; top: 15.5cqh; width: 88cqw; height: 69cqh; }
.port .win { left: 5cqw; top: 19.5cqh; width: 90cqw; height: 37cqh; }
.shot { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.shot.night img { filter: brightness(1.18) contrast(1.06) saturate(1.1); }
.shot.has-tag::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(to top, rgba(4, 6, 10, .78), transparent); pointer-events: none; }
.tag { position: absolute; left: 3.6cqmin; bottom: 3.2cqmin; z-index: 2; display: grid; justify-items: start; gap: .8cqmin; max-width: 74%; opacity: 0; text-shadow: 0 .2cqmin 1.2cqmin rgba(0, 0, 0, .65); }
.tag b { font: 700 5.2cqmin/1.15 var(--f-display); letter-spacing: .04em; }
.tag .hook { font: 500 2.9cqmin/1.35 var(--f-display); color: #e9edf0; }
.tag .meta { font: 400 2.5cqmin/1 var(--f-dot); letter-spacing: .08em; color: #d9dfe4; }
.tag .role { font: 700 2.3cqmin/1 var(--f-ui); letter-spacing: .32em; color: var(--led); }
.tag.star b { font-size: 10.5cqmin; line-height: 1; }
.tag.star .line { font: 500 3.6cqmin/1.3 var(--f-display); }
.s-E { color: var(--mtn); }
.s-A { color: var(--sea); }
.port .tag b { font-size: 6cqmin; }
.port .tag.star b { font-size: 11cqmin; }
.port .tag .hook { display: none; }

.scrim { position: absolute; inset: 0; z-index: 10; opacity: 0; background: radial-gradient(ellipse at center, rgba(4, 6, 10, .62), rgba(4, 6, 10, .32) 75%); }
.nightref { position: absolute; inset: 0; z-index: 11; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(to top, rgba(255, 214, 150, .16), transparent 34%), radial-gradient(38% 30% at 22% 88%, rgba(255, 220, 170, .12), transparent 70%), radial-gradient(30% 22% at 80% 92%, rgba(255, 220, 170, .08), transparent 70%); }
.glass { position: absolute; inset: -30%; z-index: 12; opacity: .7; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .11) 47.5%, transparent 53%, transparent 58%, rgba(255, 255, 255, .05) 60%, transparent 63%); }
.shade { position: absolute; inset: 0; z-index: 15;
  background: linear-gradient(to bottom, rgba(255, 246, 225, .22), transparent 40%), repeating-linear-gradient(to bottom, #cdc8bf 0 1.7cqmin, #c2bdb3 1.7cqmin 1.85cqmin); }
.shade i { position: absolute; left: 0; right: 0; bottom: 0; height: 3.4cqmin; background: linear-gradient(#bab4a9, #9a9489); }
.shade i::after { content: ""; position: absolute; left: 50%; top: .9cqmin; width: 10cqmin; height: 1.6cqmin; transform: translateX(-50%); border-radius: 1cqmin; background: #7f796f; }
.leak { position: absolute; inset: 0; z-index: 16; opacity: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 3.4cqmin .8cqmin rgba(255, 228, 175, .6); }

.route { position: absolute; height: 5.4cqmin; }
.land .route { left: 9cqw; right: 9cqw; top: 89cqh; }
.port .route { left: 8cqw; right: 8cqw; top: 89.5cqh; }
.route-line { position: absolute; left: 0; right: 0; top: 1.3cqmin; height: .45cqmin; border-radius: 1cqmin; background: linear-gradient(90deg, #1f4fa3, #3c7be0 50%, #1f4fa3); }
.route-st { position: absolute; top: .9cqmin; width: .32cqmin; height: 1.3cqmin; margin-left: -.16cqmin; background: #5d6672; }
.route-st.mj { top: .55cqmin; height: 2cqmin; background: #c9d1da; }
.route-st span { position: absolute; top: 2.6cqmin; left: 50%; transform: translateX(-50%); font: 500 2.1cqmin/1 var(--f-ui); color: #aab3be; white-space: nowrap; }
.route-dot { position: absolute; top: .45cqmin; left: 0; width: 2.2cqmin; height: 2.2cqmin; margin-left: -1.1cqmin; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5cqmin rgba(60, 123, 224, .55), 0 0 2cqmin rgba(255, 255, 255, .7); }

/* captions */
.cap { position: absolute; z-index: 20; display: grid; place-items: center; text-align: center; opacity: 0; pointer-events: none; }
.cap > div { position: relative; }
.land .cap { left: 6cqw; top: 15.5cqh; width: 88cqw; height: 69cqh; padding: 4cqmin; }
.land .cap.chapter { place-items: start; text-align: left; padding: 4.4cqmin 5cqmin; }
.land .cap.chapter::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; border-radius: 3.6cqmin 3.6cqmin 0 0; background: linear-gradient(rgba(4, 6, 10, .62), transparent); }
.port .cap { left: 5cqw; right: 5cqw; top: 60cqh; height: 26cqh; }
.cap .kick { margin: 0 0 1.3cqmin; font: 700 2.4cqmin/1 var(--f-ui); letter-spacing: .34em; color: var(--led); }
.cap .big { margin: 0; font: 700 6cqmin/1.4 var(--f-display); letter-spacing: .05em; text-wrap: balance; text-shadow: 0 .3cqmin 2cqmin rgba(0, 0, 0, .65); }
.cap .big.title { font-size: 8.6cqmin; letter-spacing: .08em; }
.cap .sub { margin: 1.4cqmin 0 0; font: 400 2.7cqmin/1.2 var(--f-dot); letter-spacing: .14em; color: #d5dbe1; }
.cap.chapter .big { font-size: 5cqmin; }
.port .cap .big { font-size: 6.6cqmin; }
.port .cap .big.title { font-size: 8.2cqmin; }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.player { display: flex; justify-content: center; align-items: center; gap: 2.4cqmin; margin-top: 2.8cqmin; }
.pb { position: relative; display: grid; place-items: center; width: 7.2cqmin; height: 7.2cqmin; border-radius: 50%; border: .3cqmin solid rgba(255, 255, 255, .4); opacity: .5; }
.pb svg { width: 3.2cqmin; height: 3.2cqmin; fill: #fff; }
.pb.no::after { content: ""; position: absolute; width: 8.6cqmin; height: .4cqmin; border-radius: 1cqmin; background: var(--led-red); transform: rotate(-45deg); }
.pb.on { opacity: 1; width: auto; display: flex; gap: 1.2cqmin; padding-inline: 2.2cqmin; border-radius: 4cqmin; border-color: var(--led); }
.pb.on svg { fill: var(--led); }
.pb.on em { font: 400 2.4cqmin/1 var(--f-dot); font-style: normal; color: var(--led); letter-spacing: .12em; }

/* spoiler */
.spoil { position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 4cqmin; opacity: 0; }
.spoil.h { flex-direction: column; gap: 3.4cqmin; }
.spoil .alert { margin: 0; padding: 2.2cqmin 1.1cqmin; border: .25cqmin solid; writing-mode: vertical-rl; align-self: flex-start; margin-top: 12cqh; font: 400 2.5cqmin/1 var(--f-dot); color: var(--led); letter-spacing: .4em; white-space: nowrap; }
.spoil.h .alert { writing-mode: horizontal-tb; align-self: center; margin-top: 0; padding: 1cqmin 2.2cqmin; }
.spoil .v { margin: 0; writing-mode: vertical-rl; font: 800 7.8cqmin/1.5 var(--f-display); letter-spacing: .16em; color: #fff; }
.spoil.h .v { writing-mode: horizontal-tb; font-size: 9.4cqmin; line-height: 1.15; letter-spacing: .01em; text-align: center; }

/* board */
.board-wrap { position: absolute; z-index: 22; opacity: 0; container-type: inline-size; }
.land .board-wrap { left: 5cqw; top: 50%; width: 57cqw; transform: translateY(-50%); --row: 6.1cqi; --fs: 3.5cqi; }
.port .board-wrap { left: 5cqw; top: 6cqh; width: 90cqw; --row: 7.6cqi; --fs: 4.5cqi; }
.board { padding: 3cqi 3.4cqi 3.4cqi; border-radius: 1.6cqi; background: #0a0b0e; box-shadow: 0 0 0 .5cqi #262a31, inset 0 0 0 .2cqi #000, 0 4cqi 8cqi rgba(0, 0, 0, .6); }
.bd-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1cqi 2cqi; padding-bottom: 2cqi; margin-bottom: 1.6cqi; border-bottom: .3cqi solid #22262d; }
.bd-title { font: 800 5.2cqi/1 var(--f-display); letter-spacing: .08em; color: #fff; }
.bd-sub { font: 400 2.8cqi/1 var(--f-dot); letter-spacing: .06em; color: var(--led); }
.bd-cols, .bd-row { display: grid; grid-template-columns: 17cqi 1fr 11cqi; gap: 1.4cqi; align-items: center; }
.bd-cols { margin-bottom: .6cqi; font: 500 2.2cqi/1 var(--f-ui); letter-spacing: .2em; color: #7f8995; }
.bd-cols span:not(:nth-child(2)) { text-align: center; }
.bd-row { position: relative; height: var(--row); margin-top: .9cqi; }
.cell { position: relative; height: 100%; display: flex; align-items: center; padding-inline: 1.4cqi; overflow: hidden; white-space: nowrap; border-radius: .7cqi;
  background: linear-gradient(#17191e 50%, #121418 50%); font: 400 var(--fs)/1 var(--f-dot); color: #f1f3f5; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .22cqi; background: #050608; }
.c-time { justify-content: center; color: var(--led); }
.c-seat { justify-content: center; }
.cell.s-E { color: var(--mtn); }
.cell.s-A { color: var(--sea); }
.bd-glow { position: absolute; inset: -.6cqi -.8cqi; border-radius: 1.2cqi; pointer-events: none; opacity: 0; box-shadow: 0 0 0 .4cqi var(--led), 0 0 3cqi rgba(255, 171, 61, .45); }
.brandrev { position: absolute; z-index: 22; opacity: 0; display: grid; align-content: center; gap: 1.8cqmin; }
.land .brandrev { left: 66cqw; top: 0; bottom: 0; width: 29cqw; }
.port .brandrev { left: 7cqw; right: 7cqw; top: 58cqh; bottom: 6cqh; }
.logo { display: flex; align-items: center; gap: 1.6cqmin; }
.logo svg { width: 8.6cqmin; height: 6.6cqmin; color: #fff; flex: none; }
.logo-ja { font: 800 6cqmin/1 var(--f-display); letter-spacing: .06em; }
.lang-en .brandrev .logo-ja { font-size: 4.4cqmin; }
.logo-en { margin: 0; font: 400 2.1cqmin/1 var(--f-dot); letter-spacing: .2em; color: #9aa6b2; }
.br-line { margin: 1.2cqmin 0 0; font: 700 4.3cqmin/1.35 var(--f-display); color: var(--led); }
.br-p { margin: 0; font: 500 2.6cqmin/1.6 var(--f-ui); color: #d6dce2; text-wrap: pretty; }

/* stamp book */
.sb-wrap { position: absolute; z-index: 22; opacity: 0; container-type: inline-size; }
.land .sb-wrap { left: 7cqw; top: 50%; width: 52cqw; transform: translateY(-50%); }
.port .sb-wrap { left: 6cqw; top: 8cqh; width: 88cqw; }
.stampbook { padding: 4cqi 4.4cqi 6cqi; border-radius: 1.6cqi; color: #25313a; box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .55);
  background: linear-gradient(rgba(47, 111, 214, .07) 1px, transparent 1px) 0 0 / 100% 4.2cqi, #eef1f0; }
.sb-title { margin: 0 0 3.4cqi; display: flex; align-items: baseline; justify-content: space-between; gap: 2cqi; font: 800 4.6cqi/1 var(--f-display); letter-spacing: .14em; }
.sb-title small { font: 400 2.3cqi/1 var(--f-dot); letter-spacing: .1em; color: #6b7782; }
.sb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqi 3cqi; }
.slot { position: relative; aspect-ratio: 1; border-radius: 50%; border: .35cqi dashed rgba(37, 49, 58, .26); }
.slot-l { position: absolute; left: 50%; bottom: -3.6cqi; transform: translateX(-50%); font: 400 2.2cqi/1 var(--f-dot); color: #7a8590; }
.stamp { position: absolute; inset: -5%; opacity: 0; }
.stamp svg { display: block; width: 100%; height: 100%; }
.sb-cap { position: absolute; z-index: 22; opacity: 0; display: grid; align-content: center; gap: 1.8cqmin; }
.land .sb-cap { left: 64cqw; top: 0; bottom: 0; width: 31cqw; }
.port .sb-cap { left: 6cqw; right: 6cqw; top: 62cqh; bottom: 8cqh; text-align: center; }
.sb-cap .big { margin: 0; font: 700 5.4cqmin/1.4 var(--f-display); text-wrap: balance; }
.sb-cap .sub { margin: 0; font: 500 2.6cqmin/1.6 var(--f-ui); color: #cfd6dc; }

/* credits */
.credits { position: absolute; inset: 0; z-index: 22; overflow: hidden; opacity: 0; }
.roll { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; }
.cr-head { margin: 0; font: 800 5cqmin/1.2 var(--f-display); letter-spacing: .4em; text-indent: .4em; }
.cr-head small { display: block; margin-top: 1cqmin; font: 500 2.2cqmin/1 var(--f-ui); letter-spacing: .2em; color: var(--muted); }
.cr-note { margin: 1.6cqmin 0 4.4cqmin; font: 400 1.9cqmin/1.5 var(--f-dot); letter-spacing: .06em; color: var(--faint); text-align: center; padding-inline: 4cqw; }
.cr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.4cqmin; width: min(86cqw, 124cqmin); line-height: 1.62; }
.cr .l { text-align: right; font: 400 2.3cqmin/1.62 var(--f-dot); color: #95a1ad; letter-spacing: .05em; }
.cr .r { text-align: left; font: 500 2.75cqmin/1.62 var(--f-display); color: #f2f4f5; min-width: 0; }
.cr .seat-l { display: inline-block; width: 2.6cqmin; margin-left: 1.2cqmin; text-align: center; font: 700 2.2cqmin/1 var(--f-ui); }
.cr-gap { height: 7cqmin; flex: none; }
.cr.staff .l { font: 700 2.1cqmin/1.62 var(--f-ui); letter-spacing: .26em; color: var(--led); padding-top: .3cqmin; }

/* end + bonus */
.endcard, .bonus { position: absolute; inset: 0; z-index: 22; opacity: 0; display: grid; place-content: center; justify-items: center; gap: 2.2cqmin; padding-inline: 6cqw; text-align: center; }
.end-line { margin: 0; font: 700 6.4cqmin/1.4 var(--f-display); letter-spacing: .06em; text-wrap: balance; }
.endcard .logo { margin-top: 3.4cqmin; }
.end-url { margin: 0; font: 400 3cqmin/1 var(--f-dot); letter-spacing: .14em; color: var(--led); }
.end-small { margin: 1.6cqmin 0 0; font: 400 1.9cqmin/1.6 var(--f-ui); color: var(--faint); }
.bonus { padding-bottom: 13cqh; }
.bn-label { margin: 0; padding: 1cqmin 2.2cqmin; border: .25cqmin solid; font: 400 2.4cqmin/1 var(--f-dot); letter-spacing: .4em; color: var(--led); }
.bn-svg { width: min(74cqw, 96cqmin); height: auto; overflow: visible; }
.bn-svg .draw { fill: none; stroke: #cfd6de; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bn-svg .seat-r { fill: #1a1f27; stroke: #5d6672; stroke-width: 2; }
.bn-svg .seat-r.hot { fill: rgba(158, 217, 154, .22); stroke: var(--mtn); }
.bn-svg .seat-r.sea { stroke: var(--sea); }
.bn-svg text { font-family: var(--f-ui); font-size: 19px; fill: #cfd6de; }
.bn-svg .t-mtn { fill: var(--mtn); font-weight: 700; }
.bn-svg .t-sea { fill: var(--sea); font-weight: 700; }
.bn-svg .t-dot { font-family: var(--f-dot); font-size: 17px; fill: #8f99a6; }
.bn-svg .t-seat { font-weight: 700; font-size: 15px; }
.bn-line { margin: 0; font: 700 5cqmin/1.4 var(--f-display); text-wrap: balance; }
.bn-brand { display: flex; align-items: center; gap: 1.4cqmin; font: 400 2.1cqmin/1 var(--f-dot); color: #9aa6b2; letter-spacing: .12em; }
.bn-brand svg { width: 4.4cqmin; height: 3.4cqmin; color: #cfd6de; }

/* film texture */
.grain { position: absolute; inset: -50%; z-index: 40; opacity: .085; pointer-events: none; mix-blend-mode: overlay; background-image: var(--noise, none); background-size: 180px 180px; }
#stage.playing .grain { animation: grain .45s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.vignette { position: absolute; inset: 0; z-index: 41; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .55) 100%); }

/* overlay */
.ov { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 0 4% 5.5%; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 8, 12, .82), transparent 42%); border-radius: 10px; }
.ov > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; pointer-events: auto; }
.ov-tag { position: absolute; left: 0; right: 0; top: 7%; margin: 0; padding-inline: 16px; text-align: center; pointer-events: none;
  font: 700 clamp(15px, calc(var(--sh, 540px) * .048), 36px)/1.4 var(--f-display); letter-spacing: .08em; color: var(--text); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.ov-tag small { display: block; margin-bottom: .5em; font: 400 clamp(10px, calc(var(--sh, 540px) * .022), 15px)/1 var(--f-dot); letter-spacing: .3em; color: var(--led); }
.btn-primary { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 14px; border: 0; border-radius: 999px; background: var(--led); color: #1d1406; cursor: pointer; box-shadow: 0 10px 34px -10px rgba(255, 171, 61, .7); text-align: left; }
.btn-primary svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.btn-primary span { display: grid; gap: 4px; font: 700 16px/1 var(--f-ui); }
.btn-primary small { font: 400 12px/1 var(--f-dot); opacity: .78; }
.btn-ghost { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(10, 12, 16, .6); color: var(--text); font: 500 14px/1 var(--f-ui); cursor: pointer; text-decoration: none; }
.btn-ghost:hover { border-color: var(--led); }

/* controls */
.ctrl { width: var(--sw, 960px); max-width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--rail); border: 1px solid #1a2029; }
.ib { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #e9edf1; cursor: pointer; }
.ib:hover { background: #1c232e; }
.ib svg { width: 20px; height: 20px; fill: currentColor; }
.time { flex: none; font: 400 13px/1 var(--f-dot); color: #aeb8c3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrub { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; display: flex; align-items: center; margin-inline: 6px; }
.ticks { position: absolute; left: 7px; right: 7px; top: 50%; height: 0; pointer-events: none; }
.ticks i { position: absolute; top: -6px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: #4a5462; }
#scrub { position: relative; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--led) var(--p, 0%), #29313c var(--p, 0%)); }
#scrub::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--led) var(--p, 0%), #29313c var(--p, 0%)); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; }
#scrub::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.chapters { width: var(--sw, 960px); max-width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.chapters button { padding: 6px 11px; border: 1px solid #252c37; border-radius: 999px; background: transparent; color: #aab4bf; font: 500 12.5px/1.2 var(--f-ui); cursor: pointer; }
.chapters button span { margin-right: 6px; font-family: var(--f-dot); color: var(--faint); }
.chapters button[aria-current="true"] { border-color: var(--led); color: var(--text); }
.chapters button[aria-current="true"] span { color: var(--led); }

/* cast index */
.cast { margin-top: 64px; display: grid; gap: 22px; }
.cast-head { display: grid; gap: 8px; }
.eyebrow { margin: 0; font: 400 13px/1 var(--f-dot); letter-spacing: .18em; color: var(--led); }
.cast h2 { margin: 0; font: 800 clamp(24px, 3.4vw, 34px)/1.2 var(--f-display); letter-spacing: .08em; text-wrap: balance; }
.cast-lead { margin: 0; max-width: 62ch; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips button { padding: 7px 14px; border: 1px solid #252c37; border-radius: 999px; background: transparent; color: var(--muted); font: 500 13px/1.2 var(--f-ui); cursor: pointer; }
.chips button[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: #161c25; }
.cast-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: 22px; }
.cast-list li { min-width: 0; }
.cast-list a { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #151a22; text-decoration: none; }
.cast-list a:hover .nm, .cast-list a:focus-visible .nm { color: var(--led); }
.tm { font: 400 13px/1 var(--f-dot); color: #8f9aa6; font-variant-numeric: tabular-nums; }
.seat { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding-inline: 4px; border-radius: 5px; font: 700 11.5px/1 var(--f-ui); }
.seat.E { background: rgba(158, 217, 154, .13); color: var(--mtn); }
.seat.A { background: rgba(98, 198, 238, .13); color: var(--sea); }
.nm { font: 500 15.5px/1.45 var(--f-display); overflow-wrap: anywhere; }
.cast-note { margin: 0; max-width: 72ch; color: var(--faint); font-size: 13px; }

.script { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 16px; }
.script summary { cursor: pointer; font: 700 15px/1.4 var(--f-ui); color: var(--muted); }
.script ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; max-width: 80ch; }
.script li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; color: #d3d9df; }
.script li span { font: 400 13px/1.75 var(--f-dot); color: var(--faint); }
.foot { margin-top: 36px; color: var(--faint); font-size: 12.5px; max-width: 90ch; }
.site-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-foot p { margin: 4px 0; }
.site-foot-brand { font: 800 15px/1.4 var(--f-display); color: var(--text); }
.site-foot-links a { display: inline-block; padding-block: 4px; color: var(--muted); }

@media (max-width: 560px) {
  .time { display: none; }
  .top-title { order: 3; width: 100%; }
  .ctrl { gap: 2px; padding-inline: 4px; }
  .btn-primary { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #stage.playing .grain { animation: none; }
  .tk-wrap { transition: none; }
}