/* pages.css — page-specific composition: heroes, the payout counter,
   responsive schedule/winners tables, account and admin screens. */

/* ------------------------------------------------------------------ */
/* Heroes                                                              */
/* ------------------------------------------------------------------ */
.hero-raffle, .hero-home {
  background-color: var(--band-bg);
  background-image:
    radial-gradient(1100px 420px at 82% -8%, rgba(21, 122, 140, 0.55), transparent 62%),
    radial-gradient(760px 380px at 8% 108%, rgba(11, 60, 93, 0.9), transparent 60%);
  color: var(--band-ink);
  padding-block: var(--s-7) var(--s-8);
  position: relative;
  overflow: hidden;
}
.hero-raffle h1, .hero-home h1 { color: #FFFFFF; }
.hero-raffle p, .hero-home p { color: var(--band-muted); }
.hero-inner { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

.hero-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: var(--s-3);
}
.hero-state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); }

/* Payout counter — the visual anchor of the 50/50 page. Framed top and
   bottom by gold hairlines so the figure reads as a posted amount rather
   than as loud type. */
.payout {
  margin: var(--s-6) 0 var(--s-5);
  padding: var(--s-4) 0 var(--s-5);
  border-top: 2px solid var(--gold-500);
  border-bottom: 1px solid rgba(233, 166, 59, 0.35);
  max-width: 34rem;
}
.payout-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9FD3E8;
}
.payout-figure {
  display: block;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--gold-500);
  font-variant-numeric: lining-nums tabular-nums;
  margin: var(--s-3) 0 var(--s-3);
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.38);
}
.payout-caption {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #D6EAF5 !important;
  max-width: 46ch;
  margin: 0;
}

.hero-art { position: relative; }
.hero-art svg,
.hero-art img { width: 100%; height: auto; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55); }

/* Home hero variant sits a little tighter */
.hero-home { padding-block: var(--s-7) var(--s-8); }

/* One orchestrated page load: the hero settles in sequence, then nothing
   else on the page animates on arrival. Written inside a no-preference
   query, so with reduced motion the rules never apply at all and there is
   no chance of content being left mid-animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > div:first-child > * { animation: hero-in 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .hero-inner > div:first-child > :nth-child(1) { animation-delay: 40ms; }
  .hero-inner > div:first-child > :nth-child(2) { animation-delay: 110ms; }
  .hero-inner > div:first-child > :nth-child(3) { animation-delay: 170ms; }
  .hero-inner > div:first-child > :nth-child(4) { animation-delay: 230ms; }
  .hero-inner > div:first-child > :nth-child(5) { animation-delay: 300ms; }
  .hero-inner > div:first-child > :nth-child(6) { animation-delay: 370ms; }
  .hero-inner > div:first-child > :nth-child(n + 7) { animation-delay: 430ms; }
  .hero-inner > .hero-art { animation: hero-art-in 900ms cubic-bezier(0.2, 0.7, 0.3, 1) 180ms both; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-art-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Draw / prize tables that become cards below 768px                   */
/* ------------------------------------------------------------------ */
.table-scroll { overflow-x: auto; }

.stack-table caption { padding-bottom: var(--s-3); }
.stack-table th, .stack-table td { font-size: var(--fs-sm); }
/* Row headers must wrap: several of them are full sentences, and a
   nowrap here pushes the whole page sideways on a narrow screen. */
.stack-table tbody th { white-space: normal; }

@media (max-width: 768px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td, .stack-table th { display: block; width: 100%; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .stack-table tr {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    box-shadow: var(--sh-1);
  }
  /* Cells stay in normal flow so their inline content wraps. A flex or
     grid cell would turn every child <span> into its own unshrinkable
     item and push the card wider than the screen. */
  .stack-table td, .stack-table th {
    border-bottom: 1px dashed var(--border);
    padding: var(--s-2) 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .stack-table tr > *:last-child { border-bottom: 0; }
  .stack-table td::before, .stack-table tbody th::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
  }
  .stack-table tbody th { font-size: var(--fs-base); }
}

.draw-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.draw-card-list > li { margin: 0; max-width: none; }
.draw-card { height: 100%; display: flex; flex-direction: column; gap: var(--s-2); }
.draw-card .draw-no { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal-700); }
.draw-card h3 { margin: 0; }
.draw-card dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-sm); }
.draw-card dt { color: var(--ink-muted); }
.draw-card dd { margin: 0; font-weight: 600; min-width: 0; }

/* Prize calendar */
.calendar { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); list-style: none; margin: 0; padding: 0; }
.calendar > li { margin: 0; max-width: none; }
.cal-month {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  padding: var(--s-4);
}
.cal-month h3 { font-size: var(--fs-h4); margin-bottom: var(--s-1); }
.cal-month .cal-grand { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--s-3); }
.cal-month ul { list-style: none; margin: 0; padding: 0; }
.cal-month li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); padding: var(--s-2) 0; border-top: 1px dashed var(--border); margin: 0; max-width: none; }
.cal-month li b { white-space: nowrap; color: var(--gold-ink); }

/* ------------------------------------------------------------------ */
/* Winners                                                             */
/* ------------------------------------------------------------------ */
.winners-table td.amount, .winners-table th.amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.winners-table td.ticket { font-family: var(--font-mono); font-size: var(--fs-xs); }
@media (max-width: 768px) {
  .winners-table td.ticket { font-size: var(--fs-sm); }
}

.type-tag { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-1); font-size: var(--fs-xs); font-weight: 700; background: var(--lake-100); color: var(--lake-800); }
.type-tag[data-type="Grand Prize"] { background: var(--gold-500); color: var(--on-gold); }
.type-tag[data-type="Early Bird"] { background: var(--teal-100); color: var(--teal-800); }

/* ------------------------------------------------------------------ */
/* Rules of Play                                                       */
/* ------------------------------------------------------------------ */
.rules-head {
  border: 2px solid var(--lake-800);
  border-radius: var(--r-3);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  background: var(--surface);
}
.rules-head dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.rules-head dt { font-weight: 700; color: var(--ink-muted); }
.rules-head dd { margin: 0; min-width: 0; }
@media (max-width: 640px) {
  .rules-head dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rules-head dd { margin-bottom: var(--s-3); }
}

.rules-list { counter-reset: none; padding-left: 1.6em; }
.rules-list > li { margin-bottom: var(--s-5); max-width: 68ch; }
.rules-list > li > h2, .rules-list > li > h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.rules-list ul, .rules-list ol { margin-top: var(--s-3); }

.toc { background: var(--bg-alt); border-radius: var(--r-3); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.toc h2 { font-size: var(--fs-h4); }
.toc ol { columns: 2; column-gap: var(--s-6); font-size: var(--fs-sm); }
.toc li { break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ------------------------------------------------------------------ */
/* Legal pages                                                         */
/* ------------------------------------------------------------------ */
.legal h2 { margin-top: var(--s-7); scroll-margin-top: var(--s-5); }
.legal h3 { margin-top: var(--s-5); }
.legal h2:first-of-type { margin-top: var(--s-5); }
.legal .updated { font-size: var(--fs-sm); color: var(--ink-muted); }