/* A shared glass material for the whole experience, not just the opening. */
:root {
  --bg:#101617; --surface:#1a2428; --raised:#263339;
  --line:rgba(218,238,248,.16); --accent:#c7e9f7;
  --primary:#d8f0fb; --primary-hover:#edf8ff;
  --white:#f4f8fa; --muted:#b4c5cd; --dim:#93a6b0;
  --glass-bg:linear-gradient(135deg,rgba(207,231,247,.13),rgba(60,79,89,.08) 45%,rgba(12,21,28,.44));
  --glass-border:rgba(224,244,255,.23);
  --glass-shadow:0 20px 65px #00000026,inset 0 1px 0 #ffffff24,inset 0 -1px 0 #ffffff08;
}
html { scroll-padding-top:28px; }
body {
  background:
    radial-gradient(ellipse 65% 24% at 95% 33%,#47697930,transparent 80%),
    radial-gradient(ellipse 70% 24% at 0 61%,#34535942,transparent 80%),
    radial-gradient(ellipse 55% 13% at 90% 87%,#60787a22,transparent 85%),#101617;
  color:var(--white);
}
::selection { background:#c6e8f4; color:#15252c; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible {
  outline:2px solid #d2effb; outline-offset:4px;
}
.button { border-radius:16px; min-height:48px; }
.button-primary { color:#10222d; border:1px solid #eaf8ff9c; background:linear-gradient(145deg,#f2faff,#badcea); box-shadow:inset 0 1px #fff,0 8px 22px #0000001f; }
.button-primary:not(:disabled):hover { background:linear-gradient(145deg,#fff,#d6effa); }
.text-link {
  width:max-content; max-width:100%; min-height:46px; padding:12px 18px;
  border:1px solid var(--glass-border); border-radius:30px; gap:30px;
  background:linear-gradient(130deg,#e7f4fb12,#ffffff05); color:#edf6fa;
  box-shadow:inset 0 1px #ffffff16; font-size:12px;
  transition:background .2s,border-color .2s,transform .2s;
}
.text-link:hover { background:#dceffa20; border-color:#e8f9ff75; transform:translateY(-2px); }
.icon-button { border-radius:50%; color:#e3eef3; }
.eyebrow,.sub-label { color:var(--dim); }
.eyebrow.muted { letter-spacing:.15em; font-size:9px; }

/* Clear rims, a brighter top edge and a translucent core create the material. */
.site-header.glass-nav {
  border-color:#e7f7ff3b;
  background:linear-gradient(160deg,#e2f1fb21,#0b141b66 50%,#a2bdcc16);
  backdrop-filter:blur(30px) saturate(135%); -webkit-backdrop-filter:blur(30px) saturate(135%);
  box-shadow:0 12px 35px #00000024,inset 0 1px #ffffff38,inset 0 -1px #e3f5ff14;
}
.glass-nav nav .nav-current { border-color:#e3f7ff24; background:linear-gradient(145deg,#edf8ff1f,#edf8ff08); box-shadow:inset 0 1px #ffffff24,0 5px 16px #00000012; }
.glass-seat-card {
  position:relative; border-color:#e3f4ff45;
  background:radial-gradient(ellipse at 100% 0,#d1eaff1a,transparent 65%),linear-gradient(135deg,#cedfec2b,#1c2b329e 50%,#0e1a229c);
  backdrop-filter:blur(30px) saturate(145%); -webkit-backdrop-filter:blur(30px) saturate(145%);
  box-shadow:0 22px 60px #0000002b,inset 0 1px #fff5,inset 1px 0 #ffffff12,inset 0 -1px #d6f0ff24;
}
.glass-seat-card::before,.landing-overview::before,.fixture-card::before,.experience-list article::before {
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,#edfbff9c,transparent); pointer-events:none;
}
.glass-card-top>svg { filter:drop-shadow(0 2px 6px #c8edff2b); }
.hero-input-wrap { background:linear-gradient(130deg,#e9faff0d,#06121c33); border-color:#e5f6ff3d; box-shadow:inset 0 1px 8px #00000010,0 1px #ffffff08; }
.hero-input-wrap input:focus-visible { outline:none; }
.hero-seat-form button { background:linear-gradient(140deg,#f2faff,#c5e2f2); box-shadow:inset 0 1px #fff,0 8px 24px #00000020; }
.hero-seat-form button:hover { background:linear-gradient(140deg,#fff,#d8eefb); }
.round-arrow { background:linear-gradient(140deg,#e8f6ff2b,#e8f6ff08); border-color:#ecf9ff59; box-shadow:inset 0 1px #ffffff38,0 7px 20px #0002; }
.landing-overview { position:relative; background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); }
.landing-stats strong { background:linear-gradient(140deg,#fff,#b9d8e3); color:transparent; background-clip:text; -webkit-background-clip:text; }

/* The next match uses the same glass surface and a quiet pitch engraving. */
.explore-section { padding:85px 0 0; width:calc(100% - 48px); max-width:1600px; }
.section-heading { margin:0 12px 32px; align-items:flex-end; gap:35px; }
.section-heading .eyebrow { margin-bottom:16px; }
.section-heading h2 { font-size:clamp(35px,4vw,57px); font-weight:400; line-height:1.06; }
.section-heading h2 span { color:#a6bdc7; }
.section-heading>p { color:var(--muted); font-size:13px; line-height:1.8; max-width:330px; }
.fixture-card {
  position:relative; margin-bottom:24px; border:1px solid var(--glass-border); border-radius:28px;
  background:radial-gradient(ellipse at 6% 0,#c2e4fa20,transparent 57%),var(--glass-bg);
  box-shadow:var(--glass-shadow); isolation:isolate;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.fixture-card::after {
  content:""; width:170px; height:106px; position:absolute; left:44%; top:20px; z-index:-1;
  border:1px solid #d7efff10; border-radius:10px; transform:rotate(-18deg);
  background:linear-gradient(90deg,transparent 49.6%,#d7efff0c 49.6%,#d7efff0c 50.4%,transparent 50.4%);
  pointer-events:none;
}
.fixture-main { padding:28px 32px 24px; grid-template-columns:minmax(0,1fr) auto; gap:10px 32px; }
.fixture-kicker { display:flex; align-items:center; gap:8px; font-size:9px; color:#c9e5f1; letter-spacing:.13em; }
.fixture-kicker::before { content:""; width:5px; height:5px; border-radius:50%; background:#c5eafd; box-shadow:0 0 12px #bce5ff66; }
.fixture-title { font-size:19px; font-weight:400; color:#dce8ee; letter-spacing:-.035em; }
.fixture-content { padding-left:32px; border-left:1px solid #e1f4ff14; max-width:560px; }
.fixture-match { color:#f5faff; font-size:32px; font-weight:400; letter-spacing:-.045em; margin-bottom:8px; }
.fixture-date { color:#c4d4dd; font-size:12px; }
.fixture-zone { color:#9db1bd; }
.fixture-status { color:#bdcdd5; max-width:410px; font-size:12px; }
.fixture-footer { background:#ffffff03; border-color:#e5f8ff10; padding:13px 32px; font-size:9px; gap:10px 22px; }
.fixture-source,.fixture-official { color:#c3dce8; }
.fixture-updated { color:#90a4af; font-size:9px; }

/* The lower half becomes a set of generous editorial glass cards. */

.experience-section { display:block; width:calc(100% - 48px); max-width:1600px; margin:78px auto 0; padding:0 0 64px; }
.experience-intro { display:grid; grid-template-columns:1fr 360px; gap:12px 45px; padding:0 12px; }
.experience-intro .eyebrow { grid-column:1/-1; margin:0 0 4px; }
.experience-intro h2 { grid-column:1; grid-row:2/4; font-weight:400; font-size:clamp(35px,4vw,55px); line-height:1.09; }
.experience-intro h2 em { color:#b3cdd9; }
.experience-intro>p:not(.eyebrow) { grid-column:2; margin:0; font-size:13px; color:#aec2ce; line-height:1.8; }
.experience-intro .text-link { grid-column:2; align-self:start; }
.experience-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:35px; }
.experience-list article {
  position:relative; display:flex; flex-direction:column; gap:28px; min-width:0; min-height:258px;
  padding:29px 30px; border:1px solid var(--glass-border); border-radius:28px;
  background:var(--glass-bg); box-shadow:var(--glass-shadow);
  transition:transform .25s,border-color .25s,background .25s;
}
.experience-list article:last-child { border-bottom:1px solid var(--glass-border); }
.experience-list article:hover { transform:translateY(-4px); border-color:#e3f6ff55; background:linear-gradient(135deg,#d2eaf126,#1b29324d); }
.experience-number { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid #e4f5ff29; background:linear-gradient(135deg,#eff8ff12,#ffffff02); color:#c7dce7; box-shadow:inset 0 1px #fff2; font-size:10px; }
.experience-list h3 { font-size:24px; font-weight:400; line-height:1.15; letter-spacing:-.035em; margin:0 0 13px; }
.experience-list p { font-size:12px; color:#b4c5cf; line-height:1.8; max-width:360px; }
.experience-list article>svg { position:absolute; top:37px; right:31px; width:25px; height:25px; margin:0; color:#c5e0ee; filter:drop-shadow(0 3px 9px #a6dbff33); }
.closing-line { width:calc(100% - 48px); max-width:1600px; margin:0 auto; padding:28px 32px; border:1px solid #e1f1ff1f; border-radius:24px; background:linear-gradient(100deg,#d4e9f30d,#b7d5e503); box-shadow:inset 0 1px #fff1; color:#9fb6c3; font-size:clamp(12px,1.5vw,21px); }
.closing-line strong { color:#deedf5; }
footer { width:calc(100% - 48px); max-width:1600px; margin:0 auto; padding:32px 12px; background:transparent; border:0; }
footer .brand { font-size:13px; font-weight:500; letter-spacing:-.02em; gap:8px; }
footer .brand-light { color:#afc0c9; letter-spacing:.03em; }
footer>p { color:#9eb2bf; font-size:11px; }
footer>span { font-size:8px; line-height:1.7; color:#9aadb8; }

/* Matching glass dialogs, controls and system feedback. */
dialog {
  border:1px solid #e1f5ff45; border-radius:30px;
  background:radial-gradient(ellipse at 0 0,#accddd22,transparent 65%),linear-gradient(135deg,#2b3c45eb,#101f28f2);
  box-shadow:0 35px 110px #0009,inset 0 1px #ffffff38;
  backdrop-filter:blur(30px) saturate(125%); -webkit-backdrop-filter:blur(30px) saturate(125%);
}
dialog::backdrop { background:#060e14a6; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
#helpDialog { width:580px; padding:38px; }
dialog h2 { font-weight:400; letter-spacing:-.045em; }
.dialog-kicker { color:#c7e1ef; }
.dialog-close.icon-button { width:42px; height:42px; color:#e4f3fa; border-radius:50%; border-color:#e6f6ff33; background:linear-gradient(135deg,#f4fbff1a,#d0e7f207); box-shadow:inset 0 1px #ffffff24; }
.help-steps { padding-left:19px; }
.help-steps li { color:#e6f2f8; margin:24px 0; padding-left:3px; }
.help-steps strong { font-size:13px; }
.help-steps p { font-size:12px; line-height:1.75; color:#b8cbd6; }
.dialog-footnote { color:#a3bac7; border-color:#e5f5ff18; line-height:1.8; }

.toast { border:1px solid #e9f7ff5c; border-radius:30px; background:linear-gradient(135deg,#e3f3fae8,#b9d7e6e8); color:#152c39; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 12px 45px #0005,inset 0 1px #ffffffa6; }

@media(min-width:1500px) {

  .experience-list article { padding:35px; }
}
@media(max-width:1000px) {
  .section-heading { margin-inline:5px; }
  .section-heading>p { max-width:270px; font-size:12px; }

  .experience-intro { grid-template-columns:1fr 300px; gap:14px 25px; }
  .experience-list { gap:14px; }
  .experience-list article { padding:25px; }
  .experience-list h3 { font-size:21px; }
  .experience-list article>svg { right:25px; }
}
@media(max-width:850px) {
  .explore-section,.experience-section,.closing-line,footer { width:calc(100% - 32px); }
  .fixture-main { padding:25px; }
  .fixture-title { font-size:17px; }
  .fixture-match { font-size:26px; }
  .fixture-content { padding-left:22px; max-width:350px; }
  .fixture-footer { padding-inline:25px; }

  .experience-section { margin-top:58px; }
  .experience-intro { grid-template-columns:1fr 270px; padding:0 4px; }
  .experience-intro h2 { font-size:36px; }
  .experience-list article { padding:24px 21px; }
  .experience-list article>svg { right:22px; }
  .experience-list p { font-size:11px; }
  .closing-line { padding:25px; }
}
@media(max-width:650px) {
  html { scroll-padding-top:15px; }
  .explore-section,.experience-section,.closing-line,footer { width:calc(100% - 20px); }
  .explore-section { padding-top:55px; }
  .section-heading { display:block; margin:0 12px 25px; }
  .section-heading h2 { font-size:36px; line-height:1.09; }
  .section-heading>p { font-size:12px; max-width:none; margin:19px 0 0; }
  .fixture-card { border-radius:25px; margin-bottom:16px; }
  .fixture-main { display:block; padding:24px; }
  .fixture-kicker { font-size:8px; margin-bottom:10px; }
  .fixture-title { font-size:18px; max-width:255px; }
  .fixture-content { border:0; border-top:1px solid #deefff1a; padding:18px 0 0; margin:18px 0 0; max-width:none; }
  .fixture-match { font-size:30px; }
  .fixture-date { font-size:12px; }
  .fixture-zone { font-size:10px; margin-top:4px; }
  .fixture-footer { padding:14px 24px; font-size:9px; }
  .fixture-official { width:100%; margin:0; padding-top:4px; }
  .fixture-card::after { left:auto; right:-35px; top:30px; width:145px; height:90px; }

  .experience-section { margin-top:49px; padding-bottom:35px; }
  .experience-intro { display:block; padding:0 13px; }
  .experience-intro .eyebrow { font-size:8px; margin-bottom:18px; }
  .experience-intro h2 { font-size:35px; }
  .experience-intro>p:not(.eyebrow) { font-size:12px; margin:20px 0; }
  .experience-list { grid-template-columns:1fr; margin-top:25px; gap:13px; }
  .experience-list article { padding:26px; border-radius:25px; min-height:0; gap:23px; }
  .experience-list h3 { font-size:25px; margin-bottom:10px; }
  .experience-list p { font-size:12px; }
  .experience-list article>svg { right:27px; top:33px; }
  .closing-line { flex-wrap:wrap; gap:5px; padding:22px 25px; font-size:13px; line-height:1.5; border-radius:22px; }
  .closing-line>span { width:100%; }
  .closing-line svg { height:22px; width:22px; }
  footer { display:flex; flex-wrap:wrap; gap:13px; padding:28px 13px; }
  footer .brand { width:100%; font-size:13px; }
  footer>p { display:block; margin:0; font-size:10px; }
  footer>span { display:block; width:100%; font-size:7px; }
  #helpDialog { padding:29px 23px; border-radius:26px; }
  #helpDialog h2 { font-size:32px; padding-right:24px; }
  .dialog-kicker { font-size:7px; margin-right:38px; }
  .help-steps p { font-size:11px; }

}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header.glass-nav,.glass-seat-card { background:linear-gradient(140deg,#354750,#15252de8); }

}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .experience-list article,.text-link { transition:none; }
  .experience-list article:hover,.text-link:hover { transform:none; }
}