/* plsdonatefunds: a prize booth made of raffle tickets.
   Lilac paper, plum ink, gold only where a ticket is. */
:root {
  --paper: #e8e0ff;
  --paper-2: #d9ccfb;
  --card: #fffbf0;
  --gold: #ffc629;
  --gold-2: #ffe08a;
  --ink: #25123f;
  --ink-2: #5a4879;
  --mint: #2fd08a;
  --mint-2: #bff2da;
  --coral: #ff6b57;
  --coral-2: #ffcfc7;
  --lav: #c9b8ff;
  --line: 3px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --pop-sm: 3px 3px 0 var(--ink);
  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 17px/1.5 var(--body);
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1140px, 100% - 40px); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 0; min-width: 0; }
.right { margin-left: auto; }

/* ---------- header ---------- */
.top { padding: 18px 0 8px; }
.top .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 50px; height: 50px; flex: none; display: block; }
.brand b { font: 800 1.55rem/1 var(--display); letter-spacing: 0.01em; }
.nav { display: flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 800; padding: 7px 14px; border-radius: 999px; border: 3px solid transparent; }
.nav a:hover { background: var(--paper-2); }
.nav a[aria-current='page'] { background: var(--ink); color: var(--gold); }
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- buttons, fields ---------- */
.btn {
  appearance: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); border: var(--line); border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s; line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--ink); }
.btn.ink { background: var(--ink); color: var(--gold); }
.btn.mint { background: var(--mint); }
.btn.coral { background: var(--coral); }
.btn.ghost { background: var(--card); }
.btn.sm { padding: 6px 14px; font-size: 0.9rem; box-shadow: 0 3px 0 var(--ink); }
.btn.big { padding: 14px 30px; font-size: 1.15rem; }

.field { display: grid; gap: 6px; }
.field > span { font-weight: 800; font-size: 0.95rem; }
.field small { color: var(--ink-2); }
input[type='text'], input[type='password'], input[type='number'], input[type='search'], input[type='datetime-local'], select, textarea {
  width: 100%; background: var(--card); border: var(--line); border-radius: 14px; padding: 10px 14px; font-weight: 600;
}
textarea { resize: vertical; min-height: 70px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }

/* ---------- surfaces ---------- */
.card { background: var(--card); border: var(--line); border-radius: 22px; box-shadow: var(--pop); padding: 22px; }
.card.flat { box-shadow: none; }
.card.dark { background: var(--ink); color: var(--card); }
.card h3 + * { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.88rem; padding: 3px 12px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--card); white-space: nowrap; }
.chip.live { background: var(--coral); }
.chip.live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: blink 1.2s steps(2) infinite; }
.chip.mint { background: var(--mint); }
.chip.gold { background: var(--gold); }
.chip.ink { background: var(--ink); color: var(--gold); }
@keyframes blink { 50% { opacity: 0.2; } }

.avatar { --s: 34px; width: var(--s); height: var(--s); border-radius: 50%; border: 2.5px solid var(--ink); display: inline-grid; place-items: center; font: 800 calc(var(--s) * 0.44)/1 var(--display); flex: none; text-transform: uppercase; }

/* ---------- tickets ---------- */
.ticket {
  --bg: var(--gold); --stub: 210px;
  position: relative; display: grid; grid-template-columns: 1fr var(--stub); background: var(--bg);
  border: var(--line); border-radius: 22px; box-shadow: var(--pop); overflow: hidden;
}
.ticket::before, .ticket::after {
  content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: var(--line);
  right: calc(var(--stub) - 15px); z-index: 2;
}
.ticket::before { top: -16px; }
.ticket::after { bottom: -16px; }
.ticket .main { padding: 26px 28px; display: grid; gap: 12px; align-content: start; }
.ticket .stub {
  border-left: 3px dashed var(--ink); padding: 22px 18px; display: grid; gap: 10px; align-content: center; justify-items: center; text-align: center;
  transform-origin: 0 100%; background: color-mix(in srgb, var(--bg) 80%, white);
}
.ticket .stub .serial { font: 800 1.6rem/1 var(--display); }
.ticket.torn .stub { animation: tear 0.9s cubic-bezier(0.55, 0, 0.85, 0.35) forwards; }
@keyframes tear {
  0% { transform: rotate(0); }
  25% { transform: rotate(-6deg) translateY(-4px); }
  100% { transform: rotate(38deg) translate(140px, 420px); opacity: 0; }
}
.ticket h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.ticket .prize { font: 800 1.4rem/1 var(--display); }
.ticket.mint { --bg: var(--mint-2); }
.ticket.lav { --bg: var(--lav); }
.ticket.coral { --bg: var(--coral-2); }
.ticket.sm { --stub: 120px; box-shadow: var(--pop-sm); border-radius: 18px; }
.ticket.sm .main { padding: 16px 18px; gap: 6px; }
.ticket.sm h3 { font-size: 1.25rem; }
.ticket.sm .stub { padding: 10px; }
.ticket.sm::before, .ticket.sm::after { width: 22px; height: 22px; right: calc(var(--stub) - 11px); }
.ticket.sm::before { top: -12px; } .ticket.sm::after { bottom: -12px; }

.tix { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 26px 22px; }
a.ticket-link { text-decoration: none; display: block; transition: transform 0.15s; }
a.ticket-link:nth-child(odd) { transform: rotate(-0.8deg); }
a.ticket-link:nth-child(even) { transform: rotate(0.7deg); }
a.ticket-link:hover { transform: rotate(0) translateY(-4px); }
.gico { width: 54px; height: 54px; flex: none; }

/* ---------- home ---------- */
.hero { padding: 26px 0 10px; }
.hero h1 { max-width: 14ch; }
.hero .lead { margin-top: 12px; max-width: 46ch; font-size: 1.15rem; color: var(--ink-2); font-weight: 600; }
.hero .ticket { margin-top: 26px; }
.count { font: 800 clamp(2.2rem, 6vw, 3.4rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.section { padding: 34px 0 6px; }
.card > p, .card > ul { max-width: 80ch; }   /* keep text lines readable inside wide cards */
.center-note > p { margin-inline: auto; }   /* centred cards keep their text centred */
.section > h2 { margin-bottom: 18px; }
.winners { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x proximity; }
.win { flex: none; scroll-snap-align: start; background: var(--card); border: var(--line); border-radius: 16px; box-shadow: var(--pop-sm); padding: 12px 16px; display: flex; gap: 12px; align-items: center; min-width: 250px; }
.win b { display: block; }
.giving { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: s; }
.steps li { list-style: none; background: var(--card); border: var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--pop-sm); counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); border: var(--line); font: 800 1.1rem var(--display); margin-bottom: 10px; }
.steps { padding: 0; margin: 0; }
footer { padding: 50px 0 40px; color: var(--ink-2); font-size: 0.9rem; }

/* ---------- forms pages ---------- */
.narrow { width: min(460px, 100% - 40px); margin: 30px auto; }
.err { background: var(--coral-2); border: var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.ok { background: var(--mint-2); border: var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 700; }

/* ---------- discord link ---------- */
.pwmeter { display: grid; gap: 5px; margin-top: 2px; }
.pwmeter .pwbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pwmeter i { height: 9px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--card); transition: background 0.15s; }
.pwmeter[data-level='1'] i:nth-child(1) { background: var(--coral); }
.pwmeter[data-level='2'] i:nth-child(-n+2) { background: #ff9a3c; }
.pwmeter[data-level='3'] i { background: var(--mint); }
.pwmeter[data-level='0'] { display: none; }
.pwlabel { font-weight: 700; }
.pw { position: relative; display: block; }
.pw input { padding-right: 52px; }
.eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.eye:hover, .eye:focus-visible { background: var(--paper-2); color: var(--ink); }
.cmd .btn { color: var(--ink); }   /* the Copy button sits inside gold text, keep its label dark */
.cmd { font-family: ui-monospace, Consolas, monospace; background: var(--ink); color: var(--gold); padding: 12px 16px; border-radius: 14px; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

/* ---------- event page ---------- */
.ev-head { padding: 20px 0 6px; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; padding-bottom: 40px; }
.side { display: grid; gap: 18px; position: sticky; top: 12px; }
.stagebar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.timer { font: 800 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; padding: 6px 14px; border: var(--line); border-radius: 999px; background: var(--gold); min-width: 5.5ch; text-align: center; }
.timer.low { background: var(--coral); animation: blink 0.8s steps(2) infinite; }
.bar { height: 14px; border: var(--line); border-radius: 99px; background: var(--card); overflow: hidden; }
.bar i { display: block; width: 100%; height: 100%; background: var(--mint); transform-origin: left; transition: transform 0.3s linear; }
.plist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 12px 3px 4px; font-weight: 700; font-size: 0.92rem; }
.pl .avatar { --s: 26px; }
.pl.muted-p { opacity: 0.6; text-decoration: line-through; }
.pl .mod { display: inline-flex; gap: 4px; margin-left: 4px; }
.pl .mod button { appearance: none; border: 2px solid var(--ink); background: var(--gold); border-radius: 8px; font-size: 0.72rem; font-weight: 800; padding: 0 6px; cursor: pointer; }
.pl .mod button.k { background: var(--coral); }
.center-note { text-align: center; padding: 34px 10px; }
.center-note h2 { margin-bottom: 8px; }

/* chat */
.chat { display: grid; grid-template-rows: 1fr auto; height: 380px; padding: 0; overflow: hidden; }
.chat .log { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.chat .m b { margin-right: 6px; }
.chat .m.sys { color: var(--ink-2); font-style: italic; }
.chat .m.team { background: var(--mint-2); border-radius: 10px; padding: 2px 8px; }
.chat .m.adm b::after { content: 'host'; margin-left: 6px; font: 800 0.65rem var(--body); background: var(--ink); color: var(--gold); border-radius: 99px; padding: 1px 7px; vertical-align: 2px; }
.chat form { display: flex; gap: 8px; padding: 10px; border-top: var(--line); background: var(--paper); }
.chat input { padding: 8px 12px; }

/* standings + podium */
.rank { display: grid; gap: 8px; }
.rank li { list-style: none; display: grid; grid-template-columns: 36px auto 1fr auto; gap: 10px; align-items: center; background: var(--card); border: var(--line); border-radius: 14px; padding: 8px 14px 8px 10px; }
.rank li.me { background: var(--gold); box-shadow: var(--pop-sm); }
.rank { padding: 0; margin: 0; }
.rank .n { font: 800 1.25rem var(--display); text-align: center; }
.rank .sc { font: 800 1.15rem var(--display); }
.rank .dt { color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
.rank.slide li { animation: rankin 0.45s both; }
@keyframes rankin { from { opacity: 0; transform: translateX(-26px); } }
.mini { display: grid; gap: 6px; }
.mini li { list-style: none; display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.mini { padding: 0; margin: 0; }

.podium-wrap { background: var(--ink); border: var(--line); border-radius: 26px; padding: 26px 18px 0; box-shadow: var(--pop); overflow: hidden; position: relative; }
.podium-wrap h2 { color: var(--gold); text-align: center; margin-bottom: 4px; }
.podium-wrap .sub { text-align: center; color: var(--lav); font-weight: 600; margin-bottom: 8px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; max-width: 620px; margin: 0 auto; min-height: 330px; }
.pod { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--card); opacity: 0; transform: translateY(40px); }
.pod.show { animation: podin 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes podin { to { opacity: 1; transform: none; } }
.pod .nm { font-weight: 800; overflow-wrap: anywhere; }
.pod .pt { color: var(--gold); font: 800 1.1rem var(--display); }
.pod .blk { width: 100%; border: var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; display: grid; place-items: start center; padding-top: 10px; font: 800 2.4rem var(--display); color: var(--ink); }
.pod.p1 .blk { height: 170px; background: var(--gold); }
.pod.p2 .blk { height: 120px; background: var(--lav); }
.pod.p3 .blk { height: 84px; background: var(--coral-2); }
.pod .avatar { --s: 54px; }
.pod.p1 .avatar { --s: 70px; }
.claim { background: var(--mint); border: var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--pop-sm); }
.secret { display: grid; gap: 4px; margin: 6px 0; }
.secret-row { display: inline-flex; align-items: center; gap: 10px; }
.secret .eye { position: static; transform: none; flex: none; width: 40px; height: 40px; border: var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.secret code { margin: 0; display: inline-block; transition: filter 0.15s; }
.secret-code[data-hidden='true'] { filter: blur(9px); user-select: none; -webkit-user-select: none; }
.word-secret { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.secret-word { transition: filter 0.15s; }
.secret-word[data-hidden='true'] { filter: blur(8px); user-select: none; -webkit-user-select: none; }
.eye-sm { position: static; transform: none; flex: none; width: 34px; height: 34px; border: var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.secret-warn { font-weight: 700; font-size: 0.9rem; }
.claim code { font: 800 2rem var(--display); letter-spacing: 0.06em; display: block; margin: 6px 0; }
canvas.confetti { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }

/* wordle */
.wgrid { display: grid; gap: 7px; justify-content: center; margin: 14px auto; }
.wrow { display: grid; gap: 7px; grid-template-columns: repeat(var(--n), var(--t)); }
.wrow { --t: 56px; }
.tile { width: var(--t); height: var(--t); border: max(2px, calc(var(--t) * 0.06)) solid var(--ink); border-radius: calc(var(--t) * 0.2); display: grid; place-items: center; font: 800 calc(var(--t) * 0.55) var(--display); text-transform: uppercase; background: var(--card); }
.tile.g { background: var(--mint); } .tile.y { background: var(--gold); } .tile.b { background: var(--paper-2); color: var(--ink-2); }
.tile.pop { animation: pop 0.12s; }
.tile.flip { animation: flip 0.5s both; }
@keyframes pop { 50% { transform: scale(1.1); } }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kb { display: grid; gap: 6px; justify-items: center; margin-top: 12px; }
.kb div { display: flex; gap: 5px; }
.key { appearance: none; border: var(--line); background: var(--card); border-radius: 10px; min-width: 34px; height: 46px; font-weight: 800; cursor: pointer; text-transform: uppercase; padding: 0 6px; }
.key.g { background: var(--mint); } .key.y { background: var(--gold); } .key.b { background: var(--paper-2); color: var(--ink-2); }
.key.wide { padding: 0 10px; min-width: 56px; font-size: 0.78rem; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.oth { font-size: 0.78rem; font-weight: 700; display: grid; gap: 3px; }
.oth .t { display: grid; gap: 2px; }
.oth .t div { display: flex; gap: 2px; }
.oth i { width: 100%; max-width: 14px; aspect-ratio: 1; border-radius: 3px; background: var(--paper-2); flex: 1; }
.oth i.g { background: var(--mint); } .oth i.y { background: var(--gold); }
.oth.done { color: #0d7a4a; }

/* snake */
.snake-box { position: relative; display: grid; justify-items: center; }
.snake-box canvas { width: min(100%, 560px); aspect-ratio: 1; border: var(--line); border-radius: 18px; background: var(--paper-2); box-shadow: var(--pop); touch-action: none; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.overlay b { font: 800 7rem/1 var(--display); color: var(--ink); text-shadow: 0 5px 0 var(--gold); }
.dpad { display: grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(2, 54px); gap: 6px; margin-top: 16px; justify-content: center; }
.dpad button { appearance: none; border: var(--line); background: var(--gold); border-radius: 14px; font-size: 1.4rem; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.dpad .u { grid-column: 2; } .dpad .l { grid-column: 1; grid-row: 2; } .dpad .d { grid-column: 2; grid-row: 2; } .dpad .r { grid-column: 3; grid-row: 2; }
@media (hover: hover) and (pointer: fine) { .dpad { display: none; } }

/* drawing */
.canvas-wrap { position: relative; }
.canvas-wrap canvas { width: 100%; aspect-ratio: 4 / 3; background: #fff; border: var(--line); border-radius: 18px; box-shadow: var(--pop); touch-action: none; cursor: crosshair; display: block; }
.canvas-wrap canvas.viewer { cursor: default; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: var(--line); cursor: pointer; padding: 0; }
.sw[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--ink); }
#word.mask { display: flex; flex-wrap: wrap; gap: 0.15em 0.9em; letter-spacing: 0; }
.mword { display: inline-flex; gap: 0.18em; white-space: nowrap; }
.mch { display: inline-block; min-width: 0.55em; text-align: center; }
.mask { font: 800 clamp(1.6rem, 4vw, 2.4rem)/1 var(--display); letter-spacing: 0.18em; overflow-wrap: anywhere; }
.pen-banner { background: var(--mint); border: var(--line); border-radius: 14px; padding: 8px 14px; font-weight: 800; }

/* giveaway winner roll */
.parts { display: grid; gap: 6px; }
.parts li { list-style: none; display: flex; justify-content: space-between; border-bottom: 2px dashed var(--paper-2); padding-bottom: 4px; font-weight: 700; }
.parts { padding: 0; margin: 0; }
.big-n { font: 800 3.2rem/1 var(--display); }
.roller { position: relative; overflow: hidden; border: var(--line); border-radius: 18px; background: var(--ink); height: 118px; box-shadow: var(--pop); }
.roller .strip { display: flex; gap: 12px; padding: 14px 12px; will-change: transform; }
.roller .c { flex: none; width: 150px; height: 90px; border: var(--line); border-radius: 14px; background: var(--card); display: grid; place-items: center; gap: 2px; text-align: center; font-weight: 800; align-content: center; padding: 4px; overflow: hidden; }
.roller .c span { font-size: 0.88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.roller .pin { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--coral); z-index: 2; }
.roller .pin::before { content: ''; position: absolute; top: -2px; left: -9px; border: 11px solid transparent; border-top: 14px solid var(--coral); }
.roller.won .c.win { background: var(--gold); }

/* admin */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 20px; }
.tabs a { text-decoration: none; font-weight: 800; padding: 8px 18px; border-radius: 999px; border: var(--line); background: var(--card); }
.tabs a[aria-current='page'] { background: var(--ink); color: var(--gold); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
table.t th { text-align: left; font-weight: 800; font-size: 0.9rem; color: var(--ink-2); padding: 0 12px; }
table.t td { background: var(--card); padding: 10px 12px; border-block: var(--line); }
table.t td:first-child { border-left: var(--line); border-radius: 14px 0 0 14px; }
table.t td:last-child { border-right: var(--line); border-radius: 0 14px 14px 0; }
.scroll-x { overflow-x: auto; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* split between winners: one box per place */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 10px; }
.splitbox { display: grid; gap: 4px; justify-items: stretch; }
.splitbox > span { font: 800 1.15rem/1 var(--display); text-align: center; }
.splitbox input { text-align: center; }
.splitbox-gap { font: 800 1.15rem/1 var(--display); visibility: hidden; }   /* keeps the prize box level with the split boxes */
.help { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--card); font: 800 0.8rem/1 var(--body); cursor: help; vertical-align: 1px; }
.help:hover, .help:focus-visible { background: var(--gold); }
.help::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-30%); width: min(300px, 70vw); padding: 10px 12px; border: var(--line); border-radius: 12px; background: var(--ink); color: var(--card); font: 600 0.85rem/1.4 var(--body); text-align: left; box-shadow: var(--pop); opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 5; }
.help:hover::after, .help:focus-visible::after { opacity: 1; }
.rounds .rd { background: var(--paper); border: var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 10px; grid-template-columns: 2fr 2fr 1fr 1fr auto; align-items: end; }
.rounds .rd + .rd { margin-top: 10px; }
.group { background: var(--card); border: var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--pop-sm); }
.group + .group { margin-top: 16px; }
.host { background: var(--ink); color: var(--card); border: var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--pop); }
.host h3 { color: var(--gold); }
.host .row { margin-top: 12px; }
.host select { width: auto; background: var(--card); color: var(--ink); }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; width: min(440px, 100% - 30px); }
.toast { background: var(--ink); color: var(--gold); font-weight: 800; padding: 11px 18px; border-radius: 14px; border: var(--line); box-shadow: var(--pop-sm); animation: pop 0.2s; }
.toast.bad { background: var(--coral); color: var(--ink); }

@media (max-width: 900px) {
  .ev-layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .rounds .rd { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket::before, .ticket::after { display: none; }
  .ticket .stub { border-left: 0; border-top: 3px dashed var(--ink); grid-auto-flow: column; justify-content: space-between; }
  .ticket.sm .stub { padding: 8px 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .tix { grid-template-columns: 1fr; }
  .overlay b { font-size: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  a.ticket-link:nth-child(odd), a.ticket-link:nth-child(even) { transform: none; }
}

/* buttons inside the dark host panel keep ink text */
.host .btn { color: var(--ink); }
.host .btn.ink { color: var(--gold); }

/* keyboard fits any phone width */
.kb { width: 100%; }
.kb div { width: 100%; justify-content: center; gap: 4px; }
.key { min-width: 0; flex: 1 1 0; max-width: 44px; padding: 0; }
.key.wide { flex: 1.7 1 0; max-width: 72px; padding: 0 4px; font-size: 0.8rem; }
.pod .nm { font-size: 0.9rem; }
.rounds .rd.rd3 { grid-template-columns: 3fr 2fr 1fr auto; }
@media (max-width: 900px) { .rounds .rd, .rounds .rd.rd3 { grid-template-columns: 1fr 1fr; } .rounds .rd button { grid-column: 1 / -1; } }

.ticket.sky { --bg: #bfe3ff; }

/* past winners */
.hist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.hist li { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--card); border: var(--line); border-radius: 18px; box-shadow: var(--pop-sm); padding: 12px 18px; }
.hist .hp { font: 800 1.35rem/1.1 var(--display); min-width: 11ch; }
.hist .hw { display: flex; gap: 12px; align-items: center; flex: 1 1 220px; }
.hist .hw div b, .hist .hw div span { display: block; }

/* landing page */
.land-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; padding: 34px 0 10px; }
.land-hero .lead { margin-top: 14px; max-width: 40ch; font-size: 1.2rem; color: var(--ink-2); font-weight: 600; }
.land-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 10ch; }
.land-hero .ticket { --stub: 170px; }
.land-hero .ticket h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.land-hero .ticket .count { font-size: 2.2rem; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; background: var(--ink); color: var(--card); border: var(--line); border-radius: 22px; box-shadow: var(--pop); overflow: hidden; }
.proof > div { padding: 18px 22px; display: grid; gap: 2px; }
.proof > div + div { border-left: 3px dashed var(--lav); }
.proof b { font: 800 clamp(1.8rem, 4vw, 2.6rem)/1.05 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.proof > div > span { color: var(--lav); font-weight: 600; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.faq details { background: var(--card); border: var(--line); border-radius: 16px; padding: 4px 18px; box-shadow: var(--pop-sm); }
.faq summary { cursor: pointer; font-weight: 800; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 800 1.4rem/1 var(--display); }
.faq details[open] summary::after { content: '-'; }
.faq p { padding: 0 0 14px; color: var(--ink-2); max-width: 62ch; }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--gold); border: var(--line); border-radius: 26px; box-shadow: var(--pop); padding: 28px 32px; }
.cta-band h2 { margin-bottom: 6px; }
.cta-band p { max-width: 44ch; font-weight: 600; }
@media (max-width: 900px) {
  .land-hero { grid-template-columns: 1fr; gap: 26px; }
  .land-hero h1 { max-width: none; }
}
@media (max-width: 640px) {
  .proof { grid-template-columns: 1fr; }
  .proof > div + div { border-left: 0; border-top: 3px dashed var(--lav); }
  .cta-band { padding: 22px; }
}

.land-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); max-width: 11ch; }

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

/* sort buttons on the past winners page */
.sortbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.sortbtn { cursor: pointer; font: inherit; font-weight: 800; font-size: 0.88rem; padding: 5px 14px; transition: background 0.1s; }
/* the time choice: one line when it fits, the buttons share the width evenly */
.timepills { display: flex; flex-wrap: wrap; gap: 8px; }
.timepills .sortbtn { flex: 1 1 auto; justify-content: center; padding: 5px 10px; white-space: nowrap; }
.sortbtn:hover { background: var(--gold-2); }
.sortbtn[aria-pressed='true'] { background: var(--ink); color: var(--gold); }
.sortbar + .hist { margin-top: 14px; }