/* ═══════════════════════════════════════
   DerbiPass – Ana Site CSS
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:       #0e0e0e;
  --surf:     #161616;
  --card:     #1c1c1c;
  --card2:    #212121;
  --border:   #2a2a2a;
  --border2:  #333;
  --red:      #d4252a;
  --red2:     #ff3b41;
  --red-glow: rgba(212,37,42,.18);
  --gold:     #e8c03a;
  --white:    #f2f2f2;
  --light:    #bbb;
  --gray:     #777;
  --muted:    #444;
  --green:    #22c55e;
  --amber:    #f59e0b;
  --blue:     #3b82f6;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--white); overflow-x:hidden; min-height:100vh; }
img { display:block; max-width:100%; }
a { text-decoration:none; }
button { cursor:pointer; font-family:'Inter',sans-serif; }
input, select, textarea { font-family:'Inter',sans-serif; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:3px; }

/* ── UTILITY ── */
.hidden { display:none !important; }
.text-red { color:var(--red); }
.text-gold { color:var(--gold); }
.text-green { color:var(--green); }
.text-gray { color:var(--gray); }
.mono { font-family:'JetBrains Mono','Courier New',monospace; font-size:.9em; }

/* ─────────────────────────────────────
   NAV
───────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(14,14,14,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6%;
}
.nav-logo {
  font-family:'Anton',sans-serif;
  font-size:26px; letter-spacing:3px; color:var(--white);
  user-select:none;
}
.nav-logo span { color:var(--red); }
.nav-logo small { font-size:10px; color:var(--gray); letter-spacing:2px; margin-left:6px; vertical-align:middle; }
.nav-center { display:flex; align-items:center; gap:28px; }
.nav-center a {
  color:var(--gray); font-size:13px; font-weight:500; letter-spacing:.5px;
  transition:color .2s;
}
.nav-center a:hover { color:var(--white); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-live-chip {
  display:flex; align-items:center; gap:7px;
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2);
  padding:5px 12px; border-radius:20px;
  font-size:11px; color:var(--green); font-weight:700; letter-spacing:1px;
}
.live-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
  animation:blink 1.4s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }
.nav-hamburger {
  display:none; background:none; border:none; color:var(--white);
  padding:6px; line-height:1;
}

/* ─────────────────────────────────────
   TICKER
───────────────────────────────────── */
.ticker-bar {
  overflow:hidden; background:var(--red);
  border-bottom:1px solid rgba(0,0,0,.3);
  margin-top:60px;
}
.ticker-track {
  display:flex; gap:0;
  animation:ticker 24s linear infinite;
  white-space:nowrap;
}
.ticker-track:hover { animation-play-state:paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 30px; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff; flex-shrink:0;
}
.ticker-item i { opacity:.5; font-size:6px; }

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
.hero {
  min-height:calc(100vh - 60px);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(212,37,42,.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 50%, rgba(212,37,42,.04) 0%, transparent 60%),
    linear-gradient(180deg, #0e0e0e 0%, #080808 100%);
}
.hero-grain {
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.hero-lines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-50deg, transparent, transparent 60px, rgba(255,255,255,.008) 60px, rgba(255,255,255,.008) 61px);
}
.hero-inner {
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; width:100%;
  padding:70px 6%;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}

/* matchup */
.matchup-wrap { margin-bottom:28px; }
.matchup {
  display:flex; align-items:center; gap:0;
  margin-bottom:12px;
}
.team-block { flex:1; }
.team-abbr {
  font-family:'Anton',sans-serif;
  font-size:clamp(52px,7.5vw,88px);
  letter-spacing:3px; line-height:1;
}
.team-abbr.bjk { color:#fff; }
.team-abbr.gs  { color:var(--gold); }
.team-full {
  font-size:11px; color:var(--gray); font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-top:4px;
}
.vs-sep {
  font-family:'Anton',sans-serif; font-size:22px; color:var(--red);
  background:rgba(212,37,42,.1); border:1px solid rgba(212,37,42,.3);
  padding:10px 14px; border-radius:2px; flex-shrink:0; letter-spacing:2px;
  margin:0 4px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(212,37,42,.12); border:1px solid rgba(212,37,42,.35);
  color:var(--red2); padding:6px 14px; border-radius:2px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:20px;
}

/* meta */
.hero-meta { margin-bottom:32px; }
.meta-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
  font-size:14px;
}
.meta-row:last-child { border-bottom:none; }
.meta-ico {
  width:32px; height:32px; border-radius:4px;
  background:rgba(212,37,42,.1); border:1px solid rgba(212,37,42,.2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.meta-ico svg { width:15px; height:15px; fill:var(--red); }
.meta-main { font-weight:600; color:var(--white); }
.meta-aux { margin-left:auto; color:var(--gray); font-size:13px; }

/* btns */
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--red); color:#fff;
  padding:14px 32px; border:none; border-radius:2px;
  font-family:'Oswald',sans-serif; font-size:16px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  transition:background .2s, transform .15s;
}
.btn-primary:hover { background:var(--red2); transform:translateY(-2px); }
.btn-primary svg { width:18px; height:18px; fill:#fff; }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--light);
  padding:14px 24px; border:1px solid var(--border2); border-radius:2px;
  font-family:'Oswald',sans-serif; font-size:15px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; transition:.2s;
}
.btn-outline:hover { border-color:var(--white); color:var(--white); }
.btn-outline svg { width:16px; height:16px; stroke:currentColor; fill:none; }

/* hero right */
.hero-stats { display:flex; flex-direction:column; gap:12px; }
.hstat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:3px; padding:18px 22px;
  display:flex; justify-content:space-between; align-items:center;
  transition:border-color .2s;
}
.hstat-card:hover { border-color:rgba(212,37,42,.4); }
.hstat-label { font-size:10px; color:var(--gray); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.hstat-val { font-family:'Anton',sans-serif; font-size:32px; letter-spacing:1px; line-height:1; }
.hstat-sub { font-size:11px; color:var(--gray); margin-top:3px; }
.hstat-ico { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.hstat-ico svg { width:22px; height:22px; }
.counter-box {
  background:rgba(212,37,42,.06); border:1px solid rgba(212,37,42,.2);
  border-radius:3px; padding:16px 20px;
}
.counter-label { font-size:10px; color:var(--red2); font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.counter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.cnt-item { text-align:center; padding:0 8px; border-right:1px solid rgba(255,255,255,.06); }
.cnt-item:last-child { border-right:none; }
.cnt-n { font-family:'Anton',sans-serif; font-size:28px; line-height:1; }
.cnt-l { font-size:9px; color:var(--gray); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* ─────────────────────────────────────
   LIVE BAR
───────────────────────────────────── */
.live-bar {
  background:var(--surf); border-bottom:1px solid var(--border);
  padding:10px 6%;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.lb-left { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lb-item { display:flex; align-items:center; gap:6px; font-size:13px; }
.lb-item svg { width:14px; height:14px; }
.lb-sep { color:var(--muted); }
.lb-right { min-width:180px; }
.prog-label { display:flex; justify-content:space-between; font-size:11px; color:var(--gray); margin-bottom:4px; }
.prog-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.prog-fill { height:100%; background:linear-gradient(90deg,var(--red),var(--red2)); border-radius:2px; transition:width .6s; }

/* ─────────────────────────────────────
   TICKETS SECTION
───────────────────────────────────── */
.section { padding:80px 6%; max-width:1340px; margin:0 auto; }
.sec-hd { text-align:center; margin-bottom:16px; }
.sec-title { font-family:'Anton',sans-serif; font-size:clamp(32px,4.5vw,52px); letter-spacing:4px; }
.sec-sub { color:var(--gray); font-size:14px; margin-top:8px; }
.cat-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.cat-tab {
  display:flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border);
  color:var(--gray); padding:8px 18px; border-radius:2px;
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  transition:.2s;
}
.cat-tab svg { width:13px; height:13px; }
.cat-tab:hover, .cat-tab.active { background:var(--red); border-color:var(--red); color:#fff; }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.tcard {
  background:var(--card); border:1px solid var(--border);
  border-radius:3px; overflow:hidden; position:relative;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.tcard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--clr,var(--red)); }
.tcard:hover { transform:translateY(-4px); border-color:rgba(212,37,42,.4); box-shadow:0 12px 40px rgba(212,37,42,.08); }
.tcard.sold-out { opacity:.5; pointer-events:none; }
.tcard-head { padding:16px 20px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; }
.tcat-name { font-family:'Oswald',sans-serif; font-size:17px; font-weight:700; letter-spacing:.5px; margin-bottom:2px; }
.tzone { font-size:11px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; }
.avail-badge { font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:2px; white-space:nowrap; }
.av-ok  { background:rgba(34,197,94,.1);  color:var(--green); border:1px solid rgba(34,197,94,.2); }
.av-low { background:rgba(245,158,11,.1); color:var(--amber); border:1px solid rgba(245,158,11,.2); }
.av-no  { background:rgba(212,37,42,.1);  color:var(--red2);  border:1px solid rgba(212,37,42,.2); }
.tcard-body { padding:16px 20px 18px; }
.price-row { display:flex; align-items:baseline; gap:5px; margin-bottom:10px; }
.price-n { font-family:'Anton',sans-serif; font-size:36px; letter-spacing:1px; }
.price-c { font-size:17px; color:var(--gray); }
.stock-bar { height:3px; background:var(--border); border-radius:2px; margin-bottom:14px; overflow:hidden; }
.stock-fill { height:100%; border-radius:2px; transition:width .5s; }
.btn-buy {
  width:100%; background:var(--red); color:#fff; border:none; padding:11px;
  border-radius:2px; font-family:'Oswald',sans-serif; font-size:14px;
  font-weight:600; letter-spacing:2px; text-transform:uppercase; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-buy svg { width:15px; height:15px; fill:#fff; }
.btn-buy:hover { background:var(--red2); }
.btn-buy:disabled { background:var(--border); color:var(--muted); cursor:not-allowed; }

/* ─────────────────────────────────────
   MODAL
───────────────────────────────────── */
.overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.9); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.overlay.open { display:flex; }
.modal {
  background:var(--surf); border:1px solid var(--border2); border-radius:4px;
  width:100%; max-width:560px; max-height:93vh; overflow-y:auto; position:relative;
}
.modal-top {
  padding:18px 24px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--surf); z-index:10;
}
.modal-top h3 { font-family:'Oswald',sans-serif; font-size:18px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.modal-close { background:none; border:none; color:var(--gray); padding:4px; line-height:1; transition:color .2s; }
.modal-close:hover { color:var(--white); }
.modal-close svg { width:20px; height:20px; stroke:currentColor; fill:none; }
.modal-body { padding:24px; }
.step-bar { display:flex; gap:6px; margin-bottom:24px; }
.step-seg { flex:1; height:2px; border-radius:2px; background:var(--border); transition:background .3s; }
.step-seg.done   { background:var(--red); }
.step-seg.active { background:var(--red2); }
.step-label { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--gray); text-transform:uppercase; margin-bottom:16px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.frow.one { grid-template-columns:1fr; }
.fgroup { display:flex; flex-direction:column; gap:5px; }
.fgroup label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); }
.fgroup input, .fgroup select {
  background:var(--card); border:1px solid var(--border);
  color:var(--white); padding:11px 12px; border-radius:2px;
  font-size:14px; outline:none; transition:border-color .2s; width:100%;
}
.fgroup input:focus, .fgroup select:focus { border-color:var(--red); }
.fgroup input::placeholder { color:var(--muted); }
.fgroup select option { background:var(--card); }

/* team sel */
.team-sel { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:20px; }
.ts-btn {
  padding:10px 6px; border:1px solid var(--border); border-radius:2px;
  background:var(--card); color:var(--gray);
  font-size:11px; font-weight:700; letter-spacing:.5px; text-align:center;
  transition:.2s; display:flex; flex-direction:column; align-items:center; gap:5px;
}
.ts-btn svg { width:20px; height:20px; }
.ts-btn:hover { border-color:var(--gray); color:var(--white); }
.ts-btn.sel { border-color:var(--red); background:rgba(212,37,42,.1); color:var(--white); }

/* stadium */
.stadium { background:var(--card); border:1px solid var(--border); border-radius:3px; padding:14px; margin-bottom:14px; }
.stad-lbl { font-size:9px; font-weight:700; letter-spacing:2px; color:var(--gray); text-transform:uppercase; text-align:center; margin-bottom:10px; }
.field-box { background:linear-gradient(180deg,#145a32,#1a7a44); border:2px solid #27ae60; border-radius:3px; padding:8px 0; text-align:center; font-size:9px; color:#6fcf97; font-weight:700; letter-spacing:3px; margin:6px 12px; }
.trib-row { display:flex; gap:5px; justify-content:center; margin-bottom:5px; }
.trib-btn {
  flex:1; max-width:100px; padding:7px 4px; border:1px solid var(--border); border-radius:2px;
  background:var(--surf); color:var(--gray);
  font-size:9px; font-weight:700; letter-spacing:.5px; text-align:center; transition:.2s;
}
.trib-btn:hover, .trib-btn.sel { border-color:var(--red); background:rgba(212,37,42,.1); color:var(--white); }
.trib-btn.kapali { opacity:.35; cursor:not-allowed; font-size:8px; }
.mid-row { display:flex; gap:5px; align-items:stretch; margin-bottom:5px; }
.side-tribs { display:flex; flex-direction:column; gap:5px; width:90px; flex-shrink:0; }
.side-tribs .trib-btn { max-width:100%; }
.stad-zone-lbl { font-size:9px; text-align:center; font-weight:700; letter-spacing:1px; padding:2px 0; }
.seat-info { text-align:center; font-size:12px; color:var(--red2); font-weight:600; min-height:18px; margin:6px 0; }

/* payment */
.pay-tabs { display:flex; border:1px solid var(--border); border-radius:2px; overflow:hidden; margin-bottom:16px; }
.pay-tab {
  flex:1; padding:11px; background:none; border:none; color:var(--gray);
  font-size:13px; font-weight:600; transition:.2s; text-align:center;
  border-right:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:6px;
}
.pay-tab:last-child { border-right:none; }
.pay-tab svg { width:14px; height:14px; stroke:currentColor; fill:none; }
.pay-tab.active { background:var(--red); color:#fff; }
.pay-tab.off { opacity:.3; cursor:not-allowed; }
.pay-sec { display:none; }
.pay-sec.show { display:block; }
.cc-security {
  background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.2);
  border-radius:2px; padding:10px 12px; font-size:12px; color:#93c5fd;
  display:flex; align-items:center; gap:8px; margin-top:12px;
}
.cc-security svg { width:14px; height:14px; stroke:currentColor; fill:none; flex-shrink:0; }
.havale-box { background:var(--card); border:1px solid var(--border); border-radius:3px; }
.hrow { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; }
.hrow:last-child { border-bottom:none; }
.hl { color:var(--gray); font-size:11px; }
.hv { font-weight:700; font-family:'Courier New',monospace; font-size:12px; }
.ref-code { color:var(--red2) !important; font-size:14px !important; }
.hav-warn {
  margin-top:10px; background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.2);
  border-radius:2px; padding:10px 12px; font-size:12px; color:var(--amber);
  display:flex; align-items:flex-start; gap:8px;
}
.hav-warn svg { width:14px; height:14px; stroke:currentColor; fill:none; flex-shrink:0; margin-top:1px; }
.sum-box { background:var(--card); border:1px solid var(--border); border-radius:3px; padding:14px 16px; margin:14px 0; }
.sum-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
.sum-row .sl { color:var(--gray); }
.sum-total { border-top:1px solid var(--border); margin-top:8px; padding-top:10px; font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; }
.step-btns { display:flex; gap:10px; margin-top:16px; }
.btn-back {
  flex:1; background:transparent; border:1px solid var(--border); color:var(--gray);
  padding:12px; border-radius:2px; font-family:'Oswald',sans-serif; font-size:14px;
  letter-spacing:1px; text-transform:uppercase; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-back svg { width:14px; height:14px; stroke:currentColor; fill:none; }
.btn-back:hover { border-color:var(--white); color:var(--white); }
.btn-next {
  flex:2; background:var(--red); color:#fff; border:none; padding:12px; border-radius:2px;
  font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-next svg { width:15px; height:15px; stroke:currentColor; fill:none; }
.btn-next:hover { background:var(--red2); }
.ssl-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--muted); margin-top:10px; }
.ssl-note svg { width:12px; height:12px; stroke:currentColor; fill:none; }

/* ─────────────────────────────────────
   TOAST
───────────────────────────────────── */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--card); border:1px solid var(--border);
  border-radius:3px; padding:13px 22px; font-size:14px; font-weight:600;
  z-index:9999; transition:transform .3s; white-space:nowrap;
  display:flex; align-items:center; gap:10px; max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.ok  { border-color:var(--green); color:var(--green); }
.toast.err { border-color:var(--red2); color:var(--red2); }
.toast svg { width:16px; height:16px; stroke:currentColor; fill:none; }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
.footer {
  background:var(--surf); border-top:1px solid var(--border);
  padding:40px 6%; text-align:center;
}
.footer-logo { font-family:'Anton',sans-serif; font-size:22px; letter-spacing:3px; margin-bottom:10px; }
.footer-logo span { color:var(--red); }
.footer-sub { font-size:12px; color:var(--gray); line-height:1.8; }
.footer-divider { width:40px; height:2px; background:var(--red); margin:16px auto; }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; padding:50px 6%; }
  .hero-stats { display:none; }
  .nav-center { display:none; }
  .nav-hamburger { display:flex; align-items:center; }
}
@media (max-width:640px) {
  .tgrid { grid-template-columns:1fr; }
  .frow { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; }
  .btn-primary, .btn-outline { width:100%; justify-content:center; }
  .team-abbr { font-size:clamp(38px,12vw,64px); }
  .live-bar { flex-direction:column; align-items:flex-start; }
  .lb-right { width:100%; }
  .modal { max-height:96vh; }
  .trib-btn { font-size:8px; padding:6px 2px; }
}
@media (max-width:380px) {
  .nav-logo { font-size:20px; }
  .vs-sep { padding:8px 10px; font-size:18px; }
  .cat-tab { font-size:11px; padding:7px 12px; }
}

/* ── MOBILE MENU ── */
.mob-menu {
  display:none; position:fixed; top:60px; left:0; right:0;
  background:#111; border-bottom:1px solid var(--border);
  z-index:800; padding:8px 0;
}
.mob-menu.open { display:block; }
.mob-menu a { display:block; padding:12px 6%; color:var(--light); font-weight:600; font-size:14px; border-bottom:1px solid var(--border); }
.mob-menu a:last-child { border-bottom:none; }

/* ── TEAM LOGO ── */
.team-logo { width:60px; height:60px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* ── MATCH GRID ── */
.match-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.mcard {
  background:var(--card); border:1px solid var(--border); border-radius:3px;
  overflow:hidden; transition:.2s; cursor:pointer; position:relative;
}
.mcard:hover { border-color:rgba(212,37,42,.4); transform:translateY(-3px); box-shadow:0 8px 32px rgba(212,37,42,.08); }
.mcard.selected { border-color:var(--red); box-shadow:0 0 0 2px rgba(212,37,42,.2); }
.mcard-badge {
  position:absolute; top:12px; right:12px;
  font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:2px;
}
.mb-derbi { background:rgba(212,37,42,.15); color:var(--red2); border:1px solid rgba(212,37,42,.3); }
.mb-normal { background:rgba(255,255,255,.06); color:var(--gray); border:1px solid var(--border); }
.mcard-teams {
  padding:20px; display:flex; align-items:center; justify-content:space-between;
}
.mt-block { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.mt-logo { width:52px; height:52px; object-fit:contain; }
.mt-name { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; letter-spacing:.5px; }
.mt-full { font-size:10px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; }
.mcard-vs { font-family:'Anton',sans-serif; font-size:18px; color:var(--red); letter-spacing:2px; flex-shrink:0; padding:0 12px; }
.mcard-info { padding:0 20px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; padding-top:12px; }
.mi-left { display:flex; flex-direction:column; gap:4px; }
.mi-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--light); }
.mi-row svg { flex-shrink:0; }
.mi-price { font-family:'Anton',sans-serif; font-size:20px; color:var(--green); }
.mi-price small { font-family:'Inter',sans-serif; font-size:11px; color:var(--gray); }
.btn-mcard {
  background:var(--red); color:#fff; border:none;
  padding:9px 18px; border-radius:2px; font-family:'Oswald',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  transition:.2s; display:flex; align-items:center; gap:6px;
}
.btn-mcard:hover { background:var(--red2); }
.btn-mcard svg { width:13px; height:13px; }

/* ── CARD BRANDS ── */
.card-brands { display:flex; gap:8px; margin-bottom:16px; }
.brand-logo {
  padding:5px 10px; border-radius:3px; font-size:11px; font-weight:900; letter-spacing:1px;
  border:1px solid var(--border2);
}
.visa  { color:#1a1f71; background:#f0f4ff; }
.mc    { color:#eb001b; background:#fff5f5; }
.troy  { color:#004A97; background:#e8f0fe; }
.amex  { color:#007bc1; background:#e8f4ff; }

/* ── CARD INPUT WRAP ── */
.card-input-wrap { position:relative; }
.card-input-wrap input { padding-right:36px; }
.card-lock { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--gray); pointer-events:none; }

/* ── CVV TIP ── */
.cvv-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; background:var(--border2);
  color:var(--gray); font-size:9px; font-weight:700; cursor:pointer;
  border:none; margin-left:4px; vertical-align:middle;
}
.cvv-tip:hover { background:var(--red); color:#fff; }

/* ── INFO BOX ── */
.info-box {
  border-radius:2px; padding:12px 14px; font-size:12px;
  display:flex; align-items:flex-start; gap:8px; margin-bottom:12px;
}
.info-box.blue { background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.2); color:#93c5fd; }
.info-box.amber { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2); color:var(--amber); }

/* ── SUM MATCH ── */
.sum-match {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 0 6px; font-family:'Oswald',sans-serif;
}
.sm-logo { width:32px; height:32px; object-fit:contain; }
.sm-vs { font-size:14px; color:var(--red); font-weight:700; letter-spacing:1px; }
.sm-teams { font-size:14px; font-weight:700; letter-spacing:.5px; }

/* ── RESPONSIVE ADDITIONS ── */
@media(max-width:640px) {
  .match-grid { grid-template-columns:1fr; }
  .card-brands { flex-wrap:wrap; }
  .mcard-teams { padding:16px; }
  .mt-logo { width:40px; height:40px; }
}

/* ── STADIUM SVG MAP ── */
.stad-svg-wrap { margin:10px 0; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:#0a0a0a; }
.stad-svg { width:100%; height:auto; display:block; }
.stad-zone:not(.disabled):hover rect { stroke:#d4252a !important; stroke-width:2 !important; }
.stad-zone:not(.disabled):hover text:first-of-type { fill:#fff !important; }

/* ── MATCH GRID ── */
.match-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.mcard { background:var(--card); border:1px solid var(--border); border-radius:3px; overflow:hidden; transition:.2s; cursor:pointer; position:relative; }
.mcard:hover,.mcard.selected { border-color:rgba(212,37,42,.5); transform:translateY(-3px); box-shadow:0 8px 32px rgba(212,37,42,.1); }
.mcard.selected { transform:none; box-shadow:0 0 0 2px rgba(212,37,42,.25); }
.mcard-badge { position:absolute; top:12px; right:12px; font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:2px; }
.mb-derbi  { background:rgba(212,37,42,.15); color:var(--red2); border:1px solid rgba(212,37,42,.3); }
.mb-normal { background:rgba(255,255,255,.06); color:var(--gray); border:1px solid var(--border); }
.mcard-teams { padding:20px; display:flex; align-items:center; justify-content:space-between; }
.mt-block { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.mt-logo { width:52px; height:52px; object-fit:contain; }
.mt-name { font-family:'Oswald',sans-serif; font-size:15px; font-weight:700; letter-spacing:.5px; }
.mt-full { font-size:10px; color:var(--gray); letter-spacing:1px; text-transform:uppercase; }
.mcard-vs { font-family:'Anton',sans-serif; font-size:18px; color:var(--red); letter-spacing:2px; flex-shrink:0; padding:0 12px; }
.mcard-info { padding:12px 20px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.mi-left { display:flex; flex-direction:column; gap:4px; }
.mi-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--light); }
.mi-price { font-family:'Anton',sans-serif; font-size:20px; color:var(--green); }
.mi-price small { font-family:'Inter',sans-serif; font-size:11px; color:var(--gray); }
.btn-mcard { background:var(--red); color:#fff; border:none; padding:9px 18px; border-radius:2px; font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:.2s; display:flex; align-items:center; gap:6px; cursor:pointer; }
.btn-mcard:hover { background:var(--red2); }
.card-brands { display:flex; gap:8px; margin-bottom:16px; }
.brand-logo { padding:5px 10px; border-radius:3px; font-size:11px; font-weight:900; letter-spacing:1px; border:1px solid var(--border2); }
.visa{color:#1a1f71;background:#f0f4ff} .mc{color:#eb001b;background:#fff5f5} .troy{color:#004A97;background:#e8f0fe} .amex{color:#007bc1;background:#e8f4ff}
.card-input-wrap { position:relative; }
.card-input-wrap input { padding-right:36px; }
.card-lock { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--gray); pointer-events:none; }
.cvv-tip { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--border2); color:var(--gray); font-size:9px; font-weight:700; cursor:pointer; border:none; margin-left:4px; vertical-align:middle; }
.cvv-tip:hover { background:var(--red); color:#fff; }
.info-box { border-radius:2px; padding:12px 14px; font-size:12px; display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; }
.info-box.blue  { background:rgba(59,130,246,.07);  border:1px solid rgba(59,130,246,.2);  color:#93c5fd; }
.info-box.amber { background:rgba(245,158,11,.07);  border:1px solid rgba(245,158,11,.2);  color:var(--amber); }
.mob-menu { display:none; position:fixed; top:60px; left:0; right:0; background:#111; border-bottom:1px solid var(--border); z-index:800; padding:8px 0; }
.mob-menu.open { display:block; }
.mob-menu a { display:block; padding:12px 6%; color:var(--light); font-weight:600; font-size:14px; border-bottom:1px solid var(--border); }
.team-logo { width:60px; height:60px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.sum-match { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 0 6px; }
.sm-logo { width:32px; height:32px; object-fit:contain; }
@media(max-width:640px){ .match-grid{grid-template-columns:1fr} .card-brands{flex-wrap:wrap} .mt-logo{width:40px;height:40px} }