:root{
  --bg:#070a07;
  --phos:#3bf07a;
  --phos-dim:#1f8a44;
  --phos-faint:#0f3d22;
  --amber:#ffb000;
  --danger:#ff5d5d;
  --td-magenta:#ff3caa;
  --td-cyan:#33e0ff;
  --td-orange:#ff7a1a;
  --td-purple:#a855f7;
  --td-yellow:#ffe14d;
}
*{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 rgba(59,240,122,.55);
}
.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%,#ff3caa 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}}

/* 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}
.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 */
ul.menu{list-style:none;padding:0;margin:10px 0}
ul.menu li{padding:3px 0;cursor:pointer}
ul.menu li::before{content:"  ";white-space:pre}
ul.menu li:hover,ul.menu li.sel{color:var(--bg);background:var(--phos);text-shadow:none}
ul.menu li:hover::before,ul.menu li.sel::before{content:"> "}

.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 .cost{color:var(--amber);float:right}
.choice:hover:not(:disabled) .cost{color:var(--bg)}

.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)}

.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}

input.namein{font-family:inherit;font-size:20px;background:#0a120c;border:1px solid var(--phos-dim);
  color:var(--amber);padding:2px 6px;width:170px}

/* 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)}

/* 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}

/* 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,60,170,.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 .needle{position:absolute;top:-3px;bottom:-3px;width:4px;left:0;background:var(--amber);
  box-shadow:0 0 10px var(--amber);will-change:left}
.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}
.mini .pips .hit{color:var(--phos)}
.mini .pips .miss{color:var(--danger)}
.mini .pips .todo{color:var(--phos-faint)}

/* hall of the fallen table */
table.hall{width:100%;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}
table.hall td{padding:4px 8px;border-bottom:1px dashed var(--phos-faint)}
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)}

/* 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 */
.card .frame.peakframe{border-color:var(--td-magenta);background:rgba(255,60,170,.06);
  box-shadow:0 0 24px rgba(255,60,170,.22)}
.peakframe h2{color:var(--td-magenta);text-shadow:0 0 12px rgba(255,60,170,.55)}

/* 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}
@media (max-width:470px){ #mute-btn{top:6px;right:6px;width:34px;height:30px;font-size:17px} }