/* Landing page only (/ and /tr/). The one loud moment is the hero phone; everything else stays quiet.
   Motion uses transform and opacity only, pauses off screen (site.js adds .is-live) and stops for reduced motion. */
@font-face {
  font-family: "Slackey TR";
  src: url("/fonts/slackey-tr.woff2") format("woff2");
  /* Preloaded, so it is normally there for the first paint; if it is late, this view keeps the fallback (no shift). */
  font-display: optional;
}
/* Arial sized to Slackey's metrics (fonttools: advance widths of the headlines, hhea ascent/descent/lineGap), so a
   late font lands without moving the hero. Liberation Sans shares Arial's metrics. */
@font-face {
  font-family: "Slackey fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 137.2%;
  ascent-override: 76.7%;
  descent-override: 25%;
  line-gap-override: 2%;
}

:root {
  --sky: #48cae4;
  --sky-deep: #0077b6;
  --cream: #fff8d6;
  --ink: #0b0c26;
  --display: "Slackey TR", "Slackey fallback", system-ui, sans-serif;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Sticker type: cream fill, ink rim, offset shadow, like the wordmark. */
.sticker {
  color: var(--cream);
  -webkit-text-stroke: 0.14em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--ink);
}

/* ---------- Hero ---------- */
.hero2 { padding-top: 12px; padding-bottom: 40px; overflow: hidden; }
.hero2-grid { display: grid; gap: 36px; align-items: center; }
.hero2 h1 {
  margin: 8px 0 18px;
  font-size: clamp(40px, 11vw, 76px);
  line-height: 1.04;
}
.hero2 .lead { margin: 0 0 26px; text-align: left; max-width: 34rem; }
.hero2 .meta-line { margin-top: 14px; }

/* The phone */
.stage { position: relative; display: grid; place-items: center; padding: 8px 0 24px; }
.stage::before {
  content: ""; position: absolute; inset: 6% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 127, 0, 0.32), transparent 70%),
              radial-gradient(closest-side at 70% 60%, rgba(72, 202, 228, 0.22), transparent 70%);
  filter: blur(8px);
}
.phone {
  position: relative; width: 272px; aspect-ratio: 9 / 18.5;
  border-radius: 40px; padding: 10px; background: #05061a;
  box-shadow: 0 0 0 2px #2a2e6e, 0 30px 60px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
}
.screen {
  position: relative; height: 100%; border-radius: 31px; overflow: hidden;
  background: #fbf8ff; color: #1d1a24; font: 13px/1.35 system-ui, sans-serif;
}
.appbar { display: flex; align-items: center; gap: 8px; padding: 26px 16px 8px; font-weight: 700; font-size: 15px; }
.appbar small { display: block; font-weight: 400; font-size: 11px; color: #6b6577; }
.tabs { display: flex; gap: 0; margin: 0 16px; border-bottom: 1px solid #e6e0ee; font-size: 12px; font-weight: 600; }
.tabs span { flex: 1; text-align: center; padding: 8px 0; color: #6b6577; }
.tabs .on { color: #5116d0; box-shadow: inset 0 -2px #5116d0; }

.view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; padding: 12px 14px; }

.next {
  border-radius: 18px; padding: 14px; text-align: center;
  background: #eef7f6; border: 1px solid #cfe7e4;
}
.next .label { font-size: 11px; color: #2a7d74; font-weight: 600; }
.next .pair { font-weight: 800; font-size: 15px; margin: 6px 0 2px; }
.next .a { color: #0f6b60; }
.next .b { color: #b0245c; }
.next .vs { font-size: 11px; color: #6b6577; }
.pill {
  display: inline-block; margin-top: 10px; padding: 7px 16px; border-radius: 999px;
  background: #2445d6; color: #fff; font-weight: 700; font-size: 12px;
}
.rows { margin-top: 12px; display: grid; gap: 6px; }
.row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center;
  padding: 7px 10px; border-radius: 10px; background: #f1edf6; font-size: 11px; font-weight: 600;
}
.row .r { text-align: right; color: #b0245c; }
.row .l { color: #0f6b60; }
.row b { font-variant-numeric: tabular-nums; }

/* Result sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(20, 10, 60, 0.18);
  padding: 14px 16px; transform: translateY(105%);
}
.sheet h4 { margin: 0 0 10px; font-size: 15px; }
.wheels { display: flex; justify-content: center; align-items: center; gap: 14px; }
.wheel {
  width: 64px; height: 120px; overflow: hidden; border-radius: 14px; position: relative;
  background: #f5f2fa; border: 2px solid #d8d0e6;
}
.wheel::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 40px; height: 40px;
  border-radius: 10px; border: 2px solid currentColor; opacity: 0.6;
}
.wheel.a { color: #0f6b60; }
.wheel.b { color: #b0245c; }
.reel { display: grid; font: 700 26px/40px system-ui, sans-serif; text-align: center; transform: translateY(40px); }
.wheels .dash { font-size: 24px; font-weight: 700; color: #6b6577; }
.sheet .save { display: block; width: max-content; margin: 14px 0 0 auto; }

/* Table */
.table { font-size: 11px; }
.thead, .trow { display: grid; grid-template-columns: 20px 1fr repeat(4, 22px); align-items: center; gap: 2px; }
.thead { color: #6b6577; font-weight: 600; padding: 0 4px 6px; }
.tbody { position: relative; height: 210px; }
.trow {
  position: absolute; left: 0; right: 0; height: 32px; padding: 0 4px;
  border-radius: 8px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.trow .who { display: flex; align-items: center; gap: 6px; }
.av {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.trow .pts { position: relative; font-weight: 800; color: #2445d6; }
.trow .pts { display: grid; justify-items: end; }
.trow .pts i { grid-area: 1 / 1; font-style: normal; }
.crown { margin-left: 2px; }

/* Tap ripple */
.tap {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(36, 69, 214, 0.35); opacity: 0; transform: scale(0.3);
}

/* ---------- The night loop (14 s) ---------- */
.night, .night * { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
.is-live .night, .is-live .night * { animation-play-state: running; }

.night .v-fixture { animation-name: v-fixture; }
.night .v-table { opacity: 0; animation-name: v-table; }
.night .tab-m { animation-name: tab-m; }
.night .tab-t { animation-name: tab-t; }
.night .sheet { animation-name: sheet; }
.night .tap-enter { left: 50%; top: 236px; animation-name: tap-enter; }
.night .tap-save { right: 22px; left: auto; margin-right: -17px; bottom: 30px; top: auto; animation-name: tap-save; }
.night .reel.a { animation-name: reel-a; }
.night .reel.b { animation-name: reel-b; }
.night .trow.p1 { animation-name: p1; }
.night .trow.p2 { animation-name: p2; }
.night .trow.p3 { animation-name: p3; }
.night .trow.p4 { animation-name: p4; }
.night .trow.p5 { animation-name: p5; }
.night .pts .old { animation-name: pts-old; }
.night .pts .new { opacity: 0; animation-name: pts-new; }
.night .row.done b { animation-name: score-in; }

@keyframes tap-enter { 0%, 18% { opacity: 0; transform: scale(0.3); } 21% { opacity: 1; transform: scale(1); } 25%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sheet { 0%, 24% { transform: translateY(105%); } 30%, 56% { transform: translateY(0); } 62%, 100% { transform: translateY(105%); } }
@keyframes reel-a { 0%, 32% { transform: translateY(40px); } 42%, 100% { transform: translateY(-80px); } }
@keyframes reel-b { 0%, 36% { transform: translateY(40px); } 46%, 100% { transform: translateY(-40px); } }
@keyframes tap-save { 0%, 50% { opacity: 0; transform: scale(0.3); } 53% { opacity: 1; transform: scale(1); } 57%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes v-fixture { 0%, 60% { opacity: 1; transform: none; } 64%, 96% { opacity: 0; transform: translateX(-24px); } 100% { opacity: 1; transform: none; } }
@keyframes v-table { 0%, 60% { opacity: 0; transform: translateX(24px); } 64%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateX(24px); } }
@keyframes tab-m { 0%, 60% { color: #5116d0; box-shadow: inset 0 -2px #5116d0; } 64%, 96% { color: #6b6577; box-shadow: none; } 100% { color: #5116d0; box-shadow: inset 0 -2px #5116d0; } }
@keyframes tab-t { 0%, 60% { color: #6b6577; box-shadow: none; } 64%, 96% { color: #5116d0; box-shadow: inset 0 -2px #5116d0; } 100% { color: #6b6577; box-shadow: none; } }
@keyframes score-in { 0%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
/* Table rows: Leo and Emma win and climb from 3rd and 4th to 1st and 2nd. */
@keyframes p1 { 0%, 70% { transform: translateY(0); } 78%, 100% { transform: translateY(84px); } }
@keyframes p2 { 0%, 70% { transform: translateY(42px); } 78%, 100% { transform: translateY(126px); } }
@keyframes p3 { 0%, 70% { transform: translateY(84px); background: transparent; } 78%, 92% { transform: translateY(0); background: #fff3c4; } 100% { transform: translateY(0); background: transparent; } }
@keyframes p4 { 0%, 70% { transform: translateY(126px); background: transparent; } 78%, 92% { transform: translateY(42px); background: #fff3c4; } 100% { transform: translateY(42px); background: transparent; } }
@keyframes p5 { 0%, 100% { transform: translateY(168px); } }
@keyframes pts-old { 0%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes pts-new { 0%, 72% { opacity: 0; transform: translateY(6px); } 75%, 100% { opacity: 1; transform: none; } }

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-deep), #17195a 50%, var(--bg-deep));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker ul {
  display: flex; gap: 40px; width: max-content; margin: 0; padding: 16px 0; list-style: none;
  font-family: var(--display); font-size: 22px; color: var(--gold);
  animation: ticker 36s linear infinite; animation-play-state: paused;
}
.is-live .ticker ul, .ticker.is-live ul { animation-play-state: running; }
.ticker li { white-space: nowrap; }
.ticker li:nth-child(even) { color: var(--sky); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.block { padding: 64px 0; }
.block h2 { font-size: clamp(30px, 7vw, 48px); line-height: 1.08; margin: 0 0 16px; }
.block .intro { color: var(--muted); max-width: 38rem; margin: 0 0 32px; }
.split { display: grid; gap: 32px; align-items: center; }

/* Rotating 2v2: six players move between two team courts and the bench. */
.court {
  position: relative; height: 300px; max-width: 360px; width: 100%; margin: 0 auto;
}
.slot {
  position: absolute; border-radius: 22px; border: 2px dashed var(--line);
}
.slot.ta { left: 0; top: 0; width: 46%; height: 120px; border-color: rgba(255, 209, 102, 0.6); background: rgba(255, 209, 102, 0.06); }
.slot.tb { right: 0; top: 0; width: 46%; height: 120px; border-color: rgba(72, 202, 228, 0.6); background: rgba(72, 202, 228, 0.06); }
.slot.bench { left: 18%; right: 18%; top: 176px; height: 104px; }
.slot span { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 13px; color: var(--muted); }
.slot.bench span { bottom: auto; top: -24px; }
.vs-mark { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); font-family: var(--display); color: var(--muted); }
.chip {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff;
  box-shadow: 0 0 0 3px var(--bg), 0 6px 14px rgba(0, 0, 0, 0.35);
  animation: none 12s infinite cubic-bezier(.6, 0, .3, 1); animation-play-state: paused;
}
.is-live .chip { animation-play-state: running; }
.round-no { text-align: center; color: var(--muted); font-size: 14px; margin-top: 12px; }

/* Three ways to keep score */
.modes { display: grid; gap: 16px; }
.mode { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.mode h3 { color: var(--text); font-size: 20px; margin: 0 0 4px; }
.mode p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.mini { background: #fbf8ff; color: #1d1a24; border-radius: 14px; padding: 12px; font-size: 13px; }
.mini .score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-weight: 700; }
.mini .score .big { font: 400 28px/1 var(--display); color: #1d1a24; }
.mini .score .r { text-align: right; color: #b0245c; }
.mini .score .l { color: #0f6b60; }
.mini table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: 4px 6px; text-align: right; }
.mini th:first-child, .mini td:first-child { text-align: left; }
.mini th { color: #6b6577; font-weight: 600; }
.mini tfoot td { font-weight: 800; border-top: 1px solid #e6e0ee; }
.mini ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.mini .won { color: #b0245c; font-weight: 700; }

/* Video */
.film { position: relative; padding: 0; overflow: hidden; background: var(--bg-deep); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center; background: #1a1240; }
.film .overlay { padding: 24px 0 32px; }
.film h2 { margin: 0 0 6px; font-size: clamp(26px, 6vw, 44px); }
.film p { margin: 0; color: #e7e3ff; max-width: 34rem; }
@media (min-width: 760px) {
  .film video { aspect-ratio: 16 / 9; max-height: 78vh; }
  .film .overlay { position: absolute; inset: auto 0 0 0; padding: 96px 0 32px; background: linear-gradient(transparent, rgba(11, 12, 38, 0.9)); }
}
.film .ai-note { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* How a night goes: a real sequence, so the steps carry numbers. */
.steps { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font: 400 28px/1 var(--display); color: var(--ink); background: linear-gradient(180deg, var(--gold), var(--orange));
}
.steps h3 { color: var(--text); font-size: 20px; margin: 4px 0 4px; }
.steps p { margin: 0; color: var(--muted); }

.final { text-align: center; padding: 72px 0 56px; }
.final .app-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.final h2 { font-size: clamp(32px, 8vw, 56px); margin: 20px auto 24px; max-width: 14ch; line-height: 1.06; }

@media (min-width: 760px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .hero2 { padding-top: 32px; padding-bottom: 64px; }
  .hero2-grid { grid-template-columns: 1.3fr 0.7fr; }
  .hero2 h1 { font-size: clamp(56px, 5.6vw, 80px); }
  .phone { width: 300px; }
  .split { grid-template-columns: 1fr 1fr; }
  .block { padding: 96px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .night, .night *, .chip, .ticker ul { animation: none !important; }
  .night .v-table, .night .sheet, .night .tap { display: none; }
  .ticker ul { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker li[aria-hidden="true"] { display: none; }
}

/* Generated: rotating 2v2 schedule for six players over five matches (12 s loop). */
.court { width: 288px; height: 270px; max-width: none; }
.slot.ta { width: 132px; height: 110px; } .slot.tb { width: 132px; height: 110px; } .slot.bench { left: 52px; right: 52px; top: 160px; height: 100px; }
.chip { width: 48px; height: 48px; font-size: 14px; }
.vs-mark { top: 40px; }
.chip.a { animation-name: rot-a; transform: translate(14px, 31px); }
@keyframes rot-a { 0.0%, 15.6% { transform: translate(14px, 31px); } 20.0%, 35.6% { transform: translate(14px, 31px); } 40.0%, 55.6% { transform: translate(92px, 186px); } 60.0%, 75.6% { transform: translate(14px, 31px); } 80.0%, 95.6% { transform: translate(14px, 31px); } 100% { transform: translate(14px, 31px); } }
.chip.b { animation-name: rot-b; transform: translate(70px, 31px); }
@keyframes rot-b { 0.0%, 15.6% { transform: translate(70px, 31px); } 20.0%, 35.6% { transform: translate(92px, 186px); } 40.0%, 55.6% { transform: translate(14px, 31px); } 60.0%, 75.6% { transform: translate(170px, 31px); } 80.0%, 95.6% { transform: translate(92px, 186px); } 100% { transform: translate(70px, 31px); } }
.chip.c { animation-name: rot-c; transform: translate(170px, 31px); }
@keyframes rot-c { 0.0%, 15.6% { transform: translate(170px, 31px); } 20.0%, 35.6% { transform: translate(170px, 31px); } 40.0%, 55.6% { transform: translate(148px, 186px); } 60.0%, 75.6% { transform: translate(92px, 186px); } 80.0%, 95.6% { transform: translate(170px, 31px); } 100% { transform: translate(170px, 31px); } }
.chip.d { animation-name: rot-d; transform: translate(226px, 31px); }
@keyframes rot-d { 0.0%, 15.6% { transform: translate(226px, 31px); } 20.0%, 35.6% { transform: translate(148px, 186px); } 40.0%, 55.6% { transform: translate(170px, 31px); } 60.0%, 75.6% { transform: translate(226px, 31px); } 80.0%, 95.6% { transform: translate(70px, 31px); } 100% { transform: translate(226px, 31px); } }
.chip.e { animation-name: rot-e; transform: translate(92px, 186px); }
@keyframes rot-e { 0.0%, 15.6% { transform: translate(92px, 186px); } 20.0%, 35.6% { transform: translate(70px, 31px); } 40.0%, 55.6% { transform: translate(226px, 31px); } 60.0%, 75.6% { transform: translate(148px, 186px); } 80.0%, 95.6% { transform: translate(226px, 31px); } 100% { transform: translate(92px, 186px); } }
.chip.f { animation-name: rot-f; transform: translate(148px, 186px); }
@keyframes rot-f { 0.0%, 15.6% { transform: translate(148px, 186px); } 20.0%, 35.6% { transform: translate(226px, 31px); } 40.0%, 55.6% { transform: translate(70px, 31px); } 60.0%, 75.6% { transform: translate(70px, 31px); } 80.0%, 95.6% { transform: translate(148px, 186px); } 100% { transform: translate(148px, 186px); } }
.round-no { position: relative; height: 24px; } .round-no span { position: absolute; left: 0; right: 0; opacity: 0; animation: none 12s infinite step-end; animation-play-state: paused; } .is-live .round-no span { animation-play-state: running; }
.round-no span:nth-child(1) { animation-name: rn1; } @keyframes rn1 { 0% { opacity: 1; } 20.0% { opacity: 0; } 100% { opacity: 1; } }
.round-no span:nth-child(2) { animation-name: rn2; } @keyframes rn2 { 0% { opacity: 0; } 20.0% { opacity: 1; } 40.0% { opacity: 0; } }
.round-no span:nth-child(3) { animation-name: rn3; } @keyframes rn3 { 0% { opacity: 0; } 40.0% { opacity: 1; } 60.0% { opacity: 0; } }
.round-no span:nth-child(4) { animation-name: rn4; } @keyframes rn4 { 0% { opacity: 0; } 60.0% { opacity: 1; } 80.0% { opacity: 0; } }
.round-no span:nth-child(5) { animation-name: rn5; } @keyframes rn5 { 0% { opacity: 0; } 80.0% { opacity: 1; } 100.0% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .round-no span { animation: none !important; } .round-no span:first-child { opacity: 1; } }

/* Player colours (no inline styles under the CSP). */
.k1 { background: #b35900; } .k2 { background: #0077b6; } .k3 { background: #b0245c; }
.k4 { background: #2a7d74; } .k5 { background: #5116d0; } .k6 { background: #4f6b16; }

/* Table: ranks stay put, rows move. */
.thead, .trow { grid-template-columns: 1fr repeat(4, 24px); text-align: right; }
.thead { padding-left: 26px; }
.thead span:first-child, .trow .who { text-align: left; }
.ranks { position: absolute; left: 0; top: 0; display: grid; grid-auto-rows: 42px; width: 20px; color: #6b6577; font-weight: 700; }
.ranks span { display: grid; align-items: center; height: 32px; }
.trow { left: 22px; }