.arena-page { --cyan:#ff7429; --blue:#ff5b08; --border:#193d49; background:#000b0f; }
.arena-page [hidden] { display:none!important; }
.arena-page .site-header { background:#000b10; border-bottom-color:#15323b; }
.arena-page .brand-symbol { border-color:#ff681f; box-shadow:inset 0 0 0 2px #00101c,0 0 0 1px #ffb04a; }
.arena-page .brand-symbol::before { border-top-color:#ffcb68; border-bottom-color:#e4480c; }
.arena-page .brand-symbol i { border-top-color:#ef8e36; border-bottom-color:#c8430c; }
.arena-page .brand-words>span { color:#f5f8fc; }
.arena-page .desktop-nav a[aria-current=page] { color:#ff7429; padding-block:22px; border-bottom:3px solid #ff651c; }
.arena-page .primary-button,.arena-page .header-download { background:linear-gradient(#ff9b43,#ff5705); border-color:#ff8d37; box-shadow:inset 0 1px #ffd38a70,0 0 12px #ff550622; }
.arena-page .outline-button { background:#00151d; border-color:#28505d; }
.arena-page .eyebrow { color:#55dff9; font-size:17px; letter-spacing:3px; }
.arena-page h2 { font:800 36px/1.1 var(--heading); letter-spacing:-1px; }
.arena-page h3 { font-size:23px; }
.arena-hero { position:relative; isolation:isolate; min-height:625px; padding:46px 40px 30px; overflow:hidden; border-bottom:1px solid #173741; }
.arena-hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.arena-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#000b0f88,transparent 55%),linear-gradient(0deg,#000b0f,transparent 9%); z-index:-1; }
.arena-hero-copy { width:48%; max-width:670px; }
.arena-hero h1 { font:900 clamp(44px,4.8vw,72px)/1.01 var(--heading); letter-spacing:-2.6px; margin:12px 0 12px; }
.arena-hero em,.arena-giveaway em { font-style:normal; color:#ff8a37; background:linear-gradient(#ffbc73,#ff641c); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.arena-hero-copy>h2 { font:800 29px/1.3 var(--heading); margin-bottom:12px; letter-spacing:-.5px; }
.arena-hero-description { max-width:480px; font-size:21px; line-height:1.35; color:#d9e7f0; }
.arena-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:27px 0 23px; }
.arena-benefits>a { display:flex; align-items:start; gap:10px; text-decoration:none; }
.arena-benefits .icon { color:#ff7b28; width:35px; height:35px; flex-shrink:0; }
.arena-benefits strong { display:block; font-size:21px; font-weight:600; }
.arena-benefits small { display:block; color:#b3c9d6; font-size:15px; line-height:1.25; margin-top:6px; }
.arena-hero-actions { display:flex; gap:17px; flex-wrap:wrap; }
.arena-hero-actions>a,.arena-hero-actions>button { min-width:215px; min-height:55px; font-size:21px; }
.arena-hero-actions .icon { width:18px; }
.arena-preview-label { font-size:14px; color:#9cbbc9; margin-top:15px; }
.arena-hero-motto { position:absolute; top:45px; right:38px; transform:rotate(-10deg); font:italic 28px/1.15 'Apple Chancery','Segoe Print',cursive; text-align:center; text-shadow:0 2px 5px #000; }
.arena-hero-motto::after { content:''; display:block; height:3px; background:#ff761e; margin-top:10px; transform:rotate(-5deg); border-radius:50%; }
.arena-content { padding:14px 34px 0; }
.arena-description { color:#bbcedb; font-size:20px; margin-top:7px; }
.arena-milestones { padding-bottom:32px; }
.arena-milestones h2 { margin-top:4px; }
.arena-milestone-track { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); position:relative; gap:15px; margin-top:28px; }
.arena-milestone-track::before { content:''; position:absolute; top:57px; left:7%; right:7%; height:3px; background:linear-gradient(90deg,#ff8728 0%,#ffac43 42%,#65dafa 66%,#ffe19a); box-shadow:0 0 7px #ff6e08; }
.arena-milestone { position:relative; text-align:center; padding:0; border:0; background:transparent; color:#e8f4fc; font:inherit; }
.arena-milestone-art { position:relative; display:grid; place-items:center; height:115px; width:115px; border-radius:50%; margin:0 auto 18px; border:2px solid #455e6c; background:radial-gradient(circle,#0f2b3c,#000a0e 75%); box-shadow:0 0 10px #ff8a2215; overflow:hidden; }
.arena-milestone-art img { width:100%; height:100%; object-fit:cover; object-position:var(--milestone-position,center); }
.arena-milestone-art .icon { width:66px; height:66px; color:#ffbe48; filter:drop-shadow(0 0 8px #ff6c1577); }
.arena-milestone:nth-last-child(2) .arena-milestone-art { border-color:#b47870; box-shadow:0 0 16px #ff6a2355; }
.arena-milestone:last-child .arena-milestone-art { border-color:#e7bc67; box-shadow:0 0 16px #e4b64d55; }
.arena-milestone[data-current=true] .arena-milestone-art { border:3px solid #ff9b39; box-shadow:0 0 15px #ff6b1a,0 0 0 4px #ff6d0a33; }
.arena-milestone[data-current=true] .arena-milestone-art::after { content:''; position:absolute; bottom:-1px; left:45%; width:10px; height:10px; background:#ffe78b; border:2px solid #ff6e16; border-radius:50%; }
.arena-milestone>strong { display:block; font:600 29px/1.1 var(--body); color:#ffd17d; }
.arena-milestone>span:not(.arena-milestone-art) { display:block; font-size:20px; margin-top:3px; }
.arena-milestone ul { list-style:none; text-align:left; margin:15px auto 0; padding:0; width:max-content; max-width:100%; }
.arena-milestone li { display:flex; align-items:start; gap:7px; font-size:17px; line-height:1.25; margin-bottom:7px; }
.arena-milestone li .icon { width:17px; height:17px; color:#ff8f29; flex-shrink:0; margin-top:2px; }
.arena-milestone:hover .arena-milestone-art { border-color:#ff9644; filter:brightness(1.16); }
.arena-giveaway { position:relative; isolation:isolate; min-height:365px; padding:19px 22px; overflow:hidden; border-radius:13px; border-color:#28505c; }
.arena-giveaway-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.arena-giveaway::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#000d12d9 0%,#000d12aa 30%,transparent 60%),linear-gradient(0deg,#000b0fa6,transparent 20%); z-index:-1; }
.arena-giveaway-copy { width:48%; position:relative; }
.arena-page .arena-giveaway h2 { font:900 clamp(35px,4.3vw,62px)/1.04 var(--heading); letter-spacing:-2.5px; margin-top:5px; }
.arena-giveaway-copy>p:not(.eyebrow) { font-size:20px; line-height:1.25; max-width:490px; margin-top:12px; }
.arena-countdown { display:flex; gap:10px; margin-top:20px; }
.arena-countdown>div { display:grid; justify-items:center; align-content:center; min-width:83px; height:82px; background:linear-gradient(#001c26ee,#000b11f5); border:1px solid #27505e; border-radius:8px; }
.arena-countdown>div:first-child { border-color:#6c5137; background:linear-gradient(#342518b3,#11100be6); }
.arena-countdown strong { font:700 37px/1 var(--body); }
.arena-countdown small { font-size:13px; margin-top:5px; color:#b3cad7; }
.arena-giveaway-copy>.arena-dates-note { font-size:14px!important; color:#acc1cc; margin-top:8px!important; }
.arena-giveaway-progress { position:absolute; bottom:15px; right:22px; width:42%; }
.arena-giveaway-progress p { display:flex; justify-content:space-between; font-size:18px; margin-bottom:7px; }
.arena-giveaway-progress b { color:#ffcf6b; }
.arena-giveaway-progress progress { appearance:none; -webkit-appearance:none; width:100%; height:24px; background:#001016; border:1px solid #536978; border-radius:10px; overflow:hidden; }
.arena-giveaway-progress progress::-webkit-progress-bar { background:#001016; }
.arena-giveaway-progress progress::-webkit-progress-value { background:linear-gradient(#ffb153,#ff6517); border-radius:8px; box-shadow:inset 0 1px #ffd188; }
.arena-giveaway-progress progress::-moz-progress-bar { background:linear-gradient(#ffb153,#ff6517); border-radius:8px; }
.arena-giveaway-progress>small { display:block; font-size:13px; color:#afc2cd; text-align:right; margin-top:3px; }
.arena-next-stop { position:absolute; right:30px; top:25px; color:#ffb13b; font-size:21px; font-weight:600; line-height:1.2; }
.arena-giveaway-details { margin-top:8px; color:#ffba74; font:500 16px var(--body); border-bottom:1px solid #7b4d2c; }
.arena-competitions { margin-top:24px; }
.arena-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.arena-section-heading>.outline-button { flex-shrink:0; font-size:18px; gap:10px; }
.arena-section-heading>.outline-button .icon { width:16px; }
.arena-competition-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.arena-competition { position:relative; isolation:isolate; overflow:hidden; min-height:208px; border-radius:10px; }
.arena-competition>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.arena-competition::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#00131c 0%,#00131ce8 35%,#00131c25 100%); z-index:-1; }
.arena-competition-copy { padding:14px 15px; }
.arena-competition h3 { display:flex; align-items:center; gap:10px; font:600 24px/1.2 var(--body); }
.arena-competition h3>.icon { width:32px; height:32px; color:#ffd23d; flex-shrink:0; }
.arena-competition-copy>p { padding-left:42px; color:#dcf0fb; font-size:16px; margin-top:3px; }
.arena-tag { display:inline-block; padding:3px 7px; margin-top:15px; border-radius:5px; background:#ac4d04; box-shadow:inset 0 1px #ffb36877; font-size:14px; line-height:1.1; }
.arena-tag[data-kind=season] { background:#147bc5; }.arena-tag[data-kind=fan-cup] { background:#5970c2; }
.arena-competition-meta { display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:16px; margin:13px 0 10px; color:#c3d9e5; }
.arena-competition-meta>span { display:flex; align-items:center; gap:6px; }
.arena-competition-meta .icon { width:18px; color:#ff9b27; }
.arena-competition .primary-button { min-height:39px; width:100%; padding-block:7px; font-size:18px; }
.arena-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; }
.arena-leaderboard,.arena-rewards { padding:17px 20px 12px; border-radius:10px; background:linear-gradient(125deg,#00121a,#00192388); }
.arena-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.arena-panel-heading h2 { font:600 19px var(--body); color:#69dff8; letter-spacing:2px; }
.arena-panel-heading button { font-size:15px; color:#c3dbe9; gap:7px; }.arena-panel-heading .icon { width:14px; }
.arena-leaderboard-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.arena-leaderboard-tabs button { font:400 17px var(--body); padding:7px 15px; line-height:1.1; background:#0a2532; border:1px solid #163d4c; border-radius:7px; color:#bad3e3; }
.arena-leaderboard-tabs [aria-pressed=true] { background:linear-gradient(#ff9f42,#ff5a00); color:white; border-color:#ffba67; box-shadow:0 0 8px #ff80194d; }
.arena-fan-rows { list-style:none; padding:0; margin:0; }
.arena-fan-rows li { display:flex; align-items:center; gap:12px; padding:8px; border-bottom:1px solid #14333f; min-height:53px; background:linear-gradient(90deg,#001a23bb,transparent); }
.arena-fan-rows li:last-child { border-bottom:0; }
.arena-fan-rows li>strong { font-size:21px; font-weight:500; }
.arena-rank { display:grid; place-items:center; width:23px; font-size:17px; color:#b0c6d8; flex-shrink:0; }
.arena-rank[data-place="1"] .icon { color:#ffd164; width:26px; }
.arena-rank[data-place="2"],.arena-rank[data-place="3"] { border-radius:50%; height:23px; background:linear-gradient(#cbd4da,#51697c); border:1px solid #c5dae7; color:#f8fcff; }
.arena-rank[data-place="3"] { background:linear-gradient(#cb713d,#7b3321); border-color:#d49059; }
.arena-points { margin-left:auto; color:#c7dce8; font-size:20px; white-space:nowrap; }.arena-points small { font:inherit; }
.arena-avatar { width:43px; height:43px; border-radius:8px; border:1px solid #466372; background-image:url('/assets/photos/arena-hero.webp'); background-size:500% auto; flex-shrink:0; }
.avatar-bear { background-position:69% 18%; }.avatar-fox { background-position:45% 58%; }.avatar-alien { background-position:56% 49%; }.avatar-robot { background-position:82% 36%; }.avatar-girl { background-position:97% 55%; }
.arena-sample-note { font-size:13px; color:#9ab9c9; margin-top:10px; }
.arena-prize-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px 13px; }
.arena-prize { text-align:center; padding:0; min-width:0; }
.arena-prize>span { position:relative; display:block; aspect-ratio:1.15; border:1px solid #315263; border-radius:9px; background:#08202c; overflow:hidden; }
.arena-prize img { display:block; width:100%; height:100%; object-fit:cover; }
.arena-prize strong { display:block; font:500 18px/1.2 var(--body); margin-top:7px; }
.arena-prize:hover>span { border-color:#ff984c; box-shadow:0 0 10px #ff6d1722; }
.arena-wishlist-mark { position:absolute; right:5px; top:5px; padding:3px; color:#ffd195; background:#00121be8; border-radius:50%; display:grid; place-items:center; }.arena-wishlist-mark .icon { width:20px; height:20px; }
.arena-wishlist-mark[hidden] { display:none!important; }
.arena-community { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:37px 0 40px; margin-top:24px; border-top:1px solid #19343e; }
.arena-community>div:first-child { flex-shrink:0; }.arena-community h2 { font-size:32px; white-space:nowrap; }
.arena-community-stats { display:flex; gap:23px; align-items:center; justify-content:space-between; flex:1; }
.arena-community-stats>div { display:flex; align-items:center; gap:12px; }
.arena-community-stats .icon { width:43px; height:43px; color:#ff882a; flex-shrink:0; }
.arena-community-stats strong { display:block; font-size:23px; line-height:1.1; font-weight:600; }
.arena-community-stats small { display:block; font-size:14px; line-height:1.1; margin-top:4px; color:#b7cedd; }
.arena-page .footer-main,.arena-page .footer-bottom { background:transparent; }.arena-page .footer-main { border-top:1px solid #193640; }
.arena-dialog-photo { width:100%; height:170px; object-fit:cover; border-radius:8px; margin-bottom:15px; }
.arena-dialog-product { display:block; width:min(100%,330px); margin:0 auto 18px; border-radius:10px; }
.arena-dialog-milestone { display:flex; align-items:baseline; gap:10px; }.arena-dialog-milestone strong { color:#ffad4b; font:800 46px var(--heading); }
.arena-dialog-perks { color:#c6dfec; line-height:1.8; margin-top:10px; }
#arena-join-form { display:grid; gap:14px; margin-top:15px; }#arena-join-form label { font-size:20px; }#arena-sport-picker { width:100%; padding:12px; border:1px solid #2c5a6d; border-radius:6px; font:inherit; }
.arena-dialog-prizes { grid-template-columns:repeat(3,minmax(0,1fr)); }.arena-dialog-prizes .arena-prize strong { font-size:15px; }.arena-dialog-ranking { margin-top:15px; }
@media(max-width:1200px) { .arena-hero { padding-inline:30px; min-height:570px; }.arena-hero-copy { width:51%; }.arena-hero h1 { font-size:59px; }.arena-hero-description { max-width:410px; font-size:19px; }.arena-hero-copy>h2 { font-size:25px; }.arena-benefits { gap:8px; }.arena-benefits>a { gap:6px; }.arena-benefits .icon { width:27px; }.arena-benefits strong { font-size:18px; }.arena-benefits small { font-size:13px; }.arena-hero-actions>a,.arena-hero-actions>button { min-width:180px; }.arena-hero-motto { font-size:24px; right:25px; }.arena-content { padding-inline:25px; }.arena-milestone-track { gap:10px; }.arena-milestone-art { width:96px; height:96px; }.arena-milestone-track::before { top:48px; }.arena-milestone li { font-size:15px; gap:5px; }.arena-milestone>span:not(.arena-milestone-art) { font-size:18px; }.arena-competition-grid { gap:12px; }.arena-competition-copy { padding:12px; }.arena-competition h3 { font-size:22px; gap:6px; }.arena-competition-copy>p { padding-left:35px; }.arena-competition-meta { font-size:14px; }.arena-community { flex-direction:column; align-items:start; }.arena-community-stats { width:100%; }.arena-leaderboard,.arena-rewards { padding:15px; }.arena-leaderboard-tabs button { padding:7px 10px; }.arena-prize strong { font-size:16px; } }
@media(max-width:900px) { .arena-hero { min-height:530px; padding-top:30px; }.arena-hero-copy { width:58%; }.arena-hero h1 { font-size:49px; }.arena-hero-description { font-size:18px; }.arena-benefits { grid-template-columns:repeat(2,1fr); width:340px; margin:20px 0; }.arena-benefits small { margin-top:2px; }.arena-hero-actions>a,.arena-hero-actions>button { min-width:160px; min-height:46px; font-size:18px; }.arena-hero-motto { top:26px; right:18px; font-size:20px; }.arena-milestone-track { overflow-x:auto; grid-template-columns:repeat(7,150px); padding:8px 3px; margin-top:15px; }.arena-milestone-track::before { left:75px; right:auto; width:900px; top:56px; }.arena-page h2 { font-size:29px; }.arena-giveaway { min-height:340px; }.arena-page .arena-giveaway h2 { font-size:42px; }.arena-giveaway-copy>p:not(.eyebrow) { font-size:17px; }.arena-giveaway-progress { width:45%; right:15px; }.arena-next-stop { font-size:18px; right:15px; }.arena-countdown>div { min-width:59px; height:66px; }.arena-countdown strong { font-size:28px; }.arena-competition-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.arena-bottom-grid { grid-template-columns:1fr; }.arena-prize-grid { gap:18px; }.arena-prize strong { font-size:20px; }.arena-community-stats { flex-wrap:wrap; justify-content:start; gap:25px; }.arena-community-stats>div { flex-basis:28%; } }
@media(max-width:560px) { .arena-hero { min-height:850px; padding:26px 18px 300px; }.arena-hero-copy { width:100%; max-width:none; }.arena-hero-art { top:auto; bottom:0; height:370px; object-position:79% center; }.arena-hero::after { background:linear-gradient(180deg,#000b0f 0%,#000b0f 55%,transparent 75%,#000b0f 100%); }.arena-hero h1 { font-size:48px; letter-spacing:-2px; }.arena-hero-copy>h2 { font-size:24px; }.arena-hero-description { font-size:18px; max-width:95%; }.arena-benefits { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.arena-benefits>a { flex-direction:column; }.arena-benefits small { font-size:12px; }.arena-benefits strong { font-size:17px; }.arena-hero-actions { gap:10px; }.arena-hero-actions>a,.arena-hero-actions>button { min-width:0; flex:1; padding-inline:10px; font-size:17px; }.arena-hero-motto { top:auto; bottom:220px; right:15px; font-size:17px; }.arena-preview-label { font-size:12px; }.arena-content { padding-inline:16px; }.arena-page .eyebrow { font-size:14px; letter-spacing:2px; }.arena-page h2 { font-size:27px; }.arena-description { font-size:18px; }.arena-giveaway { padding:18px; min-height:560px; }.arena-giveaway-art { top:auto; height:275px; bottom:20px; object-position:80% center; }.arena-giveaway::after { background:linear-gradient(180deg,#000b0f 0%,#000b0f 46%,transparent 73%,#000b0f 95%); }.arena-giveaway-copy { width:100%; }.arena-page .arena-giveaway h2 { font-size:40px; letter-spacing:-1.5px; }.arena-giveaway-copy>p:not(.eyebrow) { max-width:320px; }.arena-countdown { margin-top:15px; }.arena-countdown>div { min-width:61px; height:61px; }.arena-giveaway-progress { width:auto; left:18px; right:18px; bottom:16px; }.arena-next-stop { display:none; }.arena-section-heading { align-items:start; flex-direction:column; gap:12px; }.arena-section-heading>.outline-button { align-self:end; }.arena-competition-grid { gap:10px; }.arena-competition h3 { font-size:20px; gap:5px; }.arena-competition h3 .icon { width:24px; }.arena-competition-copy { padding:11px 9px; }.arena-competition-copy>p { padding-left:0; min-height:20px; font-size:14px; }.arena-competition-meta>span:last-child { display:none; }.arena-competition-meta { font-size:13px; }.arena-competition .primary-button { font-size:16px; }.arena-panel-heading h2 { font-size:16px; letter-spacing:1.5px; }.arena-panel-heading button { font-size:13px; }.arena-bottom-grid { gap:15px; }.arena-fan-rows li { padding-inline:0; gap:9px; }.arena-fan-rows li>strong { font-size:19px; }.arena-points { font-size:18px; }.arena-prize-grid { gap:15px 9px; }.arena-prize strong { font-size:15px; }.arena-community { padding-block:25px; }.arena-community h2 { font-size:26px; white-space:normal; }.arena-community-stats { gap:22px; }.arena-community-stats>div { flex-basis:42%; gap:10px; }.arena-community-stats .icon { width:33px; }.arena-community-stats strong { font-size:22px; }.arena-community-stats small { font-size:13px; }.arena-dialog-prizes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
