/* ── Yuragi Tank ─────────────────────────────────────────────
   Palette: abyss / foam / plankton amber / biolume cyan
   Type:    Instrument Serif (display) · IBM Plex Sans (ui) · IBM Plex Mono (data)
──────────────────────────────────────────────────────────── */
:root{
  --abyss:#04121b;
  --water-hi:#07222f;
  --panel:rgba(6,22,32,.86);
  --panel-line:rgba(140,190,200,.14);
  --foam:#d9e6ea;
  --mute:#7c96a0;
  --amber:#e6a45c;
  --amber-dim:rgba(230,164,92,.16);
  --cyan:#6fd6c4;
  --cyan-dim:rgba(111,214,196,.14);
  --coral:#e07a6a;
  --r:10px;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --serif:"Instrument Serif",serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--abyss);color:var(--foam);
  font:400 14px/1.5 var(--sans);
  overflow:hidden;
}
#tank{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:crosshair}

#depth-caption{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  font:italic 15px/1 var(--serif);color:rgba(217,230,234,.32);
  letter-spacing:.04em;pointer-events:none;user-select:none;
  transition:opacity 2s;
}

/* ── panels ── */
.panel{
  position:fixed;top:16px;bottom:16px;
  background:var(--panel);backdrop-filter:blur(14px);
  border:1px solid var(--panel-line);border-radius:14px;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(140,190,200,.25) transparent;
}
#rail{left:16px;width:272px;padding:20px 18px 14px}
#inspector{right:16px;width:344px;padding:18px}
.hidden{display:none!important}

.wordmark h1{
  margin:0;font:400 30px/1 var(--serif);letter-spacing:.01em;
}
.wordmark h1 em{color:var(--cyan);font-style:italic}
.wordmark .sub{margin:6px 0 0;color:var(--mute);font-size:12px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.dot.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.dot.off{background:var(--coral)}
.dot.poll{background:var(--amber)}

h2{
  font:italic 17px/1.2 var(--serif);font-weight:400;color:var(--foam);
  margin:0 0 8px;
}
section{margin-top:22px}
.hint{color:var(--mute);font-size:12px;margin:0 0 10px}

/* phase ring */
.ring-block{position:relative;display:flex;justify-content:center;margin-top:18px}
#phase-ring{width:190px;height:190px}
.ring-read{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;gap:2px;
}
.mono{font-family:var(--mono)}
.mono.big{font-size:26px;color:var(--cyan)}
.mono.tiny{font-size:10px}
.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.world-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.world-stats .stat{display:flex;flex-direction:column;gap:1px}
.world-stats .tip{grid-column:1/-1}
.world-stats .mono{font-size:13px}
#stat-tip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}

/* forms & buttons */
input[type=text],textarea,select{
  width:100%;background:rgba(4,18,27,.7);border:1px solid var(--panel-line);
  border-radius:8px;color:var(--foam);padding:9px 11px;font:inherit;
}
input:focus,textarea:focus,select:focus,button:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent;
}
#spawn-form{display:flex;gap:8px}
#spawn-form input{flex:1;min-width:0}

.btn{
  border:1px solid var(--panel-line);border-radius:8px;cursor:pointer;
  font:500 13px var(--sans);padding:9px 14px;color:var(--foam);
  background:rgba(4,18,27,.7);transition:background .15s,border-color .15s;
}
.btn:hover{border-color:rgba(140,190,200,.4)}
.btn.amber{background:var(--amber-dim);border-color:rgba(230,164,92,.45);color:var(--amber)}
.btn.amber:hover{background:rgba(230,164,92,.26)}
.btn.cyan{background:var(--cyan-dim);border-color:rgba(111,214,196,.45);color:var(--cyan)}
.btn.ghost{width:100%;text-align:left;margin-top:8px}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:default}

.toggle{display:flex;gap:8px;align-items:center;color:var(--mute);font-size:13px;padding:4px 0;cursor:pointer}
.toggle input{accent-color:var(--cyan)}

.rail-foot{margin-top:26px;padding-top:12px;border-top:1px solid var(--panel-line);
  font-size:12px;color:var(--mute)}
.rail-foot a{color:var(--mute)}
.rail-foot a:hover{color:var(--cyan)}

/* ── inspector ── */
#inspector .close{
  position:absolute;top:10px;right:12px;background:none;border:0;color:var(--mute);
  font-size:22px;cursor:pointer;line-height:1;z-index:2;
}
.insp-head{display:flex;gap:14px;align-items:center}
.portrait{
  width:84px;height:84px;flex:none;border-radius:12px;overflow:hidden;
  background:rgba(4,18,27,.7);border:1px solid var(--panel-line);
  display:flex;align-items:center;justify-content:center;
}
.portrait svg{width:100%;height:100%}
.insp-head h2{font-size:26px;font-style:normal;margin:0}
.insp-head .decision{
  display:inline-block;margin-top:4px;padding:2px 9px;border-radius:99px;
  background:var(--cyan-dim);color:var(--cyan);font:500 11px var(--mono);
  letter-spacing:.06em;text-transform:uppercase;
}
.idline{color:var(--mute);font-size:11px;margin-top:5px;word-break:break-all}

.traits{margin-top:16px;display:grid;gap:9px}
.trait{display:grid;grid-template-columns:78px 1fr 34px;gap:9px;align-items:center;font-size:12px}
.trait .bar{height:5px;border-radius:99px;background:rgba(140,190,200,.12);overflow:hidden}
.trait .bar i{display:block;height:100%;border-radius:99px;background:var(--cyan);transition:width .8s ease}
.trait.amber .bar i{background:var(--amber)}
.trait .v{font-family:var(--mono);color:var(--mute);text-align:right}

.raw-state{
  margin-top:14px;padding:10px 12px;border:1px dashed var(--panel-line);border-radius:8px;
  font:11px/1.7 var(--mono);color:var(--mute);display:grid;grid-template-columns:1fr 1fr;
}
.raw-state b{color:var(--foam);font-weight:500}

/* tabs */
.tabs{display:flex;gap:2px;margin-top:18px;border-bottom:1px solid var(--panel-line)}
.tabs button{
  background:none;border:0;color:var(--mute);font:500 12px var(--sans);
  padding:8px 10px;cursor:pointer;border-bottom:2px solid transparent;
}
.tabs button.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.tabpane{padding-top:14px}

/* chat */
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:10px}
.msg{max-width:88%;padding:7px 11px;border-radius:10px;font-size:13px}
.msg.user{align-self:flex-end;background:var(--amber-dim);color:var(--foam)}
.msg.fish{align-self:flex-start;background:rgba(111,214,196,.10);color:var(--foam)}
.msg .who{display:block;font:10px var(--mono);color:var(--mute);margin-bottom:2px}
.chat-row{display:flex;gap:8px}
.chat-row input{flex:1;min-width:0}

/* knowledge */
.kfact{padding:8px 10px;border:1px solid var(--panel-line);border-radius:8px;margin-bottom:7px;font-size:12px}
.kfact .conf{float:right;font-family:var(--mono);color:var(--cyan)}
.kfact .kv{color:var(--mute)}
.kroot{font:10px var(--mono);color:var(--mute);word-break:break-all;margin-top:8px}

/* experience form */
.exp-form{display:grid;gap:8px}
.exp-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* replay */
.verdict{
  margin-top:12px;padding:12px;border-radius:10px;font-size:13px;
  border:1px solid var(--panel-line);
}
.verdict.ok{border-color:rgba(111,214,196,.5);background:var(--cyan-dim)}
.verdict.bad{border-color:rgba(224,122,106,.5);background:rgba(224,122,106,.12)}
.verdict .h{font:italic 16px var(--serif);margin-bottom:6px}
.hashline{font:10px/1.6 var(--mono);color:var(--mute);word-break:break-all;margin-top:4px}
.hashline b{color:var(--foam);font-weight:500}

.claim-box{margin-top:14px;font-size:11px;color:var(--mute)}
.claim-box code{
  display:block;font:10px var(--mono);word-break:break-all;color:var(--amber);
  background:rgba(4,18,27,.7);padding:7px 9px;border-radius:6px;margin-top:5px;
}

/* ── modal ── */
#modal-backdrop{
  position:fixed;inset:0;background:rgba(2,8,12,.66);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:40;
}
.modal{
  width:min(560px,92vw);max-height:84vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;
  padding:22px;
}
.modal h2{font-size:24px}
.game-card{
  border:1px solid var(--panel-line);border-radius:10px;padding:12px 14px;margin-top:10px;
  cursor:pointer;transition:border-color .15s;
}
.game-card:hover,.game-card.sel{border-color:rgba(111,214,196,.5)}
.game-card .gl{font-weight:600}
.game-card .gb{color:var(--mute);font-size:12px;margin-top:2px}
.game-card .gr{font:10px var(--mono);color:var(--cyan);margin-top:5px}
.pick-row{display:grid;gap:8px;margin-top:14px}
.result-kv{margin-top:14px;font:12px/1.8 var(--mono);white-space:pre-wrap;word-break:break-word;
  background:rgba(4,18,27,.7);border-radius:8px;padding:12px}
.result-title{font:italic 20px var(--serif);color:var(--amber);margin-top:16px}

/* leaderboard */
.modal-tabs{margin-top:14px}
.lb-row{
  display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;
  padding:8px 4px;border-bottom:1px solid var(--panel-line);font-size:13px;
}
.lb-rank{font-size:15px;text-align:center}
.lb-name{font-weight:600}
.lb-wl{color:var(--mute);font:12px var(--mono)}
.lb-rate{color:var(--cyan);font:12px var(--mono);min-width:38px;text-align:right}

/* toasts */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
  padding:10px 16px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:rise .3s ease;
}
.toast.err{border-color:rgba(224,122,106,.5);color:#f0b7ad}
.toast.ok{border-color:rgba(111,214,196,.5);color:var(--cyan)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* mobile */
#mobile-tabs{display:none}
@media (max-width:900px){
  #rail{left:8px;right:8px;width:auto;top:auto;bottom:60px;max-height:62vh;transform:translateY(110%);transition:transform .25s}
  #inspector{left:8px;right:8px;width:auto;top:auto;bottom:60px;max-height:70vh;transform:translateY(110%);transition:transform .25s}
  .panel.open{transform:none}
  #rail.open,#inspector.open{display:block}
  #mobile-tabs{
    display:flex;position:fixed;left:8px;right:8px;bottom:8px;z-index:30;gap:6px;
  }
  #mobile-tabs button{
    flex:1;padding:11px;border-radius:10px;border:1px solid var(--panel-line);
    background:var(--panel);color:var(--mute);font:500 13px var(--sans);
  }
  #mobile-tabs button.active{color:var(--cyan);border-color:rgba(111,214,196,.5)}
  #depth-caption{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}