:root { --gold:#ffd23f; --riku:#f2a541; --night:#0e1a2b; --signal:#ff2e63; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#07040f; color:#f4f4f2;
  font:500 16px/1.4 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-user-select:none; user-select:none; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.vignette { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(255,30,90,.55) 100%); }
body.hooked .vignette { opacity:1; animation:throb .5s ease-in-out infinite; }
@keyframes throb { 50% { opacity:.7; } }

.hud { position:fixed; left:0; right:0; top:0; padding:max(12px,env(safe-area-inset-top)) 16px 0; display:flex; gap:14px; align-items:flex-start; z-index:3; pointer-events:none; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.hud[hidden] { display:none; }
.dist { position:relative; display:flex; align-items:baseline; gap:4px; }
.dist b { font:900 44px/1 system-ui,sans-serif; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.dist span { font:800 16px system-ui; opacity:.8; }
.dist em { font:700 11px ui-monospace,monospace; letter-spacing:.16em; font-style:normal; opacity:.75; margin-left:6px; }
.plus { position:absolute; left:0; top:46px; font:900 16px ui-monospace,monospace; font-style:normal; color:var(--signal); opacity:0; }
.plus.show { animation:plus .8s ease-out; }
@keyframes plus { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(14px); } }
.gave { margin-top:6px; font:700 12px ui-monospace,monospace; letter-spacing:.1em; opacity:.8; }
.gave b { font-size:15px; }
body.hooked .gave { color:var(--signal); opacity:1; }
.mute { margin-left:auto; pointer-events:auto; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); color:#fff; font-size:16px; }
.whisper { position:fixed; left:16px; right:16px; top:calc(max(12px,env(safe-area-inset-top)) + 64px); z-index:3; margin:0; text-align:center; pointer-events:none;
  font:800 13px/1.4 ui-monospace,monospace; letter-spacing:.06em; color:#ff5c85; text-shadow:0 2px 14px rgba(0,0,0,.9); min-height:1.4em; }
.hint { position:fixed; left:50%; bottom:max(28px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:3; pointer-events:none;
  padding:10px 16px; border-radius:99px; background:rgba(0,0,0,.45); font:700 13px system-ui,"Hiragino Sans",sans-serif; white-space:nowrap; animation:breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity:.55; } }

.overlay { position:fixed; inset:0; z-index:10; overflow:auto; padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); }
.overlay[hidden] { display:none; }
.intro { display:grid; align-content:end; gap:8px; background:linear-gradient(180deg,rgba(7,4,15,0) 0%,rgba(7,4,15,.55) 45%,rgba(7,4,15,.95) 100%); }
.kicker { margin:0; font:700 12px ui-monospace,monospace; letter-spacing:.16em; color:#ff5c85; }
.intro h1 { margin:4px 0; font:900 clamp(48px,16vw,92px)/.88 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.04em;
  background:linear-gradient(90deg,#ff2e63,#ffd23f,#4cc9f0); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(255,46,99,.45)); }
.sub { margin:0; font:700 19px/1.35 system-ui,"Hiragino Sans",sans-serif; }
.rule { margin:6px 0 0; font:800 15px/1.4 ui-monospace,monospace; color:var(--gold); }
.how { margin:2px 0 12px; opacity:.75; font-size:14px; }
.startBtn { justify-self:start; padding:18px 28px; border:0; border-radius:999px; background:#f4f4f2; color:#07040f; font:900 18px system-ui,"Hiragino Sans",sans-serif; box-shadow:0 0 40px rgba(255,210,63,.35); }
.startBtn:active { transform:scale(.97); }
.privacy { margin:8px 0 0; font-size:12px; opacity:.6; }

.end { background:radial-gradient(ellipse at 50% 20%,rgba(30,60,40,.55),rgba(5,8,10,.92) 70%); animation:fade 2s ease both; }
@keyframes fade { from { opacity:0; } }
.end h2 { margin:6px 0 10px; font:900 clamp(44px,14vw,72px)/.92 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.03em; }
.took { margin:0 0 18px; font:800 20px/1.3 system-ui,"Hiragino Sans",sans-serif; color:var(--riku); }
.learnedLabel { margin:0 0 8px; font:700 12px ui-monospace,monospace; letter-spacing:.14em; color:#ff5c85; text-transform:uppercase; }
.findings { margin:0 0 16px; padding:0; list-style:none; display:grid; gap:10px; }
.findings li { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.07); border-left:3px solid #ff5c85; font:600 16px/1.4 system-ui,"Hiragino Sans",sans-serif; animation:rise .6s ease both; }
.findings li:nth-child(2) { animation-delay:.5s; } .findings li:nth-child(3) { animation-delay:1s; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.moral { margin:4px 0 14px; font:800 19px/1.35 system-ui,"Hiragino Sans",sans-serif; }
.riku { margin:0 0 16px; padding:14px; border-radius:12px; background:rgba(242,165,65,.1); border:1px solid rgba(242,165,65,.4); }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.primary, .ghostBtn { padding:14px 18px; border-radius:999px; font:800 15px system-ui,"Hiragino Sans",sans-serif; }
.primary { background:#f4efe6; color:#07040f; border:0; }
.ghostBtn { background:none; color:#f4efe6; border:2px solid #f4efe6; }
.door { display:inline-block; margin-top:14px; padding:14px 18px; border-radius:999px; background:var(--riku); color:var(--night); font:800 15px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Where your gaze is: a small dot; it turns red and grows when a screen has you. */
.reticle { position:fixed; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; z-index:2; pointer-events:none;
  border:2px solid rgba(255,255,255,.75); box-shadow:0 0 8px rgba(0,0,0,.6); transition:transform .2s, border-color .2s, background .2s; }
body.hooked .reticle { transform:scale(2.2); border-color:#ff2e63; background:rgba(255,46,99,.35); }
body:not(.playing) .reticle { display:none; }
.bootfail { z-index:20; background:#07040f; display:grid; align-content:center; gap:12px; }
.bootfail h2 { margin:0; font:900 40px system-ui; }
.bootfail p { font:700 18px/1.4 system-ui,"Hiragino Sans",sans-serif; margin:0; }
.bootfail code { font:11px ui-monospace,monospace; opacity:.5; word-break:break-all; }

/* ── v2: zones ── */
.zone { position:fixed; left:18px; right:18px; top:30%; z-index:4; pointer-events:none; text-align:center; }
.zone[hidden] { display:none; }
.zone h2 { margin:0; font:900 clamp(40px,13vw,78px)/.9 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.03em; color:#fff;
  text-shadow:0 0 30px rgba(255,46,99,.8),0 4px 30px rgba(0,0,0,.8); }
.zone p { margin:12px auto 0; max-width:20em; font:800 15px/1.4 ui-monospace,monospace; color:var(--gold); text-shadow:0 2px 12px #000; }
.zone.show { animation:zonein 3.8s ease both; }
@keyframes zonein { 0% { opacity:0; transform:scale(1.4); filter:blur(8px); } 12% { opacity:1; transform:scale(1); filter:blur(0); } 80% { opacity:1; } 100% { opacity:0; transform:translateY(-20px); } }
.youWrap { position:fixed; right:16px; top:calc(max(12px,env(safe-area-inset-top)) + 54px); z-index:3; pointer-events:none; }
.youWrap[hidden] { display:none; }
.youWrap b { display:inline-block; transform-origin:top right; padding:6px 12px; border-radius:99px; background:rgba(255,255,255,.14); font:900 20px system-ui; transition:transform .2s; }
body.comparing .youWrap b { background:rgba(255,46,99,.35); }
body.comparing .vignette { opacity:.6; background:radial-gradient(ellipse at center,transparent 40%,rgba(40,20,80,.7) 100%); }
.eyesBtn { position:fixed; left:50%; bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px)); transform:translateX(-50%); z-index:6; padding:16px 22px; border-radius:99px;
  border:2px solid rgba(255,255,255,.7); background:rgba(0,0,0,.55); color:#fff; font:900 14px ui-monospace,monospace; letter-spacing:.06em; white-space:nowrap; touch-action:none; animation:breathe 2s ease-in-out infinite; }
.eyesBtn[hidden] { display:none; }
.eyesVeil { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .6s; background:radial-gradient(ellipse at center,rgba(0,0,0,.86),#000 70%);
  display:grid; place-items:center; }
.eyesVeil span { font:700 13px ui-monospace,monospace; letter-spacing:.12em; color:rgba(255,255,255,.5); }
body.eyes .eyesVeil { opacity:1; }
body.eyes .eyesBtn { background:#fff; color:#000; animation:none; }

/* Codex visual QA: a calm, useful fallback and tactile controls. */
.bootfail { background:radial-gradient(ellipse at 50% 42%,#171126 0%,#07040f 68%); padding:24px; }
.bootfail h2 { color:#f4f4f2; letter-spacing:-.04em; text-shadow:0 0 28px rgba(255,46,99,.32); }
.bootfail p { max-width:22em; color:#f4f4f2; }
.bootfail code { display:none; }
.startBtn,.primary,.ghostBtn,.door { transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.startBtn:hover,.primary:hover,.door:hover { filter:brightness(1.08); transform:translateY(-2px); }
.startBtn:focus-visible,.primary:focus-visible,.ghostBtn:focus-visible,.door:focus-visible { outline:3px solid #ffd23f; outline-offset:4px; }

/* SK-2 · the friend's light, in the HUD: how far ahead (+) or behind (−) their walk is */
.ghostHud { margin-top:8px; padding:3px 8px; border-radius:8px; background:rgba(40,26,6,.6); border:1px solid rgba(255,196,90,.7); color:#ffd27a; font:800 11px ui-monospace,Menlo,"Hiragino Sans","Noto Sans Thai","Apple SD Gothic Neo",monospace; letter-spacing:.08em; white-space:nowrap; }
.ghostHud[hidden] { display:none; }
:lang(th) .ghostHud, :lang(th) .kicker, :lang(th) .dist em, :lang(th) .gave { letter-spacing:0; }
.ghostDot { position:fixed; left:0; top:0; z-index:2; border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, #fff4d8 0 14%, #ffc45a 30%, rgba(255,160,40,.35) 55%, rgba(255,160,40,0) 72%); filter:drop-shadow(0 0 10px rgba(255,180,70,.9)); }
.ghostDot[hidden] { display:none; }