/* ============================================================================
   FlareCat UI v2 — app shell: fixed left sidebar, sticky topbar, full-width main.
   Everything here is scoped under html.ui2-ready, which ui2.js only sets after it
   has successfully built the shell. With the flag off (or if ui2.js throws) not a
   single rule below applies and the site renders exactly as it did before.
   Tokens are the existing ones (--bg --card --line --ink --flare ...); this file
   adds no colours of its own beyond a few alpha tints derived from them.
   ========================================================================= */

html.ui2-ready {
  --side: 258px;
  --topbar-h: 62px;
  --main-max: 1280px;
  --gut: 32px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --tap: 44px;
}

/* ---------------------------------------------------------------- type
   Geist for text, Geist Mono for figures. One family, two voices: the same
   pairing Vercel uses, and the closest free match to the grotesques the
   reference dashboards licence (Solstice ships TEG, Exponent ships PP Mori).
   Applied only here, so the old layout keeps Inter exactly as it was.       */
html.ui2-ready body,
html.ui2-ready button,
html.ui2-ready input,
html.ui2-ready select,
html.ui2-ready textarea {
  font-family: Geist, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'tnum';
}
html.ui2-ready h1, html.ui2-ready h2, html.ui2-ready h3,
html.ui2-ready .topbar h2 { letter-spacing: -.018em; font-weight: 600; }
html.ui2-ready h3 { font-size: 15px; }
/* figures stay monospaced and tabular so columns of numbers line up */
html.ui2-ready .kv b, html.ui2-ready .kv span:last-child,
html.ui2-ready .ticker b, html.ui2-ready .tkmini b {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}

/* the old centred column becomes the app canvas */
html.ui2-ready body { background: var(--bg); }
html.ui2-ready .wrap { max-width: none; margin: 0; padding: 0; }

/* ------------------------------------------------------- quiet scrollbars
   The page and the rail still scroll, the bar just never draws. Firefox gets
   scrollbar-width, Chromium/Safari the pseudo-element.                      */
html.ui2-ready, html.ui2-ready body { scrollbar-width: none; -ms-overflow-style: none; }
html.ui2-ready::-webkit-scrollbar,
html.ui2-ready body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.ui2-ready *::-webkit-scrollbar { width: 0; height: 0; }
html.ui2-ready * { scrollbar-width: none; }

/* ---------------------------------------------------------------- sidebar */
html.ui2-ready .side {
  position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 60;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px 14px;
  background: var(--card);
  border-right: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}
html.ui2-ready .side::-webkit-scrollbar { width: 0; }

/* brand lockup */
html.ui2-ready .side .brand { gap: 10px; padding: 2px 6px 0; }
html.ui2-ready .side .brand .mark { width: 38px; height: 38px; flex: 0 0 38px; }
html.ui2-ready .side .brand h1 { font-size: 17px; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
html.ui2-ready .side .brand h1 .pill,
html.ui2-ready .side .brand h1 .chain { display: none; }
html.ui2-ready .side .brand small { display: block; font-size: 11px; line-height: 1.35; color: var(--ink3); margin-top: 2px; }

/* connect wallet, full width, the one loud control in the rail */
html.ui2-ready .side .acct { display: flex; align-items: center; gap: 6px; position: relative; }
html.ui2-ready .side .acct #connect {
  flex: 1 1 auto; width: 100%; min-height: var(--tap);
  border-radius: var(--r-md); font-weight: 650; font-size: 14px;
}
html.ui2-ready .side .acct #disconnect { min-height: var(--tap); min-width: 38px; border-radius: var(--r-md); }
html.ui2-ready .side .nudge { left: 0; right: 0; }

/* nav */
html.ui2-ready .side .nav {
  display: flex; flex-direction: column; gap: 2px;
  border: 0; background: none; border-radius: 0; padding: 0; margin: 0;
}
html.ui2-ready .navgrp {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); padding: 14px 10px 5px; user-select: none;
}
html.ui2-ready .navgrp:first-child { padding-top: 4px; }
html.ui2-ready .side .nav button {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tap); padding: 0 10px;
  border: 0; border-radius: var(--r-md); background: none;
  font-size: 14px; font-weight: 550; color: var(--ink2); text-align: left;
  cursor: pointer; transition: background .13s, color .13s;
}
html.ui2-ready .side .nav button:hover { background: var(--bg2); color: var(--ink); }
html.ui2-ready .side .nav button:focus-visible { outline: 2px solid var(--flare); outline-offset: -2px; }
html.ui2-ready .side .nav button.on { background: var(--bg2); color: var(--ink); font-weight: 650; }
html.ui2-ready .side .nav button.on::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 21px; border-radius: 0 3px 3px 0; background: var(--flare);
}
/* one uniform icon slot per row, so every label starts on the same x */
html.ui2-ready .side .nav button > svg:first-child,
html.ui2-ready .side .nav button > img:first-child,
html.ui2-ready .side .nav button > .navsym:first-child,
html.ui2-ready .side .nav button > .navslot:first-child {
  flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-style: normal; line-height: 1;
}
html.ui2-ready .side .nav button > img:first-child { object-fit: contain; }
html.ui2-ready .side .nav button .newb { margin-left: auto; flex: 0 0 auto; }

/* foot of the rail: socials, theme, tiny print */
html.ui2-ready .side .railfoot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); }
html.ui2-ready .side .social { gap: 6px; padding: 0 2px; }
html.ui2-ready .side .social a { width: 38px; height: 38px; border-radius: var(--r-md); }

/* ---------------------------------------------------------------- main col */
html.ui2-ready .mainc { margin-left: var(--side); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }

html.ui2-ready .topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h); padding: 0 var(--gut);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
html.ui2-ready .topbar h2 {
  margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; flex: 0 0 auto;
}
/* left-aligned so the first stat is never the one that gets clipped; the fade
   sits on the trailing edge, where the least important stats are */
html.ui2-ready .topbar .ticker {
  margin: 0; flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0;
  justify-content: flex-start; font-size: 12.5px; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
}
html.ui2-ready .topbar .ticker > span:first-child { display: none; } /* the LIVE dot, the bar is always live */
html.ui2-ready .topbar .ticker::-webkit-scrollbar { display: none; }
html.ui2-ready .burger { display: none; }

html.ui2-ready .mainc > .inner {
  flex: 1 1 auto; width: 100%; max-width: var(--main-max);
  margin: 0 auto; padding: 22px var(--gut) 92px;
}

/* sub-tab row reads as a segmented control, not a second nav bar */
html.ui2-ready .subnav { margin: 0 0 18px; gap: 4px; padding: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); width: max-content; max-width: 100%; }
html.ui2-ready .subnav button {
  min-height: 36px; border-radius: var(--r-sm); border: 0; background: none;
  font-size: 13.5px; font-weight: 550; padding: 0 14px; color: var(--ink2);
  transition: color .13s, background .13s;
}
html.ui2-ready .subnav button:hover { color: var(--ink); }
html.ui2-ready .subnav button.on {
  background: var(--card); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--line) inset;
}

/* the pay board stops being a letterbox and fills its column */
html.ui2-ready .board { width: 100%; margin-bottom: 18px; }

html.ui2-ready .foot { max-width: var(--main-max); margin: 26px auto 0; padding: 0 var(--gut) 30px; }

/* ------------------------------------------------- tablet and phone shell */
@media (max-width: 1079px) {
  html.ui2-ready .side {
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0); width: min(298px, 86vw);
  }
  html.ui2-ready.navopen .side { transform: none; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  html.ui2-ready .scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  html.ui2-ready.navopen .scrim { opacity: 1; pointer-events: auto; }
  html.ui2-ready.navopen { overflow: hidden; }
  html.ui2-ready .mainc { margin-left: 0; }
  html.ui2-ready { --gut: 16px; }
  html.ui2-ready .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); margin-left: -8px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card); color: var(--ink); cursor: pointer; flex: 0 0 auto;
  }
  html.ui2-ready .topbar .ticker { display: none; }
  html.ui2-ready .topbar .tkmini {
    display: flex; gap: 14px; margin-left: auto; font-size: 12.5px; color: var(--ink2);
    white-space: nowrap; min-width: 0; overflow: hidden;
  }
  html.ui2-ready .topbar .tkmini em { font-style: normal; }
  /* the fade only when something is really cut (ui2.js fitMini sets .clip); it used to dim two digits that fitted */
  html.ui2-ready .topbar .tkmini.clip {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  html.ui2-ready .chartpick { margin-left: 10px; }
  html.ui2-ready .pickbtn span { display: none; }   /* icon only, the label costs room a phone has not got */
  html.ui2-ready .pickbtn { padding: 0 9px; }
  html.ui2-ready .topbar h2 { font-size: 16px; }
  html.ui2-ready .mainc > .inner { padding-bottom: 24px; }
  html.ui2-ready .mainc { padding-bottom: calc(96px + min(env(safe-area-inset-bottom, 0px), 20px)); }
}
@media (min-width: 1080px) {
  html.ui2-ready .scrim { display: none; }
  html.ui2-ready .topbar .tkmini { display: none; }
  html.ui2-ready .bnav { display: none !important; }
}

/* ------------------------------------------------------ readability fixes
   Mobile audit findings: the board's labels were 7px, and tappable things were
   under 44px. The sizes below are measured, not guessed: the board's text column
   is 266px on a 390px phone, where 10px is the largest Press Start 2P that fits
   "FXRP WAITING FOR HOLDERS" on one line (11px overflows by 3px and wraps).     */
html.ui2-ready .board .blbl,
html.ui2-ready .board .bsub,
html.ui2-ready .board .bwait span,
html.ui2-ready .board .bwait em,
html.ui2-ready .board .bmile span,
html.ui2-ready .board .blive,
html.ui2-ready .board .btape,
html.ui2-ready .board .btape * { font-size: 11px !important; letter-spacing: .02em; }

@media (max-width: 760px) {
  html.ui2-ready .board .blbl,
  html.ui2-ready .board .bsub,
  html.ui2-ready .board .bwait span,
  html.ui2-ready .board .bwait em,
  html.ui2-ready .board .bmile span,
  html.ui2-ready .board .blive,
  html.ui2-ready .board .btape,
  html.ui2-ready .board .btape * { font-size: 10px !important; }
}

@media (max-width: 760px) {
  html.ui2-ready .subnav button,
  html.ui2-ready .bnav button { min-height: var(--tap); }
  html.ui2-ready input[type=text],
  html.ui2-ready input[type=number],
  html.ui2-ready select { min-height: var(--tap); font-size: 16px; }
  /* 16px stops iOS Safari zooming the viewport on focus */
  html.ui2-ready .half, html.ui2-ready .max,
  html.ui2-ready a.half, html.ui2-ready a.max { padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui2-ready .side, html.ui2-ready .scrim, html.ui2-ready .side .nav button { transition: none; }
}

/* ============================================================================
   Polish pass. What the reference dashboards actually do well, applied with our
   own tokens: layered surfaces instead of one flat grey, borders that separate
   without shouting, one radius scale, numerals that line up, and a single
   visible focus treatment. Nothing here changes copy, colour meaning or layout.
   ========================================================================= */

/* surfaces ---------------------------------------------------------------- */
html.ui2-ready .card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 20px;
}
html.ui2-ready .card + .card { margin-top: 16px; }
html.ui2-ready .card h3 {
  margin: 0 0 14px; font-size: 14px; font-weight: 650;
  letter-spacing: -.005em; color: var(--ink);
}
/* a card sitting on the page reads one step above it; nested blocks one step back */
html.ui2-ready .card .card,
html.ui2-ready .card .box { background: var(--bg2); border-color: var(--line2); box-shadow: none; }

/* key / value rows -------------------------------------------------------- */
html.ui2-ready .kv { row-gap: 10px; align-items: baseline; }
html.ui2-ready .kv > span:first-child,
html.ui2-ready .kv > .k { color: var(--ink2); font-size: 13.5px; font-weight: 450; }
html.ui2-ready .kv > span:last-child,
html.ui2-ready .kv > .v,
html.ui2-ready .kv b { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }

/* controls ---------------------------------------------------------------- */
html.ui2-ready input[type=text],
html.ui2-ready input[type=number],
html.ui2-ready select,
html.ui2-ready textarea {
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg2); color: var(--ink);
  transition: border-color .13s, box-shadow .13s;
}
html.ui2-ready input:focus-visible,
html.ui2-ready select:focus-visible,
html.ui2-ready textarea:focus-visible,
html.ui2-ready button:focus-visible,
html.ui2-ready a:focus-visible {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flare) 26%, transparent);
}
html.ui2-ready button { border-radius: var(--r-md); }
html.ui2-ready .social a:hover { border-color: var(--flare); color: var(--flare); }

/* section rhythm ---------------------------------------------------------- */
html.ui2-ready .banner { border-radius: var(--r-lg); margin-bottom: 18px; }
html.ui2-ready section.sec.on > *:last-child { margin-bottom: 0; }

/* the pay board: keep the arcade character, lose the letterbox ------------- */
html.ui2-ready .board { border-radius: var(--r-lg); }

/* links ------------------------------------------------------------------- */
html.ui2-ready a { text-underline-offset: 3px; }

/* ============================================================================
   Two chains, two charts. FCAT trades on Flare (against FXRP) and on Solana
   (against USDC), each with its own DexScreener page, so one link cannot serve
   both: the topbar gets a chooser, the rail foot gets both spelled out.
   ========================================================================= */
html.ui2-ready .chartpick { position: relative; flex: 0 0 auto; margin-left: auto; }
html.ui2-ready .pickbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink2);
  font-size: 13px; font-weight: 550; cursor: pointer;
  transition: color .13s, border-color .13s;
}
html.ui2-ready .pickbtn:hover { color: var(--ink); border-color: var(--ink3); }
html.ui2-ready .pickbtn i { font-style: normal; font-size: 10px; opacity: .7; }
html.ui2-ready .chartpick.open .pickbtn { color: var(--ink); border-color: var(--flare); }

html.ui2-ready .pickmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 212px; padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(0,0,0,.28);
  display: none;
}
html.ui2-ready .chartpick.open .pickmenu { display: block; }
html.ui2-ready .pickmenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; transition: background .12s;
}
html.ui2-ready .pickmenu a:hover { background: var(--bg2); }
html.ui2-ready .pickmenu a svg,
html.ui2-ready .chartlink svg { flex: 0 0 14px; }
html.ui2-ready .pickmenu b,
html.ui2-ready .chartlink b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
html.ui2-ready .pickmenu em,
html.ui2-ready .chartlink em {
  display: block; font-style: normal; font-size: 11px; color: var(--ink3);
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* rail foot */
html.ui2-ready .raillbl {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); padding: 2px 10px 5px;
}
html.ui2-ready .chartlinks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
html.ui2-ready .chartlink {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg2);
  color: var(--ink); text-decoration: none; transition: border-color .13s, background .13s;
}
html.ui2-ready .chartlink:hover { border-color: var(--flare); background: var(--card); }
html.ui2-ready .chartlink i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink3); }

/* ============================================================================
   Stacking fix. The shell introduced a fixed rail (60) and a scrim (55). Every
   pre-existing overlay was authored below those: .modal (the Flare wallet
   picker) at 10, .wmodal (the Solana picker and menu) at 50, .toast at 30.
   On a phone the rail is a drawer, so tapping "Connect wallet" inside it opened
   a picker painted UNDERNEATH the scrim and the rail: invisible and unclickable.
   Overlays must sit above the shell, and the toast above everything.
   ========================================================================= */
html.ui2-ready .modal { z-index: 80; }
html.ui2-ready .wmodal { z-index: 80; }
html.ui2-ready .toast { z-index: 90; }
/* a picker opened from inside the drawer must not leave the drawer over it */
html.ui2-ready.navopen .modal,
html.ui2-ready.navopen .wmodal { z-index: 80; }

/* ------------------------------------------------ phone trade layout (09-22)
   On a 390px phone the pay board and the vault promo filled the whole first
   screen and the Buy form started below it, a full scroll away from the
   Buy/Sell tabs that drive it. Phones only, trade section only: flatten the
   section and its grid so their cards can be ordered next to the board, and
   put the form straight under the tabs. Desktop keeps the board on top.
   820px, not 760: index.html stacks the grid into one column up to 820px, and at 761-820 the Buy form still
   sat below the board and the promo.                                       */
@media (max-width: 820px) {
  html.ui2-ready body[data-sec="trade"] .mainc > .inner { display: flex; flex-direction: column; }
  html.ui2-ready body[data-sec="trade"] #sec-trade.on,
  html.ui2-ready body[data-sec="trade"] #sec-trade.on > .grid { display: contents; }
  html.ui2-ready body[data-sec="trade"] #tradesub { order: 1; align-self: flex-start; margin: 0 0 12px; }
  html.ui2-ready body[data-sec="trade"] #chainBanner { order: 2; }
  html.ui2-ready body[data-sec="trade"] #sec-trade > .grid > .card:first-child { order: 3; }
  html.ui2-ready body[data-sec="trade"] #board { order: 4; }
  html.ui2-ready body[data-sec="trade"] #sec-trade > .promo,
  html.ui2-ready body[data-sec="trade"] #sec-trade > .bkad { order: 5; } /* the basket strip follows the promo here too */
  html.ui2-ready body[data-sec="trade"] #sec-trade > .grid > .card:nth-child(2) { order: 6; }
  html.ui2-ready body[data-sec="trade"] #sec-trade > .card { order: 7; }
  html.ui2-ready body[data-sec="trade"] #sec-trade > .grid > .card,
  html.ui2-ready body[data-sec="trade"] #sec-trade > .card,
  html.ui2-ready body[data-sec="trade"] #sec-trade > .promo,
  html.ui2-ready body[data-sec="trade"] #board { margin: 0 0 16px; }
  html.ui2-ready body[data-sec="trade"] #sec-trade > .bkad { margin: -6px 0 16px; }
}

/* the Vault link in the bottom bar was painted the active colour, so two tabs
   looked selected at once. Plain like its neighbours; the green dot says new. */
html.ui2-ready .bnav a.bnavlink { color: var(--ink3); }

/* ------------------------------------------------ payout tape readability (09-22)
   The tape rows and the hook line were 7.5px pixel font. Size them to the
   column they actually get: a container query on .bfeed (it measures the
   content box, inside the divider padding). Today's longest row needs a
   content width of 240px at 8px, 268 at 9px, 296 at 10px, the same on
   desktop and phone; thresholds sit 12% above that since bigger rounds add digits.
   On desktop the column grows with the board but never below the old 300px,
   so the main column never loses room it has today.                      */
html.ui2-ready .board .bfeed { container-type: inline-size; }
@container (min-width: 270px) { html.ui2-ready .board .brow, html.ui2-ready .board .bhook { font-size: 8px; } }
@container (min-width: 300px) { html.ui2-ready .board .brow, html.ui2-ready .board .bhook { font-size: 9px; } }
@container (min-width: 332px) { html.ui2-ready .board .brow, html.ui2-ready .board .bhook { font-size: 10px; } }
@media (min-width: 821px) { /* at 820px and below index.html stacks the board into two columns */
  html.ui2-ready .board { grid-template-columns: 72px minmax(0, 1fr) clamp(300px, 32%, 360px); }
}

/* the big paid number was a fixed 30px (20px on phones) and pushed its FXRP
   label past the column at 1080px (24px over) and on 360px phones (18px):
   the board clips overflow, so the label got cut. Size it from the column:
   Press Start 2P is ~1em a glyph, the label needs ~80px, and the budget is
   10 glyphs so it still fits once payouts pass 10,000.000.                */
html.ui2-ready .board .bmain { container-type: inline-size; }
html.ui2-ready .board .bnum { font-size: clamp(14px, calc((100cqw - 80px) / 10.5), 30px); }

/* ------------------------------------------------ phone tap targets (09-22)
   Measured on a 390px phone: HALF/MAX were 30x14, the chart range and LP band
   buttons 27px tall, the checkboxes 13px. HALF/MAX grow their hit area with
   padding and give it back with a negative margin, so nothing moves.       */
@media (max-width: 760px) {
  html.ui2-ready a[data-amt] { display: inline-block; padding: 13px 8px; margin: -13px -4px; }
  html.ui2-ready button[data-tf],
  html.ui2-ready button[data-range] { min-height: 40px; min-width: 44px; }
  html.ui2-ready label.ack input[type=checkbox],
  html.ui2-ready label.ck input[type=checkbox] { width: 20px; height: 20px; flex: none; }
}

/* ------------------------------------------------ Ride scene (09-22)
   Rung labels were 7px (6px on phones), and on a phone each label's dollar
   amount ran under the next rung's bar and read as a smear, the bubble hid
   the pot, and the HUD ran under the sound button. Wording is untouched:
   the label is still the contract's capped payout.
   Tiers follow the SCENE's width (a container query), from a sweep of every
   label against every rung bar: multiplier + $ needs a scene of 1050px at
   10px, 950px at 9px; multiplier alone 480px at 10px. Below 480px (phones)
   even 8px labels above a rung hit the next bar, so each label sits beside
   its rung instead, where the next rung is ~21px higher; the top rung has
   nothing above it and keeps its label on top. The ladder table right
   below the scene lists every amount.                                     */
html.ui2-ready .scene { container-type: inline-size; }
html.ui2-ready .scene .rung i { z-index: 2; text-shadow: 1px 1px 0 #000; } /* over the cat (auto), under the bubble and verdict (3) */
html.ui2-ready .scene .rung i .rusd { display: none; }
@container (min-width: 480px) { html.ui2-ready .scene .rung i { font-size: 10px; } }
@container (min-width: 950px) { html.ui2-ready .scene .rung i { font-size: 9px; } html.ui2-ready .scene .rung i .rusd { display: inline; } }
@container (min-width: 1050px) { html.ui2-ready .scene .rung i { font-size: 10px; } }
@container (max-width: 479.98px) {
  html.ui2-ready .scene .rung i { font-size: 9px; left: calc(100% + 4px); bottom: -1px; }
  html.ui2-ready .scene .rung:last-child i { left: auto; right: 0; bottom: 14px; }
}
@media (max-width: 600px) {
  html.ui2-ready .scene .bubble { max-width: 56%; }
  html.ui2-ready .scene .hud { right: 54px; flex-wrap: wrap; column-gap: 8px; row-gap: 3px; }
  html.ui2-ready .scene .hud span:empty { display: none; }
}
@media (max-width: 379px) {   /* at 360px a 56% bubble still reached the pot tag */
  html.ui2-ready .scene .bubble { max-width: 50%; }
}