/* Hood Mine - the board is the brand: near black, one neon green, mono numerals. */
:root{
  --bg:#0A0C0B; --panel:#101413; --panel-2:#0D1110; --line:#1D2422;
  --ink:#E9EFEA; --muted:#8A948E; --dim:#5C6661;
  --green:#2BE07A; --green-dim:#1E8F50; --green-glow:rgba(43,224,122,.18);
  --amber:#E0B02B; --radius:14px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#080B0A}
body{
  color:var(--ink); font-family:var(--sans); background:transparent;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.6;
  min-height:100dvh; position:relative;
}
/* the backdrop is the banner, transposed: one flat field, a halftone, two arcs bleeding in from
   opposite corners, and the tile motif scattered at low opacity around a clear centre. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#090C0B}
.bg i{position:absolute;display:block}
.bg-dots{inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px);
  background-size:15px 15px,15px 15px;
  background-position:0 0,7.5px 7.5px}
.bg-arc{border-radius:50%;border:30px solid #0D2A19;opacity:.9}
.bg-arc.a1{width:46vw;height:92vh;left:-27vw;top:-58vh}
.bg-arc.a2{width:46vw;height:92vh;right:-27vw;bottom:-58vh}
.bg-tile{border-radius:22%;background:var(--green)}
.bg-grain{inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:900px){.bg-arc{border-width:20px;width:70vw;height:70vh}
 .bg-arc.a1{left:-42vw;top:-42vh}
 .bg-arc.a2{right:-42vw;bottom:-42vh}}

a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.green{color:var(--green)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- pieces */
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border:1px solid var(--line);
  border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.card{background:rgba(17,21,20,.66);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:700px){.pair{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1080px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid4{grid-template-columns:minmax(0,1fr)}}
h1{font-size:clamp(38px,6vw,66px);line-height:1.02;letter-spacing:-.035em;margin:.2em 0 .3em;font-weight:700}
h2{font-size:clamp(24px,3.4vw,36px);line-height:1.12;letter-spacing:-.025em;margin:0 0 14px;font-weight:700}
h3{font-size:17px;margin:0 0 8px;letter-spacing:-.01em;font-weight:600}
p{margin:0 0 14px;color:#C3CCC6}
section{padding:64px 0;border-top:1px solid var(--line)}
section.first{border-top:none;padding-top:52px}
.page{padding-bottom:20px}
.lead{font-size:18px;color:var(--muted);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;background:var(--green);
  color:#04140B;font-weight:700;font-size:14.5px;border:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:#4BEF92;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--panel);border-color:var(--green-dim)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.note{border-left:2px solid var(--green-dim);padding:2px 0 2px 16px;color:var(--muted);font-size:14px}

/* ---------------------------------------------------------------- board */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tile{position:relative;background:rgba(13,17,16,.72);border:1px solid var(--line);border-radius:14px;
  aspect-ratio:1;padding:10px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .14s,background .14s,transform .14s}
.tile:hover{border-color:var(--green-dim);transform:translateY(-2px)}
.tile .top{display:flex;justify-content:space-between;align-items:center;gap:6px;flex:0 0 auto}
.tile .id{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.08em}
.tile .pot{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  background:rgba(255,255,255,.04);border-radius:6px;padding:2px 6px}
.tile .pot.hot{color:var(--green);background:rgba(43,224,122,.12)}
.tile .body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;min-height:0;padding:2px}
.tile .mark{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:0 0 auto;
  background:#141917;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--ink)}
.tile .nm{font-size:11.5px;font-weight:600;line-height:1.15;color:var(--ink)}
.tile .bl{font-size:9.5px;line-height:1.25;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.tile .foot{flex:0 0 auto;display:flex;justify-content:flex-end}
.tile .jp{font-family:var(--mono);font-size:10px;color:var(--amber)}
.tile.open .body{color:var(--dim)}
.tile.open .slot{width:38px;height:38px;border-radius:10px;border:1px dashed #2A342F}
.tile.sel{border-color:var(--green);background:rgba(43,224,122,.09)}
.tile.sel::after{content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--green);pointer-events:none}
.tile.drawn{border-color:var(--green);background:rgba(43,224,122,.2);
  box-shadow:0 0 30px rgba(43,224,122,.25)}

/* ---------------------------------------------------------------- app shell */
/* the page scrolls normally: the dock is fixed, nothing else is */

.rail{display:flex;flex-direction:column;background:rgba(17,21,20,.66);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;backdrop-filter:blur(10px)}
.railbrand{display:flex;align-items:center;gap:11px;padding:4px 6px 14px}
.railbrand:hover{text-decoration:none}
.railbrand img{border-radius:11px}
.railbrand b{display:block;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.railbrand span span{font-family:var(--mono);font-size:11.5px;color:var(--green)}
.railseg a{flex:1;text-align:center;padding:8px 0;border-radius:8px;color:var(--muted);
  font-size:13px;font-weight:600}
.railseg a:hover{text-decoration:none;color:var(--ink)}
.railseg a.on{background:var(--panel);color:var(--ink)}
.rail nav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.rail nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--muted);font-size:14px}
.rail nav a:hover{text-decoration:none;color:var(--ink);background:rgba(255,255,255,.03)}
.rail nav a.on{background:var(--green-glow);color:var(--green)}
.rail nav a svg{opacity:.85;flex:0 0 auto}
.railfoot{margin-top:auto;padding-top:16px}
.railfoot p{font-size:12px;color:var(--dim);line-height:1.5;margin:0 0 10px;padding:0 4px}
.raillinks{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 4px 0;
  font-size:12px;color:var(--dim)}
.raillinks a{color:var(--muted)}

.col{overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.col::-webkit-scrollbar,.panel::-webkit-scrollbar{width:8px}
.col::-webkit-scrollbar-thumb,.panel::-webkit-scrollbar-thumb{background:#1C2422;border-radius:4px}
.panel{overflow-y:auto;overscroll-behavior:contain;background:rgba(17,21,20,.66);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;backdrop-filter:blur(10px)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:2px 2px 14px}
.pagehead h1{font-size:22px;margin:0;letter-spacing:-.02em}
.pagehead p{margin:4px 0 0;font-size:13px;color:var(--muted)}


@media(max-width:900px){
  .tile .bl{display:none}
  .tile .nm{font-size:10.5px}
}
@media(max-width:720px){
  .top .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:10px}
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .board{gap:6px}
  .tile{padding:6px;border-radius:10px}
  .tile .id{font-size:9px}
  .tile .pot{font-size:9px;padding:1px 4px}
  .tile .mark,.tile .slot{width:26px;height:26px;border-radius:8px;font-size:12px}
  .tile .nm{display:none}
  section{padding:44px 0}
  .hero{min-height:520px}
  .hero-art{width:min(420px,80vw);right:-12%;top:auto;bottom:-2%;transform:none;opacity:.55}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:rgba(8,11,10,.62)}
}

/* ---------------------------------------------------------------- agent */
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer}
.tabs button.on{background:var(--panel);color:var(--ink);border-color:#2A332F}
.feed{display:flex;flex-direction:column;gap:18px;padding-bottom:14px}
.msg{display:flex;gap:11px;max-width:76%}
.msg .av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;background:#141917;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--green);
  border:1px solid var(--line);overflow:hidden}
.msg .av img{width:100%;height:100%}
.msg .who{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:12.5px;flex-wrap:wrap}
.msg .who b{font-size:13px}
.msg .who .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--green);
  background:rgba(43,224,122,.1);padding:2px 7px;border-radius:5px}
.msg .who .t{color:var(--dim);font-size:11.5px}
.bub{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;
  padding:12px 15px;font-size:14px;line-height:1.55;color:#CBD4CE}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bub{background:rgba(43,224,122,.09);border-color:rgba(43,224,122,.2);color:var(--ink)}
.msg.me .who{justify-content:flex-end}
.txref{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  color:var(--dim);margin-top:9px}
.quoted{border-left:2px solid var(--line);padding-left:10px;margin-bottom:9px;font-size:12.5px;color:var(--dim)}
.composer{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 24%);
  padding:16px 0 2px}
.composer .box2{display:flex;gap:10px;align-items:center;background:rgba(17,21,20,.92);
  border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.composer input{border:none;background:transparent;font-family:var(--sans);font-size:14px;flex:1}
.composer button{width:36px;height:36px;border-radius:10px;border:none;background:var(--green);
  color:#04140B;font-size:16px;cursor:pointer;flex:0 0 auto}
.ask{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;
  padding:9px 0}
.ask b{font-family:var(--mono);font-size:13px}
.act{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.act:last-child{border-bottom:none}
.act .dot{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;background:rgba(43,224,122,.12)}
.act p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.act .t{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:5px;display:block}
.price{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.price b{font-family:var(--mono);font-size:26px;letter-spacing:-.02em}
.price span{font-family:var(--mono);font-size:12px;color:var(--green)}

/* ---------------------------------------------------------------- controls & data */
.meter{height:6px;border-radius:3px;background:#182019;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green-dim),var(--green));transition:width .3s}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:transparent;
  color:var(--muted);font-family:var(--mono);font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--green-dim);color:var(--ink)}
.chip.on{border-color:var(--green);color:var(--green)}
input[type=text],input[type=number],input,textarea{background:transparent;border:none;
  color:var(--ink);font-family:var(--mono);font-size:13px}
input:focus,textarea:focus{outline:none}

.stat{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;gap:12px}
.stat span{font-size:12.5px;color:var(--muted)}
.stat b{font-family:var(--mono);font-size:15px;font-weight:500}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.box{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.box em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-bottom:5px}
.box b{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:-.01em;display:block}
.seg{display:flex;background:rgba(255,255,255,.04);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:none;background:transparent;color:var(--muted);font-family:var(--sans);
  font-size:13px;font-weight:600;padding:7px 0;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.amt{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-top:8px}
.amt .cur{font-family:var(--mono);font-size:13px;color:var(--muted)}
.amt input{text-align:right;font-size:19px;flex:1}
.hint{font-size:12px;color:var(--dim);line-height:1.5;margin:10px 0 0}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.readout b{font-family:var(--mono);font-size:26px;letter-spacing:-.02em;color:var(--green)}
.phase{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.phase i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.phase.settling i{background:var(--amber);box-shadow:0 0 8px var(--amber)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);color:var(--muted)}
td.mono{font-family:var(--mono);color:var(--ink)}
code{font-family:var(--mono);font-size:.92em;background:#141917;padding:2px 6px;border-radius:5px;color:var(--green)}
pre{background:rgba(8,12,11,.75);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  overflow-x:auto;font-size:12.5px;line-height:1.72;margin:0 0 16px}
pre code{background:none;padding:0;color:#C3CCC6}
.codeblock{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 18px;
  background:rgba(8,12,11,.75)}
.codeblock header{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  background:rgba(43,224,122,.03)}
.codeblock header .dots{display:flex;gap:5px;margin-right:4px}
.codeblock header .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.codeblock header .dots i:first-child{background:var(--green-dim)}
.codeblock pre{border:none;border-radius:0;margin:0;background:transparent}
.badge{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid var(--line);color:var(--muted)}
.badge.ok{color:var(--green);border-color:rgba(43,224,122,.32);background:rgba(43,224,122,.07)}
.badge.wait{color:var(--amber);border-color:rgba(224,176,43,.3);background:rgba(224,176,43,.06)}
.addr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:rgba(11,15,14,.5);margin-bottom:10px;flex-wrap:wrap}
.addr .who{display:flex;flex-direction:column;gap:2px}
.addr .who b{font-size:14px;font-weight:600}
.addr .who span{font-size:12.5px;color:var(--muted)}
.addr .val{font-family:var(--mono);font-size:12.5px;color:var(--dim);word-break:break-all}
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.note{border-left:2px solid var(--green-dim);padding:2px 0 2px 16px;color:var(--muted);font-size:14px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:700px){.pair{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

/* ---------------------------------------------------------------- top bar, page, dock */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;
  padding:0 22px;height:62px;background:rgba(7,10,9,.78);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:11px}
.topbar .brand:hover{text-decoration:none}
.topbar .brand img{width:30px;height:30px;border-radius:9px}
.topbar .brand b{font-size:15px;letter-spacing:-.01em;color:var(--ink);display:block;line-height:1.1}
.topbar .brand span span{font-family:var(--mono);font-size:11px;color:var(--green)}
.tabnav{display:flex;gap:2px;margin-left:8px}
.tabnav a{padding:8px 14px;border-radius:9px;font-size:14px;color:var(--muted);font-weight:500}
.tabnav a:hover{text-decoration:none;color:var(--ink);background:rgba(255,255,255,.035)}
.tabnav a.on{color:var(--green);background:var(--green-glow)}
.topright{margin-left:auto;display:flex;align-items:center;gap:12px}
.roundpill{display:flex;align-items:center;gap:12px;padding:7px 14px;border:1px solid var(--line);
  border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.roundpill b{color:var(--ink);font-weight:500}
.btn.sm{padding:9px 16px;font-size:13.5px}

.page{max-width:1000px;margin:0 auto;padding:26px 22px 150px}
.pagetop{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.pagetop h1{font-size:23px;margin:0;letter-spacing:-.02em}
.pagetop p{margin:5px 0 0;font-size:13.5px;color:var(--muted)}

/* the round's figures, thin and split left/right, so the board keeps the height */
.statline{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin:2px 2px 16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.statline div{display:flex;align-items:baseline;gap:8px}
.statline .r:first-of-type{margin-left:auto}
.statline em{font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.statline b{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-.01em}
.statline span{font-family:var(--mono);font-size:11px;color:var(--dim)}
@media(max-width:760px){.statline{gap:14px}.statline .r:first-of-type{margin-left:0}}

.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:20px}
.strip div{background:rgba(13,17,16,.85);padding:14px 16px}
.strip em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
.strip b{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.02em;display:block}
.strip small{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:14px 22px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,9,8,.92) 34%);pointer-events:none}
.dockinner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:rgba(15,19,18,.94);border:1px solid #222C28;border-radius:16px;padding:13px 16px;
  pointer-events:auto;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.dockinner .f{display:flex;flex-direction:column;gap:3px}
.dockinner .f em{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}
.dockinner .f b{font-family:var(--mono);font-size:15px;font-weight:500}
.dockinner .sp{margin-left:auto;display:flex;align-items:center;gap:10px}
.dock.idle .dockinner{opacity:.62}

.modalwrap{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;
  background:rgba(4,6,5,.72);backdrop-filter:blur(6px)}
.modalwrap.open{display:grid}
.modal{width:min(440px,100%);background:rgba(17,21,20,.98);border:1px solid #232D29;
  border-radius:18px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h3{font-size:18px;margin:0 0 4px}
.modal .x{float:right;border:none;background:transparent;color:var(--dim);font-size:20px;
  cursor:pointer;line-height:1;margin:-4px -4px 0 0}
@media(max-width:760px){
  .topbar{gap:12px;padding:0 14px;overflow-x:auto}
  .tabnav a{padding:8px 10px;font-size:13.5px}
  .roundpill{display:none}
  .page{padding:18px 14px 150px}
  .page .board{--bw:min(100%, calc(100dvh - 300px))}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock{padding:10px 12px 12px}
  .dockinner{gap:12px;padding:11px 13px}
}

/* The board is square, so it is the HEIGHT that decides how big it can be. It sizes itself to
   whatever the viewport has left once the bar, the strip and the dock have taken their share,
   and everything inside it scales with the board rather than with the page. */
.page .board{
  --bw:min(720px, calc(100dvh - 332px), 100%);
  width:var(--bw);margin:0 auto;gap:clamp(4px,1.4cqw,9px);
  container-type:inline-size;
}
.page .tile{padding:clamp(4px,1.5cqw,10px);border-radius:clamp(7px,2cqw,14px)}
.page .tile .id{font-size:clamp(7px,1.7cqw,10.5px)}
.page .tile .pot{font-size:clamp(7px,1.7cqw,10.5px);padding:1px clamp(2px,0.9cqw,6px)}
.page .tile .slot{width:clamp(12px,5cqw,30px);height:clamp(12px,5cqw,30px);border-radius:22%}
.page .tile .nm{font-size:clamp(6px,1.7cqw,10.5px);line-height:1.15}
.page .tile .jp{font-size:clamp(6px,1.6cqw,10px)}
.page .tile [data-info]{opacity:0;transition:opacity .12s;padding:0 clamp(3px,1cqw,7px);
  font-size:clamp(7px,1.5cqw,10px);line-height:1.5}
.page .tile:hover [data-info],.page .tile.sel [data-info]{opacity:1}
/* below this the slot art is noise: keep the coordinate and the amount, drop the rest */
@container (max-width: 430px){
  .page .tile .slot,.page .tile .nm,.page .tile [data-info]{display:none}
  .page .tile .body{min-height:0}
}