/* Neon — a dark, high-contrast faucet.
   Shares its markup with Minimal on purpose: the structure is what keeps the
   claim form, the captcha and the cooldown correct, so a restyle should only
   ever change this file.

   The glow is the whole design, so the detailing here is about making it
   deliberate rather than uniform: it is strongest on the primary action, present
   on focus and on a win, and absent everywhere it would just be haze. */

: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: #3ddc97;
  --bg: #0b0e14;
  --bg-glow: #131a26;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-solid: #131822;
  --text: #f2f5f9;
  --text-dim: #8b95a5;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.17);
  --ok: #3ddc97;
  --pending: #ffc857;
  --radius: 14px;

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

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { 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;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-glow), transparent 70%),
    var(--bg);
  font: 16px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  /* 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-30); }

/* Keyboard focus only. The default ring is invisible on a dark surface, which
   quietly makes the page 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 22px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  z-index: 10;
}

.brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.015em;
  background: linear-gradient(92deg, var(--text), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

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

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

main {
  max-width: 660px;
  margin: 0 auto;
  padding: 44px 20px 72px;
  display: grid;
  gap: 22px;
}

.hero { text-align: center; }

/* clamp() rather than a size per breakpoint: it covers the widths between. */
.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-shadow: 0 0 40px color-mix(in srgb, var(--brand) 45%, transparent);
  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: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* 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.1em;
  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-strong), transparent); }

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

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

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

.button:hover {
  border-color: var(--b-60);
  box-shadow: 0 0 0 3px var(--b-16);
}

/* 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 {
  width: 100%;
  text-align: center;
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, white), var(--brand));
  color: #04070c;
  box-shadow: 0 6px 24px -8px var(--b-60);
}

.button-primary:hover {
  filter: brightness(1.07);
  /* The glow is the design's signature, so the primary action is where it gets
     to be loudest - and the only place it grows on hover. */
  box-shadow: 0 8px 34px -8px color-mix(in srgb, var(--brand) 85%, transparent);
}

.button-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
  transform: none;
}

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

.countdown { margin: 0 0 2px; color: var(--brand); font-size: 14px; font-weight: 600; }

.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: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  transition: background-color 0.16s var(--ease);
}

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

.claim-amount { font-weight: 700; letter-spacing: -0.01em; }

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

.chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  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) 16%, transparent);
  color: var(--ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent);
}

.chip-pending,
.notice {
  background: color-mix(in srgb, var(--pending) 14%, transparent);
  color: var(--pending);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pending) 26%, transparent);
}

.notice { margin: 0; padding: 11px 13px; border-radius: 10px; 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) 14%, transparent);
  color: var(--ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 26%, transparent);
}


.basilisk_captcha { min-height: 74px; width: 100%; max-width: 372px; }

/* Game page. These class names come from the shared pages, so this design has
   to style them or the game page arrives unstyled - the starter reuses the
   markup and forks only the CSS. */

.balance {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--b-10);
  box-shadow: inset 0 0 0 1px var(--b-30);
}

.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: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.potential {
  padding: 11px 12px;
  border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
  border-radius: 10px;
  background: var(--b-10);
  color: var(--brand);
  font-weight: 700;
}

/* 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: 12px 13px; border-radius: 10px; font-weight: 700; animation: neon-settle 0.32s var(--ease); }

@keyframes neon-settle {
  from { opacity: 0; transform: translateY(-5px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.result-win {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  /* A win is the one moment the page should glow somewhere other than the
     button. A loss deliberately does not. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent),
    0 8px 30px -12px color-mix(in srgb, var(--ok) 60%, transparent);
}

.result-loss { background: color-mix(in srgb, var(--text-dim) 14%, 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: 5px 9px;
  border-radius: 7px;
  background: var(--surface-solid);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  word-break: break-all;
  color: var(--brand);
}

.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.15s var(--ease);
}

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

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

@media (max-width: 520px) {
  main { padding-top: 30px; }
  .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. Neon is where the glow earns its
   keep: the stage is the lit surface, the roll face carries the light, and a win
   is the one moment it flares. */

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

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

/* container-type, with the @container query further down, is what lets the roll
   inside decide on the room it actually has. The viewport cannot answer that: a
   design whose main is narrow keeps this card the same width on a 1920px monitor
   as on a 700px one, so a viewport-keyed breakpoint never fires and the roll hangs
   outside the card. minmax(0, 1fr) so the column cannot be inflated past the card
   by its own contents. */
.game-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 240px at 50% 0%, var(--b-10), transparent 70%),
    var(--surface-solid);
}

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

.amount-step,
.quick-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

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

.amount-step:hover, .quick-btn:hover {
  color: var(--brand);
  border-color: var(--b-60);
  box-shadow: 0 0 0 3px var(--b-16);
}

.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: 13px 10px;
  border: 0;
  border-radius: 10px;
  text-align: center;
  color: #04070c;
  cursor: pointer;
}

.bet-button-name { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.bet-button-hint { font-size: 10.5px; font-weight: 600; opacity: 0.7; }

.bet-hi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 92%, white), var(--ok));
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--ok) 70%, transparent);
}

.bet-lo {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, white), var(--brand));
  box-shadow: 0 6px 24px -8px var(--b-60);
}

.bet-hi:hover, .bet-lo:hover { filter: brightness(1.08); }
.bet-button[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); box-shadow: none; }

/* minmax(0, ...) on the sides: `1fr` is minmax(auto, 1fr), and that auto minimum
   is the width of "ROLL OVER 52.49", which is what pushed this 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: 12px;
  color: var(--text-dim);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.roll-side-mark { font-size: 19px; font-weight: 800; letter-spacing: 0.04em; }
.roll-side-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; }

/* 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) 50%, transparent);
  box-shadow: 0 0 24px -10px color-mix(in srgb, var(--ok) 70%, transparent);
}

.roll-side-active.roll-side-lo {
  color: var(--brand);
  border-color: var(--b-60);
  box-shadow: 0 0 24px -10px var(--b-60);
}

.roll-face {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 190px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  transition: box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
}

.roll-value {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 30px var(--b-30);
}

.roll-scale { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; }

/* The one place other than the primary button where the glow is allowed to
   bloom. A loss deliberately does not. */
.roll-face-win {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  box-shadow: 0 0 44px -10px color-mix(in srgb, var(--ok) 75%, 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: 10px;
  background: var(--bg);
}

.profit-label { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.profit-value { font-size: 14px; font-weight: 700; 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 reads
   as a banner rather than a footnote. */
.game-stage .result {
  margin: 0;
  padding: 14px;
  text-align: center;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-dim);
  font-weight: 600;
}

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

/* Keyed on the STAGE, not the viewport, because the viewport says nothing about
   how wide this card is - a design with a narrow main keeps it the same width at
   every screen size. 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, and as the fallback 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;
}