/* Scantfall — five ledges over a void. Dark ground, one amber accent, slabs that tip and fall. */
:root{
  --void:#090B12; --void2:#0D0F14; --slab:#121520; --slabEdge:#1E2230;
  --ink:#F2EFEA; --dim:#8A8E9B; --faint:#565B69;
  --amber:#F5A524; --amberSoft:rgba(245,165,36,.16); --amberLine:rgba(245,165,36,.42);
  --fall:#E2493B; --fallSoft:rgba(226,73,59,.14);
  --strip-h:62px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--void);color:var(--ink);overflow-x:hidden}
body{font:16px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  padding-top:var(--strip-h);padding-bottom:env(safe-area-inset-bottom);
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(245,165,36,.07),transparent 60%)}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,.tick,.slabNo,.bigNum,.hero{font-family:"Archivo Black","IBM Plex Sans",sans-serif;font-weight:400;letter-spacing:-.01em}

/* ---------- the status strip: chrome that is also the instrument ---------- */
.strip{position:fixed;top:0;left:0;right:0;height:var(--strip-h);z-index:40;display:flex;align-items:center;gap:12px;
  padding:0 14px;background:rgba(9,11,18,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--slabEdge)}
.ident{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
.ident img{width:30px;height:30px;border-radius:7px}
.ident b{font-family:"Archivo Black",sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:439px){.ident b{display:none}}
.clockface{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"no tick" "rail rail";gap:2px 10px;align-items:baseline}
.cullno{grid-area:no;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick{grid-area:tick;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;color:var(--amber)}
.rail{grid-area:rail;display:block;height:3px;border-radius:2px;background:var(--slabEdge);overflow:hidden}
.rail i{display:block;height:100%;width:0;background:var(--amber);transition:width .9s linear}
.sealed{display:none}
.strip.isSealed .tick{color:var(--fall)}
.strip.isSealed .rail i{background:var(--fall)}
.strip.isSealed .sealed{display:block;grid-area:no;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fall)}
.strip.isSealed .cullno{display:none}
.hail{flex:0 0 auto;padding:8px 13px;border-radius:999px;border:1px solid var(--slabEdge);background:var(--slab);
  font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.hail.on{border-color:var(--amberLine);color:var(--amber)}

/* ---------- stage ---------- */
.stage{width:100%;max-width:560px;margin:0 auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:18px}
.hero{font-size:25px;line-height:1.1;margin:2px 0 6px}
.hero em{font-style:normal;color:var(--amber)}
.lede{color:var(--dim);font-size:14px;margin:0 0 4px}

/* ---------- the deck of ledges ---------- */
.deck{display:flex;flex-direction:column;gap:15px;min-width:0}
.deck-inner{display:flex;flex-direction:column;gap:9px}
.ledge{position:relative;border:1px solid var(--slabEdge);border-radius:14px;padding:11px 13px 12px;
  background:linear-gradient(180deg,var(--slab),#0C0E15);box-shadow:0 10px 24px -18px #000;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ledge[data-tap="1"]{cursor:pointer}
.ledge[data-tap="1"]:active{transform:scale(.988)}
.ledge.isScores{border-color:var(--amberLine);box-shadow:0 0 0 1px rgba(245,165,36,.1),0 14px 30px -20px var(--amber)}
.ledge.isFalls{border-color:rgba(226,73,59,.5)}
.ledge.isMine{background:linear-gradient(180deg,#171a26,#0C0E15)}
.slabTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.slabNo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ledge.isMine .slabNo{color:var(--ink)}
.verdict{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--slabEdge);color:var(--faint)}
.verdict.vScores{color:var(--amber);border-color:var(--amberLine);background:var(--amberSoft)}
.verdict.vFalls{color:var(--fall);border-color:rgba(226,73,59,.45);background:var(--fallSoft)}
.verdict.vFull{color:var(--dim)}
.pips{display:flex;flex-wrap:wrap;gap:5px;min-height:16px;align-items:center}
.pip{width:11px;height:11px;border-radius:3px;background:#262B3A}
.pip.pScores{background:var(--amber)}
.pip.pFalls{background:var(--fall)}
.pip.pMine{outline:2px solid var(--ink);outline-offset:1px}
.pipMore{font-size:11px;color:var(--faint);margin-left:2px}
.hollow{font-size:12px;color:var(--faint);letter-spacing:.04em}
.hollowRule{display:block;width:44px;height:2px;border-radius:2px;background:#1A1E2A}
.ledge.isEmpty{padding:9px 13px 10px;background:#0B0D13;border-style:dashed}
.ledge.isEmpty .pips{min-height:0}
.ledge.isEmpty .slabFoot{margin-top:7px}
.slabFoot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px}
.tally{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.tally b{color:var(--ink);font-size:15px}
.here{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.tipping{animation:tip .75s cubic-bezier(.5,0,.85,.4) forwards}
@keyframes tip{
  0%{transform:none;opacity:1}
  22%{transform:rotate(-2.4deg) translateY(4px)}
  100%{transform:rotate(7deg) translateY(190px);opacity:0}
}

/* ---------- the flank: log, standings, primer ---------- */
.flank{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{border:1px solid var(--slabEdge);border-radius:14px;background:var(--void2);overflow:hidden}
.panelTop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid var(--slabEdge)}
.panelTop h2{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:0;color:var(--dim)}
.panelTop small{font-size:11px;color:var(--faint)}
.panelBody{padding:10px 13px 13px}
.logline{display:grid;grid-template-columns:52px 1fr auto;gap:9px;align-items:baseline;padding:7px 0;border-bottom:1px solid #14172099;font-size:13px}
.logline:last-child{border-bottom:0}
.logline i{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.logline span{color:var(--dim);min-width:0}
.logline b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:12.5px}
.logline em{font-style:normal;color:var(--fall)}
.logline u{text-decoration:none;color:var(--amber)}
.roster{display:flex;flex-direction:column;gap:6px}
.rosterRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;font-size:13px}
.rosterRow code{font-family:"IBM Plex Sans",sans-serif;color:var(--dim);font-size:12.5px}
.rosterRow s{text-decoration:none;color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.rosterRow b{color:var(--amber);font-variant-numeric:tabular-nums}
.chipNo{width:20px;height:20px;border-radius:6px;background:#1A1E2A;display:grid;place-items:center;font-size:11px;color:var(--dim)}
.primer{font-size:13.5px;color:var(--dim);line-height:1.62}
.primer b{color:var(--ink)}
.primer p{margin:0 0 9px}
.primer p:last-child{margin:0}
.quiet{color:var(--faint);font-size:13px;padding:4px 0}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--slabEdge);border-radius:12px;overflow:hidden;border:1px solid var(--slabEdge)}
.stat div{background:var(--void2);padding:10px 11px}
.stat dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0 0 3px}
.stat dd{margin:0;font-size:17px;font-family:"Archivo Black",sans-serif;font-variant-numeric:tabular-nums}

/* ---------- actions ---------- */
.pitch{border:1px solid var(--amberLine);background:var(--amberSoft);border-radius:14px;padding:12px 13px;font-size:13.5px;color:var(--ink)}
.pitch b{color:var(--amber)}
.act{display:block;width:100%;padding:14px;border-radius:13px;background:var(--amber);color:#150C00;
  font-family:"Archivo Black",sans-serif;font-size:15px;letter-spacing:.02em;text-align:center}
.act[disabled]{background:#1B1F2B;color:var(--faint)}
.act.pale{background:var(--slab);color:var(--ink);border:1px solid var(--slabEdge)}
.buy{display:block;text-align:center;padding:12px;border-radius:13px;border:1px solid var(--slabEdge);background:var(--slab);
  text-decoration:none;font-size:14px;letter-spacing:.02em}
.rowActs{display:flex;flex-direction:column;gap:9px}

/* ---------- footer ---------- */
.foot{max-width:560px;margin:0 auto;padding:22px 14px 34px;color:var(--faint);font-size:12px;line-height:1.7}
.foot a{color:var(--dim)}
.foot .ca{word-break:break-all;color:var(--dim);font-size:11.5px}
.footNav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.footNav a{text-decoration:none;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ---------- drawer + flash ---------- */
.drawer[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(4,5,7,.72);display:flex;align-items:flex-end;justify-content:center}
.drawerBox{width:100%;max-width:520px;background:var(--void2);border:1px solid var(--slabEdge);border-radius:18px 18px 0 0;padding:15px 16px 24px;max-height:86vh;overflow:auto}
.drawerTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawerTop span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.drawerTop button{font-size:26px;line-height:1;color:var(--faint);padding:0 4px}
.drawerNote{font-size:13.5px;color:var(--dim);line-height:1.6;margin:0 0 13px}
.drawerNote b{color:var(--ink)}
.flash{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;background:#171B26;border:1px solid var(--slabEdge);
  color:var(--ink);padding:10px 15px;border-radius:999px;font-size:13px;max-width:90vw;text-align:center}
.wallets{display:flex;flex-direction:column;gap:8px}
.wallets button{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--slabEdge);border-radius:12px;background:var(--slab);font-size:14px}
.wallets img{width:22px;height:22px;border-radius:6px}

/* ---------- tables for the ledger / a wallet ---------- */
.sheetScroll{overflow-x:auto}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.grid5 span{text-align:center;padding:5px 0;border-radius:7px;background:#14172099;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.grid5 span.gFalls{color:var(--fall)}
.grid5 span.gScores{color:var(--amber)}

/* ---------- wider than a phone: same column, more room ---------- */
@media (min-width:640px){
  :root{--strip-h:68px}
  .stage{max-width:720px;padding:22px 20px 10px;gap:22px}
  .foot{max-width:720px;padding:26px 20px 40px}
  .hero{font-size:33px}
  .lede{font-size:15px}
  .tick{font-size:22px}
  .ledge{padding:14px 16px 15px;border-radius:16px}
  .pip{width:13px;height:13px}
  .tally b{font-size:17px}
  .stat dd{font-size:20px}
}

/* ---------- desktop: the board keeps the room, the record moves beside it ---------- */
@media (min-width:1000px){
  :root{--strip-h:74px}
  .strip{padding:0 26px;gap:22px}
  .ident img{width:34px;height:34px}
  .ident b{font-size:16px}
  .clockface{max-width:420px;margin:0 auto}
  .tick{font-size:26px}
  .stage{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 372px;align-items:start;gap:26px;padding:30px 26px 14px}
  .foot{max-width:1180px;padding:30px 26px 48px}
  .hero{font-size:42px;margin-bottom:8px}
  .lede{font-size:16px}
  .deck{gap:20px}
  .deck-inner{gap:11px}
  .ledge{padding:17px 20px 18px;border-radius:18px}
  .slabNo{font-size:13px}
  .pip{width:15px;height:15px;border-radius:4px}
  .tally{font-size:14px}
  .tally b{font-size:19px}
  .flank{position:sticky;top:calc(var(--strip-h) + 26px)}
  .stat dd{font-size:21px}
  @keyframes tip{0%{transform:none;opacity:1}22%{transform:rotate(-2deg) translateY(5px)}100%{transform:rotate(6deg) translateY(240px);opacity:0}}
}
@media (min-width:1280px){
  .stage{grid-template-columns:minmax(0,1fr) 404px}
  .hero{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .tipping{animation:none;opacity:0}
  .rail i{transition:none}
}