/*
 * Shared visual foundation for the whole site (task 03).
 *
 * Modelled on lottosearcher.com: white background, system font stack, a
 * two-tone "LotterySearcher" wordmark (blue + red), light-grey 2px card borders
 * with 12px rounded corners, and generous whitespace. Every page and component
 * builds on the tokens and classes here rather than inventing its own styles,
 * so the look stays consistent and the CSS stays easy to minify.
 */

/* ---------- Design tokens ---------- */
:root {
  /* Brand + surface colours (sampled from the live site) */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #576270; /* darkened from the original #6b7280 sample: that shade fell below 4.5:1 contrast on the tinted surfaces (supplementary balls, notices) it's also used on */
  --border: #e8e8e8;
  --border-strong: #d5d9e0;

  --brand-blue: #2f6bd4;
  --brand-blue-dark: #2457b3;
  --brand-red: #c62838;

  /* Lottery-ball accents */
  --gold: #f4b400;
  --gold-dark: #c8940a;
  --match: #0f7a44; /* highlight for a searched number that appears in a draw; darkened from #1a9d54, which was only ~3.5:1 against white text */

  /* Type */
  --font: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lift: 0 6px 20px rgba(16, 24, 40, 0.10);

  --container: 1040px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  margin: 0;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Dynamic side padding: never less than 18px, grows with the viewport, capped
   * so it doesn't get silly on desktop. IMPORTANT: elements that also carry
   * .container (header, #app, footer) must set only their TOP/BOTTOM padding
   * (padding-block) — a 4-value `padding` shorthand would reset this to 0 and
   * push every edge of the page flush against the screen on mobile. */
  padding: 0 clamp(18px, 5vw, 32px);
}

.page {
  padding-block: var(--space-6) var(--space-7);
}

/* ---------- Site header / wordmark ---------- */
.site-header {
  padding-block: var(--space-6) var(--space-2);
  text-align: center;
}

.wordmark {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  display: inline-block;
}
.wordmark a { color: inherit; }
.wordmark a:hover { text-decoration: none; }
.wordmark .lottery { color: var(--brand-blue); }
.wordmark .searcher { color: var(--brand-red); }
.wordmark .tld {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  vertical-align: super;
}

.tagline {
  color: var(--muted);
  text-align: center;
  margin-top: var(--space-3);
  font-size: 17px;
}

/* ---------- Section headings ---------- */
.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  margin-top: var(--space-6);
}
.section-subtitle {
  text-align: center;
  color: var(--muted);
  margin-top: var(--space-2);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Region grid on the landing page */
.region-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.region-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.region-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  text-decoration: none;
}
.region-card .flag {
  font-size: 40px;
  line-height: 1;
}
.region-card .country {
  font-size: 19px;
  font-weight: 800;
}
.region-card .games {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  background: #eef1f6;
  color: var(--text);
}
.btn:hover { background: #e3e8f0; }

.btn--primary {
  background: var(--brand-blue);
  color: #fff;
}
.btn--primary:hover { background: var(--brand-blue-dark); }

.btn--block { width: 100%; }

.btn--lg { padding: 15px 28px; font-size: 18px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--muted);
}
.btn--ghost:hover { background: #f5f6f8; }

/* ---------- Number balls ---------- */
/*
 * A single .ball base with modifiers so the picker, the results table and the
 * bonus reveal all share one visual language:
 *   .ball--pick   clickable grid ball (default white, filled blue when chosen)
 *   .ball--draw   a drawn number in a results row (classic white lotto ball)
 *   .ball--bonus  a player-picked bonus ball (gold)
 *   .ball--supp   a drawn supplementary ball (muted, smaller)
 *   .is-selected  currently chosen in the picker
 *   .is-match     a searched number that appears in this draw (green ring)
 */
.ball {
  --size: 44px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  background: #fff;
  color: var(--text);
  border: 2px solid var(--border-strong);
  user-select: none;
  flex: 0 0 auto;
}

.ball--pick {
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease,
    border-color 0.12s ease, color 0.12s ease;
}
.ball--pick:hover {
  border-color: var(--brand-blue);
}
.ball--pick.is-selected {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  transform: scale(1.04);
}
.ball--pick.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ball--pick.is-disabled:hover {
  border-color: var(--border-strong);
}

.ball--draw {
  box-shadow: var(--shadow);
}
.ball--draw.is-match {
  border-color: var(--match);
  box-shadow: 0 0 0 2px rgba(15, 122, 68, 0.25);
  color: var(--match);
}

.ball--bonus {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: #3a2c00;
}

.ball--supp {
  --size: 34px;
  font-size: 13px;
  background: #f1f3f7;
  border-color: var(--border);
  color: var(--muted);
}

/* A big single ball used by the bonus-ball reveal */
.ball--hero {
  --size: 108px;
  font-size: 44px;
  border-width: 3px;
  box-shadow: var(--shadow-lift);
}

/* Rows / groups of balls */
.ball-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ball-row--center { justify-content: center; }
.ball-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 var(--space-1);
}
.ball-group-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: var(--space-1);
}

/* ---------- Forms (settings page) ---------- */
.field {
  margin-bottom: var(--space-5);
}
/* The field's caption label — not a control that happens to be a <label>, like
 * the toggle switch, which must keep its own inline-flex layout. */
.field > label:not(.switch) {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.field .hint {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: var(--space-2);
}
.input {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}
.input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 212, 0.15);
}
.field.has-error .input {
  border-color: var(--brand-red);
}
.field__error {
  color: var(--brand-red);
  font-size: 14px;
  margin-top: var(--space-2);
  min-height: 1em;
}

/* Toggle switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: 9px; /* grows the tap target to ~44px tall without changing the visual track size */
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; }
.switch .track {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.15s ease;
  flex: 0 0 auto;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.switch input:checked + .track {
  background: var(--brand-blue);
}
.switch input:checked + .track::after {
  transform: translateX(20px);
}

/* ---------- Utility ---------- */
.stack > * + * { margin-top: var(--space-4); }
.center { text-align: center; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- Search page ---------- */
.game-switcher {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.game-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* comfortable tap target — this is switched live, mid-routine, from a phone */
  padding: 8px 18px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.game-tab:hover { border-color: var(--brand-blue); }
.game-tab.is-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.search-panel {
  margin: var(--space-6) auto 0;
  max-width: 680px;
}
.picker-block + .picker-block {
  margin-top: var(--space-5);
}
.picker-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.picker-label .count {
  font-weight: 600;
  color: var(--muted);
  font-size: 14px;
}
.picker-label .count.is-full {
  color: var(--match);
}
.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--space-2);
  justify-items: center;
}
.search-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.search-actions .btn--primary { flex: 1; }

/* ---------- Results ---------- */
.results {
  margin: var(--space-6) auto 0;
  /* Wide enough that the past-draws table (now with the "you'd have lost"
   * column) fits without a scrollbar on desktop for the common games; narrower
   * games use less, and very wide ones still scroll inside .results-scroll. */
  max-width: 820px;
}
/* Results sit at the top of the search page and are empty until the first
 * search — collapse the container so it leaves no gap on initial load. */
.results:empty { display: none; }
.searched-recap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #f8f9fb;
}
.searched-recap .label {
  font-weight: 700;
  color: var(--muted);
  font-size: 14px;
}

.result-card {
  margin-top: var(--space-5);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.result-card__head {
  background: var(--brand-blue);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  gap: var(--space-3);
}
.result-card__head .match-note {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}
.result-card__body {
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.result-meta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 15px;
}
.result-meta strong { color: var(--text); }

.draws-title {
  margin-top: var(--space-6);
  font-weight: 800;
  font-size: 18px;
}
.draws-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
}
.draws-table th,
.draws-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap; /* keep each cell on one line; the table scrolls sideways */
}
/* Winning numbers stay in a single horizontal row — never stack vertically in a
 * cramped cell. The table then overflows into its own horizontal scroll. */
.draws-table td.numbers .ball-row { flex-wrap: nowrap; }
.draws-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.draws-table td.numbers .ball { --size: 34px; font-size: 13px; }
.draws-table td.numbers .ball--supp { --size: 28px; font-size: 11px; }
.draws-table .jackpot { font-weight: 700; white-space: nowrap; }
/* The dramatic "you'd have lost" column — a big red negative to drive it home. */
.draws-table .loss {
  color: var(--brand-red);
  font-weight: 800;
  white-space: nowrap;
}
.loss-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: var(--space-2);
}

.results-scroll { overflow-x: auto; }

/* Brief reveal animation for the bonus-ball box (visual theatre only). */
.revealing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}
.revealing .spinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 5px solid var(--border);
  border-top-color: var(--brand-blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Bonus-ball reveal box on the search page (a plain pass-through, not a force) */
.bonus-reveal {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bonus-reveal .search-actions {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.bonus-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}
.bonus-slot {
  width: 80px;
}
.bonus-slot label {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.bonus-slot .input {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  padding: 10px 4px;
}

/* ---------- Settings page ---------- */
.settings-wrap {
  max-width: 560px;
  margin: var(--space-6) auto 0;
}
.settings-section {
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
}
.settings-section h3 {
  font-size: 18px;
  margin-bottom: var(--space-4);
}
.pin-gate {
  max-width: 360px;
  margin: var(--space-7) auto 0;
  text-align: center;
}
.save-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}
.save-status {
  text-align: center;
  color: var(--match);
  font-weight: 700;
  min-height: 1.2em;
  margin-top: var(--space-2);
}
.save-status.is-error {
  color: var(--brand-red);
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding-block: var(--space-7) var(--space-5);
}

/* ---------- Focus ----------
 * A shared, explicit focus-visible ring for the custom interactive elements
 * that aren't native form controls (a <span role="button">, an <a> styled as
 * a card, a plain <button> repurposed as a pill or a toggle). Without this
 * they still take keyboard focus, but the browser's default outline is
 * inconsistent and easy to lose against the flat, bordered surfaces here. The
 * toggle switch needs its own rule because its real <input> is visually
 * hidden (opacity: 0) — an outline on an opacity:0 element is invisible, so
 * the ring has to render on the sibling .track instead.
 */
.ball--pick:focus-visible,
.region-card:focus-visible,
.game-tab:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}
.switch input:focus-visible + .track {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* ---------- Responsive (mobile is the primary device) ----------
 *
 * This is run from the performer's phone during a show, so the small-screen
 * layout is the one that matters most. Priorities: comfortable tap targets, a
 * single-column flow, tighter page chrome to save vertical space, and wide
 * content (the past-draws table) kept inside its own horizontal scroll so the
 * page itself never shifts sideways.
 */
@media (max-width: 640px) {
  /* Only top/bottom padding here — the side padding comes from .container and
   * must not be reset (see the note there). */
  .page { padding-block: var(--space-5) var(--space-6); }
  .site-header { padding-block: var(--space-5) var(--space-2); }

  .region-grid { grid-template-columns: 1fr; }
  .wordmark { font-size: 28px; }
  .tagline { font-size: 15px; }
  .section-title { font-size: 22px; margin-top: var(--space-5); }
  .section-subtitle { font-size: 15px; }

  /* Number picker: exactly 6 balls per row, each sized dynamically to fill its
   * column (up to a cap) so it's a comfortable tap target on any phone width. */
  .number-grid { grid-template-columns: repeat(6, 1fr); }
  .ball--pick {
    width: 100%;
    max-width: 56px;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: 17px;
  }

  /* Search buttons stack full-width so neither is a small target. */
  .search-actions { flex-direction: column; align-items: stretch; }
  .search-actions .btn { width: 100%; }
  .bonus-reveal .search-actions { max-width: none; }

  /* Result header: stack the title above the match note instead of squeezing. */
  .result-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .result-card__body { padding: var(--space-4) var(--space-3); }
  .searched-recap { padding: var(--space-3); }
  .result-meta { gap: var(--space-4); }
  .ball--hero { --size: 92px; font-size: 38px; }

  /* Compact the past-draws table so less of it needs to scroll sideways. */
  .draws-table th,
  .draws-table td { padding: var(--space-2); }
  .draws-table td.numbers .ball { --size: 30px; font-size: 12px; }
  .draws-table td.numbers .ball--supp { --size: 26px; font-size: 10px; }
}

/* Very small phones: keep the wordmark from crowding the header. The 6-column
 * picker balls shrink to fit on their own, so no ball-size override is needed. */
@media (max-width: 360px) {
  .wordmark { font-size: 25px; }
}