:root{
  --bg:#070a07;
  --phos:#3bf07a;
  --phos-dim:#1f8a44;
  --phos-faint:#0f3d22;
  --glow:rgba(59,240,122,.55);
  --amber:#ffb000;
  --danger:#ff5d5d;
  --td-magenta:#ff6a3d; /* sunset red-orange; the name stays so old styles still apply */
  --td-cyan:#33e0ff;
  --td-orange:#ff7a1a;
  --td-purple:#a855f7;
  --td-yellow:#ffe14d;
}
/* ---- accessibility: phosphor themes, readable font, contrast, motion, reader ---- */
body.theme-amber{ --phos:#ffc24d; --phos-dim:#b57f10; --phos-faint:#3d2a05; --glow:rgba(255,176,0,.5) }
body.theme-cyan{ --phos:#57e6ff; --phos-dim:#1f8aa8; --phos-faint:#0d3540; --glow:rgba(51,224,255,.5) }
body.theme-white{ --phos:#e9f2e9; --phos-dim:#9fb0a0; --phos-faint:#39423a; --glow:rgba(220,240,220,.35) }
body.readable-font{ font-family:'Atkinson Hyperlegible','Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;letter-spacing:0;line-height:1.35 }
body.readable-font .choice,body.readable-font .btn,body.readable-font button.btn,body.readable-font .tile,
body.readable-font input,body.readable-font h3{ letter-spacing:0 }
/* Text size: `zoom` (not `transform`) so it scales real layout -- including every
   element's explicit px font-size -- and scrolling/wrapping stay correct, instead
   of only growing the handful of elements that inherit body's own font-size. */
body.text-large{ zoom:1.18 }
body.text-xl{ zoom:1.35 }
body.high-contrast{ --phos:#eafff0; --phos-dim:#c4ecce; --phos-faint:#61715f; --glow:transparent; background:#000 }
body.high-contrast *{ text-shadow:none !important }
body.high-contrast .crt::before,body.high-contrast .crt::after{ display:none }
body.high-contrast .box,body.high-contrast .vendor,body.high-contrast .shakecard,body.high-contrast .status,
body.high-contrast .btn,body.high-contrast button.btn,body.high-contrast .choice,body.high-contrast .tile{ border-color:var(--phos) }
body.high-contrast .dim,body.high-contrast .idesc,body.high-contrast small,body.high-contrast .vendor small{ color:var(--phos-dim) }
body.no-motion *,body.no-motion *::before,body.no-motion *::after{ animation:none !important;transition:none !important }
body.sr-mode pre.bears,body.sr-mode .td-word,body.sr-mode .edition2,body.sr-mode .drivescene,
body.sr-mode pre.vanart,body.sr-mode .wordmark pre,body.sr-mode .role-portrait{ display:none !important }
body.sr-mode #trailmap,body.sr-mode #musicbox{ box-shadow:none }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);}
body{
  font-family:'VT323',monospace;
  color:var(--phos);
  font-size:22px;
  line-height:1.15;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}
.crt{
  position:relative;
  flex:1;
  margin:0 auto;
  width:100%;
  max-width:960px;
  padding:24px 30px 40px;
  text-shadow:0 0 6px var(--glow);
}
.crt::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:51;
  background:rgba(59,240,122,.015);
  animation:flick 6s infinite steps(30);
}
@keyframes flick{0%,97%{opacity:.5}98%{opacity:0}99%{opacity:.7}100%{opacity:.4}}
@media (prefers-reduced-motion: reduce){
  .crt::after{animation:none}
  .blink{animation:none}
  .td-word{animation:none}
  .melt{animation:none}
}

a{color:var(--td-cyan)}
.dim{color:var(--phos-dim)}
.amber{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.danger{color:var(--danger);text-shadow:0 0 6px rgba(255,93,93,.5)}
.cyan{color:var(--td-cyan)}
.blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.center{text-align:center}
h1,h2,h3{font-weight:400;margin:.2em 0}
h2{font-size:30px}
h3{color:var(--phos-dim);letter-spacing:2px;text-transform:uppercase;font-size:19px}
p{margin:.5em 0}
hr{border:none;border-top:1px solid var(--phos-faint);margin:14px 0}
.small{font-size:18px}

/* ASCII-art wordmark */
.td-word{white-space:pre;display:inline-block;
  font-family:'DejaVu Sans Mono','Liberation Mono','Menlo','Consolas',monospace;
  font-size:22px;line-height:.92;letter-spacing:0;margin:2px 0 8px;
  background:linear-gradient(100deg,#3bf07a 0%,#33e0ff 20%,#a855f7 40%,#ff6a3d 58%,#ffd21a 78%,#3bf07a 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:swirl 8s linear infinite;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.35)) drop-shadow(0 0 5px rgba(51,224,255,.4));}
@media (max-width:760px){ .td-word{font-size:12px} }
@media (max-width:470px){ .td-word{font-size:8px} }
@keyframes swirl{to{background-position:300% 0}}

/* the big "2" that turns the wordmark into TERRAPIN TRAIL 2 */
.wordmark{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap}
.edition2{font-family:'DejaVu Sans Mono','Liberation Mono','Menlo','Consolas',monospace;
  font-size:96px;line-height:1;font-weight:700;
  background:linear-gradient(100deg,#3bf07a 0%,#33e0ff 20%,#a855f7 40%,#ff6a3d 58%,#ffd21a 78%,#3bf07a 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:swirl 8s linear infinite;
  filter:drop-shadow(0 0 12px rgba(255,106,61,.4)) drop-shadow(0 0 6px rgba(51,224,255,.4));}
@media (max-width:760px){ .edition2{font-size:54px} }
@media (max-width:470px){ .edition2{font-size:38px} }

/* home-screen menu as a grid of buttons/tiles */
.titlemenu{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;
  max-width:640px;margin:14px auto}
.tile{display:block;width:100%;text-align:center;font-family:inherit;font-size:21px;
  border:1px solid var(--phos-dim);background:transparent;color:var(--phos);padding:14px 12px;cursor:pointer;
  text-shadow:0 0 6px rgba(59,240,122,.4)}
.tile:hover:not(:disabled){background:var(--phos);color:var(--bg);text-shadow:none;border-color:var(--phos)}
.tile.primary{border-color:var(--amber);color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.tile.primary:hover:not(:disabled){background:var(--amber);color:var(--bg);text-shadow:none}
@media (max-width:600px){ .titlemenu{grid-template-columns:1fr;gap:8px} .tile{padding:12px} }

/* dancing bears */
.b1{color:#ff5555;text-shadow:0 0 7px rgba(255,85,85,.5)}
.b2{color:#ff8a2b;text-shadow:0 0 7px rgba(255,138,43,.5)}
.b3{color:#ffd21a;text-shadow:0 0 7px rgba(255,210,26,.5)}
.b4{color:#3bf07a;text-shadow:0 0 7px rgba(59,240,122,.5)}
.b5{color:#5aa0ff;text-shadow:0 0 7px rgba(90,160,255,.5)}
.bears{white-space:pre;font-size:19px;line-height:.98;margin:12px 0 4px}
.bears.big{font-size:30px;line-height:.9;display:inline-block;text-align:left;margin:18px 0}
.bears.mini{font-size:13px;line-height:.95;margin:8px 0}
@media (max-width:760px){ .bears{font-size:13px} .bears.mini{font-size:10px} }

/* status bar */
.status{display:flex;flex-wrap:wrap;gap:0 18px;border:1px solid var(--phos-dim);padding:8px 12px;margin-bottom:12px;font-size:20px;
  position:sticky;top:0;z-index:40;background:var(--bg)}
.status b{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.status .lo{color:var(--danger);text-shadow:0 0 6px rgba(255,93,93,.5)}

/* menus / choices */
.choices{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.choice{display:block;width:100%;text-align:left;font-family:inherit;font-size:21px;
  border:1px solid var(--phos);background:transparent;color:var(--phos);padding:7px 12px;cursor:pointer;
  text-shadow:0 0 6px rgba(59,240,122,.4)}
.choice:hover:not(:disabled){background:var(--phos);color:var(--bg);text-shadow:none}
.choice:disabled{opacity:.4;cursor:not-allowed;border-color:var(--phos-faint)}
.choice .ic{display:inline-block;width:1.4em;text-align:center;margin-right:4px}
.choice .cost{color:var(--amber);float:right}
.choice:hover:not(:disabled) .cost{color:var(--bg)}

/* the night's headline action -- "go to tonight's show" -- gets a brighter,
   pulsing treatment so it reads as THE thing to do, not just another choice */
.choice.primary{border-color:var(--amber);color:var(--amber);font-weight:700;
  background:rgba(255,176,0,.08);box-shadow:0 0 16px rgba(255,176,0,.28);text-shadow:0 0 8px rgba(255,176,0,.55)}
.choice.primary:hover:not(:disabled){background:var(--amber);color:var(--bg);text-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .choice.primary:not(:disabled){animation:showpulse 2.4s ease-in-out infinite}
}
@keyframes showpulse{0%,100%{box-shadow:0 0 14px rgba(255,176,0,.25)}50%{box-shadow:0 0 26px rgba(255,176,0,.6)}}
/* once you've been -- a settled, unmistakably-done look instead of just greyed out */
.choice.done:disabled{opacity:1;cursor:default;border-color:var(--phos);color:var(--phos);
  background:rgba(59,240,122,.1);text-shadow:0 0 6px rgba(59,240,122,.4)}

.row{display:flex;gap:22px;flex-wrap:wrap}
.col{flex:1;min-width:240px}
.btn,button.btn{display:inline-block;border:1px solid var(--phos);padding:5px 14px;margin:5px 8px 5px 0;
  cursor:pointer;color:var(--phos);background:transparent;font-family:inherit;font-size:21px}
.btn:hover:not(:disabled){background:var(--phos);color:var(--bg);text-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--phos-faint)}
.btn.ghost{border-color:var(--phos-dim);color:var(--phos-dim)}

/* keyboard-shortcut number badges (Options -> Shortcut key hints) */
.kbdhint{display:inline-block;min-width:1.1em;margin-right:6px;padding:0 4px;
  border:1px solid currentColor;border-radius:3px;font-size:.75em;line-height:1.5;
  text-align:center;opacity:.85;vertical-align:middle}

.box{border:1px solid var(--phos-dim);padding:12px 14px;margin:12px 0;box-shadow:0 0 12px rgba(59,240,122,.08) inset}
.box .cap{color:var(--phos-dim);font-size:18px;letter-spacing:2px;text-transform:uppercase}
button.captoggle{display:block;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
  font-family:inherit;padding:0;color:var(--phos-dim);font-size:18px;letter-spacing:2px;text-transform:uppercase}
button.captoggle:hover{color:var(--phos)}

/* role & tour select: the whole card is a button (a big, obvious tap target) */
button.rolecard{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  border:1px solid var(--phos-dim);background:transparent;color:var(--phos);padding:12px 14px;
  box-shadow:0 0 12px rgba(59,240,122,.08) inset;text-shadow:0 0 6px rgba(59,240,122,.35)}
button.rolecard:hover{border-color:var(--phos);background:rgba(59,240,122,.06)}
button.rolecard .cap{display:block;color:var(--phos-dim);font-size:18px;letter-spacing:2px;text-transform:uppercase}
button.rolecard:hover .cap{color:var(--phos)}
button.rolecard .rc-blurb{display:block;margin:6px 0;font-size:19px;line-height:1.15}
button.rolecard .rc-note{display:block;color:var(--phos-dim);font-size:17px}
button.rolecard .rc-go{display:block;color:var(--amber);font-size:17px;margin-top:6px}
.role-portrait{margin:0 0 6px;font-size:18px;line-height:1.05;color:var(--phos);opacity:.85}

/* tour timeline slideshow: a row of tappable years plus one detail slide */
.tourline{display:flex;align-items:center;overflow-x:auto;padding:10px 4px;margin-bottom:6px;gap:0}
.tldot{flex:0 0 auto;font-family:inherit;font-size:16px;padding:6px 10px;cursor:pointer;
  border:1px solid var(--phos-faint);background:transparent;color:var(--phos-dim);white-space:nowrap}
.tldot:hover{border-color:var(--phos-dim);color:var(--phos)}
.tldot.on{border-color:var(--phos);color:var(--bg);background:var(--phos);text-shadow:none}
.tldot.loaded:not(.on){color:var(--td-cyan);border-color:var(--td-cyan)}
.tlline{flex:1 1 16px;min-width:10px;height:1px;background:var(--phos-faint)}
.tourslide .cap{color:var(--phos-dim);font-size:19px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.tournav{display:flex;flex-direction:row;justify-content:space-between}
@media (max-width:600px){ .tldot{font-size:14px;padding:5px 7px} }

/* external links: buy-me-a-coffee button + inline credits links */
.coffeewrap{margin:14px 0}
a.coffee{display:inline-block;color:var(--amber);border:1px solid var(--phos-dim);
  padding:6px 14px;text-decoration:none;font-size:20px;text-shadow:0 0 6px rgba(255,176,0,.5)}
a.coffee:hover{background:var(--amber);color:var(--bg);text-shadow:none}
a.link{color:var(--td-cyan);text-decoration:underline;text-underline-offset:2px}
a.link:hover{color:var(--phos)}
.blogpost{margin:5px 0;line-height:1.2}
.blogbody{font-size:19px;line-height:1.4;margin:8px 0;color:var(--phos);
  max-height:340px;overflow-y:auto;padding-right:4px}
.blogbody p{margin:.5em 0}
.blogbody a{color:var(--td-cyan)}
.blogbody img{max-width:100%;height:auto;border:1px solid var(--phos-faint);margin:6px 0}
.blogbody h1,.blogbody h2,.blogbody h3{color:var(--phos-dim);font-size:20px;margin:.4em 0}

/* creative-mode paint themes */
.stylegrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.stylebtn{margin:0;background:transparent}
.stylebtn.on{background:rgba(255,255,255,.06);box-shadow:0 0 10px rgba(255,255,255,.12) inset}
.stylebtn:hover{filter:brightness(1.25)}
pre.vanart{text-align:center;text-shadow:0 0 8px currentColor}
.vanname{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:var(--td-cyan);
  font-size:16px;text-shadow:0 0 6px rgba(51,224,255,.5);z-index:2}

/* van-mate selection */
.crewcard{opacity:.5;transition:opacity .12s}
.crewcard.on{opacity:1;box-shadow:0 0 14px rgba(59,240,122,.14) inset}
.crewnamelbl{display:block;color:var(--phos-dim);margin:8px 0 4px}
input.crewname{font-family:inherit;font-size:20px;background:#0a120c;border:1px solid var(--phos-dim);
  color:var(--amber);padding:3px 7px;width:100%;box-sizing:border-box;margin-top:3px}
input.crewname:focus{outline:none;border-color:var(--phos)}
input.crewname:disabled{opacity:.5}

/* vendor list */
.vendor{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--phos-faint);align-items:center}
.vendor .who{color:var(--td-cyan)}
.vendor .price{color:var(--amber);white-space:nowrap}
.vendor small{color:var(--phos-dim);font-size:17px}
.vendor .buy{margin:0}

/* Shakedown Street: browsable card grid */
.shakegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:6px}
.shakecard{display:flex;flex-direction:column;border:1px solid var(--phos-faint);padding:8px 10px;
  box-shadow:0 0 8px rgba(59,240,122,.05) inset}
.shakecard.cantafford{opacity:.62}
.shakecard .who{color:var(--td-cyan);font-size:16px}
.shakecard .iname{color:var(--phos);font-size:19px;line-height:1.1;margin:1px 0}
.shakecard .idesc{color:var(--phos-dim);font-size:16px;line-height:1.12;margin-bottom:6px;flex:1}
.shakecard .ibuy{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:auto}
.shakecard .ibuy .price{color:var(--amber);font-size:20px;white-space:nowrap}
.shakecard .ibuy .buy{margin:0;padding:4px 12px}
p.bar{border:1px solid var(--phos-faint);padding:6px 12px;margin:0 0 12px;letter-spacing:.5px}

/* map */
pre.map{white-space:pre;font-size:16px;line-height:1.02;color:var(--phos);margin:4px 0;
  border:1px solid var(--phos-dim);padding:8px 10px;box-shadow:0 0 12px rgba(59,240,122,.07) inset;overflow-x:auto}
.stop{color:var(--td-cyan)}
.here{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.6)}
.legend-star{color:var(--td-yellow);text-shadow:0 0 6px rgba(255,225,77,.5)}
.sea{color:var(--td-cyan);opacity:.5}
.played{color:var(--phos-dim)}

/* telemetry + van */
.bar .barfill{color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.5)}
.bar .baremp{color:var(--phos-faint)}
pre.van{white-space:pre;font-size:15px;line-height:1.02;color:var(--phos-dim);margin:8px 0 2px}
pre.van .b{color:var(--amber)}

/* event log */
.log{border:1px solid var(--phos-faint);padding:8px 12px;margin:12px 0;max-height:180px;overflow-y:auto;font-size:19px}
.log .cap{color:var(--phos-dim);font-size:16px;letter-spacing:2px;text-transform:uppercase}
.log p{margin:2px 0}
.log .good{color:var(--phos)}
.log .bad{color:var(--danger)}
.log .note{color:var(--phos-dim)}

/* event / show cards */
.card .frame{border:2px solid var(--amber);padding:18px 20px;background:rgba(255,176,0,.05);box-shadow:0 0 20px rgba(255,176,0,.18)}
.card h2{color:var(--amber);text-shadow:0 0 10px rgba(255,176,0,.5);margin:0 0 6px}

/* dosed / gameover */
.melt{
  font-size:40px;margin:20px 0 10px;font-weight:400;white-space:pre-wrap;display:inline-block;
  background:linear-gradient(90deg,var(--td-magenta),var(--td-orange),var(--td-yellow),var(--phos),var(--td-cyan),var(--td-purple),var(--td-magenta));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:swirl 5s linear infinite;filter:drop-shadow(0 0 12px rgba(255,106,61,.5));
}
.win-title{
  font-size:34px;margin:16px 0;display:inline-block;color:var(--td-yellow);
  text-shadow:0 0 12px rgba(255,225,77,.6);
}

/* driving intermission */
.drivescene{position:relative;overflow:hidden;height:172px;border:1px solid var(--phos-dim);
  background:linear-gradient(#04150c,#050a06);margin:10px 0;box-shadow:0 0 14px rgba(59,240,122,.08) inset}
.scenery{position:absolute;top:8px;left:0;white-space:pre;font-size:16px;line-height:1.28;
  color:var(--phos-dim);opacity:.8;animation:scroll 7s linear infinite;will-change:transform}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vanlayer{position:absolute;left:40%;bottom:34px;white-space:pre;font-size:16px;line-height:1.05;
  color:var(--phos);text-shadow:0 0 6px rgba(59,240,122,.5);animation:bob .5s ease-in-out infinite;z-index:2}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.exhaust{position:absolute;left:33%;bottom:50px;white-space:pre;color:var(--phos-faint);z-index:1;animation:puff 1s linear infinite}
@keyframes puff{0%{opacity:.7;transform:translateX(6px)}100%{opacity:0;transform:translateX(-26px)}}
.roadline{position:absolute;left:0;right:0;bottom:20px;white-space:pre;color:var(--phos-faint);
  font-size:16px;overflow:hidden;animation:scroll 1.4s linear infinite}
.drivebar{position:relative;height:16px;border:1px solid var(--phos-dim);background:#050a06;margin:6px 0}
.drivebar .fill{display:block;height:100%;width:0;background:var(--amber);
  box-shadow:0 0 8px rgba(255,176,0,.5);animation:fillbar linear forwards}
@keyframes fillbar{from{width:0}to{width:100%}}
@media (prefers-reduced-motion: reduce){
  .scenery,.vanlayer,.exhaust,.roadline{animation:none}
  .drivebar .fill{animation:none;width:100%}
}

/* taping mini-game */
.mini .stagehdr{color:var(--phos-dim);letter-spacing:2px;text-transform:uppercase;font-size:17px}
.mini .meter{position:relative;height:38px;border:1px solid var(--phos);background:#050a06;margin:14px 0;overflow:hidden}
.mini .meter.dangerbg{background:rgba(255,93,93,.12)}
.mini .zone{position:absolute;top:0;bottom:0;background:rgba(59,240,122,.28);
  border-left:2px solid var(--phos);border-right:2px solid var(--phos)}
.mini .zone.sweet{background:rgba(255,225,77,.35);border-color:var(--td-yellow)}
.mini .bullseye{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,225,77,.85);
  box-shadow:0 0 6px rgba(255,225,77,.7);z-index:2;transform:translateX(-1px)}
.mini .needle{position:absolute;top:-3px;bottom:-3px;width:4px;left:0;background:var(--amber);
  box-shadow:0 0 10px var(--amber);will-change:left;z-index:3}
.mini .meterlabel{position:absolute;left:8px;top:9px;color:var(--phos-dim);font-size:16px;letter-spacing:1px;z-index:3}
.mini .pips{margin:6px 0;font-size:19px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mini .pips .pip-perfect{color:var(--td-yellow);text-shadow:0 0 7px rgba(255,225,77,.6)}
.mini .pips .pip-great{color:var(--phos)}
.mini .pips .pip-good{color:var(--phos-dim)}
.mini .pips .pip-miss{color:var(--danger)}
.mini .pips .todo{color:var(--phos-faint)}
.mini .minifb{margin-left:8px;font-size:17px;letter-spacing:1px}
.mini .minifb .pip-perfect{color:var(--td-yellow);text-shadow:0 0 8px rgba(255,225,77,.6)}
.mini .minifb .pip-great{color:var(--phos)}
.mini .minifb .pip-good{color:var(--phos-dim)}
.mini .minifb .pip-miss{color:var(--danger)}
.mini .combo{color:var(--amber);text-shadow:0 0 8px rgba(255,176,0,.6)}

/* hall of the fallen table -- eight columns, so wrapping needs real column
   budgets instead of the browser's default auto-sizing (which either crushes
   the name/fate text into 3-4 lines or squeezes Miles/Total off-screen with no
   way to reach them). table-layout:fixed gives each column a fair, predictable
   share; the wide text columns wrap onto a couple of lines, the compact numeric
   ones never do. On a phone, eight columns can't wrap cleanly at any width, so
   it falls back to one line per row and lets .hallwrap scroll sideways instead. */
.hallwrap{overflow-x:auto}
table.hall{width:100%;table-layout:fixed;border-collapse:collapse;font-size:19px;margin:10px 0}
table.hall th{text-align:left;color:var(--phos-dim);border-bottom:1px solid var(--phos-dim);padding:4px 8px;font-weight:400;text-transform:uppercase;font-size:16px;letter-spacing:1px;overflow-wrap:break-word}
table.hall td{padding:4px 8px;border-bottom:1px dashed var(--phos-faint);overflow-wrap:break-word}
table.hall th:nth-child(1),table.hall td:nth-child(1){width:6%}
table.hall th:nth-child(2),table.hall td:nth-child(2){width:18%}
table.hall th:nth-child(3),table.hall td:nth-child(3){width:22%}
table.hall th:nth-child(4),table.hall td:nth-child(4){width:18%}
table.hall th:nth-child(5),table.hall td:nth-child(5){width:9%}
table.hall th:nth-child(6),table.hall td:nth-child(6){width:9%}
table.hall th:nth-child(7),table.hall td:nth-child(7){width:9%}
table.hall th:nth-child(8),table.hall td:nth-child(8){width:9%}
table.hall td.rank,table.hall td:nth-child(5),table.hall td:nth-child(6),
table.hall td:nth-child(7),table.hall td.sc{white-space:nowrap}
table.hall td.rank{color:var(--phos-dim);text-align:right}
table.hall td.sc{color:var(--amber);text-align:right}
table.hall .outcome-win{color:var(--td-yellow)}
table.hall .outcome-lost{color:var(--danger)}
@media (max-width:600px){
  table.hall{table-layout:auto;width:auto;min-width:100%}
  table.hall th,table.hall td{white-space:nowrap;width:auto}
}

/* character builder: mods */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}
.modcard{display:flex;flex-direction:column;gap:2px;text-align:left;font-family:inherit;cursor:pointer;
  border:1px solid var(--phos-dim);background:transparent;color:var(--phos);padding:7px 10px;
  text-shadow:0 0 6px rgba(59,240,122,.35)}
.modcard:hover{border-color:var(--phos)}
.modcard.on{border-color:var(--amber);background:rgba(255,176,0,.08);color:var(--amber);
  text-shadow:0 0 6px rgba(255,176,0,.4)}
.modcard .modname{font-size:20px}
.modcard .moddesc{font-size:16px;color:var(--phos-dim)}
.modcard.on .moddesc{color:var(--amber);opacity:.85}

/* the Peak card -- a once-per-run moment of clarity, so it gets the same
   swirling wordmark-style gradient treatment as the title screen and the
   dosed/melt screen, instead of a flat sunset frame. */
.card .frame.peakframe{position:relative;border-color:var(--td-magenta);background:rgba(255,106,61,.06);
  box-shadow:0 0 24px rgba(255,106,61,.22);overflow:hidden}
.card .frame.peakframe::before{
  content:"";position:absolute;inset:-3px;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,#3bf07a 0%,#33e0ff 20%,#a855f7 40%,#ff6a3d 58%,#ffd21a 78%,#3bf07a 100%);
  background-size:300% 100%;animation:swirl 6s linear infinite;
  filter:blur(16px);opacity:.4}
.peakframe > *{position:relative;z-index:1}
.peaktitle{
  display:inline-block;
  background:linear-gradient(100deg,#3bf07a 0%,#33e0ff 20%,#a855f7 40%,#ff6a3d 58%,#ffd21a 78%,#3bf07a 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:swirl 4s linear infinite;
  text-shadow:none}

/* trail-map sidebar (fixed, outside the re-rendered app) */
#map-toggle{
  position:fixed;top:10px;left:12px;z-index:60;
  font-family:inherit;font-size:20px;line-height:1;width:38px;height:34px;cursor:pointer;
  border:1px solid var(--phos-dim);background:rgba(7,10,7,.7);color:var(--phos);
  text-shadow:0 0 6px rgba(59,240,122,.45)}
#map-toggle:hover,#map-toggle.on{border-color:var(--phos);background:var(--phos);color:var(--bg);text-shadow:none}
#trailmap{
  position:fixed;left:8px;top:52px;bottom:8px;width:212px;z-index:55;overflow-y:auto;
  border:1px solid var(--phos-dim);background:rgba(6,10,7,.92);padding:10px 12px;
  box-shadow:0 0 16px rgba(59,240,122,.1) inset;font-size:18px}
#trailmap .mcap{color:var(--phos-dim);font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
#trailmap ol.mstops{list-style:none;margin:0;padding:0}
#trailmap ol.mstops li{padding:5px 0 5px 4px;border-left:2px solid var(--phos-faint);margin-left:4px;line-height:1.1}
#trailmap ol.mstops li.here{border-left-color:var(--amber)}
#trailmap ol.mstops li.played{border-left-color:var(--phos-dim);opacity:.7}
#trailmap .mk{display:inline-block;width:1.3em}
#trailmap .mdate{color:var(--phos-dim);font-size:15px}
#trailmap .mfoot{margin-top:10px;color:var(--td-cyan);font-size:15px;border-top:1px solid var(--phos-faint);padding-top:8px}
@media (max-width:1239px){ #trailmap{background:rgba(6,10,7,.97);box-shadow:0 0 24px rgba(0,0,0,.7)} }

/* On roomy screens a docked, open sidebar reserves a gutter so it never buries the
   game -- the centered content just re-centers in the space that's left. Below
   900px the sidebars stay lightweight overlays (see the mobile block), so no
   reflow there. */
@media (min-width:900px){
  body{transition:padding .18s ease}
  body.map-open{padding-left:228px}
  body.music-open{padding-right:304px}
}

/* "Tonight's Tapes" music sidebar (fixed, right, outside the re-rendered app) */
#music-toggle{
  position:fixed;top:10px;right:58px;z-index:60;
  font-family:inherit;font-size:20px;line-height:1;width:38px;height:34px;cursor:pointer;
  border:1px solid var(--phos-dim);background:rgba(7,10,7,.7);color:var(--amber);
  text-shadow:0 0 6px rgba(255,176,0,.45)}
#music-toggle:hover,#music-toggle.on{border-color:var(--amber);background:var(--amber);color:var(--bg);text-shadow:none}
#musicbox{
  position:fixed;right:8px;top:52px;bottom:8px;width:288px;z-index:55;overflow-y:auto;
  border:1px solid var(--phos-dim);background:rgba(6,10,7,.95);padding:10px 12px;
  box-shadow:0 0 16px rgba(255,176,0,.08) inset;font-size:18px}
#musicbox .mcap{color:var(--amber);font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
#musicbox .msub{margin:0 0 8px;color:var(--td-cyan);font-size:17px;line-height:1.15}
#musicbox .msub .mdate{color:var(--phos-dim);font-size:15px}
#musicbox ol.mrecs{list-style:none;margin:0;padding:0}
#musicbox li.mrec{padding:8px 0;border-bottom:1px dashed var(--phos-faint)}
#musicbox .mtitle{color:var(--phos);font-size:17px;line-height:1.15}
#musicbox .mrate{color:var(--amber)}
#musicbox .msrc{color:var(--phos-dim);font-size:14px;margin:2px 0;line-height:1.1}
#musicbox .mrecbtns{margin-top:4px;display:flex;align-items:center;gap:8px}
#musicbox .mrecbtns .mplay{margin:0;font-size:17px;padding:3px 10px}
#musicbox .mfoot{margin-top:10px;color:var(--td-cyan);font-size:15px;border-top:1px solid var(--phos-faint);padding-top:8px}

/* how-to-play tutorial sidebar (fixed, always available) */
#help-toggle{
  position:fixed;top:10px;left:104px;z-index:62;
  font-family:inherit;font-size:20px;font-weight:700;line-height:1;width:38px;height:34px;cursor:pointer;
  border:1px solid var(--phos-dim);background:rgba(7,10,7,.7);color:var(--td-cyan);text-shadow:0 0 6px rgba(51,224,255,.4)}
#help-toggle:hover,#help-toggle.on{border-color:var(--td-cyan);background:var(--td-cyan);color:var(--bg);text-shadow:none}
#help{
  display:none;
  position:fixed;left:8px;top:52px;bottom:8px;width:min(300px,92vw);z-index:68;overflow-y:auto;
  border:1px solid var(--td-cyan);background:rgba(6,10,7,.98);padding:12px 14px;
  box-shadow:0 0 22px rgba(0,0,0,.6);font-size:18px}
#help .mcap{color:var(--td-cyan);font-size:16px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
#help .hsec{border-bottom:1px dashed var(--phos-faint);padding:6px 0}
#help .hcap{color:var(--phos);font-size:17px}
#help .hsec p{margin:3px 0;color:var(--phos-dim);font-size:16px;line-height:1.25}
#help .mfoot{margin-top:10px}

/* options / accessibility gear + panel (fixed, always available) */
#opts-btn{
  position:fixed;top:10px;left:58px;z-index:62;
  font-family:inherit;font-size:20px;line-height:1;width:38px;height:34px;cursor:pointer;
  border:1px solid var(--phos-dim);background:rgba(7,10,7,.7);color:var(--phos);text-shadow:0 0 6px var(--glow)}
#opts-btn:hover,#opts-btn.on{border-color:var(--phos);background:var(--phos);color:var(--bg);text-shadow:none}
#optspanel{
  display:none;
  position:fixed;left:50%;top:52px;transform:translateX(-50%);z-index:70;width:min(340px,92vw);max-height:86vh;overflow-y:auto;
  border:1px solid var(--phos);background:rgba(6,10,7,.98);padding:12px 14px;
  box-shadow:0 0 24px rgba(0,0,0,.7);font-size:18px}
#optspanel .mcap{color:var(--phos);font-size:16px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
#optspanel p{margin:4px 0}
#optspanel .btn{margin:3px 4px 3px 0}
#optspanel .optthemes .btn{padding:5px 10px}
#optspanel .mfoot{margin-top:12px;border-top:1px solid var(--phos-faint);padding-top:8px}

/* sound on/off toggle (fixed, outside the re-rendered app) */
#mute-btn{
  position:fixed;top:10px;right:12px;z-index:60;
  font-family:inherit;font-size:20px;line-height:1;
  width:38px;height:34px;cursor:pointer;
  border:1px solid var(--phos-dim);background:rgba(7,10,7,.7);color:var(--phos);
  text-shadow:0 0 6px rgba(59,240,122,.45)}
#mute-btn:hover{border-color:var(--phos);background:var(--phos);color:var(--bg);text-shadow:none}

/* ---------- mobile pass: keep every screen usable on a phone ---------- */
@media (max-width:600px){
  body{font-size:20px;line-height:1.18}
  /* extra top padding clears the fixed corner toggles; tighter side gutters */
  .crt{padding:46px 13px 30px}
  h2{font-size:25px}
  h3{font-size:17px}
  .small{font-size:16px}
  .status{font-size:17px;gap:0 12px;padding:7px 9px;margin-bottom:10px}
  /* full-width, finger-sized controls */
  .choice{font-size:19px;padding:10px 12px}
  .btn,button.btn{font-size:18px;padding:8px 13px;margin:4px 6px 4px 0}
  /* vendor rows: let the price + Buy/Max wrap under the item on a narrow screen */
  .vendor{flex-wrap:wrap;gap:6px 10px}
  .vendor > span:last-child{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .vendor .buy{margin:0}
  .modgrid{grid-template-columns:1fr}
  .row{gap:12px}
  .col{min-width:100%}
  /* sidebars overlay on top of the game and never spill past the screen edge */
  #trailmap{width:min(212px,86vw);top:46px;bottom:60px}
  #musicbox{width:min(300px,93vw);top:46px;bottom:60px}
  #help{bottom:60px}
  #optspanel{max-height:calc(86vh - 52px)}
  /* keep the driving scene and mini-game meter tappable, not cramped */
  .drivescene{height:150px}
  .mini .meter{height:44px}
  /* room for the fixed bottom toolbar so it never covers page content */
  .crt{padding-bottom:64px}
  /* pin the map / options / tutorial / music / mute toggles into one solid bar
     along the bottom of the screen, instead of scattered corner buttons that
     crowd the status bar and let the page show through behind them. */
  #map-toggle,#opts-btn,#help-toggle,#music-toggle,#mute-btn{
    top:auto;bottom:0;left:auto;right:auto;
    width:20%;height:52px;font-size:22px;
    border:none;border-top:1px solid var(--phos-dim);border-right:1px solid var(--phos-faint);
    background:var(--bg);z-index:80;
  }
  #map-toggle{left:0}
  #opts-btn{left:20%}
  #help-toggle{left:40%}
  #music-toggle{left:60%}
  #mute-btn{left:80%;border-right:none}
}
@media (max-width:600px) and (prefers-reduced-motion: no-preference){
  .choice,.btn,button.btn,.modcard,button.rolecard{-webkit-tap-highlight-color:rgba(59,240,122,.25)}
}