/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--radius-sm:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.grid{display:grid}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}:root{--bg:#f6f4f0;--surface:#fff;--text:#1f1f1f;--text-secondary:#000000a3;--text-muted:#00000099;--text-subtle:#00000080;--red:#e20001;--red-dim:#e2000114;--red-soft:#e200011f;--pitch:#0a8754;--pitch-dark:#0b5e3a;--pitch-deep:#063a25;--pitch-dim:#0a875414;--pitch-soft:#0a875424;--pitch-light:#9fe7c2;--gold:#e8b53a;--border:#e6e2dc;--border-strong:#d8d3cb;--date-bg:#f0ece6;--radius:14px;--radius-sm:10px;--shadow:0 1px 2px #0000000a, 0 4px 16px #0000000a}*{box-sizing:border-box;margin:0;padding:0}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,Helvetica Neue,Arial,sans-serif}.page-wrap{max-width:1200px;margin:0 auto;padding:0 20px 48px}.site-header{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#f6f4f0eb;margin:0 -20px;padding:0 20px;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1200px;height:56px;margin:0 auto;display:flex}.logo-wordmark{align-items:center;gap:14px;min-width:0;display:flex}.logo-brand{flex-shrink:0;align-items:center;text-decoration:none;transition:opacity .2s;display:flex}.logo-brand:hover{opacity:.72}.logo-img{object-fit:contain;flex-shrink:0;width:auto;height:26px}.logo-divider{background:var(--border-strong);flex-shrink:0;width:1px;height:28px}.logo-text-block{min-width:0}.logo-text{letter-spacing:.02em;color:var(--text);font-size:13px;font-weight:700;line-height:1.2}.logo-sub{color:var(--text-muted);margin-top:2px;font-size:11px}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:20px;overflow:hidden}.hero-card-inner{justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 28px;display:flex}.hero-card-main{flex:1;min-width:0}.hero-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:10px;font-size:10px;font-weight:700}.hero-title{letter-spacing:-.03em;color:var(--text);margin-bottom:20px;font-size:clamp(26px,4vw,36px);font-weight:800;line-height:1.1}.hero-title-accent{color:var(--red)}.hero-meta{flex-wrap:wrap;align-items:center;gap:0;display:flex}.hero-stat{flex-direction:column;gap:2px;padding:0 20px;display:flex}.hero-stat:first-child{padding-left:0}.hero-stat-val{letter-spacing:-.03em;color:var(--text);font-size:22px;font-weight:800;line-height:1}.hero-stat-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-size:9px;font-weight:700}.hero-divider{background:var(--border);flex-shrink:0;width:1px;height:32px}.hero-card-side{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:14px;min-width:200px;display:flex}.tz-banner{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);border-radius:99px;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:600;display:inline-flex}.tz-banner-icon{font-size:14px;line-height:1}.filter-bar{flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 16px;display:flex}.filter-bar-label{color:var(--text-muted);flex-shrink:0;font-size:12px;font-weight:600}.filter-pills{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.filter-pill{color:var(--text-secondary);background:var(--surface);border:1px solid var(--border-strong);cursor:pointer;white-space:nowrap;border-radius:99px;padding:9px 16px;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s}.filter-pill:hover{color:var(--text);border-color:#0000002e}.filter-pill.active{color:var(--text);border-color:var(--text);box-shadow:var(--shadow)}.picker-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;display:none;overflow:hidden}.picker-panel.open{display:block}.picker-panel-header{border-bottom:1px solid var(--border);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:12px 16px;font-size:11px;font-weight:700}.picker-search-wrap{border-bottom:1px solid var(--border);padding:10px 16px}.picker-search{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);outline:none;width:100%;padding:9px 12px;font-family:inherit;font-size:13px}.picker-search:focus{border-color:var(--red)}.teams-grid,.groups-grid{grid-template-columns:repeat(6,1fr);gap:8px;padding:12px 16px 16px;display:grid}.group-pick-btn{letter-spacing:.08em;text-transform:uppercase;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);padding:12px 8px;font-family:inherit;font-size:12px;font-weight:800;transition:all .2s}.group-pick-btn:hover,.group-pick-btn.selected{border-color:var(--red);color:var(--red);background:var(--red-dim)}.team-group-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 8px}.team-group-label{letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-align:center;border-bottom:1px solid var(--border);margin-bottom:6px;padding-bottom:6px;font-size:9px;font-weight:800}.team-group-chips{flex-direction:column;gap:4px;display:flex}.team-chip{background:var(--surface);cursor:pointer;color:var(--text-secondary);border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:6px 8px;font-size:10px;font-weight:600;transition:all .15s;display:flex}.team-chip:hover{border-color:var(--red);color:var(--red)}.team-chip.selected{background:var(--red);color:#fff;border-color:var(--red)}.teams-grid-empty{text-align:center;color:var(--text-muted);grid-column:1/-1;padding:16px;font-size:13px}.matchday-section{margin-bottom:28px}.matchday-header{margin-bottom:12px;padding:0 2px}.matchday-label{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:800}.match-cards-grid{grid-template-columns:1fr;gap:12px;display:grid}@media (min-width:641px){.match-cards-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.match-cards-grid{grid-template-columns:repeat(3,1fr)}}.fixture-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #b2aca3;transition:box-shadow .2s,border-color .2s;overflow:hidden}.fixture-card:hover{border-color:#989088;box-shadow:0 4px 20px #0000000f}.fixture-card.highlighted{border-color:#e2000140}.fixture-card-date{background:var(--date-bg);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 16px;display:flex}.date-cal{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-direction:column;align-items:center;min-width:44px;padding:6px 10px;display:flex}.date-cal-month{letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-size:9px;font-weight:800;line-height:1}.date-cal-day{color:var(--text);margin-top:2px;font-size:22px;font-weight:800;line-height:1.1}.date-cal-year{display:none}.date-details{flex:1;min-width:0}.date-weekday{display:none}.date-full{color:var(--text);font-size:13px;font-weight:600;line-height:1.3}.date-meta{color:var(--text-muted);margin-top:2px;font-size:11px}.date-relative{letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:99px;flex-shrink:0;margin-left:auto;padding:4px 10px;font-size:9px;font-weight:800}.match-row{flex-direction:column;gap:10px;padding:14px 16px 14px 18px;display:flex;position:relative}.fixture-card.highlighted .match-row:before{content:"";background:var(--red);width:4px;position:absolute;top:0;bottom:0;left:0}.match-teams-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.match-team{align-items:center;gap:8px;min-width:0;display:flex}.match-team.home{flex:1;justify-content:flex-start}.match-team.away{text-align:right;flex:1;justify-content:flex-end;margin-left:auto}.match-time-block{border-bottom:1px solid var(--border);justify-content:center;align-items:center;gap:6px;padding-bottom:8px;display:flex}.team-flag{background:var(--bg);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:22px;display:flex;overflow:hidden}.team-flag .flag-img{object-fit:cover;width:100%;height:100%;box-shadow:none;border:none}.team-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;overflow:hidden}.team-name-fav{color:var(--red)}.match-time{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;font-family:JetBrains Mono,SF Mono,Consolas,monospace;font-size:13px;font-weight:700}.match-tz-ist{letter-spacing:.12em;color:var(--text-muted);font-size:9px;font-weight:700}.match-row-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.match-badges{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.selected-badge{letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-soft);border:1px solid #e2000133;border-radius:99px;align-items:center;gap:4px;padding:3px 8px;font-size:9px;font-weight:700;display:none}.fixture-card.highlighted .selected-badge{display:inline-flex}.group-badge{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:3px 8px;font-size:9px;font-weight:800}.match-venue{color:var(--text-muted);text-align:right;align-items:center;gap:4px;margin-left:auto;font-size:10px;line-height:1.3;display:flex}.match-venue-icon{opacity:.7;font-size:10px}.flag-img{object-fit:cover;border-radius:2px;flex-shrink:0;display:block}.flag-sm{width:18px;height:12px}.flag-md{width:36px;height:26px}.flag-lg{width:32px;height:22px}.flag-fallback{font-size:14px}.empty-state{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:48px 20px;display:none}.empty-state.show{display:block}.empty-state-icon{margin-bottom:12px;font-size:32px}.empty-state-title{margin-bottom:6px;font-size:16px;font-weight:700}.empty-state-sub{color:var(--text-muted);font-size:13px}.scroll-top{background:var(--red);color:#fff;cursor:pointer;opacity:0;z-index:200;border:none;border-radius:50%;width:40px;height:40px;font-size:16px;transition:all .3s;position:fixed;bottom:24px;right:24px;transform:translateY(12px);box-shadow:0 4px 16px #e2000159}.scroll-top.visible{opacity:1;transform:translateY(0)}.card-glare{display:none}@media (max-width:768px){.hero-card-inner{flex-direction:column;padding:20px}.hero-card-side{align-items:flex-start;width:100%}.hero-stat{padding:0 12px}.hero-stat:first-child{padding-left:0}.match-row{padding:12px 14px 12px 16px}.teams-grid,.groups-grid{grid-template-columns:repeat(2,1fr);max-height:50vh;overflow-y:auto}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
/* ---- UI/UX Pro Max audit fixes ---- */

/* Visually-hidden label for the team search input */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Visible focus states for keyboard navigation */
button:focus-visible,a:focus-visible,input:focus-visible,.team-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.picker-search:focus-visible{outline-offset:0}

/* SVG icon sizing (replaces emoji icons) */
.tz-banner-icon{display:inline-flex}
.tz-banner-icon svg{width:14px;height:14px}
.match-venue-icon{display:inline-flex;opacity:.7}
.match-venue-icon svg{width:11px;height:11px}
.selected-badge svg{width:9px;height:9px}
.empty-state-icon{display:flex;justify-content:center;color:var(--text-muted)}
.empty-state-icon svg{width:32px;height:32px}
.scroll-top{display:flex;align-items:center;justify-content:center}
.scroll-top svg{width:18px;height:18px}
.flag-fallback{display:inline-flex;color:var(--text-muted)}
.flag-fallback svg{width:14px;height:14px}

/* Touch targets: 44px minimum on interactive elements */
.scroll-top{width:44px;height:44px}
.filter-pill{min-height:40px;padding:10px 18px}
.group-pick-btn{min-height:44px}
.team-chip{min-height:36px;text-align:left;width:100%}
@media (pointer:coarse){
  .filter-pill,.team-chip,.group-pick-btn{min-height:44px}
}

/* Readability: lift the smallest type sizes */
.hero-stat-label{font-size:10px}
.date-cal-month{font-size:10px}
.matchday-label{font-size:12px}
.date-relative{font-size:10px}
.group-badge,.selected-badge{font-size:10px}
.match-venue{font-size:11px}
.match-tz-ist{font-size:10px}
.date-meta{font-size:12px}
.team-chip{font-size:12px}
.team-group-label{font-size:10px}

/* Kickoff countdown (event-pattern urgency element) */
.kickoff-countdown{background:var(--red);color:#fff;border-radius:var(--radius-sm);padding:12px 18px;text-align:right;min-width:150px;box-shadow:0 4px 16px #e2000133}
.kickoff-countdown[hidden]{display:none}
.kickoff-countdown-num{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kickoff-countdown-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-top:4px}
@media (max-width:768px){
  .kickoff-countdown{text-align:left}
}

/* ===== Football / pitch theme (red + black kept as brand anchors) ===== */

/* HERO — dark pitch with subtle mowing stripes */
.hero-card{
  background:
    repeating-linear-gradient(90deg, #ffffff0a 0 72px, #ffffff00 72px 144px),
    linear-gradient(150deg, var(--pitch-dark), var(--pitch-deep) 65%, #04281a);
  border-color:#ffffff1f;
  box-shadow:0 1px 2px #00000014, 0 10px 32px #06301d40;
}
.hero-eyebrow{color:var(--pitch-light)}
.hero-title{color:#fff}
.hero-title-accent{color:#ff3b3a}            /* brand red, brightened for legibility on green */
.hero-stat-val{color:#fff}
.hero-stat-label{color:#ffffffb3}
.hero-divider{background:#ffffff2e}
.tz-banner{background:#ffffff14;border-color:#ffffff3d;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tz-banner-icon{color:var(--pitch-light)}
/* kickoff countdown stays brand red — the red anchor inside the green hero */

/* NAVIGATION & SELECTION — pitch green */
.filter-pill:hover{color:var(--pitch);border-color:var(--pitch)}
.filter-pill.active{color:#fff;background:var(--pitch);border-color:var(--pitch);box-shadow:0 4px 14px #0a875440}
.group-pick-btn:hover,.group-pick-btn.selected{border-color:var(--pitch);color:var(--pitch);background:var(--pitch-dim)}
.team-chip:hover{border-color:var(--pitch);color:var(--pitch)}
.team-chip.selected{background:var(--pitch);border-color:var(--pitch);color:#fff}
.team-group-label{color:var(--pitch)}
.picker-search:focus{border-color:var(--pitch)}

/* CARDS — green info accents; red kept for date + urgency (brand) */
.group-badge{color:var(--pitch);background:var(--pitch-dim);border-color:var(--pitch-soft)}
.match-venue-icon{color:var(--pitch);opacity:1}
.matchday-label{color:var(--pitch)}
.fixture-card-date{background:linear-gradient(var(--date-bg),var(--date-bg)) padding-box;border-top:3px solid var(--pitch);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
/* date calendar month, "Today/Tomorrow" badge, highlighted bar & scroll-top all remain brand red */

/* ===== Timezone switcher (in green hero) ===== */
.tz-control{display:inline-flex;align-items:center;gap:8px;background:#ffffff14;border:1px solid #ffffff3d;border-radius:99px;padding:7px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;max-width:100%}
.tz-control .tz-banner-icon{color:var(--pitch-light);display:inline-flex;flex-shrink:0}
.tz-control .tz-banner-icon svg{width:14px;height:14px}
.tz-select{appearance:none;-webkit-appearance:none;background-color:transparent;border:0;color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;padding:0 18px 0 0;margin:0;cursor:pointer;outline:none;max-width:200px;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:12px 12px}
.tz-select option{color:#1f1f1f;background:#fff}
.tz-select:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.tz-offset{font-size:11px;font-weight:600;color:#ffffffc2;font-variant-numeric:tabular-nums;white-space:nowrap;border-left:1px solid #ffffff33;padding-left:8px;flex-shrink:0}
@media (max-width:768px){
  .tz-control{width:100%;justify-content:flex-start}
  .tz-select{flex:1;max-width:none}
}

/* ===== Matchday accordion ===== */
.matchday-header{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;cursor:pointer;padding:8px 4px;margin-bottom:12px;text-align:left;font-family:inherit;border-radius:8px;transition:background .15s}
.matchday-header:hover{background:var(--pitch-dim)}
.matchday-header .matchday-label{transition:color .15s}
.matchday-header:hover .matchday-label{color:var(--pitch-dark)}
.matchday-meta{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matchday-chevron{margin-left:auto;display:inline-flex;flex-shrink:0;color:var(--text-muted);transition:transform .25s ease}
.matchday-chevron svg{width:18px;height:18px}
.matchday-section.collapsed .matchday-chevron{transform:rotate(-90deg)}
.matchday-header:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}
.matchday-section.is-past .matchday-label{color:var(--text-subtle)}

/* Collapsible body — animated via grid-template-rows for a smooth accordion */
.matchday-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.matchday-section.collapsed .matchday-body{grid-template-rows:0fr}
.matchday-section.collapsed .matchday-header{margin-bottom:0}
.matchday-body-inner{overflow:hidden;min-height:0}
@media (prefers-reduced-motion:reduce){.matchday-body,.matchday-chevron{transition:none}}

/* ===== Back-to-top: bouncing football with arrow on top ===== */
.scroll-top{
  position:fixed;bottom:24px;right:24px;z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:auto;height:auto;padding:0;margin:0;border:0;background:transparent;border-radius:0;
  cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;box-shadow:none;
}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top-arrow{color:var(--red);display:flex;transition:transform .25s ease}
.scroll-top-arrow svg{width:18px;height:18px}
.scroll-top-ball{width:48px;height:48px;display:flex;filter:drop-shadow(0 5px 10px #00000038);transition:transform .2s ease;transform-origin:center bottom}
.scroll-top-ball svg{width:100%;height:100%;display:block}
.scroll-top:hover .scroll-top-ball{animation:ball-bounce .65s cubic-bezier(.3,.6,.4,1) infinite}
.scroll-top:hover .scroll-top-arrow{transform:translateY(-4px)}
.scroll-top:active .scroll-top-ball{transform:scale(.92)}
.scroll-top:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:10px}
@keyframes ball-bounce{
  0%{transform:translateY(0) scaleY(1)}
  18%{transform:translateY(0) scaleY(.86) scaleX(1.08)}
  45%{transform:translateY(-16px) scaleY(1.06) scaleX(.97)}
  72%{transform:translateY(0) scaleY(.9) scaleX(1.05)}
  100%{transform:translateY(0) scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .scroll-top:hover .scroll-top-ball{animation:none}
  .scroll-top:hover .scroll-top-arrow{transform:none}
}
@media (max-width:768px){
  .scroll-top{bottom:16px;right:16px}
  .scroll-top-ball{width:44px;height:44px}
}

/* ===== Mobile polish ===== */
@media (max-width:768px){
  body,.page-wrap{overflow-x:clip}
  .page-wrap{padding:0 14px 40px}
  .site-header{margin:0 -14px;padding:0 14px}
  .hero-card-inner{gap:18px}
  .hero-title{margin-bottom:16px}
  .kickoff-countdown{width:100%;display:flex;align-items:baseline;gap:10px;text-align:left;padding:12px 16px}
  .kickoff-countdown-num{font-size:26px}
  .kickoff-countdown-label{margin-top:0}
  .matchday-meta{font-size:10px}

  /* Sort bar — scroll pills horizontally instead of wrapping */
  .filter-bar{flex-wrap:nowrap;align-items:center;gap:8px;margin:16px 0 12px;min-width:0}
  .filter-bar-label{flex-shrink:0;font-size:11px;padding-top:0}
  .filter-pills{flex:1;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;min-width:0;padding-bottom:2px}
  .filter-pills::-webkit-scrollbar{display:none}
  .filter-pill{min-height:34px;padding:7px 12px;font-size:11px;flex-shrink:0}

  /* Team / group / stage pickers — compact, no horizontal overflow */
  .picker-panel{min-width:0}
  .picker-panel-header{padding:9px 12px;font-size:10px}
  .picker-search-wrap{padding:7px 12px}
  .picker-search{padding:8px 10px;font-size:12px}
  .teams-grid,.stages-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:8px 10px 12px;
    max-height:55vh;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .groups-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:8px 10px 12px;
    max-height:none;
    overflow-x:hidden;
  }
  .team-group-section{min-width:0;padding:6px 4px}
  .team-group-label{font-size:8px;letter-spacing:.1em;padding-bottom:4px;margin-bottom:4px}
  .team-group-chips{gap:2px}
  .team-chip-row{min-height:32px}
  .team-chip-select{gap:4px;padding:3px 2px 3px 5px;font-size:10px}
  .team-fav-btn{width:28px;height:28px;flex-shrink:0}
  .team-fav-btn svg{width:13px;height:13px}
  .group-pick-btn{padding:8px 4px;font-size:10px;min-height:36px}
  .stage-pick-btn{padding:8px 6px;font-size:11px;min-height:36px}
}
@media (max-width:400px){
  .hero-stat{padding:0 9px}
  .hero-stat-val{font-size:19px}
  .teams-grid{grid-template-columns:minmax(0,1fr)}
}

/* ===== Header actions: Share + "Visit the makers" ghost button ===== */
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);font-family:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;transition:color .18s,border-color .18s,background .18s}
.hbtn svg{width:15px;height:15px;flex-shrink:0}
.share-btn:hover,.share-btn[aria-expanded="true"]{color:var(--text);border-color:var(--text)}
.ghost-btn:hover{color:var(--red);border-color:var(--red);background:var(--red-dim)}
.hbtn:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}
.ghost-btn:focus-visible{outline-color:var(--red)}

.share-wrap{position:relative;display:flex}
.share-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:300;min-width:192px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #00000024;padding:6px;display:flex;flex-direction:column;gap:1px}
.share-menu[hidden]{display:none}
.share-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:8px;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:13px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s}
.share-item:hover{background:var(--bg)}
.share-item:focus-visible{outline:2px solid var(--pitch);outline-offset:-2px}
.share-item svg{width:18px;height:18px;flex-shrink:0}
.ic-whatsapp{color:#25D366}
.ic-x{color:#0f0f0f}
.ic-facebook{color:#1877F2}
.ic-linkedin{color:#0A66C2}
.ic-link{color:var(--text-muted)}

@media (max-width:768px){
  .header-actions{gap:6px}
  .hbtn{width:36px;padding:0;justify-content:center}
  .hbtn-text{display:none}
  .share-menu{position:fixed;top:60px;right:14px;left:auto}
}

/* ===== Sort: Stages picker + Favourite team ===== */

/* Stages picker panel */
.stages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:12px 16px 16px}
.stage-pick-btn{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);padding:12px 10px;min-height:44px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;transition:all .2s}
.stage-pick-btn:hover,.stage-pick-btn.selected{border-color:var(--pitch);color:var(--pitch);background:var(--pitch-dim)}
.stage-pick-btn:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}

/* Favourite pill in the sort bar */
.fav-pill{display:inline-flex;align-items:center;gap:6px}
.fav-pill .pill-heart{display:inline-flex;color:var(--red)}
.fav-pill .pill-heart svg{width:13px;height:13px}
.fav-pill .flag-sm{border-radius:2px}
.fav-pill-name{max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-pill.has-fav{border-color:#e2000140}
.filter-pill.fav-pill.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 14px #e2000133}
.filter-pill.fav-pill.active .pill-heart{color:#fff}

/* Team chip with heart toggle (replaces single-button chip) */
.team-chip-row{display:flex;align-items:center;background:var(--surface);border:1px solid transparent;border-radius:6px;min-height:34px;overflow:hidden;transition:border-color .15s,background .15s}
.team-chip-row:hover{border-color:var(--pitch)}
.team-chip-row.selected{background:var(--pitch);border-color:var(--pitch)}
.team-chip-select{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:transparent;border:0;cursor:pointer;color:var(--text-secondary);padding:6px 4px 6px 8px;font-family:inherit;font-size:12px;font-weight:600;text-align:left}
.team-chip-select:hover{color:var(--pitch)}
.team-chip-row.selected .team-chip-select,.team-chip-row.selected .team-chip-select:hover{color:#fff}
.team-chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-fav-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:0;cursor:pointer;color:var(--text-subtle);transition:color .15s,transform .12s}
.team-fav-btn svg{width:15px;height:15px}
.team-fav-btn:hover{color:var(--red);transform:scale(1.12)}
.team-fav-btn.is-fav{color:var(--red)}
.team-chip-row.selected .team-fav-btn{color:#ffffffb3}
.team-chip-row.selected .team-fav-btn.is-fav{color:#fff}
.team-chip-select:focus-visible,.team-fav-btn:focus-visible{outline:2px solid var(--pitch);outline-offset:-2px}

/* Favourite badge on a fixture card */
.fav-badge{display:inline-flex;align-items:center;gap:4px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-soft);border:1px solid #e2000133;border-radius:99px;padding:3px 8px;font-size:10px;font-weight:700}
.fav-badge svg{width:10px;height:10px}

@media (pointer:coarse){
  .team-chip-row{min-height:44px}
  .team-fav-btn{width:44px;height:44px}
}
@media (max-width:768px) and (pointer:coarse){
  .filter-pill,.group-pick-btn,.stage-pick-btn{min-height:36px}
  .team-chip-row{min-height:36px}
  .team-fav-btn{width:36px;height:36px}
}