/* Marketing layout. Card images are complete captures of the shared game renderer. */
:root { --landing-title-font:"Warbound Card Title","Arial Black",sans-serif; }
body { overflow-x:hidden; overflow-y:auto; }
html { overflow-x:clip; }
.hero { min-height:780px; min-height:min(920px,100svh); padding-top:100px; padding-bottom:110px; translate:none; }
.hero-chaos { min-height:510px; translate:none; }
.chaos-card { width:49%; aspect-ratio:540/660; }
.chaos-card--bonk { left:-5%;top:22%; }
.chaos-card--purr { left:26%;top:2%; }
.chaos-card--ziggy { right:-7%;top:23%; }
.canonical-card { display:block;width:100%;height:auto; }
.chaos-card::after { display:none; }
.hero-actions { flex-wrap:wrap; }
.hero-actions .play-button,.hero-actions .discord-button { min-width:190px;flex:1; }
.scroll-cue { bottom:32px; }
.pass-banner { position:relative;isolation:isolate;overflow:hidden;width:min(1320px,calc(100% - 48px));margin:0 auto;border:1px solid #dda943;border-radius:8px;background:#291905;box-shadow:0 0 80px #c88a1617,0 28px 80px #0008; }
.pass-banner[hidden] { display:none; }
.pass-art { position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.pass-banner::before { position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(90deg,#221502fa 0%,#241705ef 29%,#271805a8 43%,#24180500 64%); }
.pass-banner::after { position:absolute;inset:0;pointer-events:none;content:"";box-shadow:inset 0 0 0 5px #ffc64a0b; }
.pass-copy { width:51%;padding:52px 0 48px 48px; }
.campaign-label { display:inline-block;margin:0 0 23px;padding:8px 12px;border:1px solid #fbd3658c;border-radius:3px;color:#201200;background:#ffd778;font-size:10px;font-weight:800;letter-spacing:.17em; }
.pass-copy h2 { margin:0;font-family:var(--landing-title-font);font-size:clamp(30px,3.5vw,49px);line-height:1.1;letter-spacing:-.045em;color:#fff6da; }
.pass-copy h2 em { font-style:normal;color:#ffce53; }
.pass-copy>p:not(.campaign-label):not(.pass-terms) { max-width:360px;color:#efddb9;font-size:14px;line-height:1.7;margin:20px 0; }
.countdown { display:flex;align-items:flex-start;gap:13px;margin:25px 0; }
.countdown[hidden] { display:none; }
.countdown div { min-width:53px;text-align:center; }
.countdown b { display:block;color:#ffdf87;font-size:38px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.04em; }
.countdown span { display:block;margin-top:4px;color:#d8bd88;font-size:9px;letter-spacing:.15em; }
.countdown i { color:#88683a;font-size:28px;font-style:normal; }
.pass-button { min-width:290px;min-height:56px;background:linear-gradient(130deg,#ffe89d,#ffc329);border-color:#ffe898;font-size:12px; }
.pass-terms { margin:16px 0 0;color:#d5c197;font-size:10px;line-height:1.7; }
.content-section { padding-block:105px; }
.section-heading { margin-bottom:50px; }
.gameplay .section-heading { max-width:760px; }
.steps { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0; }
.steps li { padding:22px 0; }
.steps li>span { font:600 30px var(--landing-title-font);color:#90744a; }
.steps h3 { font-family:var(--landing-title-font);color:#f1d79a;font-size:17px;line-height:1.3;margin:16px 0 12px; }
.steps p,.roles article>p:last-child { color:#b9b4aa;font-size:13px;line-height:1.8;margin:0; }
.role-heading { margin:64px 0 28px;text-align:center; }
.role-heading h3 { font:500 clamp(21px,3vw,29px) var(--landing-title-font);margin:0;color:#f6e9cd; }
.roles { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.roles article { text-align:center;padding:25px 29px 30px;border:0;background:transparent; }
.roles img { width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 7px 17px #0008); }
.roles h3 { font:600 25px var(--landing-title-font);color:#f1d79a;letter-spacing:.07em;margin:13px 0 8px; }
.role-tag { color:#bfa97e;font-size:9px;font-weight:700;letter-spacing:.13em;min-height:24px;margin:0 0 13px; }
.rules-note { text-align:center;font-size:11px;color:#9b958a;line-height:1.6;margin:20px auto 0;max-width:700px; }
.evolution-section { padding:90px 24px;background:radial-gradient(ellipse at 50% 60%,#58266c25,transparent 65%),linear-gradient(#101013c9,#090b0de8); }
.evolution-family { display:grid;grid-template-columns:1fr 2.15fr;gap:60px;width:min(1030px,100%);margin:65px auto 0;align-items:center; }
.evolution-family+.evolution-family { padding-top:50px;border-top:1px solid #cfb37726; }
.evolution-origin { text-align:center; }
.evolution-origin>.section-kicker { display:block;font-size:10px;letter-spacing:.12em; }
.evolution-origin>img { display:block;width:100%;height:auto;margin:10px auto 0; }
.evolution-origin p { color:#a29cac;font-size:12px;line-height:1.8;margin:0; }
.evolution-origin strong { color:#dfbdff;font-weight:500; }
.path-options { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:35px; }
.path-option { min-width:0;text-align:center; }
.path-label { color:#b991d0;font-size:10px;letter-spacing:.17em; }
.path-option img { width:100%;height:auto;display:block;margin:5px auto 0;filter:drop-shadow(0 8px 22px #bc48fc12);transition:transform .2s; }
.path-option:hover img { transform:translateY(-6px); }
.path-option h3 { color:#e5d4fa;font-family:var(--landing-title-font);font-size:18px;margin:5px 0 12px; }
.path-option p { color:#b9b0c1;line-height:1.7;font-size:12px;margin:0 auto;max-width:245px; }
.path-or { position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);color:#97799e;font-size:11px;letter-spacing:.12em; }
.arena-feature { margin:0;border:1px solid #ae915e73;border-radius:5px;overflow:hidden;background:#111518; }
.screenshot-open { position:relative;display:block;border:0;padding:0;background:#121719;width:100%;cursor:zoom-in;color:white; }
.screenshot-open img { display:block;width:100%;height:auto;aspect-ratio:16/9; }
.screenshot-open>span { position:absolute;right:18px;bottom:18px;font-size:9px;font-weight:700;letter-spacing:.1em;padding:10px 14px;background:#090b0dd9;border:1px solid #ffffff39;border-radius:3px; }
.arena-feature figcaption { display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 24px; }
.arena-feature figcaption strong { font:500 20px var(--landing-title-font);color:#f1d79a; }
.arena-feature figcaption span { color:#a6a6a0;font-size:12px; }
.arena-picker { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px; }
.arena-picker button { padding:0 0 13px;border:1px solid #ffffff1c;border-radius:3px;background:#121619;color:#b4ada1;overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s; }
.arena-picker img { display:block;width:100%;height:auto;margin-bottom:13px; }
.arena-picker span { font-size:11px; }
.arena-picker [aria-pressed="true"] { border-color:#f1c86f;color:#ffe39c;box-shadow:0 0 20px #f1bb3d13; }
.arena-picker button:hover { border-color:#ad965f;transform:translateY(-3px); }
.closing { padding-top:0;padding-bottom:90px; }
button:focus-visible,a:focus-visible { outline:3px solid #ffe39c;outline-offset:4px; }
#screenshot-dialog { width:min(1500px,96vw);max-width:96vw;border:1px solid #b4965b;padding:38px 12px 12px;background:#0b0e11;color:#eddbb6;border-radius:6px; }
#screenshot-dialog::backdrop { background:#020407eb;backdrop-filter:blur(6px); }
#screenshot-dialog>img { display:block;max-height:80vh;width:100%;object-fit:contain; }
#screenshot-dialog>p { text-align:center;font-size:13px;margin:12px 0 0; }
.dialog-close { position:absolute;right:4px;top:0;width:44px;height:38px;border:0;background:transparent;color:#fff1cc;cursor:pointer;font-size:29px; }
@media(min-width:1500px){.hero{width:min(1420px,calc(100% - 100px));grid-template-columns:1fr 1.1fr}.hero-chaos{min-height:580px}}
@media(max-width:1100px){.hero{padding-top:65px;min-height:0}.hero-chaos{width:min(650px,90%);min-height:540px}.hero-actions{max-width:510px;margin-inline:auto}.pass-copy{width:60%;padding-left:32px}.pass-banner::before{background:linear-gradient(90deg,#221502fa,#241705d9 40%,#24180500 85%)}.steps{gap:20px}.evolution-family{gap:25px}}
@media(max-width:700px){.hero{padding:35px 0 75px}.hero-chaos{min-height:330px;width:94%;margin-top:35px}.hero-brand>img{width:90px;height:90px}.hero-actions{margin-inline:auto}.hero-note{font-size:9px}.pass-banner{width:calc(100% - 28px);padding-top:220px}.pass-art{height:290px;object-position:70% center}.pass-banner::before{background:linear-gradient(0deg,#241705 0%,#241705 43%,#24170500 77%)}.pass-copy{width:100%;padding:20px 25px 28px}.pass-copy h2{font-size:34px}.campaign-label{font-size:9px;margin-bottom:18px}.pass-copy>p:not(.campaign-label):not(.pass-terms){max-width:none}.countdown{justify-content:center;gap:10px}.pass-button{min-width:0;width:100%}.pass-terms{text-align:center}.steps{grid-template-columns:1fr 1fr;gap:15px}.steps h3{font-size:15px}.steps p{font-size:12px}.content-section{padding-block:65px}.roles{grid-template-columns:1fr}.roles article{padding:22px 25px}.roles img{width:80px;height:80px}.role-tag{min-height:0}.evolution-section{padding:60px 14px}.evolution-family{grid-template-columns:1fr;gap:25px;margin-top:40px}.evolution-origin{max-width:245px;margin:0 auto}.path-options{gap:16px}.path-option h3{font-size:14px;min-height:34px}.path-option p{font-size:11px;padding-inline:4px}.path-or{top:30%;font-size:8px}.arena-feature figcaption{align-items:flex-start;flex-direction:column;padding:16px}.arena-picker{gap:7px;grid-template-columns:repeat(3,1fr)}.arena-picker span{font-size:10px}.arena-picker button{padding-bottom:9px}.screenshot-open>span{right:8px;bottom:8px;font-size:8px;padding:6px}.closing{padding-top:0}.section-heading>p:last-child{font-size:14px}.section-heading h2{font-size:30px}footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.path-option:hover img,.arena-picker button:hover{transform:none}}
@media(max-width:700px){.hero-chaos{width:86%}}

/* Game-first homepage: current cards, a clear first round, no trailer. */
.site-nav{position:relative;z-index:5;display:flex;align-items:center;gap:32px;width:min(1320px,calc(100% - 48px));margin:0 auto;height:94px;border-bottom:1px solid #d5b77430}
.nav-brand{margin-right:auto}.nav-brand img{display:block;width:76px;height:76px;object-fit:contain}.site-nav nav{display:flex;gap:28px}.site-nav a{color:#ebdfc7;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.06em}.site-nav a:hover{color:#ffda82}.nav-play{padding:14px 21px;border:1px solid #d5b77470}.hero{min-height:680px;padding-top:55px}.hero-brand>img{display:none}.hero-brand h2{font-size:clamp(42px,5vw,72px);line-height:1.06}.announcement>p{max-width:550px}.hero-chaos{min-height:510px}
.game-intro{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:70px;border-top:1px solid #d5b77430}.game-intro h2{font:500 clamp(30px,3.5vw,46px)/1.15 var(--landing-title-font);color:#f4e8ca;margin:15px 0 25px}.game-intro p:not(.section-kicker){font-size:15px;line-height:1.85;color:#bdb7ab}.game-intro figure{margin:0;transform:rotate(2deg)}.game-intro figure img{display:block;width:100%;height:auto;box-shadow:0 25px 65px #0009;border:1px solid #c6a06060}.game-intro figcaption{margin-top:16px;color:#a59982;font-size:11px;text-align:center}.text-link{display:inline-flex;gap:22px;margin-top:16px;color:#eed194;text-decoration:none;font-size:13px}
.first-match-rules{display:grid;grid-template-columns:1fr 2fr;gap:55px;margin-top:50px;padding:42px 0;border-block:1px solid #c8a96036}.first-match-rules h3{font:500 27px/1.3 var(--landing-title-font);color:#f6e9cd;margin:10px 0}.first-match-rules dl{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0}.first-match-rules dt{font-size:15px;color:#f1d79a;line-height:1.4;margin-bottom:10px}.first-match-rules dd{margin:0;color:#b9b4aa;font-size:13px;line-height:1.8}.pass-banner{margin-bottom:90px}.hero .scroll-cue{white-space:nowrap}
@media(max-width:1100px){.hero{min-height:0}.game-intro{gap:35px}.first-match-rules{grid-template-columns:1fr;gap:20px}}
@media(max-width:700px){.site-nav{width:calc(100% - 28px);height:78px;gap:14px}.nav-brand img{width:64px;height:64px}.site-nav nav{gap:15px}.site-nav nav a{font-size:10px}.site-nav nav a[href="#the-game"],.site-nav nav a[href="#arenas"]{display:none}.nav-play{padding:10px;font-size:10px!important}.hero{padding-top:40px}.hero-brand h2{font-size:44px}.hero-chaos{min-height:330px}.game-intro{grid-template-columns:1fr;gap:35px}.game-intro figure{transform:none}.first-match-rules dl{grid-template-columns:1fr;gap:25px}.first-match-rules{margin-top:25px;padding:30px 0}.pass-banner{margin-bottom:55px}}

.arena-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.arena-picker span{display:block;padding:0 5px;line-height:1.4}}

/* Sections are separated by spacing, without decorative rules. */
.site-nav,.game-intro,.first-match-rules{position:relative;border:0}
/* Full-width, compact sections with one shared page gutter. */
:root{--landing-gutter:clamp(18px,3vw,56px)}
.site-nav,.hero,.content-section{width:calc(100% - var(--landing-gutter)*2);max-width:none}
.site-nav{height:82px}
.hero{min-height:0;padding:35px 0 64px;gap:35px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hero-chaos{width:100%;max-width:720px;justify-self:center;min-height:480px}
.hero-brand h2{font-size:clamp(38px,4.2vw,66px)}
.content-section{padding-block:38px}
.game-intro{gap:45px;grid-template-columns:1fr 1fr}
.game-intro figure{max-width:760px;justify-self:end;transform:none}
.game-intro h2{font-size:clamp(28px,3vw,42px)}
.section-heading{margin-bottom:26px}.section-heading h2{font-size:clamp(28px,3vw,42px)}
.section-heading>p:last-child{margin-top:12px;font-size:14px}
.steps{gap:24px}.steps li{padding:16px 0}.steps h3{margin:10px 0}
.first-match-rules{margin-top:20px;padding:25px 0;gap:30px}.first-match-rules dl{gap:22px}
.role-heading{margin:32px 0 18px}.roles article{padding:18px 22px}.roles img{width:66px;height:66px}.roles h3{font-size:22px;margin:8px 0}
.evolution-section{padding:38px var(--landing-gutter);display:grid;grid-template-columns:1fr 1fr;gap:22px 42px}
.evolution-section>.section-heading{grid-column:1/-1;margin-bottom:0}
.evolution-family,.evolution-family+.evolution-family{width:100%;margin:0;gap:12px;padding:0;border:0}
.path-options{gap:12px}.path-option h3{font-size:15px}.path-option p{font-size:12px}.path-or{font-size:9px}
.arena-gallery{padding-top:38px;padding-bottom:38px}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero-chaos{width:min(650px,94%);min-height:480px}.evolution-section{grid-template-columns:1fr}.evolution-family{max-width:950px;margin:auto}.game-intro{gap:25px}}
@media(max-width:700px){.site-nav{height:72px}.hero{padding:28px 0 55px;gap:10px}.hero-chaos{min-height:300px}.content-section{padding-block:26px}.game-intro{grid-template-columns:1fr}.section-heading{margin-bottom:20px}.evolution-section{padding-block:26px}.evolution-family{grid-template-columns:1fr}.evolution-origin{max-width:220px}.first-match-rules{margin-top:12px}.site-nav nav{gap:12px}}
/* Lift the hero fan into the available space above the call to action. */
.hero-chaos{translate:0 -42px}
.chaos-card--bonk{top:12%}.chaos-card--purr{top:-4%}.chaos-card--ziggy{top:13%}
@media(max-width:1100px){.hero-chaos{translate:0 -20px}}
@media(max-width:700px){.hero-chaos{translate:0 -8px}.chaos-card--bonk{top:10%}.chaos-card--purr{top:-3%}.chaos-card--ziggy{top:11%}}

.arena-picker{margin:0;gap:20px;align-items:start}.arena-picker figure{margin:0;overflow:hidden;border:1px solid #ffffff1c;background:#121619}.arena-picker figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0}.arena-picker figcaption{padding:15px 12px;text-align:center;color:#d3c8b3;font-size:13px;line-height:1.5}
@media(max-width:700px){.arena-picker{grid-template-columns:1fr;gap:18px}}

/* Shared game title face, with plain body copy for longer explanations. */
body :is(h1,h2,h3,.section-kicker,.eyebrow,.steps li>span) { font-weight:800; }
.hero-brand h2,.section-heading h2,.game-intro h2 { letter-spacing:.01em; }
.section-kicker,.eyebrow { letter-spacing:.12em; }
.site-nav a,.hero-actions a { font-weight:800; }

/* Minimal official landing: hero copy, two actions and three current cards. */
.hero{min-height:100svh;align-items:center;padding-block:72px;box-sizing:border-box}.hero-chaos{translate:none}.hero-brand h2{font-size:clamp(38px,4.2vw,72px)}
@media(max-width:1100px){.hero{padding-block:48px;gap:32px}.hero-chaos{translate:none}}
@media(max-width:700px){.hero{padding-block:32px;gap:24px}.hero-chaos{min-height:330px}.hero-brand h2{font-size:clamp(34px,9vw,48px)}}
/* Subdued artwork with a soft edge vignette behind the hero. */
.backdrop{background:linear-gradient(110deg,rgba(20,19,37,.95),rgba(24,22,42,.94)),url('assets/showcase/hub-cast-watermark-v2.webp') center/cover no-repeat #151426}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 52% 46%,transparent 25%,rgba(5,5,14,.22) 65%,rgba(3,3,10,.66) 100%);pointer-events:none}
/* Refined hero: restrained lighting, clear brand hierarchy and quieter controls. */
.hero{width:min(1380px,calc(100% - 112px));grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;padding-block:64px}
.hero-copy{max-width:570px}
.hero-brand{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero-brand>.hero-wordmark{display:block;width:330px;height:auto;max-width:85%;filter:drop-shadow(0 8px 18px #0005);object-fit:contain}
.hero-brand h2{font-size:clamp(40px,4.2vw,64px);line-height:1.03;letter-spacing:-.015em;color:#f2e5be}
.announcement>p{margin-top:24px;max-width:490px;color:#c4c2ce;font-size:17px;line-height:1.7}
.hero-actions{gap:14px;margin-top:30px;max-width:500px}
.hero-actions .play-button,.hero-actions .discord-button{min-width:0;min-height:54px;border-radius:6px;font-size:11px;letter-spacing:.09em;padding:16px 20px}
.hero-actions .play-button{background:linear-gradient(140deg,#f3d997,#c99c51);border-color:#edce8c;box-shadow:0 8px 28px #bb914518,inset 0 1px #fff5;color:#292015}
.hero-actions .discord-button{background:#ffffff04;border-color:#b9b0d13d;color:#ded9ed;box-shadow:inset 0 1px #ffffff05}
.hero-actions .discord-button:hover{background:#ffffff0b;border-color:#b9b0d180;box-shadow:0 8px 24px #0003}
.hero-note{margin-top:20px;font-size:13px;letter-spacing:.025em;line-height:1.65;color:#b5b1bf;max-width:500px;text-transform:none}
.hero-chaos{min-height:490px;margin-top:0;isolation:isolate}
.hero-chaos::before{content:"";position:absolute;inset:0 -6%;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#69609c22,transparent 68%);pointer-events:none}
.chaos-card--bonk{--card-rz:-7deg;top:17%}.chaos-card--purr{--card-rz:0deg;top:2%}.chaos-card--ziggy{--card-rz:7deg;top:18%}
.hero-chaos .chaos-card,.hero-chaos .chaos-card:hover{filter:drop-shadow(0 24px 22px #0007)}
@media(max-width:1100px){.hero{width:calc(100% - 64px);grid-template-columns:1fr;gap:42px;padding-block:48px}.hero-copy{max-width:630px;text-align:center}.hero-brand{align-items:center}.announcement>p,.hero-actions,.hero-note{margin-inline:auto}.hero-chaos{min-height:460px;max-width:650px}.hero-brand h2{font-size:56px}}
@media(max-width:700px){.hero{width:calc(100% - 40px);padding-block:36px;gap:30px}.hero-brand{gap:25px}.hero-brand>.hero-wordmark{width:260px;max-width:85%;height:auto}.hero-brand h2{font-size:clamp(34px,9.5vw,46px)}.announcement>p{font-size:16px;line-height:1.6;margin-top:20px}.hero-actions{margin-top:25px;width:100%;max-width:340px;gap:10px}.hero-note{font-size:13px;max-width:340px}.hero-chaos{width:100%;min-height:310px}.chaos-card--bonk{top:16%}.chaos-card--purr{top:2%}.chaos-card--ziggy{top:17%}}
/* Original CTA styling, with a soft cinematic top/bottom falloff. */
.hero-actions .play-button,.hero-actions .discord-button{border-radius:3px;font-size:16px;font-weight:800;letter-spacing:.045em;min-height:56px;padding:14px 20px}
.hero-actions .play-button{border-color:rgba(255,224,145,.76);color:#211405;background:linear-gradient(135deg,#ffe39a,#cf8c32);box-shadow:0 12px 34px rgba(95,54,11,.48),inset 0 1px rgba(255,255,255,.46)}
.hero-actions .discord-button{border-color:rgba(165,175,255,.52);color:#fff;background:linear-gradient(135deg,#6672f2,#4652cf);box-shadow:0 12px 34px rgba(21,27,82,.42),inset 0 1px rgba(255,255,255,.2)}
.hero-actions .play-button:hover{border-color:#fff0bd;box-shadow:0 15px 42px rgba(126,74,17,.62),0 0 24px rgba(238,184,78,.3)}
.hero-actions .discord-button:hover{background:linear-gradient(135deg,#6672f2,#4652cf);border-color:#b9c0ff;box-shadow:0 15px 42px rgba(38,47,138,.58),0 0 22px rgba(88,101,242,.25)}
.backdrop::after{background:linear-gradient(to bottom,rgba(2,3,9,.94) 0%,rgba(3,4,12,.62) 12%,transparent 32%,transparent 68%,rgba(3,4,12,.62) 88%,rgba(2,3,9,.94) 100%),radial-gradient(ellipse at 52% 49%,transparent 32%,rgba(3,3,12,.18) 67%,rgba(2,2,8,.50) 100%)}
@media(max-width:700px){.backdrop::after{background:linear-gradient(to bottom,rgba(2,3,9,.72),transparent 22%,transparent 78%,rgba(2,3,9,.82)),radial-gradient(ellipse at center,transparent 40%,rgba(2,2,8,.30) 100%)}}
/* Quiet midnight backdrop with controlled light around the focal area. */
body{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}
.backdrop{background:radial-gradient(ellipse at 74% 47%,rgba(70,62,112,.20),transparent 46%),radial-gradient(ellipse at 27% 48%,rgba(89,71,48,.08),transparent 44%),linear-gradient(125deg,#0c0d18 0%,#171627 52%,#0c0d18 100%)}
.backdrop::before{content:"";position:absolute;inset:0;background:url('assets/showcase/hub-cast-watermark-v2.webp') center/cover no-repeat;opacity:.025;pointer-events:none}
.backdrop::after{background:linear-gradient(to bottom,rgba(2,3,8,.92),rgba(3,4,10,.42) 15%,transparent 34%,transparent 66%,rgba(3,4,10,.48) 86%,rgba(2,3,8,.94)),radial-gradient(ellipse at 53% 48%,transparent 32%,rgba(2,3,9,.22) 70%,rgba(2,3,9,.65) 100%)}
@media(max-width:700px){.backdrop::after{background:linear-gradient(to bottom,rgba(2,3,8,.65),transparent 24%,transparent 76%,rgba(2,3,8,.8)),radial-gradient(ellipse at center,transparent 35%,rgba(2,3,9,.35) 100%)}}
/* Large game illustrations dissolve into the cinematic background. */
.backdrop{overflow:hidden;isolation:isolate;background:#11111e}
.backdrop::before{display:none}
.ambient-art{position:absolute;top:-12%;height:124%;width:58%;background-repeat:no-repeat;background-size:cover;filter:blur(12px) saturate(.65);opacity:.34;transform:scale(1.06);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 16%,transparent 73%);mask-image:radial-gradient(ellipse at center,#000 16%,transparent 73%)}
.ambient-art--bonk{left:-15%;background-image:url('assets/showcase/ambient-bonk-v1.webp');background-position:50% 35%}
.ambient-art--vexa{right:-10%;background-image:url('assets/showcase/ambient-vexa-v1.webp');background-position:50% 30%;opacity:.40}
.backdrop::after{background:linear-gradient(to bottom,#03040bea,transparent 30%,transparent 68%,#03040bf2),linear-gradient(90deg,#0b0b1640 0%,#11111ec7 33%,#11111e88 56%,#0b0b1620 100%),radial-gradient(ellipse at 55% 48%,transparent 35%,#03040b88 100%)}
@media(max-width:700px){.ambient-art{width:105%;height:105%;top:0;filter:blur(10px) saturate(.65)}.ambient-art--bonk{left:-48%;opacity:.28}.ambient-art--vexa{right:-52%;opacity:.33}.backdrop::after{background:linear-gradient(to bottom,#03040bb3,transparent 22%,#11111e55 55%,#03040bd9),linear-gradient(90deg,transparent,#11111e88 50%,transparent)}}
/* Continuous artwork backdrop, without feathered image masks. */
.ambient-art{-webkit-mask-image:none;mask-image:none;top:-8%;height:116%;width:62%;filter:blur(22px) saturate(.58);transform:scale(1.1);opacity:.24}
.ambient-art--bonk{left:-10%;background-position:50% 38%}
.ambient-art--vexa{right:-10%;background-position:50% 34%;opacity:.30}
.backdrop::after{background:linear-gradient(to bottom,#03040bed,transparent 30%,transparent 67%,#03040bf5),linear-gradient(90deg,#10111c44 0%,#11121dcc 38%,#11121dd9 50%,#11121c80 65%,#10111c44 100%),radial-gradient(ellipse at 55% 48%,transparent 25%,#03040b66 100%)}
@media(max-width:700px){.ambient-art{width:85%;height:112%;top:-6%;filter:blur(18px) saturate(.58);opacity:.22}.ambient-art--bonk{left:-24%}.ambient-art--vexa{right:-24%;opacity:.26}.backdrop::after{background:linear-gradient(to bottom,#03040bbf,transparent 25%,#11111e33 55%,#03040be6),linear-gradient(90deg,#11111e33,#11111eb3 50%,#11111e33)}}
/* Fit the complete landing composition into one viewport without cropping. */
html:has(body>main#top){height:100%;overflow:hidden}
body:has(>main#top){height:100dvh;min-height:0;overflow:hidden}
body>main#top{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
body>main#top>.hero{flex:none;min-height:0;transform:scale(var(--hero-fit,1));transform-origin:center}


/* Fred leads initially; retain the most recently hovered card in front. */
.hero-chaos .chaos-card--bonk{z-index:1}
.hero-chaos .chaos-card--purr{z-index:2}
.hero-chaos .chaos-card--ziggy{z-index:3}
.hero-chaos .chaos-card.is-front{z-index:6}

/* Warm metallic headline, with a solid-color fallback. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero-brand h2{background:linear-gradient(175deg,#fff7dc 0%,#f8e9bd 30%,#e5bd71 65%,#c59143 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
}
/* Character speech stays outside the canonical card artwork. */
.card-quip{position:absolute;z-index:2;bottom:88%;left:50%;width:max-content;max-width:88%;margin:0;padding:9px 12px;border:3px solid #29243b99;border-radius:8px;background:#fff0cd;color:#292339;font:950 clamp(12px,1.05vw,16px)/1.1 Arial,sans-serif;text-align:center;text-wrap:balance;text-transform:uppercase;box-shadow:2px 3px 0 #100c1c60;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,2px) scale(.82);transform-origin:50% 100%;transition:opacity 100ms ease-out,transform 160ms cubic-bezier(.16,1,.3,1.18),visibility 100ms}
.card-quip::after{content:"";position:absolute;top:auto;bottom:-8.5px;left:18%;width:10px;height:10px;background:#fff0cd;border-right:3px solid #29243b99;border-bottom:3px solid #29243b99;transform:rotate(45deg)}
.chaos-card:focus-visible{outline:2px solid #f3d997;outline-offset:-25px}
.chaos-card:focus-visible .card-quip{opacity:1;visibility:visible;transform:translate(-50%,-10px) scale(1)}
@media(hover:hover){.chaos-card:hover .card-quip{opacity:1;visibility:visible;transform:translate(-50%,-10px) scale(1)}}
@media(prefers-reduced-motion:reduce){.card-quip{transition:none}}
/* A small independent depth response for the character speech. */
.card-quip{translate:var(--quip-x,0px) var(--quip-y,0px);transition:opacity 100ms ease-out,transform 160ms cubic-bezier(.16,1,.3,1.18),visibility 100ms,translate 180ms ease-out}
@media(prefers-reduced-motion:reduce){.card-quip{translate:none;transition:none}}