:root { --ink: #101421; --paper: #f5f1e7; --red: #f04434; --blue: #3375e7; --gold: #f6c73b; --green: #40a56a; --line: rgba(16,20,33,.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Space Grotesk", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { overflow: hidden; }
.nav-wrap { align-items: center; background: var(--paper); display: flex; height: 84px; justify-content: space-between; padding: 0 clamp(22px, 5vw, 78px); }
.brand { align-items: center; display: inline-flex; font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 800; gap: 9px; letter-spacing: .04em; }
.brand-mark { color: var(--red); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: -.12em; transform: scaleX(1.55); }
nav { display: flex; font-family: "DM Mono", monospace; font-size: 11px; gap: 32px; text-transform: uppercase; }
nav a:hover, .text-link:hover { color: var(--red); }
.nav-cta { background: var(--ink); color: white; font-size: 12px; font-weight: 700; padding: 13px 16px; }
.nav-cta span { color: var(--gold); margin-left: 8px; }
.hero { background: var(--ink); display: grid; grid-template-columns: 1fr 1.08fr; min-height: 625px; }
.hero-copy { color: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: clamp(52px, 8vw, 112px) clamp(22px, 7vw, 110px); }
.eyebrow { align-items: center; display: flex; font-family: "DM Mono", monospace; font-size: 10px; gap: 9px; letter-spacing: .09em; margin: 0 0 18px; text-transform: uppercase; }
.eyebrow span { background: var(--red); display: block; height: 8px; width: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; line-height: .82; }
h1 { font-size: clamp(74px, 9.5vw, 148px); letter-spacing: -.025em; margin: 0; }
h1 i, h2 i { color: var(--gold); font-style: normal; }
.hero-summary { font-size: 16px; line-height: 1.55; margin: 29px 0 32px; max-width: 390px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; }
.button { align-items: center; display: inline-flex; font-size: 13px; font-weight: 700; gap: 28px; justify-content: space-between; padding: 16px 18px; }
.button-primary { background: var(--red); color: white; }.button-primary span, .button-light span { font-size: 20px; line-height: 12px; }
.text-link { border-bottom: 1px solid rgba(245,241,231,.6); font-size: 12px; padding-bottom: 5px; }.text-link span { color: var(--gold); font-size: 10px; margin-left: 6px; }
.hero-stat-row { border-top: 1px solid rgba(245,241,231,.24); display: flex; gap: 25px; margin-top: 56px; padding-top: 17px; }.hero-stat-row div { display: grid; gap: 5px; }.hero-stat-row strong { font-family: "Barlow Condensed"; font-size: 21px; }.hero-stat-row span { color: rgba(245,241,231,.67); font-size: 10px; }
.hero-scene { min-height: 530px; overflow: hidden; position: relative; }.hero-scene img { height: 100%; object-fit: cover; position: absolute; width: 100%; }.scene-shade { background: linear-gradient(180deg, rgba(16,20,33,.15), rgba(16,20,33,.7)); inset: 0; position: absolute; }.scene-meta, .scene-caption { color: white; font-family: "DM Mono"; font-size: 10px; letter-spacing: .07em; position: absolute; }.scene-meta { right: 28px; top: 28px; }.live-dot { background: var(--red); border-radius: 99px; display: inline-block; height: 7px; margin-right: 6px; width: 7px; }.scene-play { background: var(--gold); border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; font-size: 20px; height: 72px; left: 50%; padding-left: 7px; position: absolute; top: 50%; transform: translate(-50%,-50%); transition: transform .2s ease; width: 72px; }.scene-play:hover { transform: translate(-50%,-50%) scale(1.08); }.scene-caption { bottom: 30px; display: grid; gap: 8px; left: 28px; }.scene-caption span { color: var(--gold); }.scene-caption strong { font-family: "Space Grotesk"; font-size: 15px; letter-spacing: 0; }
.marquee { background: var(--gold); font-family: "Barlow Condensed"; font-size: clamp(27px, 3.2vw, 52px); font-weight: 800; overflow: hidden; padding: 15px 0 12px; white-space: nowrap; }.marquee div { animation: slide 20s linear infinite; }.marquee span { color: var(--red); margin: 0 18px; } @keyframes slide { to { transform: translateX(-35%); } }
.games-section, .teams-section, .visit-section { padding: clamp(70px, 9vw, 135px) clamp(22px, 7vw, 110px); }.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 38px; }.section-heading h2, .team-copy h2, .visit-info h2 { font-size: clamp(54px, 7vw, 104px); margin: 0; }.section-heading > p { font-size: 14px; line-height: 1.5; margin: 0; max-width: 245px; }
.game-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, 1fr); }.game-card { aspect-ratio: .69; color: white; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 16px; position: relative; }.game-card::before { background: linear-gradient(180deg, transparent 25%, rgba(16,20,33,.8)); content: ""; inset: 0; position: absolute; }.game-card > * { position: relative; }.fifa { background: #3375e7 url("https://images.unsplash.com/photo-1579952363873-27f3bade9f55?auto=format&fit=crop&w=680&q=80") center/cover; }.gran { background: #f04434 url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=680&q=80") center/cover; }.gta { background: #754b99 url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?auto=format&fit=crop&w=680&q=80") center/cover; }.f1 { background: #2c3846 url("https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=680&q=80") center/cover; }.cod { background: #587249 url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=680&q=80") center/cover; }.game-number { font-family: "DM Mono"; font-size: 10px; }.game-card p { font-family: "DM Mono"; font-size: 9px; letter-spacing: .09em; margin-bottom: 7px; text-transform: uppercase; }.game-card h3 { font-size: clamp(27px, 2.8vw, 44px); margin: 0 0 13px; }.game-card div span { font-family: "DM Mono"; font-size: 10px; }.game-card button { align-items: center; background: transparent; border: 1px solid rgba(255,255,255,.75); color: white; cursor: pointer; display: flex; font-size: 11px; justify-content: space-between; padding: 9px; }.game-card button:hover { background: white; color: var(--ink); }
.teams-section { background: var(--ink); color: var(--paper); display: grid; gap: 70px; grid-template-columns: .75fr 1.25fr; }.team-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.6; margin: 29px 0 0; max-width: 310px; }.team-grid { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; }.team { aspect-ratio: 1.25; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }.team span { font-family: "DM Mono"; font-size: 10px; }.team h3 { font-size: clamp(35px, 4vw, 62px); margin: auto 0 6px; }.team p { font-size: 12px; margin: 0; max-width: 180px; }.team-red { background: var(--red); }.team-blue { background: var(--blue); }.team-gold { background: var(--gold); }.team-green { background: var(--green); }
.membership { background: var(--red); color: white; padding: clamp(35px, 5vw, 70px) clamp(22px, 7vw, 110px); }.membership-top, .membership-bottom, .membership-main { align-items: center; display: flex; justify-content: space-between; }.membership-top { border-bottom: 1px solid rgba(255,255,255,.45); }.membership-kicker { font-size: clamp(20px, 2vw, 30px); font-weight: 700; letter-spacing: .06em; margin-bottom: 20px; }.member-badge { border: 1px solid white; font-family: "DM Mono"; font-size: 10px; margin-bottom: 18px; padding: 6px 8px; }.membership-main { align-items: end; padding: clamp(35px, 5vw, 68px) 0; }.membership-main h2 { align-items: baseline; display: flex; flex-wrap: wrap; font-size: clamp(56px, 8vw, 125px); gap: .12em .2em; line-height: .9; margin: 0; }.membership-main h2 i { color: var(--ink); font-style: normal; }.membership-main h2 strong { color: var(--ink); white-space: nowrap; }.membership-main h2 em { color: white; font-family: "DM Mono"; font-size: clamp(24px, 2.5vw, 38px); font-style: normal; letter-spacing: .02em; white-space: nowrap; }.membership-main > div:first-child p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; margin: 26px 0 0; max-width: 560px; }.member-price { align-items: baseline; color: var(--ink); display: flex; font-family: "Barlow Condensed"; }.member-price span { font-size: 42px; font-weight: 700; }.member-price strong { font-size: clamp(110px, 14vw, 210px); letter-spacing: -.06em; line-height: .65; }.member-price em { color: white; font-family: "DM Mono"; font-size: 10px; font-style: normal; margin-left: 9px; }.membership-bottom { border-top: 1px solid rgba(255,255,255,.45); padding-top: 20px; }.membership-bottom p { font-size: 12px; margin: 0; }.button-light { background: var(--paper); color: var(--ink); }
.visit-section { background: var(--paper); display: grid; gap: 80px; grid-template-columns: 1fr 1fr; }.visit-info > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; margin: 27px 0 0; }.visit-info .rules { border-left: 4px solid var(--red); font-family: "DM Mono"; font-size: 10px; padding-left: 10px; }.contact-panel { align-self: end; border-top: 3px solid var(--ink); }.contact-panel > p { font-family: "DM Mono"; font-size: 10px; margin: 15px 0 22px; text-transform: uppercase; }.contact-panel a { border-top: 1px solid var(--line); display: flex; font-family: "Barlow Condensed"; font-size: clamp(29px, 4vw, 50px); font-weight: 700; justify-content: space-between; padding: 10px 0; }.contact-panel a:hover { color: var(--red); }.contact-panel a span { color: var(--blue); }
.site-qr { align-items: center; gap: 18px; justify-content: flex-start !important; }.site-qr img { background: var(--paper); border: 8px solid var(--paper); height: 116px; image-rendering: pixelated; width: 116px; }.site-qr span { color: var(--ink) !important; font-family: "DM Mono"; font-size: 11px; font-weight: 500; line-height: 1.5; }
footer { align-items: center; background: var(--ink); color: var(--paper); display: flex; font-family: "DM Mono"; font-size: 9px; justify-content: space-between; padding: 24px clamp(22px, 5vw, 78px); } footer p { margin: 0; }
dialog { background: var(--ink); border: 1px solid rgba(245,241,231,.3); color: var(--paper); max-width: min(740px, 90vw); padding: 17px; } dialog::backdrop { background: rgba(16,20,33,.85); backdrop-filter: blur(4px); }.dialog-video { aspect-ratio: 16/9; background: #202638; }.dialog-video video { height: 100%; object-fit: cover; width: 100%; }.dialog-close { background: var(--gold); border: 0; color: var(--ink); cursor: pointer; font-size: 23px; height: 34px; position: absolute; right: 6px; top: 6px; width: 34px; }.dialog-video + h2 { font-size: 44px; margin: 20px 0 8px; }.dialog-video ~ p { font-size: 13px; }
#booking-dialog { max-width: min(520px, 90vw); padding: 32px; width: 100%; }
#booking-dialog h2, #confirmation-dialog h2 { font-size: clamp(42px, 7vw, 72px); margin: 0 0 15px; }
#booking-dialog h2 i, #confirmation-dialog h2 i { color: var(--gold); font-style: normal; }
.booking-intro, #confirmation-dialog p { font-size: 13px; line-height: 1.5; max-width: 390px; }
#booking-form { display: grid; gap: 8px; margin-top: 25px; }
#booking-form label { font-family: "DM Mono"; font-size: 10px; text-transform: uppercase; }
#booking-form input, #booking-form select { background: var(--paper); border: 0; color: var(--ink); font: inherit; margin-bottom: 10px; padding: 12px; }
#booking-form select:disabled { cursor: not-allowed; opacity: .6; }
.booking-availability { color: var(--gold); font-family: "DM Mono"; font-size: 10px; min-height: 15px; }
#booking-form .button { border: 0; cursor: pointer; margin-top: 9px; }
#confirmation-dialog { max-width: min(520px, 90vw); padding: 32px; }
#confirmation-dialog .button { border: 0; cursor: pointer; margin-top: 15px; }
@media (max-width: 850px) { nav { display: none; }.hero { grid-template-columns: 1fr; }.hero-scene { min-height: 420px; }.game-grid { grid-template-columns: repeat(2,1fr); }.game-card { aspect-ratio: 1; }.game-card:last-child { grid-column: span 2; aspect-ratio: 2.2; }.teams-section, .visit-section { grid-template-columns: 1fr; }.membership-main { align-items: start; flex-direction: column; gap: 45px; }.member-price { align-self: end; }.membership-bottom { align-items: start; gap: 20px; flex-direction: column; } }
@media (max-width: 560px) { .nav-wrap { height: 67px; }.nav-cta { font-size: 10px; padding: 11px 10px; }.hero-copy { min-height: 510px; }.hero-stat-row { gap: 16px; }.hero-stat-row strong { font-size: 18px; }.hero-stat-row span { font-size: 8px; }.section-heading { align-items: start; flex-direction: column; gap: 21px; }.game-grid { gap: 7px; }.game-card { padding: 12px; }.team-grid { grid-template-columns: 1fr; }.team { aspect-ratio: 1.8; }.visit-section { gap: 50px; } footer { align-items: start; flex-direction: column; gap: 14px; }.membership-bottom .button { width: 100%; } }
.pay-form { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }.pay-summary { font-family: "DM Mono"; font-size: 12px; margin: 0; }.pay-qty { align-items: center; display: flex; font-family: "DM Mono"; font-size: 11px; gap: 8px; }.pay-qty input { background: var(--paper); border: 0; color: var(--ink); padding: 8px; width: 60px; }.pay-reset { background: transparent; border: 1px solid white; color: white; cursor: pointer; font-size: 11px; padding: 9px 12px; }.button-light { border: 0; cursor: pointer; }
@media (max-width: 850px) { .pay-form { justify-content: flex-start; } }

.game-card form { display: block; }.game-card form button { width: 100%; }

.hero-scene .hero-video { background: #202638; display: block; height: 100%; object-fit: cover; position: absolute; width: 100%; }