/* ==========================================================================
   NLA 590 Mobile — application styles

   Mobile-first. Every size assumes a phone; wider viewports get more columns
   but never a different layout model. Built so the same CSS works inside a
   Capacitor WebView: safe-area insets are honoured, interactive elements are
   at least 44px, and text never renders below 16px in a form field (which would
   trigger an unwanted zoom on iOS and Android keyboards).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --obsidian:    #0b0b10;
  --surface:     #14141c;
  --surface-2:   #1b1b25;
  --surface-3:   #23232f;
  --line:        #2a2a38;
  --line-soft:   #22222d;

  --ink:         #f2f0e9;
  --ink-dim:     #cfccd9;
  --muted:       #9694a8;

  --gold:        #d4af37;
  --gold-soft:   #e8c766;
  --gold-deep:   #9c7c1f;

  --win:         #4ade80;
  --win-deep:    #166534;
  --danger:      #f87171;
  --danger-deep: #7f1d1d;
  --warn:        #fbbf24;
  --info:        #60a5fa;

  --accent: var(--gold);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --tap: 44px;

  --pad: 16px;
  --shell-max: 1180px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --tabbar-h: 62px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--obsidian);
  color: var(--ink);
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; display: block; }
svg { fill: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

a { color: var(--gold-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

code, .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: #000; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #000; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Shell and sections
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding:
    calc(var(--pad) + var(--safe-top))
    calc(var(--pad) + var(--safe-right))
    calc(var(--pad) * 1.5)
    calc(var(--pad) + var(--safe-left));
}

.section { margin-bottom: calc(var(--pad) * 2); }

.section__head {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.section__title { margin: 0; }
.section__sub { margin: 0; color: var(--muted); font-size: .9rem; }
.section__link { font-size: .9rem; white-space: nowrap; }

.lead { font-size: 1.05rem; color: var(--ink-dim); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 11, 16, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: calc(var(--safe-top) + 10px) 0 0;
}

.app-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 calc(var(--pad) + var(--safe-right)) 10px calc(var(--pad) + var(--safe-left));
  max-width: var(--shell-max); margin: 0 auto;
}

/* Hamburger, first thing in the header so it sits in the top-left corner. */
.menu-toggle {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.menu-toggle:hover { color: var(--ink); border-color: var(--gold-deep); }
.menu-toggle__bars { display: grid; gap: 4px; width: 18px; }
.menu-toggle__bars i {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .16s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.brand { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.brand:hover { text-decoration: none; }

/* The supplied logo mark. Sized in CSS rather than left to the intrinsic width
   so the header height does not change with the asset, and object-fit keeps it
   from being distorted if a replacement artwork is not square. */
.brand__logo {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  object-fit: contain;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__text strong { font-size: .98rem; letter-spacing: -.01em; }
.brand__text small {
  color: var(--muted); font-size: .72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Slide-down menu. Sits below the header row so the bar stays visible and the
   toggle reads as an open/close control rather than a page change. */
.menu {
  position: absolute; left: 0; right: 0;
  top: 100%;
  z-index: 70;
  max-height: calc(100vh - var(--safe-top) - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
  animation: menu-drop .18s var(--ease);
}
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
}

.menu__panel {
  max-width: var(--shell-max); margin: 0 auto;
  padding: 10px calc(var(--pad) + var(--safe-right)) 16px calc(var(--pad) + var(--safe-left));
}

.menu__nav { display: grid; gap: 2px; }
.menu__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 46px;
  padding: 0 12px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: .95rem;
}
.menu__item:hover { text-decoration: none; background: var(--surface-2); }
.menu__item.is-active { background: rgba(212, 175, 55, .14); color: var(--gold-soft); }
.menu__item-go { color: var(--muted); font-size: 1.1rem; line-height: 1; }

.menu__group {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 2px;
}
.menu__heading {
  margin: 0 0 4px; padding: 0 12px;
  font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold);
}
.menu__sub {
  display: flex; align-items: center;
  min-height: 40px; padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim); font-size: .88rem;
}
.menu__sub:hover { text-decoration: none; color: var(--ink); background: var(--surface-2); }
/* A sub-link you are already on, so opening the menu on Wallet activity shows
   where you are rather than the same list of links as everywhere else. */
.menu__sub.is-active { color: var(--gold-soft); background: rgba(212, 175, 55, .14); }
/* A link that belongs to the entry above it rather than to the group: Latest
   tickets is the short reprint list under My tickets, not a peer of it. The
   rule down the left edge carries that nesting without a second font size. */
.menu__sub--child {
  padding-left: 22px;
  box-shadow: inset 2px 0 0 var(--line);
}
.menu__sub--child.is-active { box-shadow: inset 2px 0 0 var(--gold); }

.menu__who {
  margin: 0 0 4px; padding: 0 12px 8px;
  display: grid; font-size: .82rem;
}
.menu__who span { color: var(--muted); font-size: .76rem; }

.menu__close { margin-top: 14px; }

/* Agent float actions sit in the retailers table, so they need to stay narrow
   enough not to stretch the row on a phone. */
.float-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.float-actions .btn { white-space: nowrap; }

.balance-pill {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 4px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: inherit; line-height: 1.2;
}
.balance-pill:hover { text-decoration: none; border-color: var(--gold-deep); }
.balance-pill__label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.balance-pill strong { font-size: .92rem; color: var(--gold-soft); }

.draw-ticker {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px calc(var(--pad) + var(--safe-right)) 7px calc(var(--pad) + var(--safe-left));
  background: linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; flex-wrap: wrap;
}
.draw-ticker__name { font-weight: 700; }
.draw-ticker__label { color: var(--muted); }
/* The terminal's own code, tucked against the clock rather than spaced off on
   its own: the ticker is one fixed line in the shell and this belongs to it. A
   left rule instead of a chip border, because the ticker already has a
   background -- a second outline inside it reads as a button. */
.draw-ticker__id {
  margin-left: 2px; padding-left: 10px;
  border-left: 1px solid var(--line);
  font-family: ui-monospace, monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-dim);
}
.draw-ticker__time { font-family: ui-monospace, monospace; color: var(--gold-soft); font-weight: 700; letter-spacing: .02em; }
.draw-ticker__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--win);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; font-weight: 700;
  color: var(--gold-soft); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.countdown--inline { font-size: .82rem; margin-left: 6px; }
.countdown.is-urgent { color: var(--danger); }
.countdown.is-over  { color: var(--muted); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem;
  text-align: center; text-decoration: none;
  transition: transform .12s var(--ease), filter .16s var(--ease), background-color .16s var(--ease);
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(140deg, var(--gold-soft), var(--gold));
  color: #1a1508;
  box-shadow: 0 2px 12px rgba(212, 175, 55, .22);
}
.btn-primary:hover:not([disabled]) { filter: brightness(1.07); }

.btn-green {
  background: linear-gradient(140deg, var(--win), #22c55e);
  color: #06210f;
  box-shadow: 0 2px 12px rgba(74, 222, 128, .22);
}
.btn-green:hover:not([disabled]) { filter: brightness(1.07); }

.btn-secondary { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover:not([disabled]) { border-color: var(--gold-deep); }

.btn-ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.btn-ghost:hover:not([disabled]) { background: var(--surface-2); color: var(--ink); }

.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(248, 113, 113, .35); }
.btn-danger:hover:not([disabled]) { background: rgba(248, 113, 113, .1); }

.btn-sm  { min-height: 34px; padding: 0 12px; font-size: .85rem; }
.btn-lg  { min-height: 52px; padding: 0 24px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }

.link-btn {
  color: var(--gold-soft); font-size: .85rem; font-weight: 600;
  padding: 6px 4px; min-height: 32px;
}
.link-btn:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--pad);
}
.card__title { font-size: 1.05rem; margin-bottom: 10px; }

/* A card that is itself the link. The whole surface is the hit area so the
   shortcut does not have to be aimed at, and the focus ring is drawn on the
   card rather than the inner text so it is visible against the surface. */
.card--link {
  display: block;
  margin-bottom: 0;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.card--link:hover { border-color: var(--gold-deep); background: var(--surface-2); }
.card--link:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}
.card--link .card__title { margin-bottom: 6px; }
.card__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--gold);
  font-size: .85rem;
  font-weight: 700;
}
.card__go::after { content: '\203A'; font-size: 1.1em; line-height: 1; }

.panel-grid { display: grid; gap: var(--pad); grid-template-columns: 1fr; }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-dim);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.badge--noon     { background: rgba(245, 197, 24, .16); color: #f5c518; }
.badge--evening  { background: rgba(212, 175, 55, .16); color: var(--gold-soft); }
.badge--credit   { background: rgba(74, 222, 128, .14); color: var(--win); }
.badge--debit    { background: rgba(148, 163, 184, .14); color: #cbd5e1; }
.badge--won      { background: rgba(74, 222, 128, .16); color: var(--win); }
.badge--error    { background: rgba(248, 113, 113, .16); color: var(--danger); }

.game-art {
display: block; max-width: 100%; height: auto; }
.game-art--noon { width: 100px; }
.game-art--evening { width: 100px; }
.session-card__badge .game-art,
.sheet__eyebrow .game-art,
.result-card__session .game-art { width: 100px; }
.game-art--badge { width: 96px; }
/* The hero mark stands in for a line of text, so it is sized against the headline
   it sits above rather than against the 100px the badges use -- but only just
   above it. The hero title is small on purpose, because the two longest headlines
   it has to carry ("Sunday Aseda is open for advance betting") wrap onto three
   lines at display sizes and push the clock and the Play button off a phone
   screen. A mark sized for a display headline then reads as the loudest thing on
   the page, which is not what a retailer glancing at the terminal needs first.
   Both families share one width because the hero reserves a single box for
   whichever shape turns up, and the intrinsic ratio keeps the height honest. */
.game-art--hero { width: 96px; }

.mult {
  font-family: ui-monospace, monospace; font-weight: 700;
  color: var(--gold-soft); white-space: nowrap;
}

.alert {
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .92rem;
  margin-bottom: var(--pad);
}
.alert ul { margin: 0; padding-left: 18px; }
.alert--error   { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .3); color: #fecaca; }
.alert--success { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .3); color: #bbf7d0; }
.alert--warning { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); color: #fde68a; }
.alert--info    { background: rgba(125, 155, 255, .1); border-color: rgba(125, 155, 255, .3); color: #c7d2fe; }

.flash-stack {
  position: fixed; top: calc(var(--safe-top) + 8px); left: 50%;
  transform: translateX(-50%); z-index: 300;
  width: calc(100% - 24px); max-width: 420px;
  display: grid; gap: 8px;
}
.flash {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .9rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: drop .3s var(--ease);
}
.flash--success { border-color: rgba(74, 222, 128, .4); color: #bbf7d0; }
.flash--error   { border-color: rgba(248, 113, 113, .4); color: #fecaca; }
.flash--info    { border-color: var(--line); }

@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }

.muted { color: var(--muted); }
.text-win { color: var(--win); }
.text-muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. Balls
   -------------------------------------------------------------------------- */
.ball {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1; width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--surface-3), #101017 72%);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform .12s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.ball__num { font-size: .92em; pointer-events: none; }

.ball:hover { border-color: var(--gold-deep); color: var(--ink); }

.ball[aria-pressed="true"],
.ball.is-selected {
  background: radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold-deep) 74%);
  border-color: var(--gold-soft);
  color: #1a1508;
  transform: scale(1.06);
  box-shadow: 0 3px 14px rgba(212, 175, 55, .35);
}

.ball--result {
  background: radial-gradient(circle at 32% 28%, #2b3a2f, #14201a 74%);
  border-color: rgba(74, 222, 128, .45);
  color: #dcfce7;
}

.ball--hit {
  background: radial-gradient(circle at 32% 28%, var(--win), var(--win-deep) 76%);
  border-color: var(--win);
  color: #04240f;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, .35);
}

.ball--first { position: relative; }
.ball--first::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px dashed rgba(74, 222, 128, .5);
}

.ball__tag {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: var(--win); color: #04240f;
  font-size: .55rem; font-weight: 800; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 999px;
}

/* Sized variants used in lists and result cards */
.ball--small { width: 30px; aspect-ratio: 1; font-size: .72rem; flex: 0 0 auto; }
.ball--tiny  { width: 24px; aspect-ratio: 1; font-size: .62rem; flex: 0 0 auto; }
.ball--large { width: 46px; aspect-ratio: 1; font-size: 1rem; flex: 0 0 auto; }
.ball--xl    { width: 62px; aspect-ratio: 1; font-size: 1.25rem; flex: 0 0 auto; }

/* Ten across is the base because six made a fifteen-row column on a phone: the
   counter had to scroll past a third of the board to reach the stake chips. Ten
   puts all ninety numbers in nine rows, which fits a phone screen outright.
   Every ball is width-derived (aspect-ratio: 1), so the column count is what
   actually sets their size. The digit inside is font-derived and does not follow
   the circle, so the type steps down with the grid or "90" prints across a 30px
   ball -- and back up once the circles are big enough to hold it again. */
.ball-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.ball-board .ball__num { font-size: .78em; }

@media (max-width: 380px) {
  .ball-board { gap: 4px; }
  .ball-board .ball__num { font-size: .74em; }
}

.ball-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(212, 175, 55, .16), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: calc(var(--pad) * 1.5) var(--pad);
  margin-bottom: calc(var(--pad) * 1.5);
}

.hero__glow {
  position: absolute; inset: -40% -20% auto auto;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .22), transparent 65%);
  filter: blur(10px); pointer-events: none;
}

.hero__content { position: relative; z-index: 1; }
.hero__eyebrow {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
/* The artwork branch of the eyebrow. The small-caps styling above is type, and
   does nothing to an image, so all that is left to undo is the inline-block the
   text needed -- the mark is a block of its own and sits on the text baseline's
   line box with a little air under it. */
.hero__eyebrow--art { line-height: 0; }
/* A step down from a display size, because this line is a sentence and not a
   word: it carries the game's name and, when the game is not on sale yet, the
   words "is open for advance betting" on top of it. At 1.65rem the longer of
   those wrapped to three lines and pushed the closing clock, the total and the
   Play button below the fold on a phone. 1.3rem holds every game name in the
   line-up onto two lines while still reading as the page's headline. */
.hero__title { font-size: 1.3rem; margin: 8px 0 6px; }

/* The clock row. Only the clock lives here now; the terminal's code sits in the
   header ticker, which is the line a counter actually reads without touching the
   page. */
.hero__clock {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  margin: 16px 0;
}
.hero__countdown { display: flex; align-items: baseline; gap: 10px; }
/* Both halves of this row step down together. The label is a plain caption, and at
   .78rem its wide letter-spacing made it the widest thing on the line, so the pair
   read as two competing headlines rather than a caption and its figure. The figure
   was also the largest type left in the hero once the title came down, which left
   the closing time louder than the name of the game it was counting down for. */
.hero__countdown-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hero__countdown-time {
  font-family: ui-monospace, monospace; font-size: 1.4rem; font-weight: 800;
  color: var(--gold-soft); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* Centred because this is the one row in the hero a punter or a counter acts on.
   It was flush left under a left-aligned headline, which put the target in the
   corner furthest from the thumb on a phone. Centring the row centres the pair
   together: on the home page the Play button and the calculator link wrap onto
   two lines at narrow widths, and a lone button on the second line stays centred
   rather than drifting back to the left edge. */
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.hero__visual { display: none; }

.hero-ball {
  position: absolute; display: grid; place-items: center;
  border-radius: 50%; font-weight: 800;
  background: radial-gradient(circle at 32% 28%, var(--surface-3), #0d0d13 74%);
  border: 1px solid var(--line);
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Session cards
   -------------------------------------------------------------------------- */
.session-grid { display: grid; gap: var(--pad); grid-template-columns: 1fr; }

.session-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--pad);
}
.session-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent); opacity: .5;
}
.session-card.is-open { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.session-card.is-open::before { opacity: 1; }

.session-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.session-card__badge {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.session-card__state { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.session-card__state--open   { background: rgba(74, 222, 128, .14); color: var(--win); }
.session-card__state--closed { background: var(--surface-3); color: var(--muted); }

.session-card__name { font-size: 1.2rem; margin: 0 0 2px; }
.session-card__tagline { color: var(--muted); font-size: .86rem; margin: 0 0 12px; }

.session-card__meta { display: flex; gap: 18px; margin: 0 0 14px; flex-wrap: wrap; }
.session-card__meta div { margin: 0; }
.session-card__meta dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.session-card__meta dd { margin: 2px 0 0; font-weight: 700; font-size: .95rem; }

.session-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.session-card__result-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.session-card__result-balls { display: flex; gap: 5px; margin-top: 6px; }
.session-card__pending { color: var(--muted); font-size: .88rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Play sheet (overlay)
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  flex-direction: column;
  background: var(--obsidian);
  overscroll-behavior: contain;
}
.sheet.is-open { display: flex; }

.sheet__head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(var(--safe-top) + 12px) calc(var(--pad) + var(--safe-right)) 12px calc(var(--pad) + var(--safe-left));
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  touch-action: pan-y;
}
.sheet__head-text { min-width: 0; }
.sheet__eyebrow { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sheet__title { font-size: 1.1rem; margin: 2px 0 2px; }
.sheet__meta { margin: 0; font-size: .78rem; color: var(--muted); }

.sheet__head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.sheet__status { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.sheet__status--open   { background: rgba(74, 222, 128, .14); color: var(--win); }
.sheet__status--closed { background: var(--surface-3); color: var(--muted); }

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-3);
  color: var(--ink-dim); font-size: 1.5rem; line-height: 1;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad) calc(var(--pad) + var(--safe-right)) var(--pad) calc(var(--pad) + var(--safe-left));
}

.sheet__foot {
  flex: 0 0 auto;
  padding: 12px calc(var(--pad) + var(--safe-right)) calc(var(--safe-bottom) + 12px) calc(var(--pad) + var(--safe-left));
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.sheet__foot-note { margin: 8px 0 0; font-size: .76rem; color: var(--muted); text-align: center; }
.sheet__foot-note strong { color: var(--gold-soft); }

.sheet__error {
  margin: 12px 0 0; padding: 10px 12px;
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: var(--radius-sm);
  color: #fecaca; font-size: .88rem;
}

/* --------------------------------------------------------------------------
   11. Game chips and stake chips
   -------------------------------------------------------------------------- */
.game-strip {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  margin: 0 calc(var(--pad) * -1) 4px;
  padding-left: var(--pad); padding-right: var(--pad);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.game-strip::-webkit-scrollbar { display: none; }

.game-chip {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 84px; min-height: var(--tap);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: left;
  scroll-snap-align: start;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.game-chip:hover { border-color: var(--gold-deep); }
.game-chip__label { font-size: .86rem; font-weight: 700; }
.game-chip__payout { font-size: .7rem; color: var(--muted); font-family: ui-monospace, monospace; }

.game-chip.is-active,
.game-chip--radio:has(input:checked) {
  background: linear-gradient(140deg, rgba(212,175,55,.2), rgba(212,175,55,.08));
  border-color: var(--gold);
}
.game-chip.is-active .game-chip__payout,
.game-chip--radio:has(input:checked) .game-chip__payout { color: var(--gold-soft); }

.game-chip--radio { cursor: pointer; }
.game-chip--radio:focus-within { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* Phones: four across, two rows, so all eight games are on screen at once.
   Eight in one row would leave about 38px a chip, and "Direct 5" alone needs
   roughly 49px of type -- the alternative was shrinking the bet names to fit,
   and the name a customer picks has to match the name on the receipt and in the
   terms. Two rows costs 100px of height and keeps every label intact. */
@media (max-width: 560px) {
  .game-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .game-chip {
    min-width: 0;
    min-height: 52px;
    padding: 6px 4px;
    align-items: center;
    text-align: center;
  }
  .game-chip__label { font-size: .74rem; letter-spacing: -.01em; }
  .game-chip__payout { font-size: .62rem; }
}

.pick-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0;
  padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  min-height: 52px;
}
.pick-summary__balls { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.pick-summary__empty { color: var(--muted); font-size: .85rem; }
.pick-summary__tools { display: flex; gap: 4px; flex: 0 0 auto; }

/* Retailer slip: the selections collected for one ticket. */
.slip {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.slip__item {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.slip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.slip__game { font-size: .9rem; }
.slip__remove { flex: 0 0 auto; }
.slip__balls { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
/* A button carries display:inline-flex, which beats the hidden attribute's own
   display:none -- so every button app.js hides by attribute needed this rule to
   actually disappear. Clear slip relies on it: nothing to clear until a
   selection is on the slip. */
.btn[hidden] { display: none; }

.stake-picker { border: 0; padding: 0; margin: 20px 0 0; }
.stake-picker legend, .calc-block legend {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; padding: 0;
}
.stake-picker legend small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.stake-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.stake-chip {
  min-height: 40px; padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .88rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.stake-chip:hover:not([disabled]) { border-color: var(--gold-deep); }
.stake-chip.is-active,
.stake-chip--radio:has(input:checked) {
  background: rgba(212, 175, 55, .16);
  border-color: var(--gold);
  color: var(--gold-soft);
}
.stake-chip--radio { cursor: pointer; display: inline-flex; align-items: center; }
.stake-chip--radio:focus-within { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

.stake-custom { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.stake-custom label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.stake-custom__input {
  display: flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding-left: 12px;
}
.stake-custom__input > span { color: var(--muted); font-weight: 700; font-size: .9rem; }
.stake-custom__input input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  padding: 12px; font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stake-custom small { color: var(--muted); font-size: .74rem; }

/* The stake dialog reuses the sheet's chips and amount box so it looks like the
   control it replaced. Only the spacing differs: inside a panel the picker is
   not following a paragraph and does not need the sheet's top margin. */
.stake-modal__note { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.modal__state .stake-picker { margin-top: 12px; }

/* Typed number entry, the counter's only picker: one box per number with a
   hyphen between, the way the customer reads the slip out. Every retailer game
   uses it, and the row shows only as many boxes as the chosen game takes. */
.number-entry { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.number-entry[hidden] { display: none; }
.number-entry__label { font-size: .78rem; color: var(--muted); font-weight: 600; }
/* A Perm is ten numbers and they have to stay on one row: a row that wraps
   leaves a hyphen dangling at the end of the first line and pushes the amount
   dialog further down a phone screen. The box is therefore derived from the
   width the row actually has -- the viewport less the sheet's padding and the
   hyphens between ten balls -- and clamped, so a phone gets a ball sized to fit
   and a tablet keeps the 42px ball the board uses. The boxes are type-in
   targets with the pad carrying on by itself, which is why they can be this
   much smaller than a thumb-sized control. flex-wrap stays as the last resort
   so a narrow screen wraps rather than overflowing. */
.number-entry__boxes {
  --ball: clamp(22px, calc((100vw - 110px) / 10), 42px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
/* Each box travels with the hyphen in front of it, so a Direct that takes fewer
   numbers hides the pair together rather than leaving a stray dash behind. */
.number-entry__slot { display: flex; align-items: center; gap: 3px; }
.number-entry__slot[hidden] { display: none; }
/* Each box is a ball. The counter is selling a lottery, so the numbers
   being typed should read like the balls the customer is reading out,
   with the same sheen the board's balls carry. A filled box takes the
   gold of a ball that has already been drawn. */
.number-entry__boxes input {
  width: var(--ball); height: var(--ball); padding: 0;
  background: radial-gradient(circle at 32% 28%, var(--surface-3), #101017 72%);
  border: 1px solid var(--line);
  border-radius: 50%;
  text-align: center;
  font-size: clamp(.66rem, calc(var(--ball) * .4), 1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  transition: transform .12s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.number-entry__boxes input::placeholder { color: var(--ink-dim); opacity: .5; }
.number-entry__boxes input:focus {
  outline: 2px solid var(--gold-soft); outline-offset: 2px;
  color: var(--ink);
}
.number-entry__boxes input.is-filled {
  background: radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold-deep) 74%);
  border-color: var(--gold-soft);
  color: #1a1508;
  box-shadow: 0 3px 14px rgba(212, 175, 55, .35);
}
/* A number that cannot exist -- 0, or past the end of the pool. Marked on the
   ball itself as well as on the sheet's error line, because the ball is where
   the retailer is looking while the pad is up, and the line can sit below the
   fold on a phone. */
.number-entry__boxes input.is-invalid {
  background: radial-gradient(circle at 32% 28%, #4a1f24, #240f12 74%);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .3);
}
.number-entry__dash {
  color: var(--muted); font-weight: 700;
  font-size: clamp(.55rem, calc(var(--ball) * .3), .9rem);
}
.number-entry__actions { margin-top: 2px; }
/* Shown only while a selection is stranded in the summary, so the counter's
   normal path is the one button and nothing else. */
.number-entry__reload { width: 100%; margin-top: 4px; }
.number-entry__reload[hidden] { display: none; }

/* Validation sits under the amount field, so it needs to win over the muted
   default colour above it. */
.stake-custom .stake-custom__error { color: var(--danger, #e05a5a); font-weight: 600; }
.stake-custom__input:has(input[aria-invalid="true"]) {
  border-color: var(--danger, #e05a5a);
}

/* The commit control for a typed amount, at the bottom of the card and full
   width so it is the obvious target rather than one more control in a row. */
.topup-submit {
  margin-top: 14px;
  min-height: 46px;
  font-size: .95rem; font-weight: 700;
}
.topup-submit [data-money-amount-label] { font-variant-numeric: tabular-nums; }
.topup-submit[disabled] { opacity: .55; cursor: not-allowed; }

/* Where the credit is coming from: provider picker plus the number column. */
.money-source {
  margin: 0 0 14px; padding: 12px 12px 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.money-source__legend {
  padding: 0 6px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.money-source__row {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.money-source__row .field { margin-bottom: 8px; }
.money-source__row .field label { font-size: .74rem; }
.money-source__note { margin: 0 0 8px; font-size: .74rem; color: var(--muted); }

/* Provider picker: brand tiles in place of a <select>.
   The radio is the control and the label is its face, so the whole tile is the
   hit target. The input itself is not display:none -- that would drop it out of
   the tab order -- it is overlaid and made transparent, keeping keyboard and
   screen-reader behaviour intact while the tile provides the visual. */
.netpick { width: 100%; }
.netpick__set { margin: 0; padding: 0; border: 0; }
.netpick__legend {
  padding: 0; margin-bottom: 6px;
  font-size: .74rem; font-weight: 600; color: var(--muted);
}
/* Three across is the right density once there is room. Below this width three
   tiles force each logo down to roughly a thumbnail, and the point of the picker
   is recognising the brand at a glance, so they stack instead. */
.netpick__tiles {
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 420px) {
  .netpick__tiles { grid-template-columns: 1fr; }
  .netpick__face { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 14px; }
  .netpick__label { font-size: .8rem; }
}
.netpick__tile { position: relative; }

.netpick__input {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.netpick__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 100%; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
/* The logos are transparent-background artwork, already trimmed square by
   tools/build-network-logos.ps1. object-fit:contain is kept as a guard rather
   than a necessity: a provider added without being re-run through the builder
   would be letterboxed instead of squashed. */
.netpick__logo {
  display: block;
  width: 100%; height: 52px;
  object-fit: contain; object-position: center;
}
.netpick__label { font-size: .68rem; font-weight: 600; color: var(--ink-dim); line-height: 1.25; }

/* Focus lands on the hidden radio, so the ring is drawn on its face instead. */
.netpick__input:focus-visible + .netpick__face {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.netpick__input:hover + .netpick__face { border-color: var(--gold-soft); }
.netpick__input:checked + .netpick__face {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.06));
}
.netpick__input:checked + .netpick__face .netpick__label { color: var(--gold); }
.netpick__input:checked + .netpick__face::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 4px var(--surface);
}

.money-source__number small {
  display: block; margin-top: 5px; font-size: .74rem; color: var(--danger, #e05a5a);
}
.money-source__number.is-invalid input { border-color: var(--danger, #e05a5a); }

@media (max-width: 520px) {
  .money-source__row { grid-template-columns: 1fr; }
}

.bet-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 0 0 10px;
}
.bet-summary div { margin: 0; }
.bet-summary dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.bet-summary dd {
  margin: 2px 0 0; font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. Modals
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: calc(var(--pad) + var(--safe-top)) var(--pad) calc(var(--pad) + var(--safe-bottom));
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 8, .78);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade .2s var(--ease);
}

.modal__panel {
  position: relative;
  width: 100%; max-width: 24rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: calc(var(--pad) * 1.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  animation: rise .26s var(--ease);
  max-height: 100%; overflow-y: auto;
}
.modal__panel--ticket { max-width: 26rem; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.modal__state { text-align: center; }
.modal__state[hidden] { display: none; }
.modal__state--busy { display: grid; gap: 8px; justify-items: center; padding: 20px 0; }

.modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.modal__actions .btn { flex: 1 1 0; }

.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile Money authorisation */
.momo-head { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: left; margin-bottom: 14px; }
.momo-head__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(212, 175, 55, .14); color: var(--gold-soft);
}
.momo-head__icon svg { width: 22px; height: 22px; }
.momo-head strong { display: block; font-size: 1rem; }
.momo-head span { font-size: .78rem; color: var(--muted); }

.momo-amount {
  margin: 0 0 8px;
  font-size: 1.9rem; font-weight: 800;
  color: var(--gold-soft); font-variant-numeric: tabular-nums;
}

.momo-hint { font-size: .86rem; color: var(--ink-dim); margin-bottom: 16px; }
.momo-hint strong { color: var(--ink); }



.pin { position: relative; margin-bottom: 12px; }
.pin__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; z-index: 2;
  border: 0; background: none;
  font-size: 16px; /* prevents iOS zoom on focus */
  text-align: center; letter-spacing: 1.2em;
  cursor: pointer;
}
.pin__boxes {
  display: flex; gap: 10px; justify-content: center;
  pointer-events: none;
}
.pin__boxes span {
  width: 46px; height: 56px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.4rem; color: var(--muted);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.pin__boxes span.is-filled { border-color: var(--gold); color: var(--ink); background: rgba(212,175,55,.08); }
.pin.is-active .pin__boxes span.is-cursor { border-color: var(--gold-soft); }

.momo-error {
  margin: 0 0 8px; padding: 9px 12px;
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: var(--radius-sm);
  color: #fecaca; font-size: .84rem;
}
.momo-error[hidden] { display: none; }

.momo-footnote { margin: 14px 0 0; font-size: .7rem; color: var(--muted); }
.momo-footnote strong { color: var(--ink-dim); font-family: ui-monospace, monospace; }

.momo-result__mark {
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.7rem;
}
.momo-result__mark.is-ok   { background: rgba(74, 222, 128, .16); color: var(--win); }
.momo-result__mark.is-bad  { background: rgba(248, 113, 113, .16); color: var(--danger); }

/* Ticket confirmation */
.ticket-celebrate {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(74, 222, 128, .18), transparent 65%);
}
.ticket-celebrate__badge {
  position: relative;
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(74, 222, 128, .16); color: var(--win);
}
.ticket-celebrate__badge svg { width: 26px; height: 26px; }

.ticket-card {
  margin-top: 14px; text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ticket-card__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .85rem;
}
.ticket-card__row:last-child { border-bottom: 0; }
.ticket-card__row span { color: var(--muted); flex: 0 0 auto; }
.ticket-card__row strong { text-align: right; font-variant-numeric: tabular-nums; }
.ticket-card__balls { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.ticket-card__row--total strong { color: var(--ink); }
.ticket-card__row--win { background: rgba(74, 222, 128, .06); }
.ticket-card__row--win strong { color: var(--win); }

/* --------------------------------------------------------------------------
   13. Result and ticket cards
   -------------------------------------------------------------------------- */
.result-strip, .result-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}

.result-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.result-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.result-card__session { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.result-card__name { font-size: 1rem; margin: 2px 0 0; }
.result-card__date { margin: 0; font-size: .76rem; color: var(--muted); }
.result-card__ref { font-size: .66rem; color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; }

.result-card__balls { display: flex; gap: 6px; margin: 10px 0 8px; }
.result-card__balls .ball { width: 38px; font-size: .82rem; }

.result-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .74rem; color: var(--muted); flex-wrap: wrap;
}
.result-card__first strong { color: var(--win); }
.result-card__drawtime { white-space: nowrap; }

.latest-result {
  display: grid; gap: 16px;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(74, 222, 128, .1), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad);
}
.latest-result__badge {
  display: inline-block; font-size: .64rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--win);
  margin-bottom: 4px;
}
.latest-result__head h2 { margin: 0; font-size: 1.2rem; }
.latest-result__head p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
/* Five balls on one line have to fit the card at every width. Five fixed 62px
   balls and their gaps asked for 342px, which a phone does not have once the
   card's own padding is off it, so the row hung out of the card and the card
   itself stretched. The balls now take their size from the viewport and stop at
   a size the card can hold, so they shrink with it instead of overflowing it,
   and the row wraps rather than spilling if even the smallest ball will not
   fit: a wrapped ball still reads as a ball, a spilled one reads as a fault. */
.latest-result__balls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 2.2vw, 11px);
  justify-content: space-between;
  max-width: 340px;
}
.latest-result__balls .ball {
  width: clamp(38px, 11.5vw, 59px);
  font-size: clamp(.8rem, 4vw, 1.15rem);
}

.ticket-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }

.ticket {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.ticket--won  { border-color: rgba(74, 222, 128, .35); border-left-color: var(--win); background: linear-gradient(180deg, rgba(74,222,128,.05), transparent 40%); }
.ticket--lost { opacity: .72; }
.ticket--void { opacity: .55; }

.ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ticket__game { display: block; font-size: .95rem; margin-top: 3px; }
.ticket__code { font-size: .66rem; font-family: ui-monospace, monospace; color: var(--muted); white-space: nowrap; }

.ticket__balls { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.ticket__balls--large { gap: 8px; }

.ticket__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.ticket__stats div { margin: 0; min-width: 0; }
.ticket__stats dt { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ticket__stats dd { margin: 2px 0 0; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }

.ticket__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: .76rem; color: var(--muted); flex-wrap: wrap;
}
.ticket__status--won  { color: var(--win); font-weight: 600; }
.ticket__status--lost { color: var(--muted); }
.ticket__status--void { color: var(--muted); font-style: italic; }
.ticket__link { white-space: nowrap; font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Wallet dashboard
   -------------------------------------------------------------------------- */
.wallet-head {
  background:
    radial-gradient(110% 100% at 85% 0%, rgba(212, 175, 55, .16), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad);
  margin-bottom: var(--pad);
}
.wallet-head__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.wallet-head__amount {
  display: block; font-size: 2.1rem; font-weight: 800;
  color: var(--gold-soft); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; line-height: 1.15;
}
.wallet-head__network { font-size: .78rem; color: var(--muted); }

.wallet-head__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.wallet-head__stats div { margin: 0; }
.wallet-head__stats dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.wallet-head__stats dd { margin: 2px 0 0; font-weight: 700; font-size: .98rem; }

.next-draw-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.next-draw-strip > div { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.next-draw-strip__label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.next-draw-strip strong { font-size: 1rem; }
.next-draw-strip span { font-size: .78rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin-bottom: var(--pad);
}

.data-table, .payout-table, .mini-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
  min-width: 34rem;
}
.payout-table { min-width: 30rem; }
.mini-table { min-width: 0; }

/* The POS serial is typed straight into the staff table rather than opened in a
   dialog: recording a deployment happens in one motion at the counter, and the
   value has to sit in the row where it is being read. Input and button share a
   line so the row does not grow to three. */
.serial-form { display: flex; align-items: center; gap: 6px; }
.serial-form input {
  min-width: 7.5rem; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
  font-size: .78rem;
}
.serial-form input:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 1px;
}
.serial-form input::placeholder { color: var(--muted); opacity: .7; }

.data-table th, .data-table td,
.payout-table th, .payout-table td,
.mini-table th, .mini-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.data-table thead th, .payout-table thead th {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; white-space: nowrap;
  background: var(--surface-2);
  position: sticky; top: 0;
}
.data-table tbody tr:last-child td,
.payout-table tbody tr:last-child td,
.mini-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.row-won { background: rgba(74, 222, 128, .06); }

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: var(--pad) 0; font-size: .85rem; color: var(--muted);
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { max-width: 34rem; }
.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 5px;
  font-size: .8rem; font-weight: 600; color: var(--ink-dim);
}
.field small { display: block; margin-top: 5px; font-size: .74rem; color: var(--muted); }
.field__static { margin: 0; font-size: .92rem; padding: 10px 0; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea,
.form > input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem; /* never below 16px: stops iOS zooming on focus */
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 34px; background-image: none; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  background: var(--surface-3);
}
.field input::placeholder, .field textarea::placeholder { color: #5f5d70; }

.field-row { display: grid; gap: 14px; grid-template-columns: 1fr; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px; cursor: pointer; font-size: .88rem; color: var(--ink-dim);
}
.check input[type="checkbox"], .check input[type="radio"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--gold);
}
.check--inline { margin-bottom: 0; align-items: center; font-size: .84rem; }

.form__foot { margin: 14px 0 0; font-size: .86rem; color: var(--muted); text-align: center; }

/* --------------------------------------------------------------------------
   17. Auth
   -------------------------------------------------------------------------- */
.auth { display: grid; gap: var(--pad); }
.auth__head h1 { margin-bottom: 4px; }
.auth__head p { color: var(--muted); font-size: .92rem; }
.auth__aside {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: var(--pad);
}
.auth__aside h3 { font-size: .95rem; margin-bottom: 8px; }
.auth__aside p { font-size: .86rem; color: var(--muted); }
.auth__note { font-size: .76rem; margin-bottom: 0; }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: .88rem; color: var(--ink-dim); }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   18. Tabs, accordion, steps
   -------------------------------------------------------------------------- */
.tabs__list {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--pad);
  overflow-x: auto; scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  padding: 11px 14px; min-height: var(--tap);
  font-size: .88rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs__tab.is-active { color: var(--gold-soft); border-bottom-color: var(--gold); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fade .2s var(--ease); }

.accordion { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.accordion__item { border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.accordion__item:last-child { border-bottom: 0; }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--pad); min-height: var(--tap);
  font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__icon {
  flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.accordion__item[open] .accordion__icon { transform: rotate(-135deg); }
.accordion__body { padding: 0 var(--pad) 14px; color: var(--ink-dim); font-size: .9rem; }
.accordion__body p:last-child { margin-bottom: 0; }

.steps { list-style: none; padding: 0; margin: 0 0 var(--pad); display: grid; gap: 12px; }
.step { display: flex; align-items: flex-start; gap: 12px; }
.step__num {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(212, 175, 55, .14); color: var(--gold-soft);
  font-size: .8rem; font-weight: 800;
}
.step strong { display: block; font-size: .94rem; }
.step p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.step > div { min-width: 0; }

.callout {
  background: rgba(212, 175, 55, .07);
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: var(--radius-sm);
  padding: 14px var(--pad);
}
.callout strong { display: block; margin-bottom: 4px; color: var(--gold-soft); }
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: .88rem; color: var(--ink-dim); }

.trust-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.trust-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px; }
.trust-card strong { display: block; font-size: .92rem; margin-bottom: 4px; }
.trust-card p { margin: 0; font-size: .82rem; color: var(--muted); }

.example-list { padding-left: 18px; }
.example-list li { margin-bottom: 8px; font-size: .9rem; color: var(--ink-dim); }

.stats-line { text-align: center; color: var(--muted); font-size: .78rem; margin: 0 0 var(--pad); }

/* --------------------------------------------------------------------------
   19. Calculator
   -------------------------------------------------------------------------- */
.calc-block { border: 0; padding: 0; margin: 0 0 18px; }
.calc-block[hidden] { display: none; }

.calc-out { display: grid; gap: 10px; margin: 0 0 12px; }
.calc-out div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.calc-out div:last-child { border-bottom: 0; }
.calc-out dt { font-size: .82rem; color: var(--muted); }
.calc-out dd { margin: 0; font-weight: 700; font-size: .95rem; text-align: right; font-variant-numeric: tabular-nums; }

.calc-out__hero {
  flex-direction: column; align-items: stretch !important;
  background: rgba(74, 222, 128, .08);
  border: 1px solid rgba(74, 222, 128, .25) !important;
  border-radius: var(--radius-sm); padding: 14px !important; margin-bottom: 0;
}
.calc-out__hero dt { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--win); }
.calc-out__hero dd { text-align: center; font-size: 1.9rem; color: var(--win); font-weight: 800; letter-spacing: -.02em; }

.calc-out__note { font-size: .8rem; color: var(--muted); text-align: center; }
.calc-warning { margin-top: 14px; }

/* --------------------------------------------------------------------------
   20. Ticket detail
   -------------------------------------------------------------------------- */
.ticket-detail {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--pad);
}
.ticket-detail__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.ticket-detail__head h1 { font-size: 1.25rem; margin: 4px 0 2px; }
.ticket-detail__code { text-align: right; }
.ticket-detail__code span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ticket-detail__code strong { font-family: ui-monospace, monospace; font-size: .86rem; }

.ticket-detail__numbers, .ticket-detail__result, .ticket-detail__pending {
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.ticket-detail__numbers h2, .ticket-detail__result h2, .ticket-detail__pending h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.ticket-detail__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ticket-detail__meta div { margin: 0; min-width: 0; }
.ticket-detail__meta dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ticket-detail__meta dd { margin: 2px 0 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }

.ticket-detail__actions { display: flex; gap: 10px; margin-top: 18px; }
.ticket-detail__actions .btn { flex: 1 1 0; }

/* --------------------------------------------------------------------------
   21. Legal pages
   -------------------------------------------------------------------------- */
.toc {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 14px var(--pad);
}
.toc strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 20px; font-size: .84rem; }
.toc li { margin-bottom: 4px; break-inside: avoid; }

.legal__body { max-width: 44rem; }
.legal__body h2 {
  font-size: 1.1rem; margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--line-soft); scroll-margin-top: 90px;
}
.legal__body h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal__body h3 { font-size: .98rem; margin-top: 20px; scroll-margin-top: 90px; }
.legal__body p, .legal__body li { color: var(--ink-dim); font-size: .92rem; }
.legal__body a { scroll-margin-top: 90px; }

.definition-list { margin: 0 0 16px; }
.definition-list dt { font-weight: 700; color: var(--ink); margin-top: 10px; font-size: .92rem; }
.definition-list dd { margin: 2px 0 0; padding-left: 14px; border-left: 2px solid var(--line); color: var(--ink-dim); font-size: .9rem; }

/* --------------------------------------------------------------------------
   22. Contact and support
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.contact-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 14px;
  color: inherit;
}
.contact-card:hover { text-decoration: none; border-color: var(--gold-deep); }
.contact-card__icon {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px; background: rgba(212, 175, 55, .12); color: var(--gold-soft);
}
.contact-card__icon svg { width: 21px; height: 21px; }
.contact-card strong { display: block; font-size: .84rem; color: var(--muted); font-weight: 600; }
.contact-card__value { font-size: 1rem; font-weight: 700; }

.support-list { display: grid; gap: 14px; }
.support-item {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px var(--pad);
}
.support-item--open { border-left-color: var(--warn); }
.support-item--answered { border-left-color: var(--win); }
.support-item--closed { border-left-color: var(--line); opacity: .8; }
.support-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.support-item__head strong { display: block; font-size: .92rem; }
.support-item__head span { font-size: .76rem; }
.support-item h3 { font-size: .95rem; margin-bottom: 6px; }
.support-item p { font-size: .88rem; }
.support-item__meta { font-size: .74rem; }
.support-item__note { background: rgba(74, 222, 128, .06); border-left: 2px solid var(--win); padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 10px 0; }
.support-item__note strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--win); }
.support-item__note p { margin: 4px 0 0; font-size: .88rem; }
.support-item__reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.support-item__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   23. Admin
   -------------------------------------------------------------------------- */
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--pad); }
.admin-stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px; }
.admin-stat span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.admin-stat strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.admin-draw-list { display: grid; gap: 14px; }
.admin-draw {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--pad);
}
.admin-draw__head { margin-bottom: 14px; }
.admin-draw__head h3 { margin: 4px 0 2px; font-size: 1.05rem; }
.admin-draw__head p { margin: 0; font-size: .78rem; }
.admin-draw__numbers { border: 0; padding: 0; margin: 0 0 14px; }
.admin-draw__numbers legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.admin-draw__hint { font-size: .76rem; margin-bottom: 10px; }
.admin-numbers { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-numbers__slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.admin-numbers__slot span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.admin-numbers__slot input {
  width: 60px; min-height: var(--tap); text-align: center;
  padding: 8px; font-size: 1.05rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.admin-numbers__slot input:focus { outline: none; border-color: var(--gold); }
.admin-draw__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-draw__actions .btn { flex: 1 1 12rem; }

.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; overflow-x: auto; max-width: 100%;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__item {
  padding: 8px 14px; min-height: 36px;
  display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--muted);
}
.segmented__item:hover { text-decoration: none; color: var(--ink); }
.segmented__item.is-active { background: var(--surface-3); color: var(--gold-soft); }

/* Terminal tabs: today's games against advance stake. Wider and set apart from
   the day chips below it, because this is the choice of *which kind of sale* and
   the day strip is only a detail of the second one. */
.segmented--tabs { margin: 14px 0 0; gap: 4px; }
.segmented--tabs .segmented__item { padding: 10px 20px; font-size: .92rem; }
.segmented--tabs .segmented__item.is-active { box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.segmented--tabs .segmented__count {
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .7; margin-left: 6px; }

/* Advance betting day strip. Two lines per entry -- the date over the number of
   games that day -- because a single line of "Sat 3 Oct 2 games" does not scan
   on a terminal. Future days are tinted so an advance sale is obvious before the
   sheet is opened. */
.segmented--days { margin-bottom: 12px; }
.segmented--days .segmented__item {
flex-direction: column; align-items: flex-start; gap: 1px;
padding: 6px 14px; border-radius: 12px; }
.segmented__day { font-size: .86rem; font-weight: 700; }
.segmented__count {
font-size: .62rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; opacity: .7; }
.segmented--days .segmented__item.is-advance:not(.is-active) .segmented__day { color: var(--gold-soft); }
.section__lead { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }

/* --------------------------------------------------------------------------
   24. Empty states
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: calc(var(--pad) * 1.6) var(--pad);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty-state--page { margin-bottom: var(--pad); }
.empty-state h2, .empty-state h3 { margin-bottom: 6px; }
.empty-state p { color: var(--muted); font-size: .9rem; max-width: 46ch; margin: 0 auto 14px; }
.empty-state .btn { margin-top: 4px; }

/* --------------------------------------------------------------------------
   25. Tabbar
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(11, 11, 16, .96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left); padding-right: var(--safe-right);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: var(--tabbar-h);
  color: var(--muted); font-size: .66rem; font-weight: 600;
}
.tabbar__item:hover { text-decoration: none; color: var(--ink-dim); }
.tabbar__item svg { width: 21px; height: 21px; }
.tabbar__item.is-active { color: var(--gold-soft); }
.tabbar__item.is-active svg { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   26. Toasts
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed; z-index: 500;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  width: calc(100% - 24px); max-width: 400px;
  display: grid; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .88rem; box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  animation: rise .24s var(--ease);
  pointer-events: auto;
}
.toast--ok    { border-color: rgba(74, 222, 128, .45); color: #bbf7d0; }
.toast--error { border-color: rgba(248, 113, 113, .45); color: #fecaca; }
.toast--info  { border-color: var(--line); }

/* --------------------------------------------------------------------------
   27b. Install to home screen
   -------------------------------------------------------------------------- */
.install-banner {
  position: fixed; z-index: 480;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  max-width: 420px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  animation: rise .26s var(--ease);
}
.install-banner[hidden] { display: none; }
.install-banner__icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 11px; border: 1px solid var(--line);
}
.install-banner__body {
  flex: 1 1 auto; min-width: 0;
  display: grid; gap: 2px;
  font-size: .84rem; line-height: 1.4;
}
.install-banner__body strong { font-size: .9rem; }
.install-banner__body span { color: var(--muted); }
.install-banner__actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 380px) {
  .install-banner { flex-wrap: wrap; }
  .install-banner__actions { width: 100%; }
  .install-banner__actions .btn { flex: 1 1 0; }
}

/* --------------------------------------------------------------------------
   27. Wider viewports
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --pad: 20px; }

  .ball-board { grid-template-columns: repeat(9, 1fr); gap: 7px; }
  /* Balls are wide again at this size, so the digits go back to full size rather
     than staying shrunken for the phone. */
  .ball-board .ball__num { font-size: .92em; }

  .hero { padding: calc(var(--pad) * 2); }
  /* Wider viewports step the headline up, but from the smaller phone size rather
     than around it: this used to be 2.1rem, larger than the 1.65rem phone
     headline it was meant to be scaling up from, so the hero shouted loudest on
     exactly the screens with room for it. The step-up ratio is unchanged. */
  .hero__title { font-size: 1.65rem; }

  .session-grid { grid-template-columns: 1fr 1fr; }
  .result-strip, .result-grid { grid-template-columns: 1fr 1fr; }
  .ticket-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .panel-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .latest-result { grid-template-columns: 1fr auto; align-items: center; }
  .wallet-head__stats { grid-template-columns: repeat(4, 1fr); }
  .ticket__stats { grid-template-columns: repeat(3, 1fr); }
  .admin-stats { grid-template-columns: repeat(5, 1fr); }
  .auth { grid-template-columns: 1fr 1fr; align-items: start; }
  .auth--narrow { grid-template-columns: 1fr; max-width: 30rem; }
  .calc-out { grid-template-columns: 1fr 1fr; display: grid; }
  .calc-out__hero { grid-column: 1 / -1; }
  .ticket-detail__meta { grid-template-columns: repeat(4, 1fr); }
  .hide-xs { display: none; }
}

@media (min-width: 900px) {
  .ball-board { grid-template-columns: repeat(10, 1fr); }

  .hero { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: var(--pad); }
  .hero__visual { display: block; position: relative; height: 230px; }
  .hero-ball { width: 74px; height: 74px; font-size: 1.3rem; box-shadow: 0 8px 26px rgba(0,0,0,.5); }
  .hero-ball--1 { top: 6%;   left: 12%; animation: float 5s ease-in-out infinite; }
  .hero-ball--2 { top: 34%;  left: 44%; animation: float 6s ease-in-out infinite .5s; }
  .hero-ball--3 { top: 62%;  left: 18%; animation: float 5.5s ease-in-out infinite 1s; }
  .hero-ball--4 { top: 16%;  left: 68%; animation: float 6.5s ease-in-out infinite .8s; }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }

  .result-grid { grid-template-columns: repeat(3, 1fr); }
  .ticket-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .sheet { inset: auto; }
  .sheet.is-open {
    inset: 0 auto 0 50%;
    transform: translateX(-50%);
    width: min(100%, 560px);
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    box-shadow: 0 0 80px rgba(0, 0, 0, .7);
  }
  .tabbar {
    left: 50%; transform: translateX(-50%);
    max-width: 560px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid var(--line-soft); border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   28. Profile
   -------------------------------------------------------------------------- */
/* The account page is the one place a person stops to check who they are signed
   in as before handing the phone over, so it opens with their identity rather
   than a heading about the page. */
.profile-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-id__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-deep), var(--gold));
  color: #17140a;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.profile-id__body { min-width: 0; }
.profile-id__name {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.25;
  /* A long staff name must not push the badges onto their own line and shove the
     rest of the page down; it truncates instead. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-id__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--muted);
}

/* Read-only values are read far more often than they are edited, so they are laid
   out as one row per fact: the label is a small quiet caption and the value sits
   under it, separated by a hairline. On a phone this scans as a list, where the
   previous stacked-label/paragraph pairs read as loose blocks. */
.profile-rows { margin: 0; }
.profile-rows > .field {
  display: grid;
  gap: 2px;
  margin-bottom: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.profile-rows > .field:first-child { border-top: 0; padding-top: 2px; }
.profile-rows > .field:last-child { padding-bottom: 2px; }
.profile-rows .field__static {
  padding: 0;
  font-size: 1rem;
  color: var(--ink);
  /* A POS serial or an agent code is one unbroken token; let it wrap rather than
     run off the edge on a narrow screen. */
  overflow-wrap: anywhere;
}
.profile-rows .field__static .badge { margin: 0 2px; }
.profile-rows .field__static:empty::after { content: '\2014'; color: var(--muted); }

/* A value the operator has not supplied yet reads as an absence rather than as a
   fact, and should not look like real data. Scoped like the rule above so it wins
   on equal specificity instead of being outranked by it. */
.profile-rows .field__static--unset { color: var(--muted); font-style: italic; }

/* The sign-out card is the one destructive action on the page, so it is marked as
   such rather than sitting in the same neutral stack as the read-only cards. */
.card--danger {
  border-color: rgba(248, 113, 113, .32);
  background: linear-gradient(180deg, rgba(248, 113, 113, .06), transparent 70%);
}
.card--danger .card__title { color: var(--danger); }

.card__note {
  margin: -4px 0 14px;
  font-size: .82rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   29. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .app-header, .tabbar, .toast-stack, .sheet, .modal, .flash-stack { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .ticket, .result-card { border-color: #ccc; background: #fff; }
}