/* =====================================================================
   ZUNO - design system
   ---------------------------------------------------------------------
   One stylesheet for the public site and the member dashboard. Tokens
   first, then primitives, then the two shells. Anything that appears on
   more than one page belongs here rather than in a <style> block.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
  /* ZUNO is dark and gold: a near-black ground, warm charcoal surfaces,
       cream text and a gold accent - the colours of Zuno's own logo.
       Gold is a light colour, so anything sitting ON gold (buttons, the
       avatar, the tap target) uses --on-brand, a near-black, not white.
       Large banners use --grad, a dark gradient lit with gold, and keep
       cream text. Errors are a coral red that reads on dark without
       looking like part of the brand. */
  --gold: #d4af37;
  --gold-2: #f0d27a;
  --gold-3: #9c7a1e;

  --brand-50: rgba(212, 175, 55, 0.1); /* tinted surface */
  --brand-100: rgba(212, 175, 55, 0.24); /* tinted border */
  --brand-300: #f0d27a; /* gold text on dark */
  --brand-500: #e6c35a;
  --brand-600: #d4af37; /* primary */
  --brand-700: #b8932a;
  --brand-800: #9c7a1e;
  --on-brand: #16120a; /* text on gold */

  --teal-400: #4be3c0;
  --teal-500: #22d3a6;
  --teal-600: #2ccb9f; /* money in: a figure, on dark */

  --ink: #f3efe4; /* text */
  --ink-soft: #d6d0c2;
  --muted: #9b978b;
  --muted-soft: #7a766c;
  --line: #272520;
  --line-soft: #1c1b18;
  --bg: #0a0a0c;
  --card: #141418;
  --card-2: #1b1b21; /* raised or inset inside a card */
  --field: #0f0f12; /* form controls */
  --deep: #070708;

  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: #f2b84b;
  --warning-bg: rgba(242, 184, 75, 0.1);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --info: #7db3ff;
  --info-bg: rgba(125, 179, 255, 0.1);
  --plum: #d7a4ec;
  --plum-bg: rgba(215, 164, 236, 0.12);
  --olive: #a6d66f;
  --olive-bg: rgba(166, 214, 111, 0.11);

  /* Banners: dark, lit from one corner with gold. Cream text on top. */
  --grad:
    radial-gradient(
      120% 140% at 100% 0%,
      rgba(212, 175, 55, 0.34) 0%,
      rgba(212, 175, 55, 0) 55%
    ),
    linear-gradient(140deg, #1f1b10 0%, #121215 60%, #17140c 100%);
  /* Gold itself: buttons, the tap target, small solid accents. */
  --grad-soft: linear-gradient(135deg, #f6dc8e 0%, #d4af37 50%, #a98521 100%);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --sh-glow:
    0 0 0 1px rgba(212, 175, 55, 0.25), 0 12px 32px rgba(212, 175, 55, 0.18);

  --font:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-display: "Manrope", "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --sidebar-w: 250px;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(
      900px 500px at 85% -5%,
      rgba(212, 175, 55, 0.09),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at -5% 30%,
      rgba(212, 175, 55, 0.05),
      transparent 60%
    ),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
}
h3 {
  font-size: 1.18rem;
}
h4 {
  font-size: 1rem;
}
p {
  margin: 0 0 1rem;
}

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

img,
svg {
  max-width: 100%;
}
svg.ico {
  width: 20px;
  height: 20px;
  flex: none;
}
svg.ico-sm {
  width: 16px;
  height: 16px;
}
svg.ico-lg {
  width: 26px;
  height: 26px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}

::selection {
  background: var(--gold);
  color: var(--on-brand);
}

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

.container {
  width: min(1160px, 100% - 40px);
  margin-inline: auto;
}
.container-narrow {
  width: min(760px, 100% - 40px);
  margin-inline: auto;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 0.85rem;
}
.tiny {
  font-size: 0.76rem;
}
.strong {
  font-weight: 700;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.nowrap {
  white-space: nowrap;
}
.mono {
  font-variant-numeric: tabular-nums;
}
.hide {
  display: none !important;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mt-4 {
  margin-top: 2.25rem;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.gradient-text {
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  font: inherit;
  font-weight: 650;
  font-size: 0.93rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.btn:active {
  transform: translateY(0);
}
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--grad-soft);
  color: var(--on-brand);
  box-shadow: var(--sh-glow);
}
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.4),
    0 16px 40px rgba(212, 175, 55, 0.28);
}
.btn-dark {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
}
.btn-dark:hover {
  border-color: var(--brand-100);
}
.btn-teal {
  background: var(--teal-500);
  color: #04140f;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--card-2);
  border-color: var(--brand-100);
}
.btn-white {
  background: var(--grad-soft);
  color: var(--on-brand);
  box-shadow: var(--sh-glow);
}
.btn-outline-white {
  background: transparent;
  color: var(--brand-300);
  border-color: rgba(212, 175, 55, 0.5);
}
.btn-outline-white:hover {
  background: rgba(212, 175, 55, 0.1);
  box-shadow: none;
}
.btn-danger {
  background: #b93a30;
  color: #fff;
}
.btn-sm {
  padding: 0.48rem 0.95rem;
  font-size: 0.84rem;
}
.btn-lg {
  padding: 0.95rem 1.9rem;
  font-size: 1rem;
}
.btn-block {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow:
    var(--sh-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.card-flush {
  padding: 0;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.card-head h3 {
  margin: 0;
  font-size: 1.02rem;
}
.card-body {
  padding: 1.5rem;
}
.card-hover {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--brand-100);
}

.grid {
  display: grid;
  gap: 1.15rem;
}
/* Grid items default to min-width:auto, so a child with a wide minimum (the
   casino wheel, a long unbroken reference string) pushes its track wider
   than the screen instead of shrinking. Letting them shrink is what keeps
   phones from scrolling sideways. */
.grid > * {
  min-width: 0;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.row {
  display: flex;
  gap: 1rem;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.row-center {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wrap {
  flex-wrap: wrap;
}
.spacer {
  flex: 1;
}

/* ---------------------------------------------------------------------
   Badges, pills, alerts
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--line-soft);
  color: var(--muted);
  /* A badge whose label wraps stops looking like a pill and starts looking
       like a blob. The heading beside it is the flexible one, so it shrinks. */
  white-space: nowrap;
}
.badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info);
}
.badge-brand {
  background: var(--brand-50);
  color: var(--brand-300);
  border: 1px solid var(--brand-100);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(20, 23, 40, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-success {
  background: var(--success-bg);
  border-color: rgba(74, 222, 128, 0.3);
  color: #9fedbb;
}
.alert-error {
  background: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.35);
  color: #ffb4ac;
}
.alert-warning {
  background: var(--warning-bg);
  border-color: rgba(242, 184, 75, 0.35);
  color: #f7d08a;
}
.alert-info {
  background: var(--info-bg);
  border-color: rgba(125, 179, 255, 0.3);
  color: #b5d3ff;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field {
  margin-bottom: 1.05rem;
}
.field label,
.label {
  display: block;
  margin-bottom: 0.38rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.input,
.select,
.textarea {
  width: 100%;
  padding: 0.74rem 0.9rem;
  font: inherit;
  font-size: 0.93rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.input::placeholder {
  color: var(--muted-soft);
}
.textarea {
  resize: vertical;
  min-height: 96px;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B978B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}
.hint {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.error-text {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--danger);
  font-weight: 600;
}
.input.has-error {
  border-color: var(--danger);
}

.input-group {
  display: flex;
}
.input-group .addon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.input-group .input {
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.check input {
  margin-top: 0.22rem;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
}

/* On a phone a table does not fit: its right-hand columns ran off the edge
   of the card. Each row becomes a small block instead, one line per cell,
   the column's heading on the left (app.js copies it into data-label) and
   the value on the right. Nothing is hidden and nothing scrolls sideways. */
@media (max-width: 640px) {
  .table-wrap {
    overflow-x: visible;
  }
  .table,
  .table tbody {
    display: block;
    width: 100%;
  }
  .table thead {
    display: none;
  }
  .table tr {
    display: block;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
  }
  .table tbody tr:first-child {
    border-top: 0;
  }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.22rem 0;
    border: 0;
    text-align: right;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: none !important;
  }
  .table td::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
  .table td[data-label=""]::before,
  .table td:not([data-label])::before {
    content: none;
  }
  /* The first cell names the row, so it reads as a heading, not a pair. */
  .table td:first-child {
    justify-content: flex-start;
    text-align: left;
    font-weight: 700;
    padding-bottom: 0.35rem;
  }
  .table td:first-child::before {
    content: none;
  }
  .table td:empty {
    display: none;
  }
  .table td .row-actions {
    justify-content: flex-end;
  }
  .table td:has(> .row-actions) {
    justify-content: flex-end;
  }
  .table td > * {
    min-width: 0;
  }
  .table .amount {
    white-space: normal;
  }
  /* A cell that holds a form field gets the whole line. */
  .table td:has(> .input),
  .table td:has(> .select) {
    flex-wrap: wrap;
  }
  .table td .input,
  .table td .select {
    width: 100% !important;
    min-width: 0 !important;
  }
  .timetable .pay-col {
    display: flex;
  }
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.table th {
  text-align: left;
  padding: 0.8rem 1rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--line-soft);
  white-space: nowrap;
}
.table td {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.table .amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount-credit {
  color: var(--success);
}
.amount-debit {
  color: var(--danger);
}

.empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.empty svg {
  width: 42px;
  height: 42px;
  color: var(--muted-soft);
  margin-bottom: 0.6rem;
}

/* =====================================================================
   PUBLIC SITE
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand:hover {
  text-decoration: none;
}
.brand .brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.brand .brand-word {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: 0.16em;
  line-height: 1;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.sidebar .brand .brand-mark {
  width: 30px;
  height: 30px;
}
.sidebar .brand .brand-word {
  font-size: 1.12rem;
}
.sidebar .brand .badge {
  margin-left: 0.1rem;
}
.auth-side .brand .brand-mark {
  width: 36px;
  height: 36px;
}
.auth-side .brand .brand-word {
  font-size: 1.4rem;
}
.site-nav {
  display: flex;
  gap: 1.6rem;
  margin-left: 1rem;
}
.site-nav a {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.site-nav a:hover {
  color: var(--brand-300);
  text-decoration: none;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--ink);
}

/* Hero */
.hero {
  padding: 1.6rem 0 0;
}
.hero-card {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  border-radius: var(--r-xl);
  border: 1px solid rgba(212, 175, 55, 0.22);
  padding: clamp(2.2rem, 5vw, 4rem);
  color: var(--ink);
}
.hero-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(212, 175, 55, 0.04);
}
.hero-card::before {
  content: "";
  position: absolute;
  right: 120px;
  bottom: -160px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.12);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

/* The hero visual: the Z mark at the centre of two gold rings, with the
   games as chips placed around them. Pure CSS, so nothing to download. */
.hero-card.has-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2.5rem;
  align-items: center;
}
.hero-orbit {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  width: 100%;
}
.orbit-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.12) inset;
}
.orbit-ring.is-inner {
  inset: 26%;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.28);
  animation: orbit-spin 40s linear infinite;
}
.orbit-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 22%;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.4),
    0 20px 60px rgba(212, 175, 55, 0.25);
}
.orbit-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-md);
  transform: translate(-50%, -50%);
  animation: orbit-float 6s ease-in-out infinite;
}
.orbit-chip svg {
  color: var(--gold);
}
.orbit-chip.c1 {
  left: 50%;
  top: 6%;
}
.orbit-chip.c2 {
  left: 90%;
  top: 38%;
  animation-delay: -1.2s;
}
.orbit-chip.c3 {
  left: 76%;
  top: 88%;
  animation-delay: -2.4s;
}
.orbit-chip.c4 {
  left: 24%;
  top: 88%;
  animation-delay: -3.6s;
}
.orbit-chip.c5 {
  left: 10%;
  top: 38%;
  animation-delay: -4.8s;
}
@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orbit-float {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -6px;
  }
}
@media (max-width: 980px) {
  .hero-card.has-brand {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .hero-orbit {
    order: -1;
    width: min(300px, 100%);
    margin: 0 auto;
  }
}
@media (max-width: 420px) {
  .hero-orbit {
    width: min(260px, 100%);
  }
  .orbit-chip {
    font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
  }
  .orbit-chip svg {
    width: 13px;
    height: 13px;
  }
}
.hero h1 {
  color: var(--ink);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 1.8rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2rem;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.hero-trust svg {
  color: var(--gold);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-trust svg {
  width: 17px;
  height: 17px;
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.section-head {
  max-width: 640px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.section-head p {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}
.eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-300);
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.step-num {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--on-brand);
  font-family: var(--font-display);
}
.step:nth-child(1) .step-num {
  background: var(--grad-soft);
  box-shadow: var(--sh-glow);
}
.step:nth-child(2) .step-num {
  background: linear-gradient(135deg, #f0d27a, #b8932a);
}
.step:nth-child(3) .step-num {
  background: linear-gradient(135deg, #4be3c0, #1fa987);
}
.step h3 {
  margin-bottom: 0.4rem;
}
.step p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

/* Feature grid */
.feature {
  padding: 1.65rem;
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: var(--brand-50);
  color: var(--brand-300);
  border: 1px solid var(--brand-100);
}
.feature-icon svg {
  width: 23px;
  height: 23px;
}
.feature h3 {
  font-size: 1.04rem;
  margin-bottom: 0.35rem;
}
.feature p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}
.feature:nth-child(2) .feature-icon {
  background: rgba(34, 211, 166, 0.1);
  color: var(--teal-400);
  border-color: rgba(34, 211, 166, 0.22);
}
.feature:nth-child(3) .feature-icon {
  background: var(--plum-bg);
  color: var(--plum);
  border-color: rgba(215, 164, 236, 0.22);
}
.feature:nth-child(4) .feature-icon {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(125, 179, 255, 0.22);
}
.feature:nth-child(5) .feature-icon {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(242, 184, 75, 0.22);
}
.feature:nth-child(6) .feature-icon {
  background: var(--olive-bg);
  color: var(--olive);
  border-color: rgba(166, 214, 111, 0.22);
}

/* Trust band */
.trust-band {
  background: var(--grad);
  border: 1px solid rgba(212, 175, 55, 0.18);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.2rem);
}
.trust-band h2 {
  color: var(--ink);
}
.trust-band > .container-narrow > p {
  color: rgba(255, 255, 255, 0.72);
}
.trust-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.trust-item .tick {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(43, 224, 184, 0.16);
  color: var(--teal-400);
}
.trust-item h4 {
  margin: 0 0 0.2rem;
  color: var(--ink);
  font-size: 0.97rem;
}
.trust-item p {
  margin: 0;
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.66);
}

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.stat-big {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* FAQ */
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.05rem 1.25rem;
  margin-bottom: 0.7rem;
}
.faq details[open] {
  border-color: var(--brand-100);
  box-shadow: var(--sh-sm);
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.96rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.91rem;
}

/* Final CTA */
.cta-card {
  background: var(--grad);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
  color: var(--ink);
}
.cta-card h2 {
  color: var(--ink);
}
.cta-card p {
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto 1.6rem;
}

/* Footer */
.site-footer {
  background: var(--deep);
  border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
}
.footer-grid h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-grid li {
  margin-bottom: 0.45rem;
}
.footer-grid a {
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Auth pages */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-side {
  background: var(--grad);
  color: var(--ink);
  padding: 3rem;
  border-right: 1px solid rgba(212, 175, 55, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-side::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.auth-side h2 {
  color: var(--ink);
  font-size: 1.9rem;
}
.auth-side p {
  color: var(--ink-soft);
}
.auth-side .pill-list {
  display: grid;
  gap: 0.7rem;
  position: relative;
  z-index: 1;
}
.auth-main {
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem;
}
.auth-card {
  width: min(430px, 100%);
}
.auth-card h1 {
  font-size: 1.7rem;
  margin-bottom: 0.3rem;
}

/* =====================================================================
   DASHBOARD
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--deep);
  border-right: 1px solid var(--line);
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sidebar .brand {
  padding: 0 1.35rem 1.25rem;
}
.side-group {
  padding: 0 0.8rem;
  margin-bottom: 1.1rem;
}
.side-label {
  padding: 0 0.55rem;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.side-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.58rem 0.55rem;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: 0.89rem;
  font-weight: 600;
}
.side-link:hover {
  background: var(--line-soft);
  text-decoration: none;
}
.side-link.active {
  background: var(--brand-50);
  color: var(--brand-300);
  box-shadow: inset 2px 0 0 var(--gold);
}
.side-link svg {
  color: var(--muted);
}
.side-link.active svg {
  color: var(--gold);
}
.side-link .tag {
  margin-left: auto;
}
.sidebar-foot {
  margin-top: auto;
  padding: 1rem 0.8rem 0;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar h1 {
  font-size: 1.15rem;
  margin: 0;
}
.topbar .sub {
  font-size: 0.8rem;
  color: var(--muted);
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.page {
  padding: 1.6rem;
  flex: 1;
}
/* Centred rather than left-aligned: on a wide monitor the main column is
   far wider than 1180px, and hugging the sidebar looks broken. */
.page > .container-fluid {
  max-width: 1180px;
  margin-inline: auto;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--grad-soft);
  color: var(--on-brand);
  font-size: 0.8rem;
  font-weight: 800;
}
.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
}
.icon-btn:hover {
  border-color: var(--brand-100);
  color: var(--brand-300);
  text-decoration: none;
}
.icon-btn .dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--card);
}

/* Balance cards */
.balance-card {
  background: var(--grad);
  color: var(--ink);
  border-radius: var(--r-lg);
  border: 1px solid rgba(212, 175, 55, 0.22);
  padding: 1.4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.balance-card::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.18);
}
.balance-card .label {
  font-size: 0.78rem;
  color: var(--brand-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.balance-card .value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0.1rem;
  position: relative;
  z-index: 1;
}
.balance-card .meta {
  font-size: 0.8rem;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem;
}
.stat-card .label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 650;
}
.stat-card .value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.2rem;
}
.stat-card .delta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-300);
}

/* Task cards */
.task-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-100);
  text-decoration: none;
}
.task-card .t-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-300);
  flex: none;
}
.task-card .t-body {
  min-width: 0;
  flex: 1;
}
.task-card h4 {
  margin: 0 0 0.12rem;
  font-size: 0.96rem;
  color: var(--ink);
}
.task-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.task-card .t-reward {
  text-align: right;
  flex: none;
}
.task-card .t-reward .amt {
  font-weight: 800;
  color: var(--teal-600);
  font-size: 0.98rem;
  white-space: nowrap;
}
.task-card.is-done {
  opacity: 0.62;
}
.task-card.is-done .t-icon {
  background: var(--line-soft);
  color: var(--muted);
}

.progress {
  height: 6px;
  background: var(--line-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 0.5rem;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--grad-soft);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}

/* Bar chart */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  height: 150px;
  padding-top: 0.5rem;
}
.chart .bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
}
.chart .bar i {
  display: block;
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: var(--grad-soft);
  min-height: 3px;
  transition: height 0.5s ease;
}
.chart .bar.is-empty i {
  background: var(--line);
}
.chart .bar b {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
}

/* Games */
/* The per-attempt rewrite replaced the old HUD strip, fixed-height board
   and roaming tap target. What is left below is what the games still use. */
.quiz-options {
  display: grid;
  gap: 0.65rem;
  width: min(440px, 100%);
}
.quiz-opt {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.quiz-opt:hover {
  border-color: var(--brand-600);
  background: var(--brand-50);
}
.quiz-opt.correct {
  border-color: var(--success);
  background: var(--success-bg);
}
.quiz-opt.wrong {
  border-color: var(--danger);
  background: var(--danger-bg);
}

/* Wheel */
/* Bounded by its container, not by the viewport: 86vw ignored the page and
   card padding either side, which made the wheel wider than the space it
   had to sit in. */
.wheel-wrap {
  position: relative;
  width: min(320px, 100%);
  margin: 0 auto;
}
.wheel {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--gold);
  box-shadow:
    var(--sh-lg),
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 0 40px rgba(212, 175, 55, 0.15);
  transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.16, 1);
}
.wheel-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 24px solid var(--gold-2);
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  z-index: 100;
}
.modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  box-shadow: var(--sh-lg);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.modal-body {
  padding: 1.35rem;
}
.modal-foot {
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.modal-close {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* Toasts */
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: grid;
  gap: 0.6rem;
}
.toast {
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid var(--brand-100);
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-md);
  font-size: 0.87rem;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  animation: toast-in 0.28s ease;
}
.toast.win {
  background: linear-gradient(135deg, #0fa968, #0b7a4b);
  color: #fff;
  border-color: transparent;
}
.toast.err {
  background: linear-gradient(135deg, #d24a40, #9c2a22);
  color: #fff;
  border-color: transparent;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Locked state */
.locked-banner {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--warning-bg);
  border: 1px solid rgba(242, 184, 75, 0.35);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.5rem;
}
.locked-banner svg {
  color: var(--warning);
  flex: none;
}
.locked-banner h4 {
  margin: 0 0 0.15rem;
  color: #f7d08a;
}
.locked-banner p {
  margin: 0;
  font-size: 0.87rem;
  color: #e9d3a6;
}
.locked-banner .btn {
  margin-left: auto;
}

/* Countdown ring */
.ring {
  --pct: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--line) 0);
  font-size: 0.78rem;
  font-weight: 800;
}
.ring i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  font-style: normal;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .auth-wrap {
    grid-template-columns: 1fr;
  }
  .auth-side {
    display: none;
  }
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 264px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: var(--sh-lg);
  }
  .sidebar.open {
    transform: none;
  }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 80;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 600px) {
  /* Badges no longer wrap their own text, so a row of them has a hard
       minimum width. Letting the row itself wrap is what absorbs that on a
       narrow screen. Only kicks in when the content genuinely does not fit. */
  .row-between {
    flex-wrap: wrap;
  }

  /* Three elements on one row leaves the message a three-words-per-line
       column on a phone. The button wraps to its own full-width row and the
       text gets the space back. */
  .locked-banner {
    flex-wrap: wrap;
  }
  .locked-banner .btn {
    flex: 1 0 100%;
    margin-left: 0;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* 16px exactly. iOS Safari zooms the whole page in when you focus an
       input whose font is smaller than this, and it does not zoom back out
       afterwards - which on a platform where people are constantly typing
       phone numbers and amounts leaves them stranded mid-form. */
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }

  /* The topbar is the one row that cannot wrap gracefully, so the balance
       readout steps aside: the main wallet card below repeats it anyway. */
  .topbar {
    gap: 0.55rem;
  }
  .topbar > div {
    min-width: 0;
  }
  .topbar h1 {
    font-size: 1.02rem;
  }
  .topbar .sub {
    display: none;
  }
  .topbar-balance {
    display: none;
  }
  .topbar-actions {
    gap: 0.45rem;
  }
}

@media (max-width: 340px) {
  /* Below any real phone width, but browser text-zoom lands here. The
       header is the one row with two buttons and a wordmark competing. */
  .site-header .inner {
    gap: 0.6rem;
  }
  .brand span {
    display: none;
  }
  .header-actions {
    gap: 0.4rem;
  }
  .header-actions .btn {
    padding: 0.48rem 0.8rem;
  }
}

@media (max-width: 480px) {
  /* On a 360-375px phone, 1.5rem of card padding either side costs 48px of
       a ~340px content column. Buying that back matters more than the
       roominess does at this size. */
  .card {
    padding: 1.15rem;
  }
  .card-head,
  .card-body {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
  .page {
    padding: 0.9rem;
  }
  /* Comfortably tappable without hunting for a 16px box. */
  .check input {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .page {
    padding: 1.1rem;
  }
  .topbar {
    padding: 0.8rem 1.1rem;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   DASHBOARD READOUT CARDS
   ---------------------------------------------------------------------
   The stacked, colour-coded balance cards. Colour-coding earns its place:
   on a page with eight numbers on it, hue is how you find the one you came
   for. Every gradient's lightest stop clears 4.5:1 against white, because
   the small uppercase label on these cards is normal-size text.
   ===================================================================== */
.money-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  color: #fff;
  background: var(--grad);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.money-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -52px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.money-card > * {
  position: relative;
  z-index: 1;
}
.money-card .chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.money-card .chip svg {
  width: 17px;
  height: 17px;
}
.money-card .label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.money-card .value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.1rem;
}
.money-card .sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.15rem;
}

.money-card.is-main {
  background: var(--grad);
  border-color: rgba(212, 175, 55, 0.35);
}
.money-card.is-main .label {
  color: var(--brand-300);
}
.money-card.is-ink {
  background: linear-gradient(135deg, #2a2924, #16161a);
}
.money-card.is-teal {
  background: linear-gradient(135deg, #0b5e48, #062e25);
}
.money-card.is-plum {
  background: linear-gradient(135deg, #5c2350, #2a0f26);
}
.money-card.is-amber {
  background: linear-gradient(135deg, #7a5410, #3a2806);
}
.money-card.is-brick {
  background: linear-gradient(135deg, #7e2a1e, #3c120c);
}
.money-card.is-slate {
  background: linear-gradient(135deg, #4a4740, #2a2925);
}

/* Lifetime profit, with what the platform took sitting underneath it. */
.profit-card {
  background: var(--grad);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.35rem;
  color: var(--ink);
}
.profit-card .label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.profit-card .value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 0.15rem;
}
.profit-card .split {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.profit-card .out-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.profit-card .out-value {
  color: #ff9da6;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Panels: a card with a titled head, optionally a gradient banner
   --------------------------------------------------------------------- */
.panel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.panel-head h3 {
  margin: 0;
  font-size: 1.02rem;
}
.panel-head > div {
  min-width: 0;
}
.panel-head > .btn,
.card-head > .btn,
.card-head > .badge {
  flex: none;
}
.panel-head .sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-300);
}
.panel-icon svg {
  width: 17px;
  height: 17px;
}
.panel-icon.is-teal {
  background: rgba(34, 211, 166, 0.1);
  color: var(--teal-400);
}
.panel-icon.is-plum {
  background: var(--plum-bg);
  color: var(--plum);
}
.panel-icon.is-amber {
  background: var(--warning-bg);
  color: var(--warning);
}
.panel-icon.is-info {
  background: var(--info-bg);
  color: var(--info);
}

.panel-head.is-banner {
  background: var(--grad);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--ink);
}
.panel-head.is-banner h3 {
  color: var(--ink);
}
.panel-head.is-banner .sub {
  color: var(--ink-soft);
}
.panel-head.is-banner .panel-icon {
  background: var(--grad-soft);
  color: var(--on-brand);
  border: 0;
}

/* ---------------------------------------------------------------------
   Per-activity earnings grid
   --------------------------------------------------------------------- */
.earn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
}
.earn-tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.8rem;
  background: var(--card-2);
  color: var(--ink);
}
.earn-tile:hover {
  border-color: var(--brand-100);
  text-decoration: none;
}
.earn-tile .ei {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-300);
}
.earn-tile .ei svg {
  width: 16px;
  height: 16px;
}
.earn-tile .en {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.25;
}
.earn-tile .ev {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.earn-tile > div {
  min-width: 0;
}
.earn-tile.is-total {
  grid-column: 1 / -1;
  background: var(--brand-50);
  border-color: var(--brand-100);
}

/* Give the tiles a spread of hues so the grid scans like the cards do. */
.earn-tile:nth-child(6n + 2) .ei {
  background: rgba(34, 211, 166, 0.1);
  color: var(--teal-400);
}
.earn-tile:nth-child(6n + 3) .ei {
  background: var(--plum-bg);
  color: var(--plum);
}
.earn-tile:nth-child(6n + 4) .ei {
  background: var(--info-bg);
  color: var(--info);
}
.earn-tile:nth-child(6n + 5) .ei {
  background: var(--warning-bg);
  color: var(--warning);
}
.earn-tile:nth-child(6n + 6) .ei {
  background: var(--olive-bg);
  color: var(--olive);
}

/* ---------------------------------------------------------------------
   Downline levels
   --------------------------------------------------------------------- */
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
}
.level-tile {
  border-radius: var(--r-md);
  padding: 0.85rem 0.7rem;
  color: #fff;
  text-align: center;
}
.level-tile .n {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.level-tile .l {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.level-tile .d {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}
.level-tile {
  min-width: 0;
}
.level-tile:nth-child(1) {
  background: linear-gradient(135deg, #8f6c14, #4f3b0a);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.level-tile:nth-child(2) {
  background: linear-gradient(135deg, #5c2350, #2a0f26);
}
.level-tile:nth-child(3) {
  background: linear-gradient(135deg, #4a4740, #2a2925);
}

/* ---------------------------------------------------------------------
   Task timetable
   --------------------------------------------------------------------- */
.timetable td,
.timetable th {
  padding: 0.6rem 0.75rem;
}
.timetable .t-name {
  font-weight: 650;
}
.timetable .t-today {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The schedule column is the widest thing in the timetable and the first to
   push it past the card on a phone. Below 560px it says "Daily" not
   "Every day", which is the difference between fitting and not. */
.narrow-only {
  display: none;
}

.badge-tier {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
}
.badge-tier .medal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
}
.badge-tier .tier-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  /* The breakdown stays two-up on a phone, as the reference does: ten
       single-file rows would push everything below it off the screen. */
  .earn-grid {
    padding: 1rem;
    gap: 0.55rem;
  }
  .earn-tile {
    padding: 0.6rem 0.65rem;
    gap: 0.5rem;
  }
  .earn-tile .ei {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .earn-tile .ei svg {
    width: 14px;
    height: 14px;
  }
  .earn-tile .en {
    font-size: 0.7rem;
  }
  .earn-tile .ev {
    font-size: 0.82rem;
  }
  .money-card .value {
    font-size: 1.35rem;
  }

  /* Drop the "Pays" column rather than make the timetable scroll sideways
       inside its card; the reward is on the tasks page beside the button. */
  .timetable th:nth-child(5),
  .timetable td:nth-child(5) {
    display: none;
  }
  .wide-only {
    display: none;
  }
  .narrow-only {
    display: inline;
  }
  .timetable th,
  .timetable td {
    padding: 0.55rem 0.5rem;
  }
}

@media (max-width: 340px) {
  .earn-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   TASK ROWS
   ---------------------------------------------------------------------
   The tasks page in the same idiom as the dashboard: panels with a
   coloured head, and rows separated by a hairline rather than each one
   being its own floating card.
   ===================================================================== */
.task-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.task-row:first-child {
  border-top: 0;
}
.task-row .tr-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-300);
}
.task-row .tr-body {
  flex: 1 1 190px;
  min-width: 0;
}
.task-row h4 {
  margin: 0 0 0.1rem;
  font-size: 0.95rem;
}
.task-row p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.task-row .tr-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.task-row .tr-side {
  flex: none;
  text-align: right;
  display: grid;
  gap: 0.4rem;
  justify-items: end;
}
.task-row .tr-pay {
  font-weight: 800;
  color: var(--teal-600);
  font-size: 0.98rem;
  white-space: nowrap;
}
.task-row .progress {
  margin-top: 0.45rem;
}
.task-row.is-done {
  opacity: 0.62;
}
.task-row.is-done .tr-icon {
  background: var(--line-soft);
  color: var(--muted);
}

/* Match the panel heads: each category reads as its own colour. */
.task-row.cat-game .tr-icon {
  background: var(--plum-bg);
  color: var(--plum);
}
.task-row.cat-bonus .tr-icon {
  background: var(--brand-50);
  color: var(--brand-300);
}

@media (max-width: 520px) {
  /* The reward and its button move to their own full-width row rather than
       squeezing the task name into a narrow column beside them. */
  .task-row {
    padding: 0.9rem 1rem;
    gap: 0.7rem;
  }
  .task-row .tr-side {
    flex: 1 0 100%;
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: stretch;
    align-items: center;
  }
  .task-row .tr-side .btn {
    width: 100%;
  }
}

/* ===================================================================
   Collapsible nav group (Tasks & Games)
   A <details> so it works with JavaScript off; the arrow is rotated by
   the open state rather than swapped for a second icon.
   =================================================================== */
.side-fold summary {
  list-style: none;
  cursor: pointer;
}
.side-fold summary::-webkit-details-marker {
  display: none;
}
.side-fold .fold-arrow {
  margin-left: auto;
  display: inline-flex;
  transition: transform 0.18s ease;
}
.side-fold .fold-arrow svg {
  transform: rotate(90deg);
  width: 14px;
  height: 14px;
}
.side-fold[open] .fold-arrow {
  transform: rotate(90deg);
}
.side-fold .tag + .fold-arrow {
  margin-left: 0.35rem;
}
.side-sub {
  margin: 0.15rem 0 0.35rem 0.85rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--line);
}
.side-sub .side-link {
  font-size: 0.84rem;
  padding: 0.44rem 0.55rem;
}

/* ===================================================================
   Page heading, for the inner pages that carry their own title
   =================================================================== */
.page-head {
  margin-bottom: 1.1rem;
}
.page-head h2 {
  font-size: 1.45rem;
  margin: 0 0 0.15rem;
  letter-spacing: -0.025em;
}
.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ===================================================================
   Stat pills above a game board: "Reward: UGX 25.0000" etc.
   =================================================================== */
.stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line-soft);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-soft);
  white-space: nowrap;
}
.stat-pill b {
  font-weight: 800;
  color: var(--ink);
}

/* Countdown under a timed round. Width is driven inline from JS. */
.timer-bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
  margin-top: 1.25rem;
}
.timer-bar span {
  display: block;
  height: 100%;
  background: var(--grad-soft);
  border-radius: var(--r-pill);
  transition: width 0.25s linear;
}

/* ===================================================================
   Withdrawable balance rows (Tasks & Games, Withdrawals)
   =================================================================== */
.bal-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 0.55rem;
  background: var(--card-2);
}
.bal-row:last-child {
  margin-bottom: 0;
}
.bal-row .bal-name {
  font-size: 0.78rem;
  color: var(--muted);
}
.bal-row .bal-value {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bal-row .bal-state {
  margin-left: auto;
}

/* ===================================================================
   Task cards on Tasks & Games: one card per activity, status top-right
   =================================================================== */
.tg-card {
  position: relative;
  padding: 1.1rem 1.25rem;
}
.tg-card .tg-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.tg-card .tg-ico {
  color: var(--gold);
  flex: none;
}
.tg-card .tg-ico svg {
  width: 24px;
  height: 24px;
}
.tg-card h3 {
  margin: 0.7rem 0 0.3rem;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.tg-card p {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.89rem;
}
.tg-card .tg-when {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted-soft);
}
.tg-card .tg-when svg {
  width: 14px;
  height: 14px;
}
.tg-card.is-locked h3,
.tg-card.is-locked p {
  color: var(--muted);
}
.tg-card .tg-foot {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ===================================================================
   Deposits: the two mobile money buttons
   =================================================================== */
.pay-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--r-lg);
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pay-btn:hover {
  text-decoration: none;
  color: #fff;
  filter: brightness(1.06);
}
.pay-btn .pay-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
}
.pay-btn strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 750;
}
.pay-btn small {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
}
.pay-btn .pay-go {
  margin-left: auto;
  opacity: 0.9;
}
.pay-mtn {
  background: linear-gradient(135deg, #e8a317, #c97a05);
}
.pay-airtel {
  background: linear-gradient(135deg, #e23b3b, #a81414);
}

/* ===================================================================
   Casino multiplier pills
   =================================================================== */
.mult-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.mult-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.76rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
.mult-pill svg {
  width: 13px;
  height: 13px;
}

/* ===================================================================
   Level tabs (My Teams)
   =================================================================== */
.level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem 1.25rem 0;
}
.level-tab {
  padding: 0.46rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--brand-300);
}
.level-tab:hover {
  text-decoration: none;
  background: var(--line-soft);
}
.level-tab.active {
  background: var(--card-2);
  border-color: var(--brand-100);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.level-tab .n {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}
.level-tab.active .n {
  background: var(--gold);
  color: var(--on-brand);
}

/* Leaderboard medals for the top three. */
.rank-medal {
  font-size: 1.1rem;
  line-height: 1;
}
.rank-num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.row-me {
  background: var(--brand-50) !important;
}

/* Withdrawal reference: monospace so two of them can be compared. */
.ref-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--brand-300);
}

/* Fee breakdown above the Request Withdrawal button. */
.fee-box {
  background: var(--line-soft);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  margin: 0.9rem 0;
}
.fee-box .fee-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.87rem;
  padding: 0.22rem 0;
}
.fee-box .fee-line .k {
  color: var(--muted);
}
.fee-box .fee-line .v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fee-box .fee-net {
  border-top: 1px dashed var(--line);
  margin-top: 0.4rem;
  padding-top: 0.5rem;
}
.fee-box .fee-net .v {
  color: var(--success);
}

/* A field the member cannot change here, with the reason underneath. */
.input[readonly] {
  background: var(--line-soft);
  color: var(--ink-soft);
  cursor: default;
}

@media (max-width: 520px) {
  .bal-row {
    gap: 0.5rem;
  }
  .bal-row .bal-state {
    margin-left: 0;
    flex: 1 0 100%;
  }
  .stat-pills {
    justify-content: flex-start;
  }
}

/* Two more money-card tints: the deposit and casino balances. */
.money-card.is-info {
  background: linear-gradient(135deg, #1c4f7a, #0d2840);
}
.money-card.is-green {
  background: linear-gradient(135deg, #165c34, #0a2e1b);
}

/* Level tiles are links to My Teams; keep them looking like tiles. */
.level-tile:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

/* ===================================================================
   Fix Tap: one big target, sized so it stays comfortably tappable on a
   phone without overflowing a 320px screen.
   =================================================================== */
.tap-circle {
  width: min(210px, 62vw);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--grad-soft);
  color: var(--on-brand);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin: 0.5rem auto 0;
  box-shadow: var(--sh-glow);
  transition:
    transform 0.08s ease,
    filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tap-circle:active {
  transform: scale(0.95);
}
.tap-circle svg {
  width: 58px;
  height: 58px;
}
.tap-circle.is-spent {
  background: var(--card-2);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Quiz options are full width and lettered, so the tap target is the whole row. */
.quiz-options {
  width: 100%;
}
.quiz-opt {
  width: 100%;
  text-align: left;
}

/* ===================================================================
   Color Challenge: a row of four swatches, wrapping to two on a narrow
   screen rather than shrinking below a comfortable tap target.
   =================================================================== */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.swatch {
  border: 0;
  border-radius: 12px;
  aspect-ratio: 1;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.1s ease,
    box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.swatch:hover {
  transform: scale(1.05);
}
.swatch:active {
  transform: scale(0.96);
}
.swatch.is-answer {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 6px var(--gold-2);
}
.swatch[disabled] {
  cursor: default;
}

/* Four across stays comfortably tappable down to ~340px; below that
   two rows of two beats four slivers. */
@media (max-width: 340px) {
  .swatch-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The timetable has five columns; on a phone the rate is the one that can
   go, because Tasks & Games states it next to the button that uses it.
   Four columns is also what the reference platform shows. */
@media (max-width: 560px) {
  .timetable .pay-col {
    display: none;
  }
}

/* ===================================================================
   A main column with a narrower aside, collapsing to one column before
   the aside gets too cramped to use. Used by Casino and Profile; it is
   a class rather than an inline style plus a per-page media query,
   because that is how the casino page lost its collapse once already.
   =================================================================== */
.split-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.15rem;
}

@media (max-width: 980px) {
  .split-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Payment buttons for the networks outside Uganda. Each wears the colour
   its members already associate with it. */
.pay-mpesa {
  background: linear-gradient(135deg, #1fa84a, #0e7a33);
}
.pay-orange {
  background: linear-gradient(135deg, #ff7a1a, #d65a00);
}
.pay-ecocash {
  background: linear-gradient(135deg, #1d6fd1, #134e96);
}
.pay-other {
  background: linear-gradient(135deg, #b8932a, #7a5f12);
}

/* ===================================================================
   Flag glyphs.
   Windows draws flag emoji as two letters. This font fills in the flags
   only - unicode-range confines it to the regional-indicator block, so
   no other character on the page is affected - and if it fails to load
   the letters are still a readable country code.
   Twemoji country flags, CC-BY 4.0.
   =================================================================== */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range:
    U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E,
    U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2")
    format("woff2");
  font-display: swap;
}
.flag {
  font-family:
    "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1;
}

/* ===================================================================
   Sign-in and sign-up cards
   =================================================================== */
.auth-badge {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  margin: 0 auto 0.9rem;
  display: grid;
  place-items: center;
  color: var(--on-brand);
  box-shadow: var(--sh-glow);
}
.auth-badge svg {
  width: 24px;
  height: 24px;
}
.auth-badge.is-blue {
  background: var(--grad-soft);
}
.auth-badge.is-green {
  background: linear-gradient(135deg, #17a34a, #0b6b36);
}
.auth-card > h1,
.auth-card > .auth-badge + h1 {
  text-align: center;
}
.auth-card > .auth-badge ~ p.muted:first-of-type {
  text-align: center;
}

/* A password field with a show/hide button fixed to its right edge. */
.input-reveal {
  display: flex;
}
.input-reveal .input {
  border-radius: var(--r-md) 0 0 var(--r-md);
  min-width: 0;
}
.reveal-btn {
  flex: none;
  width: 46px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--field);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.reveal-btn:hover {
  color: var(--brand-300);
}

/* ===================================================================
   Phone number with its country: flag + dial code on the left.
   The native <select> sits invisibly over the flag, so tapping it opens
   the platform's own picker - a full-screen list with every country's
   name on a phone - while the face shows only what fits.
   =================================================================== */
.phone-field {
  display: flex;
  align-items: stretch;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.phone-field:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.phone-field.has-error {
  border-color: var(--danger);
}
.country-pick {
  position: relative;
  flex: none;
  display: flex;
}
.country-face {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.35rem 0 0.8rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.country-face .flag {
  font-size: 1.3rem;
}
.country-face .ico-xs {
  width: 12px;
  height: 12px;
  color: var(--muted);
}
.country-face .dial {
  margin-left: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.country-pick select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  border: 0;
}
.country-pick:focus-within .country-face {
  color: var(--brand-300);
}
.phone-field input {
  /* width:0 as the base: an input's built-in width (about twenty
       characters) otherwise becomes the card's minimum, and a 320px phone
       scrolls sideways. flex:1 then grows it into the space that is left. */
  flex: 1;
  width: 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.78rem 0.9rem 0.78rem 0.4rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.phone-field input::placeholder {
  color: var(--muted-soft);
}
.ico-xs {
  width: 12px;
  height: 12px;
}

/* The public demo's banner: unmistakably "not your real money". */
.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--warning-bg);
  border: 1px solid rgba(242, 184, 75, 0.3);
  border-left: 4px solid var(--warning);
}
.demo-banner svg {
  flex: none;
  color: var(--warning);
  margin-top: 0.15rem;
}
.demo-banner p {
  margin: 0;
  color: #f1ddb2;
  font-size: 0.92rem;
}

/* Demo page: every balance and game opens its part of the account */
[data-demo-open][role="button"] {
  cursor: pointer;
}
.money-card[data-demo-open],
.profit-card[data-demo-open] {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.money-card[data-demo-open]:hover,
.profit-card[data-demo-open]:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
[data-demo-open][role="button"]:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 2px;
}
.demo-modal {
  width: min(820px, 100%);
}
/* The public demo is a still picture: nothing in the menu reacts. The
   menu button still slides the menu in on a phone, so it can be seen. */
.demo-still .side-fold > summary {
  pointer-events: none;
}
.demo-still .side-link:hover {
  background: none;
  color: inherit;
}
.demo-still .side-link.active:hover {
  background: var(--brand-50);
  color: var(--brand-300);
}
.demo-modal .modal-head {
  gap: 0.6rem;
}

/* Console: one collapsible block per market, so eighteen of them stay
   scannable. The summary line carries what an admin looks for first. */
.line-group {
  border-top: 1px solid var(--line);
}
.line-group > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.25rem;
  cursor: pointer;
  list-style: none;
}
.line-group > summary::-webkit-details-marker {
  display: none;
}
.line-group > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
}
.line-group[open] > summary::after {
  content: "\2212";
}
.line-group > summary .flag {
  font-size: 1.2rem;
}
.line-group .add-row td {
  background: var(--line-soft);
}

/* ===================================================================
   Phones. Nothing may be wider than the screen, and long words - a
   username, a link, a big amount - break rather than push past the edge.
   =================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
img,
video,
iframe {
  max-width: 100%;
}
h1,
h2,
h3,
h4,
p,
li,
label,
.value,
.small,
.muted,
strong {
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .card,
  .stat-card,
  .money-card,
  .hero-card {
    min-width: 0;
  }
  .row-between {
    gap: 0.75rem;
  }
  .row-between > * {
    min-width: 0;
  }
  .row-between > .btn,
  .row-between > .badge {
    flex: none;
  }
  .stat-card .value,
  .money-card .value {
    overflow-wrap: anywhere;
  }
  .stat-pills {
    gap: 0.4rem;
  }
  .stat-pill {
    white-space: normal;
  }
  .input,
  .select,
  .textarea {
    max-width: 100%;
  }
  .page-head h2 {
    font-size: 1.35rem;
  }
  .grid > * {
    min-width: 0;
  }
  .card-head {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  .card-head .badge,
  .badge {
    white-space: normal;
    text-align: left;
  }
}

@media (max-width: 380px) {
  h1 {
    font-size: 1.7rem;
  }
  .hero-card {
    padding: 1.4rem 1.1rem;
  }
  .hero-actions .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    white-space: normal;
  }
  .hero-sub {
    font-size: 0.98rem;
  }
  .page {
    padding: 0.9rem;
  }
  .panel-head {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .level-grid {
    gap: 0.4rem;
  }
  .level-tile {
    padding: 0.7rem 0.35rem;
  }
  .level-tile .d {
    font-size: 0.62rem;
  }
  .stat-card .value,
  .money-card .value {
    font-size: 1.3rem;
  }
  .site-header .header-actions .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }
}

/* The public header on a phone: the logo and the two buttons share one
   row, and the buttons must never slide over the name. The buttons keep
   their shape; the logo gives way, down to the mark alone on the
   narrowest screens. */
.site-header .brand {
  flex: 0 1 auto;
  min-width: 0;
}
.site-header .header-actions {
  flex: none;
}
.site-header .header-actions .btn {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .site-header .inner {
    gap: 0.6rem;
  }
  .site-header .brand {
    gap: 0.45rem;
  }
  .site-header .brand .brand-mark {
    width: 28px;
    height: 28px;
  }
  .site-header .brand .brand-word {
    font-size: 1.05rem;
  }
  .site-header .header-actions {
    gap: 0.4rem;
  }
  .site-header .header-actions .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }
}
@media (max-width: 400px) {
  .site-header .brand .brand-word {
    font-size: 0.98rem;
    letter-spacing: 0.12em;
  }
  .site-header .header-actions .btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
  }
}
@media (max-width: 330px) {
  .site-header .brand .brand-word {
    display: none;
  }
}

/* ===================================================================
   Paying: the activation card, the paid-so-far strip, the steps
   =================================================================== */
.activate-hero {
  border-radius: var(--r-lg);
  padding: 1.3rem 1.35rem;
  color: var(--ink);
  background: var(--grad);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.activate-hero h1 {
  margin: 0 0 0.3rem;
  font-size: 1.45rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.activate-hero p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.activate-hero .state {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: var(--r-pill);
  background: #f5c542;
  color: #4a3500;
  font-size: 0.74rem;
  font-weight: 800;
}
.activate-hero .split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.activate-hero .k {
  font-size: 0.82rem;
  color: var(--muted);
}
.activate-hero .v {
  color: var(--brand-300);
}
.activate-hero .v {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.activate-hero .who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.pay-progress {
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  background: var(--brand-50);
  border-left: 4px solid var(--gold);
  color: var(--ink-soft);
}
.pay-progress .figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  font-size: 0.9rem;
}
.pay-progress .bar {
  height: 7px;
  margin-top: 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(212, 175, 55, 0.14);
  overflow: hidden;
}
.pay-progress .bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--teal-500);
}

.pay-fail {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--r-md);
  padding: 0.95rem 1.1rem;
  background: var(--danger-bg);
  border-left: 4px solid var(--danger);
  color: #ffb4ac;
  font-size: 0.92rem;
}
.pay-fail .msg {
  flex: 1;
}
.pay-fail .btn {
  flex: none;
  background: #b93a30;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  display: block;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
}
.pay-back {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0.2rem 0 0.8rem;
  font-size: 0.9rem;
  color: var(--brand-300);
}
.pay-back span {
  text-decoration: underline;
}

.pay-sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-600);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pay-sheet-mtn {
  border-left-color: #e8a317;
}
.pay-sheet-airtel {
  border-left-color: #c81e1e;
}
.pay-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
}
.pay-sheet-head strong {
  font-size: 1.02rem;
}
.pay-sheet-head .panel-icon {
  background: var(--grad-soft);
  color: var(--on-brand);
}
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px dashed var(--line);
}
.pay-row .k {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.pay-row .v {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.95rem;
}
.pay-row .v.is-money {
  color: var(--success);
}
.pay-copy {
  font: inherit;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1.5px solid var(--brand-600);
  background: var(--brand-50);
  color: var(--brand-300);
}

.pay-confirm {
  border-radius: var(--r-lg);
  padding: 1.2rem 1.2rem 1.3rem;
  color: #fff;
  background: var(--grad);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.pay-confirm h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 1.15rem;
  color: #fff;
}
.pay-confirm .who {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.8rem;
}
.pay-confirm .who strong {
  color: #fff;
}
.pay-confirm .due {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
  margin-bottom: 1rem;
}
.pay-confirm .due .k {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.pay-confirm .due .v {
  font-size: 1.3rem;
  font-weight: 800;
}
.pay-confirm label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: #fff;
}
.pay-confirm .input {
  background: var(--field);
}
.pay-confirm .hint {
  color: rgba(255, 255, 255, 0.75);
  margin: 0.45rem 0 0.9rem;
}
.pay-confirm .btn {
  background: var(--grad-soft);
  color: var(--on-brand);
  font-weight: 750;
}

/* ===================================================================
   Balance cards on a phone: two to a row
   -------------------------------------------------------------------
   One card per row meant six screens of scrolling before a member saw
   anything but balances. Two-up, with the type brought down to fit a
   half-width card, shows them all in about one screen. Below 340px
   there is no room for two, and they stack again.
   =================================================================== */
@media (max-width: 720px) {
  .grid.cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem !important;
  }
  .cards-2 .money-card {
    padding: 0.85rem 0.9rem;
  }
  .cards-2 .money-card::after {
    width: 104px;
    height: 104px;
    right: -34px;
    top: -40px;
  }
  .cards-2 .money-card {
    border-radius: var(--r-md);
  }
  .cards-2 .money-card .chip {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }
  .cards-2 .money-card .chip svg {
    width: 14px;
    height: 14px;
  }
  .cards-2 .money-card .label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
  .cards-2 .money-card .value {
    font-size: 1.06rem;
    line-height: 1.25;
  }
  .cards-2 .money-card .sub {
    font-size: 0.7rem;
    line-height: 1.3;
  }
}
@media (max-width: 339px) {
  .grid.cards-2 {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   Figure cards and earnings tiles on a phone
   -------------------------------------------------------------------
   A row of three or four figure cards used to become three or four
   full-width cards, each mostly empty. Two to a row instead; with an odd
   number, the first - the one the page is about - takes the full width.
   =================================================================== */
@media (max-width: 720px) {
  .grid.stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .stats .stat-card {
    padding: 0.85rem 0.95rem;
  }
  .stats .stat-card:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
  }
  .stats .stat-card .label {
    font-size: 0.72rem;
  }
  .stats .stat-card .value {
    font-size: 1.08rem;
    overflow-wrap: anywhere;
  }
  .stats .stat-card:first-child:nth-last-child(odd) .value {
    font-size: 1.35rem;
  }
  .stats .stat-card .delta {
    font-size: 0.72rem;
    line-height: 1.35;
  }
}
@media (max-width: 480px) {
  .earn-grid {
    gap: 0.5rem;
    padding: 0.85rem 0.8rem;
  }
  .earn-tile {
    padding: 0.6rem 0.6rem;
    gap: 0.5rem;
  }
  .earn-tile .ei {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .earn-tile .ei svg {
    width: 14px;
    height: 14px;
  }
  .earn-tile .en {
    font-size: 0.7rem;
  }
  /* Small enough that a five-figure amount fits on one line; a longer
       one wraps at the space after the currency, never mid-number. */
  .earn-tile .ev {
    font-size: 0.8rem;
    overflow-wrap: normal;
  }
}
@media (max-width: 339px) {
  .grid.stats {
    grid-template-columns: 1fr;
  }
}

/* Anything pressed with a thumb is at least 40px tall on a touch screen. */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 40px;
  }
  .side-link {
    min-height: 42px;
  }
  .pay-copy {
    min-height: 32px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
  }
  .modal-close {
    min-width: 40px;
    min-height: 40px;
  }
}

/* =====================================================================
   ZUNO finish
   ---------------------------------------------------------------------
   Small touches that make the dark theme feel deliberate rather than
   inverted: a gold hairline on the surfaces people interact with, gold
   numerals where money is the point, and a scrollbar that does not
   flash a light-grey rail down the side of a black page.
   ===================================================================== */
.card-hover:hover,
.task-card:hover,
.tg-card:hover {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow:
    var(--sh-md),
    0 0 0 1px rgba(212, 175, 55, 0.08);
}
.stat-card .value,
.money-card .value,
.balance-card .value,
.stat-big {
  font-family: var(--font-display);
}
.stat-big {
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.section-head h2 .gold,
.hero h1 .gold {
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.table th {
  color: var(--muted);
}
.side-label {
  color: var(--muted-soft);
}
.card-head h3,
.panel-head h3 {
  letter-spacing: -0.01em;
}
hr {
  border-top-color: var(--line);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #34312a transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: #34312a;
  border-radius: 10px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* Autofilled fields keep the dark field instead of the browser's yellow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out;
}
select option {
  background: var(--card);
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Sun Temple (dashboard/temple.php)
   The wheel, the board of eight fields, chips, and the two bonus rounds.
   Built for a 320px phone first: the wheel is a square as wide as the
   card, and the board is always four fields across.
   --------------------------------------------------------------------- */
.temple {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      90% 60% at 50% 0%,
      rgba(212, 175, 55, 0.16),
      rgba(212, 175, 55, 0) 70%
    ),
    var(--card);
}
.tw-top {
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.tw-recent {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
}
.tw-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  vertical-align: middle;
}
.tw-dot.is-new {
  animation: tw-pop 0.5s ease;
}

.tw-stage {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0 1rem;
}
.tw-wheel {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
}
.tw-spin {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.tw-face {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.6));
}
.tw-face text {
  font-family: var(--font-display);
}
.tw-pointer {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 26px;
  height: 32px;
  transform: translateX(-50%);
  background: var(--grad-soft);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  z-index: 2;
}
.tw-hub {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  pointer-events: none;
}
.tw-hub-small {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.tw-hub-big {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 4.6vw, 1.35rem);
  line-height: 1.15;
  color: var(--brand-300);
  margin-top: 0.2rem;
}
.tw-hub.is-win .tw-hub-big {
  color: var(--success);
  animation: tw-pop 0.6s ease;
}
.temple.is-spinning .tw-hub-big {
  animation: tw-breathe 1.2s ease-in-out infinite;
}

.tw-coins {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.tw-coins i {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e8b931 45%, #9c7a1e);
  box-shadow: 0 0 6px rgba(232, 185, 49, 0.7);
  animation: tw-coin 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.tw-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.tw-field {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.2rem 0.4rem;
  border-radius: var(--r-md);
  cursor: pointer;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 22%, #141418),
    #0f0f12
  );
  border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: var(--ink);
  font: inherit;
  min-width: 0;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.tw-field:hover:not(:disabled) {
  transform: translateY(-1px);
}
.tw-field:disabled {
  cursor: default;
  opacity: 0.72;
}
.tw-field.is-bonus {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 36%, #141418),
    #0f0f12
  );
}
.tw-field.has-bet {
  border-color: var(--c);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 16px color-mix(in srgb, var(--c) 45%, transparent);
}
.tw-field.is-tapped {
  animation: tw-tap 0.25s ease;
}
.tw-field.is-hit {
  border-color: #fff;
  box-shadow:
    0 0 0 2px var(--c),
    0 0 26px var(--c);
  animation: tw-hit 1s ease 2;
}
.tw-mult {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;
  color: #fff;
  text-align: center;
}
.tw-mult small {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.tw-mask {
  width: 70%;
  max-width: 46px;
  color: var(--c);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.tw-name {
  font-size: 0.64rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tw-chip-on {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 1.7rem;
  padding: 0.12rem 0.3rem;
  border-radius: var(--r-pill);
  background: var(--grad-soft);
  color: var(--on-brand);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  border: 2px solid #120e06;
}

.tw-chips {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 1rem 0 0.7rem;
  flex-wrap: wrap;
}
.tw-chip {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--on-brand);
  background: radial-gradient(
    circle at 50% 50%,
    #f6dc8e 0 52%,
    #b8932a 53% 60%,
    #f6dc8e 61%
  );
  border: 3px dashed rgba(18, 14, 6, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  opacity: 0.7;
}
.tw-chip.is-on {
  opacity: 1;
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 0 0 3px var(--brand-300),
    0 8px 18px rgba(0, 0, 0, 0.55);
}
.tw-controls {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.tw-play {
  gap: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.tw-go {
  min-width: 8.5rem;
}
.temple.is-spinning .tw-chips,
.temple.is-spinning .tw-controls {
  opacity: 0.5;
  pointer-events: none;
}

.tw-rules summary {
  cursor: pointer;
}
.tw-rules ol {
  padding-left: 1.1rem;
  margin: 0.9rem 0;
}
.tw-rules li {
  margin-bottom: 0.4rem;
}
.tw-rules h4 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}

.tw-bonus {
  width: min(460px, 100%);
}
.tw-masks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.tw-pick {
  position: relative;
  padding: 0.4rem 0.2rem;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.3), #0f0f12);
  border: 2px solid rgba(236, 72, 153, 0.6);
  color: #ec4899;
  animation: tw-float 2.4s ease-in-out infinite;
}
.tw-pick:nth-child(2) {
  animation-delay: 0.3s;
}
.tw-pick:nth-child(3) {
  animation-delay: 0.6s;
}
.tw-pick:nth-child(4) {
  animation-delay: 0.9s;
}
.tw-pick:nth-child(5) {
  animation-delay: 1.2s;
}
.tw-pick svg {
  width: 100%;
  max-width: 52px;
}
.tw-pick span {
  display: block;
  min-height: 1.2rem;
  font-weight: 800;
  color: #fff;
  font-size: 0.85rem;
}
.tw-pick.is-picked {
  animation: tw-pop 0.5s ease;
  border-color: #fff;
  box-shadow: 0 0 22px #ec4899;
}
.tw-pick.is-other {
  opacity: 0.45;
  animation: none;
}
.tw-pick:disabled {
  cursor: default;
}

.tw-ladder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0.9rem 0;
}
.tw-rung {
  padding: 0.35rem 0;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  background: #1c1b18;
  color: var(--muted);
  border: 1px solid var(--line);
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.tw-rung:nth-child(1) {
  width: 34%;
}
.tw-rung:nth-child(2) {
  width: 44%;
}
.tw-rung:nth-child(3) {
  width: 54%;
}
.tw-rung:nth-child(4) {
  width: 64%;
}
.tw-rung:nth-child(5) {
  width: 74%;
}
.tw-rung:nth-child(6) {
  width: 84%;
}
.tw-rung:nth-child(7) {
  width: 94%;
}
.tw-rung.is-lit {
  background: rgba(20, 184, 166, 0.22);
  color: #99f6e4;
  border-color: rgba(20, 184, 166, 0.5);
}
.tw-rung.is-top {
  background: linear-gradient(135deg, #5eead4, #14b8a6);
  color: #03211e;
  box-shadow: 0 0 22px rgba(20, 184, 166, 0.7);
}
.tw-bonus-result {
  min-height: 3.2rem;
}
.tw-bonus-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--brand-300);
  animation: tw-pop 0.5s ease;
}

@keyframes tw-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tw-tap {
  50% {
    transform: scale(0.94);
  }
}
@keyframes tw-hit {
  50% {
    transform: scale(1.06);
  }
}
@keyframes tw-breathe {
  50% {
    opacity: 0.45;
  }
}
@keyframes tw-float {
  50% {
    transform: translateY(-4px);
  }
}
@keyframes tw-coin {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), calc(var(--y) + 60px)) scale(1);
    opacity: 0;
  }
}

@media (max-width: 380px) {
  .tw-chip {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 0.72rem;
  }
  .tw-mult {
    font-size: 0.8rem;
  }
  .tw-play {
    flex-wrap: wrap;
  }
  .tw-go {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tw-pick,
  .tw-field.is-hit,
  .temple.is-spinning .tw-hub-big {
    animation: none;
  }
}

/* The Casino page's way in to Sun Temple. */
.temple-promo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  background:
    radial-gradient(
      120% 160% at 0% 0%,
      rgba(232, 185, 49, 0.28),
      rgba(232, 185, 49, 0) 60%
    ),
    linear-gradient(135deg, #1f1a0c, #141418);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: var(--sh-glow);
  transition: transform 0.15s ease;
}
.temple-promo:hover {
  text-decoration: none;
  transform: translateY(-2px);
}
.temple-promo strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.temple-promo .small {
  display: block;
  color: var(--ink-soft);
}
.temple-promo-tag {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-300);
  font-weight: 800;
}
.temple-promo-sun {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  color: var(--on-brand);
  animation: tw-sunspin 14s linear infinite;
}
.temple-promo-sun svg {
  width: 1.6rem;
  height: 1.6rem;
}
.temple-promo-go {
  margin-left: auto;
  flex: none;
  color: var(--brand-300);
}
@keyframes tw-sunspin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .temple-promo-sun {
    animation: none;
  }
}

/* Footer on tablets and phones: the logo and its line across the top, then
   the three link columns side by side rather than stacked (owner's
   request, 2026-10-30). Placed last so it wins over the earlier
   one- and two-column footer rules. */
@media (max-width: 1024px) {
  .site-footer { padding: 2rem 0 1.4rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid > :first-child p { max-width: none !important; }
  .footer-grid h4 { margin-bottom: .55rem; font-size: .72rem; }
  .footer-grid li { margin-bottom: .35rem; }
  .footer-grid a { font-size: .82rem; }
  .footer-bottom { margin-top: 1.6rem; padding-top: 1rem; justify-content: center; text-align: center; }
}
@media (max-width: 360px) {
  .footer-grid { gap: 1.2rem .6rem; }
  .footer-grid a { font-size: .76rem; }
}

/* ---------------------------------------------------------------------
   Pay with mobile money (includes/livepay_panel.php): the prompt-to-phone
   card on the entrance-fee page and Deposits. MTN and Airtel alike, so it
   wears Zuno's gold rather than either network's colour.
   --------------------------------------------------------------------- */
.momo-card {
    border-radius: var(--r-lg); padding: 1.1rem 1.15rem;
    background: linear-gradient(160deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .03) 60%), var(--card);
    border: 1px solid rgba(212, 175, 55, .45);
}
.momo-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.momo-head strong { font-family: var(--font-display); font-size: 1.05rem; }
.momo-logo {
    flex: none; width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center;
    background: var(--grad-soft); color: var(--on-brand);
}
.momo-logo svg { width: 1.5rem; height: 1.5rem; }
.momo-form .field { margin-bottom: .75rem; }
.momo-wait { display: flex; align-items: center; gap: .85rem; padding: .4rem 0; }
.momo-wait.hide { display: none; }
.momo-spinner {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    border: 3px solid rgba(212, 175, 55, .25); border-top-color: var(--gold); animation: momo-spin .9s linear infinite;
}
@keyframes momo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .momo-spinner { animation-duration: 3s; } }
.momo-or { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: var(--muted); font-size: .78rem; }
.momo-or::before, .momo-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }