/* ttscore.app — one stylesheet, no framework.
   1. Tokens & base   2. Navigation   3. Hero   4. Chapters & stages   5. Device frames
   6. iOS screens (app UI rebuilt from TTDS)   7. Chart card   8. More / iPad / privacy / download
   9. Footer & legal pages   10. Motion & reduced motion */

/* 1. Tokens & base ------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #050506;
  --bg-raised: #0c0c0f;
  --surface: #141417;
  --surface-2: #1c1c1f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.66);
  --text-3: #8f8f99;
  /* App accent (AccentColor dark) and status colours (TTDS.Color dark). */
  --accent: #5aaaff;
  --accent-deep: #005bbb;
  --violet: #8b6cff;
  --win: #5dc879;
  --loss: #f3827a;
  --draw: #ffd60a;
  --home: #3987e5;
  --away: #d95926;
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
/* Mockups may bleed past the screen edge on phones; never into a horizontal scrollbar. */
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 12px; background: var(--text); color: #000; font-weight: 600; text-decoration: none;
  transition: top 0.2s;
}
.skip:focus { top: 12px; }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; }
.eyebrow__n { color: var(--text-3); font-variant-numeric: tabular-nums; }

h2 {
  font-size: clamp(40px, 5.8vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 700;
  margin: 16px 0 22px;
  text-wrap: balance;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 500; font-size: 17px; text-decoration: none;
  padding: 10px 2px;
}
.link-arrow .i { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.link-arrow:hover .i { transform: translateY(2px); }
.privacy__link .link-arrow:hover .i { transform: translateX(3px); }

/* App Store CTA. "Bald im App Store" is a note, not a link, until config.appStoreUrl is set. */
.store-badge {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 56px; padding: 0 24px; border-radius: 15px;
  background: #fff; color: #000; text-decoration: none; line-height: 1.08;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.store-badge__small { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; }
.store-badge__big { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
a.store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(90, 170, 255, 0.25); }
.store-badge--soon { background: rgba(255, 255, 255, 0.07); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.store-badge--soon .store-badge__small { color: var(--text-2); }

/* 2. Navigation ---------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}
.nav.is-scrolled, .nav.is-open {
  background: rgba(5, 5, 6, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner {
  max-width: 1240px; margin: 0 auto; height: 60px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; margin-right: auto; }
.nav__brand img { border-radius: 7px; }
.nav__menu { display: flex; align-items: center; gap: 22px; }
.nav__links { display: flex; gap: 22px; }
.nav__links a, .nav__lang { color: var(--text-2); text-decoration: none; font-size: 14px; transition: color 0.2s; padding: 8px 0; }
.nav__links a:hover, .nav__lang:hover, .nav__links a[aria-current="true"] { color: var(--text); }
.nav__lang { font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; padding: 5px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav__cta {
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; background: var(--text); color: #000;
  transition: transform 0.2s var(--ease);
}
.nav__cta:hover { transform: scale(1.04); }
.nav__toggle { display: none; }

@media (max-width: 899px) {
  .nav__toggle {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer;
  }
  .nav__toggle span { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform 0.35s var(--ease); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.8px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
  .nav__cta { padding: 6px 12px; }
  .nav__menu {
    position: fixed; inset: 60px 0 auto; height: calc(100dvh - 60px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 40px;
    background: var(--bg);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0s 0.4s;
  }
  .nav.is-open .nav__menu { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s, transform 0.4s var(--ease); }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__lang { align-self: flex-start; margin-top: 24px; font-size: 15px; padding: 8px 14px; }
}

/* 3. Hero ---------------------------------------------------------------------- */
.hero { position: relative; padding: 112px var(--gutter) 24px; overflow: clip; }
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(40% 35% at 72% 38%, rgba(90, 170, 255, 0.22), transparent 70%),
    radial-gradient(30% 30% at 88% 70%, rgba(139, 108, 255, 0.18), transparent 70%),
    radial-gradient(35% 30% at 20% 20%, rgba(0, 91, 187, 0.14), transparent 70%);
  filter: blur(20px);
  animation: drift 26s ease-in-out infinite alternate;
}
.hero__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hero__copy { position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: 18px; }
.wordmark {
  display: flex; font-size: clamp(76px, 15vw, 172px); font-weight: 800;
  letter-spacing: -0.055em; line-height: 0.92; margin-left: -0.04em;
}
.wordmark span {
  display: inline-block;
  background: linear-gradient(180deg, #fff 30%, #b9bac4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: letter-in 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
.hero__claim { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin: 22px 0 18px; }
.hero__lead { font-size: clamp(17px, 1.7vw, 21px); color: var(--text-2); max-width: 30em; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.hero__note { margin-top: 22px; font-size: 13.5px; color: var(--text-3); }
.hero [data-reveal] { animation: rise-in 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 350ms); }

.hero__stage { position: relative; height: calc(902px * var(--k-hero) + 70px); --k-hero: 0.6; margin-top: 8px; }
.hero__stage .device--hero { --k: var(--k-hero); }
.hero__stage .device--hero-back { --k: calc(var(--k-hero) * 0.9); }
.hero__front, .hero__back { position: absolute; top: 0; left: 50%; }
.hero__front { z-index: 2; }
.hero__back { z-index: 1; filter: brightness(0.82); }
.hero__front, .hero__back { animation: device-in 1.4s var(--ease) both 0.25s; }
.hero__back { animation-delay: 0.45s; }
.device--hero { transform: perspective(1800px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.8s var(--ease); }

@media (min-width: 560px) { .hero__stage { --k-hero: 0.66; } }
@media (min-width: 1024px) {
  .hero { padding-top: 128px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; min-height: min(calc(100svh - 150px), 860px); }
  .hero__stage { --k-hero: 0.74; margin-top: 0; }
}
@media (min-width: 1440px) { .hero__stage { --k-hero: 0.8; } }

/* Chapter index */
.chapters { max-width: 1240px; margin: 24px auto 0; padding: 0 var(--gutter); }
.chapters ol {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 4px 0 8px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.chapters ol::-webkit-scrollbar { display: none; }
.chapters a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.chapters a span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chapters a:hover, .chapters a[aria-current="true"] { color: var(--text); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (min-width: 1024px) { .chapters ol { justify-content: center; -webkit-mask-image: none; mask-image: none; } }

/* 4. Chapters & stages ---------------------------------------------------------- */
.chapter {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(88px, 13vw, 168px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: center;
}
.chapter__body { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 32em; }
.chapter__text h2 + .chapter__body { margin-top: 0; }
@media (min-width: 960px) {
  .chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .chapter--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .chapter--flip .chapter__text { order: 2; }
}

.stage { position: relative; display: flex; justify-content: center; align-items: flex-start; min-width: 0; --k: 0.5; }
.stage .device { --k: inherit; }
.stage--solo { --k: 0.62; }
.stage--duo { padding-bottom: 40px; }
.stage--duo { gap: calc(430px * var(--k) * 0.07); }
.stage--duo .device:nth-of-type(2) { margin-top: calc(150px * var(--k)); }
@media (max-width: 399px) { .stage { --k: 0.44; } .stage--solo { --k: 0.6; } }
@media (min-width: 560px) { .stage { --k: 0.58; } .stage--solo { --k: 0.7; } }
@media (min-width: 960px) { .stage { --k: 0.6; } .stage--solo { --k: 0.74; } }
@media (min-width: 1240px) { .stage { --k: 0.66; } }

.swatches { display: flex; gap: 10px; margin-top: 30px; }
.swatches li { width: 12px; height: 34px; border-radius: 3px; background: var(--c); transform-origin: bottom; }
.js .swatches li { transform: scaleY(0.2); opacity: 0.4; transition: transform 0.7s var(--ease), opacity 0.7s; transition-delay: calc(var(--i) * 60ms + 200ms); }
.js .is-in .swatches li { transform: none; opacity: 1; }

.segmented-web { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); }
.segmented-web button {
  border: 0; background: none; cursor: pointer; padding: 9px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-2); transition: background 0.25s, color 0.25s;
}
.segmented-web button:hover { color: var(--text); }
.segmented-web button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: var(--text); }

/* 5. Device frames --------------------------------------------------------------- */
.device { position: relative; flex: none; margin: 0; }
.iphone {
  --k: 0.6;
  width: calc(430px * var(--k)); height: calc(902px * var(--k));
  padding: calc(14px * var(--k));
  border-radius: calc(72px * var(--k));
  background: linear-gradient(150deg, #4a4a50 0%, #1f1f23 22%, #2d2d32 52%, #141417 78%, #3a3a40 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 calc(5px * var(--k)) #0a0a0c,
    0 calc(60px * var(--k)) calc(120px * var(--k)) rgba(0, 0, 0, 0.6),
    0 calc(18px * var(--k)) calc(36px * var(--k)) rgba(0, 0, 0, 0.45);
}
.device__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(58px * var(--k)); background: #080808; isolation: isolate; }
.device__glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 42%);
}
.device__btn { position: absolute; width: calc(4px * var(--k)); border-radius: 2px; background: linear-gradient(90deg, #2b2b30, #55555c); }
.device__btn--a { left: calc(-3px * var(--k)); top: 18%; height: 4%; }
.device__btn--b { left: calc(-3px * var(--k)); top: 25%; height: 7.5%; }
.device__btn--c { left: calc(-3px * var(--k)); top: 34.5%; height: 7.5%; }
.device__btn--d { right: calc(-3px * var(--k)); top: 28%; height: 11%; }

.ipad {
  --k: 0.27;
  width: calc(1220px * var(--k)); height: calc(860px * var(--k));
  padding: calc(20px * var(--k));
  border-radius: calc(44px * var(--k));
  background: linear-gradient(150deg, #4a4a50, #1d1d21 30%, #2b2b30 60%, #18181b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 calc(6px * var(--k)) #0a0a0c, 0 calc(70px * var(--k)) calc(140px * var(--k)) rgba(0, 0, 0, 0.6);
}
.ipad .device__screen { border-radius: calc(26px * var(--k)); }
@media (min-width: 480px) { .ipad { --k: 0.42; } }
@media (min-width: 768px) { .ipad { --k: 0.58; } }
@media (min-width: 1100px) { .ipad { --k: 0.76; } }
@media (min-width: 1400px) { .ipad { --k: 0.84; } }

/* 6. iOS screens — coordinates are iPhone points; .ios is scaled by --k ------------ */
.ios {
  position: absolute; top: 0; left: 0; width: 402px; height: 874px;
  transform: scale(var(--k)); transform-origin: 0 0;
  background: #080808; color: #faf9f6;
  font: 400 15px/1.25 var(--font);
  letter-spacing: -0.01em; overflow: hidden;
}
.ios b { font-weight: 700; }
.ios small { font-size: inherit; }
.ios--ipad { width: 1180px; height: 820px; }
.ios__status {
  position: absolute; inset: 0 0 auto; height: 54px; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 30px 0 54px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
}
.ios__sys { display: flex; align-items: center; gap: 6px; }
.ios__sys .i:nth-child(1) { width: 19px; height: 12px; }
.ios__sys .i:nth-child(2) { width: 17px; height: 12px; }
.ios__sys .i:nth-child(3) { width: 27px; height: 13px; }
.ios__status--ipad { height: 30px; padding: 0 24px; font-size: 14px; justify-content: flex-start; gap: 10px; }
.ios__status--ipad .ios__sys { margin-left: auto; }
.ios__island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 9; }
.ios__content { position: absolute; inset: 0; padding-top: 54px; overflow: hidden; }
.ios__content--ipad { padding: 92px 32px 0; }
.ios__home { position: absolute; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #fff; z-index: 9; }

/* iOS 26 tab bar */
.ios__tabbar { position: absolute; left: 21px; right: 21px; bottom: 24px; display: flex; align-items: center; gap: 10px; z-index: 7; }
.tabpill {
  flex: 1; display: flex; align-items: center; height: 62px; padding: 4px; border-radius: 31px;
  background: linear-gradient(180deg, rgba(48, 48, 52, 0.9), rgba(30, 30, 33, 0.92));
  box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tab { flex: 1; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 27px; font-size: 10.5px; color: #fff; }
.tab b { font-weight: 600; }
.tab .i { width: 27px; height: 25px; }
.tab.is-active { background: rgba(255, 255, 255, 0.1); color: var(--accent); }
.ipad-tabs { position: absolute; top: 36px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 7; }
.tabpill--top { flex: none; height: 46px; }
.tabpill--top .tab { height: 38px; padding: 0 22px; font-size: 15px; }

/* Large title (CollapsingTitlePager) */
.lt { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 48px 16px 8px; }
.lt__text { font-size: 34px; line-height: 41px; font-weight: 800; letter-spacing: -0.01em; }
.lt__sub { margin-top: 2px; font-size: 15px; color: #8e8d93; }
.lt--team { position: relative; padding-top: 4px; }
.lt--team > div { flex: 1; min-width: 0; }
.glass-circle {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.2); color: #fff;
}
.glass-circle .i { width: 20px; height: 20px; }
.glass-circle.is-on { color: var(--accent); background: rgba(90, 170, 255, 0.16); }
.glass-circle--sm { width: 40px; height: 40px; }
.glass-circle--sm .i { width: 18px; height: 18px; }
.navbar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 4px 16px 0; font-size: 17px; }
.navbar b { font-weight: 600; }
.navbar span:empty { width: 40px; }

/* UnderlineTabBar */
.utabs { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 44px; padding: 0 20px; margin-top: 7px; }
.utab { position: relative; font-size: 15px; font-weight: 600; color: rgba(235, 235, 245, 0.6); white-space: nowrap; padding: 10px 0; transition: color 0.3s; }
.utab.is-active { color: #fff; }
.utab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--accent); }
.utabs__ind { display: none; }
.utabs--js .utab.is-active::after { display: none; }
.utabs--js .utabs__ind {
  display: block; position: absolute; bottom: 0; height: 3px; border-radius: 2px; background: var(--accent);
  left: var(--l, 20px); right: var(--r, 300px);
  transition: left 0.34s var(--ease-io) var(--dl, 0s), right 0.34s var(--ease-io) var(--dr, 0s);
}

/* Standings tables */
.st { margin-top: 8px; }
.st-head, .st-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) repeat(5, 30px);
  align-items: center; padding-right: 16px; font-variant-numeric: tabular-nums;
}
.st-head { padding-top: 10px; padding-bottom: 8px; font-size: 13px; font-weight: 700; color: #757580; }
.st-head b, .st-row span { text-align: right; }
.st-head .st-name, .st-row .st-name { text-align: left; }
.st-r { padding-right: 12px; }
.st-row { position: relative; padding-top: 12px; padding-bottom: 12px; font-size: 15px; font-weight: 700; border-bottom: 1px solid #1c1c1e; background: #080808; }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.st-p { font-weight: 900; }
.st--x { grid-template-columns: 64px minmax(0, 1fr) repeat(9, 62px); padding-right: 24px; }
.st--single .st-head, .st--single .st-row { grid-template-columns: 40px minmax(0, 1fr) 82px 28px 28px 28px 50px; }
.st-team { font-size: 13px; text-align: left !important; padding-left: 4px; color: #faf9f6; }
.st-head .st-team { color: #757580; }
.st-rc { font-weight: 900; }
.st--double .st-head, .st--double .st-row { grid-template-columns: 40px minmax(0, 1fr) 82px 30px 30px 30px; }
.st--double .st-name { white-space: normal; line-height: 1.3; }
.st--dteam .st-head, .st--dteam .st-row { grid-template-columns: 40px minmax(0, 1fr) 30px 30px 30px 40px 40px; }
.fav-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fav); transform-origin: top; }
.fav-bar--end { left: auto; right: 0; }
.fav-bar--title { position: relative; align-self: stretch; flex: none; margin-left: -16px; margin-right: 8px; }
.st-row.is-flash span[data-k] { animation: num-flash 1.4s var(--ease); }

/* Pull-to-refresh (bat-and-ball) */
.scroller { position: relative; height: 100%; }
.scroller__body { position: relative; transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; background: #080808; }
.scroller.is-pulling .scroller__body { transform: translateY(84px); }
.scroller.is-releasing .scroller__body { transition: transform 0.7s cubic-bezier(0.25, 1.35, 0.4, 1); }
.ptr { position: absolute; inset: 6px 0 auto; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity 0.3s; }
.scroller.is-pulling .ptr { opacity: 1; }
.ptr__art { width: 60px; height: 40px; transform: scale(0.55); transform-origin: 50% 80%; transition: transform 0.55s var(--ease); }
.scroller.is-pulling .ptr__art { transform: scale(1); }
.ptr__ball { transform-box: fill-box; transform-origin: 50% 100%; }
.ptr__bat { transform-box: view-box; transform-origin: 47px 29.5px; }
.scroller.is-refreshing .ptr__ball { animation: hop 0.4s infinite; }
.scroller.is-refreshing .ptr__bat { animation: bat-dip 0.4s infinite, bat-tilt 1.6s ease-in-out infinite; }
.ptr__label { font-size: 12px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: #9a9da5; }
.ptr__check { position: absolute; top: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #080808; opacity: 0; transform: scale(0.4); }
.ptr__check .i { width: 15px; height: 15px; }
.scroller.is-done .ptr__art { opacity: 0; transition: opacity 0.15s; }
.scroller.is-done .ptr__check { opacity: 1; transform: none; transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.15s; }

/* Games list */
.day-head { padding: 8px 16px; font-size: 14px; font-weight: 700; color: #8e8d93; }
.game-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 14.5px; border-bottom: 1px solid #1c1c1e;
}
.game-row b { line-height: 1.25; }
.game-row__away { text-align: right; }
.game-row--flat { border: 0; padding-top: 6px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; justify-self: center;
  padding: 4px 12px; border-radius: 3px; background: rgba(57, 57, 61, 0.6);
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.badge i { font-style: normal; padding: 0 2px; }
.badge--vs { padding: 8px 12px; font-size: 13px; }
.badge--xl { font-size: 30px; font-weight: 900; padding: 6px 14px; }
.badge--stream { font-size: 12px; padding: 4px 8px; }
.badge__tv { width: 15px; height: 15px; color: var(--accent); }
.games { padding-bottom: 120px; }
.game-day-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); }
.game-day-wrap > section { overflow: hidden; min-height: 0; }
.game-day-wrap.is-open { grid-template-rows: 1fr; }
.game-day-wrap.is-open .game-row { animation: row-glow 2.2s var(--ease) 0.4s; }

/* Game report */
.report { padding-bottom: 110px; }
.report-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 16px 4px; font-size: 20px; }
.report-head b:last-child { text-align: right; }
.report-date { padding: 4px 16px 14px; font-size: 15px; color: #8e8d93; }
.sec-head { padding: 8px 16px; font-size: 14px; font-weight: 700; color: #8e8d93; }
.r-sec { padding-bottom: 12px; }
.menu-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; font-size: 16px; font-weight: 600; }
.menu-row__sym { width: 22px; height: 22px; color: var(--accent); }
.menu-row__trail { width: 14px; height: 14px; color: #8e8d93; }
.menu-row--two span b { display: block; font-size: 16px; }
.menu-row--two span small { display: block; font-size: 13px; font-weight: 400; color: #8e8d93; }
.m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid #1c1c1e; }
.m-row b:last-child { text-align: right; }
.ch-legend { display: flex; gap: 22px; padding: 2px 16px 8px; font-size: 14px; color: #8e8d93; }
.ch-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ch-legend b { color: #fff; margin-left: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot--home { background: var(--home); }
.dot--away { background: var(--away); }
.chart { width: calc(100% - 16px); margin: 0 8px; overflow: visible; }
.chart text { font: 13px var(--font); fill: #757580; font-variant-numeric: tabular-nums; }
.ch-ylab { text-anchor: end; dominant-baseline: middle; }
.ch-xlab { text-anchor: middle; }
.ch-grid { stroke: rgba(84, 84, 89, 0.6); stroke-width: 0.5; }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ch-line--home { stroke: var(--home); }
.ch-line--away { stroke: var(--away); }
.ch-dot--home { fill: var(--home); }
.ch-dot--away { fill: var(--away); }
.ch-rule { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; opacity: 0; transition: opacity 0.2s; }
.ch-caption { padding: 6px 16px 0; font-size: 15px; color: #8e8d93; }
.js .ch-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-in-out 0.2s; }
.js .ch-dot { opacity: 0; transition: opacity 0.35s calc(var(--i) * 85ms + 0.3s), transform 0.25s var(--ease); }
.js .is-drawn .ch-line { stroke-dashoffset: 0; }
.js .is-drawn .ch-dot { opacity: 1; }

/* Team & player */
.chips { display: flex; align-items: center; gap: 8px; padding: 4px 16px 8px; }
.chip { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 900; color: rgba(0, 0, 0, 0.75); }
.chip--S { background: var(--win); }
.chip--N { background: var(--loss); }
.chip--U { background: var(--draw); }
.js .stage .chip { transform: scale(0.3); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.3s; }
.js .is-in .chip { transform: none; opacity: 1; }
.js .is-in .chip:nth-child(2) { transition-delay: 0.08s; }
.js .is-in .chip:nth-child(3) { transition-delay: 0.16s; }
.js .is-in .chip:nth-child(4) { transition-delay: 0.24s; }
.js .is-in .chip:nth-child(5) { transition-delay: 0.32s; }
.disclosure { display: flex; align-items: center; gap: 6px; padding: 6px 16px; font-size: 15px; font-weight: 600; color: #757580; }
.disclosure .i { width: 12px; height: 12px; }
.mini-day { padding: 2px 16px 0; font-size: 13px; font-weight: 700; color: #8e8d93; }
.mini-time { padding: 0 16px; font-size: 13px; color: #8e8d93; }
.show-all { padding: 10px 16px 0; font-size: 13px; font-weight: 700; color: var(--accent); }
.statband { display: flex; gap: 24px; padding: 4px 16px 12px; }
.statband span { display: flex; flex-direction: column; font-size: 13px; color: #757580; }
.statband b { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.statband .win b, .roster-row .win { color: var(--win); }
.statband .loss b, .roster-row .loss { color: var(--loss); }
.roster-head, .roster-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px 28px 28px 46px; align-items: center; padding: 6px 16px; font-variant-numeric: tabular-nums; }
.roster-head { font-size: 13px; font-weight: 700; color: #757580; }
.roster-head b:nth-child(n + 3), .roster-row span:nth-child(n + 3) { text-align: right; }
.roster-row { padding-top: 10px; padding-bottom: 10px; font-size: 15px; border-bottom: 1px solid #1c1c1e; }
.roster-row span:first-child { font-weight: 700; color: #8e8d93; }
.roster-row .win, .roster-row .loss { font-weight: 700; }
.roster-head--league, .roster-row--league { grid-template-columns: minmax(0, 1fr) 28px 32px 28px 28px; }
.roster-row--league span:first-of-type { color: #faf9f6; text-align: right; }
.roster-row--league b small { display: block; font-size: 12px; font-weight: 400; color: #8e8d93; }
.winrate { margin-left: 10px; font-size: 15px; color: #8e8d93; }
.winrate b { color: #fff; }
.hist-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #1c1c1e; font-size: 14px; }
.hist-row small { display: block; font-size: 12px; color: #8e8d93; margin-top: 2px; }

/* Favorites sheet */
.dimmed { filter: brightness(0.42); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 6;
  background: #1c1c1f; border-radius: 36px 36px 0 0; padding-top: 7px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), inset 0 0.6px 0 rgba(255, 255, 255, 0.12);
}
.sheet__grabber { display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.sheet__title { display: flex; align-items: center; justify-content: space-between; padding: 24px 18px 4px; }
.sheet__h { font-size: 28px; font-weight: 900; letter-spacing: -0.01em; }
.fav-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 8px 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.fav-row__text { flex: 1; min-width: 0; }
.fav-row__text b { display: block; font-size: 16px; }
.fav-row__text span { display: block; font-size: 14px; font-weight: 600; color: #8e8d93; margin-top: 2px; }
.fav-row__star { width: 44px; display: grid; place-items: center; }
.fav-row__star .i { width: 24px; height: 24px; }
.js .stage--fav .fav-bar { transform: scaleY(0); transition: transform 0.6s var(--ease); }
.js .stage--fav.is-in .fav-bar { transform: none; }
.js .stage--fav.is-in .st-row:nth-child(1) .fav-bar { transition-delay: 0.3s; }
.js .stage--fav.is-in .st-row:nth-child(3) .fav-bar { transition-delay: 0.45s; }
.js .stage--fav.is-in .st-row:nth-child(4) .fav-bar { transition-delay: 0.6s; }
.js .stage--fav .fav-row { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s var(--ease); transition-delay: calc(var(--i) * 0.1s + 0.6s); }
.js .stage--fav.is-in .fav-row { opacity: 1; transform: none; }

/* Search */
.search-band { display: flex; gap: 10px; align-items: center; padding: 0 16px 14px; }
.search-band--solo { padding-top: 4px; }
.search-field {
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 22px; background: #1c1c1e; font-size: 16px; font-weight: 600; color: rgba(235, 235, 245, 0.6);
}
.search-field .i { width: 17px; height: 17px; }
.search-field--active { color: #fff; }
.caret { width: 2px; height: 20px; margin-left: -6px; border-radius: 1px; background: var(--accent); animation: blink 1s steps(1) infinite; }
.season-chip { display: flex; align-items: center; gap: 5px; height: 44px; padding: 0 14px; border-radius: 22px; font-size: 15px; font-weight: 500; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.18); white-space: nowrap; }
.season-chip .i { width: 12px; height: 12px; }
.group { padding: 0 16px 18px; }
.group__head { margin: 0 0 8px 4px; font-size: 14px; font-weight: 700; color: #8e8d93; }
.group__card { border-radius: 24px; background: #1c1c1e; overflow: hidden; }
.fed-row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) 13px; align-items: center; gap: 12px; padding: 14px 16px; box-shadow: inset 0 -0.6px 0 rgba(84, 84, 89, 0.55); }
.fed-row b { font-size: 16px; font-weight: 600; }
.fed-row > span:not(.flag) { font-size: 14px; font-weight: 600; color: #8e8d93; }
.fed-row:has(.fed-row__grid) { grid-template-columns: 24px minmax(0, 1fr) 13px; }
.fed-row__chev { width: 13px; height: 13px; color: #757580; }
.fed-row__grid { width: 22px; height: 22px; color: var(--accent); }
.flag { width: 24px; height: 17px; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 0.6px rgba(255, 255, 255, 0.35); }
.flag i { flex: 1; }
.segmented { display: flex; margin: 4px 16px 12px; padding: 2px; border-radius: 20px; background: rgba(118, 118, 128, 0.24); }
.segmented span { flex: 1; padding: 7px 0; border-radius: 18px; text-align: center; font-size: 14px; font-weight: 600; }
.segmented .is-active { background: #636366; }
.club-list { padding-top: 2px; }
.club-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease), opacity 0.35s; }
.club-row > b, .club-row > svg { min-height: 0; }
.club-row {
  grid-template-columns: minmax(0, 1fr) 13px; align-items: center; column-gap: 8px;
  padding: 0 16px; border-bottom: 1px solid #1c1c1e; overflow: hidden;
}
.club-row b { padding: 14px 0; font-size: 16px; font-weight: 600; }
.club-row mark { background: none; color: var(--accent); }
.club-row.is-hidden { grid-template-rows: 0fr; opacity: 0; border-color: transparent; }
.club-row.is-hidden b { padding: 0; }

/* Widgets: home & lock screen */
.homescreen, .lockscreen {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 45% at 20% 25%, rgba(0, 91, 187, 0.7), transparent 70%),
    radial-gradient(60% 50% at 85% 75%, rgba(139, 108, 255, 0.55), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(90, 170, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #0b1020, #120c22);
}
.homescreen { padding: 76px 24px 0; }
.hs-widget { margin-bottom: 18px; }
.js .stage--widgets .hs-widget { opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.6s, transform 0.8s var(--ease); transition-delay: calc(var(--i) * 0.15s + 0.3s); }
.js .stage--widgets.is-in .hs-widget { opacity: 1; transform: none; }
.hs-label { display: block; margin-top: 6px; text-align: center; font-size: 12px; font-weight: 500; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.hs-apps { display: grid; grid-template-columns: repeat(4, 62px); justify-content: space-between; padding: 0 6px; }
.hs-app img { width: 62px; height: 62px; border-radius: 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.widget { border-radius: 24px; background: #000; padding: 13px 14px; box-shadow: 0 0 0 0.6px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.widget--m { height: 172px; overflow: hidden; }
.w-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.w-head b { display: block; font-size: 13px; }
.w-head small { display: block; font-size: 9px; color: rgba(255, 255, 255, 0.6); margin-top: 1px; }
.w-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #1c1c1f; }
.w-btn .i { width: 13px; height: 13px; }
.w-thead, .w-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 26px 28px; align-items: center; padding-left: 10px; }
.w-thead { font-size: 10px; color: #757580; padding-bottom: 1px; }
.w-thead b:nth-last-child(-n + 2), .w-row span:nth-last-child(-n + 2) { text-align: right; }
.w-row { padding-top: 3px; padding-bottom: 3px; font-size: 12px; font-weight: 700; }
.w-row .fav-bar { border-radius: 1px; }
.w-p { font-weight: 900; }
.w-games { display: grid; gap: 2px; margin-top: 4px; }
.w-game { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; }
.w-game b:last-of-type { text-align: right; }
.w-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.w-mid small { font-size: 9px; color: #757580; }
.w-badge { padding: 2px 8px; border-radius: 3px; background: rgba(43, 43, 46, 0.6); font-size: 11px; font-weight: 700; }
.w-badge i { font-style: normal; padding: 0 1px; }
.lockscreen { text-align: center; padding-top: 70px; color: #fff; }
.ls-inline { font-size: 15px; font-weight: 600; opacity: 0.88; }
.ls-date { margin-top: 4px; font-size: 21px; font-weight: 600; }
.ls-clock { font-size: 108px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-top: -2px; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.82)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-widgets { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.ls-circ { width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ls-circ b { font-size: 20px; line-height: 1; }
.ls-circ small { font-size: 9px; font-weight: 600; margin-top: 2px; }
.ls-rect { width: 176px; height: 72px; padding: 7px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); text-align: left; display: grid; align-content: center; gap: 1px; }
.ls-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 4px; font-size: 12px; font-weight: 700; opacity: 0.65; font-variant-numeric: tabular-nums; }
.ls-row.is-own { opacity: 1; }

/* Mini UIs in the bento cards (1:1 points) */
.mini { font: 400 15px/1.25 var(--font); color: #faf9f6; letter-spacing: -0.01em; }
.mini .day-head { padding-top: 4px; }
.ls-item small { display: block; padding: 4px 16px 0; font-size: 12px; color: #8e8d93; }
.tn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #1c1c1e; }
.tn-row b { display: block; font-size: 15.5px; font-weight: 600; }
.tn-row small { display: block; margin-top: 2px; font-size: 12.5px; color: #8e8d93; }
.tn-row em { font-style: normal; }
.tn-row .soon { color: var(--loss); }
.tn-row__medal { width: 20px; height: 20px; color: var(--accent); }
.mini--seasons { display: flex; justify-content: center; padding: 6px 0; }
.season-menu { width: 230px; padding: 6px 0; border-radius: 16px; background: rgba(40, 40, 44, 0.96); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 0.6px rgba(255, 255, 255, 0.12); }
.season-menu__head { padding: 6px 16px 4px 44px; font-size: 13px; color: #8e8d93; }
.season-menu__item { position: relative; padding: 9px 16px 9px 44px; font-size: 16px; }
.season-menu__item + .season-menu__item { box-shadow: inset 0 0.6px 0 rgba(255, 255, 255, 0.08); }
.season-menu__item .i { position: absolute; left: 16px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; }
.map { position: relative; height: 150px; border-radius: 14px; overflow: hidden; margin: 0 12px; }
.map svg { width: 100%; height: 100%; }
.map__pin { position: absolute; left: 50%; top: 50%; width: 24px; height: 32px; margin: -32px 0 0 -12px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.map__pin .i { width: 24px; height: 32px; }
.venue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; font-size: 14px; }
.venue-row small { font-size: 12.5px; color: #8e8d93; }
.venue-row__btn { width: 30px; height: 30px; color: #8e8d93; }

/* 7. Chart card (web version of the Spielverlauf) -------------------------------- */
.chapter--report { grid-template-columns: minmax(0, 1fr) !important; }
.chapter__text--wide { max-width: 760px; }
.report-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; --k: 0.62; }
.report-stage__phone { display: flex; justify-content: center; }
.report-stage__phone .device { --k: inherit; }
@media (min-width: 560px) { .report-stage { --k: 0.7; } }
@media (min-width: 1024px) { .report-stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); --k: 0.72; } }
.chart-card {
  position: relative; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius);
  background: linear-gradient(180deg, #111115, #0b0b0e);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px rgba(0, 0, 0, 0.4);
}
.chart-card__score { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 2vw, 18px); font-variant-numeric: tabular-nums; }
.chart-card__score > span { display: flex; align-items: center; gap: 8px; font-size: clamp(14px, 1.6vw, 18px); font-weight: 600; color: var(--text-2); }
.chart-card__score > span:last-child { justify-content: flex-end; }
.chart-card__score b { font-size: clamp(48px, 7vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.chart-card__score b:first-of-type { color: var(--home); }
.chart-card__score b:last-of-type { color: var(--away); }
.chart-card__score em { font-style: normal; font-size: clamp(32px, 4vw, 52px); color: var(--text-3); font-weight: 300; }
.chart--big { width: 100%; margin: 26px 0 0; }
.chart--big text { font-size: 13px; fill: #6f6f78; }
.chart--big .ch-line { stroke-width: 2.6; }
.ch-hit { fill: transparent; cursor: pointer; }
.ch-dot { transform-box: fill-box; transform-origin: center; }
.chart--big .ch-dot.is-sel { transform: scale(1.65); }
.chart-card__caption { min-height: 1.5em; margin-top: 14px; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chart-card__caption b { color: var(--text); }
.chart-card__list { display: grid; gap: 2px; margin-top: 20px; counter-reset: m; }
@media (min-width: 720px) { .chart-card__list { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.ch-match {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 9px 12px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  font-size: 14px; color: var(--text-2); transition: background 0.2s;
}
.ch-match:hover { background: rgba(255, 255, 255, 0.04); }
.ch-match[aria-pressed="true"] { background: rgba(90, 170, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(90, 170, 255, 0.35); }
.ch-match__n { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ch-match__names { display: flex; flex-direction: column; min-width: 0; }
.ch-match__names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-match__names .won { color: var(--text); font-weight: 600; }
.ch-match__score { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* 8. More / iPad / privacy / download ------------------------------------------- */
.more, .devices, .privacy { max-width: 1240px; margin: 0 auto; padding: clamp(96px, 14vw, 180px) var(--gutter) 0; }
.more__head, .devices__head, .privacy__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.devices__head, .privacy__head { margin-inline: auto; text-align: center; }
.devices__head .eyebrow, .privacy__head .eyebrow { justify-content: center; }
.devices__head .chapter__body { margin: 0 auto; }

.bento { display: grid; gap: 16px; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento__card--wide { grid-column: span 2; } .bento__card--full { grid-column: 1 / -1; } }
.bento__card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 26px; border-radius: var(--radius);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
@media (hover: hover) { .bento__card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 50px rgba(0, 0, 0, 0.35); } }
.bento__card h3 { padding: 12px 12px 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.bento__card h3 + p { padding: 0 12px; color: var(--text-2); font-size: 16px; max-width: 34em; }
.bento__ui { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 170px; padding: 10px 0; border-radius: 18px; background: #080808; overflow: hidden; }
.bento__card--full { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .bento__card--full { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bento__card--full .bento__ui { min-height: 230px; } }

.devices__stage { display: flex; justify-content: center; padding-bottom: 20px; }

.privacy__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .privacy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .privacy__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.privacy__grid li { padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.privacy__grid .i { width: 30px; height: 30px; color: var(--accent); margin-bottom: 18px; }
.privacy__grid h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.privacy__grid p { color: var(--text-2); font-size: 15.5px; }
.privacy__link { text-align: center; margin-top: 28px; }

.download { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(110px, 16vw, 200px) var(--gutter) clamp(90px, 12vw, 150px); overflow: clip; }
.download__glow { position: absolute; left: 50%; top: 40%; width: min(900px, 140vw); height: 600px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(90, 170, 255, 0.16), rgba(139, 108, 255, 0.08) 55%, transparent); pointer-events: none; z-index: -1; }
.download__icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 20px 60px rgba(90, 120, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); margin-bottom: 34px; }
.download h2 { margin-top: 0; }
.download__text { font-size: clamp(17px, 1.6vw, 21px); color: var(--text-2); margin-bottom: 30px; }
.download__req { margin-top: 18px; font-size: 13px; color: var(--text-3); }

/* 9. Footer & legal pages --------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); }
.footer__inner { max-width: 1240px; margin: 0 auto; padding: 56px var(--gutter) 32px; display: grid; gap: 40px; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.footer__brand { display: flex; gap: 16px; align-items: flex-start; }
.footer__brand img { border-radius: 11px; }
.footer__name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.footer__tagline { color: var(--text-2); font-size: 15px; max-width: 26em; margin-top: 4px; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer__head { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.footer__cols li + li { margin-top: 4px; }
.footer__cols a { display: inline-block; padding: 4px 0; color: var(--text-2); text-decoration: none; font-size: 15px; transition: color 0.2s; word-break: break-word; }
.footer__cols a:hover { color: var(--text); }
.footer__base { max-width: 1240px; margin: 0 auto; padding: 22px var(--gutter) 44px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 13px; color: var(--text-3); }
.footer__source { max-width: 60em; }

.legal { max-width: 780px; margin: 0 auto; padding: 128px var(--gutter) 96px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
.legal__meta { margin-top: 14px; color: var(--text-3); font-size: 14px; }
.legal__intro { margin-top: 28px; font-size: 19px; color: var(--text-2); }
.legal h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; margin: 56px 0 14px; scroll-margin-top: 80px; }
.legal h3 { font-size: 18px; font-weight: 650; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0; padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--text-3); }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--text); word-break: break-word; }
.legal__toc { margin-top: 36px; padding: 22px 26px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.legal__toc h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.legal__toc ol { list-style: decimal; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; }
.legal__toc li { font-size: 15px; margin: 0 0 6px; break-inside: avoid; }
.legal__toc a { color: var(--text-2); text-decoration: none; }
.legal__toc a:hover { color: var(--text); }
.legal__table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.legal__table th { color: var(--text); font-weight: 600; white-space: nowrap; }
.legal__table-wrap { overflow-x: auto; }
.todo { display: inline; padding: 1px 6px; border-radius: 6px; background: rgba(255, 214, 10, 0.14); color: var(--draw); font-weight: 600; }
.notfound { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.notfound .link-arrow { margin-top: 20px; }

/* 10. Motion ------------------------------------------------------------------------ */
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); }
.js [data-reveal="stage"]:not(.is-in) { transform: translateY(70px) scale(0.965); }
.js [data-reveal] { transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .hero [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.js .stage .device, .js .devices__stage .device { transition: transform 0.6s var(--ease); }
@media (hover: hover) { .stage .device:hover { transform: translateY(-6px); } }
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
.hero__front { transform: translate3d(-66%, var(--py, 0px), 0); }
.hero__back { transform: translate3d(-6%, calc(54px + var(--py, 0px)), 0) rotate(7deg); }
@media (min-width: 1024px) {
  .hero__front { transform: translate3d(-74%, var(--py, 0px), 0); }
  .hero__back { transform: translate3d(12%, calc(70px + var(--py, 0px)), 0) rotate(7deg); }
}

@keyframes letter-in { from { opacity: 0; filter: blur(7px); transform: translateX(-18px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes device-in { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1.18, 0.78); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  12% { transform: translateY(-4px) scale(0.95, 1.06); }
  50% { transform: translateY(-18px) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  90% { transform: translateY(-2px) scale(0.96, 1.05); }
}
@keyframes bat-dip { 0%, 100% { translate: 0 0.75px; } 20%, 80% { translate: 0 0; } }
@keyframes bat-tilt { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes num-flash { 0% { color: #faf9f6; } 18% { color: var(--win); } 100% { color: #faf9f6; } }
@keyframes row-glow { 0% { background: transparent; } 20% { background: rgba(159, 193, 49, 0.16); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .hero__glow { animation: none; }
  .js [data-reveal]:not(.is-in), .js [data-reveal="stage"]:not(.is-in) { opacity: 1; transform: none; }
  .caret { animation: none; }
}

/* Rankings pager (four standings pages; site.js slides between them) */
.pager { position: relative; height: 620px; }
.pager__page { position: absolute; inset: 0 0 auto; }
.pager__page:not(.is-active) { display: none; }
.pager--js .pager__page { display: block; transition: transform 0.5s var(--ease-io), opacity 0.4s; }
.pager--js .pager__page.is-before { transform: translateX(-30%); opacity: 0; }
.pager--js .pager__page.is-after { transform: translateX(30%); opacity: 0; }

/* The big chart's viewBox is 640 wide: on phones it renders at ~half size, so scale its type up. */
@media (max-width: 599px) {
  .chart--big text { font-size: 22px; }
  .chart--big .ch-line { stroke-width: 4; }
  .chart--big .ch-dot { r: 7px; }
  .chart--big .ch-grid { stroke-width: 1; }
  .ch-match { padding: 7px 10px; }
}