/* FKF Tickets — preview theme.
   Near-black chrome, a soft off-white page, white cards. Kenyan red is kept
   for the action on each screen, FKF green for brand accents and "paid".
   Manrope for the interface; Barlow Condensed for team names, dates and
   prices, where football has always used condensed type. */

:root {
    --bg: #f3f4f2;
    --surface: #ffffff;
    --ink: #0c1110;
    --ink-2: #2a302e;
    --muted: #5f6a65;
    --faint: #677069; /* 4.5:1 or better on --surface and --bg */
    --line: #e2e5e2;
    --line-2: #d3d8d4;
    --red: #d2102e;
    --red-deep: #ae0c25;
    --red-wash: color-mix(in srgb, var(--red) 8%, white);
    --green: #00704a;
    --green-wash: color-mix(in srgb, var(--green) 9%, white);
    --chrome: #0c1110;
    --on-chrome: #ffffff;
    --on-chrome-muted: #a6aeaa;
    --r-lg: 16px;
    --r: 12px;
    --r-sm: 8px;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body: 'Manrope', system-ui, sans-serif;
    --wrap: 1200px;
    --gutter: 16px;
    --shadow: 0 1px 2px rgb(12 17 16 / .04), 0 4px 16px rgb(12 17 16 / .04);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: var(--gutter); top: 8px; z-index: 50; padding: 10px 16px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
#content:focus { outline: none; }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Chrome ─────────────────────────────────────────── */
.top { background: var(--chrome); color: var(--on-chrome); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 36px; width: auto; }
.brand span { font: 700 1.05rem/1.1 var(--body); letter-spacing: -.01em; }
.brand small { display: block; font-weight: 500; font-size: .75rem; color: var(--on-chrome-muted); }
.top nav { display: flex; gap: 4px; }
.top nav a { text-decoration: none; font-weight: 600; font-size: .92rem; padding: 8px 12px; border-radius: var(--r-sm); color: var(--on-chrome-muted); }
.top nav a:hover { color: var(--on-chrome); background: rgb(255 255 255 / .08); }
.top nav a[aria-current] { color: var(--on-chrome); background: rgb(255 255 255 / .12); }
.flagband { height: 6px; background: linear-gradient(to bottom, var(--chrome) 0 1px, #fff 1px 2px, var(--red) 2px 4px, #fff 4px 5px, var(--green) 5px 6px); }

.foot { background: var(--chrome); color: var(--on-chrome-muted); margin-top: 72px; padding: 44px 0 28px; font-size: .92rem; }
.foot-grid { display: grid; gap: 28px; }
.foot h3 { color: var(--on-chrome); font: 700 .95rem/1.3 var(--body); margin-bottom: 8px; }
.foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.foot-brand strong { color: var(--on-chrome); }
.foot-base { border-top: 1px solid rgb(255 255 255 / .1); margin-top: 32px; padding-top: 18px; font-size: .85rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.sim { background: #fff4cc; color: #5c4a00; font-size: .88rem; padding: 8px 0; border-bottom: 1px solid #f0dc8a; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-sm);
    font: 700 .95rem/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-pay { background: var(--red); color: #fff; }
.btn-pay:hover { background: var(--red-deep); }
.btn-pay:disabled { background: var(--line-2); color: #fff; cursor: not-allowed; }
.btn-quiet { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-lg { min-height: 54px; font-size: 1.02rem; padding: 0 26px; }
.link { background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* ── Listing page ───────────────────────────────────── */
.search { position: relative; flex: 1 1 240px; max-width: 340px; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search input { width: 100%; height: 46px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: .95rem; }
.search input:focus { outline: none; border-color: var(--ink); }
.search input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.group-title { display: flex; align-items: baseline; gap: 10px; font: 800 1.3rem/1.2 var(--body); letter-spacing: -.02em; margin: 34px 0 16px; }
.group-title span { font: 600 .9rem/1 var(--body); color: var(--muted); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.empty { color: var(--muted); padding: 24px 0; }
.more { display: flex; justify-content: center; margin-top: 24px; }

/* ── Match card ─────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card-art { position: relative; aspect-ratio: 4 / 3; background: var(--ink); overflow: hidden; }
.card-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.card-body { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-comp { color: var(--green); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.card-title { font: 700 1.45rem/1.08 var(--display); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 2px .35em; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; } /* whole card is the link */
.card-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.card-meta b { color: var(--ink); font-weight: 600; }
.card-meta { flex-wrap: wrap; }
.soon { white-space: nowrap; font-size: .74rem; font-weight: 700; color: var(--red); background: var(--red-wash); padding: 2px 7px; border-radius: 5px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; margin-top: 12px; border-top: 1px solid var(--line); }
.card-price small { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
.card-price b { font: 800 1.35rem/1.05 var(--display); }
.card { position: relative; }
.card .btn { position: relative; z-index: 1; min-height: 42px; }
.card.is-past .card-art img { filter: grayscale(1) contrast(.95); opacity: .85; }
.card.is-past .card-title { color: var(--ink-2); }
@media (hover: hover) {
    .card:hover { border-color: var(--line-2); }
    .card:hover .card-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
    .card-art img { transition: transform .4s ease; }
    .card:hover .card-art img { transform: scale(1.03); }
}

/* Teams and flags */
.flag { width: 1.1em; height: auto; aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); flex: none; }
.side { display: inline-flex; align-items: center; gap: .3em; }
.v { text-transform: lowercase; color: var(--faint); font-weight: 600; font-size: .8em; }

/* ── Match page ─────────────────────────────────────── */
.match-head { padding-top: 24px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; margin-bottom: 14px; }
.crumb:hover { color: var(--ink); }
.panel { position: relative; background: var(--chrome); color: #fff; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.panel-bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(34px) saturate(1.15); opacity: .42; }
.panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(12 17 16 / .92) 30%, rgb(12 17 16 / .55)); }
.panel-inner { display: grid; gap: 18px; padding: 22px; align-items: center; }
.panel-poster { width: 108px; border-radius: var(--r-sm); box-shadow: 0 10px 28px rgb(0 0 0 / .45); }
.panel-comp { color: var(--on-chrome-muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.panel h1 { font: 800 clamp(2rem, 7vw, 3.3rem)/1 var(--display); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 4px .3em; margin: 6px 0 12px; }
.panel .v { color: var(--on-chrome-muted); }
.panel .flag { box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.panel-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #e6e9e7; font-size: .95rem; }
.panel-meta span { display: inline-flex; align-items: center; gap: 7px; }
.panel-meta b { font-weight: 700; color: #fff; }
@media (min-width: 720px) {
    .panel-inner { grid-template-columns: 150px 1fr; gap: 28px; padding: 28px; }
    .panel-poster { width: 150px; }
}

.match-grid { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 130px; }
@media (min-width: 960px) { .match-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; padding-bottom: 0; } }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
.box + .box { margin-top: 18px; }
.box h2 { font: 800 1.15rem/1.2 var(--body); letter-spacing: -.01em; margin-bottom: 14px; }
.step + .step { margin-top: 18px; }

.tier { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); }
.tier + .tier { margin-top: 10px; }
.tier.has-qty { border-color: var(--ink); }
.tier-name { font: 700 1.35rem/1 var(--display); text-transform: uppercase; }
.tier-price { font-weight: 700; margin-top: 4px; }
.tier-note { font-size: .85rem; color: var(--muted); margin-top: 2px; font-weight: 500; }
.tier-note.low { color: var(--red); font-weight: 700; }
.tier.is-out { background: var(--bg); }
.tier.is-out .tier-name, .tier.is-out .tier-price { color: var(--faint); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; font: 600 1.35rem/1 var(--body); }
.stepper button:not(:disabled):hover { border-color: var(--ink); }
.stepper button:disabled { color: var(--line-2); cursor: default; }
.stepper button[data-step="1"]:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper output { min-width: 32px; text-align: center; font: 800 1.45rem/1 var(--display); }

.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.method { position: relative; cursor: pointer; }
.method input { position: absolute; opacity: 0; inset: 0; }
.method span { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); min-height: 70px; }
.method b { font-weight: 800; }
.method small { color: var(--muted); font-size: .85rem; }
.method input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg); }
.method input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 700; font-size: .92rem; }
.field input { height: 50px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 1.05rem; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.field input.big { font: 700 1.35rem/1 var(--body); letter-spacing: .02em; height: 56px; }
.field .hint { color: var(--muted); font-size: .86rem; }
.field .err { color: var(--red); font-weight: 700; font-size: .9rem; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.extras summary { cursor: pointer; font-weight: 700; font-size: .92rem; padding: 4px 0 12px; color: var(--muted); }

.paybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--surface);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgb(12 17 16 / .08);
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
}
.paybar-sum { min-width: 0; }
.paybar-sum b { display: block; font: 800 1.6rem/1 var(--display); }
.paybar-sum span { color: var(--muted); font-size: .85rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) {
    .paybar { position: static; box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; margin-top: 18px; }
}
.form-error { background: var(--red-wash); color: var(--red-deep); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 14px; font-weight: 600; }

.aside-poster { border-radius: var(--r); width: 100%; height: auto; }
.facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .92rem; color: var(--muted); }
.facts .icon { color: var(--green); width: 20px; height: 20px; margin-top: 2px; }
.facts b { display: block; color: var(--ink); font-weight: 700; }

/* ── Payment panel ──────────────────────────────────── */
.pay-panel h2 { font: 800 clamp(1.5rem, 5vw, 1.9rem)/1.1 var(--body); letter-spacing: -.02em; margin-bottom: 10px; }
.pay-panel p { font-size: 1.02rem; max-width: 52ch; color: var(--ink-2); }
.pay-panel p + p { margin-top: 10px; }
.pay-panel .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pay-panel .meta { color: var(--muted); font-size: .88rem; margin-top: 18px; }
.clock { margin: 20px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.clock b { font: 800 3rem/1 var(--display); }
.clock span { color: var(--muted); }
.timer { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--ink); transform-origin: left; border-radius: 3px; }
.pay-panel[data-state="failed"] h2 { color: var(--red); }
.pay-panel[data-state="paid"] h2 { color: var(--green); }
.retry-phone { margin-top: 18px; max-width: 380px; }

/* Waiting for the PIN: the buyer's attention belongs on their phone, so this
   state is set apart in the dark chrome and, on a phone, fills the screen
   with nothing else under it. */
.pay-panel[data-state="waiting"], .pay-panel[data-state="sending"] { background: var(--chrome); color: var(--on-chrome); border-color: var(--chrome); }
.pay-panel[data-state="waiting"] p, .pay-panel[data-state="sending"] p { color: var(--on-chrome); }
.pay-panel[data-state="waiting"] .meta, .pay-panel[data-state="sending"] .meta, .pay-panel[data-state="waiting"] .clock span { color: var(--on-chrome-muted); }
.pay-panel[data-state="waiting"] .timer { background: rgb(255 255 255 / .14); }
.pay-panel[data-state="waiting"] .timer i { background: var(--on-chrome); }
.prompt-head { display: flex; align-items: center; gap: 12px; color: var(--on-chrome-muted); font-weight: 700; font-size: .95rem; margin-bottom: 18px; }
.prompt-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; flex: none; }
.prompt-icon .icon { width: 24px; height: 24px; }
.pay-panel .prompt h2 { font: 800 clamp(2.1rem, 9vw, 2.8rem)/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 14px; }
.prompt-to { font-size: 1.05rem; }
.prompt-to b { display: block; font: 800 clamp(2rem, 9vw, 2.6rem)/1.05 var(--display); margin-top: 2px; }
.prompt-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.prompt-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; font-size: 1.12rem; line-height: 1.35; }
.prompt-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--on-chrome-muted); font: 700 1rem/1 var(--display); transform: translateY(-2px); }
.prompt-steps b { white-space: nowrap; }
.pay-panel[data-state="waiting"] .clock { margin-top: 26px; }
.pay-panel[data-state="waiting"] .clock b { font-size: 3.6rem; }
.pay-panel[data-state="waiting"] > .meta { margin-top: 12px; }
.prompt-check { color: var(--on-chrome); font-size: 1rem; margin-top: 18px; padding: 12px 0; text-align: left; }
/* Sending: what is about to happen, dimmed, and a bar that moves while Safaricom sends the prompt. */
.prompt-steps.is-next li { color: var(--on-chrome-muted); }
.sending-bar { position: relative; height: 6px; margin-top: 30px; border-radius: 3px; overflow: hidden; background: rgb(255 255 255 / .14); }
.sending-bar i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 3px; background: var(--on-chrome); }
@media (prefers-reduced-motion: no-preference) {
    .sending-bar i { animation: sending 1.3s ease-in-out infinite; }
    @keyframes sending { 0% { left: -35%; } 100% { left: 100%; } }
}
.pay-panel[data-state="sending"] .sending-bar + .meta { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
    .prompt-icon.pulse { animation: prompt-pulse 1.6s ease-out infinite; }
    @keyframes prompt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
}
@media (max-width: 959px) {
    /* Content from the top (it must show without scrolling); the order line sits at the foot. */
    .pay-panel[data-state="waiting"], .pay-panel[data-state="sending"] { min-height: calc(100svh - 32px); padding: 28px 22px; scroll-margin-top: 16px; display: flex; flex-direction: column; }
    .pay-panel[data-state="waiting"] .panel-order, .pay-panel[data-state="sending"] .panel-order { margin-top: auto; padding-top: 24px; }
    .match-grid:has(.pay-panel[data-state="waiting"]) > aside, .match-grid:has(.pay-panel[data-state="sending"]) > aside { display: none; }
}

/* ── Tickets ────────────────────────────────────────── */
.tickets-page { display: grid; gap: 20px; padding-top: 20px; align-items: start; }
.tickets-list { display: grid; gap: 18px; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.ticket-head { background: var(--chrome); color: #fff; padding: 12px 18px; display: flex; justify-content: space-between; align-items: baseline; }
.ticket-head b { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.ticket-head span { color: var(--on-chrome-muted); font-size: .85rem; font-weight: 600; }
.ticket-qr { padding: 20px 20px 14px; display: grid; justify-items: center; gap: 8px; }
.ticket-qr svg { width: 100%; max-width: 240px; height: auto; }
.ticket-code { font: 800 1.9rem/1 var(--display); letter-spacing: .12em; }
.ticket-info { margin: 0; padding: 14px 18px 18px; border-top: 1px dashed var(--line-2); display: grid; gap: 8px; font-size: .92rem; }
.ticket-info > div:not(.ticket-match) { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.ticket-info dt { color: var(--muted); }
.ticket-info dd { margin: 0; font-weight: 600; }
.ticket-match { font: 800 1.45rem/1.05 var(--display); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 2px .3em; margin-bottom: 4px; }

.order-box { display: grid; gap: 16px; }
.order-status { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; color: var(--green); }
.order-status .icon { width: 20px; height: 20px; }
.order-rows { margin: 0; display: grid; border-top: 1px solid var(--line); }
.order-rows div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.order-rows dt { color: var(--muted); }
.order-rows dd { margin: 0; font-weight: 700; }
.order-actions { display: grid; gap: 10px; }
.tip { color: var(--muted); font-size: .9rem; }

@media (min-width: 960px) {
    .tickets-page { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
    .order-box { position: sticky; top: 96px; }
    /* A stub: code on the left, the match on the right, a tear line between. */
    .ticket-body { display: grid; grid-template-columns: 280px 1fr; }
    .ticket-qr { padding: 24px; border-right: 1px dashed var(--line-2); }
    .ticket-info { border-top: 0; padding: 24px 26px; align-content: center; }
    .ticket-match { font-size: 1.8rem; }
}

/* Past-match rows (match page "played" state) */
.fixtures { list-style: none; margin: 0; padding: 0; }

@media (max-width: 719px) {
    .panel-poster { display: none; }
    .panel-meta { flex-direction: column; gap: 6px; }
    .search { max-width: none; }
}
#panel, #checkout, .box { scroll-margin-top: 120px; }

/* Category links live in the header. On a phone they get their own
   scrolling row under the brand. */
.top nav { overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { white-space: nowrap; }
@media (max-width: 759px) {
    .top .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; row-gap: 8px; }
    .top nav { order: 3; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
    .top nav a { padding: 7px 12px; }
    .nav-help { margin-left: auto; }
    }
@media (min-width: 760px) {
    .nav-help { margin-left: 12px; }
}

/* Header search */
.top-search { flex: 0 1 300px; }
.top-search .search { max-width: none; display: block; }
.top-search input { height: 40px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; border-radius: var(--r-sm); }
.top-search input::placeholder { color: var(--on-chrome-muted); }
.top-search input:focus { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .4); }
.top-search input:focus-visible { outline-color: var(--on-chrome); }
.top-search .icon { color: var(--on-chrome-muted); }
.search-toggle { display: none; background: none; border: 0; color: #fff; width: 40px; height: 40px; border-radius: var(--r-sm); cursor: pointer; place-items: center; }
.search-toggle .icon { width: 20px; height: 20px; }
.top nav { margin-left: auto; }
#listing { padding-top: 8px; }
#listing > section:first-child .group-title { margin-top: 28px; }
.page-title { font: 800 clamp(1.5rem, 4vw, 2rem)/1.15 var(--body); letter-spacing: -.02em; margin-top: 28px; }
.page-title + section .group-title, .page-title + [hidden] + section .group-title { margin-top: 18px; }
@media (max-width: 759px) {
    .search-toggle { display: grid; margin-left: auto; }
    .top-search { display: none; order: 4; flex-basis: 100%; }
    .search-open .top-search { display: block; }
    .top nav { margin-left: calc(var(--gutter) * -1); }
}

/* Poster shown whole (posters run 4:5 to near-square). Any spare space is
   filled with a blurred copy of the same poster rather than bars. */
.card-art { aspect-ratio: 4 / 5; isolation: isolate; }
.card-art-bg { position: absolute; inset: -20px; z-index: -1; background-size: cover; background-position: center; filter: blur(18px); opacity: .7; }
.card-art img { object-fit: contain; object-position: center; }
.card.is-past .card-art-bg { filter: blur(18px) grayscale(1); }
@media (hover: hover) {
    .card:hover .card-title a { text-decoration: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .card:hover .card-art img { transform: scale(1.02); }
}

/* Nothing left to buy */
.sold-out h2 { color: var(--red); }
.tier-summary { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tier-summary li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tier-summary span:first-child { font: 700 1.2rem/1 var(--display); text-transform: uppercase; }
.tier-summary span.num { color: var(--muted); }
.tier-summary b { color: var(--red); font-size: .9rem; }
.card-price.is-out b { color: var(--red); }

/* Nothing to buy on this match: one wide notice, then what is on sale. */
.match-closed { padding-top: 24px; }
.notice { display: grid; gap: 18px; padding: 24px; }
.notice h1, .notice h2 { font: 800 clamp(1.5rem, 4vw, 2rem)/1.1 var(--body); letter-spacing: -.02em; margin-bottom: 8px; }
.notice p { color: var(--ink-2); max-width: 62ch; }
.notice .tier-summary { margin-top: 0; }
.notice.sold-out h2 { color: var(--red); }
.notice-more { margin-top: 20px; }
@media (min-width: 900px) {
    .notice { grid-template-columns: 1fr minmax(280px, 380px); align-items: center; gap: 40px; padding: 28px 32px; }
    .notice:not(:has(.tier-summary)) { grid-template-columns: 1fr; }
}

/* Short pages: the footer sits at the bottom, not mid-screen. */
body > main { flex: 1 0 auto; width: 100%; }
body > .foot { flex-shrink: 0; }
.no-results { padding: 48px 0 8px; }
.no-results h2 { font: 800 1.4rem/1.2 var(--body); letter-spacing: -.02em; }
.no-results p { color: var(--muted); margin: 6px 0 18px; }

/* Back on a match with an unpaid order */
.resume { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 4px; }
.resume b { font-weight: 800; }
.resume p { color: var(--ink-2); font-size: .95rem; }
.resume .link { justify-self: start; padding: 4px 0 0; font-size: .9rem; color: var(--muted); }
.resume.is-paid { border-color: color-mix(in srgb, var(--green) 35%, white); background: var(--green-wash); }
.resume.is-paid b { color: var(--green); }
.resume.is-paid a { font-weight: 700; color: var(--green); }

/* Phones: the header scrolls away so only the pay bar stays fixed, the
   pay bar never hides the footer, and no field is under 16px (iOS zooms
   the page on focus below that). */
@media (max-width: 759px) {
    .top { position: static; }
    body:has(.paybar:not([hidden])) .foot { padding-bottom: 110px; }
    .top-search input { font-size: 16px; }
    #panel, #checkout, .box { scroll-margin-top: 16px; }
}
@media (max-width: 959px) { .match-grid { padding-bottom: 24px; } }

/* Tickets on a phone: each ticket fits one screen (people screenshot and
   forward them), with the match on one line; payment essentials first. */
.order-strip, .ticket-line { display: none; }
@media (max-width: 959px) {
    .order-strip {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        background: var(--green-wash); border: 1px solid color-mix(in srgb, var(--green) 30%, white);
        border-radius: var(--r); padding: 12px 14px; font-size: .95rem;
    }
    .order-strip p { display: flex; align-items: center; gap: 6px; }
    .order-strip b { color: var(--green); }
    .order-strip .icon { color: var(--green); }
    .order-strip a { font-weight: 700; color: var(--green); white-space: nowrap; }
    .ticket-info { display: none; }
    .ticket-line { display: block; padding: 12px 18px 16px; border-top: 1px dashed var(--line-2); color: var(--ink-2); font-size: .92rem; text-align: center; }
    .ticket-qr { padding: 18px 18px 12px; }
    .ticket-qr svg { max-width: 260px; }
}

/* Phones: past matches as compact rows (small poster beside the facts),
   so the page is about what is on sale. Help lives in the footer. */
@media (max-width: 619px) {
    .grid .card.is-past { display: grid; grid-template-columns: 88px 1fr; align-items: center; }
    .card.is-past .card-art { aspect-ratio: 4 / 5; height: 100%; }
    .card.is-past .card-body { padding: 10px 14px; gap: 3px; }
    .card.is-past .card-comp { font-size: .7rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .card.is-past .card-title { font-size: 1.15rem; }
    .card.is-past .card-meta { font-size: .82rem; }
    .card.is-past .card-meta + .card-meta { display: none; }
    .grid:has(.is-past) { gap: 12px; }
    .nav-help { display: none; }
}
/* Small phones (360-419px): All matches, National teams, Cup and Club fit on
   one row without scrolling; narrower screens still scroll it. */
@media (max-width: 419px) {
    .top nav { gap: 2px; }
    .top nav a { padding: 7px 8px; }
}
.foot a { color: var(--on-chrome); }
.tip a, .notice a { color: inherit; font-weight: 700; }
.share { width: 100%; margin-top: 16px; }