/* CROSSROADS — one stylesheet, no framework, no build step.
 *
 * The page is one column pinned to the VISIBLE viewport (--vvh, set by
 * game.js from visualViewport): the road on top takes whatever height is left,
 * so when a phone keyboard comes up the sky shrinks and Scout, the road, the
 * question and the answer box all stay on screen without scrolling.
 */

:root{
  --bg:#15121a; --dash:#231f2e; --dash2:#2e2940; --line:#3a3450;
  --ink:#f6eedb; --mute:#a59fbd; --dim:#6f6889;
  --cream:#f3e6c4; --orange:#e2703a; --orange-d:#b3522b; --green:#5cc15a;
  --pix:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%; overflow:hidden; background:var(--bg); color:var(--ink);
  font:17px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none; -webkit-text-size-adjust:100%;
}
body{
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

#app{
  position:fixed; left:0; right:0; top:0; margin:0 auto;
  width:100%; max-width:440px;
  height:var(--vvh,100dvh); transform:translateY(var(--vvtop,0px));
  display:flex; flex-direction:column; overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
/* On a big screen it is a phone-shaped card, not a stretched page. */
@media (min-width:520px) and (min-height:700px){
  #app{ top:20px; height:min(calc(var(--vvh,100dvh) - 40px), 900px); border:2px solid var(--line); border-radius:18px; }
}

/* ---------- the road ---------- */
#stage{flex:1 1 auto; min-height:120px; position:relative; overflow:hidden; background:#9fd8f6}
#scene{position:absolute; left:0; bottom:0; image-rendering:pixelated; image-rendering:crisp-edges}

/* ---------- the dashboard ---------- */
#dash{
  flex:none; display:flex; align-items:center; gap:10px; height:58px; padding:0 12px;
  background:var(--dash); border-top:3px solid #0c0a10; border-bottom:3px solid #0c0a10;
  box-shadow:inset 0 2px 0 var(--dash2);
}
#gauge{width:88px; height:42px; image-rendering:pixelated; image-rendering:crisp-edges; flex:none}
.odo{
  font:800 22px/1 var(--pix); letter-spacing:.06em; font-variant-numeric:tabular-nums;
  background:#0c0a10; color:#ffe58a; padding:6px 8px 5px; border-radius:4px; border:2px solid #3a3450;
  min-width:94px; text-align:right;
}
.odo small{font-size:11px; color:var(--mute); margin-left:4px; letter-spacing:.1em}
.stop{flex:1; text-align:right; font:700 15px/1.1 var(--pix); color:var(--cream); letter-spacing:.05em}
.stop small{display:block; font-size:10px; color:var(--mute); letter-spacing:.14em}
#app[data-screen="start"] .stop{visibility:hidden}
.iconbtn{
  flex:none; width:40px; height:40px; border-radius:8px; border:2px solid var(--line);
  background:var(--dash2); font-size:19px; line-height:1; cursor:pointer;
}
.iconbtn.off{color:var(--dim); text-decoration:line-through; text-decoration-thickness:2px}

/* ---------- the lower panel: one thing at a time ---------- */
.panel{display:none; flex:none; flex-direction:column; justify-content:flex-start; gap:10px; padding:14px 16px 16px}
#app[data-screen="start"] #start,
#app[data-screen="ask"] #ask,
#app[data-screen="reveal"] #ask,
#app[data-screen="result"] #result{display:flex}

.btn{
  display:block; width:100%; min-height:56px; border:0; border-radius:10px; cursor:pointer;
  background:var(--orange); color:#1b1210; font:900 19px/1 var(--pix); letter-spacing:.08em;
  box-shadow:0 5px 0 var(--orange-d); transform:translateY(0);
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--orange-d)}
.btn:focus-visible{outline:3px solid #ffe58a; outline-offset:3px}

/* back to the games dashboard this is served under: on the start screen and the postcard, never mid-question */
.games{align-self:flex-start; color:var(--mute); font:700 14px/1 var(--pix); letter-spacing:.06em; text-decoration:none; padding:8px 10px; margin:-6px 0 -4px -10px; border-radius:6px}
.games:active,.games:focus-visible{color:var(--ink); background:var(--dash)}
.logo{font:900 34px/1 var(--pix); letter-spacing:.1em; color:var(--cream); text-align:center}
.tag{text-align:center; color:var(--mute); font:600 14px/1 var(--pix); letter-spacing:.12em; margin-top:-4px}
.rules{text-align:center; color:var(--ink); font-size:16px; line-height:1.5}
.rules em{font-style:normal; color:#ffc93c; font-weight:800}
.startmsg{text-align:center; color:var(--mute); font-size:14px; min-height:0}
.startmsg:empty{display:none}

.q{font:800 27px/1.18 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.01em; text-wrap:balance; min-height:1.2em}
#form{display:flex; gap:8px}
#answer{
  flex:1; min-width:0; height:58px; padding:0 14px; border-radius:10px;
  border:3px solid var(--line); background:#0c0a10; color:var(--ink);
  font:700 21px/1 ui-sans-serif,system-ui,sans-serif; -webkit-user-select:text; user-select:text;
}
#answer::placeholder{color:var(--dim); font-weight:600}
#answer:focus{outline:none; border-color:#ffc93c}
#answer.nudge{animation:nudge 260ms ease-out}
@keyframes nudge{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}100%{transform:none}}
.go{width:96px; flex:none}
.msg{min-height:1.4em; color:#ffc93c; font-size:15px; font-weight:600}
.said{display:none}
/* while the reveal plays, the question stays put and the controls step aside */
#app[data-screen="reveal"] #form{visibility:hidden}
#app[data-screen="reveal"] .q{opacity:.55}
#app[data-screen="reveal"] .msg{visibility:hidden}

#result{gap:6px}
.rword{font:800 27px/1.1 ui-sans-serif,system-ui,sans-serif}
.rline{font:900 17px/1.2 var(--pix); letter-spacing:.06em}
.rline span{color:#ffe58a; margin-left:6px}
.rwhy{color:var(--mute); font-size:15px; line-height:1.35}
.rwhy:empty{display:none}
.rjournal{color:#ffc93c; font-weight:700; font-size:15px}
#result .btn{margin-top:6px}

/* ---------- the postcard ---------- */
#postcard{
  display:none; position:absolute; inset:0; z-index:5; overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); padding:18px 16px calc(24px + env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; gap:6px;
  -webkit-user-select:text; user-select:text;
}
#app[data-screen="card"] #postcard{display:flex}
#postcard > *{flex-shrink:0}
#card{
  width:100%; aspect-ratio:160/110; image-rendering:pixelated; image-rendering:crisp-edges;
  border-radius:4px; box-shadow:0 10px 30px rgba(0,0,0,.5); transform:rotate(-1.2deg); margin-bottom:10px;
}
#card.stamped{animation:thunk 280ms cubic-bezier(.2,1.6,.4,1)}
@keyframes thunk{0%{transform:rotate(-1.2deg) scale(1.03)}100%{transform:rotate(-1.2deg) scale(1)}}
.travelled{text-align:center; color:var(--mute); font:700 12px/1 var(--pix); letter-spacing:.16em; text-transform:uppercase}
.bigkm{text-align:center; font:900 44px/1 var(--pix); color:#ffe58a; letter-spacing:.04em}
.tiers{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:6px 0 4px; font-size:15px; color:var(--mute)}
.tiers b{color:var(--c,var(--ink)); font:900 17px var(--pix)}
.facts{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:8px 0 2px; font-size:15px}
.facts dt{color:var(--mute); font:700 11px/1.9 var(--pix); letter-spacing:.12em; text-transform:uppercase}
.facts dd{font-weight:700}
.journal{color:var(--dim); font-size:13px; margin-bottom:10px}
.sharemsg{min-height:1.3em; text-align:center; color:#ffc93c; font-size:14px}
#sharetext{width:100%; background:#0c0a10; border:2px solid var(--line); border-radius:8px; padding:10px; font:14px/1.4 var(--pix); color:var(--ink); -webkit-user-select:text; user-select:text}
#postcard h3{margin-top:12px; font:800 12px/1 var(--pix); letter-spacing:.16em; color:var(--mute)}
.last7{list-style:none; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px}
.last7 li{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; border-radius:6px; background:var(--dash); font-size:12px}
.last7 li span{color:var(--mute); font:700 11px var(--pix)}
.last7 li b{font:800 11px var(--pix); color:var(--ink); white-space:nowrap}
.last7 li.today{outline:2px solid #ffc93c}
.tomorrow{text-align:center; color:var(--dim); font-size:13px; margin-top:12px}
/* play again: a practice trip, teal so it never reads as today's trip */
.btn.again{margin-top:10px; background:#4fd6c8; box-shadow:0 5px 0 #2f9c91}
.btn.again:active{box-shadow:0 1px 0 #2f9c91}
.againnote{text-align:center; color:var(--dim); font-size:13px; margin-top:6px}
#app[data-practice] .stop small,#app[data-practice] .travelled{color:#4fd6c8}

/* short screens and phones with the keyboard up: keep every control, lose some air */
@media (max-height:560px){
  .panel{padding:8px 14px 10px; gap:6px}
  .q{font-size:22px}
  #dash{height:48px}
  #gauge{width:73px; height:35px}
  .odo{font-size:18px; min-width:80px}
  /* back to the games dashboard this is served under: on the start screen and the postcard, never mid-question */
.games{align-self:flex-start; color:var(--mute); font:700 14px/1 var(--pix); letter-spacing:.06em; text-decoration:none; padding:8px 10px; margin:-6px 0 -4px -10px; border-radius:6px}
.games:active,.games:focus-visible{color:var(--ink); background:var(--dash)}
.logo{font-size:28px}
  .rules{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none}
  #answer.nudge,#card.stamped{animation:none}
}