/* TicketCheck: "teal and mango" — deep teal, mango orange and coral. Green is kept for "Won" only. */
:root {
  --bg: #eef4f3; --bg-2: #dcebea; --ink: #0b2730; --muted: #577078; --line: #cfe0df;
  --card: #fbfefe; --deep: #062f3b; --deep-2: #0b6e7f; --chalk: #eef4f3;
  --gold: #ff9f45; --gold-ink: #2a1400; --red: #ef5b3b; --red-soft: rgba(239, 91, 59, .12);
  --green: #12a37a; --green-ink: #0b7a5a; --track: rgba(11, 39, 48, .1);
  --focus: #0b6e7f; --danger: #c2412a; --on-danger: #fff; --hover: #0b6e7f;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #061a20; --bg-2: #0d2d36; --ink: #e6f3f2; --muted: #8fb0b4; --line: #1b3d46;
    --card: #0b2830; --deep: #062f3b; --deep-2: #0b6e7f; --chalk: #e6f3f2;
    --gold: #ffa94d; --gold-ink: #2a1400; --red: #ff7a5c; --red-soft: rgba(255, 122, 92, .14);
    --green: #2fd6a0; --green-ink: #2fd6a0; --track: rgba(230, 243, 242, .1);
    --focus: #ffa94d; --danger: #ff7a5c; --on-danger: #2a1400; --hover: #ffa94d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg);
  min-height: 100vh;
}
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
a:hover { color: var(--hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
header a:focus-visible, header button:focus-visible { outline-color: var(--chalk); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3, .brand, .big, .ring-num { font-family: var(--display); letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1.05; margin: .4em 0 .3em; font-weight: 800; }
h2 { font-size: 1.3rem; margin: 2em 0 .6em; font-weight: 700; }
.wrap, header .bar, main, .foot { max-width: 760px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Header and nav */
header {
  color: var(--chalk); position: relative;
  background: radial-gradient(ellipse 80% 140% at 85% 0%, var(--deep-2), transparent 60%), var(--deep);
}
header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--gold) 60%, var(--red));
}
header .bar { padding-top: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; color: var(--chalk); text-decoration: none; }
.brand b { color: var(--gold); font-weight: 800; }
.brand:hover { color: var(--chalk); }
.logo { width: 34px; height: 24px; flex: none; }
/* Glass pill nav: one amber indicator slides behind the active tab (the script in base.html moves it, also across page loads) */
header .tabs {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  width: calc(100% - 32px); max-width: 728px; margin: 16px auto 16px; padding: 4px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 9999px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
}
.tabs a {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 6px; border-radius: 9999px; text-decoration: none;
  font: 600 .9rem/1.1 var(--display); color: rgba(238, 244, 243, .75); text-align: center;
  transition: color .25s;
}
.tabs a:hover { color: var(--chalk); }
.tabs svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs .short { display: none; }
.tabs a.locked svg { stroke: var(--gold); }
header .tabs a:focus-visible { outline: 3px solid var(--chalk); outline-offset: -3px; }
/* active tab: amber with dark ink; with no script this background is the whole effect */
.tabs a[aria-current] {
  font-weight: 800; color: var(--gold-ink);
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 75%, var(--red)));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--gold) 40%, transparent);
}
header .tabs a[aria-current]:focus-visible { outline-color: var(--chalk); outline-offset: 1px; }
/* script on: the sliding indicator replaces the per-tab background */
.tabs.js a[aria-current] { background: none; box-shadow: none; }
.tabs .pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9999px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 75%, var(--red)));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--gold) 40%, transparent);
}
.tabs.anim .pill { transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55), width .5s cubic-bezier(.68, -.55, .265, 1.55); }
.tabs .pill[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tabs.anim .pill { transition: none; } .tabs a { transition: none; } }
/* six items: icon over label so they fit */
.tabs.many a { flex-direction: column; gap: 3px; font-size: .8rem; padding: 7px 2px; border-radius: 28px; }
.tabs.many .pill { border-radius: 28px; }
/* phones: a floating glass pill fixed to the bottom, short labels under the icons */
@media (max-width: 640px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  header .tabs {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    width: auto; max-width: none; margin: 0;
    background: color-mix(in srgb, var(--deep) 82%, transparent); border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .55);
  }
  .tabs a, .tabs.many a {
    flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 1px; font-size: .68rem; line-height: 1.1; border-radius: 26px;
  }
  .tabs .pill, .tabs.many .pill { border-radius: 26px; }
  .tabs svg { width: 22px; height: 22px; }
  .tabs .full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs .short { display: block; }
}

main { padding-top: 8px; padding-bottom: 32px; }
.lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 18px; max-width: 34em; }

/* The code slot */
.code-form {
  display: flex; gap: 8px; padding: 8px; margin: 12px 0 8px;
  background: var(--card); border: 2px dashed var(--line); border-radius: 16px;
}
.code-form:focus-within { border-color: var(--focus); border-style: solid; }
input {
  flex: 1; min-width: 0; padding: 12px 10px; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 700 1.5rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
input::placeholder { color: var(--muted); opacity: .55; letter-spacing: .1em; font-size: 1.1rem; }
button, .btn {
  font: 700 1rem/1 var(--display); padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--gold); color: var(--gold-ink); white-space: nowrap;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
.error { color: var(--danger); font-weight: 700; background: var(--red-soft); padding: 10px 14px; border-radius: 12px; }

/* Hero */
.hero h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); max-width: 12ch; }
.lead em { font-style: normal; color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gold) 45%, transparent) 62%); }

/* The code box is a betting slip: notches, barcode, dashed tear line */
.slip {
  --notch: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
           radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  margin: 18px 0 10px; padding: 14px 18px 14px 22px; background: var(--card);
  border-radius: 14px; -webkit-mask: var(--notch); mask: var(--notch);
  transform: rotate(-.6deg); transition: transform .25s;
}
.slip:focus-within { transform: rotate(0) scale(1.01); }
.slip-barcode {
  align-self: stretch; min-height: 54px; border-radius: 2px; opacity: .8;
  background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px);
}
.slip-field { display: grid; gap: 2px; border-left: 2px dashed var(--line); padding-left: 14px; }
.slip-label { font: 700 .8rem/1 var(--display); color: var(--muted); }
.slip input { padding: 6px 0; font-size: 1.7rem; }
@media (max-width: 520px) {
  .slip { grid-template-columns: 22px 1fr; padding-right: 14px; }
  .slip button { grid-column: 1 / -1; width: 100%; }
}

.steps { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.steps li { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: .92rem; }
.steps b, .join-steps b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 800 1.1rem/1 var(--display); color: var(--gold-ink); background: linear-gradient(135deg, var(--gold), var(--red)); }

/* Verdict: 100 people, a rubber stamp */
.verdict {
  position: relative; overflow: hidden; margin: 22px 0; padding: 22px 20px; border-radius: 22px; color: var(--chalk);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255, 159, 69, .18), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(239, 91, 59, .16), transparent 70%),
    linear-gradient(160deg, var(--deep-2), var(--deep));
  box-shadow: 0 24px 50px -28px rgba(6, 47, 59, .7);
}
.verdict-title { margin: 0; padding-right: 120px; flex-wrap: wrap; font-size: .95rem; font-weight: 700; opacity: .85; display: flex; align-items: baseline; gap: 10px; }
.ring-num { font-size: clamp(3.2rem, 14vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--gold); text-transform: none; opacity: 1; }
.odds-in { margin: 4px 0 16px; font: 800 1.35rem/1.2 var(--display); }
.stamp {
  position: absolute; top: 18px; right: 16px; padding: 6px 12px; border: 3px solid var(--red); border-radius: 8px;
  color: var(--danger); font: 800 1.3rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-12deg); top: 26px; box-shadow: inset 0 0 0 2px rgba(239, 91, 59, .35);
  animation: stamp .45s .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes stamp { from { transform: rotate(-12deg) scale(2.6); opacity: 0; } }
.crowd { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; max-width: 460px; }
.crowd i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.crowd i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 159, 69, .55); animation: pop .3s calc(var(--i) * 12ms) both; }
@keyframes pop { from { transform: scale(0); } }
.crowd-note { font-size: .9rem; opacity: .85; margin: 10px 0 18px; }
.crowd-note b { color: var(--gold); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact { background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 10px 12px; }
.fact .label { font-size: .82rem; opacity: .8; }
.fact .big { font-size: 1.4rem; font-weight: 800; }
.fact .sub { font-size: .8rem; opacity: .8; }
.cutbar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); margin-top: 6px; overflow: hidden; }
.cutbar i { display: block; height: 100%; background: var(--red); border-radius: 3px; }

.note { color: var(--muted); font-size: .92rem; margin: 6px 0; padding-left: 14px; border-left: 3px solid var(--gold); }

/* The games as a chain: each link must hold */
.chain-title { display: flex; flex-direction: column; gap: 2px; }
.chain-title small { font: 500 .88rem/1.3 system-ui, sans-serif; color: var(--muted); letter-spacing: 0; }
.chain { list-style: none; padding: 0; margin: 10px 0 0; }
.link { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; padding-bottom: 16px; }
.link:not(:last-child)::before {
  content: ""; position: absolute; left: 29px; top: 56px; bottom: -2px; width: 4px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--muted) 0 8px, transparent 8px 12px); opacity: .45;
}
.node {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  font: 800 .95rem/1 var(--display); color: var(--ink);
  background: conic-gradient(var(--green) var(--c, 0%), var(--track) 0); position: relative;
}
.node::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg); z-index: 0; }
.node > span { position: relative; }
.link-body { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.link .match { font-weight: 700; }
.link .pick { color: var(--muted); font-size: .9rem; }
.link .at { font-family: var(--mono); font-size: .82rem; margin-left: 6px; }
.link .fair { color: var(--muted); font-size: .82rem; }
.tag {
  display: inline-block; font: 700 .72rem/1 var(--display);
  padding: 4px 7px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; background: var(--track); color: var(--muted);
}
.link.weakest .node { background: conic-gradient(var(--red) var(--c, 0%), var(--track) 0); color: var(--danger); animation: wobble 2.4s 1.2s ease-in-out infinite; }
.link.weakest .link-body { border-color: var(--red); background: linear-gradient(var(--red-soft), var(--red-soft)), var(--card); }
.link.weakest .tag { background: var(--danger); color: var(--on-danger); }
.link.weakest::before { background: repeating-linear-gradient(180deg, var(--red) 0 5px, transparent 5px 14px) !important; opacity: .8 !important; }
.link.off .node { color: var(--muted); }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-8deg); } 20% { transform: rotate(6deg); } 30% { transform: rotate(0); } }

/* Free tickets: paper tickets on a rack */
.warning {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--red);
  border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: .95rem;
}
.ticket-rack { display: grid; gap: 26px; margin: 22px 0; filter: drop-shadow(0 12px 16px rgba(6, 47, 59, .18)); }
.slip-wrap { filter: drop-shadow(0 10px 16px rgba(6, 47, 59, .16)); }
.ticket {
  --edge: 10px;
  position: relative; background: var(--card); border-radius: 16px 16px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px var(--edge) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px var(--edge) repeat-x;
  padding-bottom: var(--edge); transition: transform .25s;
}
.ticket:nth-child(odd) { transform: rotate(-.5deg); }
.ticket:nth-child(even) { transform: rotate(.5deg); }
.ticket:hover { transform: rotate(0) translateY(-3px); }
.stub {
  position: relative; padding: 16px 18px 18px; border-radius: 16px 16px 0 0; color: var(--chalk);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 159, 69, .2), transparent 60%),
    linear-gradient(135deg, var(--deep-2), var(--deep));
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.stub::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--card) 0 6px, transparent 6px 12px);
}
.size { font: 800 1rem/1 var(--display); display: flex; align-items: center; gap: 8px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.code { grid-column: 1 / -1; font: 800 clamp(2rem, 10vw, 2.8rem)/1 var(--mono); letter-spacing: .14em; word-break: break-all; }
.barcode { grid-column: 1; display: flex; gap: 2px; height: 26px; align-items: stretch; opacity: .85; }
.barcode i { width: calc(var(--w) * 2px); background: var(--chalk); border-radius: 1px; }
.copy { grid-column: 2; grid-row: 1; font-size: .8rem; padding: 8px 12px; border-radius: 999px; }
.ticket-body { padding: 14px 18px 12px; }
.ticket-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.ticket-stats div { background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: .75rem; color: var(--muted); }
.ticket-stats strong { display: block; font: 800 1.2rem/1.2 var(--display); color: var(--ink); }
.low-chance { display: inline-block; color: var(--danger); font: 800 .85rem/1.3 var(--display); margin: 10px 0 0; padding: 6px 10px; border: 2px solid var(--danger); border-radius: 6px; transform: rotate(-2deg); }
.games { list-style: none; margin: 10px 0 0; padding: 0; font-size: .88rem; }
.games li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.games .m { font-weight: 700; }
.games .p { color: var(--muted); }
.games .n { grid-row: 1 / 3; grid-column: 2; text-align: right; font: 600 .82rem/1.35 var(--mono); align-self: center; }
.games .when { color: var(--muted); display: block; }

/* Record: what we said against what happened */
.calib { display: grid; gap: 12px; margin: 10px 0 14px; }
.calib-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; font-size: .85rem; }
.calib-row .who { font-weight: 700; }
.calib-bars { display: grid; gap: 4px; }
.calib-bars div { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.calib-bars i { display: block; height: 100%; border-radius: 5px; }
.calib-bars .said i { background: var(--gold); }
.calib-bars .won i { background: var(--green); }
.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .said::before { background: var(--gold); }
.legend .won::before { background: var(--green); }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font: 700 .8rem/1.2 var(--display); color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.mono { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--track); color: var(--muted); }
.chip.won { background: var(--green); color: var(--gold-ink); }
.chip.lost { background: var(--red-soft); color: var(--danger); }
.pager { display: flex; justify-content: space-between; margin: 14px 0; }
@media (max-width: 440px) {
  table { font-size: .8rem; }
  th, td { padding: 9px 5px; }
  th:first-child, td:first-child { padding-left: 9px; }
  th:last-child, td:last-child { padding-right: 9px; }
  td.mono { letter-spacing: 0; overflow-wrap: anywhere; }
  .col-games { display: none; }
  .chip { padding: 2px 7px; font-size: .72rem; }
  .ticket-stats { grid-template-columns: .8fr .8fr 1.4fr; gap: 6px; }
  .ticket-stats div { padding: 8px 8px; }
  .ticket-stats strong { font-size: 1.1rem; }
  .ticket-body { padding-left: 14px; padding-right: 14px; }
  .stub { padding-left: 14px; padding-right: 14px; }
}

/* Play safe */
.safe-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 16px; }
.safe-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.safe-card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.safe-card ul { margin: 0; padding-left: 18px; }
.safe-card li { margin: 4px 0; }
.safe-card.help { border-color: var(--gold); }

.safety { font-size: .85rem; color: var(--muted); margin-top: 24px; text-align: center; }
.empty { text-align: center; padding: 28px 16px; color: var(--muted); background: var(--card); border: 2px dashed var(--line); border-radius: 16px; }

footer { color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); padding-top: 14px; padding-bottom: 28px; }
footer p { margin: 4px 0; }
footer .age { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--red); color: var(--danger); font-weight: 800; font-size: .72rem; margin-right: 8px; vertical-align: middle; }

/* Admin: four folder tabs, then plain pages. The voucher and the receipt are the two keepsakes. */
.admin main { max-width: 640px; padding-top: 8px; padding-bottom: 40px; }
.admin h2 { margin: 1.6em 0 .5em; }
.admin header .bar + .bar { padding-top: 14px; display: block; }
.admin .brand { font-size: 1.1rem; display: inline; }
.atabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.atabs::-webkit-scrollbar { display: none; }
.atabs a {
  position: relative; flex: 1 0 auto; text-align: center; white-space: nowrap; text-decoration: none;
  padding: 11px 14px 10px; border-radius: 14px 14px 0 0; font: 700 .92rem/1.1 var(--display);
  color: rgba(238, 244, 243, .68); background: rgba(255, 255, 255, .05);
}
.atabs a:hover { color: var(--chalk); background: rgba(255, 255, 255, .1); }
.atabs a[aria-current] { background: var(--bg); color: var(--ink); }
.atabs a[aria-current]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}
.badge { display: inline-block; min-width: 1.35em; padding: 0 6px; margin-left: 3px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font: 800 .75rem/1.5 var(--mono); text-align: center; }
.admin .who { margin: 0; }
.admin form.stack { display: grid; gap: 12px; margin: 12px 0; max-width: 26em; }
.admin form.stack label { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; }
.admin input[type=text], .admin input[type=email], .admin input[type=number], .admin input[type=password] {
  width: 100%; padding: 11px 12px; background: var(--card); color: var(--ink); border: 2px solid var(--line);
  border-radius: 12px; font: 500 1rem/1.3 system-ui, sans-serif; letter-spacing: 0; text-transform: none;
}
.admin input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.admin fieldset.kind { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.admin fieldset.kind legend { font-weight: 700; font-size: .92rem; padding: 0 0 4px; }
.admin label.opt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 700; font-size: .92rem; }
.admin label.opt input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.admin .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin .alt-btn { background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.admin .small-btn { padding: 6px 10px; font-size: .8rem; }
.admin details.confirm summary { list-style: none; cursor: pointer; display: inline-block; padding: 6px 2px; color: var(--danger); font-weight: 700; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.admin details.confirm summary::-webkit-details-marker { display: none; }
.admin details.confirm[open] summary { color: var(--muted); }
.admin details.confirm form { min-width: 0; }
.admin details.confirm p { margin: 4px 0 8px; font-size: .82rem; color: var(--muted); }
.danger-btn { background: var(--danger); color: var(--on-danger); padding: 8px 12px; font-size: .82rem; }
.admin td form { margin: 0; display: block; }
.admin .err { color: var(--danger); font-weight: 700; }
.admin td.email { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.admin th, .admin td { padding: 9px 6px; }
@media (max-width: 440px) {
  .atabs a { padding: 11px 9px 10px; font-size: .84rem; }
  .admin .col-created { display: none; }
}
.admin .small { color: var(--muted); font-size: .85rem; margin: 6px 0; }
.admin .signals { max-width: 52ch; }
.pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pill.paid { background: rgba(18, 163, 122, .14); color: var(--green-ink); }
.pill.free { background: rgba(255, 159, 69, .16); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.pill.ending { background: var(--red-soft); color: var(--danger); }

/* Today */
.day-label { margin: 18px 0 0; color: var(--muted); font-size: .9rem; }
.sentence { font-size: clamp(1.6rem, 6.4vw, 2.3rem); margin: .1em 0 .3em; }
.deltas { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0 0 14px; font-weight: 700; }
.delta.up { color: var(--green-ink); }
.delta.down { color: var(--danger); }
.delta.same { color: var(--muted); font-weight: 500; }
.bars { list-style: none; margin: 16px 0 0; padding: 0; display: flex; align-items: flex-end; gap: 4px; height: 96px; }
.bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--deep-2); opacity: .8; }
.bar.today i { background: var(--gold); opacity: 1; }
@media (prefers-color-scheme: dark) { .bar i { background: #2f93a5; } .bar.today i { background: var(--gold); } }

/* Voucher: a tear-off stub to screenshot for WhatsApp */
.voucher {
  position: relative; max-width: 340px; margin: 18px 0 6px; padding: 18px 20px 16px; border-radius: 16px;
  color: var(--chalk); background: radial-gradient(ellipse 90% 120% at 100% 0%, var(--deep-2), transparent 60%), var(--deep);
}
.voucher p { margin: 0; }
.v-top { font: 700 .82rem/1.2 var(--display); opacity: .75; }
.voucher .newcode { font-size: clamp(1.35rem, 7.4vw, 1.75rem); letter-spacing: .08em; color: var(--chalk); margin: 10px 0 14px; }
.voucher .perf { position: relative; border-top: 2px dashed rgba(238, 244, 243, .4); margin: 0 -20px 14px; }
.voucher .perf::before, .voucher .perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.voucher .perf::before { left: -10px; }
.voucher .perf::after { right: -10px; }
.v-for { font-weight: 700; overflow-wrap: anywhere; }
.v-url { font-size: .82rem; opacity: .75; margin-top: 4px !important; overflow-wrap: anywhere; }

/* Payments: receipt roll */
.monthnav { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 10px; font-weight: 700; }
.receipt { max-width: 380px; padding: 16px 16px 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font: 500 .85rem/1.6 var(--mono); }
.receipt p, .receipt ul { margin: 0; }
.receipt ul { list-style: none; padding: 0; }
.receipt li, .r-total { display: flex; align-items: baseline; gap: 6px; }
.r-head { font-weight: 800; margin-bottom: 8px !important; }
.r-date { flex: none; color: var(--muted); }
.r-who { min-width: 0; overflow-wrap: anywhere; }
.r-dots { flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--muted); transform: translateY(-3px); }
.r-amt { flex: none; font-weight: 800; }
.r-rule { border-top: 2px dashed var(--line); margin: 10px 0; }
.r-total { font-weight: 800; }
.r-none { color: var(--muted); }

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

@media (max-width: 520px) {
  th, td { padding: 9px 7px; }
  td:first-child { white-space: nowrap; }
}

/* Account bar and sign-up / log-in pages */
header .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.who { display: flex; align-items: center; gap: 10px; color: var(--chalk); font-size: .9rem; min-width: 0; }
.who a { color: var(--chalk); font-weight: 700; }
.who form { margin: 0; }
.who-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; opacity: .75; }
.linkbtn { background: none; color: var(--chalk); padding: 0; font: 700 .9rem/1.2 system-ui, sans-serif; text-decoration: underline; text-decoration-skip-ink: none; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.auth { max-width: 420px; margin-bottom: 28px; }
.auth form { display: grid; gap: 14px; margin: 14px 0; }
.auth label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.auth small { font-weight: 400; color: var(--muted); }
.auth input[type=email], .auth input[type=password], .auth input[type=date] {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font: 500 1rem/1.3 system-ui, sans-serif; letter-spacing: 0; text-transform: none; color-scheme: light dark;
}
.auth input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.auth label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.auth label.check input { flex: none; width: 20px; height: 20px; padding: 0; accent-color: var(--gold); }
.auth button { width: 100%; }
.auth .alt { color: var(--muted); font-size: .92rem; margin: 6px 0; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.cta .btn { text-decoration: none; display: inline-block; }
.cta .alt-btn { background: var(--card); color: var(--ink); border: 2px solid var(--line); }
@media (max-width: 520px) { .who-mail { display: none; } }

/* membership */
.newcode { font: 800 clamp(1.6rem, 8vw, 2.4rem)/1.2 var(--mono); letter-spacing: .12em; word-break: break-all; margin: 8px 0 16px; }
.admin td form { margin: 0; }
.member-status { font-weight: 700; }

.track { margin: 14px 0; }

.code-big { font-family: var(--mono); letter-spacing: .08em; font-size: 1.9rem; overflow-wrap: anywhere; }

/* Account stub in the header: a cloakroom ticket. Logged out it is torn in two
   (Log in | Sign up); logged in the punched hole holds the initial and a slip drops down. */
.acct { position: relative; flex: none; font-family: var(--display); }
.acct-out { display: flex; align-items: stretch; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .28)); }
.acct-out a { text-decoration: none; font-weight: 800; font-size: .95rem; line-height: 1.1; padding: 9px 15px; }
.acct-in {
  background: var(--gold); color: var(--gold-ink); border-radius: 10px 0 0 10px;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
}
.acct-up {
  background: rgba(255, 255, 255, .1); color: var(--chalk); border-radius: 0 10px 10px 0;
  border-left: 2px dashed rgba(255, 159, 69, .6);
  -webkit-mask: radial-gradient(circle at 0 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
}
.acct-in:hover { color: var(--gold-ink); background: #ffb36b; }
.acct-up:hover { color: var(--chalk); background: rgba(255, 255, 255, .18); }
.acct-out a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--chalk); }

details.acct summary {
  list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--gold); color: var(--gold-ink); border-radius: 10px;
  padding: 5px 13px 5px 5px; font-weight: 800; font-size: .88rem; line-height: 1.1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
details.acct summary::-webkit-details-marker { display: none; }
details.acct summary:hover { background: #ffb36b; }
details.acct summary:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }
.acct-hole {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--deep); color: var(--gold); font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}
.acct-status { border-left: 2px dashed rgba(42, 20, 0, .35); padding-left: 10px; white-space: nowrap; }

.acct-slip {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: 232px;
  background: var(--card); color: var(--ink); border-radius: 12px; padding: 12px 16px 0;
  font-family: system-ui, sans-serif; box-shadow: 0 16px 34px rgba(3, 24, 31, .38);
  transform-origin: top right; animation: acct-drop .16s ease-out;
}
.acct-slip::before {
  content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: var(--card); transform: rotate(45deg); border-radius: 2px;
}
.acct-mail { margin: 0 0 6px; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.acct-slip a { display: block; padding: 7px 0; color: var(--ink); font-weight: 700; text-decoration: none; }
.acct-slip a:hover { color: var(--deep-2); }
.acct-tear { margin: 8px -16px 0; border-top: 2px dashed var(--line); }
.acct-tear button {
  width: 100%; background: none; color: var(--danger); cursor: pointer; text-align: left;
  font: 800 .95rem/1.2 var(--display); padding: 12px 16px 13px; border-radius: 0 0 12px 12px;
}
.acct-tear button:hover { background: var(--red-soft); }
.acct-tear button:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@keyframes acct-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acct-slip { animation: none; } }
@media (max-width: 420px) {
  .acct-out a { padding: 8px 9px; font-size: .84rem; }
  .brand { font-size: 1.15rem; gap: 8px; }
  .acct-status { white-space: normal; max-width: 5.6rem; font-size: .78rem; }
}

/* Home: free account hint under the code slip */
.free-hint { margin: 4px 4px 0; color: var(--muted); font-size: .95rem; }
.free-hint a { white-space: nowrap; }

/* Safer swap card (check result): the weakest pick crossed out, the safer one beside it */
.swap-card { position: relative; margin: 30px 0 16px; padding: 24px 16px 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--gold); box-shadow: 0 16px 30px -22px rgba(6, 47, 59, .6); }
.swap-head { margin: 0 0 12px; font-size: .92rem; font-weight: 600; color: var(--muted); }
.swap-head b { position: absolute; top: -17px; left: 14px; background: var(--gold); color: var(--gold-ink); font: 800 1rem/1 var(--display); padding: 8px 12px; border-radius: 10px; }
.swap-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 6px; }
.swap-was, .swap-new { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 12px; min-width: 0; overflow-wrap: anywhere; }
.swap-was { background: var(--red-soft); }
.swap-new { background: color-mix(in srgb, var(--green) 16%, transparent); box-shadow: inset 0 0 0 2px var(--green); }
.swap-was s { color: var(--muted); text-decoration-color: var(--danger); text-decoration-thickness: 2px; font-weight: 600; }
.swap-new strong { font: 800 1.05rem/1.2 var(--display); }
.swap-was i, .swap-new i { font: 600 .82rem var(--mono); color: var(--muted); font-style: normal; }
.swap-label { font: 600 .78rem/1.2 var(--display); color: var(--muted); }
.swap-arrow { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--deep); }
.swap-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.swap-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.swap-nums p { margin: 2px 0 0; font: 800 1.7rem/1 var(--display); letter-spacing: -.03em; }
.swap-nums s { font-size: 1rem; font-weight: 600; color: var(--muted); text-decoration-color: var(--danger); }
.swap-nums s::after { content: " \2192"; text-decoration: none; display: inline-block; }
.swap-dots, .join-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 340px; }
.swap-dots i, .join-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--track); }
.swap-dots i.on, .join-dots i.on { background: var(--gold); }
.swap-dots i.gain, .join-dots i.gain { background: var(--green); }
.swap-note { margin: 10px 0 0; font-size: .86rem; color: var(--muted); }
.swap-locked { padding-bottom: 18px; }
.swap-ghost { filter: blur(5px); opacity: .55; user-select: none; }
.swap-bone { display: block; height: 14px; margin: 4px 0; border-radius: 7px; background: var(--ink); opacity: .3; }
.swap-locked .swap-nums { margin-top: 18px; }
.swap-lock { position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--deep); color: var(--chalk); font-weight: 700; font-size: .95rem; box-shadow: 0 10px 24px rgba(3, 24, 31, .35); }
.swap-lock svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swap-lock a { color: var(--chalk); }
.swap-lock a:hover { color: var(--gold); }
.swap-lock a:focus-visible { outline-color: var(--chalk); }
.fair-note { margin-top: 2px; }

/* My tickets: free-ticket receipts with a stamp for the result */
.mt-rack { margin-top: 18px; }
.mt-day { grid-column: 2; grid-row: 1; font: 700 .9rem/1 var(--mono); opacity: .85; }
.mt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-stats div { background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: .8rem; color: var(--muted); }
.mt-stats strong { display: block; font: 800 1.2rem/1.2 var(--display); color: var(--ink); }
.mt-result { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mt-result p { margin: 0; font-size: .9rem; overflow-wrap: anywhere; min-width: 0; }
.mt-stamp, .join-stamp {
  flex: none; padding: 5px 10px; border: 3px solid currentColor; border-radius: 8px; transform: rotate(-8deg);
  font: 800 1.05rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--danger);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
}
.mt-stamp.won { color: var(--green-ink); }
.mt-stamp.unsettled { color: var(--muted); }
.mt-wait { display: inline-block; padding: 5px 10px; border: 2px dashed var(--line); border-radius: 8px; color: var(--muted); font-weight: 700; font-size: .9rem; }

/* Build a ticket: tap-to-pick chips and a live 100-dot meter */
.bld-form { display: grid; gap: 20px; margin: 16px 0; max-width: 34em; }
.bld-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.bld-group legend { font: 700 1rem/1.2 var(--display); padding: 0 0 8px; }
.bld-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.bld-chips.odds { grid-template-columns: 1.8fr; }
.bld-chip { position: relative; }
.bld-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.bld-chip span {
  display: grid; place-items: center; min-height: 48px; padding: 0 4px; border-radius: 14px;
  background: var(--card); border: 2px solid var(--line); font: 800 1.15rem/1 var(--display); transition: background .15s, transform .15s;
}
.bld-chip input:hover + span { border-color: var(--gold); }
.bld-chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); transform: translateY(-2px); box-shadow: 0 5px 0 -1px rgba(42, 20, 0, .25); }
.bld-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.bld-meter {
  padding: 18px 18px 14px; border-radius: 20px; color: var(--chalk);
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255, 159, 69, .18), transparent 70%), linear-gradient(160deg, var(--deep-2), var(--deep));
}
.bld-big { margin: 0 0 12px; font: 800 clamp(2.6rem, 12vw, 3.6rem)/1 var(--display); letter-spacing: -.04em; color: var(--gold); }
.bld-big small { font: 600 1rem/1 var(--display); letter-spacing: 0; color: var(--chalk); opacity: .85; margin-left: 6px; }
.bld-meter .crowd i.on { animation: none; }
.bld-meter .note { color: var(--chalk); opacity: .85; margin: 12px 0 0; }
.code-big { font-family: var(--mono); letter-spacing: .08em; font-size: 1.9rem; overflow-wrap: anywhere; }

/* Membership page: a season pass, four examples, then the steps to join */
.join-pass { position: relative; display: grid; grid-template-columns: 1fr auto; margin: 14px 0 10px; color: var(--chalk); border-radius: 20px; box-shadow: 0 20px 40px -26px rgba(6, 47, 59, .8);
  background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(255, 159, 69, .22), transparent 60%), linear-gradient(150deg, var(--deep-2), var(--deep)); }
.join-pass-main { padding: 22px 18px 22px 22px; min-width: 0; }
.join-pass-title { margin: 0 0 8px; font: 800 clamp(1.7rem, 7.5vw, 2.5rem)/1.02 var(--display); letter-spacing: -.03em; }
.join-pass-main p:last-child { margin: 0; font-size: .95rem; opacity: .88; max-width: 30em; }
.join-pass-stub { position: relative; display: grid; align-content: center; justify-items: center; padding: 16px 18px; border-left: 2px dashed rgba(238, 244, 243, .4); }
.join-pass-stub::before, .join-pass-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.join-pass-stub::before { top: -10px; }
.join-pass-stub::after { bottom: -10px; }
.join-pass-stub b { font: 800 3rem/1 var(--mono); color: var(--gold); }
.join-pass-stub span { font: 700 .95rem/1.2 var(--display); }
.join-terms { margin: 0 0 18px; color: var(--muted); font-size: .92rem; max-width: 36em; }
.join-redeem { margin: 8px 0 0; max-width: 30em; }
.join-redeem label { font-weight: 700; font-size: .92rem; }
.join-redeem input { font-size: 1.15rem; letter-spacing: .08em; }
.join-redeem input::placeholder { font-size: 1rem; }
.join-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.join-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.join-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.join-card > p { margin: 0; color: var(--muted); font-size: .92rem; }
.join-ex { margin-top: 12px; padding: 10px 12px 12px; border-radius: 12px; background: var(--bg); border: 2px dashed var(--line); }
.join-ex p { margin: 0; }
.join-tag { display: block; margin-bottom: 6px; font: 600 .78rem/1 var(--display); color: var(--muted); }
.join-pair { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .92rem; }
.join-pair s { color: var(--muted); text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.join-pair b { font-family: var(--mono); font-size: .86rem; }
.join-nums { margin: 6px 0 8px !important; font-size: .85rem; color: var(--muted); }
.join-nums b { font: 800 1.5rem/1 var(--display); color: var(--ink); letter-spacing: -.03em; }
.join-nums s { text-decoration-color: var(--danger); font-size: 1rem; }
.join-nums s::after { content: " \2192"; display: inline-block; }
.join-dots { gap: 2px; }
.join-bars { display: grid; gap: 6px; }
.join-bars p { display: grid; grid-template-columns: 5.6em 1fr auto; gap: 8px; align-items: center; font-size: .82rem; color: var(--muted); }
.join-bars i { display: block; width: var(--w); height: 12px; border-radius: 6px; background: var(--deep-2); }
.join-bars i.low { background: var(--gold); }
.join-bars b { font-family: var(--mono); color: var(--ink); }
@media (prefers-color-scheme: dark) { .join-bars i { background: #2f93a5; } .join-bars i.low { background: var(--gold); } }
.join-chips { display: flex; gap: 6px; align-items: center; }
.join-chips span { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--line); background: var(--card); font: 800 .9rem/1 var(--display); }
.join-chips span.pick { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.join-chips span.gap { flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 0; }
.join-receipt { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; background: var(--card); }
.join-receipt p { font-size: .88rem; }
.join-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.join-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.join-steps li > div { min-width: 0; }
.join-steps p { margin: 0; color: var(--muted); font-size: .92rem; }
.join-steps p.join-strong { color: var(--ink); font: 700 1.05rem/1.3 var(--display); margin-bottom: 2px; }
.join-steps .alt { margin-top: 2px; }

/* admin two-factor pages */
.admin .qr { margin: 12px 0; width: 100%; max-width: 260px; }
.admin .qr svg { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.admin .secret { font: 700 1.05rem/1.5 var(--mono); letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.admin ul.codes { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); gap: 8px; max-width: 26em; }
.admin ul.codes li { font: 700 1.05rem/1 var(--mono); letter-spacing: .06em; padding: 10px 12px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; text-align: center; }
.admin a.btn { display: inline-block; text-decoration: none; }
.admin a.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Admins tab */
.adm-people, .adm-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adm-person, .adm-role { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.adm-role { margin: 0 0 12px; }
.adm-role h3 { margin: 0 0 2px; font-size: 1.05rem; }
.adm-email { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.adm-meta { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.adm-meta .small { margin: 0; }
.adm-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0 0 6px; }
.adm-inline label { display: grid; gap: 2px; font-weight: 700; font-size: .85rem; flex: 1 1 10em; }
.admin select {
  width: 100%; padding: 10px 10px; background: var(--card); color: var(--ink); border: 2px solid var(--line);
  border-radius: 12px; font: 500 1rem/1.3 system-ui, sans-serif;
}
.admin select:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.adm-perms { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 6px; }
.adm-perms legend { font-weight: 700; font-size: .92rem; padding: 0 0 6px; }
.adm-switch { display: flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 12px; font-weight: 600 !important; }
.adm-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); flex: none; }
.adm-switch:has(input:checked) { border-color: var(--gold); }
.adm-switch:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.adm-switch:has(input:disabled) { opacity: .55; }
.admin button:disabled { opacity: .5; cursor: not-allowed; }
.adm-link { background: var(--deep); color: var(--chalk); border-radius: 16px; padding: 16px 18px; margin: 12px 0; }
.adm-link p { margin: 0 0 6px; }
.adm-link .small { color: rgba(238, 244, 243, .8); }
.adm-link-top { font: 700 .9rem/1.3 var(--display); letter-spacing: .02em; }
.adm-url { font: 700 .95rem/1.45 var(--mono); overflow-wrap: anywhere; user-select: all; background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 10px 12px; }
.adm-event { display: grid; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.adm-event time { color: var(--muted); font-size: .78rem; font-family: var(--mono); }
.adm-what { overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .adm-event { grid-template-columns: 11em 1fr; gap: 12px; }
}
.admin .who { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.admin .who .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin .who .linkbtn { flex: none; }
@media (max-width: 440px) {
  .atabs { gap: 2px; }
  .atabs a { padding: 11px 5px 10px; font-size: .76rem; flex: 1 1 auto; }
  .badge { padding: 0 5px; margin-left: 2px; }
}

/* feedback form */
.fb { max-width: 520px; margin-bottom: 28px; }
.fb form { display: grid; gap: 16px; margin: 14px 0; }
.fb label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.fb small { font-weight: 400; color: var(--muted); }
.fb textarea, .fb input[type=text], .fb input[type=number] {
  width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font: 500 1rem/1.4 system-ui, sans-serif; letter-spacing: 0; text-transform: none; resize: vertical;
}
.fb textarea:focus, .fb input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.fb fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.fb legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: .92rem; }
.fb button { width: 100%; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* stars: radios listed 5 to 1 and shown in reverse, so "checked ~ label" lights every lower star too */
.fb-stars-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.fb-stars-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fb-stars-row label { display: block; padding: 0 2px; font-size: 2.6rem; line-height: 1; color: var(--line); cursor: pointer; }
.fb-stars-row label:hover, .fb-stars-row label:hover ~ label,
.fb-stars-row input:checked ~ label { color: var(--gold); }
.fb-stars-row input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.fb-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-choice { position: relative; display: block; }
.fb-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.fb-choice span { display: block; padding: 10px 18px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.fb-choice input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.fb-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.fb-prompt { font-size: .85rem; color: var(--muted); margin-top: 18px; text-align: center; }

/* Build a ticket: the word chips ("This weekend") are smaller than the number chips */
.bld-chips.when span { font-size: .95rem; text-align: center; }

/* ---- Redesign: site header, home page, footer ---- */
:root { --real: #b24f0a; --danger-ink: #a53320; --fill: var(--deep); --solid: var(--deep); }
@media (prefers-color-scheme: dark) { :root { --real: var(--gold); --danger-ink: var(--danger); --fill: #2f93a5; --solid: var(--deep-2); } }

.topnav { display: none; }
.acct-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the account pill: outlined, round initial, chevron */
header.site details.acct summary {
  background: transparent; color: var(--chalk); box-shadow: none; border: 1px solid rgba(238, 244, 243, .3); border-radius: 9999px;
  padding: 5px 12px 5px 5px; font: 600 .9rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header.site details.acct summary:hover { background: rgba(238, 244, 243, .1); }
header.site .acct-hole { width: 32px; height: 32px; background: var(--chalk); color: var(--deep); box-shadow: none; font: 700 .95rem/1 system-ui, sans-serif; }
header.site .acct-status { border-left: 0; padding-left: 0; }

header.site .logo { width: 28px; height: 28px; }
header.site .brand b { color: inherit; }
@media (min-width: 641px) {
  header.site { background: var(--deep); border-bottom: 3px solid var(--gold); }
  header.site::before { display: none; }
  header.site .tabs { display: none; }
  header.site .bar { max-width: 1168px; padding: 14px 24px; min-height: 72px; gap: 28px; }
  header.site .brand { font-size: 1.45rem; }
  .topnav { display: flex; align-items: center; gap: 6px; margin-right: auto; margin-left: 4px; }
  .topnav a {
    position: relative; padding: 9px 16px; border-radius: 10px; text-decoration: none;
    font: 600 .95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: rgba(238, 244, 243, .8);
  }
  .topnav a:hover { color: var(--chalk); background: rgba(238, 244, 243, .06); }
  .topnav a[aria-current] { color: var(--chalk); background: rgba(238, 244, 243, .12); box-shadow: inset 0 -2px 0 var(--gold); }
  .topnav a:focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; }
  main.home-page { max-width: 1168px; padding-left: 24px; padding-right: 24px; }
}

/* Footer */
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 24px; flex-wrap: wrap; }
.foot p { margin: 4px 0; }
.foot-links { display: flex; gap: 20px; }
.foot-age .age { width: 24px; height: 24px; font-size: .62rem; margin-right: 8px; }
@media (min-width: 641px) { footer { margin-top: 24px; } .foot { max-width: 1168px; padding-left: 24px; padding-right: 24px; font-size: .9rem; } }

/* Home */
.home .hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); gap: 56px; align-items: start; padding-top: 60px; }
.home h1 { font-size: clamp(2.3rem, 9vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; max-width: none; margin: 0 0 22px; }
.home h1 .real { color: var(--real); }
.home .lead { font-size: 1.2rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, var(--bg)); max-width: 30em; margin: 0 0 28px; }
.check-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 8px 24px -12px rgba(6, 47, 59, .2); }
.check-label { display: block; font: 700 .95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; margin-bottom: 12px; }
.check-row { display: flex; gap: 14px; }
.check-row input {
  flex: 1; min-width: 0; padding: 14px 18px; background: var(--bg); color: var(--ink);
  border: 2px solid color-mix(in srgb, var(--muted) 55%, var(--bg)); border-radius: 10px; outline: 0;
  font: 500 1.2rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.check-row input::placeholder { color: var(--muted); opacity: 1; font-size: 1.1rem; letter-spacing: .12em; }
.check-row input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.check-row button { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; border-radius: 10px; font-size: 1.05rem; }
.check-row button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check-help { margin: 14px 0 0; color: var(--muted); font-size: .92rem; }
.home .free-hint { margin: 14px 2px 0; }
.home .error { margin-top: 14px; }

.example { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px -12px rgba(6, 47, 59, .18); }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.ex-pill { padding: 5px 10px; border-radius: 8px; background: var(--track); color: var(--muted); font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ex-code { font: 500 .85rem/1 var(--mono); letter-spacing: .03em; }
.ex-main { padding: 22px 24px 28px; border-bottom: 1px solid var(--line); }
.ex-nums { display: flex; align-items: flex-end; gap: 26px; }
.ex-nums p { margin: 0; }
.ex-label { color: var(--muted); font-size: .9rem; }
.ex-big { font: 800 3.6rem/1.05 var(--display); letter-spacing: -.02em; }
.ex-old { font-size: 1.35rem; color: var(--muted); margin-bottom: 10px !important; }
.ex-bar { height: 10px; border-radius: 5px; background: var(--track); margin-top: 20px; overflow: hidden; }
.ex-bar i { display: block; height: 100%; border-radius: 5px; background: var(--fill); }
.ex-legs { list-style: none; margin: 0; padding: 0; }
.ex-legs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.ex-legs b { font-weight: 600; }
.ex-legs span { display: block; font-size: .83rem; color: var(--muted); }
.ex-legs strong { font: 700 1.1rem/1 system-ui, sans-serif; }
.ex-legs .weak { background: var(--red-soft); }
.ex-legs .weak strong { color: var(--danger-ink); }
.ex-legs em { font: 700 .66rem/1 system-ui, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--danger); color: var(--on-danger); padding: 4px 8px; border-radius: 9999px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.ex-foot { margin: 0; padding: 14px 24px; background: color-mix(in srgb, var(--track) 50%, transparent); color: color-mix(in srgb, var(--ink) 75%, var(--bg)); font-size: .92rem; }
.ex-foot b { color: var(--ink); }

.how { margin-top: 80px; }
.how h2 { font-size: 1.5rem; margin: 0 0 16px; }
.how-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how-cards li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.how-cards b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--solid); color: var(--chalk); font: 700 1rem/1 system-ui, sans-serif; margin-bottom: 14px; }
.how-cards h3 { margin: 0 0 6px; font-size: 1.15rem; }
.how-cards p { margin: 0; color: color-mix(in srgb, var(--ink) 75%, var(--bg)); }
.banner { display: flex; align-items: center; gap: 20px; margin: 32px 0 8px; padding: 24px 32px; border-radius: 16px; background: var(--deep); color: var(--chalk); }
.banner-age { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--chalk); border-radius: 50%; font: 700 1rem/1 system-ui, sans-serif; }
.banner-text { flex: 1; }
.banner-text p { margin: 0; }
.banner-title { font: 700 1.1rem/1.3 var(--display); }
.banner-btn { flex: none; padding: 12px 20px; border: 1px solid var(--chalk); border-radius: 10px; color: var(--chalk); text-decoration: none; font: 700 1rem/1.2 var(--display); }
.banner-btn:hover { background: rgba(238, 244, 243, .12); color: var(--chalk); }
.banner-btn:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }
/* chance card sits in the hero's right column, where the example card shows before a check */
.home .hero > .verdict { margin: 0; padding: 22px 24px 24px; }
.home .hero > .verdict .crowd { max-width: none; gap: 3px; }
.home .hero > .verdict .facts { gap: 8px; }
.home .hero > .verdict .fact { padding: 10px; }
@media (max-width: 1100px) { .home .hero > .verdict { padding: 20px; } .home .hero > .verdict .crowd { gap: 2px; } .home .hero > .verdict .fact .big { font-size: 1.25rem; } }
@media (max-width: 760px) { .home .hero > .verdict { padding: 22px 20px; } .home .hero > .verdict .crowd { gap: 3px; } }
/* the result lines up with the hero's left column (same 11fr of 11fr + 8fr, 56px gap) */
.after { max-width: calc((100% - 56px) * 11 / 19); margin: 0; }
@media (max-width: 900px) { .after { max-width: calc((100% - 32px) * 11 / 19); } }

@media (max-width: 900px) { .home .hero { gap: 32px; } .how-cards { gap: 10px; } .how-cards li { padding: 18px; } }
@media (max-width: 760px) {
  .home .hero { grid-template-columns: minmax(0, 1fr); }
  .after { max-width: none; }
  .how-cards { grid-template-columns: minmax(0, 1fr); }
  .how { margin-top: 40px; }
  .banner { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .banner-btn { align-self: stretch; text-align: center; }
}
@media (max-width: 520px) {
  .check-card { padding: 18px; }
  .check-row { flex-direction: column; }
  .check-row button { justify-content: center; padding: 16px; }
  .ex-head, .ex-legs li, .ex-foot { padding-left: 18px; padding-right: 18px; }
  .ex-main { padding: 18px 18px 22px; }
  .ex-big { font-size: 3rem; }
}

/* result restyle: everything under the form after a check */
.after .note { margin: 0 0 10px; padding: 0; border: 0; color: var(--muted); font-size: .92rem; }
.after .note::before { content: "i"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--muted); font: italic 700 .7rem/1 Georgia, serif; vertical-align: 1px; }
.after > .note:first-child { margin-top: 20px; }
.ticket-games, .after .swap-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px -12px rgba(6, 47, 59, .18); overflow: hidden; margin: 20px 0; }
.ticket-games-head { padding: 18px 24px 14px; border-bottom: 1px solid var(--line); }
.ticket-games-head h2 { margin: 0; font-size: 1.25rem; }
.ticket-games-head p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.ticket-games-list { list-style: none; margin: 0; padding: 0; }
.game { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.game:last-child { border-bottom: 0; }
.game-main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.game-title { font-weight: 600; }
.game-pick, .game-fair { font-size: .83rem; color: var(--muted); }
.game-pick .odds { font-family: var(--mono); }
.game-pct { flex: none; font: 700 1.1rem/1 system-ui, sans-serif; }
.game.off .game-pct { color: var(--muted); }
.game.weak { background: var(--red-soft); }
.game.weak .game-pct { color: var(--danger-ink); }
.leg-pill { font: 700 .66rem/1 system-ui, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--track); color: var(--muted); padding: 4px 8px; border-radius: 9999px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.leg-pill-weak { background: var(--danger); color: var(--on-danger); }
.after .swap-card { padding: 22px 24px 18px; }
.after .swap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; }
.after .swap-head b { position: static; background: none; color: var(--ink); padding: 0; border-radius: 0; font: 700 1.25rem/1.2 var(--display); }
.after .swap-new { background: color-mix(in srgb, var(--green) 14%, var(--card)); box-shadow: inset 0 0 0 1px var(--green); }
.after .swap-new strong { color: var(--green-ink); }
.after .swap-was s { text-decoration-color: var(--danger-ink); }
.after .swap-nums p b { color: var(--green-ink); }
.after .swap-lock { left: 24px; right: 24px; }
.after .track { margin: 0 0 20px; }
.after .track button { padding: 12px 22px; border-radius: 10px; font-size: 1rem; background: transparent; color: var(--ink); border: 2px solid var(--line); box-shadow: none; }
.after .track button:hover { filter: none; border-color: var(--ink); }
.after .fb-prompt { text-align: left; margin: 0 0 8px; font-size: .92rem; }
.after .safety { text-align: left; margin: 12px 0 0; }
@media (max-width: 760px) {
  .ticket-games-head, .game { padding-left: 18px; padding-right: 18px; }
  .after .swap-card { padding: 20px 18px 16px; }
  .after .swap-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .after .swap-arrow { justify-self: center; transform: rotate(90deg); }
  .after .swap-lock { left: 14px; right: 14px; }
}