/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #002400 #00ffff #000000 #00ff00 #ff2727 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #000000;
  --surface: #1a1a1a;
  --surface-2: #0d0d0d;
  --border: #242424;
  --border-strong: #4d4d4d;
  --ink: #00ffff;
  --muted: #009999;
  --accent: #00ff00;
  --accent-hover: #26ff26;
  --accent-ink: #000000;
  --accent-text: #ff2727;
  --accent-strong: #00ff00;
  --accent-soft: #003800;
  --accent-border: #007300;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #051c0d;
  --success-strong: #39935b;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #281202;
  --warning-strong: #c06e2f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #290606;
  --danger-strong: #cd5c5c;}

/* ====================================================================
 * app.css — Ak Bot's own stylesheet. Loads after design.css and theme.css.
 * ==================================================================== */

/* ---- Retune the system: a crisper, data-led analytics character ---- */
:root {
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
}

/* ---- Hero data-grid texture, used once on the Play screen header --- */
.data-grid-bg {
  position: relative;
  overflow: hidden;
}
.data-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-ink) 10%, transparent) 0,
      color-mix(in srgb, var(--accent-ink) 10%, transparent) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--accent-ink) 10%, transparent) 0,
      color-mix(in srgb, var(--accent-ink) 10%, transparent) 1px,
      transparent 1px,
      transparent 48px
    );
  pointer-events: none;
}

/* ---- Bet panel: pure-CSS tab switching, no JS needed --------------- */
.bet-panel .group {
  display: none;
  gap: var(--s-2);
}
.bet-panel:has(#bt-color:checked) .group-color,
.bet-panel:has(#bt-size:checked) .group-size,
.bet-panel:has(#bt-number:checked) .group-number {
  display: flex;
  flex-wrap: wrap;
}

.bet-type-tabs {
  gap: var(--s-2);
}

input.sr-only:checked + label.chip {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  min-width: 96px;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.swatch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.swatch-label {
  font-weight: 600;
}
.swatch-odds {
  font-size: var(--t-xs);
  color: var(--muted);
}

.swatch-green {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}
.swatch-green .swatch-label {
  color: var(--success-strong);
}
.swatch-red {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.swatch-red .swatch-label {
  color: var(--danger-strong);
}
.swatch-violet {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--danger) 40%);
}
.swatch-violet .swatch-label {
  color: color-mix(in srgb, var(--accent-strong) 50%, var(--danger-strong) 50%);
}
.swatch-neutral .swatch-label {
  color: var(--ink);
}

input.sr-only:checked + label.swatch-green {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  box-shadow: 0 0 0 2px var(--success) inset;
}
input.sr-only:checked + label.swatch-red {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  box-shadow: 0 0 0 2px var(--danger) inset;
}
input.sr-only:checked + label.swatch-violet {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: 0 0 0 2px var(--accent) inset;
}
input.sr-only:checked + label.swatch-neutral {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-border) inset;
}

.num-chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.num-chip:hover {
  transform: translateY(-2px);
}
input.sr-only:checked + label.num-chip {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---- Result / draw display ------------------------------------------ */
.result-chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.result-number {
  font-family: var(--font-mono);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1;
}
.result-meta {
  color: var(--muted);
  text-transform: capitalize;
}
.result-chip.swatch-green .result-number {
  color: var(--success-strong);
}
.result-chip.swatch-red .result-number {
  color: var(--danger-strong);
}
.result-chip.swatch-violet .result-number {
  color: color-mix(in srgb, var(--accent-strong) 50%, var(--danger-strong) 50%);
}

.win-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  font-weight: 600;
}
.win-banner.is-win {
  background: var(--success-soft);
  color: var(--success-strong);
}
.win-banner.is-loss {
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.draw-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.draw-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--muted);
}
.draw-dot.swatch-green {
  background: var(--success);
}
.draw-dot.swatch-red {
  background: var(--danger);
}
.draw-dot.swatch-violet {
  background: color-mix(in srgb, var(--accent) 50%, var(--danger) 50%);
}

/* ---- Charts ------------------------------------------------------------ */
.chart-line {
  width: 100%;
  height: 160px;
  display: block;
}
.chart-zero-line {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.chart-empty {
  display: grid;
  place-items: center;
  height: 160px;
  color: var(--muted);
  font-size: var(--t-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 96px;
  align-items: center;
  gap: var(--s-3);
}
.bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

@media (max-width: 480px) {
  .bar-row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}