/* ==========================================================================
   /onchain/ and its pages (#725) — the site layer.

   The board is the on-chain package's own page (assets/css/onchain.css, every
   rule scoped #cdoc-root, kept as shipped so a new version drops in). This
   file fits it into the theme: the .crx head above it (scope .crx.ocx), the
   sticky tab bar under the fixed top bar, the tooltip above the sidebar, the
   server-rendered first paint, the footnote and the FAQ.
   ========================================================================== */

.crx.ocx{padding-bottom:0}

/* Identity tile: a casino page wears the casino's logo; the board pages a
   glyph on the deposit-green tint (the v1 head). */
.ocx .crx-mark{display:grid;place-items:center;
	background:linear-gradient(150deg,rgba(46,212,127,.22),rgba(79,199,234,.12));
	color:var(--up,#2ED47F)}
.ocx .crx-mark svg{width:28px;height:28px}
.ocx .crx-mark.ocx-mark-logo{background:var(--card,#1B2030)}
.ocx .crx-mark.ocx-mark-mono{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card,#1B2030));font:800 26px/1 Sora,Inter,system-ui,sans-serif}
.ocx .crx-ident-text{min-width:0}
@media (max-width:560px){
	.ocx .crx-facts,.ocx .crx-facts li{white-space:normal}
}

.ocx .ocx-head-share{gap:7px}
.ocx .ocx-head-share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Until the board has drawn (slow network, scripts off) the pill is a neutral
   "connecting", never a green pulse: nothing is polling yet. Browsers without
   :has() keep the base pill. */
.ocx-head:not(:has(~ .ocx-board .stick)) .crx-live{background:rgba(255,255,255,.06);color:var(--ink-3,#A9AFC4);border-color:var(--hair-2,rgba(255,255,255,.14))}
.ocx-head:not(:has(~ .ocx-board .stick)) .crx-live i{box-shadow:0 0 0 3px rgba(255,255,255,.08);animation:none}

/* The board: outside .crx (crash-tracker.css restyles every button, image,
   link and heading under it), in the same 1420px column as the head. */
.ocx-board{max-width:1420px;margin:0 auto;padding-inline:clamp(18px,2.6vw,36px)}
.ocx-board #cdoc-root{max-width:none;margin:0;padding:0 0 28px}
.crx.ocx-head .crx-head{padding-bottom:10px}

/* The theme's site-wide classes (parent style.css: .card, .chip, .btn, .bar,
   .seg, .kpis …) share names with the board's own and would restyle it. Each
   property they set goes back to what the browser alone gives, so the board's
   rules apply exactly as in the package. `#cdoc-root :where(…)` weighs one id:
   more than any theme class rule, less than any of the board's (#cdoc-root .x).
   List found by sweeping every page and view (#725); re-sweep after a theme
   or board update. */
#cdoc-root :where(.num){font-family:revert;font-variant-numeric:revert;letter-spacing:revert}
#cdoc-root :where(.sec-head){display:revert;flex-direction:revert;align-items:revert;justify-content:revert;gap:revert;flex-wrap:revert;margin-bottom:revert}
#cdoc-root :where(.sec-head h2){font-size:revert;color:revert;margin:revert}
#cdoc-root :where(.sec-head p){margin:revert;color:revert;max-width:revert;font-size:revert}
#cdoc-root :where(.card){background:revert;border:revert;border-radius:revert;position:revert}
#cdoc-root :where(.chip){display:revert;align-items:revert;gap:revert;font-size:revert;font-weight:revert;padding:revert;border-radius:revert;background:revert;color:revert;border:revert;white-space:revert}
#cdoc-root :where(.btn){display:revert;align-items:revert;justify-content:revert;gap:revert;padding:revert;border-radius:revert;font-weight:revert;font-size:revert;transition:revert;white-space:revert;color:revert;line-height:revert;border:revert;text-decoration:revert;cursor:revert}
#cdoc-root :where(.btn svg){width:revert;height:revert}
#cdoc-root :where(.kpis){display:revert;grid-template-columns:revert;gap:revert;background:revert;border:revert;border-radius:revert;overflow:revert;margin-bottom:revert}
#cdoc-root :where(.kpis div){background:revert;padding:revert}
#cdoc-root :where(.kpis b){display:revert;font-family:revert;font-size:revert;letter-spacing:revert}
#cdoc-root :where(.bar){height:revert;border-radius:revert;background:revert;overflow:revert}
#cdoc-root :where(.seg){padding:revert;border-radius:revert;background:revert;border:revert;text-align:revert}
#cdoc-root :where(.band){padding:revert;background:revert}
#cdoc-root :where(.rank){display:revert;flex-direction:revert;align-items:revert;gap:revert;grid-area:revert}
#cdoc-root :where(.rank b){font-family:revert;font-size:revert;font-weight:revert;color:revert;line-height:revert}
#cdoc-root :where(.spark){width:revert;height:revert;display:revert;border-radius:revert;background:revert;border:revert;margin-bottom:revert}
#cdoc-root :where(.hero){position:revert;padding:revert;overflow:revert}
#cdoc-root :where(.hero)::before,#cdoc-root :where(.hero)::after{content:none}
#cdoc-root :where(.tape){padding:revert;border-radius:revert;background:revert;border:revert;box-shadow:revert}
#cdoc-root :where(input[type="text"]){background:revert;border:revert;color:revert;border-radius:revert}
#cdoc-root :where(svg,img){max-width:revert}

/* Sticky tabs sit under the theme's fixed top bar (and the admin bar). */
.ocx-board #cdoc-root .stick{top:var(--top-h,66px);z-index:20}
.admin-bar .ocx-board #cdoc-root .stick{top:calc(var(--top-h,66px) + 32px)}
@media (max-width:782px){.admin-bar .ocx-board #cdoc-root .stick{top:calc(var(--top-h,66px) + 46px)}}
@media (max-width:600px){.admin-bar .ocx-board #cdoc-root .stick{top:var(--top-h,66px)}}

/* The board column is 12px narrower than the package's at 390 (the theme's
   18px gutters, shared with the head): the casino picker gives way so it keeps
   its place beside the window switch instead of dropping under it, which also
   keeps the sticky block shorter on a phone. */
@media (max-width:420px){.ocx-board #cdoc-root .stick .bar>select{flex:1 1 120px;min-width:0}}

/* Casino pages: the profile card's logo and H1 moved into the head
   (onchain.js, CDS), so its facts take the flexible column and the rank stays
   the compact box at the right, as in the package. */
.ocx-board #cdoc-root .pf-id{grid-template-columns:minmax(0,1fr) auto}
.ocx-board #cdoc-root .pf-name .facts{margin-top:0}

/* The tooltip lives on <body>: above the sidebar (60) and the top bar (70). */
#cdoc-tip{z-index:9990}

/* Server-rendered first paint (replaced by the board, kept with JS off). */
.ocx-board .cdoc-ssr{padding:4px 0 8px}
.ocx-board .cdoc-ssr .dek{max-width:78ch;margin:0 0 14px}
.ocx-board .cdoc-ssr-tabs ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0}
.ocx-board .cdoc-ssr-tabs a{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--card-2,#212739);border:1px solid var(--hair-2,rgba(255,255,255,.14));color:var(--ink-2,#CDD2E1);font-size:13.5px;font-weight:600;text-decoration:none}
.ocx-board .cdoc-ssr-tabs a[aria-current="page"]{color:#fff;background:linear-gradient(115deg,#1F86EA 0%,#6438E4 100%);border-color:transparent}
.ocx-board .cdoc-ssr-facts{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 16px;padding:0}
.ocx-board .cdoc-ssr-facts b{color:#fff}
.ocx-board .cdoc-ssr h2{font-size:17px;margin:0 0 10px}
.ocx-board .cdoc-ssr-rank{columns:3 240px;column-gap:28px;margin:0 0 12px;padding-left:22px}
.ocx-board .cdoc-ssr-rank li{break-inside:avoid;padding:3px 0}
.ocx-board .cdoc-ssr-rank a{color:var(--ink,#ECEEF6)}
.ocx-board .cdoc-ssr-rank b{color:var(--up,#2ED47F);font-variant-numeric:tabular-nums;margin-left:6px}
.ocx-board .cdoc-ssr .cdoc-loading{padding:32px 0}

/* Footnote and FAQ: the house treatment (/streamers/, v1 of this page). */
.ocx .crx-note{margin:6px 0 26px;font-size:13px;line-height:1.7;color:var(--ink-3)}
.ocx .crx-note a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}
.ocx .ct-fq-meta,.ocx .ct-fq-meta *,.ocx .ct-fq-ix{font-size:12px}

@media (prefers-reduced-motion:reduce){
	.ocx .crx-live i{animation:none}
}

/* Casino names are links on these pages (onchain.js goEl): they look as the buttons did.
   :where() keeps this at one id, so the board's own class rules (.hopend, .evwho …) still decide display. */
#cdoc-root :where(a.cds-go){display:inline-block;text-decoration:none;color:inherit;cursor:pointer}