:root{--bg:#070a07;--panel:#0c120c;--line:#1b2a1b;--g:#5fd38a;--g2:#1f8a44;--dim:#6f8f76;--amber:#ffb000;--accent:#57e6ff;--txt:#c3e0c8}
[hidden]{display:none !important}
*{box-sizing:border-box}
/* Color schemes: the same four the game offers (game.css body.theme-*). */
body.theme-amber{--accent:#57e6ff;--g:#ffc24d;--g2:#b57f10;--line:#3d2a05;--panel:#120d04;--dim:#a88f60;--txt:#f1dfbd;--amber:#fff1c9}
body.theme-cyan{--accent:#5fd38a;--g:#57e6ff;--g2:#1f8aa8;--line:#0d3540;--panel:#06121a;--dim:#6a98a6;--txt:#c6eef7}
body.theme-white{--accent:#57e6ff;--g:#e9f2e9;--g2:#9fb0a0;--line:#39423a;--panel:#101310;--dim:#9aa69b;--txt:#e6ece6}
.themes{display:flex;gap:7px;align-items:center;margin-right:10px;opacity:.55;transition:opacity .2s}
.themes:hover,.themes:focus-within{opacity:1}
.swatch{width:11px;height:11px;border-radius:50%;border:0;cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset}
.swatch.on{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--dim)}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:14px;padding-bottom:64px}
a{color:var(--g)}
.amber{color:var(--amber)} .shift{color:var(--accent)} .muted{color:var(--dim)} .small{font-size:12px}
.top{display:flex;align-items:baseline;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font:32px VT323,monospace;color:var(--g);letter-spacing:.12em;text-decoration:none;text-shadow:0 0 8px #1f8a4488}
.logo em{color:var(--amber);font-style:normal}
.sub{font:17px VT323,monospace;color:var(--dim);letter-spacing:.08em}
.top nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.navbtn{font:18px VT323,monospace;letter-spacing:.06em;text-decoration:none;border:1px solid var(--g2);padding:3px 10px;color:var(--g)}
.navbtn.donate,.donate{color:var(--accent);border-color:var(--accent)}
.dock .donate{font:16px VT323,monospace;text-decoration:none;white-space:nowrap}
.challenge,.flash{margin:10px 20px 0;padding:10px 14px;border:1px dashed var(--accent);font:19px VT323,monospace;color:var(--txt)}
.flash{border-color:var(--amber)}
/* First-visit welcome: what changed for Terrapin Trail II players, and the way back to the classic game */
.welcome{position:relative;margin:12px 20px 0;padding:14px 44px 14px 16px;border:1px solid var(--amber);background:var(--panel);color:var(--txt);font-size:15px;line-height:1.45}
.welcome .welcomehead{font:24px VT323,monospace;letter-spacing:.06em;color:var(--amber);margin-bottom:4px}
.welcome .row{margin-top:10px;gap:10px}
.welcomex{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--dim);font:26px/1 system-ui,sans-serif;cursor:pointer}
.welcomex:hover{color:var(--amber)}
.wrap{display:grid;grid-template-columns:240px minmax(0,1fr) 350px;min-height:calc(100vh - 130px)}
.col{border-right:1px solid var(--line);padding:14px;min-width:0}
.col:last-child{border-right:0}
h2{font:20px VT323,monospace;color:var(--g);letter-spacing:.1em;margin:4px 0 10px;text-transform:uppercase}
h2.gap{margin-top:18px} h2.nomargin{margin-top:0}
h3{font:17px VT323,monospace;color:var(--dim);letter-spacing:.1em;margin:16px 0 6px;text-transform:uppercase}
.search{width:100%;background:#000;border:1px solid var(--g2);color:var(--g);font:18px VT323,monospace;padding:6px 8px}
.search.small{font:14px "Atkinson Hyperlegible",sans-serif}
.row{display:flex;gap:8px;align-items:center}
.sorts{display:flex;gap:6px;margin:8px 0 4px}
.sortbtn{flex:1;background:none;border:1px solid var(--line);color:var(--dim);font:17px VT323,monospace;padding:2px 6px;cursor:pointer}
.sortbtn.on{border-color:var(--amber);color:var(--amber)}
.letters{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0}
.letters button{background:none;border:0;color:var(--g);font:16px VT323,monospace;padding:1px 4px;cursor:pointer;min-width:18px}
.letters button.on{background:var(--amber);color:#000}
.bands{max-height:60vh;overflow:auto;margin-top:6px}
.band{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;cursor:pointer;border-left:2px solid transparent}
.band:hover{background:var(--panel)}
.band.on{border-left-color:var(--amber);background:var(--panel);color:var(--amber)}
.band small{color:var(--dim)}
.years{display:flex;align-items:flex-end;gap:2px;height:80px;margin:6px 0 2px}
.yr{flex:1;background:var(--g2);cursor:pointer;min-height:3px;border:0;padding:0}
.yr:hover,.yr:focus{background:var(--g)}
.yr.on{background:var(--amber)}
.yrlab{display:flex;justify-content:space-between;color:var(--dim);font:15px VT323,monospace}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:1px solid var(--g2);padding:4px 8px;cursor:pointer;font:16px VT323,monospace;color:var(--txt);background:none}
.chip b{color:var(--g);font-weight:normal}
.chip.on{border-color:var(--amber);color:var(--amber)} .chip.on b{color:var(--amber)}
#map{width:100%;height:330px;background:#040604;border:1px solid var(--line);display:block}
.tourhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.hashtag{font:30px VT323,monospace;color:var(--accent);letter-spacing:.04em;word-break:break-all}
.stops{margin-top:10px;max-height:280px;overflow:auto}
.stop{display:grid;grid-template-columns:60px 1fr auto;gap:8px;padding:6px;border-bottom:1px solid var(--line);cursor:pointer}
.stop:hover,.stop.on{background:var(--panel)}
.stop .d{font:17px VT323,monospace;color:var(--g)}
.stop .tag{font:15px VT323,monospace;color:var(--amber);text-align:right}
.stop .mi{color:var(--dim);font:15px VT323,monospace}
.btn{display:inline-block;background:var(--g2);color:#000;border:0;font:20px VT323,monospace;letter-spacing:.08em;padding:6px 14px;cursor:pointer;text-decoration:none}
.btn.amber{background:var(--amber)}
.btn.ghost{background:transparent;border:1px solid var(--g2);color:var(--g)}
.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.card{background:var(--panel);border:1px solid var(--line);padding:12px;margin-bottom:12px}
.dna{margin-top:14px}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.preset{border:1px solid var(--g2);padding:4px 10px;cursor:pointer;font:17px VT323,monospace;background:none;color:var(--txt)}
.preset.on{border-color:var(--accent);color:var(--accent)}
details summary{cursor:pointer;color:var(--g);font:17px VT323,monospace;letter-spacing:.06em;margin-bottom:8px}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.sl label{display:flex;justify-content:space-between;gap:8px;font:17px VT323,monospace;color:var(--g)}
.sl label b{color:var(--amber);font-weight:normal;white-space:nowrap}
.sl input{width:100%;accent-color:#ffb000}
.sl .hint{font-size:11.5px;color:var(--dim);line-height:1.3}
.sl.new label{color:var(--accent)}
.strand{display:flex;gap:2px;height:12px;margin:10px 0 4px} .strand span{flex:1}
.ruleline{font:16px VT323,monospace;color:var(--dim)}
.setlist{max-height:220px;overflow:auto;margin-top:6px}
.song{display:flex;justify-content:space-between;gap:8px;padding:4px;cursor:pointer;width:100%;background:none;border:0;color:var(--txt);font:inherit;text-align:left}
.song:hover{background:#000} .song.on{color:var(--amber)}
.credit{font:15px VT323,monospace;color:var(--dim);margin-top:6px;line-height:1.3}
.shares{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.share{border:1px solid var(--line);padding:4px 10px;cursor:pointer;font:17px VT323,monospace;background:none;color:var(--txt)}
.share:hover{border-color:var(--accent);color:var(--accent)}
.link{background:#000;border:1px solid var(--line);color:var(--g);font:12px monospace;padding:6px;word-break:break-all;margin-top:8px}
table.board{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.board td,.board th{padding:4px 2px;text-align:left;border-bottom:1px solid var(--line)}
.board th{font:15px VT323,monospace;color:var(--dim);font-weight:normal;letter-spacing:.08em}
.board .r{text-align:right} .board td.n{text-align:right;font:16px VT323,monospace;color:var(--g)}
.board .luck{font:14px VT323,monospace;color:var(--accent);text-decoration:none;white-space:nowrap}
.sources .row{gap:6px;margin:2px 0}
.bar{height:8px;background:var(--accent);display:inline-block}
.dock{position:fixed;left:0;right:0;bottom:0;background:#000;border-top:1px solid var(--g2);padding:8px 16px;display:flex;gap:14px;align-items:center;z-index:5}
.dock .np{font:18px VT323,monospace;color:var(--amber);max-width:38%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dock audio{flex:1;height:32px;min-width:0}
.daily{border-color:var(--amber);margin-bottom:14px}
.dailyhead{font:20px VT323,monospace;color:var(--amber);letter-spacing:.12em}
#dailyText{margin:4px 0 8px}
.wrapbtns{flex-wrap:wrap}
.publish{display:flex;gap:8px;margin-top:10px}
.tapes{max-height:260px;overflow:auto;margin-top:6px}
.tape{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--txt);padding:5px 2px;cursor:pointer;font:inherit}
.tape:hover{background:#000}
.tape b{color:var(--amber);font-weight:normal}
.gamepanel{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:560px}
.gamebar{display:flex;align-items:center;gap:12px;padding:0 0 8px;flex-wrap:wrap}
.gamebar .shift{font:22px VT323,monospace}
.gamebar .navbtn:first-of-type{margin-left:auto}
.gamebar button.navbtn{background:none;cursor:pointer}
#gameFrame{flex:1;width:100%;border:1px solid var(--g2);background:#000}
.how{font:14px VT323,monospace;letter-spacing:.04em;text-transform:none;color:var(--dim);text-decoration:underline dotted;margin-left:8px;cursor:help;white-space:nowrap}
.how:hover{color:var(--amber)}
.gaming .dock{display:none}
.gamepanel:fullscreen{height:100vh;padding:10px;background:var(--bg)}
.resume{background:var(--amber);color:#000;border:0;font:17px VT323,monospace;padding:2px 10px;cursor:pointer}
.mapwrap{position:relative}
#map{touch-action:pan-y;cursor:grab}
#map:active{cursor:grabbing}
.mapzoom{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px}
.mapzoom button{width:30px;height:28px;background:var(--bg);border:1px solid var(--g2);color:var(--g);font:18px VT323,monospace;cursor:pointer;padding:0}
.mapzoom button:hover{border-color:var(--amber);color:var(--amber)}
.maphint .touch{display:none}
@media (pointer:coarse){.maphint .mouse{display:none}.maphint .touch{display:inline}}
.maphint{position:absolute;left:8px;bottom:6px;font:14px VT323,monospace;pointer-events:none}
#map .land path{vector-effect:non-scaling-stroke}
.empty{color:var(--dim);font:17px VT323,monospace;padding:8px 0}
@media (max-width:1100px){
  .wrap{grid-template-columns:200px minmax(0,1fr)}
  .col-side{grid-column:1 / -1;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
  .col-side .card{margin:0}
}
@media (max-width:720px){
  body{font-size:15px}
  .top{padding:10px 12px} .logo{font-size:26px} .sub{display:none}
  .top nav{margin-left:0;width:100%}
  .wrap{display:block}
  .col{border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .col-side{display:block}
  .col-side .card{margin-bottom:12px}
  .bands{max-height:220px}
  #map{height:240px}
  .sliders{grid-template-columns:1fr}
  .stops{max-height:none}
  .dock{padding:6px 10px;gap:8px}
  .dock .np{display:none}
  .dock .donate{font-size:14px}
  .tourhead .play{width:100%;text-align:center}
}
/* Accent lettering: a slow, smooth drift through the screen's own colors (green,
   cyan, amber in the default scheme). Holds still for anyone who asks for reduced motion. */
@keyframes shift{0%{background-position:0% center}100%{background-position:100% center}}
.shift,.hashtag,.preset.on,.sl.new label,.share:hover,.board .luck,.navbtn.donate,.donate{
  background-image:linear-gradient(90deg,var(--g),var(--accent),var(--amber),var(--accent),var(--g));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:shift 14s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.shift,.hashtag,.preset.on,.sl.new label,.share:hover,.board .luck,.navbtn.donate,.donate{animation:none}}

/* Players' wish list */
.wishes{list-style:none;margin:8px 0 10px;padding:0;max-height:220px;overflow:auto}
.wishes li{padding:4px 0;border-bottom:1px solid var(--line,#14301c);font-size:14px}
.wishes .wstat{font:15px VT323,monospace;letter-spacing:.06em;padding:0 5px;margin-right:4px;border:1px solid currentColor}
.wishes .wstat.planned{color:var(--amber,#ffb000)}
.wishes .wstat.shipped{color:var(--accent,#5fd3e8)}