/* Indy Altoona: a kids' detective game that looks like an old terminal. Monospace type, square corners, thin rules,
   no shadows. Light mode is green ink on paper; dark mode is a phosphor-green screen. Phone first: big tap targets,
   one column. Panels with a data-title get a terminal title strip. */
:root{
  --bg:#F3F1EA; --panel:#FBFAF6; --line:#CFCBBE; --ink:#1A1D17; --mute:#6A6C63;
  --accent:#1E7B3C; --accent-ink:#FBFAF6; --accent-soft:#E2EEDF;
  --red:#C2362B; --red-soft:#F6E1DD; --green:#1E7B3C; --amber:#9A6A00; --amber-soft:#F5ECD2;
  --blue:#235FB8; --blue-soft:#E1E9F6;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pixel:"VT323","IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0E0A; --panel:#10140F; --line:#2A3327; --ink:#C9F2C7; --mute:#7E9A7B;
  --accent:#5BF08A; --accent-ink:#0B0E0A; --accent-soft:#132A19;
  --red:#FF6A5C; --red-soft:#2C1513; --green:#5BF08A; --amber:#FFC24A; --amber-soft:#2A2210;
  --blue:#7FB2FF; --blue-soft:#121E30;
}}
:root[data-theme="dark"]{
  --bg:#0B0E0A; --panel:#10140F; --line:#2A3327; --ink:#C9F2C7; --mute:#7E9A7B;
  --accent:#5BF08A; --accent-ink:#0B0E0A; --accent-soft:#132A19;
  --red:#FF6A5C; --red-soft:#2C1513; --green:#5BF08A; --amber:#FFC24A; --amber-soft:#2A2210;
  --blue:#7FB2FF; --blue-soft:#121E30;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--mono);min-height:100vh}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
form{margin:0}
h1,h2,h3{font-family:var(--mono);font-weight:700;margin:0;line-height:1.2;letter-spacing:-.01em}
.wrap{max-width:600px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.mute{color:var(--mute)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:2px}
.panel[data-title]::before{content:attr(data-title);display:block;margin:-1px -1px 0;padding:4px 10px;background:var(--ink);color:var(--bg);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.label{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:26px 0 8px}
.label::before{content:"// "}
.foot{text-align:center;color:var(--mute);font-size:13px;margin-top:40px}
.cursor{display:inline-block;width:.42em;height:.72em;background:var(--accent);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1.5px solid var(--ink);border-radius:2px;padding:13px 16px;
  min-height:52px;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bg);
  text-decoration:none;text-align:center}
.btn::before{content:"> "}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:active{transform:translateY(1px)}
.linkish{background:none;border:0;padding:8px;color:var(--mute);text-decoration:underline;font-size:13px}

/* top bar */
.bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bar .brand{font-family:var(--pixel);font-size:28px;line-height:1;text-decoration:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:2px;padding:6px 10px;font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;background:var(--panel);text-decoration:none;white-space:nowrap;flex:none}
.pill.days{border-color:var(--accent);color:var(--accent)}
.pill.days.low{border-color:var(--red);color:var(--red)}

/* home */
.hero{padding:18px 0 4px}
.hero .prompt{color:var(--accent);font-size:14px}
.hero h1{font-family:var(--pixel);font-weight:400;font-size:72px;line-height:.9;margin-top:8px;letter-spacing:0}
.hero h1 .cursor{vertical-align:baseline;margin-left:6px}
.hero p{margin:12px 0 0;max-width:460px;color:var(--mute)}
.levels{display:grid;gap:12px;margin-top:22px}
.level .body{padding:14px 16px 16px}
.level h2{font-size:20px}
.level p{margin:4px 0 14px;color:var(--mute);font-size:15px}
.resume{margin-top:18px;border-color:var(--accent)}
.resume[data-title]::before{background:var(--accent);color:var(--accent-ink)}
.resume .body{padding:14px 16px 16px}
.resume p{margin:2px 0 12px}
.how{padding:4px 16px}
.how li{padding:10px 0;border-top:1px solid var(--line);list-style:none;display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:15px}
.how li:first-child{border-top:0}
.how ol{margin:0;padding:0}
.how b{color:var(--accent)}
.lineup{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mug{padding:12px}
.mug .face{font-size:30px;line-height:1.1}
.mug h3{font-size:14px;margin-top:6px}
.mug p{margin:4px 0 0;font-size:12px;color:var(--mute);line-height:1.4}

/* the case */
.flash{border:1px solid var(--blue);color:var(--blue);background:var(--blue-soft);border-radius:2px;padding:10px 12px;font-weight:600;
  margin-bottom:12px;font-size:15px}
.flash::before{content:"$ "}
.wanted{border:1.5px solid var(--red);margin-bottom:14px}
.wanted[data-title]::before{background:var(--red);color:#fff}
.wanted .body{padding:14px 16px 16px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center}
.wanted .face{font-size:48px;line-height:1;grid-row:span 2}
.wanted h2{font-size:22px}
.wanted .tagline{color:var(--mute);font-size:13px;margin:0}
.wanted .story{grid-column:1/-1;margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.wanted .story b{color:var(--red)}
.city .body{padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center}
.city .em{font-size:44px;line-height:1;grid-row:span 2}
.city h1{font-size:26px}
.city .where{color:var(--mute);font-size:14px}
.city .fact{grid-column:1/-1;margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:15px}
.city .fact b{color:var(--accent)}
.warmth{margin:12px 0 0;border:1px solid;border-radius:2px;padding:10px 12px;font-weight:600;font-size:15px}
.warmth.hot{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.warmth.cold{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.warmth.lost{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}

.ask{margin-bottom:8px}
.ask summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:56px;cursor:pointer;font-weight:600}
.ask summary::-webkit-details-marker{display:none}
.ask summary .who{font-size:26px;line-height:1}
.ask summary .go{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:4px 10px}
.ask[open] summary .go{display:none}
.ask[open]{border-color:var(--accent)}
.ask .says{margin:0;padding:12px 14px 14px;border-top:1px dashed var(--line);font-size:16px;color:var(--accent)}
.ask .says::before{content:"> "}

.choices{display:grid;gap:8px}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);
  border-radius:2px;padding:10px 12px;min-height:58px}
.choice:hover,.choice:focus-visible{border-color:var(--ink);outline:none}
.choice:active{background:var(--accent-soft)}
.choice .em{font-size:24px;line-height:1}
.choice .nm{font-weight:700;font-size:16px;line-height:1.25}
.choice .st{display:block;font-weight:400;font-size:13px;color:var(--mute)}
.choice .key{margin-left:auto;color:var(--mute);font-size:13px}
.choice.back{border-style:dashed;background:transparent}
.hint{color:var(--mute);font-size:13px;margin:8px 0 0}

.notes{margin-top:10px}
.notes > summary{list-style:none;padding:12px 14px;font-weight:600;cursor:pointer}
.notes > summary::-webkit-details-marker{display:none}
.note{padding:12px 14px;border-top:1px solid var(--line)}
.note h3{font-size:15px}
.note ul{margin:6px 0;padding-left:18px;font-size:14px}
.note .went{font-size:13px;font-weight:600}
.note .went.right{color:var(--green)}
.note .went.wrong{color:var(--red)}

.end .body{padding:18px 16px}
.end .big{font-size:48px;line-height:1}
.end h1{font-size:28px;margin-top:10px}
.end p{margin:8px 0 0}
.end.win{border:1.5px solid var(--green)}
.end.win[data-title]::before{background:var(--green);color:var(--accent-ink)}
.end.lose{border:1.5px solid var(--red)}
.end.lose[data-title]::before{background:var(--red);color:#fff}
.trail{padding:4px 14px}
.trail li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);list-style:none;font-size:15px}
.trail li:first-child{border-top:0}
.trail ol{margin:0;padding:0}
.trail .n{color:var(--mute);font-size:13px;width:22px;flex:none}
.trail .em{font-size:20px}
.trail .ok{margin-left:auto;font-weight:700;color:var(--green)}
.trail .x{margin-left:auto;color:var(--mute);font-size:13px}
.again{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

/* atlas */
.mapbox{overflow:auto;aspect-ratio:975/610;border-radius:2px;background:var(--panel);border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.map{position:relative;width:100%;transition:width .2s}
.map.zoom{width:260%}
.map img{display:block;width:100%;height:auto}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .dot{cursor:pointer}
.map .dot circle,.map .dot path{fill:var(--red);stroke:var(--panel);stroke-width:1.5}
.map .dot .hit{fill:transparent;stroke:none}
.map .dot.cap path{fill:var(--ink)}
.map .dot.on circle,.map .dot.on path{fill:var(--accent);stroke:var(--ink)}
.map .here{fill:none;stroke:var(--blue);stroke-width:3;animation:ping 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}
.maptools{display:flex;gap:8px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.legend{font-size:13px;color:var(--mute);display:flex;gap:12px;flex-wrap:wrap}
.card{position:sticky;bottom:12px;margin-top:12px;border:1.5px solid var(--accent);z-index:2}
.card[data-title]::before{background:var(--accent);color:var(--accent-ink)}
.card .body{padding:12px 14px 14px}
.card h2{font-size:20px}
.card .meta{color:var(--mute);font-size:13px;margin-top:2px}
.card ul{margin:10px 0 0;padding-left:18px;font-size:15px}
.card li{margin:4px 0}
.card .close{position:absolute;right:2px;top:-1px;border:0;background:none;font-size:18px;line-height:1;color:var(--accent-ink);padding:3px 8px}
.states{columns:2;column-gap:16px;padding:12px 14px}
.states .st{break-inside:avoid;margin-bottom:12px}
.states .st b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.states button{display:block;border:0;background:none;padding:3px 0;text-align:left;font-size:15px;color:var(--ink);min-height:30px}
.states button:hover{text-decoration:underline}
@media (max-width:360px){.lineup{grid-template-columns:1fr}.states{columns:1}.hero h1{font-size:60px}}