/* Stadio — design tokens & utilities */

/* Locally packaged OFL faces; no runtime font CDN or tracking requests. */
@import url('./assets/fonts/fonts.css');

:root {
  --stadio-safe-top: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --stadio-safe-bottom: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --stadio-safe-left: max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --stadio-safe-right: max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
  /* Club-night palette, with paper reserved for fixture slips. */
  --bg:           #080E0B;
  --bg-1:         #0C1510;
  --bg-2:         #142019;
  --bg-3:         #223329;
  --card:         #142019;
  --card-hover:   #1B2C22;
  --line:         rgba(255,255,255,0.07);
  --line-strong:  rgba(255,255,255,0.12);

  --text:         #FFFFFF;
  --text-2:       #DCE7DF;
  --text-3:       #A7B9AD;
  --text-4:       #82988A;

  /* Apple semantic — refined */
  --green:        #77E6A3;
  --green-dim:    #248A3D;
  --green-bg:     rgba(48, 209, 88, 0.16);

  --gold:         #E1C894;
  --gold-dim:     #A88A00;
  --ticket:       #EDF2E9;
  --ticket-ink:   #142D22;

  --live:         #FF453A;
  --blue:         #0A84FF;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --font-sans: 'Barlow', -apple-system, system-ui, sans-serif;
  --font-disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: #050706;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Mobile-first: a real mobile app would never let the user select chrome
     text, drag images, or zoom with a double-tap. We treat the whole surface
     like a native UI; inputs/text inside still get explicit overrides below. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Re-enable selection where users actually want it. */
input, textarea, [contenteditable="true"],
.onb-legal-body, .standings-name, .pw-legal {
  -webkit-user-select: text;
  user-select: text;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  /* Kill iOS Safari's tap delay + grey flash; press feedback comes from our
     own :active transforms instead. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Smooth momentum scroll inside any scrollable surface — drawers, sheets,
   the main screen area, the standings table, the team picker grid. */
.app, .app * {
  -webkit-overflow-scrolling: touch;
}

/* Backdrop scenography */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  overflow: auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, oklch(0.30 0.08 152 / 0.45), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, oklch(0.28 0.08 75 / 0.18), transparent 65%),
    #050706;
}
.stage::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
.stage > * { position: relative; z-index: 1; }

/* Auto-scale phone on small viewports — JS sets --scale */
.phone-scaler {
  --scale: 1;
  width: calc(402px * var(--scale));
  height: calc(874px * var(--scale));
  position: relative;
}
.phone-scaler > * {
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* App background — inside the iOS frame.
   `height: 100%` + `overflow: hidden` keeps the TabBar visually pinned at the
   bottom: the inner scroll area is the only thing that scrolls, the TabBar is
   a non-flex sibling that never gets pushed off-screen.

   `assets/bg.jpg` is a stadium-themed backdrop — if the file is missing the
   solid `--bg` color shows through, so the app still works without the asset. */
.app {
  background:
    linear-gradient(180deg, rgba(8,14,11,0.92), rgba(8,14,11,0.98)),
    url('logos/background.webp') center 40% / cover no-repeat,
    var(--bg);
  height: 100%;
  max-height: 100%;
  color: var(--text);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-size: 12px;
  text-underline-offset: 3px;
}

/* Mobile uses the real viewport; only the desktop device preview is scaled. */
@media (max-width: 768px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .stage.stage-mobile {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    overflow: hidden;
  }
  .stage.stage-mobile::before { display: none; }
  .stage.stage-mobile .phone-scaler {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .stage.stage-mobile .phone-scaler > .app {
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: none;
  }
  /* Safe area for iOS notch/home indicator. */
  .stage.stage-mobile .tabbar {
    padding-bottom: calc(12px + var(--stadio-safe-bottom));
  }
  /* Hide the Tweaks panel on mobile — desktop-only demo affordance. */
  .twk-panel { display: none !important; }
}

/* Android always uses the app shell, including tablet and landscape windows. */
html.stadio-native, html.stadio-native body { height: 100%; overflow: hidden; }
.stadio-native .stage.stage-mobile {
  padding: 0; min-height: 100vh; min-height: 100dvh;
  height: 100vh; height: 100dvh; overflow: hidden; background: #050706;
}
.stadio-native .stage.stage-mobile::before { display: none; }
.stadio-native .stage.stage-mobile .phone-scaler {
  width: 100%; max-width: 600px; height: 100vh; height: 100dvh; overflow: hidden;
}
.stadio-native .stage.stage-mobile .phone-scaler > .app {
  width: 100%; height: 100%; min-height: 0; transform: none;
}
.stage-mobile .app { padding-left: var(--stadio-safe-left); padding-right: var(--stadio-safe-right); }
.stadio-native .stage-mobile .tabbar { padding-bottom: calc(12px + var(--stadio-safe-bottom)); }
.top-header { padding: 54px 20px 14px; }
.stage-mobile .top-header { padding-top: calc(20px + var(--stadio-safe-top)); }

/* Touch targets ≥ 44px (Apple HIG) — the tab buttons & sheet buttons already
   exceed this through padding; we just nudge plan/picker cards a hair. */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
}

/* ─────────────────────────────────────────────
   Accessibility — keyboard focus + reduced motion
   ───────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--green) 70%, transparent);
  outline-offset: 2px;
  border-radius: inherit;
}
.tab:focus-visible::before {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.score-input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pitch-bg, .brand-glow { animation: none !important; }
}

/* ─────────────────────────────────────────────
   Onboarding overlay — 4-step flow surface
   ───────────────────────────────────────────── */
.onb-overlay {
  position: absolute; inset: 0; z-index: 200;
  background:
    radial-gradient(60% 50% at 50% 30%, color-mix(in oklch, var(--green) 18%, transparent), transparent 65%),
    #050706;
  display: flex; flex-direction: column;
  padding: calc(40px + var(--stadio-safe-top)) calc(28px + var(--stadio-safe-right)) calc(28px + var(--stadio-safe-bottom)) calc(28px + var(--stadio-safe-left));
  animation: fade-in 0.3s ease;
  overflow-y: auto;
}

/* Splash */
.onb-splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
}
.onb-splash-glyph {
  position: relative;
  margin-bottom: 22px;
  filter: drop-shadow(0 14px 30px color-mix(in oklch, var(--green) 38%, transparent));
}
.onb-splash-glyph::before {
  content: '';
  position: absolute;
  inset: -20% -20% -10% -20%;
  background: radial-gradient(50% 50% at 50% 60%, color-mix(in oklch, var(--green) 28%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.onb-splash-sub {
  margin-top: 14px;
  font-size: 15px; line-height: 1.4;
  color: var(--text-2); font-weight: 500;
  max-width: 290px;
}
.onb-splash-chips {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  max-width: 290px;
}

/* Step body wrapper (KVKK / Cycle / Team / Legal) */
.onb-body {
  flex: 1;
  padding-top: 12px;
  min-height: 0; /* allow inner scroll */
}
.onb-eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.onb-heading {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  margin-top: 8px;
}
.onb-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 10px;
  line-height: 1.4;
  font-weight: 500;
}

/* KVKK consent card list */
.onb-consent-list {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Cycle step list */
.onb-cycle-list {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.onb-cycle-step {
  display: flex;
  gap: 14px;
  padding: 14px 14px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--green) 10%, var(--card)),
    color-mix(in oklch, var(--green) 4%, var(--card)));
  border: 1px solid color-mix(in oklch, var(--green) 22%, var(--line));
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 16px -8px color-mix(in oklch, var(--green) 24%, transparent);
}
.onb-cycle-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: linear-gradient(180deg, #34D960 0%, #1E8A3D 100%);
  color: #032010;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 4px 10px -3px color-mix(in oklch, var(--green) 50%, transparent);
}
.onb-cycle-key {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.onb-cycle-val {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.35;
}

/* Search input */
.onb-search-wrap {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text-3);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onb-search-wrap:focus-within {
  border-color: color-mix(in oklch, var(--green) 50%, var(--line-strong));
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
}
.onb-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
}

/* Team picker grid (3-col, fits 18 teams in 6 rows) */
.onb-team-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.onb-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.15s ease,
              background 0.15s ease,
              box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.onb-team-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px -6px rgba(0,0,0,0.4);
}
.onb-team-card.on {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--green) 16%, var(--card)),
    color-mix(in oklch, var(--green) 6%, var(--card)));
  border-color: var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px color-mix(in oklch, var(--green) 20%, transparent),
    0 8px 22px -6px color-mix(in oklch, var(--green) 40%, transparent);
}
.onb-team-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -0.01em;
}
.onb-empty {
  margin-top: 20px;
  padding: 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}

/* Legal text body (KVKK / Terms drill-down) */
.onb-legal-body {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  font-weight: 500;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.onb-legal-body p { margin: 0 0 12px; }

/* ─────────────────────────────────────────────
   3D button — embossed primary CTA
   Use `btn btn-primary btn-3d` for the elevated variant.
   ───────────────────────────────────────────── */
.btn-3d {
  position: relative;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #3FE36C 0%, #1E8A3D 100%);
  color: #032010;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.4),
    0 10px 22px -6px color-mix(in oklch, var(--green) 50%, transparent),
    0 4px 10px -2px rgba(0,0,0,0.4);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-3d::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 4px;
  height: 38%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-3d:hover { filter: brightness(1.04); }
.btn-3d:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.4),
    0 4px 10px -4px color-mix(in oklch, var(--green) 40%, transparent);
}
.btn-3d:disabled {
  filter: grayscale(0.4) brightness(0.7);
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────
   Standings (puan durumu) + league switcher
   ───────────────────────────────────────────── */
.standings-view {
  padding: 0 16px 20px;
}

/* League switcher chip-bar */
.lg-switcher {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--line);
  color: var(--text-2);
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.lg-chip:hover { border-color: var(--line-strong); }
.lg-chip.on {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--green) 22%, var(--card)),
    color-mix(in oklch, var(--green) 8%, var(--card)));
  border-color: var(--green);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 12px -4px color-mix(in oklch, var(--green) 36%, transparent);
}
.lg-chip.placeholder {
  opacity: 0.55;
}
.lg-flag {
  font-size: 14px;
  line-height: 1;
}
.lg-name {
  font-size: 12px;
}
.lg-soon {
  font-size: 8px;
  font-weight: 800;
  color: var(--gold);
  background: color-mix(in oklch, var(--gold) 16%, transparent);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  margin-left: 2px;
}

/* Standings title row */
.standings-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 4px 12px;
  gap: 12px;
}
.standings-eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.16em;
}
.standings-title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 4px;
  line-height: 1;
}
.standings-week {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.standings-week-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 2px;
}

/* Standings table */
.standings-table {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.standings-head,
.standings-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px;
  font-size: 12px;
}
.standings-head {
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.standings-row {
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
}
.standings-row:last-child { border-bottom: none; }
.standings-row:hover { background: rgba(255,255,255,0.02); }
.standings-row.me {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--green) 14%, transparent),
    transparent);
}
.standings-row.me .standings-name { color: var(--green); }

.standings-rank {
  width: 28px;
  height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 13px;
  color: var(--text-2);
  position: relative;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
/* Zone accents — left edge bar */
.standings-rank::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
}
.standings-rank.zone-ucl-direct::before  { background: linear-gradient(180deg, #34D960, #1E8A3D); }
.standings-rank.zone-ucl-quali::before   { background: linear-gradient(180deg, #1E8A3D, #145C29); }
.standings-rank.zone-uel::before         { background: linear-gradient(180deg, #FFD60A, #B88800); }
.standings-rank.zone-uecl::before        { background: linear-gradient(180deg, #5AC8FA, #0A84FF); }
.standings-rank.zone-relegation::before  { background: linear-gradient(180deg, #FF453A, #A11209); }

.standings-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.standings-num {
  width: 22px;
  text-align: center;
  color: var(--text-2);
  font-weight: 600;
}
.standings-num-wide {
  width: 32px;
}
.standings-pts {
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}

/* Zone legend (under table) */
.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0 4px;
}
.zone-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
}
.zone-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.zone-dot.zone-ucl-direct  { background: linear-gradient(180deg, #34D960, #1E8A3D); }
.zone-dot.zone-ucl-quali   { background: linear-gradient(180deg, #1E8A3D, #145C29); }
.zone-dot.zone-uel         { background: linear-gradient(180deg, #FFD60A, #B88800); }
.zone-dot.zone-uecl        { background: linear-gradient(180deg, #5AC8FA, #0A84FF); }
.zone-dot.zone-relegation  { background: linear-gradient(180deg, #FF453A, #A11209); }

/* Form (last 5) */
.standings-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.standings-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.standings-form-rank {
  width: 20px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  font-family: var(--font-disp);
  text-align: center;
}
.standings-form-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
}
.form-dots {
  display: inline-flex;
  gap: 4px;
}
.form-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: white;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.3);
}
.form-dot.form-w { background: linear-gradient(180deg, #34D960, #1E8A3D); }
.form-dot.form-d { background: linear-gradient(180deg, #8E8E93, #5A5A5F); }
.form-dot.form-l { background: linear-gradient(180deg, #FF453A, #A11209); }

/* Empty (placeholder league) */
.standings-empty {
  padding: 36px 24px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
}
.standings-empty-flag {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.standings-empty-title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}
.standings-empty-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ── shared atoms ─────────────────────────────────── */
.h-disp {
  font-family: var(--font-disp);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
}

.kbd-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip.live {
  background: color-mix(in oklch, var(--live) 22%, transparent);
  color: var(--live);
}
.chip.live::before {
  content:'';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: pulse 1.4s infinite;
}
.chip.derby {
  background: color-mix(in oklch, var(--gold) 18%, transparent);
  color: var(--gold);
}
.chip.locked { color: var(--text-3); }
.chip.green {
  background: color-mix(in oklch, var(--green) 22%, transparent);
  color: var(--green);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--live) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Team badge: a stylized "rosette" circle with team colors */
.team-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: white;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.team-badge::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Elite Tab Bar — liquid glass + 3D depth
   ───────────────────────────────────────────── */
.tabbar {
  position: relative;
  z-index: 30;
  flex-shrink: 0; /* never compress — keeps the bar pinned at the bottom */
  padding: 10px 10px 26px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.92) 70%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.tabbar::before {
  /* hairline highlight at the very top */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
/* The inner grid is now just a layout container — each .tab is its own
   glass card (matches the badge rail design language). No unified bg, no
   shared border; the bar's outer .tabbar still provides the backdrop blur. */
.tabbar-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Each tab = standalone pill card (mockup-style: large icon on top,
   label below, generous internal padding). */
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  min-height: 78px;
  border-radius: 16px;
  background: rgba(20, 20, 22, 0.7);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.tab-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab svg {
  width: 44px; height: 44px;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active tab — bright green ring + outer green halo + slight elevation. */
.tab.active {
  color: #FFFFFF;
  background:
    radial-gradient(120% 110% at 50% 0%,
      color-mix(in oklch, var(--green) 20%, transparent),
      transparent 60%),
    linear-gradient(180deg,
      rgba(28, 36, 30, 0.85),
      rgba(14, 18, 16, 0.85));
  border-color: color-mix(in oklch, var(--green) 80%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px color-mix(in oklch, var(--green) 60%, transparent),
    0 0 0 3px color-mix(in oklch, var(--green) 18%, transparent),
    0 10px 28px -6px color-mix(in oklch, var(--green) 60%, transparent),
    0 4px 12px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}
.tab.active .tab-icon-wrap {
  transform: translateY(-1px) scale(1.04);
}
.tab.active svg {
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.6))
    drop-shadow(0 0 12px color-mix(in oklch, var(--green) 65%, transparent));
}

/* Press feedback (mobile-first — replaces hover) */
.tab:active {
  transform: scale(0.96);
}

/* Hover for desktop demo only */
@media (hover: hover) and (pointer: fine) {
  .tab:not(.active):hover {
    color: var(--text-2);
    border-color: var(--line-strong);
    background: rgba(28, 28, 30, 0.75);
  }
  .tab:not(.active):hover svg {
    transform: scale(1.05);
  }
}

/* Score input pill */
.score-input {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  text-align: center;
  outline: none;
  transition: all 0.15s ease;
}
.score-input:focus, .score-input.filled {
  border-color: var(--green);
  background: color-mix(in oklch, var(--green) 10%, transparent);
}
.score-input:disabled { opacity: 0.5; }

/* Live score number */
.score-live {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Big stadium title hero */
.hero-stadio {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: -0.04em;
  line-height: 0.85;
  background: linear-gradient(180deg, #F2F2EC 0%, #6E7A72 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* progressive minute bar */
.minute-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.minute-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--live);
  border-radius: 2px;
}

/* "lock" stripe — diagonal */
.lock-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.025) 0 8px,
    transparent 8px 18px
  );
}

/* button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--green);
  color: #06120B;
}
.btn-primary:hover { background: oklch(0.72 0.16 152); }
.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid var(--line);
}

/* Scrollbar hide */
.app *::-webkit-scrollbar { display: none; }
.app * { scrollbar-width: none; }

/* Toast */
.offline-banner { padding: 8px 16px; font-size: 12px; line-height: 1.5; color: var(--gold); }
.account-restore { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 100%; padding: 24px; box-sizing: border-box; }
.account-restore h1 { font-size: 24px; margin: 0; }
.account-restore p { color: var(--text-3); line-height: 1.5; }
.restore-skeleton { display: grid; gap: 12px; }
.restore-skeleton span { height: 64px; border-radius: 12px; background: var(--line-strong); animation: fade-in .6s ease; }
.toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(92px + var(--stadio-safe-bottom, 0px));
  background: rgba(20, 28, 23, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 4px 8px 4px 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 100;
  display: flex; align-items: center; gap: 8px;
  animation: toast-in 0.25s ease;
}
.toast-error { background: rgba(47, 19, 24, 0.98); border-color: #b44f60; }
.toast-icon { width: 20px; height: 20px; flex: 0 0 20px; color: #a3c9ff; }
.toast-icon svg { width: 100%; height: 100%; }
.toast-error .toast-icon { color: #ff98a8; }
.toast-success .toast-icon { color: var(--green); }
.toast-message { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.toast-dismiss { flex: 0 0 44px; min-width: 44px; min-height: 44px; font-size: 24px; color: inherit; }
.toast-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 8px; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Slide enter */
.fade-in {
  animation: fade-in 0.25s ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────
   3D + Animations
   ───────────────────────────────────────────────────────── */

/* Stadium pitch background — inline SVG via data URI in hero card */
.pitch-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in oklch, var(--green) 18%, transparent), transparent 70%),
    repeating-linear-gradient(90deg,
      color-mix(in oklch, var(--green) 9%, transparent) 0 28px,
      color-mix(in oklch, var(--green) 5%, transparent) 28px 56px);
  opacity: 0.55;
  pointer-events: none;
}
.pitch-bg::after {
  /* Center circle + halfway line */
  content: '';
  position: absolute; left: 50%; bottom: -42px;
  transform: translateX(-50%);
  width: 120px; height: 120px;
  border: 1.5px solid color-mix(in oklch, var(--green) 28%, transparent);
  border-radius: 50%;
}

/* Match card — 3D depth */
.match-card {
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in oklch, var(--bg-1) 60%, var(--card)) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease,
              border-color 0.18s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.4),
    0 4px 14px rgba(0,0,0,0.25);
  cursor: pointer;
}
.match-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 4px rgba(0,0,0,0.5),
    0 12px 30px rgba(0,0,0,0.4);
}
.match-card:active { transform: translateY(0); }
.match-card.locked {
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.018) 0 8px, transparent 8px 18px),
    linear-gradient(180deg, var(--card) 0%, color-mix(in oklch, var(--bg-1) 60%, var(--card)) 100%);
}

/* Live match — soft red highlight, no animation */
.match-card.live {
  border-color: color-mix(in oklch, var(--live) 22%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.4),
    0 6px 18px rgba(0,0,0,0.3);
}

/* Derby — gold edge */
.match-card.derby {
  border-color: color-mix(in oklch, var(--gold) 32%, var(--line));
  background:
    radial-gradient(140% 100% at 50% 0%, color-mix(in oklch, var(--gold) 8%, transparent), transparent 60%),
    linear-gradient(180deg, var(--card) 0%, color-mix(in oklch, var(--bg-1) 60%, var(--card)) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px color-mix(in oklch, var(--gold) 16%, transparent),
    0 8px 24px rgba(0,0,0,0.5);
}

/* Skeleton shimmer loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Team badge — embossed crest holder */
.team-badge {
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-disp);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: white;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.4),
    0 0 0 1px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}
.team-badge svg {
  display: block;
}
.match-card:hover .team-badge { transform: scale(1.04); }

/* Score number — punch with shadow */
.score-live {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.04em;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  display: inline-flex; align-items: baseline;
}
.score-live.goal-flash {
  animation: goal-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes goal-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); color: var(--gold); text-shadow: 0 0 18px var(--gold); }
  100% { transform: scale(1); }
}

/* Live chip — pulsing dot */
.chip.live::before { animation: pulse 1.4s infinite; }

/* Hero card scoreboard — luminous numbers */
.scoreboard-num {
  font-family: var(--font-disp);
  font-weight: 900;
  background: linear-gradient(180deg, #FFFFFF 0%, #B9C2BC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
}


/* Stadium banner — animated gradient mesh */
.brand-glow {
  position: absolute;
  inset: -40px -40px auto -40px;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.brand-glow::before, .brand-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: drift 14s ease-in-out infinite alternate;
}
.brand-glow::before {
  left: -20px; top: -30px;
  width: 320px; height: 220px;
  background: radial-gradient(circle, color-mix(in oklch, var(--green) 50%, transparent), transparent 70%);
}
.brand-glow::after {
  right: -30px; top: 30px;
  width: 260px; height: 200px;
  background: radial-gradient(circle, color-mix(in oklch, var(--gold) 24%, transparent), transparent 70%);
  animation-delay: -7s;
}
@keyframes drift {
  0% { transform: translate(0,0); }
  100% { transform: translate(40px, 30px); }
}

/* Score input animations */
.score-input {
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.score-input.filled {
  animation: score-pop 0.3s ease;
}
@keyframes score-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Onboarding logo animation */
.onb-letter {
  display: inline-block;
  animation: onb-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes onb-rise {
  from { opacity: 0; transform: translateY(20px) rotateX(-30deg); }
  to { opacity: 1; transform: none; }
}

/* Page transition */
.screen-enter {
  animation: screen-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* Number tick */
.tick-up {
  display: inline-block;
  animation: tick-up 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tick-up {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Trophy icon glow */
.icon-glow-gold {
  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--gold) 50%, transparent));
}

/* Plan card 3D */
.plan-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.3);
}
.plan-card.active {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--green) 12%, var(--card)),
    color-mix(in oklch, var(--green) 4%, var(--card)));
  border-color: color-mix(in oklch, var(--green) 38%, var(--line));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px color-mix(in oklch, var(--green) 14%, transparent),
    0 8px 22px rgba(0,0,0,0.4);
}
.plan-card.popular {
  border-color: color-mix(in oklch, var(--gold) 28%, var(--line));
}

/* Hero stadium wordmark — gradient + glow. Sized for ~360px viewports. */
.hero-stadio {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 58px;
  letter-spacing: -0.03em;
  line-height: 0.9;
  background: linear-gradient(180deg, #F2F2EC 0%, #6E7A72 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px color-mix(in oklch, var(--green) 38%, transparent));
}

/* Leaderboard row hover */
.lb-row {
  transition: background 0.15s ease;
}
.lb-row:hover { background: rgba(255,255,255,0.025); }

/* "RIBBON" — winning podium effect on rank 1 */
.rank-medal {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 18px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-3);
}
.rank-medal[data-rank="1"] {
  background: linear-gradient(135deg, #F2C200 0%, #B88800 100%);
  color: #1A1100;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--gold) 30%, transparent);
}
.rank-medal[data-rank="2"] {
  background: linear-gradient(135deg, #DDE2DC 0%, #919791 100%);
  color: #1F2521;
  box-shadow: 0 4px 12px rgba(190,190,200,0.2);
}
.rank-medal[data-rank="3"] {
  background: linear-gradient(135deg, #E18A4A 0%, #8C5126 100%);
  color: #2A1408;
}

/* Trophy-style hero — used in Group screen */
.podium-hero {
  position: relative;
  padding: 18px 16px;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklch, var(--gold) 14%, transparent), transparent 65%),
    linear-gradient(180deg, var(--card), color-mix(in oklch, var(--bg-1) 50%, var(--card)));
  border: 1px solid color-mix(in oklch, var(--gold) 24%, var(--line));
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 12px 24px -10px color-mix(in oklch, var(--gold) 32%, transparent);
}
.podium-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 30%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Paywall — Apple/Google compliant
   ───────────────────────────────────────────── */
.paywall {
  display: flex; flex-direction: column;
  height: 100%;
  font-family: var(--font-sans);
}

.pw-hero {
  position: relative;
  padding: 18px 22px 22px;
  text-align: center;
  overflow: hidden;
}
.pw-hero-bg {
  position: absolute; inset: -40px -40px auto -40px; height: 280px;
  background:
    radial-gradient(60% 80% at 50% 0%, color-mix(in oklch, var(--gold) 32%, transparent), transparent 65%),
    radial-gradient(40% 60% at 20% 100%, color-mix(in oklch, var(--green) 20%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: 0.7;
  pointer-events: none;
}
.pw-crest {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFE166 0%, #B88800 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.2),
    0 12px 28px -6px rgba(255, 214, 10, 0.4),
    0 2px 6px rgba(0,0,0,0.3);
}
.pw-eyebrow {
  position: relative;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 8px;
}
.pw-title {
  position: relative;
  font-family: var(--font-disp);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 10px;
}
.pw-sub {
  position: relative;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  font-weight: 500;
}

.pw-benefits {
  padding: 6px 20px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.pw-benefit {
  display: flex; align-items: flex-start; gap: 12px;
}
.pw-benefit-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--green) 18%, transparent), color-mix(in oklch, var(--green) 8%, transparent));
  border: 0.5px solid color-mix(in oklch, var(--green) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pw-benefit-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pw-benefit-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

.pw-period {
  margin: 8px 20px 14px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.pw-period-opt {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s ease;
}
.pw-period-opt.on {
  background: linear-gradient(180deg, #FFFFFF 0%, #E5E5E5 100%);
  color: #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.pw-save-badge {
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(180deg, #30D158 0%, #248A3D 100%);
  color: #052610;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}

.pw-plans {
  padding: 0 20px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.pw-plan {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--line);
  transition: all 0.18s ease;
  text-align: left;
}
.pw-plan.on {
  background: linear-gradient(180deg, color-mix(in oklch, var(--green) 14%, rgba(255,255,255,0.02)), rgba(255,255,255,0.02));
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 6px 18px -4px color-mix(in oklch, var(--green) 24%, transparent);
}
.pw-plan-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.pw-plan.on .pw-plan-radio {
  background: var(--green);
  border-color: var(--green);
}
.pw-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.pw-tag {
  font-size: 9px; font-weight: 800; color: var(--gold);
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: color-mix(in oklch, var(--gold) 14%, transparent);
  border-radius: 4px;
}
.pw-plan-meta {
  font-size: 11px; color: var(--text-3);
  margin-top: 2px;
}
.pw-plan-price {
  font-family: var(--font-disp);
  font-size: 22px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.pw-plan-month {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pw-cta-wrap {
  margin-top: auto;
  padding: 14px 20px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  border-top: 0.5px solid var(--line);
}
.pw-cta {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #34D960 0%, #248A3D 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 8px 24px -4px color-mix(in oklch, var(--green) 36%, transparent),
    0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.08s ease;
}
.pw-cta:active { transform: scale(0.98); }
.pw-cta > span:first-child {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em;
}
.pw-cta-meta {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: -0.01em;
}
.pw-legal {
  margin-top: 12px;
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
}
.pw-legal-links {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
}
.pw-legal-links button {
  font-size: 11px; font-weight: 600; color: var(--blue);
  background: none;
}
.pw-legal-links span { color: var(--text-4); font-size: 10px; }

/* ─────────────────────────────────────────────
   Reference-design utility classes (additive)
   green eyebrow above headings, generous spacing,
   scoreboard-grade numerics, helper text under CTAs.
   ───────────────────────────────────────────── */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.eyebrow.gold { color: var(--gold); }
.eyebrow.mute { color: var(--text-3); }
.eyebrow.live { color: var(--live); }
.eyebrow::before {
  display: none;
}

.helper-text {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.45;
  margin-top: 8px;
  font-weight: 500;
}

/* Reference-design "surface card" — softer 1px border, generous padding */
.surface-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.surface-card.gradient-green {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklch, var(--green) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in oklch, var(--green) 6%, var(--card)), var(--card) 72%);
  border-color: color-mix(in oklch, var(--green) 28%, var(--line));
}
.surface-card.gradient-gold {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklch, var(--gold) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in oklch, var(--gold) 6%, var(--card)), var(--card) 72%);
  border-color: color-mix(in oklch, var(--gold) 30%, var(--line));
}

/* Scoreboard digit — big, tabular, light-to-dark gradient */
.score-board {
  font-family: var(--font-disp);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  background: linear-gradient(180deg, #FFFFFF 0%, #98A39C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  text-shadow: 0 2px 14px rgba(48,209,88,0.10);
}
.score-board.gold {
  background: linear-gradient(180deg, #FFE787 0%, #C29800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 14px rgba(255,214,10,0.18);
}

/* Big gold rank medallion used in Group hero */
.rank-coin {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: #1A1100;
  background:
    radial-gradient(60% 60% at 35% 30%, #FFF3A8 0%, transparent 60%),
    linear-gradient(140deg, #FFE066 0%, #E5A800 55%, #8C6500 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.22),
    0 10px 22px -6px color-mix(in oklch, var(--gold) 50%, transparent),
    0 2px 5px rgba(0,0,0,0.4);
  position: relative;
  flex-shrink: 0;
}
.rank-coin::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}

/* Section eyebrow + heading pair (used everywhere) */
.section-head {
  padding: 22px 20px 12px;
}
.section-head .eyebrow { margin-bottom: 8px; }
.section-head h2 {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.section-head .sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.4;
}

/* CTA pill — bottom of card */
.cta-pill {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #34D960 0%, #248A3D 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 8px 22px -6px color-mix(in oklch, var(--green) 38%, transparent),
    0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.08s ease;
}
.cta-pill:active { transform: scale(0.985); }
.cta-pill.ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

/* Reference-design tab pill row */
.ref-tabs {
  display: flex;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  gap: 2px;
}
.ref-tabs button {
  flex: 1;
  padding: 10px 8px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: -0.005em;
  transition: all 0.18s ease;
}
.ref-tabs button.on {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.25);
}
.ref-tabs button.on.green {
  background: linear-gradient(180deg, #34D960 0%, #248A3D 100%);
  color: #06120B;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 4px 14px -4px color-mix(in oklch, var(--green) 40%, transparent);
}

/* Season card visual: question + gold price + current pick + chevron */
.season-question {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.season-question .q-title {
  font-family: var(--font-disp);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.season-question .q-points {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.season-question .q-points .unit {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  display: block;
  margin-top: 4px;
  opacity: 0.85;
}

.season-pick-tray {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}
.season-pick-tray.filled {
  border-style: solid;
  border-color: color-mix(in oklch, var(--green) 26%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--green) 6%, transparent), transparent 70%),
    rgba(255,255,255,0.025);
}
.season-pick-tray .empty-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.season-pick-tray .change-cta {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Profile plan list — scannable */
.plan-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  position: relative;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.plan-row:hover { border-color: var(--line-strong); }
.plan-row.current {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--green) 10%, var(--card)), var(--card) 75%);
  border-color: color-mix(in oklch, var(--green) 36%, var(--line));
}
.plan-row.popular {
  border-color: color-mix(in oklch, var(--gold) 32%, var(--line));
}
.plan-tier-dot {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.plan-row.current .plan-tier-dot {
  background: linear-gradient(180deg, color-mix(in oklch, var(--green) 28%, transparent), color-mix(in oklch, var(--green) 10%, transparent));
  border-color: color-mix(in oklch, var(--green) 38%, transparent);
}
.plan-row.popular .plan-tier-dot {
  background: linear-gradient(180deg, color-mix(in oklch, var(--gold) 28%, transparent), color-mix(in oklch, var(--gold) 10%, transparent));
  border-color: color-mix(in oklch, var(--gold) 38%, transparent);
}

/* You-are-here card on Turkey ranking — dramatic */
.you-here {
  position: relative;
  padding: 22px 20px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(160% 110% at 20% 0%, color-mix(in oklch, var(--green) 28%, transparent), transparent 55%),
    radial-gradient(140% 100% at 100% 100%, color-mix(in oklch, var(--gold) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #11201A 0%, #0A0F0D 100%);
  border: 1px solid color-mix(in oklch, var(--green) 32%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 36px -10px color-mix(in oklch, var(--green) 28%, transparent);
}
.you-here::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in oklch, var(--green) 6%, transparent) 0 28px,
      color-mix(in oklch, var(--green) 2%, transparent) 28px 56px);
  opacity: 0.55;
  pointer-events: none;
}
.you-here > * { position: relative; }

/* ─────────────────────────────────────────────
   Glass cards — show 30% of the app bg image through every surface card.
   `--card-alpha` is the opacity of the card fill (0.7 = 30% transparent).
   Bump it to 0.85 for "barely transparent" or down to 0.5 for "very glassy".
   ───────────────────────────────────────────── */
:root {
  --card-alpha: 0.96;
  --card-fill: rgba(20, 32, 25, var(--card-alpha));
  --card-fill-strong: #101B14;
  --glass-blur: none;
}

/* Base flat card surfaces */
.card,
.standings-table,
.standings-form-row,
.standings-empty,
.onb-team-card,
.plan-card {
  background: var(--card-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Cards with their own gradient (agent's redesign + match card + paywall) —
   reapply the gradient over a translucent base. Color-mix lets us tint without
   re-deriving every recipe. */
.match-card {
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--card-fill) 70%, transparent) 0%,
      color-mix(in oklch, rgba(10,10,12, var(--card-alpha)) 60%, var(--card-fill)) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.match-card.locked {
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.018) 0 8px, transparent 8px 18px),
    linear-gradient(180deg,
      color-mix(in oklch, var(--card-fill) 70%, transparent),
      color-mix(in oklch, rgba(10,10,12, var(--card-alpha)) 60%, var(--card-fill)));
}
.match-card.derby {
  background:
    radial-gradient(140% 100% at 50% 0%, color-mix(in oklch, var(--gold) 10%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklch, var(--card-fill) 70%, transparent),
      color-mix(in oklch, rgba(10,10,12, var(--card-alpha)) 60%, var(--card-fill)));
}

.podium-hero,
.surface-card {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklch, var(--gold) 10%, transparent), transparent 65%),
    var(--card-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.surface-card.gradient-green {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklch, var(--green) 14%, transparent), transparent 65%),
    var(--card-fill);
}
.surface-card.gradient-gold {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklch, var(--gold) 14%, transparent), transparent 65%),
    var(--card-fill);
}

/* KVKK consent cards inside onboarding */
.onb-consent-list > label {
  background: var(--card-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Cycle step (3D number row) — preserve its green tint, drop the opacity */
.onb-cycle-step {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--green) 12%, var(--card-fill)),
    color-mix(in oklch, var(--green) 4%, var(--card-fill)));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* TabBar — keep the bar fully opaque so navigation is always readable.
   The inner grid (.tabbar-inner) stays glassy as the iOS look intended. */
.tabbar {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 60%);
}

/* Sheet backdrop already 60% black — leave the sheet body opaque since long
   text + numeric keypad benefit from a stable surface */
.app .sheet-body, .app [class*="sheet"] > div { /* no-op selector for safety */ }

/* Standings rank chip + form dots stay solid (small pills with text on top) */
.standings-rank, .form-dot, .rank-medal { backdrop-filter: none; }


/* Six navigation destinations share one row, including narrow phones. */
.tabbar-inner { gap: 4px; }
.tab { min-width: 0; min-height: 68px; padding: 9px 1px 8px; font-size: 9.5px; gap: 4px; }
.tab-icon-wrap, .tab svg { width: 32px; height: 32px; }

/* Native banners reserve their measured height below navigation. */
.app { padding-bottom: var(--stadio-ad-height, 0px); box-sizing: border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.membership-panel { font-size:14px; line-height:1.65; }
.membership-panel p { color:var(--text-2); margin:10px 0; }
.membership-panel button { min-height:44px; }
.membership-panel th, .membership-panel td { padding:8px 5px; border-bottom:1px solid var(--line); }

.content-safety label{display:grid;gap:6px;font-size:13px}
.content-safety select,.content-safety textarea{width:100%;min-height:44px;padding:10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2,#17251e);color:var(--text);font:inherit}
.content-safety textarea{min-height:90px;resize:vertical}
.content-safety p{font-size:13px;line-height:1.6}

.recovery-screen{box-sizing:border-box;min-height:100dvh;max-width:600px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:calc(32px + var(--stadio-safe-top,0px)) 24px calc(32px + var(--stadio-safe-bottom,0px));text-align:center;background:#050706;color:#f3f7f4}.recovery-screen h1{font-size:24px;margin:0}.recovery-screen p{max-width:360px;margin:0;color:#b6c4bd}.recovery-screen button{min-height:48px;margin-top:8px}

.auth-challenge{display:grid;justify-items:center;gap:8px;margin:12px 0;font-size:12px;line-height:1.5;text-align:center;color:var(--text-3)}.auth-challenge p{margin:0;max-width:300px}.auth-challenge button{min-height:44px}

/* Stadio Sport: one featured fixture, quiet progress, readable match surfaces. */
:root {
 --bg:#111416;--bg-1:#191D21;--bg-2:#1C2125;--bg-3:#292F34;
 --card:#1C2125;--card-hover:#242A2F;--card-fill:#1C2125;--card-fill-strong:#22282D;
 --text:#F4F6F8;--text-2:#D7DDE2;--text-3:#ABB5BD;--text-4:#99A6B0;
 --line:rgba(205,219,231,.09);--line-strong:rgba(205,219,231,.17);
 --green:#B4F5CD;--green-bg:rgba(180,245,205,.10);--gold:#DEC99D;
 --font-disp:'Barlow',-apple-system,system-ui,sans-serif;
}
.app { background:var(--bg); }
.h-disp { font-weight:600; }
.eyebrow { font-size:12px;font-weight:600;letter-spacing:0;text-transform:none; }
.brand-glow,.pitch-bg { display:none; }
.top-header { border:0; }
.sport-matches .top-header { padding:19px 20px 13px;align-items:center !important; }
.stage-mobile .sport-matches .top-header { padding-top:calc(20px + var(--stadio-safe-top)); }
.stadio-native .stage.stage-mobile { background:var(--bg); }
.sport-matches .top-header>div>div:first-child { display:none !important; }
.sport-matches .top-header .h-disp { font-size:28px !important;letter-spacing:-.04em !important; }
.sport-brand { display:inline-flex;align-items:center;gap:9px;font-weight:600; }
.sport-group-link { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:12px;color:var(--text-2);font-size:12px;font-weight:600; }
.ref-tabs { background:var(--bg-2);border:0;border-radius:12px;padding:4px;gap:4px; }
.ref-tabs button { min-height:44px;border:0 !important;border-radius:9px;font-size:12px;font-weight:600;color:var(--text-3);line-height:1.3; }
.ref-tabs button.on,.ref-tabs button.on.green { background:var(--bg-3) !important;color:var(--text) !important;box-shadow:none; }
.sport-matches>.ref-tabs { background:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin-bottom:12px !important;gap:22px; }
.sport-matches>.ref-tabs button { flex:0 0 auto !important;padding:12px 0 !important;font-size:15px !important;border-bottom:2px solid transparent !important;border-radius:0 !important;background:transparent !important; }
.sport-matches>.ref-tabs button.on { border-bottom-color:var(--text) !important; }
.week-page { flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--text-3); }
.week-page[aria-selected=true] { background:var(--bg-3);color:var(--text);border-color:var(--line-strong); }
.sport-feature { margin:0 20px 15px; }
.match-card { --text:#F4F6F8;--text-2:#D7DDE2;--text-3:#ABB5BD;--text-4:#99A6B0;--green:#B4F5CD;--gold:#DEC99D;--live:#FF8895;--red:#FF8895;--line:rgba(205,219,231,.09);--line-strong:rgba(205,219,231,.17);background:#1C2125;border:1px solid var(--line);border-radius:16px;padding:16px;gap:14px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:border-color .16s,transform .16s; }
.match-card.locked { background:#191D21;background-image:none; }
.match-card.derby { background:#1C2125;border-color:rgba(222,201,157,.25);box-shadow:none; }
.match-card.live { border-color:rgba(255,136,149,.5);box-shadow:inset 3px 0 #FF8895; }
.match-card:hover { transform:none;border-color:var(--line-strong);box-shadow:none; }
.match-card:active { transform:scale(.992); }
.match-card:focus-visible { outline:2px solid var(--green);outline-offset:3px; }
.match-card .score-live { background:none;-webkit-text-fill-color:currentColor;color:var(--text);text-shadow:none; }
.match-card .match-prediction { position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-strong);padding-top:12px;margin-top:0; }
.match-card .match-prediction-label { display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;color:var(--text-3); }
.match-card .match-prediction-action { border-radius:9px;background:rgba(180,245,205,.10);color:var(--green);padding:8px 11px;font-size:12px;font-weight:600;flex-shrink:0; }
.match-card.featured { position:relative;isolation:isolate;overflow:hidden;min-height:254px;padding:19px 18px 16px;border:1px solid #3D4D5D;gap:20px;background:#1B2734; }
.match-card.featured::before { content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(9,17,28,.66),rgba(9,17,28,.42) 48%,rgba(9,17,28,.94)),url('/assets/matchday-stadium.webp') 68% 58%/cover; }
.match-card.featured .match-prediction { margin-top:auto;border:0;padding-top:0;flex-wrap:wrap; }
.match-card.featured .match-prediction-label { width:100%;justify-content:center;color:var(--text-2);font-size:11px; }
.match-card.featured .match-prediction-action { width:100%;text-align:center;background:var(--green);color:#11251A;min-height:48px;padding:13px 14px;font-size:14px; }
.match-card.featured .team-badge { width:46px !important;height:46px !important; }
.match-card.featured .team-badge>svg { width:46px !important;height:46px !important; }
.match-card.featured .chip { background:rgba(13,24,36,.75);color:#F0DFC0; }
.match-card.featured>div { text-shadow:0 1px 4px rgba(0,0,0,.25); }
.match-card.featured .match-prediction-action { text-shadow:none; }
.match-card:hover .team-badge { transform:none; }
.team-badge,.team-badge::after { box-shadow:none; }
.team-badge svg ellipse { display:none; }
.team-badge>span { font-weight:600 !important;font-size:10px;text-shadow:0 1px 3px #000000;letter-spacing:0 !important; }
.week-summary { margin:0 20px;padding:0 0 12px;border-bottom:1px solid var(--line); }
.week-summary-stats { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.week-summary-stats>div { display:flex;align-items:center;gap:8px;min-width:0; }
.week-summary-stats>div+div { border-left:1px solid var(--line);padding-left:16px; }
.week-summary-stats strong { font-size:23px;font-weight:600;line-height:1.3;flex-shrink:0;font-variant-numeric:tabular-nums; }
.week-summary-stats span { color:var(--text-3);font-size:11px;line-height:1.35;max-width:90px; }
.week-summary-stats small { font-size:14px;color:var(--green); }
.sport-nudge { border:0 !important;background:transparent !important;padding:10px 0 0 !important;margin-top:7px !important;font-size:11px !important;min-height:44px; }
.sport-nudge>svg { display:none; }
.sport-nudge strong { color:var(--text-2) !important; }
.sport-fixture-empty { margin:0 20px 20px;overflow:hidden;border-radius:18px;background:var(--bg-2); }
.sport-fixture-empty>img { width:100%;height:166px;object-fit:cover;display:block; }
.sport-fixture-empty>div { padding:20px; }
.sport-fixture-empty h2 { margin:0 0 10px;font-size:21px;font-weight:600; }
.sport-fixture-empty p { color:var(--text-3);font-size:14px;line-height:1.6;margin:0 0 18px; }
.sport-fixture-empty .btn { width:100%; }
.btn { min-height:48px;border-radius:12px;font-weight:600;line-height:1.4;box-shadow:none; }
.btn-primary,.btn-3d { background:var(--green);border:1px solid var(--green);color:#11251A;box-shadow:none; }
.btn-3d::before { display:none; }
.btn-primary:hover,.btn-3d:hover { background:#CEF9DE;box-shadow:none; }
.btn-primary:active,.btn-3d:active { transform:scale(.985);box-shadow:none; }
.btn-ghost { background:var(--bg-2);color:var(--text-2);border:1px solid var(--line-strong); }
.btn:disabled { opacity:.45;cursor:default; }
.card,.surface-card,.plan-card,.podium-hero { background:var(--bg-2);border:1px solid var(--line);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.surface-card.gradient-green { background:var(--bg-2);border-color:var(--line); }
.surface-card.gradient-gold { background:var(--bg-2);border-color:rgba(222,201,157,.2); }
.score-board,.score-board.gold { background:none;color:var(--text);-webkit-text-fill-color:currentColor;text-shadow:none; }
.rank-coin { background:#D7C59E;border-radius:14px;box-shadow:none; }
.rank-coin::before,.rank-coin::after { display:none; }
.rank-medal { border-radius:8px;box-shadow:none; }
.rank-medal[data-rank="1"] { background:#D7C59E;box-shadow:none; }
.rank-medal[data-rank="2"] { background:#B8C2CB;box-shadow:none; }
.rank-medal[data-rank="3"] { background:#BD986D;box-shadow:none; }
.tabbar { background:rgba(17,20,22,.98);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none; }
.tabbar::before { display:none; }
.tabbar-inner { gap:2px; }
.tab { min-height:58px;padding:8px 2px 6px;border:0;border-radius:0;background:transparent;font-size:10px;font-weight:600;gap:5px;color:var(--text-3);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:color .16s; }
.tab-icon-wrap,.tab svg { width:23px;height:23px;transform:none; }
.tab.active { color:var(--green);background:transparent;transform:none;border:0;box-shadow:none; }
.tab.active .tab-icon-wrap { transform:none; }
.tab.active svg { filter:none; }
.tab:hover { border-color:transparent;background:transparent;color:var(--text); }
.chip { font-size:10px;font-weight:600;letter-spacing:0;padding:5px 8px; }
.chip.green { background:rgba(180,245,205,.10); }
.chip.derby { background:rgba(222,201,157,.12); }
.source-note { margin:18px 20px;color:var(--text-3);font-size:11px;line-height:1.5; }
.source-note a { color:var(--text-2);text-underline-offset:3px; }
input:not([type=checkbox]):not([type=radio]),textarea,select { font-family:var(--font-sans);font-size:16px; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--green);outline-offset:2px; }
.onb-team-card { border-radius:14px; }
.onb-team-card.on { box-shadow:0 0 0 1px rgba(180,245,205,.2); }
.paywall-intro { display:grid;justify-items:center;text-align:center;gap:10px;padding:12px 0 24px; }
.paywall-intro h2 { margin:0;font-size:28px;line-height:1.15;letter-spacing:-.035em; }
.paywall-intro p,.paywall-free p,.paywall-option p { margin:8px 0 0;color:var(--text-3);font-size:13px;line-height:1.6; }
.paywall-option { cursor:pointer;transition:border-color .15s,background .15s; }
.paywall-option.selected { background:#23322B; }
.paywall-option input[type=radio] { accent-color:var(--green);width:20px;height:20px; }
.paywall-option>p:last-child strong { color:var(--text);font-size:24px;font-variant-numeric:tabular-nums; }
.paywall-content>a { display:inline-block;min-height:44px;padding-block:10px;color:var(--green);font-size:12px; }
.sport-auth { padding-top:calc(22px + var(--stadio-safe-top)) !important; }
.auth-brand-scene { min-height:150px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:24px;border-radius:18px;margin-bottom:26px;background:linear-gradient(90deg,rgba(9,17,28,.8),rgba(9,17,28,.08)),url('/assets/matchday-stadium.webp') 65% 55%/cover; }
.auth-brand-scene>span { font-size:30px;font-weight:600;letter-spacing:-.04em;color:#FFFFFF; }
.sport-profile .membership-panel h2 { font-size:20px;margin-bottom:10px; }
.membership-panel summary { min-height:44px;padding:9px 0;cursor:pointer;color:var(--text-3);font-size:13px; }
.season-overview { display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px; }
.season-overview>.eyebrow { display:block !important;font-size:14px; }
.season-overview>div:nth-child(2) { margin-top:0 !important;gap:0 !important; }
.season-overview .icon-glow-gold { display:none; }
.season-overview .score-board { font-size:32px !important;color:var(--text); }
.season-overview .score-board>span { font-size:18px !important; }
.season-overview>div:nth-child(3) { grid-column:1/-1;margin-top:6px !important;background:var(--bg-3) !important;border:0 !important; }
.season-overview .helper-text { grid-column:1/-1;text-align:left;line-height:1.6;margin-top:2px !important; }
@media (prefers-reduced-motion:reduce) { .tab,.btn,.match-card { transition:none !important;animation:none !important; } }


/* Compact controls retain a full Android touch target without larger icons. */
.app button { min-width:48px;min-height:48px; }
.app input:not([type=checkbox]):not([type=radio]),.app select { min-height:48px; }
.profile-help a { min-width:48px;min-height:48px; }
.app .membership-panel summary { min-height:48px; }
.badge-rail { scroll-padding-inline:4px; }
.sheet-panel { min-height:0; }
@media (prefers-reduced-motion:reduce) {
 .sheet-overlay,.sheet-panel { animation:none !important; }
}