:root { --bg:#071018; --panel:#0c1622ee; --line:#1e3a4a; --text:#e8eef5; --mute:#94a3b8; --gold:#fbbf24; --cyan:#5eead4; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:"Source Sans 3",system-ui,sans-serif; }
button, input { font:inherit; color:inherit; }
.app { height:100%; display:grid; grid-template-rows:auto 1fr auto; }
.top, .dock {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.45rem .8rem; background:#080e16; border-color:var(--line);
}
.top { border-bottom:1px solid var(--line); }
.dock { border-top:1px solid var(--line); }
.brand, .mini { color:var(--gold); text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:.78rem; }
.grow { flex:1; }
.board {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:.35rem;
  padding:.45rem .7rem; background:#0c1824; border-bottom:1px solid var(--line);
}
.board div { background:#101c28; border:1px solid var(--line); border-radius:8px; padding:.35rem .45rem; }
.board b { display:block; font-family:Syne,sans-serif; font-size:1.05rem; color:var(--gold); }
.board span { color:var(--mute); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.board-table { font-size:.78rem; }
.board-table .rowline {
  display:grid; grid-template-columns:1.2fr .8fr .6fr .7fr; gap:.3rem;
  padding:.22rem 0; border-bottom:1px solid #1e2a3a;
}
.board-table .head { color:var(--mute); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.radio-inline { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.radio-inline button {
  background:#1a2836; color:var(--text); border:1px solid #3a4e64; border-radius:8px;
  padding:.28rem .55rem; cursor:pointer; font:650 .72rem Syne,sans-serif; min-height:36px;
}
.radio-title-inline { font:600 .68rem "IBM Plex Mono",monospace; color:var(--mute); max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radio-vol { display:inline-flex; align-items:center; gap:.28rem; font:650 .62rem "IBM Plex Mono",monospace; color:var(--mute); }
.radio-vol input { width:88px; accent-color:var(--gold); }
.menu { position:fixed; inset:0; z-index:25; background:#071018; overflow:auto; }
.menu.hidden { display:none !important; }
.title-screen { min-height:100%; display:grid; grid-template-columns:1.15fr minmax(320px, 480px); }
.title-art { position:relative; min-height:42vh; background:#041018; }
.title-art img { width:100%; height:100%; object-fit:cover; display:block; }
.title-panel { padding:1.1rem 1.15rem 1.6rem; overflow:auto; border-left:1px solid var(--line); }
.title-panel h1 { font-size:clamp(1.8rem, 4vw, 2.6rem); margin:.15rem 0 .4rem; }
.modes { display:grid; gap:.4rem; margin:.5rem 0 .7rem; }
.mode-card {
  text-align:left; background:#101c28; color:var(--text); border:1px solid #3a4e64;
  border-radius:10px; padding:.55rem .7rem; cursor:pointer;
}
.mode-card b { display:block; font-family:Syne,sans-serif; }
.mode-card span { display:block; color:var(--mute); font-size:.78rem; margin-top:.12rem; }
.mode-card.on { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.mode-card:disabled { opacity:.4; cursor:not-allowed; }
.cast { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin:.35rem 0 .6rem; }
.cast button {
  text-align:left; background:#101c28; color:#e8eef5; border:1px solid #3a4e64;
  border-radius:8px; padding:.4rem .5rem; cursor:pointer; min-height:44px;
}
.cast button.on { border-color:var(--gold); color:var(--gold); }
.how { color:var(--mute); padding-left:1.1rem; }
.how li { margin:.35rem 0; }
.donate-row { display:flex; flex-wrap:wrap; gap:.45rem; margin:.8rem 0 .35rem; }
.donate-row a { text-decoration:none; font:700 .78rem Syne,sans-serif; padding:.5rem .75rem; border-radius:8px; }
.donate-paypal { background:#0070ba; color:#fff; }
.donate-patreon { background:#f96854; color:#111; }
.app.hidden { display:none !important; }
.opt { position:fixed; inset:0; z-index:30; background:#070e16cc; display:grid; place-items:center; padding:1rem; }
.opt.hidden { display:none !important; }
.optbox { width:min(460px, 100%); background:#0c1622; border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; }
.optbox h2 { font-family:Syne,sans-serif; margin:.2rem 0 .6rem; }
.check { display:flex; align-items:center; gap:.45rem; margin:.4rem 0; color:var(--mute); }
.check select, .check input[type="range"] { margin-left:auto; accent-color:var(--gold); }
.q-good { color:#86efac; }
.q-fair { color:#fbbf24; }
.q-poor { color:#fb7185; }
@media (max-width:900px) {
  .board { grid-template-columns:repeat(3, 1fr); }
  .title-screen { grid-template-columns:1fr; }
  .title-panel { border-left:0; border-top:1px solid var(--line); }
}
h1 { font-family:Syne,sans-serif; font-size:1.05rem; margin:0; letter-spacing:.04em; }
.clock { font:600 .78rem "IBM Plex Mono",monospace; color:var(--cyan); }
.points { font:700 .9rem Syne,sans-serif; color:var(--gold); }
.stage { display:grid; grid-template-columns:1fr 300px; min-height:0; }
.tankwrap { position:relative; min-width:0; min-height:0; background:#041018; }
canvas { width:100%; height:100%; display:block; }
.rail { overflow:auto; background:#0a121c; border-left:1px solid var(--line); padding:.7rem; }
.rail h2 { font-family:Syne,sans-serif; font-size:.95rem; margin:.2rem 0 .4rem; }
.lore { color:var(--mute); font-size:.82rem; line-height:1.45; }
.row { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0; }
.btn {
  background:#1a2836; color:#e8eef5; border:1px solid #3a4e64; border-radius:8px;
  padding:.45rem .7rem; min-height:40px; cursor:pointer;
}
.btn.gold { background:var(--gold); color:#1a1204; border-color:var(--gold); font-weight:700; }
.btn.on { border-color:var(--cyan); }
.name { width:100%; background:#101820; border:1px solid var(--line); border-radius:8px; padding:.4rem .5rem; }
.fishline, .grave {
  width:100%; text-align:left; background:#101820; border:1px solid var(--line); border-radius:8px;
  padding:.4rem .5rem; margin:.25rem 0; cursor:pointer;
}
.fishline.on { border-color:var(--gold); }
.fishline b, .grave b { font-family:Syne,sans-serif; }
.mood-happy { color:#86efac; }
.mood-sad { color:#fb7185; }
.mood-normal { color:var(--cyan); }
.log { font-size:.78rem; color:#c5d0dc; max-height:8rem; overflow:auto; }
.log div { border-bottom:1px solid #1e2a3a; padding:.15rem 0; }
.kicker { letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-size:.68rem; }
@media (max-width:900px) {
  .stage { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .rail { max-height:38vh; border-left:0; border-top:1px solid var(--line); }
}