/* V2: cinematic arena layer on the preserved V1 layout. */
body {
  background: radial-gradient(ellipse at 85% 52%, #102d4940, transparent 42%), #050a12;
}
.hero {
  padding-top: 30px;
  background: linear-gradient(180deg, #03091642, #030a1455 40%, #030a14b0 76%, #050a12 100%),
    url('./assets/arena-night.webp') center 48% / cover;
  border-bottom: 1px solid #31537366;
}
.hero:before {
  top: 10%; left: 5%; width: 45%; height: 75%; opacity: .3;
  background: radial-gradient(ellipse, #ac2148, transparent 68%);
}
.hero:after { width: 45%; height: 75%; top: 10%; opacity: .25; }
.hero-copy { padding-bottom: 26px; }
.hero-wordmark { margin-top: 22px; font-size: clamp(76px, 7.5vw, 112px); }
.hero-copy h1 { text-shadow: 0 3px #758399, 0 12px 30px #000; }
.hero-lights:before, .hero-lights:after {
  width: 40%; height: 2px; top: 85px; opacity: .45;
  box-shadow: 0 0 15px 3px #9bdcffa6, 0 25px 90px 18px #7bcfff3d;
}
.hero-subtitle { color: #e1e9f4; }
.launch-badge {
  min-height: 51px; display: inline-flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 23px; margin-top: 27px;
  border: 1px solid #bc3f5b; border-radius: 4px;
  background: linear-gradient(110deg, #170e1de8, #270e1de0 50%, #0b1728e8);
  box-shadow: 0 0 0 5px #0b142755, 0 10px 32px #0009, inset 0 1px #ff819329;
  text-transform: uppercase; font-size: 10px; letter-spacing: 1.2px;
}
.launch-badge .status-dot { margin: 0; }
.launch-badge>span:nth-child(2) { color: #bdcadc; }
.launch-badge strong { font-size: 14px; font-style: italic; letter-spacing: .2px; }
.launch-badge b { color: #ffa7b2; font-size: 12px; }
.launch-badge>span:last-child { color: #ff455f; font-size: 18px; }
.mode-heading {
  max-width: 1370px; margin: 0 auto; padding: 10px 35px 14px;
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase; letter-spacing: 2px; font-size: 9px; color: #c7d8ed;
}
.mode-heading>span:first-child:before { content:'+'; color:#ff405e; margin-right:10px; }
.mode-heading>span:last-child { color: #99afcb; font-size: 8px; }
.mode-heading i { display:inline-block; width:24px; height:1px; background:#809fc0; margin:0 10px; vertical-align:middle; }
.sports { gap: 14px; padding-inline: 35px; perspective: 1600px; }
.sport {
  height: 375px; border: 1px solid color-mix(in srgb, var(--sport-color) 55%, #182334);
  border-bottom: 3px solid var(--sport-color); border-radius: 6px 6px 1px 1px;
  box-shadow: 0 20px 40px #000a, 0 0 24px color-mix(in srgb, var(--sport-color) 13%, transparent);
  transition: transform .3s, box-shadow .3s;
}
.sport:after { background: linear-gradient(180deg, #03091500 25%, #03091566 45%, #030915ee 83%, #030915 100%); }
.sport:before {
  height: 160px; z-index: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--sport-color) 22%, transparent), transparent);
}
.sport:hover, .sport:focus-visible {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 0 25px 45px #000b, 0 0 40px color-mix(in srgb, var(--sport-color) 30%, transparent);
}
.sport-caption { bottom: 22px; left: 22px; right: 15px; }
.sport-number { font-size: 8px; margin-bottom: 11px; letter-spacing: 1.5px; }
.sport h2 { font-size: clamp(26px, 2.5vw, 36px); min-height: 74px; text-shadow: 0 3px 12px #000; }
.sport-mood { font-size: 11px; color: #e0e8f3; margin-top: 11px; line-height: 1.6; }
.sport-status {
  display: inline-block; margin-top: 13px; font-size: 9px; color: #b1c6dd;
  border-top: 1px solid color-mix(in srgb, var(--sport-color) 45%, transparent); padding-top: 9px;
}
.sport-arrow { right: 0; bottom: 74px; font-size: 22px; display:block; }
.hero-bottom { color:#b5c7de; padding-block: 14px 20px; }
.experience { padding-top: 45px; padding-bottom: 40px; }
.features { background: linear-gradient(100deg, #10223955, #080d1800); border-color:#304964; padding:27px 22px; }
.features article:first-child { padding-left:0; }
.feature-icon { text-shadow:0 0 22px #3fc6ff99; }
.launch { padding-bottom: 50px; }
.launch-main {
  padding: 38px 40px; border-color:#627393; border-bottom:2px solid #ff3453;
  background: linear-gradient(105deg,#070c19ed,#0b1523d9), url('./assets/arena-night.webp') center 80% / cover;
  box-shadow:0 18px 70px #0006, 0 0 28px #e81f3410;
}
.launch-main h2 { font-size:55px; }
.launch-main h2>.wordmark { font-size:62px; }
.launch-date { font-size:46px; text-shadow:0 0 28px #f6394c3b; }
.invite-card { border-left-color:#5ccffc; background:linear-gradient(140deg,#17263a,#080f1b); }
.invite-card .button { font-size:12px; gap:12px; }
#sport-tervek { scroll-margin-top:110px; line-height:1.9; text-align:left; }
.preview {
  border-top:1px solid #26425c; border-bottom:1px solid #26425c;
  padding-block:65px 75px; gap:60px; grid-template-columns:1fr 1.4fr;
  background:radial-gradient(ellipse at 75% 50%,#165c8d28,transparent 65%);
}
.preview-copy h2 { font-size:47px; }
.preview-copy>.preview-disclaimer { font-size:11px!important; }
.preview-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-top:25px; }
.preview-tabs button {
  min-height:44px; padding:10px 15px; font-size:11px; border:1px solid #40556f;
  background:#0c1727; color:#aebfd4; border-radius:3px;
}
.preview-tabs button[aria-selected=true] { background:linear-gradient(110deg,#a81130,#e62243); color:white; border-color:#ff4963; box-shadow:0 0 20px #ed25472b; }
.desktop-device { border-color:#34465b; box-shadow:0 0 0 1px #6a89a4,0 0 60px #2585bf40,0 40px 50px #000a; }
.device-body { min-height:300px; }
.device-content { padding:24px 21px; }
.device-content h3 { font-size:22px; max-width:none; }
.device-content .eyebrow { font-size:7px; }
.demo-tiles { margin-top:22px; }
.demo-tiles>span { font-size:7px; padding:13px; }
.demo-tiles b { font-size:11px; }
.demo-match { font-size:11px; margin-top:22px; }
.demo-match small { font-size:8px; }
.teaser-match { display:flex; justify-content:space-around; align-items:center; gap:12px; margin:18px 0; padding:13px; border:1px solid #3e566e; background:linear-gradient(100deg,#6f17322b,#13283e33,#12536d33); }
.teaser-match>span { font-size:30px; color:#f15a73; text-align:center; }
.teaser-match>span:last-child { color:#62d6ee; }
.teaser-match small { display:block; font-size:7px; letter-spacing:2px; color:#b9c8da; }
.teaser-match>b { color:#6e839f; font-size:10px; font-style:italic; }
.teaser-jackpot { padding:10px 13px; border:1px solid #83714e; background:linear-gradient(130deg,#2b251c,#151a20); text-align:center; }
.teaser-jackpot>span { font-size:6px; color:#e0ceab; letter-spacing:2px; display:block; }
.teaser-jackpot>div { display:flex; justify-content:center; gap:22px; align-items:center; margin:5px 0; }
.teaser-jackpot b { font-size:30px; font-family:var(--display); color:#ffe2a2; border:1px solid #a18d5e; padding:0 12px; background:#0c1118; }
.teaser-jackpot i { font-size:17px; color:#9c9587; font-style:normal; }
.teaser-jackpot>small { font-size:7px; color:#c6bcaa; }
.mobile-teaser { display:flex; align-items:center; gap:21px; margin-top:17px; }
.mini-phone { width:94px; padding:12px 7px; border:3px solid #597084; background:#091320; border-radius:13px; flex-shrink:0; }
.mini-phone .wordmark { font-size:17px; letter-spacing:-1px; }
.mini-phone-art { height:70px; background:url('./assets/sports-atlas.webp') left 12%/400% auto; margin:8px 0; border-bottom:2px solid #ff3554; }
.mini-phone>span:not(.wordmark) { font-size:4px; letter-spacing:.5px; display:block; color:#afc3db; }
.mini-phone>div:last-child { font-size:8px; color:#7ec9ee; margin-top:12px; }
.mobile-teaser>div:last-child { font-size:12px; }
.mobile-teaser p { font-size:10px; line-height:1.9; color:#aebfd3; margin-top:9px; }
.mobile-teaser small { display:block; font-size:7px; color:#8fa5c3; margin-top:12px; }
.closing {
  position:relative; padding-block:65px 70px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 50% 60%,#5d132733,transparent 65%);
}
.closing:before { content:''; z-index:-1; position:absolute; left:12%; right:12%; top:45%; height:1px; background:linear-gradient(90deg,transparent,#de325c66,transparent); box-shadow:0 0 30px 7px #ff204b13; }
.closing h2 { font-size:52px; margin-top:13px; }
.invitation-emblem { font-size:48px; color:#ff4d68; text-shadow:0 0 30px #ff264b; margin-bottom:13px; line-height:1; }
.closing .button { font-size:16px; padding:16px 38px; min-height:56px; margin-top:24px; }
.closing>.invitation-status { font-size:11px!important; margin-top:20px!important; color:#d8bdc9!important; }
.closing>small { font-size:10px; color:#94a5bd; display:block; margin-top:8px; }
@media(max-width:1100px) {
  .site-header { gap:18px; } nav { gap:16px; } nav a { font-size:12px; }
  .sports { gap:10px; } .sport-caption { left:16px; } .sport h2 { font-size:28px; }
  .sport-mood { font-size:10px; } .sport-arrow { display:none; }
  .launch-main h2 { font-size:42px; } .launch-main h2>.wordmark { font-size:48px; } .launch-date { font-size:36px; }
  .preview { gap:32px; } .device-content { padding:21px 15px; } .device-content h3 { font-size:18px; }
}
@media(max-width:860px) {
  .hero { background-position:center top; }
  .mode-heading { padding-inline:24px; }
  .sports { padding-inline:24px; gap:8px; }
  .sport { height:310px; } .sport h2 { font-size:22px; min-height:56px; }
  .sport-caption { left:12px; right:10px; bottom:18px; } .sport-number { font-size:6px; letter-spacing:1px; }
  .sport-mood { font-size:9px; min-height:30px; } .sport-status { font-size:8px; }
  .launch-main { padding:30px 26px; } .launch-main h2 { font-size:32px; } .launch-main h2>.wordmark { font-size:36px; } .launch-date { font-size:30px; }
  .preview { gap:24px; } .preview-copy h2 { font-size:34px; }
  .preview-tabs { gap:5px; } .preview-tabs button { padding-inline:11px; font-size:10px; }
  .device-content { padding:18px 12px; } .device-content h3 { font-size:16px; }
  .demo-tiles>span { padding:10px 7px; font-size:5px; } .demo-tiles b { font-size:9px; }
  .demo-match { font-size:8px; } .demo-match small { font-size:6px; }
  .mobile-teaser { gap:12px; } .mobile-teaser>div:last-child { font-size:9px; } .mobile-teaser p { font-size:8px; }
  .mini-phone { width:78px; } .mini-phone-art { height:57px; }
}
@media(max-width:600px) {
  .site-header nav { gap:4px; padding-inline:8px; } .site-header nav a { font-size:11px; padding:8px; }
  .hero { padding-top:27px; background-size:100% 100%,auto 480px; background-position:center top; background-repeat:no-repeat; background-color:#050b16; }
  .hero-copy { padding-bottom:18px; } .hero-wordmark { font-size:76px; margin-top:21px; }
  .hero-copy h1 { font-size:clamp(27px,7.3vw,43px); } .hero-subtitle { font-size:9px; }
  .launch-badge { gap:7px 10px; margin-top:23px; padding:12px 14px; max-width:100%; flex-wrap:wrap; font-size:8px; letter-spacing:.6px; }
  .launch-badge strong { font-size:11px; } .launch-badge b { font-size:10px; } .launch-badge .status-dot { width:5px; height:5px; }
  .launch-badge>span:last-child { display:none; }
  .mode-heading { padding:12px 17px 14px; font-size:8px; letter-spacing:1px; }
  .mode-heading>span:last-child { font-size:7px; letter-spacing:.6px; } .mode-heading i { display:none; }
  .sports { padding-inline:14px; gap:11px; }
  .sport { height:282px; } .sport-caption { left:12px; bottom:16px; right:10px; }
  .sport h2 { font-size:25px; min-height:53px; }
  .sport-number { font-size:7px; letter-spacing:.8px; margin-bottom:8px; }
  .sport-mood { font-size:10px; line-height:1.5; margin-top:9px; min-height:30px; }
  .sport-status { font-size:9px; margin-top:8px; padding-top:7px; line-height:1.5; }
  .sport:hover,.sport:focus-visible { transform:translateY(-3px); }
  .hero-bottom { padding-block:14px 17px; }
  .experience { padding-block:35px 30px; } .features { padding:22px 0; background:none; }
  .launch { padding-bottom:35px; } .launch-main { padding:30px 25px; }
  .launch-main h2 { font-size:38px; } .launch-main h2>.wordmark { font-size:43px; }
  .launch-date { font-size:34px; } .invite-card { padding:27px 25px; }
  .invite-card h2 { font-size:27px; } .invite-card .button { font-size:11px; }
  .preview { padding-block:36px 50px; grid-template-columns:1fr; gap:25px; }
  .preview-copy h2 { font-size:38px; } .preview-tabs button { font-size:12px; padding:11px 17px; }
  .preview-copy>.preview-disclaimer { font-size:12px!important; }
  .device-body { min-height:270px; } .device-content { padding:18px 12px; }
  .device-content h3 { font-size:16px; } .device-content .eyebrow { font-size:5px; letter-spacing:.8px; }
  .demo-tiles b { font-size:8px; } .demo-match { font-size:8px; } .demo-match small { font-size:6px; }
  .teaser-match { margin:14px 0; padding:9px; } .teaser-match>span { font-size:27px; }
  .teaser-jackpot b { font-size:25px; } .teaser-jackpot>span { font-size:5px; letter-spacing:1px; }
  .teaser-jackpot>small { font-size:6px; } .mobile-teaser>div:last-child { font-size:10px; } .mobile-teaser p { font-size:9px; }
  .mini-phone { width:85px; } .mini-phone-art { height:65px; }
  .closing { padding-block:45px 50px; } .closing h2 { font-size:38px; }
  .closing .button { width:100%; max-width:300px; }
  .closing>small { font-size:11px; line-height:1.8; }
}
@media(max-width:350px) {
  .hero-wordmark { font-size:64px; }
  .launch-badge { padding-inline:10px; gap:7px; } .launch-badge>span:nth-child(2) { width:100%; }
  .launch-badge .status-dot { display:none; } .sport h2 { font-size:21px; }
  .sport-number { font-size:6px; } .sport-mood { font-size:9px; } .sport-status { font-size:8px; }
  .launch-main h2 { font-size:31px; } .launch-main h2>.wordmark { font-size:35px; } .launch-date { font-size:29px; }
  .preview-tabs button { font-size:11px; padding-inline:13px; } .device-content h3 { font-size:14px; }
  .mobile-teaser { gap:10px; } .mini-phone { width:72px; } .mini-phone .wordmark { font-size:14px; }
}
