/* 3:07 AM — Morrow's blue night vs Yokaizen's warm lamp. */
:root { --ink:#1c1424; --paper:#f4f4f2; --signal:#e5132b; --riku:#f2a541; --night:#0e1a2b; --blue:#6ec1ff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#070b16; color:#fff;
  font:500 16px/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-user-select:none; user-select:none; }
button { font:inherit; }
.room { position:fixed; inset:0; width:100%; height:100%; display:block; }

.night { position:fixed; inset:0; padding:max(10px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); pointer-events:none; }
.night > * { pointer-events:auto; }
.night[hidden] { display:none; }
.bar { display:flex; align-items:center; gap:10px; height:40px; }
.brand { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; opacity:.8; white-space:nowrap; }
.brand b { color:var(--signal); }
.stage { margin-left:auto; padding:5px 10px; border-radius:999px; background:rgba(229,19,43,.16); border:1px solid rgba(229,19,43,.6); color:#ff8a96;
  font:800 9.5px ui-monospace,Menlo,monospace; letter-spacing:.06em; white-space:nowrap; transition:background .4s; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.stage.bump { animation:bump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump { 40% { transform:scale(1.18); } }
.mute { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.25); color:#fff; font-size:16px; }
.clock { position:absolute; left:0; right:0; top:calc(max(10px,env(safe-area-inset-top)) + 46px); text-align:center; pointer-events:none;
  font:900 clamp(30px,10vw,48px)/1 system-ui,sans-serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-shadow:0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(110,193,255,.35); }
.clock.hit { animation:hit .6s ease-out; color:#ff5b6e; }
@keyframes hit { 20% { transform:scale(1.25); } }

/* the night track: 11:47 PM → 7:00 AM · Morrow's 3:07 (red) · you (white) · the friend (gold) */
.track { position:absolute; left:50%; transform:translateX(-50%); width:min(78vw,320px); height:18px; pointer-events:none;
  top:calc(max(10px,env(safe-area-inset-top)) + 98px); }
.track::before { content:""; position:absolute; inset:-3px -10px -9px; border-radius:10px; background:rgba(7,11,22,.8); }
.track i { position:absolute; display:block; }
.tk-line { left:0; right:0; top:8px; height:3px; border-radius:2px; background:linear-gradient(90deg,rgba(110,193,255,.35),rgba(110,193,255,.7) 55%,rgba(255,196,120,.55)); }
.tk-fore { top:3px; width:3px; height:13px; margin-left:-1.5px; border-radius:2px; background:var(--signal); box-shadow:0 0 8px var(--signal); }
.tk-you { top:4px; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9); transition:left .12s linear; }
.tk-ghost { top:5px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#ffd27a; opacity:.85; box-shadow:0 0 10px #f2a541; transition:left .2s linear; }
.tk-ghost b { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); white-space:nowrap; font:800 8.5px ui-monospace,Menlo,"Hiragino Sans",monospace; letter-spacing:.08em; color:#ffd27a; opacity:.9; }
.tk-ghost.down { background:none; box-shadow:none; }
.tk-ghost.down::after { content:"☾"; position:absolute; left:-2px; top:-6px; font-size:13px; color:#ffd27a; text-shadow:0 0 8px #f2a541; }
.tk-stop { top:2px; width:2px; height:15px; margin-left:-1px; background:#f2a541; opacity:.8; }
.tk-stop.alarm { background:repeating-linear-gradient(#f2a541 0 3px,transparent 3px 5px); }
.track.passed .tk-stop { opacity:1; box-shadow:0 0 10px #f2a541; }
.tk-a, .tk-b { position:absolute; top:17px; font:700 8.5px ui-monospace,Menlo,monospace; letter-spacing:.04em; color:rgba(255,255,255,.55); white-space:nowrap; }
.tk-a { left:0; } .tk-b { right:0; }
.track [hidden] { display:none; }

/* the phone: what you're staring at */
.phone { position:absolute; left:50%; top:calc(max(10px,env(safe-area-inset-top)) + 124px); transform:translateX(-50%); margin:0;
  width:min(54vw,250px, calc((100dvh - 490px) * .75)); aspect-ratio:3/4; border-radius:26px; overflow:hidden; background:#101826;
  border:6px solid #0b0b12; box-shadow:0 0 0 2px #2b2d42, 0 0 60px rgba(110,193,255,.45), 0 20px 50px rgba(0,0,0,.6); }
.phone canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.phone::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(transparent, rgba(0,0,0,.75)); pointer-events:none; }
.phone figcaption { position:absolute; z-index:2; left:10px; right:10px; bottom:9px; font:800 12.5px/1.25 system-ui,"Hiragino Sans",sans-serif; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.phone figcaption b { display:block; font-size:11px; opacity:.85; margin-bottom:2px; }
.phone.swap canvas, .phone.swap figcaption { animation:swapUp .32s cubic-bezier(.2,.9,.3,1); }
@keyframes swapUp { from { transform:translateY(40%); opacity:0; } }
.seen { position:absolute; z-index:3; right:8px; top:8px; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.6); font:800 10px ui-monospace,Menlo,monospace; letter-spacing:.08em; }
.seen[hidden] { display:none; }
.phone.off { filter:brightness(.05); transition:filter 1.2s; box-shadow:0 0 0 2px #2b2d42; }

/* Morrow's notifications */
.toasts { position:absolute; left:14px; right:14px; top:calc(max(10px,env(safe-area-inset-top)) + 124px); z-index:5; display:grid; gap:6px; pointer-events:none; }
.toast { justify-self:center; display:flex; gap:9px; align-items:center; max-width:340px; padding:10px 13px; border-radius:16px; background:rgba(244,244,242,.96); color:var(--ink);
  font:700 13.5px/1.3 system-ui,"Hiragino Sans",sans-serif; box-shadow:0 14px 34px rgba(0,0,0,.5); animation:drop .45s cubic-bezier(.2,1.3,.4,1) both; }
.toast::before { content:"◉"; color:var(--signal); font-size:18px; }
.toast.out { animation:leave .4s ease-in forwards; }
/* Morrow's own voice (SK-5 taunts): its red, its monospace, no bubble warmth */
.toast.morrow { background:rgba(12,8,18,.94); color:#ff8a96; border:1.5px solid rgba(229,19,43,.8); font:800 12.5px/1.35 ui-monospace,Menlo,"Hiragino Sans","Noto Sans Thai","Apple SD Gothic Neo",monospace; letter-spacing:.04em; }
/* the friend's lamp (SK-2 ghost): warm gold, the one light that isn't Morrow's */
.toast.friend { background:#2a1d08; color:#ffd27a; border:1.5px solid #f2a541; }
.toast.friend::before { content:"☾"; color:#f2a541; }
@keyframes drop { from { opacity:0; transform:translateY(-30px) scale(.94); } }
@keyframes leave { to { opacity:0; transform:translateY(-16px); } }

.controls { position:absolute; left:0; right:0; bottom:max(16px,env(safe-area-inset-bottom)); display:grid; justify-items:center; gap:10px; }
.more { min-width:min(76vw,320px); padding:19px 26px; border:0; border-radius:999px; color:#fff; font:900 20px system-ui,"Hiragino Sans",sans-serif; letter-spacing:.06em;
  background:linear-gradient(135deg,#ff3b6b,#e5132b 60%,#b3001e); box-shadow:0 8px 0 #7a0014, 0 0 40px rgba(229,19,43,.55); animation:beg 1.6s ease-in-out infinite; }
.more:active { transform:translateY(6px); box-shadow:0 2px 0 #7a0014, 0 0 30px rgba(229,19,43,.5); }
@keyframes beg { 50% { box-shadow:0 8px 0 #7a0014, 0 0 70px rgba(255,59,107,.8); } }
.more:disabled, .down:disabled { opacity:.4; animation:none; }
.down { padding:8px 14px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(0,0,0,.35); color:rgba(255,255,255,.82); font:700 13px system-ui,"Hiragino Sans",sans-serif; }
.down::before { content:"☾ "; color:var(--riku); }

/* overlays */
.overlay { position:fixed; inset:0; z-index:10; overflow:auto; -webkit-overflow-scrolling:touch; }
.overlay[hidden] { display:none; }
.intro { display:grid; place-items:center; padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); background:rgba(7,11,22,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.sheet { width:min(100%,460px); padding:24px 22px 20px; border-radius:24px; background:var(--paper); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.kicker { font:700 12px ui-monospace,Menlo,monospace; letter-spacing:.16em; color:var(--signal); margin:0; }
.title { font:900 clamp(56px,20vw,96px)/.9 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.05em; margin:8px 0 10px; font-variant-numeric:tabular-nums; }
.title:lang(ja) { font-size:clamp(40px,13vw,64px); letter-spacing:-.02em; }
.sub { font-size:17px; font-weight:600; margin:0 0 14px; }
.seal { display:grid; gap:4px; padding:12px 14px; border-radius:14px; border:2px dashed var(--signal); background:#fff; margin:0 0 14px; }
.seal b { font:800 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--signal); }
.seal .print { font:900 26px ui-monospace,Menlo,monospace; letter-spacing:.18em; }
.seal small { font-size:12px; opacity:.65; }
.friendLine { margin:0 0 14px; padding:10px 12px; border-radius:12px; background:#1c1424; color:#fff; font-weight:700; }
.friendLine[hidden] { display:none; }
.startBtn { padding:18px 28px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:800 18px system-ui,"Hiragino Sans",sans-serif; box-shadow:0 8px 0 #4a4152; }
.startBtn:active { transform:translateY(6px); box-shadow:0 2px 0 #4a4152; }
.privacy { font-size:12px; opacity:.6; margin:12px 0 0; }

.end { background:#0e1a2b; animation:fadein 1s ease both; }
@keyframes fadein { from { opacity:0; } }
.report { max-width:560px; margin:0 auto; padding:max(18px,env(safe-area-inset-top)) 18px 26px; background:var(--paper); color:var(--ink);
  background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px); background-size:100% 28px; }
.portrait { display:block; width:100%; aspect-ratio:4/3.4; border-radius:20px; margin:10px 0 12px; border:3px solid var(--ink); box-shadow:0 12px 30px rgba(28,20,36,.25); }
.endStage { font:900 clamp(36px,11vw,60px)/.95 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.04em; margin:6px 0 4px; }
.endStage.slam { animation:slam .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes slam { from { opacity:0; transform:scale(1.5); } }
.endTime { font:800 20px/1.3 system-ui,"Hiragino Sans",sans-serif; margin:0; }
.endSleep { font:600 14px ui-monospace,Menlo,monospace; color:#6c6570; margin:4px 0 16px; }
.sealOpen { padding:14px 16px; border-radius:14px; background:var(--ink); color:#fff; margin:0 0 16px; }
.sealOpen b { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.16em; color:#ff6b78; }
.sealOpen p { margin:6px 0 0; font:700 16px/1.4 system-ui,"Hiragino Sans",sans-serif; }
.sealOpen .verdict { font:900 18px/1.3 system-ui,"Hiragino Sans",sans-serif; }
.sealOpen .verdict.right { color:#ff6b78; } .sealOpen .verdict.wrong { color:#7dffb2; }
.sealOpen small { display:block; margin-top:6px; font:600 11px ui-monospace,Menlo,monospace; opacity:.6; }
.compare { margin:0 0 16px; } .compare[hidden] { display:none; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pair > div { padding:10px 12px; border-radius:14px; background:#fff; border:1.5px solid var(--ink); }
.pair small { display:block; font:700 10px ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--signal); }
.pair b { font:900 22px system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.label { font:700 11px ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--signal); margin:0 0 8px; }
.findings { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.findings li { padding:13px 14px; border-radius:14px; background:#fff; border-left:5px solid var(--signal); box-shadow:0 6px 18px rgba(0,0,0,.06); font:650 16px/1.4 system-ui,"Hiragino Sans",sans-serif; animation:rise .5s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } }
.moral { font:900 clamp(21px,6.2vw,28px)/1.15 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.02em; margin:6px 0 18px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.primary, .ghostBtn { padding:15px 20px; border-radius:999px; font:800 16px system-ui,"Hiragino Sans",sans-serif; }
.primary { background:var(--ink); color:#fff; border:0; box-shadow:0 6px 0 #4a4152; }
.ghostBtn { background:none; color:var(--ink); border:2px solid var(--ink); }
.clipBtn { border-color:var(--signal); color:var(--signal); }
.clipBtn:disabled { opacity:.6; }
.doorBand { max-width:560px; margin:0 auto; padding:26px 18px max(30px,env(safe-area-inset-bottom)); background:radial-gradient(120% 90% at 50% 0%, #1b2a40, var(--night) 70%); color:#f4efe6; }
.riku { font:600 17px/1.5 system-ui,"Hiragino Sans",sans-serif; padding:14px 16px; border-radius:14px; background:rgba(242,165,65,.1); border:1px solid rgba(242,165,65,.45); margin:0 0 14px; }
.door { display:block; width:fit-content; padding:15px 20px; border-radius:999px; background:var(--riku); color:var(--night); font:800 16px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }
.doorBand .ml-next { color:#f4efe6; }
.bootfail { background:var(--paper); color:var(--ink); padding:40px 22px; }
.bootfail code { display:block; font:11px ui-monospace,monospace; opacity:.6; word-break:break-all; }

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

/* Codex visual QA: reinforce the phone-sized sleep-study frame. */
.intro { background:radial-gradient(ellipse at 50% 25%,rgba(242,165,65,.2),transparent 45%),#0b1430; }
.startBtn,.primary,.ghostBtn,.door { transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.startBtn:hover,.primary:hover,.door:hover { transform:translateY(-2px); filter:brightness(1.08); }
.startBtn:focus-visible,.primary:focus-visible,.ghostBtn:focus-visible,.door:focus-visible { outline:3px solid #f2a541; outline-offset:4px; }

/* Thai: tracking pulls a syllable's marks away from its consonant; labels keep their colour, not their spacing */
:lang(th) .kicker, :lang(th) .label, :lang(th) .sealOpen b, :lang(th) .pair small, :lang(th) .stage, :lang(th) .endSleep { letter-spacing:0; }