/* ==========================================================================
   Byb. website: glass theme (matches the app). Dark by default; light via the
   sun/moon button (saved in the browser).
   ========================================================================== */
:root {
  --bg: #09110c; --fg: #e8eee9; --muted: #a9b7ad; --faint: rgba(255,255,255,.22);
  --surf: rgba(255,255,255,.06); --surf-strong: rgba(28,40,32,.72); --edge: rgba(255,255,255,.13); --chip: rgba(255,255,255,.08);
  --hi: inset 0 1px 0 rgba(255,255,255,.09); --shadow: 0 10px 30px rgba(0,0,0,.35); --nav-bg: rgba(9,17,12,.62); --float-bg: rgba(22,34,26,.94);
  --pitch: #2f8a50; --pitch-hi: #3fa565; --pitch-glow: rgba(47,138,80,.40); --pitch-text: #8fdcaa; --pitch-soft: rgba(47,138,80,.18);
  --bib-text: #f08a4b; --blue-text: #8fb0e6; --turf-a: #24603a; --turf-b: #205734;
  --glow-green: rgba(47,138,80,.42); --glow-soft: rgba(47,138,80,.29); --glow-orange: rgba(232,104,31,.24); --glow-blue: rgba(43,79,138,.36);
  --green-card: linear-gradient(140deg, rgba(47,138,80,.66), rgba(16,48,28,.6));
  --warn-bg: rgba(227,176,79,.16); --warn-fg: #f0cf8a; --loss: #f2867e;
  --blur: blur(22px) saturate(160%);
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif; --body: 'Barlow', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #edf2ec; --fg: #17201a; --muted: #4e5a52; --faint: rgba(23,32,26,.18);
  --surf: rgba(255,255,255,.56); --surf-strong: rgba(255,255,255,.80); --edge: rgba(255,255,255,.85); --chip: rgba(23,32,26,.08);
  --hi: inset 0 1px 0 rgba(255,255,255,.9); --shadow: 0 8px 28px rgba(20,63,36,.10), 0 1px 2px rgba(20,63,36,.06); --nav-bg: rgba(237,242,236,.72); --float-bg: rgba(255,255,255,.94);
  --pitch: #1f6b3a; --pitch-hi: #2f8a50; --pitch-glow: rgba(31,107,58,.35); --pitch-text: #1f6b3a; --pitch-soft: rgba(31,107,58,.12);
  --bib-text: #c4520f; --blue-text: #2b4f8a; --turf-a: #2f7d45; --turf-b: #2a7240;
  --glow-green: rgba(31,107,58,.30); --glow-soft: rgba(31,107,58,.21); --glow-orange: rgba(232,104,31,.22); --glow-blue: rgba(43,79,138,.20);
  --green-card: linear-gradient(140deg, rgba(31,107,58,.92), rgba(20,63,36,.84));
  --warn-bg: rgba(227,176,79,.24); --warn-fg: #6e4600; --loss: #b3261e;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; transition: background 400ms ease, color 400ms ease; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #e8681f; outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
[hidden] { display: none !important; }

/* the light behind the glass */
/* the light behind the glass: one fixed, screen-sized layer, so the graphics card only ever holds one screenful of it */
.glows { position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 34% at 8% 4%, var(--glow-green), transparent 70%), radial-gradient(55% 30% at 100% 30%, var(--glow-soft), transparent 70%),
    radial-gradient(60% 32% at 0% 68%, var(--glow-soft), transparent 70%), radial-gradient(60% 30% at 92% 96%, var(--glow-green), transparent 70%); }
.page { position: relative; }
main, footer { position: relative; }

/* glass surfaces */
.glass { background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi), var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.glass-strong { background: var(--surf-strong); border: 1px solid var(--edge); box-shadow: var(--hi), var(--shadow); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }

/* type */
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pitch-text); }
.h2 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5vw, 66px); line-height: .92; }
.muted { color: var(--muted); }

/* buttons */
/* the brand name keeps its own casing inside uppercase labels and buttons */
.brand { text-transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; border-radius: 14px; font-family: var(--display); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.btn-primary { color: #fff; background: linear-gradient(180deg, #2a7d49, #1f6b3a); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px var(--pitch-glow); }
.btn-primary:hover { background: linear-gradient(180deg, #2f8a50, #277543); }
.btn-glass:hover { background: var(--surf-strong); }
.btn-glass { color: var(--fg); background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi), 0 4px 14px rgba(0,0,0,.06); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-big { height: 58px; padding: 0 26px; font-size: 22px; }
.btn-mid { height: 52px; padding: 0 20px; font-size: 20px; }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--fg); background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi); }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--edge); }
.nav-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo .word { overflow: visible; margin-bottom: 1px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: var(--fg); opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-actions .signin { padding: 10px 12px; text-decoration: none; font-weight: 700; font-size: 15px; }
.nav-actions .signin:hover, .foot nav a:hover, .mobile-menu a:hover { color: var(--pitch-text); }
.nav-actions .get { height: 44px; padding: 0 18px; font-size: 18px; border-radius: 12px; }
.menu-btn { display: none; }
.mobile-menu { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; padding-bottom: 16px; }
.mobile-menu a { padding: 12px; border-radius: 12px; text-decoration: none; font-weight: 600; background: var(--surf); border: 1px solid var(--edge); }
.theme-btn .sun { display: block; } .theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
@media (max-width: 880px) { .nav-links, .nav-actions .signin { display: none; } .menu-btn { display: flex; } }

/* hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 72px; padding-bottom: 88px; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.pill { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); }
.pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3f9d61; box-shadow: 0 0 0 4px rgba(63,157,97,.22); position: relative; }
.pill .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(63,157,97,.65); animation: bybPulse 2s ease-out infinite; will-change: transform, opacity; }
@keyframes bybPulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(64px, 9vw, 112px); line-height: .88; }
.hero h1 span { color: var(--pitch-text); }
.lede { margin: 0; max-width: 34em; font-size: 20px; line-height: 1.55; color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--muted); }
.ticks li { display: flex; align-items: center; gap: 7px; }
.ticks svg { color: var(--pitch-text); }
.hero-art { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.float-wrap { position: relative; width: 300px; height: 612px; animation: bybFloat 6s ease-in-out infinite; will-change: transform; }
.float-card { position: absolute; border-radius: 16px; will-change: transform; }
.float-wrap .float-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--float-bg); }
.float-card.why { left: -172px; top: 164px; width: 210px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.float-card.why b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pitch-text); }
.float-card.why span { font-size: 15px; font-weight: 600; line-height: 1.35; }
.float-card.count { right: -120px; top: 592px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.float-card.count .num { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, var(--pitch-hi), var(--pitch)); color: #fff; font: 800 22px var(--display); }
.float-card.count small { display: block; font-size: 13px; color: var(--muted); }
@keyframes bybFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
/* the two cards drift on their own timing, so they move against the phone rather than with it */
.float-card.why { animation: bybDrift 5s ease-in-out -1.2s infinite; }
.float-card.count { animation: bybDrift 7s ease-in-out -3.5s infinite reverse; }
@keyframes bybDrift { 0% { transform: translate(0, 0); } 50% { transform: translate(4px, -12px); } 100% { transform: translate(0, 0); } }
@media (max-width: 1200px) { .float-wrap .float-card.count { right: -60px; } }
@media (max-width: 640px) { .float-wrap .float-card { display: none; } }

/* sections */
.section { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; scroll-margin-top: 72px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.section-head.center { align-self: center; text-align: center; align-items: center; }
.section-head p { margin: 0; color: var(--muted); }

/* why */
.cards { display: flex; flex-wrap: wrap; gap: 18px; }
.problem { flex: 1 1 300px; min-width: 0; padding: 26px; border-radius: 22px; display: flex; flex-direction: column; gap: 14px; }
.problem .n { font: 800 54px/.9 var(--display); color: var(--faint); }
.problem h3 { margin: 0; font: 800 30px/1 var(--display); text-transform: uppercase; }
.problem p { margin: 0; color: var(--muted); flex-grow: 1; }
.fix { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--pitch-soft); border: 1px solid var(--edge); }
.fix b { flex: none; padding: 2px 7px; border-radius: 6px; background: linear-gradient(180deg, var(--pitch-hi), var(--pitch)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.fix span { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* how it works */
.how { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; }
.how-phone { flex: 0 0 300px; height: 612px; }
.steps { flex: 1 1 380px; max-width: 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.step { text-align: left; cursor: pointer; padding: 20px 22px; border-radius: 20px; display: flex; gap: 16px; align-items: flex-start; background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); opacity: .82; transition: background 300ms ease, box-shadow 300ms ease, opacity 300ms ease, border-color 300ms ease; }
.step[aria-pressed="true"] { opacity: 1; background: var(--surf-strong); border-color: var(--pitch-hi); box-shadow: var(--hi), var(--shadow); }
.step .n { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 20px var(--display); background: var(--pitch-soft); color: var(--pitch-text); }
.step[aria-pressed="true"] .n { background: linear-gradient(180deg, var(--pitch-hi), var(--pitch)); color: #fff; }
.step .t { display: block; font: 800 28px/1 var(--display); text-transform: uppercase; }
.step .d { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--muted); }

/* the phone */
.phone { position: relative; width: 300px; height: 612px; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, #26302a, #0c120e); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 40px 80px rgba(0,0,0,.45); }
.screen { --app-ground: #0f1611; position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--app-ground); color: var(--fg); }
:root[data-theme="light"] .screen { --app-ground: #f3f5f1; }
/* the phone shows the app, whose background is a flat colour (no glows): keep these two in step with --ground in site/css/app.css */
.notch { position: absolute; left: 50%; top: 10px; width: 92px; height: 24px; margin-left: -46px; border-radius: 12px; background: #050806; z-index: 5; }
.scr { position: absolute; inset: 0; padding: 46px 14px 14px; display: flex; flex-direction: column; gap: 10px; animation: screenIn 450ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scr .tiny { font-size: 11px; font-weight: 600; color: var(--muted); }
.scr .ttl { font: 800 28px/.9 var(--display); text-transform: uppercase; }
.pc { border-radius: 14px; padding: 12px; background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi); }
.next-card { position: relative; overflow: hidden; border-radius: 16px; padding: 14px; background: var(--green-card); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px rgba(0,0,0,.28); color: #fff; display: flex; flex-direction: column; gap: 9px; }
.next-card .ring { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); }
.next-card > * { position: relative; }
.next-card .row { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.next-card .when { font: 800 34px/.9 var(--display); text-transform: uppercase; }
.inout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.inout span { height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 800 16px var(--display); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.inout .in { background: rgba(255,255,255,.94); color: #1f6b3a; }
.inout .out { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 3px 0 rgba(0,0,0,.18); }
.bar5 { height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.bar5 i { display: block; width: 78%; height: 100%; background: #fff; }
.whos { display: flex; flex-direction: column; gap: 10px; }
.whos .head { display: flex; justify-content: space-between; align-items: center; font: 800 17px var(--display); }
.whos .unpaid { padding: 2px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-fg); font: 700 10px var(--body); }
.avs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.avs span { aspect-ratio: 1; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; border: 1.5px solid transparent; }
.avs .a0 { background: #1f6b3a; } .avs .a1 { background: #2b4f8a; } .avs .a2 { background: #5d6a60; } .avs .owes { border-color: #e3b04f; }
.wait { display: flex; justify-content: space-between; font-size: 12px; padding: 10px 12px; }
.teams-head { display: flex; justify-content: space-between; align-items: flex-end; }
.seg-mini { display: flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--chip); border: 1px solid var(--edge); font-size: 10px; font-weight: 700; }
.seg-mini span { padding: 3px 6px; color: var(--muted); }
.seg-mini .on { border-radius: 6px; background: var(--surf-strong); color: var(--fg); }
.bal { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; }
.bal .nums { display: flex; justify-content: space-between; align-items: baseline; font: 800 20px/1 var(--display); }
.bal .nums small { font-size: 11px; }
.bib-t { color: var(--bib-text); } .blue-t { color: var(--blue-text); }
.splitbar { height: 6px; border-radius: 3px; display: flex; gap: 2px; overflow: hidden; }
.splitbar .a { background: #e8681f; } .splitbar .b { flex-grow: 1; background: #2b4f8a; }

/* pitches */
.pitch { position: relative; overflow: hidden; background: repeating-linear-gradient(180deg, var(--turf-a) 0 34px, var(--turf-b) 34px 68px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pitch .ln { position: absolute; border: 1.5px solid rgba(255,255,255,.5); pointer-events: none; }
.pitch .out { inset: 6px; border-radius: 3px; }
.pitch .half { left: 6px; right: 6px; top: 50%; height: 0; border-width: 1.5px 0 0; }
.pitch .ctr { left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; }
.pitch .boxt { left: 25%; right: 25%; top: 6px; height: 40px; border-top: 0; }
.pitch .boxb { left: 25%; right: 25%; bottom: 6px; height: 40px; border-bottom: 0; }
.mini-pitch { flex-grow: 1; border-radius: 14px; }
.tk { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tk b { width: 28px; height: 28px; border-radius: 50%; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font: 800 14px var(--display); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.tk i { font-style: normal; padding: 0 5px; border-radius: 4px; background: rgba(8,18,11,.84); color: #fff; font-size: 9px; font-weight: 700; white-space: nowrap; }
.tk.A b { background: #e8681f; } .tk.B b { background: #2b4f8a; }
.reason { font-size: 11px; line-height: 1.35; color: var(--muted); }
.ft-title { font: 800 30px/1 var(--display); text-transform: uppercase; text-align: center; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles div { border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); font: 800 14px var(--display); }
.tiles strong { font: 800 66px/.9 var(--display); }
.tiles .ta { background: #f08540; color: #1a0d05; } .tiles .tb { background: #7ea3e0; color: #0b1424; }
.note { border-radius: 12px; padding: 9px 10px; background: var(--pitch-soft); border: 1px solid var(--edge); font-size: 12px; text-align: center; }
.motm { display: flex; flex-direction: column; gap: 7px; padding: 11px; }
.motm .h { font: 800 16px var(--display); }
.motm span { height: 36px; border-radius: 10px; border: 1.5px solid var(--edge); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.motm span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.motm .on { border-color: #3fa565; background: var(--pitch-soft); }
.motm .on::before { border-color: #3fa565; background: #3fa565; box-shadow: inset 0 0 0 2px var(--bg); }
.confirm { margin-top: auto; height: 42px; border-radius: 12px; background: linear-gradient(180deg, #3fa565, #2f8a50); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 16px var(--display); letter-spacing: .04em; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(47,138,80,.35); }
.mini-card { position: relative; overflow: hidden; border-radius: 16px; padding: 14px; background: linear-gradient(150deg, rgba(31,107,58,.94), rgba(20,63,36,.9)); box-shadow: inset 0 0 0 2px #e3b04f, 0 10px 26px rgba(0,0,0,.3); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.mini-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.mini-card .pos { font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.mini-card .name { font: 800 32px/.9 var(--display); text-transform: uppercase; }
.mini-card .ovr { font: 800 56px/.85 var(--display); text-align: right; }
.mini-card .up { font-size: 10px; opacity: .85; text-align: right; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badges span { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 10px; font-weight: 700; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stats3 div { border-radius: 12px; padding: 8px; text-align: center; background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi); }
.stats3 b { display: block; font: 800 24px/1 var(--display); }
.stats3 span { font-size: 10px; color: var(--muted); }
.formrow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.formrow span { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 12px var(--display); background: var(--chip); color: var(--muted); border: 1px solid var(--edge); }
.formrow .W { background: #2f8a50; color: #fff; border-color: #2f8a50; } .formrow .L { color: var(--loss); }
.best { border-radius: 14px; padding: 10px; background: var(--pitch-soft); border: 1px solid var(--edge); display: flex; flex-direction: column; gap: 2px; }
.best small { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--pitch-text); }
.best b { font-size: 14px; font-weight: 600; }

/* picker demo */
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.demo-head .section-head { max-width: 680px; }
.demo-actions { display: flex; gap: 10px; }
.demo { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.roster { flex: 1 1 300px; min-width: 0; padding: 20px; border-radius: 22px; display: flex; flex-direction: column; gap: 14px; }
.roster-head { display: flex; justify-content: space-between; align-items: center; }
.roster-head h3 { margin: 0; font: 800 24px var(--display); }
.roster-head span { padding: 3px 10px; border-radius: 999px; background: var(--pitch-soft); color: var(--pitch-text); font-size: 14px; font-weight: 700; }
.roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-btn { height: 48px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; font-weight: 600; text-align: left; color: var(--muted); background: transparent; border: 1px solid var(--chip); transition: background 200ms ease; }
.pl-btn .tick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--muted); color: #fff; }
.pl-btn .tick svg { display: none; }
.pl-btn .nm { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-btn .rt { font: 800 18px var(--display); }
.pl-btn[aria-pressed="true"] { color: var(--fg); background: var(--surf-strong); border-color: var(--edge); }
.pl-btn[aria-pressed="true"] .tick { background: var(--pitch); border-color: var(--pitch); }
.pl-btn[aria-pressed="true"] .tick svg { display: block; }
.demo-right { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.balance { padding: 16px 20px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; }
.balance .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 800; }
.balance .nums > span { font-size: 20px; }
.balance .nums small { font-size: 15px; color: var(--muted); }
.balance .nums .mid { font-size: 32px; line-height: 1; }
.balance .bar { height: 10px; border-radius: 5px; background: var(--chip); display: flex; gap: 2px; overflow: hidden; }
.balance .bar .a { background: #e8681f; transition: width 600ms ease; }
.balance .bar .b { flex-grow: 1; background: #2b4f8a; }
.balance p { margin: 0; font-size: 14px; color: var(--muted); }
.big-pitch { flex-grow: 1; min-height: 520px; border-radius: 22px; background: repeating-linear-gradient(180deg, var(--turf-a) 0 52px, var(--turf-b) 52px 104px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), var(--shadow); }
.big-pitch .ln { border-width: 2px; }
.big-pitch .out { inset: 10px; border-radius: 6px; }
.big-pitch .half { left: 10px; right: 10px; border-width: 2px 0 0; }
.big-pitch .ctr { width: 110px; height: 110px; margin: -55px 0 0 -55px; }
.big-pitch .boxt { left: 26%; right: 26%; top: 10px; height: 86px; }
.big-pitch .boxb { left: 26%; right: 26%; bottom: 10px; height: 86px; }
.team-tag { position: absolute; left: 20px; padding: 3px 9px; border-radius: 7px; color: #fff; font: 800 14px var(--display); opacity: .45; transition: opacity 300ms ease; }
.team-tag.a { top: 20px; background: #e8681f; } .team-tag.b { bottom: 20px; background: #2b4f8a; }
.picked .team-tag { opacity: 1; }
.big-pitch.landscape { background: repeating-linear-gradient(90deg, var(--turf-a) 0 52px, var(--turf-b) 52px 104px); }
.big-pitch.landscape .half { left: 50%; right: auto; top: 10px; bottom: 10px; width: 0; height: auto; border-width: 0 0 0 2px; }
.big-pitch.landscape .boxt { left: 10px; right: auto; top: 26%; bottom: 26%; width: 86px; height: auto; border-width: 2px 2px 2px 0; }
.big-pitch.landscape .boxb { left: auto; right: 10px; top: 26%; bottom: 26%; width: 86px; height: auto; border-width: 2px 0 2px 2px; }
.big-pitch.landscape .team-tag.b { top: 20px; bottom: auto; left: auto; right: 20px; }
.big-pitch .tk { gap: 4px; transition: left 700ms cubic-bezier(.2,.8,.2,1), top 700ms cubic-bezier(.2,.8,.2,1); }
.big-pitch .tk b { width: 42px; height: 42px; font-size: 19px; box-shadow: 0 3px 10px rgba(0,0,0,.35); background: rgba(255,255,255,.92); color: #143f24; }
.big-pitch .tk i { font-size: 13px; padding: 2px 8px; border-radius: 6px; }
.big-pitch .tk.A b { background: #e8681f; color: #fff; } .big-pitch .tk.B b { background: #2b4f8a; color: #fff; }

/* player card */
.card-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 88px; padding-bottom: 88px; scroll-margin-top: 72px; }
.card-art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }
.flip { width: 340px; height: 470px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; color: #fff; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; text-align: left; }
.front { padding: 26px; background: linear-gradient(150deg, rgba(31,107,58,.94), rgba(20,63,36,.92)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 2px #e3b04f, inset 0 1px 0 rgba(255,255,255,.25), 0 24px 60px rgba(0,0,0,.35); }
.front .deco { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255,255,255,.10); }
.front .top { display: flex; justify-content: space-between; align-items: flex-start; }
.front .ovr { display: block; font: 800 86px/.85 var(--display); }
.front .pos { font-size: 13px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.tier { padding: 4px 9px; border-radius: 7px; background: #e3b04f; color: #2a1d00; font: 800 15px var(--display); }
.front .nm { margin-top: auto; font: 800 52px/.9 var(--display); text-transform: uppercase; }
.attrs { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.attrs span { padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.attrs b { font: 800 24px var(--display); letter-spacing: 0; }
.tap { margin-top: 14px; font-size: 13px; font-weight: 600; opacity: .8; }
.back { transform: rotateY(180deg); gap: 14px; padding: 24px; background: linear-gradient(150deg, rgba(23,42,30,.96), rgba(14,24,18,.96)); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px #e3b04f, 0 24px 60px rgba(0,0,0,.35); }
.back .top { display: flex; justify-content: space-between; align-items: baseline; }
.back .top b { font: 800 26px var(--display); }
.back .top span { font-size: 14px; font-weight: 700; color: #9fe0b4; }
.season { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.season span { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; flex-direction: column; font-size: 13px; }
.season b { font: 800 30px/1 var(--display); }
.form8 { display: flex; gap: 5px; }
.form8 span { flex: 1 1 0; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 800 16px var(--display); background: rgba(255,255,255,.10); color: #c9d6cc; }
.form8 .W { background: #2f8a50; color: #fff; } .form8 .L { color: #f2867e; }
.duo { padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; font-weight: 600; }
.duo small { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.duo.best2 { background: rgba(47,138,80,.25); } .duo.best2 small { color: #9fe0b4; }
.duo.nem { background: rgba(232,104,31,.18); } .duo.nem small { color: #f3b088; }
.card-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.card-copy p { margin: 0; color: var(--muted); font-size: 18px; }
.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.points li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--surf); border: 1px solid var(--edge); box-shadow: var(--hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.points .n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pitch-soft); color: var(--pitch-text); font: 800 18px var(--display); }
.points b { display: block; font-size: 17px; }
.points span.d { color: var(--muted); font-size: 15px; }

/* features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.feature { padding: 26px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; }
.feature .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font: 800 22px var(--display); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px var(--glow); }
.feature .ic.green { background: linear-gradient(180deg, #3fa565, #1f6b3a); --glow: rgba(31,107,58,.35); }
.feature .ic.orange { background: linear-gradient(180deg, #f08a4b, #e8681f); --glow: rgba(232,104,31,.35); }
.feature .ic.blue { background: linear-gradient(180deg, #4f74b3, #2b4f8a); --glow: rgba(43,79,138,.35); }
.feature h3 { margin: 0; font: 800 28px/1 var(--display); text-transform: uppercase; }
.feature p { margin: 0; color: var(--muted); }

/* download */
.download { padding-top: 72px; padding-bottom: 96px; scroll-margin-top: 72px; }
.dl-card { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(32px, 6vw, 72px); background: linear-gradient(140deg, rgba(31,107,58,.92), rgba(20,63,36,.86)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px rgba(20,63,36,.35); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.dl-card .ln1 { position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.14); border-radius: 18px; pointer-events: none; }
.dl-card .ln1::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255,255,255,.12); }
.dl-card .dl-copy, .dl-card .stores { position: relative; z-index: 1; }
.dl-card .ln2 { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); pointer-events: none; }
.dl-copy { position: relative; flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.dl-copy h2 { margin: 0; font: 800 clamp(48px, 6vw, 84px)/.9 var(--display); text-transform: uppercase; }
.dl-copy p { margin: 0; font-size: 19px; opacity: .9; max-width: 30em; }
.stores { position: relative; flex: 0 1 340px; display: flex; flex-direction: column; gap: 10px; }
.store { min-height: 60px; padding: 8px 18px; border-radius: 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); line-height: 1.2; }
.store:hover { background: rgba(255,255,255,.22); }
.store.web:hover { background: #fff; }
.store small { display: block; font-size: 13px; opacity: .85; }
.store b { font-size: 18px; }
.store.web { background: rgba(255,255,255,.94); color: #143f24; box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0,0,0,.18); }

/* footer */
footer { border-top: 1px solid var(--edge); background: var(--nav-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.foot { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; padding-top: 44px; padding-bottom: 44px; }
.foot-brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.foot-brand span.d { color: var(--muted); font-size: 15px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.foot nav.product { flex: 0 1 180px; } .foot nav.contact { flex: 0 1 240px; }
.foot nav a { text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.foot nav .h { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 32px; font-size: 14px; color: var(--muted); }


/* Glass without the live blur: the cards sit over smooth glows, where a blur looks the same but costs graphics memory.
   Only the sticky header keeps a real blur, because the page scrolls underneath it. */
.glass, .glass-strong, .btn-glass, .step, .points li, .store, footer { -webkit-backdrop-filter: none; backdrop-filter: none; }

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

/* ---------------------------------------------------------------- blog
   Used by /blog/ (index) and each article. Pages are generated by tools/blog/build.py. */
.nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--fg); }
.blog-hero { display: flex; flex-direction: column; gap: 14px; padding-top: 72px; padding-bottom: 40px; max-width: 900px; margin: 0 auto 0 0; }
.blog-hero p { margin: 0; font-size: 19px; max-width: 560px; }
.blog-h1 span { color: var(--pitch-text); }
.blog-list { padding-bottom: 96px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; text-decoration: none; transition: transform 160ms ease, border-color 160ms ease; }
.post-card:hover { transform: translateY(-3px); border-color: var(--pitch); }
.post-card h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: .98; }
.post-card p { margin: 0; color: var(--muted); font-size: 16px; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }

.post { max-width: 760px; padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--pitch-text); }
.post-head { display: flex; flex-direction: column; gap: 16px; }
.post-head .pill { margin: 0; }
.post-title { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6.4vw, 68px); line-height: .94; }
.post-lede { margin: 0; font-size: 20px; color: var(--muted); }
.toc { padding: 20px 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; }
.toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.toc a { text-decoration: none; } .toc a:hover { color: var(--pitch-text); }

.prose { font-size: 18px; line-height: 1.68; }
.prose > * { margin: 0 0 1.1em; }
.prose h2 { margin: 1.9em 0 .55em; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.2vw, 42px); line-height: .98; scroll-margin-top: 84px; }
.prose h3 { margin: 1.5em 0 .4em; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.prose a { color: var(--pitch-text); text-underline-offset: 3px; font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: .45em; }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--bib-text); color: var(--muted); font-size: 20px; }
.prose .note { padding: 16px 20px; border-radius: 16px; background: var(--pitch-soft); border: 1px solid var(--edge); font-size: 16px; }
.prose .note p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); }
.prose th { font-family: var(--display); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table-wrap { overflow-x: auto; border-radius: 14px; }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; border-radius: 24px; }
.post-cta > div:first-child { flex: 1 1 280px; }
.post-cta .cta-t { margin: 0 0 6px; font-size: 38px; line-height: .95; }
.post-cta p { margin: 0; color: var(--muted); font-size: 16px; }
.prose .post-cta { margin: 2em 0; }
.blog-more { padding-bottom: 96px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 640px) { .prose { font-size: 17px; } .blog-hero { padding-top: 44px; } .post { padding-top: 24px; } }

/* blog slider on the home page: a row of article cards that scrolls sideways and snaps */
.blog-sec { padding-top: 40px; }
.blog-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.slider-btns { display: flex; gap: 8px; }
.slider-btns .icon-btn[disabled] { opacity: .4; cursor: default; }
.slider { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; padding: 4px 2px 18px; margin: 0 -2px; scrollbar-width: thin; }
.slider .post-card { flex: 0 0 min(340px, 82%); scroll-snap-align: start; }
.slider:focus-visible { outline-offset: -3px; }
@media (max-width: 640px) { .slider-btns { display: none; } }


/* ---------------------------------------------------------------- player card, as in the app
   The tiered trading card (Bronze, Silver, Gold, Legendary holo). Copied from the app's own styles so the two match. */
.holocard { --boost: #9fe0b4; }
/* Player card as a full-art holo trading card (lib/holocard.js). Sized with container units so it scales with the screen. */
.holocard { position: relative; container-type: inline-size; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 300 / 420; border-radius: 14px; overflow: hidden; background: #0b1a11; box-shadow: 0 18px 32px rgba(0,0,0,.4); isolation: isolate; }
.hc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hc-nophoto { display: grid; place-items: center; background: radial-gradient(circle at 80% 0%, rgba(255,251,230,.35), rgba(255,251,230,0) 55%), linear-gradient(180deg, #07120c 0%, #173d25 62%, #22562f 100%); }
.hc-nophoto span { font: 800 46cqw/1 var(--display); color: rgba(255,255,255,.14); margin-top: -18cqw; }
.hc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 46%, rgba(6,14,9,.93) 74%); }
.hc-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--holo);
  background: linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,60,150,.55) 30%, rgba(255,220,60,.55) 38%, rgba(60,255,180,.55) 46%, rgba(60,170,255,.55) 54%, rgba(170,80,255,.55) 62%, rgba(255,255,255,0) 74%);
  background-size: 260% 260%; animation: hc-holo 5s ease-in-out infinite alternate; }
@keyframes hc-holo { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .hc-holo { animation: none; background-position: 50% 50%; } }
.hc-frame { position: absolute; inset: 2.7cqw; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--tier); pointer-events: none; }
.hc-body { --u: calc(100cqw / 300); position: absolute; inset: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 18); display: flex; flex-direction: column; color: #fff; }
.hc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hc-rating { display: flex; flex-direction: column; }
.hc-rating b { font: 800 calc(var(--u) * 64) / .85 var(--display); text-shadow: 0 3px 14px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.hc-rating span { font: 800 calc(var(--u) * 11) var(--body); letter-spacing: .2em; color: var(--tier-line); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.hc-tier { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 6); }
.hc-tier i { font: normal calc(var(--u) * 22) / 1 var(--body); color: var(--tier); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hc-tier span { font: 800 calc(var(--u) * 9.5) var(--body); letter-spacing: .14em; color: var(--tier-ink); background: var(--tier); border-radius: 4px; padding: calc(var(--u) * 2) calc(var(--u) * 6); }
.hc-tier em { font: 600 calc(var(--u) * 10.5) var(--body); font-style: normal; background: rgba(0,0,0,.45); border-radius: 999px; padding: calc(var(--u) * 3) calc(var(--u) * 8); white-space: nowrap; }
.hc-grow { flex: 1 1 auto; }
.hc-name { font: 800 calc(var(--u) * 34) / 1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hc-name.long { font-size: calc(var(--u) * 27); }
.hc-move { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3) calc(var(--u) * 8); margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: #dfe7e1; min-width: 0; }
.hc-move b { white-space: nowrap; }
.hc-desc { flex-basis: 100%; color: #b6c4ba; }
.hc-tag { font: 800 calc(var(--u) * 9.5) var(--body); letter-spacing: .08em; color: #f59a5c; background: rgba(232,104,31,.22); border-radius: 4px; padding: calc(var(--u) * 2) calc(var(--u) * 5); white-space: nowrap; flex: none; }
.hc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); padding-top: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.hc-stats > span { display: flex; flex-direction: column; align-items: center; }
.hc-stats b { font: 800 calc(var(--u) * 20) / 1 var(--display); font-variant-numeric: tabular-nums; display: inline-flex; align-items: flex-start; }
.hc-stats small { font: 700 calc(var(--u) * 9.5) var(--body); letter-spacing: .1em; color: #b6c4ba; }
.hc-up { font: normal 700 calc(var(--u) * 9) var(--body); color: var(--boost); margin-left: 1px; }
.hc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: calc(var(--u) * 8); font: 700 calc(var(--u) * 9) var(--body); letter-spacing: .12em; text-transform: uppercase; color: #93a198; }
.hc-foot span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holocard { --metal: linear-gradient(135deg, #7a4a24 0%, #e2ad7c 28%, #9a6034 50%, #f0c49a 72%, #7a4a24 100%); }
.holocard[data-tier="NEW"] { --metal: linear-gradient(135deg, #1f6b3c 0%, #9fe0b4 30%, #2f8a50 52%, #b8ecc9 74%, #1f6b3c 100%); }
.holocard[data-tier="SILVER"] { --metal: linear-gradient(135deg, #7d8680 0%, #f4f7f5 28%, #a3aca6 50%, #ffffff 72%, #7d8680 100%); }
.holocard[data-tier="GOLD"] { --metal: linear-gradient(135deg, #8f6414 0%, #ffe08a 28%, #c08f2a 50%, #fff1b8 72%, #8f6414 100%); }
.holocard[data-tier="LEGEND"] { --metal: conic-gradient(from 0deg, #ff5fa2, #ffd95f, #5fffc0, #5fb4ff, #b07aff, #ff5fa2); }
/* metal rim round the edge */
.holocard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2cqw; background: var(--metal); pointer-events: none; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.holocard[data-tier="LEGEND"]::after { animation: hc-rainbow 6s linear infinite; }
@keyframes hc-rainbow { to { filter: hue-rotate(360deg); } }
.hc-frame { inset: 3.4cqw; box-shadow: inset 0 0 0 1.5px var(--tier-line); opacity: .8; }
/* tint the photo in the tier colour: a glow at the top and a coloured fade into the stats */
.hc-shade { background:
  radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 70%),
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 44%, color-mix(in srgb, var(--tier) 16%, rgba(6,14,9,.94)) 74%); }
.hc-nophoto { background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--tier) 55%, transparent), transparent 60%),
  linear-gradient(180deg, #07120c 0%, color-mix(in srgb, var(--tier) 28%, #0d2416) 62%, color-mix(in srgb, var(--tier) 40%, #173d25) 100%); }
.holocard[data-tier="LEGEND"] .hc-nophoto { background: radial-gradient(circle at 80% 0%, rgba(201,184,255,.5), transparent 60%), linear-gradient(180deg, #0c0a1a 0%, #2a1f4d 62%, #3b2a66 100%); }
.hc-stats { border-top-color: color-mix(in srgb, var(--tier) 40%, transparent); }
.hc-stats small, .hc-foot { color: color-mix(in srgb, var(--tier-line) 60%, #b6c4ba); }
/* metal tiers: a soft white gloss that sweeps across now and then */
.hc-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 48%, transparent 60%); background-size: 300% 100%; animation: hc-sheen 7s ease-in-out infinite; }
@keyframes hc-sheen { 0%, 60% { background-position: 110% 0; } 100% { background-position: -10% 0; } }
.holocard[data-tier="NEW"] .hc-sheen, .holocard[data-tier="BRONZE"] .hc-sheen { opacity: .6; }
/* Legendary: full holo, stronger than before, and a rainbow tier tag */
.holocard[data-tier="LEGEND"] .hc-holo { opacity: .9; }
.holocard[data-tier="LEGEND"] .hc-tier span { background: linear-gradient(90deg, #ff9cc6, #ffe59c, #9cffd9, #9cd0ff, #d2b3ff); background-size: 200% 100%; animation: hc-tag 4s linear infinite; }
.holocard[data-tier="LEGEND"] .hc-tier i { background: linear-gradient(90deg, #ff9cc6, #ffe59c, #9cffd9, #9cd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes hc-tag { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .holocard::after, .hc-sheen, .holocard[data-tier="LEGEND"] .hc-tier span { animation: none; } .hc-sheen { opacity: 0; } }
/* the same metals on the Me sheet's mini card and tier tag */
.ms-mini[data-tier="SILVER"] { background: linear-gradient(150deg, #ffffff 0%, #cfd6d1 45%, #8a938d 100%); }
.ms-mini[data-tier="GOLD"] { background: linear-gradient(150deg, #fff1b8 0%, #e8b84f 45%, #9a6f1c 100%); }
.ms-mini[data-tier="BRONZE"] { background: linear-gradient(150deg, #f0c49a 0%, #c98a52 45%, #7a4a24 100%); }
.ms-mini[data-tier="LEGEND"] { background: linear-gradient(150deg, #ff9cc6 0%, #ffe59c 30%, #9cffd9 55%, #9cd0ff 78%, #d2b3ff 100%); }
.ms-tag[data-tier="LEGEND"] { color: #170d2b; border-color: transparent; background: linear-gradient(90deg, #ff9cc6, #ffe59c, #9cffd9, #9cd0ff, #d2b3ff); }
.hc-tier span { text-transform: uppercase; }
.hc-photo:not(.hc-nophoto) + .hc-shade { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--tier) 12%, transparent); }
.holocard[data-tier="LEGEND"] .hc-photo:not(.hc-nophoto) + .hc-shade { box-shadow: none; }

/* inside the website's flip button the card is made of spans, so give them block behaviour */
.flip .holocard { display: block; max-width: none; width: 100%; text-align: left; }
.flip .face.hcface { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 14px; }
.flip .hc-nophoto svg { position: absolute; left: 50%; bottom: 29%; width: 74%; transform: translateX(-50%); fill: rgba(255,255,255,.17); }
.flip { height: 476px; }
.hc-photo.hc-nophoto { display: block; }
.tier-ladder { display: flex; flex-direction: column; gap: 10px; }
.tl-h { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tier-ladder ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tier-ladder li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #0f1a13; color: var(--c); border: 1.5px solid var(--c); font-size: 13px; }
.tier-ladder li i { font-style: normal; font-size: 15px; }
.tier-ladder li b { font: 800 17px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.tier-ladder li span { color: #b6c4ba; font-weight: 600; }
.t-bronze { --c: #e2ad7c; } .t-silver { --c: #e4e9e5; } .t-gold { --c: #f3d27e; } .t-legend { --c: #c9b8ff; border-color: transparent !important; background: linear-gradient(#0f1a13, #0f1a13) padding-box, conic-gradient(from 0deg, #ff5fa2, #ffd95f, #5fffc0, #5fb4ff, #b07aff, #ff5fa2) border-box !important; }
@media (max-width: 400px) { .flip { width: 300px; height: 420px; } }
/* Full time mock-up: who scored */
.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; padding: 9px 11px; }
.goals .h { grid-column: 1 / -1; font: 800 15px var(--display); }
.goals .g { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.goals .g b { font: 800 14px var(--display); }
.mini-card { background: radial-gradient(120% 70% at 100% 0%, rgba(232,184,79,.38), transparent 70%), linear-gradient(180deg, #25281a, #0f1a12); }

/* full pitch markings: both penalty areas, six-yard boxes, spots, the D, corner arcs, goals. Drawn at real pitch proportions. */
.pl { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.4px; pointer-events: none; }
.pl * { vector-effect: non-scaling-stroke; }
.pl .sp { fill: rgba(255,255,255,.75); stroke: none; }
.pl .goal { stroke: rgba(255,255,255,.8); }
.big-pitch .pl { stroke-width: 2px; }
.pl-l { display: none; } .landscape .pl-p { display: none; } .landscape .pl-l { display: block; }

/* roster profile pictures in the demo */
.pl-btn .pav { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--edge); transition: filter 200ms ease, opacity 200ms ease; }
.pl-btn[aria-pressed="false"] .pav { filter: grayscale(1); opacity: .5; }

/* The "Tap in" phone screen, drawn like the app's Home screen at the app's own 390px width, then scaled to fit the phone */
.scr-app { padding: 0; gap: 0; overflow: hidden; }
.ah { position: relative; flex: none; width: 390px; height: 824px; transform: scale(.718); transform-origin: 0 0; padding: 42px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.ah-top { display: flex; align-items: center; gap: 10px; height: 44px; }
.ah-grp { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 7px; border-radius: 21px; background: var(--surf); border: 1px solid var(--edge); font-size: 16px; }
.ah-badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e8681f; color: #fff; display: grid; place-items: center; font: 800 12px var(--display); }
.ah-grp b { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-bell { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--surf); border: 1px solid var(--edge); display: grid; place-items: center; }
.ah-bell em { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #e8681f; color: #fff; font: 700 11px var(--body); font-style: normal; display: grid; place-items: center; }
.ah-me { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e8681f; color: #fff; display: grid; place-items: center; font: 800 17px var(--display); box-shadow: 0 0 0 3px rgba(232,104,31,.4); }
.ah-hi { margin: 0 0 -10px 2px; font-size: 16px; color: var(--muted); }
.ah-title { font: 800 40px/.95 var(--display); text-transform: uppercase; }
.ah-game { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 26px; color: #fff; background: linear-gradient(160deg, #1d4b31, #0f2a1b); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.28); }
.ah-ring { position: absolute; right: -70px; top: -34px; width: 270px; height: 270px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.1); }
.ah-game > :not(.ah-ring) { position: relative; }
.ah-r1 { display: flex; justify-content: space-between; align-items: center; font-size: 15px; opacity: .92; }
.ah-pill { padding: 6px 11px; border-radius: 999px; background: rgba(111,207,151,.22); color: #8fe0b0; font: 700 12.5px var(--body); letter-spacing: .08em; }
.ah-time { font: 800 60px/1 var(--display); } .ah-time small { margin-left: 4px; font-size: 30px; }
.ah-venue { display: flex; align-items: center; gap: 6px; font-size: 15px; opacity: .85; }
.ah-r2 { display: flex; justify-content: space-between; margin-top: 4px; font-size: 15px; } .ah-r2 span { opacity: .8; }
.ah-segs { display: flex; gap: 4px; } .ah-segs i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); } .ah-segs i.on { background: #6fcf97; }
.ah-inout { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; padding: 5px; border-radius: 16px; background: rgba(0,0,0,.34); }
.ah-inout span { height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 18px var(--body); color: rgba(255,255,255,.78); }
.ah-inout .in { background: #eef3ee; color: #143f24; }
.ah-who { display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 12px; border-radius: 20px; background: var(--surf); border: 1px solid var(--edge); }
.ah-stack { display: flex; flex: none; } .ah-stack img, .ah-stack em { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #12201a; margin-left: -12px; object-fit: cover; } .ah-stack > :first-child { margin-left: 0; }
.ah-stack em { display: grid; place-items: center; background: #26332b; color: #c9d6cc; font: 700 14px var(--body); font-style: normal; }
.ah-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ah-wt b { font-size: 17px; } .ah-wt small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-all { font-size: 15px; font-weight: 700; color: var(--pitch-text); }
.ah-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ah-side { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border-radius: 20px; color: #fff; background: linear-gradient(160deg, #3a5fa2, #2b4f8a); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ah-side small { display: flex; justify-content: space-between; align-items: center; font: 700 12px var(--body); letter-spacing: .1em; opacity: .85; }
.ah-side b { font: 800 19px/1.05 var(--display); white-space: nowrap; text-transform: uppercase; }
.ah-mini { display: flex; } .ah-mini img, .ah-mini em { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2b4f8a; margin-left: -8px; object-fit: cover; } .ah-mini > :first-child { margin-left: 0; }
.ah-mini em { display: grid; place-items: center; background: #1f3a68; font: 700 11px var(--body); font-style: normal; }
.ah-nb { font-size: 14px; font-weight: 600; }
.ah-owe { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--surf); border: 1px solid var(--edge); }
.ah-owe b { font-size: 19px; } .ah-owe small { font-size: 14px; color: var(--muted); } .ah-owe span { margin-top: 4px; font-weight: 700; font-size: 15px; color: #f0b84f; }
.ah-owe i { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: #f0b84f; }
.ah-start { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 18px 0 12px; border-radius: 24px; color: #0b1f12; background: linear-gradient(180deg, #5cb97e, #2f8a50); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(31,107,58,.35); }
.ah-play { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #0b1f12; color: #8fe0b0; display: grid; place-items: center; }
.ah-st { flex: 1; display: flex; flex-direction: column; } .ah-st b { font: 800 25px/1 var(--display); } .ah-st small { font-size: 14px; font-weight: 600; opacity: .8; }
.ah-tabs { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 58px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 30px; background: var(--surf-strong); border: 1px solid var(--edge); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.ah-tabs span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 24px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ah-tabs svg { width: 24px; height: 24px; } .ah-tabs .on { background: var(--pitch-soft); color: var(--pitch-text); }
@media (max-width: 480px) {
  .pl-btn { gap: 8px; padding: 0 9px 0 8px; }
  .pl-btn .tick { display: none; }
  .pl-btn[aria-pressed="true"] .pav { box-shadow: 0 0 0 2.5px var(--pitch-hi); }
}
.flip .hc-rating span, .flip .hc-rating b { text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5); }

/* card tilt (assets/site.js): the card leans towards the pointer, the photo and text shift a little for depth, and a shine follows the pointer */
.card-art { perspective: 1100px; }
.flip { --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --gx: 50%; --gy: 30%; --go: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 650ms cubic-bezier(.2,.8,.2,1); will-change: transform; }
.flip.tilting { transition: transform 90ms linear; }
.flip .hc-photo { transform: translate(calc(var(--px) * -12px), calc(var(--py) * -12px)) scale(1.08); transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.flip.tilting .hc-photo { transition: transform 90ms linear; }
.flip .hc-body { transform: translate(calc(var(--px) * 7px), calc(var(--py) * 7px)); transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.flip.tilting .hc-body { transition: transform 90ms linear; }
.flip .holocard { transition: box-shadow 300ms ease; }
.flip.tilting .holocard { box-shadow: 0 34px 56px rgba(0,0,0,.55), 0 0 40px rgba(232,184,79,.25); }
.hc-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--go); transition: opacity 300ms ease; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.75), rgba(255,255,255,.18) 32%, rgba(255,255,255,0) 58%); }
/* ---------------------------------------------------------------- FAQ */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq details { border-radius: 18px; padding: 0 22px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; font: 700 17px/1.35 var(--body); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 600 26px/1 var(--body); color: var(--orange, #e8681f); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline: 3px solid #e8681f; outline-offset: 2px; border-radius: 10px; }
.faq details p { margin: 0 0 18px; color: var(--muted); max-width: 66ch; }

.store[aria-disabled="true"] { cursor: default; }
.legal a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------- player card: the back is a gold card too */
.flip .face.back.hcface { padding: 0; gap: 0; background: none; border: 0; box-shadow: none; border-radius: 14px; }
.flip .hc-back { display: block; max-width: none; width: 100%; text-align: left; background: #130f06; }
.hb-bg { position: absolute; inset: 0; background:
  radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--tier) 52%, transparent), transparent 52%),
  radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--tier) 18%, transparent), transparent 55%),
  linear-gradient(180deg, #1a1408 0%, #0d0a04 100%); }
.hb-ring { position: absolute; right: -22cqw; top: -18cqw; width: 78cqw; height: 78cqw; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tier) 38%, transparent); pointer-events: none; }
.hc-back .hc-body { gap: calc(var(--u) * 6); }
.hb-title { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.hb-title b { font: 800 calc(var(--u) * 27) / .95 var(--display); text-transform: uppercase; color: var(--tier-line); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hb-title span { font: 700 calc(var(--u) * 10.5) var(--body); letter-spacing: .14em; text-transform: uppercase; color: #b9aa82; }
.hb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 2); }
.hb-tile { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 7) calc(var(--u) * 9); border-radius: calc(var(--u) * 9);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tier) 20%, transparent), color-mix(in srgb, var(--tier) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.10); }
.hb-tile b { font: 800 calc(var(--u) * 34) / .95 var(--display); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff3c4 0%, var(--tier) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-tile small { font: 700 calc(var(--u) * 10) var(--body); letter-spacing: .12em; text-transform: uppercase; color: #d8cba4; }
.hb-tile em { font: 600 calc(var(--u) * 10.5) var(--body); font-style: normal; color: #b9aa82; }
.hb-bar { display: block; height: calc(var(--u) * 4); border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: calc(var(--u) * 2); }
.hb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c08f2a, #ffe08a); }
.hb-form { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.hb-form small, .hb-duo small { font: 700 calc(var(--u) * 10) var(--body); letter-spacing: .12em; text-transform: uppercase; color: #b9aa82; }
.hb-form .form8 { gap: calc(var(--u) * 4); }
.hb-form .form8 span { height: calc(var(--u) * 24); border-radius: calc(var(--u) * 7); font: 800 calc(var(--u) * 14) var(--display); background: rgba(255,255,255,.08); color: #b9aa82; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.hb-form .form8 .W { background: linear-gradient(180deg, #ffe08a, #c08f2a); color: #241a05; box-shadow: none; }
.hb-form .form8 .L { background: rgba(242,134,126,.16); color: #f2a29b; box-shadow: inset 0 0 0 1px rgba(242,134,126,.35); }
.hb-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.hb-duo .hb-bar { grid-column: 1 / -1; }
.hb-duo-h { display: flex; flex-direction: column; min-width: 0; }
.hb-duo-h b { font: 800 calc(var(--u) * 20) / 1.05 var(--display); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-duo-v { display: flex; flex-direction: column; align-items: flex-end; font: 800 calc(var(--u) * 20) / 1.05 var(--display); text-transform: uppercase; }
.hb-duo-v small { font-size: calc(var(--u) * 9.5); color: #b9aa82; }
.hb-duo.best2 { background: rgba(47,138,80,.20); box-shadow: inset 0 0 0 1px rgba(143,220,170,.35); } .hb-duo.best2 .hb-duo-v { color: #9fe0b4; } .hb-duo.best2 .hb-bar i { background: linear-gradient(90deg, #2f8a50, #9fe0b4); }
.hb-duo.nem { background: rgba(232,104,31,.16); box-shadow: inset 0 0 0 1px rgba(240,138,75,.38); } .hb-duo.nem .hb-duo-v { color: #f5a06a; } .hb-duo.nem .hb-bar i { background: linear-gradient(90deg, #e8681f, #f5a06a); }
.flip .hc-back .hc-foot { margin-top: 0; }

/* How it works, step 4: the same gold card as "Earned on the pitch", scaled to the phone */
.scr .scr-card { flex: none; width: 168px; max-width: none; margin: 0 auto; box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.scr[data-screen="3"] { gap: 8px; }
.scr[data-screen="3"] .stats3 div { padding: 6px; }
.scr[data-screen="3"] .stats3 b { font-size: 22px; }
.scr[data-screen="3"] .pc { padding: 8px !important; gap: 6px !important; }
.scr[data-screen="3"] .best { padding: 8px 10px; }
.best.nem { background: rgba(232,104,31,.16); } .best.nem small { color: var(--bib-text); }

.hb-bg::after { content: ""; position: absolute; left: 83cqw; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: color-mix(in srgb, var(--tier) 38%, transparent); }
.hb-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--tier) 20%, transparent), color-mix(in srgb, var(--tier) 6%, transparent)), rgba(23,18,10,.68); }
.hb-duo.best2 { background: linear-gradient(rgba(47,138,80,.22), rgba(47,138,80,.22)), rgba(23,18,10,.68); }
.hb-duo.nem { background: linear-gradient(rgba(232,104,31,.18), rgba(232,104,31,.18)), rgba(23,18,10,.68); }
.hb-form .form8 span { background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)), rgba(23,18,10,.68); }
.hb-form .form8 .W { background: linear-gradient(180deg, #ffe08a, #c08f2a); }
.hb-form .form8 .L { background: linear-gradient(rgba(242,134,126,.16), rgba(242,134,126,.16)), rgba(23,18,10,.68); }