/* Scald — the thread. An app shell: pinned baton, scrolling hand-off stream, a grip bar you press and hold, tab strip. */
:root{
  --void:#08090B; --pane:#0F1117; --raise:#161A22; --seam:#232A35; --seamlit:#303B4A;
  --ink:#ECEEF2; --dim:#8A93A3; --faint:#596273;
  --steel:#C3CBD8; --steelmid:#7C8699; --steeldark:#3C4553;
  --hot:#FF2E88; --hotdeep:#B31A5C; --hotwash:#2A0B1B; --hotmist:#48122C;
  --dock:calc(env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--void);color:var(--ink);font:400 15px/1.45 "Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ---- shell ---- */
.deck{max-width:660px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:var(--void);
  border-left:1px solid var(--seam);border-right:1px solid var(--seam)}
@media(max-width:700px){.deck{border:0}}

/* ---- pinned baton ---- */
.pinbar{flex:0 0 auto;background:var(--pane);border-bottom:1px solid var(--seam);padding:10px 14px 12px}
.pinline{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.sigil{width:22px;height:22px;border-radius:6px;flex:0 0 auto}
.wordmark{font:800 15px/1 "Unbounded",system-ui,sans-serif;letter-spacing:.055em}
.roundtag{font:600 11px/1 "Inter Tight",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  padding:4px 7px;border:1px solid var(--seam);border-radius:999px}
.pinline .hookup{margin-left:auto;font:600 12px/1 "Inter Tight",sans-serif;color:var(--dim);
  padding:6px 11px;border:1px solid var(--seam);border-radius:999px;white-space:nowrap}
.hookup.linked{color:var(--hot);border-color:var(--hotmist);background:var(--hotwash)}

/* the rod itself */
.rod{position:relative;height:30px;border-radius:15px;overflow:hidden;background:var(--raise);
  border:1px solid var(--seam);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.rodmetal{position:absolute;inset:0;background:
  linear-gradient(177deg,#D8DEE8 0%,var(--steel) 14%,var(--steelmid) 38%,var(--steeldark) 54%,var(--steelmid) 72%,#AEB7C4 88%,#6C7583 100%)}
.rodmetal::after{content:"";position:absolute;left:0;right:0;top:16%;height:13%;background:rgba(255,255,255,.62);filter:blur(.7px)}
.rodheat{position:absolute;top:0;bottom:0;right:0;width:0;transition:width .7s cubic-bezier(.3,.9,.4,1);
  background:linear-gradient(90deg,rgba(255,46,136,0) 0%,var(--hotdeep) 44%,var(--hot) 100%);
  box-shadow:0 0 22px 2px rgba(255,46,136,.5)}
.rodheat::after{content:"";position:absolute;left:0;right:0;top:16%;height:13%;background:rgba(255,255,255,.5);filter:blur(.8px)}
.rodcold{position:absolute;inset:0;background:var(--hotwash);opacity:0;animation:upforgrabs 1.7s ease-in-out infinite}
.rod.loose .rodcold{opacity:1}
@keyframes upforgrabs{0%,100%{opacity:.08}50%{opacity:.34}}

.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:10px;background:var(--seam);
  border:1px solid var(--seam);border-radius:9px;overflow:hidden}
.gauge{background:var(--pane);padding:7px 8px 8px}
.gaugekey{font:600 9px/1 "Inter Tight",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.gaugeval{font:600 15px/1.1 "Unbounded",system-ui,sans-serif;letter-spacing:-.01em}
.gaugeval.burning{color:var(--hot)}
.gaugeval small{font:500 10px/1 "Inter Tight",sans-serif;color:var(--dim);letter-spacing:0}
.holdline{margin-top:9px;display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--dim)}
.holdline b{color:var(--ink);font-weight:600}
.holdline .peek{margin-left:auto;color:var(--hot);font-weight:600;font-size:11.5px}

/* ---- the stream ---- */
.stage{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 18px;
  display:flex;flex-direction:column;gap:9px;-webkit-overflow-scrolling:touch}
.note{align-self:center;max-width:94%;text-align:center;font-size:11.5px;color:var(--faint);
  letter-spacing:.03em;padding:5px 11px;border:1px dashed var(--seam);border-radius:999px}
.blip{align-self:flex-start;max-width:86%;background:var(--pane);border:1px solid var(--seam);
  border-radius:15px 15px 15px 5px;padding:9px 12px 10px;animation:arrive .32s ease both}
.blip.mine{align-self:flex-end;border-radius:15px 15px 5px 15px;background:var(--hotwash);border-color:var(--hotmist)}
.blip.bell{align-self:stretch;max-width:100%;border-radius:13px;border-color:var(--hotmist);
  background:linear-gradient(180deg,var(--hotwash),var(--pane));box-shadow:0 0 0 1px rgba(255,46,136,.1)}
.blip.quiet{background:transparent;border-style:dashed;color:var(--dim)}
@keyframes arrive{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.bliptop{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.blipact{font:600 10px/1 "Inter Tight",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--hot)}
.blip.quiet .blipact{color:var(--faint)}
.blipwhen{margin-left:auto;font-size:10.5px;color:var(--faint);white-space:nowrap}
.blipsay{font-size:14px;line-height:1.4}
.blipsay b{font-weight:600}
.wal{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12.5px;color:var(--steel);
  border-bottom:1px dotted var(--seamlit)}
.tally{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tick{font-size:11px;color:var(--dim);background:var(--raise);border:1px solid var(--seam);
  border-radius:6px;padding:3px 7px;white-space:nowrap}
.tick b{color:var(--ink);font-weight:600}
.tick.gain b{color:var(--steel)}
.tick.loss b{color:var(--hot)}
.hush{text-align:center;color:var(--faint);font-size:13px;padding:34px 10px;line-height:1.7}

/* ---- the grip ---- */
.gripdock{flex:0 0 auto;padding:11px 14px 12px;background:var(--pane);border-top:1px solid var(--seam)}
.grip{position:relative;width:100%;height:56px;border-radius:14px;overflow:hidden;background:var(--raise);
  border:1px solid var(--seamlit);touch-action:none;user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.grip:active{border-color:var(--hot)}
.gripfill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--hotdeep),var(--hot));
  box-shadow:0 0 24px rgba(255,46,136,.45)}
.gripsay{position:relative;font:600 14px/1 "Unbounded",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.gripsub{position:relative;margin-top:5px;font-size:11.5px;color:var(--dim);text-align:center;letter-spacing:.02em}
.grip[data-mode="cold"]{opacity:.45;pointer-events:none;border-style:dashed}
.grip[data-mode="armed"] .gripsay{color:var(--ink)}
.grip[data-mode="pulling"] .gripsay{color:#fff}
.gripnote{margin-top:7px;font-size:11.5px;color:var(--faint);text-align:center}
.gripnote a{color:var(--hot);border-bottom:1px solid var(--hotmist)}

/* ---- tabs ---- */
.tabstrip{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);background:var(--pane);
  border-top:1px solid var(--seam);padding-bottom:var(--dock)}
.tabstop{padding:9px 4px 10px;text-align:center;color:var(--faint);border-top:2px solid transparent}
.tabstop.here{color:var(--hot);border-top-color:var(--hot);background:var(--hotwash)}
.tabmark{display:block;height:15px;margin-bottom:3px}
.tabmark i{display:inline-block;width:15px;height:4px;border-radius:2px;background:currentColor;transform:rotate(-32deg);vertical-align:middle}
.tabstop[data-mark="book"] .tabmark i{width:13px;height:11px;border-radius:2px;transform:none}
.tabstop[data-mark="hands"] .tabmark i{width:11px;height:11px;border-radius:50%;transform:none}
.tabstop[data-mark="rules"] .tabmark i{width:14px;height:2px;border-radius:1px;transform:none;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor}
.tabsay{font:600 10px/1 "Inter Tight",sans-serif;letter-spacing:.1em;text-transform:uppercase}

/* ---- panes (book / hands / rules) ---- */
.slab{background:var(--pane);border:1px solid var(--seam);border-radius:13px;padding:13px 14px}
.slabtop{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.slabno{font:800 13px/1 "Unbounded",system-ui,sans-serif;letter-spacing:.04em}
.slabwhen{margin-left:auto;font-size:11px;color:var(--faint)}
.spread{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2px}
.spreadkey{font:600 9px/1 "Inter Tight",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.spreadval{font:600 14px/1.15 "Unbounded",system-ui,sans-serif}
.caught{margin-top:10px;padding-top:9px;border-top:1px solid var(--seam);font-size:12.5px;color:var(--dim)}
.caught b{color:var(--hot);font-weight:600}
.pull{margin-top:10px;width:100%;padding:11px;border-radius:10px;background:var(--hot);color:#0b0206;
  font:600 13px/1 "Unbounded",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.pull[disabled]{background:var(--raise);color:var(--faint);border:1px solid var(--seam)}
.headline{font:800 24px/1.15 "Unbounded",system-ui,sans-serif;letter-spacing:-.015em;margin:4px 0 10px}
.standfirst{font-size:14.5px;color:var(--dim);line-height:1.55;margin-bottom:16px}
.move{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--seam)}
.moveno{flex:0 0 30px;height:30px;border-radius:9px;background:var(--hotwash);border:1px solid var(--hotmist);
  color:var(--hot);font:800 13px/28px "Unbounded",system-ui,sans-serif;text-align:center}
.movesay{font-size:14px;line-height:1.5;color:var(--dim)}
.movesay b{color:var(--ink);font-weight:600}
.ribbon{display:flex;gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:11px;overflow:hidden;margin-bottom:14px}
.ribbon>div{flex:1;background:var(--pane);padding:10px 9px;text-align:center}
.ribbonval{font:600 15px/1.1 "Unbounded",system-ui,sans-serif}
.ribbonkey{font:600 9px/1 "Inter Tight",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.ledge{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--seam)}
.ledgepos{flex:0 0 22px;font:600 12px/1 "Unbounded",system-ui,sans-serif;color:var(--faint)}
.ledgesecs{margin-left:auto;font:600 13px/1 "Unbounded",system-ui,sans-serif}
.ledge.holding .ledgesecs{color:var(--hot)}
.credits{margin-top:18px;padding:13px 0 6px;border-top:1px solid var(--seam);font-size:11.5px;color:var(--faint);line-height:1.8;word-break:break-all}
.credits a{color:var(--steelmid);border-bottom:1px solid var(--seam)}
.credits .gmgn{color:var(--hot);border-color:var(--hotmist);font-weight:600}

/* ---- drawer + buzz ---- */
.drawer{position:fixed;inset:0;background:rgba(4,5,7,.72);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.drawerpane{width:100%;max-width:660px;max-height:82dvh;overflow-y:auto;background:var(--pane);
  border:1px solid var(--seamlit);border-bottom:0;border-radius:17px 17px 0 0;padding:15px 15px calc(18px + var(--dock));
  animation:rise .22s ease both}
@keyframes rise{from{transform:translateY(26px);opacity:.4}to{transform:none;opacity:1}}
.drawerhead{display:flex;align-items:center;font:600 12px/1 "Inter Tight",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:13px}
.drawershut{margin-left:auto;font-size:22px;line-height:1;color:var(--faint)}
.pickrow{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:1px solid var(--seam);
  border-radius:11px;margin-bottom:8px;font-size:14px;text-align:left}
.pickrow img{width:22px;height:22px;border-radius:6px}
.buzzdock{position:fixed;left:0;right:0;bottom:calc(74px + var(--dock));display:flex;flex-direction:column;
  align-items:center;gap:7px;pointer-events:none;z-index:50}
.buzz{background:var(--raise);border:1px solid var(--seamlit);color:var(--ink);font-size:12.5px;
  padding:8px 14px;border-radius:999px;box-shadow:0 8px 26px rgba(0,0,0,.5);animation:arrive .2s ease both}
.drawer[hidden],.gripdock[hidden]{display:none!important}
/* the thread opens with the coin's own card, the way a channel opens with its about — the stream runs below it */
.stage > .credits:first-child{margin:0 0 4px;padding:12px 13px;border:1px solid var(--seam);border-top:0;
  border-radius:12px;background:var(--pane);order:-1}
.credits,.caught b,.slabwhen{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.credits{letter-spacing:-.005em}