:root{--bg:#120d0b;--panel:#1c1512;--line:#3a2a22;--text:#f3ece4;--muted:#b9a99b;--rust:#c8642b;--gold:#ffd24a;--blood:#d4261c;--blood-dark:#8f1d14}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--gold)}
h1,h2,h3,.btn,.tag{font-family:Impact,"Anton","Haettenschweiler","Arial Narrow Bold",sans-serif;font-weight:400;letter-spacing:.03em;text-transform:uppercase}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
header.hero{position:relative;min-height:88vh;display:flex;align-items:center;text-align:center;background:#000 url(img/hero.jpg) center/cover no-repeat}
header.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,5,.42),rgba(10,6,5,.6) 55%,var(--bg))}
.hero .wrap{position:relative;padding-top:48px;padding-bottom:48px;width:100%}
.live-pill{display:inline-block;background:var(--blood);color:#fff;padding:4px 14px;border-radius:999px;font:700 13px/1.6 system-ui,sans-serif;letter-spacing:.12em}
.live-pill:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;margin-right:8px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-pill:before{animation:none}html{scroll-behavior:auto}}
h1{font-size:clamp(46px,11vw,120px);line-height:.95;margin:18px 0 10px;text-shadow:0 4px 0 #000,0 0 30px rgba(0,0,0,.8)}
.sub{font-family:Impact,"Anton",sans-serif;text-transform:uppercase;font-size:clamp(22px,4.6vw,44px);color:var(--gold);margin:0 0 6px;text-shadow:0 3px 0 #000}
.sub2{color:var(--text);margin:0 auto 26px;max-width:640px;text-shadow:0 2px 6px #000}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-block;text-decoration:none;color:#fff;background:var(--panel);border:2px solid var(--line);padding:12px 20px;border-radius:8px;font-size:20px;min-width:128px;transition:transform .12s,border-color .12s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);border-color:var(--gold)}
.btn.main{background:var(--blood);border-color:var(--blood);font-size:24px;padding:14px 28px}
.btn.main:hover{border-color:#fff}
.age{margin-top:22px;font-size:14px;color:var(--muted)}
.age b{color:var(--blood);border:2px solid var(--blood);border-radius:6px;padding:1px 7px;margin-right:6px;font-family:Impact,sans-serif;font-weight:400}
section{padding:54px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(30px,6vw,52px);margin:0 0 6px;line-height:1}
h2 span{color:var(--blood)}
.lead{color:var(--muted);margin:0 0 24px;max-width:720px}
.player{position:relative;aspect-ratio:16/9;background:#000;border:2px solid var(--line);border-radius:10px;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.note{font-size:14px;color:var(--muted);margin-top:10px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.card h3{margin:0 0 6px;font-size:24px;color:var(--gold)}
.card p{margin:0;color:var(--muted)}
.clips{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.clip{position:relative;display:block;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#000;text-decoration:none;color:#fff}
.clip img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.clip.wide{grid-column:1/-1}
.clip.wide img{aspect-ratio:16/9}
.clip span{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.9));font:600 14px/1.25 system-ui,sans-serif}
.clip:after{content:"▶";position:absolute;top:10px;right:10px;background:var(--blood);border-radius:6px;padding:2px 9px;font-size:13px}
.clip:hover{border-color:var(--gold)}
.shots{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:22px}
.shots img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line)}
.sched{display:flex;flex-wrap:wrap;gap:14px}
.sched .card{flex:1 1 260px}
.big{font-family:Impact,sans-serif;font-size:40px;color:#fff;line-height:1.05}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.merch{background:linear-gradient(90deg,var(--blood-dark),#3a1410);text-align:center}
.merch h2{color:var(--gold)}
footer{padding:30px 0 50px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer a{color:var(--muted)}
.doc{max-width:760px;padding:40px 16px}
.doc h1{font-size:44px}
.doc h2{font-size:26px;margin-top:28px}
@media (max-width:520px){.btn{flex:1 1 44%;min-width:0;font-size:18px;padding:12px 8px}.btn.main{flex:1 1 100%}section{padding:40px 0}}

/* platform logos (11/10): inline SVG, no external requests; brand colours, sized in em so they track the label */
.ico{width:1.15em;height:1.15em;flex:none;fill:currentColor;display:block}
.btn,.socials a{display:inline-flex;align-items:center;justify-content:center;gap:.55em;line-height:1}
.btn .ico{width:1.2em;height:1.2em}
.btn.main .ico{width:1.35em;height:1.35em;fill:#fff}
.ico-youtube{fill:#ff0033}.ico-twitch{fill:#a970ff}.ico-kick{fill:#53fc18}.ico-rumble{fill:#85c742}.ico-x{fill:#fff}
.ico-discord{fill:#7289ff}.ico-tiktok{fill:#fff}.ico-instagram{fill:#ff4f7b}.ico-threads{fill:#fff}.ico-bluesky{fill:#3b9dff}.ico-reddit{fill:#ff4500}
.btn:not(.main){padding-left:18px;padding-right:22px}
.btn:not(.main):hover{border-color:currentColor}
.socials a{padding:10px 18px 10px 14px;font-size:16px}
.socials a .ico{width:1.25em;height:1.25em}

/* goals (11/10) */
.tag-line{font-family:Impact,"Anton","Haettenschweiler","Arial Narrow Bold",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--gold);margin-bottom:6px}

/* big screens (11/10): sharper hero picture (upscaled frame, WebP) and type that fills a 1440p / 4K window */
@media (min-width:1300px),(min-resolution:1.5dppx) and (min-width:800px){header.hero{background-image:url(img/hero-2560.webp)}}
@media (min-width:2200px),(min-resolution:1.5dppx) and (min-width:1500px){header.hero{background-image:url(img/hero-3840.webp)}}
@media (min-width:1900px){
body{font-size:20px}
.wrap{max-width:1440px}
h1{font-size:150px;white-space:nowrap}
.sub{font-size:60px}
.sub2{max-width:860px;font-size:23px}
.live-pill{font-size:16px;padding:6px 18px}
.btns{gap:14px}
.btn{font-size:27px;padding:17px 26px;border-radius:10px}
.btn.main{font-size:32px;padding:19px 36px}
.age{font-size:17px;margin-top:28px}
section{padding:76px 0}
h2{font-size:68px}
.lead{font-size:22px;max-width:900px}
.note{font-size:16px}
.card{padding:24px}
.card h3{font-size:30px}
.big{font-size:54px}
.tag-line{font-size:15px}
.clips{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.clip span{font-size:16px}
.socials{gap:12px}
.socials a{font-size:19px;padding:12px 22px 12px 18px}
}