/* Minimal — a clean, light faucet.
   Every colour derives from --brand, which the site's branding sets, so
   changing the brand colour restyles the whole page.

   Restraint is this design's identity, so the detailing here is the kind you
   notice only when it is missing: focus rings that survive a pale background,
   a press state on the claim button, hairline separators, and figures that line
   up. Nothing decorative was added - Neon and Cobalt are where that belongs. */

: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, and what applying it sets the site to. */
  --brand: #1a73e8;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #1a1c1f;
  --text-dim: #5d646e;
  --line: #e4e7ec;
  --line-strong: #d3d8e0;
  --ok: #16794a;
  --pending: #8a6100;
  --radius: 12px;

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

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 3px 8px -4px rgba(16, 24, 40, 0.07);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.theme-dark {
  --bg: #14161a;
  --surface: #1c1f25;
  --text: #eceef1;
  --text-dim: #9aa2ad;
  --line: #2b3038;
  --line-strong: #363d47;
  --ok: #4ade80;
  --pending: #fbbf24;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px -4px rgba(0, 0, 0, 0.4);
}

* { 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. Without this the
   Auto stop-condition fields sat open under the Manual tab on every game page.
   `!important` because the rule has to win against the class that caused it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Figures are most of what a faucet says, so they align everywhere. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--b-14); }

/* Keyboard focus only. The default ring is easy to lose on a pale surface, and
   without it the page is quietly unusable without a mouse. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }

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

.site-header a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.16s var(--ease);
}

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

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  display: grid;
  gap: 20px;
}

.hero { text-align: center; }

/* clamp() rather than a size per breakpoint: it covers the widths between. */
.hero h1 {
  margin: 0 0 8px;
  font-size: clamp(25px, 5vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.lead { margin: 0; color: var(--text-dim); text-wrap: pretty; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-1);
}

/* A rule that stops where the text does: it separates the heading without
   adding another full-width line to a page already full of them. */
.card h2 {
  margin: 0 0 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.centered { text-align: center; display: grid; gap: 14px; justify-items: center; }

.claim-form { display: grid; gap: 14px; justify-items: start; }

.button {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.1s var(--ease);
}

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

/* One pixel is the cheapest signal that a tap registered, and it matters most
   on the claim button, where the next thing is a network round trip. */
.button:active { transform: translateY(1px); }

.button-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  width: 100%;
  text-align: center;
  box-shadow: 0 1px 0 color-mix(in srgb, white 22%, transparent) inset;
}

.button-primary:hover { color: #fff; filter: brightness(1.06); }

.button-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
  transform: none;
}

.button-small { padding: 7px 13px; font-size: 14px; }

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

.claim-list { list-style: none; margin: 0; padding: 0; display: grid; }

.claim-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  transition: background-color 0.16s var(--ease);
}

.claim-list li:hover { background: var(--b-06); }
.claim-list li:last-child { border-bottom: 0; }
.claim-list a { color: var(--brand); text-underline-offset: 2px; }

.claim-amount { font-weight: 600; }

.muted { color: var(--text-dim); }

.chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* A leading dot, so win and loss are separable without relying on colour. */
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.chip-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.chip-pending { background: color-mix(in srgb, var(--pending) 14%, transparent); color: var(--pending); }

.notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pending) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pending) 22%, transparent);
  color: var(--pending);
  font-size: 14px;
}

/* A claim's outcome is rendered in this page now rather than being a plain-text
   navigation, so the one notice element carries two states. The refused state is
   the default .notice above - these designs define --ok and --pending and no red,
   and amber is the right weight for "that did not go through" anyway. Only the
   paid state needs its own colour. */
.notice-ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
}


/* 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; }

/* Game page. Shared with every starter that reuses these pages, so the class
   names are part of the markup contract rather than one design's private
   business. */

.balance {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.bet-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; font-size: 13px; color: var(--text-dim); }

/* The label only: uppercasing the whole field means undoing it on every control inside. */
.field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* width and min-width are load-bearing, not tidiness. A form control's
   min-content width is its default `size`, far wider than this panel, and the
   panel is a FIXED grid track - so without these the track inflates to the
   control and the whole form renders outside the panel, underneath the stage.
   Every control in here is meant to fill its column and nothing wider. */
.field input,
.field select {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--b-14);
}

.potential {
  padding: 10px 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--b-06);
  color: var(--text);
  font-weight: 600;
}

/* The result replaces itself in place on every bet. Without a transition, two
   consecutive losses look like nothing happened. */
.result { margin: 14px 0 0; padding: 11px 13px; border-radius: 8px; font-weight: 600; animation: minimal-settle 0.3s var(--ease); }

@keyframes minimal-settle {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.result-win {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 26%, transparent);
}

.result-loss { background: color-mix(in srgb, var(--text-dim) 10%, transparent); color: var(--text-dim); }

.seed-list { margin: 0 0 14px; display: grid; gap: 4px; font-size: 13px; }

.seed-list dt {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.seed-list dd { margin: 0 0 9px; }

.seed-list code {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}

.verify-link {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--b-30);
  transition: background-color 0.16s var(--ease);
}

.verify-link:hover { background: var(--b-14); }

.site-footer { padding: 24px 20px 40px; text-align: center; color: var(--text-dim); font-size: 13px; }

@media (max-width: 520px) {
  main { padding-top: 24px; }
  .field-row { grid-template-columns: 1fr; }
}

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

/* Game table. Controls left, outcome right - the shape a casino game uses,
   because the two halves are read at different moments. Minimal keeps its
   restraint: plain surfaces, one hairline each, and the roll left to carry the
   moment on size alone rather than on glow. */

.game-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.game-panel,
.game-stage {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* container-type, and the @container query further down, are load-bearing.
   This design's main is 640px wide, so the stage column is 280px at EVERY
   viewport - and the roll's three-across arrangement needs 315px. The
   viewport-keyed breakpoint that was meant to rescue it could therefore never
   fire on a desktop, and the roll hung 55px outside this card for every tenant
   on this design. The stage is the only thing that knows how much room it has.
   minmax(0, 1fr) so the column cannot be inflated past the card by its contents. */
.game-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; container-type: inline-size; }

.amount { display: flex; gap: 6px; }
.amount input { flex: 1; min-width: 0; }

.amount-step,
.quick-btn {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.amount-step { width: 42px; flex-shrink: 0; }
.quick-btn { padding: 8px 4px; font-size: 11.5px; }

.amount-step:hover, .quick-btn:hover { color: var(--brand); border-color: var(--brand); }
.amount-step:active, .quick-btn:active { transform: translateY(1px); }

.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.bet-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* HI and LO are the whole decision, so neither is subordinate - and they are
   coloured apart so the wrong one is hard to press by accident. */
.bet-button {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.bet-button-name { font-size: 14px; font-weight: 700; }
.bet-button-hint { font-size: 10.5px; font-weight: 500; opacity: 0.85; }

.bet-hi { background: var(--ok); }
.bet-lo { background: var(--brand); }
.bet-hi:hover, .bet-lo:hover { filter: brightness(1.07); }
.bet-button[disabled] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.35); }

/* minmax(0, ...) on the sides: `1fr` is minmax(auto, 1fr), and that auto minimum
   is the width of "ROLL OVER 52.49", which is why this could push past the card. */
.roll { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }

.roll-side {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.roll-side-mark { font-size: 18px; font-weight: 700; }
.roll-side-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Only the side actually bet lights up, so the stage records the decision as
   well as the outcome. */
.roll-side-active.roll-side-hi { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.roll-side-active.roll-side-lo { color: var(--brand); border-color: var(--b-30); }

.roll-face {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 180px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.roll-value { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.roll-scale { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.roll-face-win { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.roll-face-loss { border-color: var(--line-strong); }

.profits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.profit {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profit-label { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.profit-value { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.profit-up { color: var(--ok); }
.profit-down { color: var(--text-dim); }

/* The result line is the stage's resting state before the first bet, so it is a
   banner rather than a footnote under a card. */
.game-stage .result {
  margin: 0;
  padding: 13px;
  text-align: center;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Keyed on the STAGE, not the viewport. The viewport says nothing useful about
   how wide this card is: main is capped at 640px here, so the stage is 280px on a
   1920px monitor exactly as it is on a 700px one, and the old
   `@media (max-width: 560px)` rescue below could not fire in either case.
   Three cards across need roughly 420px; under that they stack, which is what the
   arrangement was always meant to do when it ran out of room. */
@container (max-width: 420px) {
  .roll { grid-template-columns: minmax(0, 1fr); }
  .roll-face { min-width: 0; }
  .profits { grid-template-columns: minmax(0, 1fr); }
}

/* Kept for the narrow-viewport case, where the stage is full-width and the
   container query above has already stacked it. Harmless, and it keeps the page
   sane in a browser without container query support. */
@media (max-width: 560px) {
  .roll { grid-template-columns: minmax(0, 1fr); }
  .roll-face { min-width: 0; }
  .profits { grid-template-columns: minmax(0, 1fr); }
}

/* Manual / Auto, and the auto controls.
   The tab strip sits above the bet form because it changes what the primary button
   does - "Bet HI" becomes "Start HI" - and a control that reassigns another control
   has to be read first. */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; }

.tab {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.tab:hover { color: var(--text); }
.tab-active { color: var(--brand); border-color: var(--brand); background: var(--b-06, transparent); }

.auto-panel { display: grid; gap: 10px; margin-bottom: 12px; }

/* The unit inside a field, so "50" reads as a percentage without a separate label. */
.amount-suffix {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg, transparent);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
}

/* The offerwall iframe. 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. */
.offerwall-frame {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  border-radius: 8px;
}

/* Ad slots.

   Centred and given room to breathe, and nothing else: the unit inside is an
   iframe or a script from the ad network, whose own size is fixed by the format
   the owner chose. Styling its contents is not ours to do, and constraining the
   box would clip a unit the network already sized.

   Desktop and mobile units are provisioned separately upstream - they are
   different sizes with different fill - so exactly one of each pair is shown,
   rather than loading both and hiding one. A hidden iframe still fetches, still
   counts an impression the visitor never saw, and that is how a publisher's
   viewability score is ruined. */
.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; }
}

/* Offer walls on a phone.
   Two things ruin a wall on a small screen: a frame taller than the screen, so
   the player scrolls our page AND the wall and never knows which; and tabs that
   wrap into several rows, pushing the wall below the fold before it begins. */
@media (max-width: 640px) {
  /* The header on a small screen.
     Six short links in a nowrap flex row are wider than a 320px phone, so the
     document itself scrolled sideways - measured at 351px against a 320px screen
     on the offerwall page, which carries one link more than the home page. The
     nav wraps to its own row instead of being hidden in a scroller, so nothing
     ends up off-screen where a player cannot find it.

     The tap targets go to 44px at the same time. They were ~20px: a 14px line of
     text with no padding, which is half the minimum this platform's own design
     guidance asks for and hard to hit while holding a phone one-handed. */
  .site-header { flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; }
  .site-header nav { width: 100%; flex-wrap: wrap; gap: 4px 14px; }
  .site-header nav a,
  .site-header nav button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    padding: 12px 16px;
    min-height: 44px;
  }
  .offerwall-frame {
    border-radius: 0;
    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); }
}