:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --bg: #09090b;
  --panel: #111218;
  --panel-2: #171821;
  --ink: #f6f4ee;
  --muted: #9c9ba2;
  --line: rgba(255,255,255,.12);
  --hot: #ff3c74;
  --cyan: #3ce7e1;
  --amber: #f6bf48;
  --green: #62e89b;
  --danger: #ff665e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #050506; }
body { overflow: hidden; color: var(--ink); }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.game {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,60,116,.13), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(60,231,225,.08), transparent 28%),
    linear-gradient(180deg, #0c0c10 0%, #070709 100%);
}

.noise,
.scanlines { pointer-events: none; position: absolute; inset: 0; z-index: 80; opacity: .15; }
.noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.scanlines { opacity: .08; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.12) 4px); }

.hud {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 60;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
}
.hud-title { min-width: 0; line-height: 1; }
.hud-title strong { display: block; font-size: 16px; letter-spacing: .12em; }
.hud-kicker { display: block; margin-bottom: 6px; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: #85848d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-actions { display: flex; gap: 8px; }
.hud-btn {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(7,7,9,.62); backdrop-filter: blur(16px); font-weight: 900; cursor: pointer;
}

.scene {
  position: absolute;
  inset: 0;
  padding: calc(max(72px, env(safe-area-inset-top) + 62px)) 16px calc(max(112px, env(safe-area-inset-bottom) + 98px));
  overflow: hidden;
}
.scene.enter { animation: sceneIn .45s cubic-bezier(.2,.8,.2,1); }
.scene.glitch { animation: glitch .45s steps(2,end); }
@keyframes sceneIn { from { opacity: 0; transform: scale(1.025); filter: blur(5px);} to { opacity: 1; transform: none; filter: none; } }
@keyframes glitch { 0%,100%{transform:none;filter:none}20%{transform:translateX(8px);filter:hue-rotate(35deg)}40%{transform:translateX(-6px)}60%{transform:skewX(-2deg);filter:contrast(1.6)}80%{transform:translateX(3px)} }

.stage-shell { width: min(860px, 100%); height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.chapter-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chapter { font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; color: var(--hot); }
.loop { font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #85848d; letter-spacing: .12em; }
.stage-title { margin: 0; font-size: clamp(26px, 8vw, 50px); line-height: .98; letter-spacing: -.055em; }
.stage-copy { margin: 12px 0 18px; max-width: 620px; color: #bbb9bf; font-size: 13px; line-height: 1.75; }

.opening { justify-content: center; align-items: center; text-align: center; padding-top: 4vh; }
.opening .stage-title { font-size: clamp(58px, 18vw, 126px); letter-spacing: -.085em; }
.opening .stage-copy { max-width: 420px; }
.opening .tiny { margin-top: 18px; color: #76757c; font: 700 9px/1.5 ui-monospace, monospace; letter-spacing: .12em; }

.platform-art,
.train-art,
.locker-art,
.gate-art {
  position: relative;
  flex: 1;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: #101116;
  box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 24px 80px rgba(0,0,0,.24);
}

.platform-art { background: linear-gradient(180deg,#171922 0 57%,#22232a 57% 59%,#0e0f13 59% 100%); }
.platform-art::after { content:""; position:absolute; left:0; right:0; bottom:16%; height:3px; background:repeating-linear-gradient(90deg,var(--amber) 0 28px,transparent 28px 36px); opacity:.8; }
.station-sign {
  position: absolute; left: 8%; top: 13%; width: 52%; min-width: 210px; padding: 13px 16px 12px;
  color: #121216; background: #f5f3ec; border-radius: 2px; border-bottom: 9px solid var(--hot); box-shadow: 0 7px 18px rgba(0,0,0,.3);
}
.station-sign .code { float:right; width:42px; height:42px; border:4px solid var(--hot); border-radius:50%; display:grid; place-items:center; font:900 12px/1 ui-monospace,monospace; }
.station-sign strong { display:block; font-size:24px; letter-spacing:-.03em; }
.station-sign small { font:700 8px/1 ui-monospace,monospace; letter-spacing:.16em; }
.platform-clock { position:absolute; right:8%; top:15%; width:92px; height:92px; display:grid; place-items:center; border:7px solid #e7e5df; border-radius:50%; background:#101117; font:900 21px/1 ui-monospace,monospace; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.lost-tag { position:absolute; left:11%; bottom:24%; width:150px; transform:rotate(-7deg); padding:12px; color:#17181d; background:#f3df9d; border:1px solid rgba(0,0,0,.25); box-shadow:0 8px 20px rgba(0,0,0,.35); }
.lost-tag b { display:block; font:900 21px/1.1 ui-monospace,monospace; }
.lost-tag span { font-size:9px; letter-spacing:.1em; }
.track-tunnel { position:absolute; right:-4%; bottom:0; width:55%; height:42%; background:linear-gradient(90deg,transparent,#020203 25% 100%); clip-path:polygon(21% 0,100% 0,100% 100%,0 100%); }
.tunnel-eye { position:absolute; right:8%; bottom:18%; width:30px; height:7px; border-radius:50%; background:var(--hot); filter:blur(.7px); box-shadow:0 0 20px var(--hot), -42px 3px 18px var(--hot); animation:approach 2.8s ease-in-out infinite; }
@keyframes approach { 0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.25);opacity:1} }

.hotspot { position:absolute; border:1px solid rgba(60,231,225,.7); border-radius:999px; background:rgba(60,231,225,.12); box-shadow:0 0 0 5px rgba(60,231,225,.05),0 0 20px rgba(60,231,225,.18); cursor:pointer; animation:pulse 1.6s ease-in-out infinite; }
.hotspot::after { content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:var(--cyan); font-weight:900; }
.hotspot.seen { opacity:.35; animation:none; }
@keyframes pulse { 50% { transform:scale(1.1); box-shadow:0 0 0 9px rgba(60,231,225,0),0 0 26px rgba(60,231,225,.3); } }

.choice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.choice-btn {
  min-height: 62px; padding: 10px; border:1px solid var(--line); border-radius:16px; background:#121319; cursor:pointer;
  text-align:left; transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.choice-btn:active { transform:scale(.97); }
.choice-btn b { display:block; font-size:16px; }
.choice-btn span { display:block; margin-top:5px; color:#86858d; font:700 8px/1.2 ui-monospace,monospace; letter-spacing:.08em; }
.choice-btn.available { border-color:rgba(255,255,255,.25); background:#171821; }
.choice-btn.correct { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.choice-btn.wrong { border-color:var(--danger); animation:shake .3s ease; }
.choice-btn:disabled { opacity:.42; cursor:not-allowed; }
@keyframes shake { 25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)} }

.train-art { background:linear-gradient(180deg,#b9bbc1 0 14%,#2b2d33 14% 16%,#1a1b20 16% 72%,#292a30 72% 75%,#101116 75%); }
.train-window { position:absolute; left:5%; right:5%; top:20%; height:42%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.door { position:relative; border:2px solid #555761; background:linear-gradient(180deg,#16171c,#0d0e12); overflow:hidden; }
.door::before { content:""; position:absolute; inset:10% 10% 30%; background:linear-gradient(90deg,#09090b,#242630 45%,#0a0a0c); border:2px solid #6e7078; }
.door-code { position:absolute; left:0; right:0; bottom:9%; text-align:center; font:900 21px/1 ui-monospace,monospace; letter-spacing:.1em; }
.reflection { transform:scaleX(-1); color:var(--cyan); text-shadow:0 0 12px rgba(60,231,225,.6); }
.car-ad { position:absolute; left:7%; top:5%; padding:7px 12px; background:#f0eee7; color:#16171c; font:900 10px/1 ui-monospace,monospace; transform:rotate(-1deg); }
.train-led { position:absolute; right:7%; top:6%; color:var(--amber); font:800 9px/1 ui-monospace,monospace; letter-spacing:.08em; }
.train-floor-lines { position:absolute; left:0; right:0; bottom:0; height:25%; background:repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,255,255,.06) 65px 67px),linear-gradient(180deg,#24252b,#0c0d10); }
.train-art.rumble { animation:rumble .16s linear 5; }
@keyframes rumble { 0%,100%{transform:translate(0)}25%{transform:translate(-1px,2px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-2px,0)} }

.locker-art { background:linear-gradient(180deg,#1a1b20,#0b0c0f); }
.lockers { position:absolute; inset:9% 6% 15%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.locker { position:relative; border:1px solid #4d5059; background:linear-gradient(145deg,#30323a,#1d1f25); border-radius:5px; cursor:pointer; box-shadow:inset -8px 0 18px rgba(0,0,0,.18); }
.locker::after { content:""; position:absolute; right:10%; top:48%; width:8px; height:24px; border-radius:5px; background:#888b91; }
.locker b { position:absolute; left:11%; top:10%; font:900 clamp(28px,9vw,58px)/1 ui-monospace,monospace; color:#dcdae1; }
.locker.open { transform:perspective(600px) rotateY(-10deg); transform-origin:left; background:#0c0d10; box-shadow:inset 20px 0 40px #000; }
.locker.correct { border-color:var(--green); }
.poster-strip { position:absolute; left:0; right:0; bottom:5%; text-align:center; color:#686870; font:800 8px/1.4 ui-monospace,monospace; letter-spacing:.12em; }

.gate-art { background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.09),transparent 24%),linear-gradient(180deg,#14151a,#08090b); }
.gates { position:absolute; inset:13% 5% 18%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:end; }
.gate-unit { position:relative; height:76%; min-height:180px; border-radius:22px 22px 8px 8px; background:linear-gradient(90deg,#1c1d23,#353741 45%,#1b1d22); border:1px solid #555761; box-shadow:0 18px 30px rgba(0,0,0,.35); }
.gate-unit::before { content:""; position:absolute; top:12%; left:17%; right:17%; height:24%; border-radius:8px; background:#050506; border:1px solid #555761; box-shadow:inset 0 0 18px rgba(60,231,225,.1); }
.gate-unit::after { content:""; position:absolute; left:50%; bottom:-4%; width:34%; height:79%; transform:translateX(-50%); background:rgba(255,60,116,.2); border-left:2px solid rgba(255,60,116,.6); border-right:2px solid rgba(255,60,116,.6); clip-path:polygon(0 0,100% 0,73% 100%,27% 100%); }
.gate-unit.open::after { animation:gateOpen .65s ease forwards; }
@keyframes gateOpen { to { transform:translateX(-50%) scaleX(0); opacity:0; } }
.gate-readout { position:absolute; top:17%; left:10%; right:10%; text-align:center; color:var(--cyan); font:800 8px/1.3 ui-monospace,monospace; }
.dawn { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(180deg,#ffb56b 0,#ffd8a4 22%,#f9ece4 48%,#3c404b 49%,#11131a 100%); transition:opacity 1.8s ease; }
.dawn.show { opacity:1; }

.ticket-dock {
  position:absolute; z-index:65; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; transition:opacity .25s ease, transform .25s ease;
}
.ticket-dock.hidden { opacity:0; transform:translate(-50%,24px); pointer-events:none; }
.ticket {
  position:relative; width:min(72vw,330px); height:82px; padding:12px 18px; border:1px solid rgba(255,85,103,.6); border-radius:7px;
  background:linear-gradient(135deg,#141216,#09090b 68%); color:#ff667d; box-shadow:0 18px 46px rgba(0,0,0,.5),inset 0 0 30px rgba(255,60,116,.05); text-align:left; cursor:pointer;
}
.ticket::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,102,125,.2); border-radius:4px; pointer-events:none; }
.ticket-cut { position:absolute; width:14px; height:14px; border-radius:50%; background:#050506; top:50%; transform:translateY(-50%); border:1px solid rgba(255,85,103,.25); }
.ticket-cut-a { left:-8px; } .ticket-cut-b { right:-8px; }
.ticket-label { position:absolute; left:15px; top:11px; font:800 7px/1 ui-monospace,monospace; letter-spacing:.18em; opacity:.75; }
.ticket-route { position:absolute; left:15px; top:29px; display:flex; align-items:center; gap:8px; font:800 17px/1 ui-monospace,monospace; letter-spacing:.05em; }
.ticket-route i { font-style:normal; opacity:.45; }
.ticket-code { position:absolute; left:15px; bottom:10px; font:800 7px/1 ui-monospace,monospace; letter-spacing:.12em; opacity:.7; }
.ticket-stamps { position:absolute; right:14px; bottom:9px; display:flex; gap:4px; }
.stamp { width:22px; height:22px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font:900 7px/1 ui-monospace,monospace; transform:rotate(-10deg); }
.ticket-hint { font:800 7px/1 ui-monospace,monospace; color:#6f6e75; letter-spacing:.18em; }
.ticket.swipe-ticket { touch-action:none; cursor:grab; transition:transform .14s ease; }
.ticket.dragging { cursor:grabbing; }

.opening-ticket-wrap { position:relative; width:min(92vw,500px); height:170px; display:grid; place-items:center; margin:20px auto 4px; }
.gate-slot { position:absolute; left:50%; top:4px; width:min(70vw,340px); height:52px; transform:translateX(-50%); border-radius:11px; border:1px solid #3f414b; background:linear-gradient(180deg,#2a2c33,#0a0a0c); box-shadow:inset 0 8px 22px rgba(0,0,0,.65); }
.gate-slot::after { content:"INSERT TICKET"; position:absolute; inset:0; display:grid; place-items:center; color:#5d606a; font:800 8px/1 ui-monospace,monospace; letter-spacing:.14em; }
.opening-ticket-wrap .ticket { position:absolute; bottom:5px; }
.swipe-arrow { position:absolute; left:50%; top:64px; transform:translateX(-50%); font-size:24px; color:var(--hot); animation:up 1.25s ease-in-out infinite; }
@keyframes up { 0%,100%{transform:translate(-50%,10px);opacity:.35}50%{transform:translate(-50%,-6px);opacity:1} }

.modal { position:absolute; z-index:90; inset:0; display:grid; place-items:end center; padding:18px; background:rgba(0,0,0,.56); backdrop-filter:blur(9px); }
.modal.hidden { display:none; }
.modal-card { position:relative; width:min(620px,100%); padding:24px 22px 22px; border-radius:24px; border:1px solid var(--line); background:rgba(18,19,25,.96); box-shadow:0 24px 80px rgba(0,0,0,.55); animation:modalIn .23s ease; }
@keyframes modalIn { from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1} }
.modal-close { position:absolute; right:12px; top:12px; width:36px; height:36px; border:0; border-radius:50%; background:#22232a; cursor:pointer; }
.modal-eyebrow { margin-bottom:9px; color:var(--hot); font:800 8px/1 ui-monospace,monospace; letter-spacing:.16em; }
.modal h2 { margin:0 40px 12px 0; font-size:24px; letter-spacing:-.04em; }
.modal-body { color:#c5c4ca; font-size:13px; line-height:1.8; }
.modal-body strong { color:#fff; }
.modal-body .mono { display:block; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#0b0c0f; color:var(--cyan); font:800 12px/1.7 ui-monospace,monospace; letter-spacing:.08em; }
.primary-btn { width:100%; min-height:52px; margin-top:17px; border:0; border-radius:14px; background:var(--ink); color:#111217; font-weight:950; cursor:pointer; }
.primary-btn.hidden { display:none; }

.toast { position:absolute; z-index:88; left:50%; top:18%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:10px 14px; border-radius:999px; background:rgba(5,5,6,.86); border:1px solid var(--line); color:#e9e7ed; font-size:11px; box-shadow:0 8px 28px rgba(0,0,0,.4); }
.toast.hidden { display:none; }

.end-copy { position:absolute; inset:auto 6% 8%; z-index:4; opacity:0; transform:translateY(10px); transition:all .8s ease 1.2s; text-align:center; color:#14151a; }
.end-copy.show { opacity:1; transform:none; }
.end-copy b { display:block; font-size:clamp(32px,10vw,72px); letter-spacing:-.06em; }
.end-copy p { margin:10px auto 0; max-width:520px; font-size:13px; line-height:1.8; }
.end-copy button { margin-top:18px; border:1px solid rgba(20,21,26,.28); border-radius:999px; padding:10px 18px; background:rgba(255,255,255,.45); color:#14151a; font-weight:900; cursor:pointer; }

@media (min-width: 760px) {
  .scene { padding-left:28px; padding-right:28px; }
  .modal { place-items:center; }
  .platform-art,.train-art,.locker-art,.gate-art { min-height:360px; }
  .choice-row { gap:12px; }
  .choice-btn { min-height:70px; padding:14px; }
}

@media (max-height: 660px) {
  .stage-copy { margin:8px 0 10px; line-height:1.55; }
  .platform-art,.train-art,.locker-art,.gate-art { min-height:230px; }
  .opening .stage-title { font-size:52px; }
  .opening-ticket-wrap { height:145px; margin-top:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}