:root{
  --bg:#060d14; --panel:#0b1720; --panel2:#0f2029; --line:#1d3644;
  --ink:#dcecf3; --dim:#7fa3b2; --dim2:#547a8c;
  --accent:#5fd0f5; --good:#5fe0a8; --warn:#f7c45c; --bad:#ff8a6b;
  --amber:#ffe896;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:13px/1.45 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  overflow:hidden;
}
#app{display:flex;height:100vh;width:100vw}

/* ---------------- scene ---------------- */
#stage{position:relative;flex:1;min-width:0}
#scene{width:100%;height:100%;display:block;cursor:grab;touch-action:none}

#hud{position:absolute;top:14px;left:16px;pointer-events:none}
#hud h1{
  margin:0;font-size:15px;font-weight:650;letter-spacing:.02em;
  text-shadow:0 1px 8px #000a;
}
#hud p{margin:3px 0 0;font-size:11.5px;color:var(--dim);text-shadow:0 1px 8px #000a}

#presets{
  position:absolute;top:14px;right:16px;display:flex;gap:5px;flex-wrap:wrap;
  justify-content:flex-end;max-width:60%;
}
.preset{
  background:#0b1a24cc;border:1px solid var(--line);color:var(--dim);
  padding:5px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;
  backdrop-filter:blur(6px);transition:.14s;
}
.preset:hover{color:var(--ink);border-color:#2e5567}
.preset.active{background:#12384bcc;border-color:var(--accent);color:var(--accent)}

#hint{
  position:absolute;bottom:12px;left:16px;font-size:11px;color:#5d8092;
  pointer-events:none;text-shadow:0 1px 8px #000a;
}

#advisories{position:absolute;bottom:12px;right:16px;display:flex;
  flex-direction:column;gap:5px;align-items:flex-end;max-width:56%}
#adv-list{display:flex;flex-direction:column;gap:5px;align-items:flex-end;
  max-height:42vh;overflow-y:auto}
#adv-list::-webkit-scrollbar{width:6px}
#adv-list::-webkit-scrollbar-thumb{background:#1b3140;border-radius:3px}

/* Collapsed, the stack is one chip. Desktop opens by default and hides it. */
.adv-chip{
  order:2;background:#08151dd9;border:1px solid var(--line);color:var(--dim);
  border-radius:14px;padding:5px 11px;font-size:11px;cursor:pointer;
  backdrop-filter:blur(6px);border-left-width:2.5px;white-space:nowrap;
}
.adv-chip.a-good{border-left-color:var(--good);color:#a9e8cb}
.adv-chip.a-info{border-left-color:var(--accent);color:#a5dcf0}
.adv-chip.a-warn{border-left-color:var(--warn);color:#f0d59a}
.adv-chip.a-bad {border-left-color:var(--bad); color:#ffb9a5}
#advisories:not(.open) #adv-list{display:none}
.adv{
  font-size:11.5px;padding:5px 10px;border-radius:6px;
  background:#08151dd9;border:1px solid var(--line);backdrop-filter:blur(6px);
  border-left-width:2.5px;
}
.a-good{border-left-color:var(--good);color:#a9e8cb}
.a-info{border-left-color:var(--accent);color:#a5dcf0}
.a-warn{border-left-color:var(--warn);color:#f0d59a}
.a-bad {border-left-color:var(--bad); color:#ffb9a5}

/* ---------------- panel ---------------- */
#panel{
  width:352px;flex:none;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;transition:width .2s;
}
#panel.collapsed{width:46px}
#panel.collapsed .panel-body{display:none}
#panel.collapsed #btn-panel{transform:rotate(180deg)}

.panel-head{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap;
}
.panel-head .sp{flex:1}
button.act{
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  padding:4px 7px;border-radius:6px;font-size:11px;cursor:pointer;transition:.14s;
  white-space:nowrap;
}
button.act:hover{color:var(--ink);border-color:#2e5567}
#btn-panel{padding:5px 8px;transition:transform .2s,.14s}

.panel-body{overflow-y:auto;padding:12px;flex:1}
.panel-body::-webkit-scrollbar{width:8px}
.panel-body::-webkit-scrollbar-thumb{background:#1b3140;border-radius:4px}

h2.sec{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:#5d8496;margin:16px 0 8px;font-weight:600;
}
h2.sec:first-child{margin-top:0}

/* ---------------- telemetry ---------------- */
#telemetry{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tile{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;border-top:2px solid #24485a;
}
.tile.big{grid-column:span 1}
.tile-k{font-size:10px;color:#67909f;letter-spacing:.03em}
.tile-v{font-size:19px;font-weight:600;line-height:1.25;
  font-variant-numeric:tabular-nums;margin-top:1px}
.tile-v .u{font-size:10.5px;color:#67909f;font-weight:400;margin-left:3px}
.tile-s{font-size:10px;color:#537786;margin-top:1px}
.t-good{border-top-color:var(--good)}
.t-warn{border-top-color:var(--warn)}
.t-bad {border-top-color:var(--bad)}
.t-bad .tile-v{color:var(--bad)}
.t-warn .tile-v{color:var(--warn)}

/* ---------------- charts ---------------- */
#spark,#profile,#plan{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:2px 4px;margin-bottom:8px;
}
svg text{font:9.5px ui-monospace,Menlo,monospace;fill:#5d8496}
.domain,.tick line{stroke:#254354}
path.sp-line{fill:none;stroke:var(--amber);stroke-width:1.6}
line.ref{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;opacity:.65}
text.ref-lbl{fill:#4d8ba6}
rect.slack{fill:var(--bad);opacity:.20}
path.cable{fill:none;stroke:var(--accent);stroke-width:1.8}
line.plumb{stroke:#456b7d;stroke-width:1;stroke-dasharray:3 3}
circle.ballc{fill:#8fb4c4;stroke:#cfe8f2;stroke-width:1}
circle.flashc{fill:var(--amber)}
text.cap{fill:#4a7186;font-size:9px}
line.axis-h,line.axis-v{stroke:#22404f;stroke-width:1}
path.track{fill:none;stroke:#3d6b81;stroke-width:1.2;stroke-dasharray:2 3}
circle.n-boat{fill:#cfe8f2}
circle.n-ball{fill:#8fb4c4}
circle.n-flasher{fill:var(--amber)}
circle.n-lure{fill:var(--good)}
line.curarrow{stroke:#6fd3ff;stroke-width:1.6;opacity:.8}
text.curlbl{fill:#4d8ba6}

/* ---------------- controls ---------------- */
.ctl-group{margin-bottom:14px}
.ctl-group-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:#5d8496;margin-bottom:7px;font-weight:600;
}
.ctl{margin-bottom:11px}
.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctl-head label{font-size:11.5px;color:#a8c8d6}
.ctl-val{font-size:11.5px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.ctl-note{font-size:10px;color:#537786;margin-top:2px}
.ctl-select{
  width:100%;margin-top:4px;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:11.5px;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;
  background:transparent;margin-top:3px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;background:#1e3a4a;border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--accent);margin-top:-5px;border:2px solid #0b1720;
  box-shadow:0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-track{height:3px;background:#1e3a4a;border-radius:2px}
input[type=range]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:var(--accent);
  border:2px solid #0b1720;
}

@media (min-width:901px){
  /* Plenty of room on a desktop — always open, no chip needed. */
  .adv-chip{display:none}
}

@media (max-width:900px){
  /* Keep the advisories well clear of the 3D view until asked for. */
  #advisories{max-width:82%;bottom:10px;right:10px}
  #adv-list{max-height:34vh}
  .adv{font-size:11px;padding:5px 9px}
  #hint{display:none}
  #app{flex-direction:column}
  #panel{width:100%;height:46vh;border-left:none;border-top:1px solid var(--line)}
  #panel.collapsed{width:100%;height:46px}
  #telemetry{grid-template-columns:repeat(3,1fr)}

  /* The canvas is only ~54vh here, so everything floating over it has to
     earn its place. Title shrinks to one line, subtitle goes, and the seven
     presets become one horizontally scrollable row instead of wrapping into
     three and eating the top of the view. */
  #hud h1{font-size:12px}
  #hud p{display:none}
  #hud{top:8px;left:10px}

  #presets{
    top:6px;right:8px;left:auto;max-width:62%;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;
  }
  #presets::-webkit-scrollbar{display:none}
  .preset{padding:4px 8px;font-size:10.5px;flex:0 0 auto}

  /* The panel is half the screen; give the canvas more of it when a fish is
     on, since that is when you actually want to watch. */
  #panel{height:44vh}
}

/* ---------------- rigging legend ---------------- */
#legend{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;margin-bottom:8px;
}
.lg{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#7fa3b2;padding:2px 0}
.lg i{width:14px;height:2.5px;border-radius:2px;flex:none}
button.act.off{opacity:.45}

/* ---------------- fight panel ---------------- */
/* Pinned under the header — the rest of the panel scrolls beneath it, so
   the fight stays visible while you reach for the drag slider. */
#fight{
  flex:none;
  background:#12222c;
  border-bottom:1px solid #2a4a5c;
  padding:9px 12px 10px;
  box-shadow:0 8px 16px -10px #000c;
  position:relative;z-index:2;
}
#panel.collapsed #fight{display:none}
.fight-state{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.fight-state.good{color:var(--good)}
.fight-state.warn{color:var(--warn)}
.fight-state.bad{color:var(--bad)}
#fight-sub{font-size:11px;color:#7fa3b2;margin:2px 0 8px}
.fb{margin-bottom:6px}
.fb-k{font-size:10px;color:#67909f}
.fb-track{height:5px;background:#0b1720;border-radius:3px;overflow:hidden;margin:2px 0 1px}
.fb-fill{height:100%;border-radius:3px;transition:width .12s linear;background:var(--accent)}
.fb-fill.t-good{background:var(--good)}
.fb-fill.t-warn{background:var(--warn)}
.fb-fill.t-bad{background:var(--bad)}
.fb-v{font-size:10px;color:#8fb4c4;font-variant-numeric:tabular-nums}
#fight-log{margin-top:7px;border-top:1px solid #21404f;padding-top:5px;
  max-height:46px;overflow-y:auto}
#fight-log::-webkit-scrollbar{width:6px}
#fight-log::-webkit-scrollbar-thumb{background:#1b3140;border-radius:3px}
.fl{font-size:10.5px;color:#7fa3b2;padding:1px 0}
.fl:first-child{color:var(--ink)}

/* Controls still in your hands with a fish on — set apart from the rest,
   which is committed the moment the gear goes down. */
.ctl-group.live{
  background:#0f2029;border:1px solid #2a4a5c;border-radius:8px;
  padding:9px 10px 4px;margin-bottom:16px;
}
.ctl-group.live .ctl-group-title{color:var(--accent)}

/* Controls still in your hands with a fish on — set apart from the rest,
   which is committed the moment the gear goes down. */
.ctl-group.live{
  background:#0f2029;border:1px solid #2a4a5c;border-radius:8px;
  padding:9px 10px 4px;margin-bottom:16px;
}
.ctl-group.live .ctl-group-title{color:var(--accent)}

/* Device capability readout — only rendered on touch hardware. */
#device{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;margin-bottom:10px;
}
.dv{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;padding:2px 0}
.dv-k{color:#67909f}
.dv-v{text-align:right}
.dv-v.good{color:var(--good)}
.dv-v.bad{color:var(--warn)}