/* 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 the page now rather than being a plain-text
   navigation, so the 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. */
.notice-ok {
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 24%, 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);
}

.game-stage { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; gap: 16px; }

.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); }

.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: 1fr; }
}

/* Keyed on the STAGE, not the viewport: a design with a narrow main keeps this
   card the same width at every screen size, so a viewport breakpoint could never
   fire and the roll hung outside the card. */
@container (max-width: 420px) {
  .roll { grid-template-columns: minmax(0, 1fr); }
  .roll-face { min-width: 0; }
  .profits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .roll { grid-template-columns: 1fr; }
  .roll-face { min-width: 0; }
  .profits { grid-template-columns: 1fr; }
}