/* Layout: one phone-sized column — trip HUD on top, story in the middle, thumb-reach choices at the bottom. Night-road look, dark only by choice. */
:root{
  --night:#0a0d0f; --asphalt:#141a1d; --line:#263034; --fog:#d6dbcf; --dim:#859086;
  --lamp:#e9b44c; --blood:#c8442f; --moss:#88ab8f; --ink:#0a0d0f;
  --display:"Chonburi","Sarabun",serif; --body:"Sarabun",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%; margin:0}
body{
  background:radial-gradient(ellipse 90% 45% at 50% 108%, rgba(233,180,76,.10), transparent 70%), var(--night);
  color:var(--fog); font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
.app{
  max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; gap:20px;
  padding-top:max(16px,env(safe-area-inset-top,0px)); padding-bottom:max(24px,env(safe-area-inset-bottom,0px));
}

/* HUD */
.hud{display:grid; gap:8px; padding:10px 12px; background:var(--asphalt); border:1px solid var(--line); border-radius:12px}
.hud-top{display:flex; align-items:center; gap:12px}
.road{flex:1; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dim); min-width:0}
.track{position:relative; flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--dim) 0 8px,transparent 8px 16px)}
.car{position:absolute; top:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--lamp); transform:translateY(-50%); box-shadow:0 0 14px 4px rgba(233,180,76,.45); transition:left .8s ease}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stat{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:13px; min-width:0}
.stat .lbl{color:var(--dim)}
.bar{height:6px; background:var(--line); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--moss); transition:width .6s ease, background .6s}
.bar i.low{background:var(--blood)}
.stat b,.meta{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums}
.stat b{font-size:13px; min-width:2.2em; text-align:right}
.meta{display:flex; justify-content:space-between; font-size:13px; color:var(--dim)}
.meta .clock{color:var(--lamp)}
.bag{display:flex; flex-wrap:wrap; gap:6px; font-size:13px}
.bag:empty{display:none}
.chip{padding:2px 10px; border:1px solid var(--line); border-radius:999px; color:var(--fog)}

/* Scene */
.scene{flex:1; display:flex; flex-direction:column; gap:14px; transition:opacity .5s, filter .5s}
.scene.hush{opacity:.18; filter:blur(1.5px)}
.eyebrow{font-size:12px; letter-spacing:.12em; color:var(--lamp); font-family:var(--mono); margin:0}
h1,h2{font-family:var(--display); font-weight:400; line-height:1.35; text-wrap:balance; margin:0}
h1{font-size:44px; text-shadow:0 0 24px rgba(214,219,207,.18)}
h2{font-size:26px}
.story{margin:0; min-height:6.8em; max-width:62ch; white-space:pre-line}
.lead{margin:0; color:var(--dim)}
.route{font-family:var(--mono); font-size:13px; color:var(--lamp); margin:0}
.panel{display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; font-size:15px}
.panel p{margin:0; color:var(--dim)}
.toggle{display:flex; align-items:center; gap:10px; cursor:pointer}
.toggle input{width:20px; height:20px; accent-color:var(--lamp)}
.tap{font-size:12px; color:var(--dim); margin:0}

.choices{display:grid; gap:10px; margin-top:auto}
.choices.fade{animation:rise .35s ease both}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.btn{font:inherit; color:var(--fog); text-align:left; padding:14px 16px; min-height:52px; background:var(--asphalt); border:1px solid var(--line); border-radius:10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; touch-action:manipulation}
.btn:hover{border-color:var(--dim)}
.btn:active{transform:scale(.99)}
.btn:focus-visible{outline:2px solid var(--lamp); outline-offset:2px}
.btn .need{font-size:12px; color:var(--lamp); white-space:nowrap}
.btn.primary{background:var(--lamp); color:var(--ink); border-color:var(--lamp); font-weight:600; justify-content:center}
.btn.quiet{justify-content:center; color:var(--dim)}
.deltas{display:flex; flex-wrap:wrap; gap:6px; font-family:var(--mono); font-size:13px}
.deltas .chip.bad{border-color:var(--blood); color:var(--blood)}
.deltas .chip.good{border-color:var(--moss); color:var(--moss)}
.picked{margin:0; font-size:14px; color:var(--dim)}
.endcount{font-family:var(--mono); font-size:13px; color:var(--dim); margin:0}
.end-title.bad{color:var(--blood)}

/* Endings gallery */
.gallery{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.gallery li{display:grid; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--asphalt)}
.gallery b{font-family:var(--display); font-weight:400; font-size:17px}
.gallery li.bad b{color:var(--blood)}
.gallery li.locked b{color:var(--dim)}
.gallery span{font-size:14px; color:var(--dim)}

/* Focus: darkness at the edges (thicker as sanity drops), HUD fades while reading */
.veil{position:fixed; inset:0; z-index:50; pointer-events:none;
  background:radial-gradient(ellipse 130% 105% at 50% 40%, transparent 45%, rgba(0,0,0,var(--veil,.35)) 100%)}
.hud{transition:opacity .6s}
body.reading .hud{opacity:.3}
.story{font-size:18px; line-height:1.85}
.app.flicker{animation:flicker 7s steps(1) infinite}
@keyframes flicker{0%,100%{filter:none}23%{filter:brightness(.55)}24%{filter:none}61%{filter:brightness(.7)}61.6%{filter:none}62.4%{filter:brightness(.5)}63%{filter:none}}
/* Windshield view; a look moment pushes the camera in on --fx */
.shield{overflow:hidden; border-radius:12px; border:1px solid var(--line); background:#000; flex:none}
.shield canvas{display:block; width:100%; aspect-ratio:2/1; transform-origin:var(--fx,50% 50%); transition:transform 1.2s ease-out}
.shield.focus canvas{transform:scale(2.1); transition:transform 6s cubic-bezier(.3,0,.5,1)}
.look-cap{margin:0; font-size:16px; color:var(--fog)}
.look-cap.hit{color:var(--blood)}
.look-cap.miss{color:var(--dim)}
.ambush{display:grid; gap:8px; justify-items:start; padding:12px 14px; border:1px solid var(--blood); border-radius:10px; font-size:15px; animation:rise .3s ease both}
.ambush p{margin:0}

/* Drive screen: windshield, time controls, driving options, the scrolling log, and the decision card */
.drive{display:flex; flex-direction:column; gap:10px; flex:1}
.timebar{display:flex; align-items:center; gap:8px}
.timebar #mult{flex:1}
.drivesum{margin:-2px 0 0; font-size:12px; color:var(--dim)}
#setup .controls{grid-template-columns:1fr}
#setup h2{font-size:22px}
.seg{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--asphalt)}
.seg button{flex:1; font:inherit; font-size:13px; color:var(--dim); background:none; border:0; padding:6px 10px; min-height:36px; cursor:pointer; touch-action:manipulation; font-family:var(--body)}
.seg button.on{background:var(--lamp); color:var(--ink); font-weight:600}
.seg button:focus-visible,.pill:focus-visible,.restbtn:focus-visible{outline:2px solid var(--lamp); outline-offset:-2px}
#mult button{font-family:var(--mono); min-width:44px}
.pill{font:inherit; font-size:13px; color:var(--fog); background:var(--asphalt); border:1px solid var(--line); border-radius:999px; padding:6px 14px; min-height:36px; cursor:pointer}
.pill.on{background:var(--lamp); color:var(--ink); border-color:var(--lamp); font-weight:600}
.paused{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--lamp); border-radius:12px; font-size:14px}
.paused span{flex:1 1 100%; color:var(--lamp)}
.controls{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px}
.ctl{display:grid; gap:4px; min-width:0; font-size:12px; color:var(--dim)}
.log{height:clamp(220px, 46vh, 560px); overflow-y:auto; display:flex; flex-direction:column; gap:7px;
  padding:10px 12px; background:var(--asphalt); border:1px solid var(--line); border-radius:12px; font-size:15px; line-height:1.55}
.ln{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 10px; animation:rise .4s ease both}
.ln time{font-family:var(--mono); font-size:12px; color:var(--dim); padding-top:2px}
.ln span{min-width:0}
.ln.event span{color:var(--lamp); font-weight:600}
.ln.scare span{color:var(--blood)}
.ln.warn span{color:var(--lamp)}
.ln.setting span,.ln.thought span,.ln.radio span{color:var(--dim)}
.ln.choice span{color:var(--fog)}
.restbtn{grid-column:2; justify-self:start; font:inherit; font-size:13px; padding:4px 14px; min-height:32px; border:1px solid var(--lamp); color:var(--lamp); background:none; border-radius:999px; cursor:pointer}
.restbtn:disabled{opacity:.3; cursor:default}
.card{display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--asphalt)}
/* The decision card is a pop-up over the drive screen */
#card,#setup{position:fixed; z-index:80; left:50%; transform:translateX(-50%); width:min(520px, calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))));
  bottom:max(16px, env(safe-area-inset-bottom, 0px)); max-height:min(78vh, calc(100% - 32px)); overflow-y:auto;
  box-shadow:0 18px 60px rgba(0,0,0,.7); animation:popup .35s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes popup{from{opacity:0; transform:translate(-50%, 24px) scale(.97)}to{opacity:1; transform:translate(-50%, 0)}}
.backdrop{position:fixed; inset:0; z-index:79; background:rgba(0,0,0,.6); animation:fadein .3s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* The text the player reads sits above the dark-edge veil; only the scenery gets darkened. */
.log,.card{position:relative; z-index:60}
.card .story{min-height:0}
body.doze .shield,body.doze .log{filter:brightness(.06) blur(3px); transition:filter 1.4s ease-in}
.album-title{font-family:var(--display); font-weight:400; font-size:20px; margin:16px 0 0}
.album{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.album figure{margin:0; display:grid; gap:6px; min-width:0}
.album img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block}
.album figcaption{display:grid; gap:2px; font-size:12px; color:var(--dim)}
.album b{color:var(--fog); font-size:13px; font-weight:600}
.album time{font-family:var(--mono)}

/* Crash: a hard shake, and a blackout for one that ends the trip */
.app.crash{animation:crash .7s cubic-bezier(.3,.9,.4,1)}
@keyframes crash{0%{transform:none}10%{transform:translate(-14px,8px) rotate(-1.5deg)}25%{transform:translate(12px,-10px) rotate(1.2deg)}45%{transform:translate(-8px,6px) rotate(-.6deg)}70%{transform:translate(4px,-2px)}100%{transform:none}}
body.blackout .app{filter:brightness(0); transition:filter 1.6s ease-in}

/* Jump scare */
.scare{position:fixed; inset:0; z-index:100; background:#000}
.scare canvas{display:block; width:100%; height:100%}
.scare.shake{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:translate(0,0) scale(1.04)}25%{transform:translate(-10px,6px) scale(1.06)}50%{transform:translate(8px,-8px) scale(1.04)}75%{transform:translate(-6px,-4px) scale(1.07)}100%{transform:translate(0,0) scale(1.04)}}

@media (prefers-reduced-motion:reduce){.choices.fade,.ambush,.ln,.app.crash,#card,.backdrop{animation:none}body.doze .shield,body.doze .log{transition:none}.car,.bar i,.scene,.hud,.shield canvas,.shield.focus canvas{transition:none}}
@media (max-width:380px){h1{font-size:36px}.stats{grid-template-columns:1fr}}