:root{
  --studio-bg:#03040a;
  --studio-panel:#090b17;
  --studio-panel-2:#0d1020;
  --cyan:#00f5ff;
  --pink:#ff168f;
  --violet:#8a39ff;
  --white:#f7fbff;
  --muted:#9aa7bd;
  --kc-yellow:#ffd817;
  --kc-pink:#ff24ad;
  --kc-cyan:#23d8f2;
  --kc-purple:#6e31d8;
  --radius:28px;
  --nav-h:74px;
  --shadow:0 30px 90px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--studio-bg)}
body{margin:0;background:var(--studio-bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;letter-spacing:-.01em}
body.is-leaving{opacity:0;transform:scale(.995);transition:.28s ease}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img,video{max-width:100%;display:block}
::selection{background:rgba(255,22,143,.35);color:#fff}
.container{width:min(1180px,calc(100% - 42px));margin:auto}
.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.17em;font-weight:900;color:var(--cyan)}
.display{font-size:clamp(3.3rem,8vw,8.2rem);line-height:.83;letter-spacing:-.065em;margin:0;font-weight:950}
.display .gradient{background:linear-gradient(90deg,var(--cyan),#b65cff 48%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-title{font-size:clamp(2.3rem,5vw,5.2rem);line-height:.94;letter-spacing:-.05em;margin:.4rem 0 1rem;font-weight:950}
.lead{font-size:clamp(1.03rem,1.8vw,1.3rem);line-height:1.65;color:#bcc6d8;max-width:760px}
.small{color:var(--muted);line-height:1.65}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.035);font-size:.78rem;font-weight:800;letter-spacing:.04em;color:#dce8f7;backdrop-filter:blur(12px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:52px;padding:0 20px;border-radius:15px;border:1px solid rgba(255,255,255,.14);font-weight:900;transition:.25s ease;cursor:pointer;background:#111526;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.btn:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);box-shadow:0 16px 38px rgba(0,0,0,.33)}
.btn.primary{background:linear-gradient(115deg,var(--pink),var(--violet));border-color:transparent;box-shadow:0 13px 44px rgba(255,22,143,.24)}
.btn.cyan{background:linear-gradient(115deg,#0fdbe3,#107bc8);border-color:transparent}
.btn.kc{background:linear-gradient(115deg,var(--kc-pink),#7a42ee);border-color:transparent;box-shadow:0 13px 42px rgba(255,36,173,.28)}
.btn.ghost{background:rgba(6,8,18,.42);backdrop-filter:blur(12px)}
.icon-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.035);display:grid;place-items:center;cursor:pointer;color:#fff;transition:.2s ease}
.icon-btn:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* NAV */
.nav{position:fixed;left:0;right:0;top:0;height:var(--nav-h);z-index:100;background:linear-gradient(180deg,rgba(3,4,10,.93),rgba(3,4,10,.58));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{height:100%;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;min-width:210px;font-weight:950;letter-spacing:-.03em}
.brand img{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 0 24px rgba(255,22,143,.15)}
.nav-links{display:flex;align-items:center;gap:6px;margin:auto}
.nav-links a,.nav-drop>button{border:0;background:none;color:#cdd6e5;padding:10px 13px;border-radius:11px;font-weight:780;cursor:pointer;transition:.2s ease}
.nav-links a:hover,.nav-drop>button:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-drop{position:relative}
.nav-drop-panel{position:absolute;top:calc(100% + 12px);left:0;width:280px;padding:9px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(8,10,20,.97);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s ease}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;visibility:visible;transform:none}
.nav-drop-panel a{display:block;padding:14px!important}
.nav-drop-panel b{display:block;color:#fff;margin-bottom:4px}.nav-drop-panel span{font-size:.78rem;color:#8996aa}
.nav-right{display:flex;align-items:center;gap:7px;margin-left:auto}
.social-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);font-weight:900;font-size:.75rem;transition:.2s ease}
.social-icon:hover{border-color:rgba(0,245,255,.28);box-shadow:0 0 20px rgba(0,245,255,.1);transform:translateY(-2px)}
.sound-toggle{display:flex;align-items:center;gap:8px;width:auto;padding:0 12px;font-size:.75rem;font-weight:850}
.sound-dot{width:7px;height:7px;border-radius:50%;background:#667085;box-shadow:none}.sound-toggle.on .sound-dot{background:#36f18f;box-shadow:0 0 12px #36f18f}
.mobile-menu{display:none}

/* STUDIO HERO */
.studio-hero{min-height:100vh;padding-top:var(--nav-h);position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 72% 37%,rgba(122,45,235,.22),transparent 33%),radial-gradient(circle at 18% 18%,rgba(0,245,255,.12),transparent 29%),radial-gradient(circle at 80% 78%,rgba(255,22,143,.13),transparent 31%),#03040a}
.hero-grid{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:34px;padding:54px 0}
.hero-copy{position:relative;z-index:5}
.hero-copy .lead{max-width:620px;margin:26px 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-brandmark{height:min(720px,75vh);min-height:540px;position:relative;z-index:3;display:grid;place-items:center;perspective:1000px}
.brandmark-frame{width:min(560px,92%);aspect-ratio:1;border-radius:42px;overflow:hidden;position:relative;z-index:3;border:1px solid rgba(255,255,255,.11);background:#05050b;box-shadow:0 38px 110px rgba(0,0,0,.52),0 0 80px rgba(255,22,143,.11),0 0 100px rgba(0,245,255,.07);transform:rotate(-1.5deg)}
.brandmark-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -70px 120px rgba(0,0,0,.28);pointer-events:none}
.brandmark-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease;filter:saturate(1.06) contrast(1.04)}
.hero-brandmark:hover .brandmark-frame img{transform:scale(1.045);filter:saturate(1.14) contrast(1.07)}
.brandmark-aura{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none}.brandmark-aura.a1{width:330px;height:330px;background:var(--pink);right:2%;top:9%}.brandmark-aura.a2{width:300px;height:300px;background:var(--cyan);left:3%;bottom:7%;opacity:.19}
.brandmark-caption{position:absolute;z-index:5;right:1%;bottom:6%;padding:14px 18px;border-radius:16px;background:rgba(4,5,12,.76);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(14px);box-shadow:0 18px 55px rgba(0,0,0,.36);text-align:right}.brandmark-caption span{display:block;font-size:.82rem;letter-spacing:.17em;font-weight:950;color:#fff}.brandmark-caption small{display:block;color:#8f9bb0;margin-top:5px;font-size:.7rem;letter-spacing:.04em}
.orbit{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}.orbit.o1{width:560px;height:560px;right:3%;top:18%;animation:spin 24s linear infinite}.orbit.o2{width:760px;height:760px;right:-8%;top:7%;animation:spin 40s linear infinite reverse}
.orbit::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);position:absolute;top:16%;left:10%;box-shadow:0 0 20px var(--cyan)}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:#6f7a8f;display:flex;align-items:center;gap:10px}.scroll-cue::before{content:"";width:36px;height:1px;background:#536076}

/* STUDIO SECTIONS */
.studio-section{padding:120px 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}.section-head .lead{max-width:520px;margin:0}
.value-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:16px}
.value-card{min-height:290px;border-radius:var(--radius);padding:30px;position:relative;overflow:hidden;background:linear-gradient(155deg,#0d1020,#080a12);border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow);transition:.3s ease}
.value-card:hover{transform:translateY(-6px);border-color:rgba(0,245,255,.2)}
.value-card.big{min-height:420px}.value-card .num{font-size:.75rem;color:#657289;font-weight:900;letter-spacing:.16em}.value-card h3,.value-card.big h3{font-size:clamp(1.55rem,2.4vw,2.55rem);line-height:1.03;margin:78px 0 18px;letter-spacing:-.035em;max-width:520px}.value-card p{color:#9da9bc;line-height:1.65;margin:0}.value-card .glow{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(70px);opacity:.2;right:-60px;top:-70px}.value-card:nth-child(1) .glow{background:var(--cyan)}.value-card:nth-child(2) .glow{background:var(--violet)}.value-card:nth-child(3) .glow{background:var(--pink)}

.game-gateway{padding:70px 0 120px}.gateway-card{min-height:670px;border-radius:36px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1);box-shadow:0 45px 120px rgba(0,0,0,.55);background:#090711}.gateway-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}.gateway-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,3,12,.95) 0%,rgba(4,3,12,.7) 46%,rgba(4,3,12,.2) 75%),linear-gradient(0deg,rgba(4,3,12,.9),transparent 45%)}.gateway-content{position:absolute;left:54px;bottom:54px;z-index:3;max-width:600px}.gateway-content .game-logo{width:min(500px,80vw);border-radius:20px;margin-bottom:20px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.gateway-content p{font-size:1.08rem;line-height:1.65;color:#e0e5ee;max-width:580px}.gateway-label{position:absolute;right:32px;top:30px;z-index:3;color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;background:rgba(0,0,0,.4);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);padding:10px 14px;border-radius:999px}

.team-section{padding:100px 0 140px;background:linear-gradient(180deg,#03040a,#060713 45%,#03040a)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}.team-card{min-height:580px;border-radius:32px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.08);background:#0a0c16}.team-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:saturate(.86)}.team-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,3,8,.98) 5%,rgba(2,3,8,.28) 66%,rgba(2,3,8,.02))}.team-info{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}.team-role{font-size:.8rem;text-transform:uppercase;font-weight:900;letter-spacing:.15em;color:var(--cyan)}.team-card:nth-child(2) .team-role{color:var(--pink)}.team-info h3{font-size:2rem;margin:8px 0}.team-info p{color:#b0bbcc;line-height:1.55;margin:0}.team-center{text-align:center;margin-top:32px;color:#8e9aad;font-weight:800}.team-center strong{color:#fff}

.contact-band{padding:120px 0}.contact-card{padding:58px;border-radius:34px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 12% 30%,rgba(0,245,255,.1),transparent 34%),radial-gradient(circle at 82% 30%,rgba(255,22,143,.12),transparent 30%),#080a14;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}.contact-card h2{font-size:clamp(2.4rem,5vw,5.2rem);line-height:.95;margin:0 0 16px;letter-spacing:-.05em}.contact-actions{display:flex;flex-direction:column;gap:12px}

/* GAME PAGE */
.game-page{--accent:var(--kc-pink);background:#080417;color:#fff}
.game-page .nav{background:linear-gradient(180deg,rgba(8,4,23,.96),rgba(8,4,23,.62))}
.game-hero{height:100svh;min-height:760px;position:relative;overflow:hidden;padding-top:var(--nav-h);background:#09031a}
.game-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.game-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,3,31,.93) 0%,rgba(18,3,31,.58) 48%,rgba(18,3,31,.15) 78%),linear-gradient(0deg,#080417 0%,transparent 38%),radial-gradient(circle at 85% 30%,rgba(35,216,242,.14),transparent 28%)}
.game-hero-inner{height:100%;position:relative;z-index:3;display:flex;align-items:center}.game-hero-content{max-width:660px}.game-brand-lockup{width:min(600px,85vw);margin-bottom:22px}.game-hero .cover-logo{width:100%;border-radius:24px;margin:0;box-shadow:0 24px 70px rgba(0,0,0,.25)}.game-byline{text-align:center;margin-top:10px;font-size:.72rem;font-weight:950;letter-spacing:.2em;color:var(--kc-cyan);text-shadow:0 0 18px rgba(35,216,242,.24)}.game-hero .lead{color:#f3eafa;max-width:630px}.store-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.hero-statline{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.kc-scroll-mark{position:absolute;right:5vw;bottom:8vh;z-index:4;text-align:right}.kc-scroll-mark b{font-size:clamp(2rem,4vw,4.5rem);display:block;line-height:.85;color:rgba(255,255,255,.86);letter-spacing:-.05em}.kc-scroll-mark span{color:#d6c6e8;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em}

.kc-intro{padding:120px 0 70px;background:radial-gradient(circle at 15% 20%,rgba(255,36,173,.12),transparent 32%),#080417}.kc-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end}.kc-intro p{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.7;color:#c7bbd8}.kc-rule{height:1px;background:linear-gradient(90deg,var(--kc-pink),var(--kc-cyan),transparent);margin-top:38px}

.mode-story{position:relative;padding:90px 0 130px;background:#080417}.mode-story-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:start}.mode-visual{position:sticky;top:calc(var(--nav-h) + 32px);height:calc(100vh - var(--nav-h) - 64px);min-height:600px;border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.4);background:#160c2a}.mode-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:.6s ease}.mode-image.active{opacity:1;transform:scale(1)}.mode-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,4,23,.8),transparent 45%)}.mode-visual-label{position:absolute;z-index:3;left:28px;bottom:26px}.mode-visual-label span{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--kc-cyan)}.mode-visual-label b{display:block;font-size:2.1rem;margin-top:5px}.mode-cards{display:flex;flex-direction:column}.mode-card{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0;border-bottom:1px solid rgba(255,255,255,.08)}.mode-card:first-child{padding-top:18vh}.mode-index{font-size:.75rem;color:#8c7d9e;letter-spacing:.18em;text-transform:uppercase;font-weight:900}.mode-card h3{font-size:clamp(2.5rem,5vw,5rem);line-height:.92;letter-spacing:-.055em;margin:12px 0 18px}.mode-card p{font-size:1.08rem;color:#bcaecb;line-height:1.7;max-width:480px}.mode-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.mode-tags span{font-size:.75rem;font-weight:850;border:1px solid rgba(255,255,255,.1);padding:8px 10px;border-radius:999px;color:#e9ddf2;background:rgba(255,255,255,.035)}

.solo-feature{padding:110px 0;background:radial-gradient(circle at 20% 20%,rgba(255,36,173,.22),transparent 34%),radial-gradient(circle at 85% 50%,rgba(35,216,242,.13),transparent 26%),#0b061b}.solo-card{min-height:760px;border-radius:36px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);box-shadow:0 40px 120px rgba(0,0,0,.5)}.solo-card>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.solo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,4,22,.97) 0%,rgba(9,4,22,.74) 58%,rgba(9,4,22,.25)),linear-gradient(0deg,rgba(9,4,22,.92),transparent 42%)}.solo-content{position:absolute;z-index:2;left:48px;right:48px;bottom:42px;max-width:900px}.solo-content img.logo{width:320px;max-width:68vw;margin-bottom:14px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))}.solo-content p{font-size:1rem;color:#e4d9ec;line-height:1.6;max-width:650px}.solo-rewards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;max-width:760px}.reward-card{min-width:0;padding:10px;border-radius:16px;background:rgba(16,8,34,.76);border:1px solid rgba(176,76,255,.28);backdrop-filter:blur(12px);text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.2)}.reward-card>span{display:block;font-size:.76rem;font-weight:950;letter-spacing:.05em;color:#fff;margin-bottom:7px}.reward-card>b{display:block;font-size:.72rem;letter-spacing:.06em;color:#f5ecff;margin-top:7px}.reward-visual{height:92px;border-radius:12px;background:#4f2790;display:grid;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.08)}.reward-visual img{width:100%;height:100%;object-fit:contain;padding:4px}.reward-icon .reward-visual{border:3px solid #ffae19;box-shadow:inset 0 0 0 1px rgba(255,240,183,.72),0 0 20px rgba(255,153,0,.16)}.reward-visual.character-reward img{padding:0;transform:scale(1.08)}

.maps-section{padding:120px 0;background:#080417;overflow:hidden}.maps-copy{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.maps-copy .lead{max-width:500px;margin:0}.map-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(21px,calc((100vw - 1180px)/2)) 30px;cursor:grab;scrollbar-width:none}.map-rail::-webkit-scrollbar{display:none}.map-rail.dragging{cursor:grabbing;scroll-snap-type:none}.map-card{flex:0 0 min(560px,82vw);aspect-ratio:1.55;scroll-snap-align:center;border-radius:26px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1);background:#15102a;transition:.28s ease}.map-card:hover{transform:translateY(-5px)}.map-card img{width:100%;height:100%;object-fit:cover;transition:.6s ease}.map-card:hover img{transform:scale(1.045)}.map-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,3,15,.9),transparent 50%)}.map-card h3{position:absolute;z-index:2;left:22px;bottom:18px;margin:0;font-size:1.45rem}.map-card span{position:absolute;z-index:2;right:20px;top:18px;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.15em;background:rgba(0,0,0,.5);padding:8px 10px;border-radius:999px;backdrop-filter:blur(10px)}

.cosmetics{padding:120px 0;background:linear-gradient(180deg,#080417,#0d061b 50%,#080417);overflow:hidden}.cosmetic-row-wrap{margin-top:28px;position:relative}.cosmetic-row-wrap::before,.cosmetic-row-wrap::after{content:"";position:absolute;z-index:3;top:28px;bottom:18px;width:max(24px,calc((100vw - 1180px)/2));pointer-events:none}.cosmetic-row-wrap::before{left:0;background:linear-gradient(90deg,#0a0518 0%,rgba(10,5,24,.78) 45%,transparent)}.cosmetic-row-wrap::after{right:0;background:linear-gradient(270deg,#0a0518 0%,rgba(10,5,24,.78) 45%,transparent)}.cosmetic-row-label{width:min(1180px,calc(100% - 42px));margin:0 auto 8px;color:#8d79a1;font-size:.7rem;font-weight:950;letter-spacing:.18em}.marquee.cosmetic-rail{display:flex;gap:14px;width:100%;margin:0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:none;padding:10px max(21px,calc((100vw - 1180px)/2)) 22px;scrollbar-width:none;cursor:grab}.marquee.cosmetic-rail::-webkit-scrollbar{display:none}.marquee.cosmetic-rail.dragging{cursor:grabbing}.cosmetic-card{width:122px;height:122px;flex:0 0 122px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);padding:15px;display:grid;place-items:center;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.cosmetic-card:hover{transform:scale(1.06) translateY(-3px);border-color:rgba(255,36,173,.35);box-shadow:0 16px 45px rgba(255,36,173,.12)}.cosmetic-card.icon-frame{padding:0;overflow:hidden;border:4px solid #ff9b12;background:#221036;box-shadow:0 12px 26px rgba(0,0,0,.24),0 0 18px rgba(255,145,0,.14)}.cosmetic-card.icon-frame:hover{border-color:#ffb52e;box-shadow:0 16px 38px rgba(0,0,0,.3),0 0 28px rgba(255,145,0,.28)}.cosmetic-card img{width:100%;height:100%;object-fit:contain}.cosmetic-card.icon-frame img{object-fit:cover;border-radius:19px;transform:scale(1.015)}.cosmetic-card.marquee-clone{pointer-events:none}

.characters{padding:110px 0}.character-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:36px}.character-card{aspect-ratio:.82;border-radius:24px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 25%,rgba(35,216,242,.15),transparent 32%),#100922;border:1px solid rgba(255,255,255,.09);transition:.28s ease}.character-card:hover{transform:translateY(-8px) rotateX(2deg);border-color:rgba(35,216,242,.28);box-shadow:0 18px 45px rgba(0,0,0,.32)}.character-card img{width:100%;height:84%;object-fit:contain;padding:12px}.character-card span{position:absolute;bottom:11px;left:13px;font-size:.8rem;font-weight:900;letter-spacing:.04em}.character-card:nth-child(3n+1){box-shadow:inset 0 0 24px rgba(255,36,173,.08)}.character-card:nth-child(3n+2){box-shadow:inset 0 0 24px rgba(35,216,242,.08)}.character-card:nth-child(3n){box-shadow:inset 0 0 24px rgba(255,216,23,.07)}

.media-section{padding:120px 0;background:#0a0517}.media-feature{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:16/8;border:1px solid rgba(255,255,255,.1);cursor:pointer}.media-feature video{width:100%;height:100%;object-fit:cover;filter:saturate(1.13)}.media-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,3,14,.84),transparent 55%)}.play-circle{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:rgba(8,4,18,.56);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);font-size:1.5rem;transition:.25s ease}.media-feature:hover .play-circle{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,36,173,.45)}.media-copy{position:absolute;z-index:3;left:30px;bottom:25px}.media-copy b{font-size:1.25rem}.media-copy span{display:block;color:#c4b8d2;font-size:.8rem;margin-top:4px}

.final-cta{padding:130px 0 150px;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(255,36,173,.15),transparent 34%),#080417}.final-cta h2{font-size:clamp(4rem,10vw,10rem);line-height:.78;letter-spacing:-.07em;margin:0}.final-cta h2 span{display:block;background:linear-gradient(90deg,var(--kc-yellow),var(--kc-pink),var(--kc-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.final-cta p{color:#c8bad5;font-size:1.1rem;margin:30px auto;max-width:620px}

/* MODAL */
.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.88);display:none;place-items:center;padding:30px;backdrop-filter:blur(16px)}.modal.open{display:grid}.modal-card{width:min(1200px,96vw);position:relative}.modal video{width:100%;border-radius:20px;background:#000;box-shadow:0 30px 100px #000}.modal-close{position:absolute;right:-12px;top:-52px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#17111f;color:#fff;cursor:pointer;font-size:1.2rem}

/* FOOTER */
.footer{padding:46px 0 30px;border-top:1px solid rgba(255,255,255,.07);background:#020308}.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr 1fr;gap:34px}.footer-brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:1.1rem}.footer-brand img{width:42px;height:42px;border-radius:12px}.footer h4{margin:4px 0 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;color:#788499}.footer a{display:block;color:#a7b1c3;margin:9px 0;font-size:.9rem}.footer a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.06);padding-top:24px;margin-top:34px;color:#687487;font-size:.82rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}

@media(max-width:1050px){
  .nav-links{display:none}.mobile-menu{display:grid}.brand{min-width:0}.social-icon.hide-tablet{display:none}
  .hero-grid{grid-template-columns:1fr}.studio-hero{min-height:auto}.hero-grid{padding:90px 0 30px}.hero-brandmark{height:650px;min-height:0;max-width:680px;margin:auto;width:100%}.scroll-cue{display:none}
  .value-grid{grid-template-columns:1fr 1fr}.value-card.big{grid-column:1/-1}.gateway-card{min-height:620px}.team-grid{grid-template-columns:1fr 1fr}.contact-card{grid-template-columns:1fr}
  .kc-intro-grid{grid-template-columns:1fr;gap:25px}.mode-story-grid{grid-template-columns:1fr}.mode-visual{position:relative;top:0;height:58vw;min-height:430px;margin-bottom:20px}.mode-card{min-height:auto;padding:70px 0}.mode-card:first-child{padding-top:40px}.character-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){
  :root{--nav-h:66px}.container{width:min(100% - 28px,1180px)}.nav-inner{gap:10px}.brand span{display:none}.nav-right{gap:4px}.social-icon{display:none}.sound-toggle{display:flex!important}.mobile-menu{display:grid!important}.icon-btn{width:38px;height:38px}
  .display{font-size:clamp(3.3rem,16vw,5.5rem)}.section-title{font-size:clamp(2.3rem,10vw,4rem)}
  .hero-grid{padding-top:54px}.hero-copy .lead{font-size:1rem}.hero-brandmark{height:500px}.brandmark-frame{width:min(460px,92%);border-radius:28px}.brandmark-caption{right:0;bottom:3%}.orbit{display:none}.hero-actions .btn{width:100%}
  .studio-section{padding:84px 0}.section-head{display:block}.section-head .lead{margin-top:18px}.value-grid{grid-template-columns:1fr}.value-card.big{grid-column:auto;min-height:320px}.value-card,.value-card.big{min-height:280px}.value-card h3,.value-card.big h3{margin-top:88px}
  .game-gateway{padding-bottom:80px}.gateway-card{min-height:620px;border-radius:24px}.gateway-content{left:22px;right:22px;bottom:24px}.gateway-label{right:18px;top:18px}.gateway-content .game-logo{width:100%}
  .team-section{padding:80px 0}.team-grid{grid-template-columns:1fr}.team-card{min-height:510px}.contact-band{padding:80px 0}.contact-card{padding:30px;border-radius:24px}
  .game-hero{min-height:700px}.game-hero::after{background:linear-gradient(0deg,#080417 0%,rgba(18,3,31,.65) 48%,rgba(18,3,31,.38))}.game-hero-inner{align-items:flex-end;padding-bottom:90px}.game-hero .cover-logo{width:100%;border-radius:16px}.kc-scroll-mark{display:none}.store-actions .btn{width:100%}
  .kc-intro{padding:85px 0 35px}.mode-story{padding-top:45px}.mode-visual{height:64vw;min-height:340px;border-radius:22px}.mode-card h3{font-size:3rem}.mode-card{padding:55px 0}
  .solo-feature{padding:75px 0}.solo-card{min-height:780px;border-radius:24px}.solo-card::after{background:linear-gradient(0deg,rgba(9,4,22,.98) 0%,rgba(9,4,22,.78) 62%,rgba(9,4,22,.22))}.solo-content{left:22px;right:22px;bottom:22px}.solo-content img.logo{width:260px}.solo-rewards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.reward-visual{height:84px}
  .maps-section,.cosmetics,.characters,.media-section{padding:80px 0}.maps-copy{display:block}.maps-copy .lead{margin-top:18px}.map-card{flex-basis:86vw}.cosmetic-row-label{width:min(100% - 28px,1180px)}.marquee.cosmetic-rail{padding-inline:14px}.cosmetic-card{width:94px;height:94px;flex-basis:94px;border-radius:18px}.cosmetic-card.icon-frame{border-width:3px}.cosmetic-card.icon-frame img{border-radius:14px}.character-grid{grid-template-columns:repeat(3,1fr);gap:8px}.character-card{border-radius:16px}.character-card img{padding:6px}.character-card span{font-size:.7rem;left:8px}
  .media-feature{aspect-ratio:9/13;border-radius:24px}.media-feature video{object-position:center}.play-circle{width:76px;height:76px}.media-copy{left:20px;bottom:18px}
  .final-cta{padding:100px 0}.final-cta h2{font-size:clamp(4rem,22vw,7rem)}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit{animation:none!important}.reveal{opacity:1;transform:none}.mode-image{transition:none}*{transition-duration:.001ms!important}}
.mobile-drawer{position:fixed;top:var(--nav-h);left:14px;right:14px;z-index:99;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(7,8,17,.98);backdrop-filter:blur(18px);padding:10px;box-shadow:0 24px 70px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s ease}.mobile-drawer.open{opacity:1;visibility:visible;transform:none}.mobile-drawer a{display:block;padding:14px 15px;border-radius:13px;color:#dbe3ef;font-weight:850}.mobile-drawer a:hover{background:rgba(255,255,255,.06);color:#fff}@media(min-width:1051px){.mobile-drawer{display:none!important}}

/* =========================================================
   V2.4 QA / RESPONSIVE POLISH
   - keep display typography inside every viewport
   - make Solo Chaos rewards content-driven (never clipped)
   - preserve cosmetic art styling while improving touch safety
   ========================================================= */

/* Large display text must breathe: the previous very tight line-height could
   visually shave the top/bottom of letters on some browser/font renderers. */
.display,
.section-title,
.mode-card h3,
.final-cta h2{
  overflow:visible;
  text-wrap:balance;
}
.hero-copy .display{
  font-size:clamp(3rem,7.3vw,7.3rem);
  line-height:.9;
  letter-spacing:-.055em;
  padding:.06em 0 .12em;
}
.section-title{
  line-height:.99;
  padding:.035em 0 .06em;
}
.mode-card h3{
  line-height:.98;
  padding:.025em 0 .045em;
}

/* Solo Chaos: keep the content in normal flow so changing font size,
   viewport height or reward layout can never push rewards outside the card. */
.solo-card{
  display:flex;
  align-items:flex-end;
  min-height:760px;
}
.solo-content{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  max-width:1040px;
  padding:44px 48px 42px;
}
.solo-rewards{
  width:100%;
  max-width:900px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.reward-card{
  min-width:0;
  overflow:visible;
  padding:10px;
}
.reward-visual{
  width:100%;
  height:118px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.reward-visual img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  padding:3px;
  transform:none;
}
.reward-visual.character-reward img{
  padding:2px;
  transform:none;
}

/* Final CTA stays spectacular without overflowing narrow desktop/tablet widths. */
.final-cta .container{overflow:visible}
.final-cta h2{
  max-width:100%;
  font-size:clamp(3.6rem,8.2vw,8.2rem);
  line-height:.9;
  letter-spacing:-.055em;
  padding:.06em 0 .12em;
}

/* Long CTA/email labels should wrap instead of causing horizontal overflow. */
.contact-actions .btn{max-width:100%;height:auto;min-height:52px;text-align:center;overflow-wrap:anywhere;padding-block:10px}

/* Touch rails: vertical page scrolling remains natural; horizontal dragging still works. */
.map-rail,.cosmetic-rail{touch-action:pan-y pinch-zoom}

/* Tablet / compact laptop QA */
@media(max-width:1050px){
  .hero-copy .display{font-size:clamp(3.1rem,10vw,6.2rem)}
  .solo-content{padding:40px 34px 34px}
  .solo-rewards{max-width:none}
  .final-cta h2{font-size:clamp(3.6rem,10vw,7rem)}
}

/* Phone QA */
@media(max-width:720px){
  .hero-copy .display{
    font-size:clamp(2.9rem,13.4vw,4.7rem);
    line-height:.92;
    letter-spacing:-.048em;
    padding-bottom:.16em;
  }
  .section-title{line-height:1.01}
  .hero-brandmark{height:min(118vw,470px)}
  .brandmark-caption{max-width:88%;padding:11px 13px}
  .brandmark-caption span{font-size:.7rem}.brandmark-caption small{font-size:.64rem}

  .solo-card{
    min-height:0;
    padding-top:300px;
    align-items:flex-end;
  }
  .solo-content{
    padding:22px 18px 24px;
    max-width:none;
  }
  .solo-content p{font-size:.95rem}
  .solo-rewards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .reward-card{padding:8px;border-radius:14px}
  .reward-visual{height:104px}
  .reward-card>span,.reward-card>b{font-size:.68rem}

  .final-cta{padding:90px 0 96px}
  .final-cta h2{
    font-size:clamp(3rem,16vw,5.3rem);
    line-height:.92;
    letter-spacing:-.05em;
    padding:.08em 0 .14em;
  }
  .final-cta p{font-size:1rem;margin:22px auto}
  .final-cta .store-actions{gap:9px}

  .footer-grid{gap:24px 18px}
  .footer-bottom{font-size:.76rem}
  .modal{padding:16px}.modal-card{width:100%}.modal-close{right:0;top:-48px}
}

/* Very small phones (320–390px) */
@media(max-width:390px){
  .container{width:calc(100% - 24px)}
  .hero-copy .display{font-size:clamp(2.7rem,13vw,3.5rem)}
  .eyebrow{font-size:.68rem;letter-spacing:.13em}
  .pill{font-size:.7rem;padding:8px 10px}
  .sound-toggle{padding:0 9px}.sound-toggle [data-sound-label]{font-size:.68rem}
  .mode-card h3{font-size:clamp(2.15rem,12vw,2.8rem)}
  .solo-card{padding-top:260px}
  .reward-visual{height:94px}
  .cosmetic-card{width:88px;height:88px;flex-basis:88px}
  .character-grid{grid-template-columns:repeat(2,1fr)}
  .final-cta h2{font-size:clamp(2.75rem,15.2vw,4.2rem)}
  .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
}

/* Landscape phones / short laptop windows: avoid hero content disappearing below viewport. */
@media(max-height:700px) and (min-width:721px){
  .studio-hero{min-height:760px}
  .game-hero{height:auto;min-height:760px}
  .game-hero-inner{min-height:760px;padding:80px 0 54px}
}

/* Mobile drawer includes the same social destinations that live in the desktop header. */
.mobile-socials{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border-top:1px solid rgba(255,255,255,.07);padding:10px 5px 3px;margin-top:4px}
.mobile-socials a{display:grid;place-items:center;padding:10px!important;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);font-size:.72rem}

/* =========================================================
   V2.5 FINAL LAYOUT SAFETY PASS
   Goal: no display-title clipping at any viewport, fully visible
   Solo Chaos rewards, and deterministic continuous cosmetics motion.
   ========================================================= */

/* Size the studio headline from its OWN column instead of the whole viewport.
   This prevents "WE BUILD" from growing wider than the left grid column on
   desktop/laptop widths and gives mobile a real safety margin. */
.hero-copy{
  container-type:inline-size;
  min-width:0;
}
.hero-copy .display{
  max-width:100%;
  font-size:clamp(2.85rem,14cqw,6.5rem);
  line-height:.96;
  letter-spacing:-.045em;
  padding:.08em .12em .16em 0;
  overflow:visible;
  overflow-wrap:normal;
  word-break:normal;
}
@supports not (font-size:1cqw){
  .hero-copy .display{font-size:clamp(2.85rem,6.1vw,6.5rem)}
}

/* Large headings should never be shaved by aggressive line-height. */
.section-title,
.value-card h3,
.mode-card h3{
  line-height:1.01;
  padding-bottom:.07em;
}
.value-card h3,.value-card.big h3{
  font-size:clamp(1.55rem,2.25vw,2.35rem);
}

/* Solo Chaos rewards: full art, no crop, and enough vertical room for every
   milestone on desktop, tablet and phone. */
.solo-content{max-width:1100px}
.solo-rewards{
  max-width:980px;
  gap:12px;
  align-items:stretch;
}
.reward-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:auto;
  overflow:visible;
  padding:11px;
}
.reward-visual{
  width:100%;
  height:auto;
  min-height:142px;
  aspect-ratio:1.28 / 1;
  overflow:hidden;
  flex:none;
}
.reward-visual img,
.reward-visual.character-reward img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  padding:7px;
  transform:none;
}
.reward-icon .reward-visual img{padding:0}
.reward-card>b{margin-top:8px}

/* Cosmetics: the card design stays unchanged; only the transport layer changes.
   Each row is now a clipped viewport containing a continuously animated track. */
.marquee.cosmetic-rail{
  display:block;
  width:100%;
  overflow:hidden;
  padding:10px 0 22px;
  cursor:default;
  touch-action:pan-y pinch-zoom;
}
.marquee-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:14px;
  padding-inline:max(21px,calc((100vw - 1180px)/2));
  will-change:transform;
  transform:translate3d(0,0,0);
}
.marquee-track .cosmetic-card{flex:none}
.marquee.cosmetic-rail.dragging{cursor:default}

/* Final CTA uses its own container width, so the second line cannot run beyond
   the page at laptop/tablet breakpoints. */
.final-cta .container{
  container-type:inline-size;
  overflow:visible;
}
.final-cta h2{
  max-width:100%;
  font-size:clamp(3rem,12cqw,7.15rem);
  line-height:.96;
  letter-spacing:-.045em;
  padding:.08em .08em .16em;
  overflow:visible;
  overflow-wrap:normal;
  word-break:normal;
}
@supports not (font-size:1cqw){
  .final-cta h2{font-size:clamp(3rem,7vw,7.15rem)}
}

/* Compact laptop / tablet */
@media(max-width:1050px){
  .hero-copy .display{font-size:clamp(2.85rem,13cqw,5.5rem)}
  .reward-visual{min-height:132px}
  .final-cta h2{font-size:clamp(3rem,11.5cqw,6rem)}
}

/* Phones */
@media(max-width:720px){
  .hero-copy .display{
    font-size:clamp(2.65rem,12.1cqw,4.25rem);
    line-height:.98;
    letter-spacing:-.04em;
    padding-right:.16em;
  }
  .value-card h3,.value-card.big h3{font-size:clamp(1.65rem,8vw,2.15rem)}
  .solo-rewards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reward-visual{min-height:120px;aspect-ratio:1.22 / 1}
  .marquee-track{padding-inline:14px;gap:12px}
  .final-cta h2{
    font-size:clamp(2.8rem,12.5cqw,4.8rem);
    line-height:.98;
    padding-inline:.1em;
  }
}

@media(max-width:390px){
  .hero-copy .display{font-size:clamp(2.55rem,12cqw,3.45rem)}
  .reward-visual{min-height:108px}
  .final-cta h2{font-size:clamp(2.65rem,12.2cqw,4rem)}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track{transform:none!important}
}

/* Reward art is natively square. Preserve the complete source composition
   instead of squeezing it into a shallow landscape slot. */
.reward-visual{
  aspect-ratio:1 / 1;
  min-height:0;
}
@media(max-width:720px){.reward-visual{aspect-ratio:1 / 1;min-height:0}}
@media(max-width:390px){.reward-visual{min-height:0}}


/* =========================================================
   V2.6 DISPLAY GLYPH SAFETY
   The gradient headline used one wrapping inline span. With transparent text,
   background-clip and negative letter-spacing, Chromium can clip the ink of a
   line-ending glyph (the O in "TO") at specific widths. The hero now uses
   explicit block lines with a small paint-safe gutter, so every glyph remains
   fully painted on every line and the intended composition is deterministic.
   ========================================================= */
.hero-display{
  display:block;
  width:100%;
  max-width:100%;
}
.hero-display .display-line{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  padding-right:.16em;
  overflow:visible;
}
.hero-display .display-line.gradient{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Give every transparent-gradient display line a paint gutter so final glyphs
   can never lose their right edge because of negative tracking. */
.display .gradient,
.final-cta h2 span{
  padding-right:.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* The final CTA already uses explicit lines; make the gradient line an
   intrinsic block with enough paint room for the final period/S glyph. */
.final-cta h2 span{
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}