:root{
  --bg:#2E5864; --bg2:#254A55; --panel:#20424C; --line:rgba(241,251,252,.14);
  --ink:#F1FBFC; --dim:rgba(241,251,252,.62); --faint:rgba(241,251,252,.36);
  --accent:#38E7EF; --accent-ink:#062226; --called:#FF7A66; --standing:#9CFFD6;
  --disp:'Chakra Petch',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --rail-h:64px;
}
*{box-sizing:border-box}
html,body{background:var(--bg); margin:0; padding:0;}
body{
  color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.5;
  padding-bottom:calc(var(--rail-h) + 14px);
  min-height:100vh;
}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit}

/* ---------- chrome: a slim top strip, name + connect (the CA bar lives at the bottom instead) ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg2);
}
.mark{display:flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--disp); font-weight:700; font-size:15px;}
.mark img{width:22px; height:22px; border-radius:5px;}
.navi{display:flex; gap:14px; font-size:13px;}
.navi a{text-decoration:none; color:var(--dim);}
.navi a:hover{color:var(--ink)}
#connectBtn{
  background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:8px;
  padding:7px 12px; font-size:13px; cursor:pointer;
}
#connectBtn.active{border-color:var(--accent); color:var(--accent)}

/* font-size:28px on the wrapper itself is a measurement neutraliser, not a design choice: dropkit.pagecheck's readout
   detector walks every sized block and calls the first one with (fs<20 && text>160 chars) "text" — a large
   generic wrapper around the readout number would win that race before the number itself is reached, since a
   parent sorts before its child at an identical top. Every real text leaf below sets its own explicit font-size
   (see .readoutCap, .blurb, .row, .brow, .prose p, …), so nothing actually renders at 28px. */
main{max-width:1180px; margin:0 auto; padding:0 16px 24px; font-size:28px;}

/* ---------- readout: the poster headline, first thing under the chrome ---------- */
.readout{padding:28px 2px 18px;}
.readout h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(30px,6.4vw,52px); line-height:1.08;
  margin:0; letter-spacing:-0.01em; color:var(--ink); max-width:14ch;
}
.readout h1 small{font-size:0.32em; font-weight:600; color:var(--accent); margin-left:8px; vertical-align:middle;}
.readoutCap{margin:10px 0 0; color:var(--dim); font-size:14.5px; max-width:56ch;}
.readoutSub{display:flex; gap:8px; margin-top:14px; font-size:13px; color:var(--faint); flex-wrap:wrap; align-items:baseline;}
.readoutSub b{color:var(--accent); font-weight:700; font-family:var(--disp); font-size:22px;}
.readoutActions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.cmd{
  font-family:var(--mono); font-size:14px; border-radius:9px; padding:11px 18px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
}
.cmd.pri{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
.cmd.quiet{background:transparent;}
.cmd:disabled{opacity:.45; cursor:not-allowed;}

.blurb{color:var(--dim); font-size:13.5px; max-width:62ch; margin:2px 0 20px;}
.rulesLink{font-size:13px; color:var(--accent); text-decoration:underline; cursor:pointer; background:none; border:0; padding:0; font-family:inherit;}

/* ---------- the book: the full 1-100 ledger table of margin depth ---------- */
.book{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;}
.bookHead{
  display:grid; grid-template-columns:44px 1fr 60px 70px; gap:8px; padding:9px 12px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  border-bottom:1px solid var(--line); background:var(--bg2);
}
.bookRows{max-height:420px; overflow-y:auto;}
.brow{
  display:grid; grid-template-columns:44px 1fr 60px 70px; gap:8px; padding:7px 12px;
  align-items:center; font-size:12.5px; border-bottom:1px solid rgba(241,251,252,.06); cursor:pointer;
}
.brow:hover{background:rgba(241,251,252,.05)}
.brow .ln{font-weight:600; color:var(--dim)}
.brow .bar{height:8px; border-radius:5px; background:rgba(241,251,252,.07); position:relative;}
.brow .bar i{position:absolute; inset:0; border-radius:5px; background:var(--accent); opacity:.8;}
.brow .fig{text-align:right; color:var(--faint); font-size:11.5px;}
.brow .lev{text-align:right; color:var(--faint); font-size:11.5px;}
.brow.walked .ln{color:var(--accent); font-weight:700;}
.brow.called{opacity:.5;}
.brow.called .bar i{background:var(--called); opacity:.7;}
.brow.own{outline:1px solid var(--accent); outline-offset:-1px;}
.bookEmpty{padding:26px 14px; color:var(--faint); font-size:13px; text-align:center;}

/* ---------- tape of recent moves ---------- */
.tape{margin-top:22px;}
.tape h2{font-family:var(--disp); font-size:15px; margin:0 0 8px;}
.row{display:grid; grid-template-columns:70px 1fr auto auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(241,251,252,.08); font-size:12.5px;}
.chip{font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--panel); color:var(--dim); border:1px solid var(--line); text-transform:uppercase; letter-spacing:.04em; justify-self:start;}
.row .who a{color:var(--accent); text-decoration:none;}
.row .fig{text-align:right; color:var(--dim);}
.row .t{text-align:right; color:var(--faint);}
.void{padding:20px 0; color:var(--faint); font-size:13px;}

/* ---------- settled round cards (ledger view) ---------- */
.rcard{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; background:var(--panel); font-size:12.5px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}

.prose{max-width:64ch;}
.prose h3{font-family:var(--disp); font-size:16px; margin:22px 0 6px;}
.prose p{color:var(--dim); font-size:13.5px;}
.prose code{background:var(--panel); padding:2px 6px; border-radius:5px;}

/* ---------- CA rail: fixed at the bottom, always on screen ---------- */
.caRail{
  position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--rail-h);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:rgba(32,66,76,.96); backdrop-filter:blur(6px); border-top:1px solid var(--line);
}
.caRail .caK{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); flex:0 0 auto;}
.caRail code{
  font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow-x:auto; white-space:nowrap;
  flex:1 1 auto; min-width:0; -webkit-user-select:all; user-select:all;
}
.caRail #copyCa{flex:0 0 auto; background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px; padding:8px 12px; font-size:12.5px; font-weight:600; cursor:pointer;}
.caRail .gmgn{flex:0 0 auto; font-size:12px; color:var(--dim); text-decoration:underline; padding:6px 2px;}

/* ---------- footer ---------- */
.ftr{max-width:1180px; margin:10px auto 0; padding:14px 16px 4px; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; color:var(--faint); font-size:11.5px; border-top:1px solid var(--line);}
.ftr a{color:var(--faint); text-decoration:underline;}

/* ---------- drawer / modal ---------- */
#modal{position:fixed; inset:0; z-index:60; background:rgba(6,20,24,.6); display:flex; align-items:flex-end; justify-content:center;}
.drawer{background:var(--bg2); border:1px solid var(--line); border-radius:16px 16px 0 0; width:100%; max-width:460px; padding:16px; max-height:82vh; overflow-y:auto;}
.drawerHead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:var(--disp); font-weight:600;}
#modalClose{background:none; border:0; color:var(--ink); font-size:20px; cursor:pointer;}
.stake .note{color:var(--dim); font-size:12.5px; margin-bottom:10px;}
.stake .warn{color:var(--called); font-size:12px; margin-top:8px;}
.lineRow{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.lineRow input[type=range]{flex:1;}
.lineRow .lv{width:38px; text-align:center; font-weight:700; color:var(--accent);}
.stake input[type=text],.stake input[type=number]{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:10px 12px; font-family:var(--mono); font-size:14px; margin-bottom:8px;
}
.presets{display:flex; gap:6px; margin-bottom:8px;}
.presets button{flex:1; padding:7px 0; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--dim); font-size:12px; cursor:pointer;}
.presets button.active{border-color:var(--accent); color:var(--accent);}
.wl{display:flex; flex-direction:column; gap:6px;}
.wl button{display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;}
.wl img{width:22px; height:22px; border-radius:5px;}

.toast{position:fixed; left:50%; bottom:calc(var(--rail-h) + 18px); transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:8px; font-size:13px; z-index:80; box-shadow:0 6px 20px rgba(0,0,0,.3);}

/* ---------- ~720-1000px: wider measure, larger type ---------- */
@media (min-width:720px){
  .readout h1{font-size:clamp(38px,5vw,58px);}
  .bookHead,.brow{grid-template-columns:56px 1fr 90px 90px;}
}

/* ---------- >=1000px: the page recomposes, two columns ---------- */
@media (min-width:1000px){
  main{
    display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:start; padding-top:8px;
  }
  .primary{grid-column:1;}
  .rail{grid-column:2; position:sticky; top:20px;}
  .readout h1{font-size:clamp(42px,4.2vw,64px);}
  .book{max-height:calc(100vh - 40px);}
  .bookRows{max-height:calc(100vh - 130px);}
  .settledWrap,.lineWrap,.howWrap{max-width:760px;}
}