/* Monolith — black, white and one signal red. Massive type, hairline rules, no
   ornament: the figures are the design.

   The identity here is scale and restraint. There is no texture, no shadow, no
   radius and no second colour: red is spent on exactly two things, the call to
   action and a loss, so that when it appears it means something. Everything
   else is white on black, separated by one-pixel rules, with the amount a
   faucet pays set at the size a poster would set it.

   The light theme is an exact inversion (black on white, red stays), which is
   the only light version of a design like this that is still the same design.

   The second half styles the SHARED game, offerwall, referral and advert pages.
   Monolith forks only index and dashboard, so the class names those pages use
   are a markup contract: a design that skips one ships an unstyled page. */

:root {
  /* The design's own accent. The page also emits :root{--brand:...} inline from
     the site's brand_color AFTER this file, so an owner's colour still wins -
     this is what the design looks like on its own. */
  --brand: #ff1f3d;
  /* What sits on the brand colour: the button text. Read by the game page and
     handed to the bet frame, so its Bet button matches the design's own. */
  --brand-text: #ffffff;
  --bg: #050505;
  --surface: #111111;
  --surface-2: #181818;
  --text: #ffffff;
  --text-dim: #8a8a8a;
  --line: #262626;
  --line-strong: #ffffff;
  /* A win is white. Colour is for the CTA and for losses; a good outcome is
     simply the page's own voice at full volume. */
  --ok: #ffffff;
  --pending: #8a8a8a;
  /* 1px, not 0: the game pages parse this with parseInt(...) || 12, and a zero
     is falsy - a true 0 would hand the bet frame twelve-pixel corners on the
     one design that has none. One pixel is invisible and truthy. */
  --radius: 1px;

  --b-10: color-mix(in srgb, var(--brand) 10%, transparent);
  --b-30: color-mix(in srgb, var(--brand) 30%, transparent);

  --gutter: clamp(20px, 4vw, 64px);
  --font: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The inversion. White paper, black ink, the same red. Hairlines darken by the
   same step they lightened in the native theme. */
body.theme-light {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-2: #ececec;
  --text: #050505;
  --text-dim: #6a6a6a;
  --line: #dcdcdc;
  --line-strong: #050505;
  --ok: #050505;
  --pending: #6a6a6a;
}

* { box-sizing: border-box; }

/* A page toggles a panel by setting `hidden`, and any author `display` on that
   panel silently beats the browser's `[hidden] { display: none }` - cascade
   origin, not specificity, so no amount of reordering fixes it. `!important`
   because the rule has to win against the class that caused it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* A flex column so the footer's rule sits at the foot of a short page (an
   advert page with nothing to show) rather than a third of the way down it. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  /* Figures are most of what this design says, so they align everywhere. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--brand); color: #ffffff; }

/* Keyboard focus only. The ring is the text colour so it survives both themes. */
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

a { color: inherit; }

/* ---- Chrome ------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.brand {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.site-header nav { display: flex; align-items: center; gap: 0 28px; flex-wrap: wrap; }

.site-header a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}

.site-header a:hover { color: var(--text); }

/* The sign-in link is the one red word in the header: a small piece of the
   call to action, so the eye finds it before it finds anything else. */
.site-header .button-small {
  border: 0;
  padding: 0;
  min-height: 44px;
  background: transparent;
  color: var(--brand);
  font-weight: 700;
}

.site-header .button-small:hover { background: transparent; color: var(--text); }

/* The balance: white text, no fill, a hairline to set it apart from the links. */
.balance {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap:  ​0 20px;
}

.level-pill {
  display: inline-flex;
  align-items: center;
  min-height:  ​44px;
  padding:  ​0 14px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size:  ​11px;
  font-weight:  ​700;
  letter-spacing:  ​0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

main {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  flex: 1 0 auto;
}

/* Inherited pages stack their sections with room between; the forked pages
   (main.mono) butt theirs together and let hairlines do the separating. */
main > * + * { margin-top: 24px; }
.mono > * + * { margin-top: 0; }

.site-footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- Labels and headings ------------------------------------------------ */

.label,
.figure-label,
.tile-label,
.section-head,
.card h2,
.profit-label,
.stat-label,
.eyebrow,
.ref-stat span,
.seed-list dt,
.bets-table th,
.odds th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

/* A section head is a hairline with a name on the left and an index on the
   right, the way a Swiss poster numbers its columns. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.section-head .num { color: var(--text); font-weight: 500; }

.mono-section { padding-bottom: clamp(40px, 5vw, 72px); }

/* ---- Hero (index) ------------------------------------------------------- */

.mono-hero { padding: clamp(40px, 7vw, 112px) 0 0; }

.mono-status {
  margin: 0 0 clamp(24px, 3vw, 48px);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 16px;
}

.mono-status-paused { color: var(--brand); }

/* The amount, at the width of the page. anywhere lets a long figure break
   inside itself rather than push the page sideways; at this size a break is a
   line of a poem, not a fault. */
.figure-xl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.2em;
  margin: 0;
}

.figure-xl .n {
  font-size: clamp(44px, 13vw, 150px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  overflow-wrap: anywhere;
  min-width: 0;
}

.figure-xl .unit {
  font-size: clamp(14px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.figure-label { display: block; margin-top: clamp(16px, 2vw, 28px); }

.mono-lead {
  margin: clamp(20px, 3vw, 40px) 0 0;
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 16px;
  text-wrap: pretty;
}

/* Two more figures, each in its own ruled column. */
.figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.figure {
  min-width: 0;
  padding: clamp(24px, 3vw, 44px) 0;
  display: grid;
  gap: 20px;
  align-content: start;
}

.figure + .figure { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 44px); }

.figure .figure-label { margin: 0; }

.figure-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.25em;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
  min-width: 0;
}

.figure-unit {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.figure-unit:empty { display: none; }

/* ---- The call to action ------------------------------------------------- */

.cta-row { padding-top: clamp(24px, 3vw, 40px); }

/* ---- Buttons ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.button:hover { background: var(--text); color: var(--bg); }

/* One pixel is the cheapest signal that a tap registered. */
.button:active { transform: translateY(1px); }

/* The red bar. Full width, 72px, and the only filled shape on the page. On
   hover it inverts to the text colour: the page's own answer to the red. */
.button-primary {
  width: 100%;
  min-height: 72px;
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-text);
  font-size: 13px;
}

.button-primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

.button-primary[disabled] {
  background: transparent;
  border-color: var(--line);
  color: var(--text-dim);
  cursor: not-allowed;
  transform: none;
}

.button-small { min-height: 44px; padding: 0 18px; }

/* Inside a card the bar is shorter; the 72px bar belongs to the index. */
.card .button-primary { min-height: 56px; }
.card p > .button { width: auto; margin: 4px 8px 4px 0; padding: 0 28px; }

/* ---- Cards (hairline-bounded regions) ----------------------------------- */

.card {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px);
  background: transparent;
  min-width: 0;
}

.card h2 { margin: 0 0 24px; }

.card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.card p { margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }

.centered { text-align: center; display: grid; gap: 24px; justify-items: stretch; }
.centered p { margin: 0; font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }

.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 8vw, 120px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-wrap: balance;
}

.lead { margin: 0; color: var(--text-dim); max-width: 60ch; text-wrap: pretty; }
.muted { color: var(--text-dim); }

/* ---- The claim region (index) ------------------------------------------- */

.claim-region {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
}

.claim-cell { min-width: 0; padding: clamp(24px, 3vw, 44px); display: grid; gap: 20px; align-content: start; }
.claim-cell + .claim-cell { border-left: 1px solid var(--line); }

.claim-form { display: grid; gap: 20px; justify-items: stretch; }

/* The countdown as a figure. A blinking red square marks the ready state,
   the one ambient motion on the page. */
.countdown {
  margin: 0;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-wrap: anywhere;
}

.countdown.is-ready::before {
  content: "";
  flex: none;
  width: 0.28em;
  height: 0.28em;
  background: var(--brand);
  animation: mono-blink 1.4s steps(1, end) infinite;
}

@keyframes mono-blink {
  50% { opacity: 0; }
}

.claim-note { margin: 0; color: var(--text-dim); font-size: 14px; }

/* The captcha widget sizes itself; this only reserves space so the button
   does not jump when it loads. */
.basilisk_captcha { min-height: 74px; width: 100%; max-width: 372px; }

/* ---- Notices ------------------------------------------------------------ */

.notice {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
}

/* Paid: the block inverts. There is no green here; a good outcome is the page
   speaking at full volume. */
.notice-ok {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 500;
}

/* ---- Lists and tables --------------------------------------------------- */

/* The claim and bet lists are hairline tables. Subgrid lines the columns up
   across rows - amount, detail, verify, outcome - so a row without a verify
   link still puts its outcome under the others'. The last row has no rule of
   its own: the next section's head draws it. */
.claim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  border-top: 1px solid var(--line);
}

.claim-list li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  column-gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  min-width: 0;
}

.claim-list li:last-child { border-bottom: 0; }
.claim-list li > .claim-amount { grid-column: 1; }
.claim-list li > .muted { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.claim-list li > .verify-link { grid-column: 3; margin-left: 0; }
.claim-list li > .chip { grid-column: 4; margin-left: 0; justify-content: flex-end; }
.claim-list li.muted { display: block; grid-column: 1 / -1; }

@supports not (grid-template-columns: subgrid) {
  .claim-list li { display: flex; gap: 24px; }
  .claim-list li > .muted { flex: 1 1 auto; }
}
.claim-list a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text); }
.claim-list a:hover { color: var(--brand); border-color: var(--brand); }

.claim-amount { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }

/* Chips are text. The leading square is the non-colour cue, and it is the only
   mark a status gets: white for good, dim for pending, red for a loss. */
.chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip::before { content: ""; width: 6px; height: 6px; background: currentColor; flex: none; }

.chip-ok { color: var(--ok); }
.chip-pending { color: var(--pending); }

/* ---- Steps (index) ------------------------------------------------------ */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.step { min-width: 0; padding: clamp(24px, 3vw, 40px) 0 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }

.step-num {
  display: block;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.step h3 {
  margin: clamp(24px, 4vw, 56px) 0 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.step p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ---- FAQ (index) -------------------------------------------------------- */

.faq { margin: 0; border-top: 1px solid var(--line); }

.faq-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.faq-row:last-child { border-bottom: 0; }

.faq-q { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.faq-a { margin: 0; color: var(--text-dim); font-size: 15px; }
.faq-a a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text); }
.faq-a a:hover { color: var(--brand); border-color: var(--brand); }

.faq-a code,
.seed-list code,
.fairness code {
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---- Contents (index): the site's other pages as ruled rows ------------- */

.toc { border-top: 1px solid var(--line); }

.toc a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: clamp(24px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.18s var(--ease), padding-left 0.22s var(--ease);
}

.toc a small { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); }
.toc a:hover { padding-left: 16px; }
.toc a:hover small { color: var(--brand); }

/* ---- Dashboard tiles ---------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.tile {
  min-width: 0;
  min-height: 200px;
  padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.tile-label { display: block; }

.tile-value {
  display: block;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.tile-value a { color: var(--brand); text-decoration: none; }
.tile-value a:hover { color: var(--text); }

.dash-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }

.dash-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(40px, 7vw, 112px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.dash-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: center;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}

.dash-claim .lead { font-size: clamp(20px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.03em; color: var(--text); line-height: 1.15; }
.dash-claim .button-primary { width: auto; min-width: 280px; }

/* ---- Profit tiles (shared class) ---------------------------------------- */

.profits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.profit { display: grid; gap: 10px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.profit-value { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.profit-up { color: var(--ok); }
.profit-down { color: var(--text-dim); }

/* ---- Fairness panel, verify link ---------------------------------------- */

.seed-list { margin: 0 0 20px; display: grid; gap: 6px; font-size: 14px; }
.seed-list dt { padding-top: 12px; border-top: 1px solid var(--line); }
.seed-list dt:first-child { border-top: 0; padding-top: 0; }
.seed-list dd { margin: 0 0 12px; }

.seed-list code {
  display: block;
  padding: 10px 0;
  font-size: 12px;
  word-break: break-all;
}

.verify-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.verify-link:hover { color: var(--brand); border-color: var(--brand); }

/* The result line, kept for pages that still render one. */
.result { margin: 16px 0 0; padding: 14px 18px; border: 1px solid var(--line); font-weight: 500; animation: mono-settle 0.28s var(--ease); }
@keyframes mono-settle { from { opacity: 0; } to { opacity: 1; } }
.result-win { border-color: var(--text); color: var(--text); }
.result-loss { border-color: var(--brand); color: var(--brand); }

/* ---- Inputs ------------------------------------------------------------- */

.field input,
.field select,
.ref-link input {
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.18s var(--ease);
}

.field input:focus,
.field select:focus,
.ref-link input:focus { outline: none; border-color: var(--text); }

.field { display: grid; gap: 8px; font-size: 13px; color: var(--text-dim); }
.field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; }

/* ---- Offerwall ---------------------------------------------------------- */

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }

.tab {
  padding: 0 24px;
  min-height: 48px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.tab:hover { color: var(--text); }
.tab-active { color: var(--text); border-bottom-color: var(--text); }

/* Tall by default because a wall is a full page of offers inside our page, and
   a short frame makes the player scroll two things at once. The card around it
   drops its padding so the wall meets the hairline. */
.offerwall-frame { display: block; width: 100%; height: 900px; border: 0; background: var(--surface); }
.card:has(> .offerwall-frame) { padding: 0; }

/* ---- Referrals ---------------------------------------------------------- */

.ref-link { display: flex; gap: 12px; margin-top: 4px; }
.ref-link input { flex: 1 1 auto; }
.ref-link .button { flex: 0 0 auto; }
.ref-link .button-primary { width: auto; min-height: 48px; padding: 0 28px; }

/* The rates are the point of the page, so they are set as figures. */
.ref-rates { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.ref-rate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}

.ref-rate b { color: var(--text); font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }

.ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ref-stat { min-width: 0; padding: 20px 0; display: grid; gap: 16px; }
.ref-stat + .ref-stat { border-left: 1px solid var(--line); padding-left: 20px; }
.ref-stat span { display: block; }
.ref-stat b { font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.ref-note { margin-top: 20px; font-size: 14px; }

/* ---- Adverts ------------------------------------------------------------ */

#ptc-list { display: grid; gap: 16px; }
#ptc-list .card { display: grid; gap: 8px; }
#ptc-list .card strong { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
#ptc-holder { border: 1px solid var(--line); min-height: 200px; }
#ptc-holder iframe { display: block; width: 100%; border: 0; }

/* ---- Ad slots ----------------------------------------------------------- */

.ad-slot { display: flex; justify-content: center; margin: 16px 0; overflow: hidden; }
.ad-mobile { display: none; }
@media (max-width: 640px) {
  .ad-desktop { display: none; }
  .ad-mobile { display: flex; }
}

/* ---- Narrower ----------------------------------------------------------- */

@media (max-width: 900px) {
  .claim-region { grid-template-columns: minmax(0, 1fr); }
  .claim-cell + .claim-cell { border-left: 0; border-top: 1px solid var(--line); }
  .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; margin-top: clamp(24px, 3vw, 40px); }
  .step h3 { margin-top: 20px; }
  .faq-row { grid-template-columns: minmax(0, 1fr); }
  .dash-claim { grid-template-columns: minmax(0, 1fr); }
  .dash-claim .button-primary { width: 100%; }
}

@media (max-width: 640px) {
  /* The header on a small screen. Six short links in a nowrap row are wider
     than a 320px phone, so the nav wraps to its own row and every link gets a
     44px target. */
  .site-header { flex-wrap: wrap; gap: 0 16px; padding: 14px var(--gutter) 6px; }
  .site-header nav { width: 100%; gap: 0 20px; }
  .balance { border-left: 0; padding-left: 0; }

  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure + .figure { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .profits { grid-template-columns: minmax(0, 1fr); }
  .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-stat:nth-child(3) { border-left: 0; padding-left: 0; grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .ref-link { flex-direction: column; }
  .ref-link .button-primary { width: 100%; }
  /* Rows fold on a phone: amount and verify on the first line, detail and the
     outcome on the second - the short control beside the long figure, the long
     outcome beside the text that can wrap. The subgrid columns are given up. */
  .claim-list { display: block; }
  .claim-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
  .claim-list li > .claim-amount { grid-column: 1; grid-row: 1; }
  .claim-list li > .verify-link { grid-column: 2; grid-row: 1; justify-self: end; }
  .claim-list li > .muted { grid-column: 1; grid-row: 2; }
  .claim-list li > .chip { grid-column: 2; grid-row: 2; align-self: start; }
  .claim-list li.muted { display: block; }
  .tile { min-height: 120px; }
  .card p > .button { width: 100%; margin: 4px 0; }
  .button-primary { min-height: 64px; }

  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-height: 44px; }

  .offerwall-frame { height: calc(100vh - 190px); min-height: 400px; }
  /* svh is the viewport without the browser's collapsible chrome, so the frame
     ends where the screen does. The vh line above is the fallback. */
  .offerwall-frame { height: calc(100svh - 190px); }
}

/* Every transition here is decoration; the page reads identically without it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==== Game pages (dice, limbo, towers) =======================================
   The shared layout the three game pages use: a hero with the session figures
   beside it, the bet frame full width in its shell, then the player's history
   and the fairness panel side by side. The frame paints its own controls from
   the variables the page hands it (--bg, --surface, --text, --text-dim, --brand,
   --brand-text, --ok, --loss, --line, --radius); everything outside it is here.
   The block is delimited so the platform's migration can carry it into a
   stylesheet an owner has customised without touching the rest.
   ==== game pages: begin ==== */
:root { --loss: #ff1f3d; }
body.theme-light { --loss: #e0142f; }
.game-page { max-width: 1440px; display: grid; gap: 0; }
.game-page > * + * { margin-top: 0; }
.game-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); margin: 0 0 32px; }
.game-hero-text { min-width: 0; }
.game-hero h1 { margin: 20px 0 16px; font-size: clamp(56px, 9vw, 140px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }
.game-hero .lead { font-size: 15px; }
.eyebrow { display: inline-block; }
/* Three figures in ruled columns, the hero's own scale one step down. */
.game-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { min-width: 0; padding: 20px 0; display: grid; gap: 14px; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 20px; }
.stat-label { display: block; white-space: nowrap; }
.stat-value { display: block; font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-up { color: var(--ok); }
.stat-down { color: var(--loss); }
/* The frame's shell: one hairline, no radius, the design's surface behind it. */
.game-shell { padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.game-frame { padding: 0; overflow: hidden; }
.game-shell iframe, .game-frame iframe { display: block; width: 100%; border: 0; }
.game-status { margin: 16px 0 0; min-height: 1.4em; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.game-page .notice { margin-top: 16px; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; margin-top: 32px; align-items: start; }
.game-history { min-width: 0; overflow-x: auto; }
.game-side { display: grid; gap: 32px; min-width: 0; }
.fairness code { overflow-wrap: anywhere; }
.fairness .lead { font-size: 14px; margin: 0 0 20px; }
.fairness .notice { margin-top: 16px; }
.bets-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bets-table th { text-align: left; padding: 0 12px 14px 0; border-bottom: 1px solid var(--text); }
.bets-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bets-table th:last-child, .bets-table td:last-child { padding-right: 0; }
.bets-table tbody tr { transition: background-color 0.18s var(--ease); }
.bets-table tbody tr:hover { background: var(--surface); }
.bets-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bets-table .right { text-align: right; }
.bets-table .chip { margin-left: 0; }
.bets-table .right .chip { justify-content: flex-end; }
/* WON is white, LOST is red; the leading square carries the difference for
   anyone who cannot see the colour. */
.chip-win { color: var(--ok); }
.chip-loss { color: var(--loss); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: step; color: var(--text-dim); border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 16px 0 16px 64px; border-bottom: 1px solid var(--line); counter-increment: step; font-size: 15px; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.steps b { color: var(--text); font-weight: 500; }
.odds { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 24px; }
.odds th, .odds td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.odds th { border-bottom-color: var(--text); }
.odds th:last-child, .odds td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.odds td { font-weight: 500; }
.odds tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) {
  .game-hero, .game-grid { grid-template-columns: minmax(0, 1fr); }
  .game-hero { align-items: start; }
}
@media (max-width: 520px) {
  /* Three figures become three ruled rows, label left and figure right: the
     columns would be too narrow for a signed amount with its coin. */
  .game-hero-stats { grid-template-columns: minmax(0, 1fr); }
  .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .stat-value { font-size: 28px; text-align: right; }
  .bets-table .optional { display: none; }
}
/* ==== game pages: end ==== */