/* ===== ODD STUDIOS — "front end of a game" design system ===== */
:root{
  --ink:#08090c; --bg:#0d0f14; --panel:#141821; --panel-2:#1b2030; --line:#2a3142;
  --text:#eef1f7; --mute:#8f98ad; --dim:#5b6479;
  --a:#c8ff2e;      /* studio accent: odd lime */
  --b:#ff3d7f;      /* studio accent 2: arcade pink */
  --c:#41e0ff;
  --chamfer:14px;
  --f-display:'Unbounded',system-ui,sans-serif;
  --f-hud:'Chakra Petch',ui-monospace,monospace;
  --f-body:'Barlow',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink);overflow-x:clip}
body{font-family:var(--f-body);font-size:17px;line-height:1.55;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--a);color:var(--ink)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px}

/* background texture: studs grid + grain, a nod to the brick */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(circle at 50% 50%, rgba(255,255,255,.035) 1.5px, transparent 2px) 0 0/28px 28px,
   radial-gradient(1200px 600px at 80% -10%, rgba(200,255,46,.07), transparent 60%),
   radial-gradient(900px 500px at -10% 30%, rgba(255,61,127,.06), transparent 60%);}
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.hud{font-family:var(--f-hud);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600}
.display{font-family:var(--f-display);font-weight:800;line-height:.95;letter-spacing:-.02em}
.mute{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* chamfered "material" panels */
.cham{clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);position:relative}

/* ===== LOGO SLOTS (replace with real logo) ===== */
.logo-slot{display:inline-grid;place-items:center;border:2px dashed currentColor;color:var(--a);font-family:var(--f-hud);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.9;position:relative;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(200,255,46,.07) 6px 12px)}
.logo-slot::after{content:attr(data-slot);position:absolute;bottom:-1.5em;left:0;font-size:.55rem;color:var(--dim);white-space:nowrap;letter-spacing:.1em}
.logo-slot.has-logo{border:0;background:none}
.logo-slot.has-logo::after{display:none}
.logo-slot img{width:100%;height:100%;object-fit:contain}

/* ===== BUTTONS ===== */
.btn{--bc:var(--a);display:inline-flex;align-items:center;gap:.7em;padding:1em 1.6em;font-family:var(--f-hud);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--ink);background:var(--bc);position:relative;transition:transform .25s var(--spring),box-shadow .25s;box-shadow:0 6px 0 color-mix(in srgb,var(--bc) 45%,#000),0 14px 30px -10px color-mix(in srgb,var(--bc) 60%,transparent);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--bc) 45%,#000)}
.btn .k{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border:1.5px solid currentColor;border-radius:50%;font-size:.75em}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--a);color:var(--a)}

/* ===== NAV ===== */
.xp{position:fixed;top:0;left:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--a),var(--c));width:100%;transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px var(--a)}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,transform .4s var(--ease)}
.nav.scrolled{background:rgba(8,9,12,.78);background-color:rgba(8,9,12,.94);border-bottom:1px solid var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:76px}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand .logo-slot{width:44px;height:44px}
.nav .brand b{font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.nav .brand b span{color:var(--a)}
.nav ul{display:flex;gap:6px;list-style:none;margin-left:auto}
.nav ul a{display:block;padding:.6em 1em;font-family:var(--f-hud);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:600;color:var(--mute);position:relative;transition:color .2s}
.nav ul a::before{content:"▸";position:absolute;left:0;top:50%;transform:translate(-4px,-50%);opacity:0;color:var(--a);transition:.2s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--text)}
.nav ul a:hover::before,.nav ul a[aria-current]::before{opacity:1;transform:translate(2px,-50%)}
.nav .cta{padding:.75em 1.2em;font-size:.72rem}
.nav .sfx{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);color:var(--mute);font-size:.9rem}
.nav .sfx[aria-pressed=true]{color:var(--a);border-color:var(--a)}
.burger{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--line)}
.burger i{display:block;width:18px;height:2px;background:var(--text);margin:4px auto;transition:.3s}
@media (max-width:960px){
  .nav ul{position:fixed;inset:76px 0 auto 0;flex-direction:column;background:var(--ink);padding:20px 24px 30px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .4s var(--ease);z-index:-1}
  .nav.open ul{transform:none}
  .nav ul a{font-size:1rem;padding:.9em 0}
  .burger{display:block}
  .nav .cta,.nav .sfx{display:none}
}

/* ===== BOOT / LOADING SCREEN ===== */
.boot{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.boot.done{opacity:0;visibility:hidden}
.boot .inner{text-align:center;width:min(420px,80vw)}
.boot .logo-slot{width:120px;height:120px;margin:0 auto 34px}
.boot .bar{height:8px;background:var(--panel-2);margin:22px 0 12px;position:relative;overflow:hidden}
.boot .bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:repeating-linear-gradient(90deg,var(--a) 0 14px,transparent 14px 18px)}
.boot .tip{color:var(--mute);font-size:.9rem;min-height:1.5em}
.boot .press{margin-top:28px;opacity:0;animation:blink 1s steps(2) infinite}
.boot.ready .press{opacity:1}
@keyframes blink{50%{opacity:.15}}

/* ===== SECTIONS ===== */
section{position:relative}
.sec{padding:140px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--a);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.h2{font-size:clamp(2.2rem,5vw,4.2rem)}
.h2 em{font-style:normal;color:var(--a)}
.lead{font-size:1.15rem;color:var(--mute);max-width:56ch}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ===== HERO (home) ===== */
.hero{min-height:100svh;display:grid;align-items:center;padding:120px 0 80px;overflow:hidden;isolation:isolate}
.hero .stage{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero .stage .shot{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.08);transition:opacity 1s var(--ease),transform 6s linear}
.hero .stage .shot.on{opacity:1;visibility:visible;transform:scale(1)}
.hero .stage::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--ink) 0%,rgba(8,9,12,.85) 35%,rgba(8,9,12,.2) 70%,rgba(8,9,12,.55) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
.hero h1{font-size:clamp(2.8rem,6.2vw,6.4rem);text-transform:uppercase}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.loaded .hero h1 .line span{transform:none}
.hero h1 .line:nth-child(2) span{transition-delay:.08s}
.hero h1 .line:nth-child(3) span{transition-delay:.16s}
.hero h1 .odd{color:var(--a);font-style:italic;display:inline-block}
.hero h1 .outline{color:var(--mute)}
.hero h1 .outline i{font-style:normal;color:var(--b)}
.hero .sub{font-size:1.2rem;color:#c9cfdc;max-width:46ch;margin:28px 0 38px}
.hero .ctas{display:flex;gap:18px;flex-wrap:wrap}
.hero .logo-hero{display:grid;width:96px;height:96px;margin-bottom:34px}

/* game select dock */
.select{align-self:end}
.select .label{display:flex;justify-content:space-between;color:var(--mute);margin-bottom:12px}
.select ol{list-style:none;display:grid;gap:8px}
.select li button{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;text-align:left;padding:12px 16px;background:rgba(16,19,26,.9);border:1px solid var(--line);transition:.3s var(--ease);position:relative;overflow:hidden}
.select li button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ga);transform:scaleY(0);transition:.3s var(--ease)}
.select li button .n{font-family:var(--f-hud);color:var(--dim);font-size:.8rem}
.select li button .t{font-family:var(--f-display);font-weight:700;font-size:1rem}
.select li button .g{font-family:var(--f-hud);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.select li button .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--ga);width:100%;transform:scaleX(0);transform-origin:left}
.select li button[aria-selected=true]{background:rgba(27,32,48,.9);border-color:color-mix(in srgb,var(--ga) 50%,var(--line));transform:translateX(-10px)}
.select li button[aria-selected=true]::before{transform:none}
.select li button[aria-selected=true] .n{color:var(--ga)}
.select .hint{margin-top:14px;color:var(--dim);display:flex;gap:10px;align-items:center}
.kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--line);border-bottom-width:3px;font-family:var(--f-hud);font-size:.7rem;color:var(--mute)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.select li button[aria-selected=true]{transform:none}}

/* ===== SHOT (screenshot w/ graceful placeholder) ===== */
.shot{position:relative;overflow:hidden;background:var(--ph,#111)}
.shot img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.shot .ph{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(120% 90% at 70% 20%, color-mix(in srgb,var(--ga,#c8ff2e) 35%,transparent), transparent 55%),
  radial-gradient(90% 70% at 10% 100%, color-mix(in srgb,var(--gb,#ff3d7f) 30%,transparent), transparent 60%),
  linear-gradient(160deg,var(--gbg,#151821),var(--gink,#07080b))}
.shot .ph::before{content:"";position:absolute;inset:0;background:
  linear-gradient(transparent 0 calc(100% - 1px),rgba(255,255,255,.06) 0) 0 0/100% 48px,
  linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(255,255,255,.06) 0) 0 0/48px 100%;
  mask:linear-gradient(180deg,transparent,#000 60%);transform:perspective(500px) rotateX(55deg) scale(2.2);transform-origin:50% 100%}
.shot .ph span{position:relative;font-family:var(--f-hud);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);border:1px dashed rgba(255,255,255,.25);padding:.5em 1em}
.shot .ph b{position:absolute;font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,9vw,9rem);color:rgba(255,255,255,.06);text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap}
.shot.loaded .ph{display:none}

/* ===== MARQUEE ===== */
.marquee{border-block:1px solid var(--line);overflow:hidden;background:var(--ink);padding:18px 0}
.marquee .track{display:flex;gap:48px;width:max-content;animation:mq 40s linear infinite}
.marquee span{font-family:var(--f-display);font-weight:800;font-size:1.6rem;text-transform:uppercase;white-space:nowrap;display:flex;gap:48px;align-items:center}
.marquee span::after{content:"✦";color:var(--a);font-size:1rem}
.marquee span:nth-child(even){color:var(--dim)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== STATS (scoreboard) ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel)}
.stats > div{padding:36px 30px;border-right:1px solid var(--line);position:relative}
.stats > div:last-child{border-right:0}
.stats .v{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;color:var(--text)}
.stats .v small{color:var(--a);font-size:.55em}
.stats .l{margin-top:12px;color:var(--mute)}
.stats > div::before{content:attr(data-i);position:absolute;top:14px;right:16px;font-family:var(--f-hud);font-size:.7rem;color:var(--dim)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}.stats > div:nth-child(2){border-right:0}.stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ===== GAME CARDS ===== */
.games-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.gcard{grid-column:span 4;position:relative;display:block;background:var(--panel);border:1px solid var(--line);transition:transform .5s var(--ease),border-color .3s;transform-style:preserve-3d;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.gcard.wide{grid-column:span 8}

.gcard .shot{height:clamp(220px,26vw,380px)}
.gcard .shot img,.gcard .shot .ph{transition:transform 1s var(--ease)}
.gcard:hover{border-color:var(--ga)}
.gcard:hover .shot img,.gcard:hover .shot .ph{transform:scale(1.06)}
.gcard .meta{padding:22px 24px 26px;display:grid;gap:6px}
.gcard .meta .row{display:flex;justify-content:space-between;align-items:center;color:var(--mute)}
.gcard .meta h3{font-family:var(--f-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em}
.gcard .meta p{color:var(--mute);font-size:.98rem}
.gcard .badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--ga);color:var(--ink);padding:.35em .8em;font-family:var(--f-hud);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.gcard .go{position:absolute;right:20px;bottom:24px;width:46px;height:46px;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--text);transition:.3s var(--ease)}
.gcard:hover .go{background:var(--ga);border-color:var(--ga);color:var(--ink);transform:rotate(-45deg)}
.gcard .glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 40%);opacity:0;transition:opacity .3s}
.gcard:hover .glare{opacity:1}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-family:var(--f-hud);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.3em .7em;border:1px solid var(--line);color:var(--mute)}
@media (max-width:960px){.gcard,.gcard.wide{grid-column:span 12}}
@media (min-width:961px) and (max-width:1100px){.gcard{grid-column:span 6}.gcard.wide{grid-column:span 12}}

/* filter chips */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:.65em 1.1em;border:1px solid var(--line);font-family:var(--f-hud);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:.2s}
.chip:hover{color:var(--text);border-color:var(--mute)}
.chip[aria-pressed=true]{background:var(--a);border-color:var(--a);color:var(--ink)}
.gcard.out{display:none}

/* ===== SERVICES: skill tree / loadout ===== */
.loadout{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.skill{padding:28px 24px 26px;background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .4s var(--spring),border-color .3s}
.skill:hover{transform:translateY(-6px);border-color:var(--a)}
.skill .ic{width:54px;height:54px;display:grid;place-items:center;font-family:var(--f-hud);font-weight:700;font-size:1.1rem;color:var(--a);border:1.5px solid color-mix(in srgb,var(--a) 50%,transparent);background:color-mix(in srgb,var(--a) 8%,transparent);margin-bottom:22px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.skill .lv{position:absolute;top:22px;right:22px;color:var(--dim)}
.skill h3{font-family:var(--f-display);font-weight:700;font-size:1.15rem;margin-bottom:10px;line-height:1.15}
.skill p{color:var(--mute);font-size:.95rem}
.skill ul{list-style:none;margin-top:18px;display:grid;gap:6px}
.skill li{font-family:var(--f-hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#b9c1d3;display:flex;gap:8px}
.skill li::before{content:"+";color:var(--a)}
.skill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a),var(--c));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.skill:hover::after{transform:none}
.skill.featured{background:linear-gradient(135deg,color-mix(in srgb,var(--a) 14%,var(--panel)),var(--panel) 60%)}
@media (max-width:1100px){.loadout{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.loadout{grid-template-columns:1fr}}

/* ===== PROCESS: quest log ===== */
.quests{display:grid;gap:0;border-top:1px solid var(--line)}
.quest{display:grid;grid-template-columns:120px 1fr 1.2fr 140px;gap:30px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:background .3s,padding .3s var(--ease)}
.quest:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 6%,transparent),transparent);padding-left:18px}
.quest .n{font-family:var(--f-display);font-weight:800;font-size:2.6rem;color:var(--panel-2);transition:color .3s}
.quest:hover .n{color:var(--a)}
.quest h3{font-family:var(--f-display);font-weight:700;font-size:1.4rem}
.quest p{color:var(--mute)}
.quest .reward{justify-self:end;color:var(--a);text-align:right}
@media (max-width:860px){.quest{grid-template-columns:60px 1fr;gap:10px 18px}.quest p,.quest .reward{grid-column:2;justify-self:start;text-align:left}.quest .n{font-size:1.8rem}}

/* ===== CTA BAND ===== */
.cta-band{margin:0 auto;position:relative;overflow:hidden;padding:90px 60px;background:var(--a);color:var(--ink)}
.cta-band h2{font-size:clamp(2.4rem,6vw,5.4rem);text-transform:uppercase;max-width:14ch}
.cta-band p{max-width:44ch;font-size:1.15rem;margin:22px 0 34px;font-weight:500}
.cta-band .btn{--bc:var(--ink);color:var(--a)}
.cta-band .big{position:absolute;right:-40px;bottom:-70px;font-family:var(--f-display);font-weight:800;font-size:22rem;line-height:1;color:rgba(0,0,0,.08);pointer-events:none}
@media (max-width:700px){.cta-band{padding:60px 28px}}

/* ===== FOOTER ===== */
.foot{border-top:1px solid var(--line);padding:70px 0 40px;margin-top:140px;background:var(--ink);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot .logo-slot{width:64px;height:64px;margin-bottom:20px}
.foot h4{color:var(--dim);margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:10px}
.foot ul a{color:var(--mute);transition:color .2s}
.foot ul a:hover{color:var(--a)}
.foot .base{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);flex-wrap:wrap}
.foot .giant{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,8.6vw,8.6rem);line-height:.8;letter-spacing:-.05em;text-transform:uppercase;margin-top:70px;color:var(--panel);user-select:none;white-space:nowrap}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===== PAGE HEAD (inner pages) ===== */
.phead{padding:180px 0 70px;position:relative;overflow:hidden}
.phead h1{font-size:clamp(3rem,9vw,8rem);text-transform:uppercase}
.phead h1 em{font-style:normal;color:var(--a)}
.phead .lead{margin-top:26px}
.crumbs{display:flex;gap:10px;color:var(--dim);margin-bottom:28px}
.crumbs a:hover{color:var(--a)}

/* ===== GAME CASE STUDY ===== */
.g-hero{min-height:92svh;display:grid;align-items:end;padding:150px 0 70px;position:relative;isolation:isolate;overflow:hidden}
.g-hero > .shot{position:absolute;inset:0;z-index:-2}
.g-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 2%,rgba(8,9,12,.4) 50%,rgba(8,9,12,.7)),linear-gradient(90deg,rgba(8,9,12,.85),transparent 70%)}
.g-hero h1{font-size:clamp(3.4rem,11vw,10rem);text-transform:uppercase;line-height:.85}
.g-hero .tl{font-size:clamp(1.2rem,2.2vw,1.7rem);margin:20px 0 30px;max-width:30ch;color:#dfe4ee}
.g-hero .kanji{position:absolute;right:4%;top:18%;writing-mode:vertical-rl;font-size:clamp(3rem,9vw,8rem);font-weight:900;color:var(--ga);opacity:.85;letter-spacing:.1em;text-shadow:0 0 40px color-mix(in srgb,var(--ga) 50%,transparent);z-index:-1}
.g-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:-1px}
.g-facts div{background:var(--panel);padding:26px 24px}
.g-facts b{display:block;font-family:var(--f-display);font-weight:800;font-size:2.2rem;color:var(--ga);line-height:1}
.g-facts span{color:var(--mute)}
@media (max-width:760px){.g-facts{grid-template-columns:repeat(2,1fr)}}
.g-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.g-intro p.big{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.35;font-weight:500}
.loop{list-style:none;display:grid;gap:0;counter-reset:l}
.loop li{counter-increment:l;display:flex;gap:18px;align-items:center;padding:16px 0;border-bottom:1px dashed var(--line);font-weight:500}
.loop li::before{content:counter(l,decimal-leading-zero);font-family:var(--f-hud);font-size:.8rem;color:var(--ink);background:var(--ga);min-width:34px;height:34px;display:grid;place-items:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.loop li:last-child::after{content:"↻ repeat";margin-left:auto;font-family:var(--f-hud);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ga)}
@media (max-width:860px){.g-intro{grid-template-columns:1fr;gap:40px}}
.sys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sys article{padding:28px;background:var(--panel);border:1px solid var(--line);position:relative;transition:border-color .3s,transform .4s var(--spring)}
.sys article:hover{border-color:var(--ga);transform:translateY(-4px)}
.sys article .i{font-family:var(--f-hud);color:var(--ga);font-size:.75rem;letter-spacing:.14em}
.sys article h3{font-family:var(--f-display);font-size:1.15rem;margin:14px 0 10px;line-height:1.2}
.sys article p{color:var(--mute);font-size:.96rem}
@media (max-width:960px){.sys{grid-template-columns:1fr 1fr}}@media (max-width:620px){.sys{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gallery .shot{aspect-ratio:16/9;cursor:zoom-in;border:1px solid var(--line)}
.gallery .shot:nth-child(1){grid-column:span 6;aspect-ratio:21/9}
.gallery .shot:nth-child(n+2){grid-column:span 2}
.gallery.n3 .shot:nth-child(n+2){grid-column:span 3}
.gallery.n1 .shot:nth-child(1){aspect-ratio:2.27/1}
.gallery.n2 .shot:nth-child(n+2){grid-column:span 6;aspect-ratio:21/9}
@media (max-width:760px){.gallery .shot:nth-child(n+2){grid-column:span 3}}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(5,6,8,.92);display:grid;place-items:center;padding:4vw;opacity:0;visibility:hidden;transition:.3s}
.lightbox.on{opacity:1;visibility:visible}
.lightbox .shot{width:min(1400px,100%);aspect-ratio:16/9}
.lightbox .x{position:absolute;top:24px;right:24px}
.next-game{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next-game h3{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,7vw,6rem);text-transform:uppercase;line-height:.9;transition:color .3s}
.next-game:hover h3{color:var(--ga)}

/* ===== IN-GAME UI SHOWCASES (pure HTML/CSS recreations) ===== */
.ui-stage{position:relative;padding:60px;background:
  radial-gradient(80% 80% at 50% 0%,color-mix(in srgb,var(--ga) 18%,transparent),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),var(--gink,#07080b);
  border:1px solid var(--line);overflow:hidden;min-height:420px;display:grid;place-items:center}
.ui-stage .cap{position:absolute;left:20px;top:16px;color:var(--dim)}
.ui-stage .cap2{position:absolute;right:20px;top:16px;color:var(--dim)}
@media (max-width:700px){.ui-stage{padding:50px 14px 24px}}

/* Kaiju upgrade shop */
.k-shop{width:min(720px,100%);font-family:var(--f-hud);background:#11141a;border:2px solid #2b3240;border-radius:14px;padding:22px;box-shadow:0 30px 60px -20px #000}
.k-shop h4{font-family:var(--f-display);font-size:1.4rem;color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.k-shop h4 span{font-family:var(--f-hud);font-size:1rem;color:var(--ga)}
.k-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.k-up{background:#1a1f28;border:1.5px solid #2b3240;border-radius:10px;padding:14px;text-align:left;color:#fff;transition:.2s}
.k-up b{display:block;font-size:.8rem;letter-spacing:.06em}
.k-up .pips{display:flex;gap:3px;margin:10px 0}
.k-up .pips i{flex:1;height:6px;border-radius:2px;background:#2b3240}
.k-up .pips i.on{background:var(--ga);box-shadow:0 0 8px var(--ga)}
.k-up .cost{font-size:.78rem;color:var(--ga)}
.k-up:hover{border-color:var(--ga);transform:translateY(-2px)}
.k-up.max .cost{color:#8b93a5}
.k-up.bump{animation:bump .35s var(--spring)}
@keyframes bump{40%{transform:scale(1.06)}}
@media (max-width:620px){.k-grid{grid-template-columns:1fr 1fr}}

/* Garukan boss roster */
.g-boss{width:min(760px,100%);font-family:var(--f-hud);color:#fff}
.g-boss .banner{font-family:var(--f-display);font-size:clamp(1.4rem,4vw,2.6rem);text-align:center;color:var(--gb);text-shadow:3px 3px 0 #000,0 0 30px color-mix(in srgb,var(--ga) 60%,transparent);margin-bottom:18px;letter-spacing:-.01em;animation:shake 2.4s infinite}
@keyframes shake{0%,92%,100%{transform:none}94%{transform:translate(3px,-2px) rotate(-1deg)}96%{transform:translate(-3px,2px)}98%{transform:translate(2px,1px)}}
.g-boss .hp{background:#000;border:2px solid #000;outline:2px solid var(--ga);padding:3px;margin:0 auto 26px;width:min(520px,100%)}
.g-boss .hp .nm{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:4px;padding:0 4px}
.g-boss .hp .bar{height:16px;background:#2a0b10;position:relative}
.g-boss .hp .bar i{position:absolute;inset:0;background:linear-gradient(180deg,#ff5a66,var(--ga));transform-origin:left;transition:transform .4s var(--ease)}
.g-boss .hp .bar s{position:absolute;inset:0;background:#fff;transform-origin:left;transition:transform .9s .3s var(--ease);z-index:0;opacity:.5}
.g-boss .roster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g-boss .roster button{background:#1a0d10;border:2px solid #3a1a20;padding:14px 10px;text-align:left;color:#fff;transition:.2s;position:relative}
.g-boss .roster button b{display:block;font-size:.95rem;font-family:var(--f-display);line-height:1.1}
.g-boss .roster button small{color:var(--gb);font-size:.75rem}
.g-boss .roster button[aria-pressed=true]{border-color:var(--ga);background:#2a0b10;transform:translateY(-4px)}
.g-boss .weapons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.g-boss .weapons span{border:1px solid #3a1a20;padding:.35em .8em;font-size:.72rem;letter-spacing:.1em;color:#d9b9be}
.g-boss .hit{position:absolute;font-family:var(--f-display);font-size:1.8rem;color:var(--gb);text-shadow:2px 2px 0 #000;pointer-events:none;animation:pop .8s var(--ease) forwards}
@keyframes pop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:translateY(-50px) scale(1)}}
@media (max-width:620px){.g-boss .roster{grid-template-columns:1fr 1fr}}

/* Wing Suit results */
.w-res{width:min(560px,100%);font-family:var(--f-hud);background:linear-gradient(180deg,rgba(10,30,50,.92),rgba(6,16,26,.96));border:2px solid rgba(92,225,255,.35);border-radius:18px;padding:28px;color:#fff;box-shadow:0 0 60px -10px rgba(92,225,255,.35)}
.w-res .top{display:flex;justify-content:space-between;align-items:baseline}
.w-res h4{font-family:var(--f-display);font-size:2rem;color:var(--gb)}
.w-res .rows{margin:20px 0;display:grid;gap:8px}
.w-res .rows div{display:flex;justify-content:space-between;background:rgba(255,255,255,.04);padding:12px 14px;border-radius:8px;letter-spacing:.08em}
.w-res .rows b{color:var(--gb)}
.w-res .xpbar{height:12px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.w-res .xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ga),#a8f4ff);transition:width 1.6s var(--ease)}
.w-res .xpl{display:flex;justify-content:space-between;margin-top:8px;font-size:.78rem;color:#9fc6d6}
.w-res .pops{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.w-res .pops span{font-size:.75rem;padding:.4em .7em;border-radius:6px;background:rgba(92,225,255,.12);color:var(--ga)}
.w-res .acts{display:flex;gap:10px;margin-top:22px}
.w-res .acts button{flex:1;padding:12px;border-radius:10px;font-weight:700;letter-spacing:.1em;background:var(--gb);color:#1a1100;box-shadow:0 4px 0 #a86a10}
.w-res .acts button.alt{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.4)}

/* Pirate trade offer */
.p-trade{width:min(620px,100%);font-family:var(--f-hud);color:#f4e6c4;background:linear-gradient(180deg,#2a1d12,#1a110a);border:3px solid #6b4a24;border-radius:12px;padding:24px;box-shadow:inset 0 0 0 2px #3a2814,0 30px 60px -20px #000}
.p-trade h4{font-family:var(--f-display);text-align:center;color:var(--gb);font-size:1.4rem;margin-bottom:6px}
.p-trade .who{text-align:center;font-size:.8rem;color:#c8a978;margin-bottom:18px}
.p-trade .cols{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.p-trade .side{background:rgba(0,0,0,.3);border:1.5px dashed #6b4a24;border-radius:10px;padding:14px;min-height:150px}
.p-trade .side h5{font-size:.7rem;letter-spacing:.2em;color:#c8a978;margin-bottom:10px}
.p-trade .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p-trade .slot{aspect-ratio:1;background:rgba(255,255,255,.05);border-radius:6px;display:grid;place-items:center;font-size:1.3rem;cursor:pointer;transition:.2s}
.p-trade .slot:hover{background:rgba(233,185,73,.2)}
.p-trade .arrow{font-size:1.6rem;color:var(--gb)}
.p-trade .sack{margin-top:18px;display:flex;align-items:center;gap:12px;font-size:.8rem}
.p-trade .sack .bar{flex:1;height:10px;background:rgba(0,0,0,.4);border-radius:5px;overflow:hidden}
.p-trade .sack .bar i{display:block;height:100%;background:var(--gb);transition:width .4s var(--ease)}
.p-trade .acts{display:flex;gap:10px;margin-top:18px}
.p-trade .acts button{flex:1;padding:12px;border-radius:8px;font-weight:700;letter-spacing:.1em;background:var(--ga);color:#04201a;box-shadow:0 4px 0 #1f7a68}
.p-trade .acts button.alt{background:#b33a2a;color:#fff;box-shadow:0 4px 0 #6a1d14}
.p-trade .gold{color:var(--gb)}

/* Dino hatchery */
.d-hatch{width:min(760px,100%);font-family:var(--f-hud);color:#fff}
.d-hatch .tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.d-hatch .tabs button{padding:.6em 1em;border-radius:999px;background:rgba(255,255,255,.06);font-size:.72rem;letter-spacing:.12em}
.d-hatch .tabs button[aria-pressed=true]{background:var(--ga);color:#06210f}
.d-hatch .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.d-egg{background:linear-gradient(180deg,#183322,#0f2017);border:2px solid #24452f;border-radius:16px;padding:18px;text-align:center;cursor:pointer;transition:.25s var(--spring)}
.d-egg:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--ga)}
.d-egg .egg{width:70px;height:90px;margin:4px auto 12px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;background:var(--eg);box-shadow:inset -8px -10px 0 rgba(0,0,0,.18),inset 6px 6px 0 rgba(255,255,255,.25)}
.d-egg.wob .egg{animation:wob .5s ease-in-out 3}
@keyframes wob{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.d-egg b{display:block;font-family:var(--f-display);font-size:1rem}
.d-egg small{color:var(--gb)}
.d-hatch .result{margin-top:16px;text-align:center;min-height:2.6em;font-size:.95rem}
.d-hatch .result b{color:var(--ga);font-family:var(--f-display)}
.d-hatch .roster{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.d-hatch .roster span{font-size:.7rem;padding:.35em .7em;border:1px solid #24452f;border-radius:999px;color:#bfe7c9}

/* Guli Danda distance */
.gd{width:min(820px,100%);font-family:var(--f-hud);color:#fff}
.gd .field{position:relative;height:200px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#f3b47a 0%,#e78a52 40%,#6d4a2e 41%,#4f3521 100%)}
.gd .field .mk{position:absolute;bottom:0;top:41%;border-left:2px dashed rgba(255,255,255,.4)}
.gd .field .mk span{position:absolute;top:8px;left:6px;font-size:.75rem;background:rgba(0,0,0,.4);padding:.2em .5em;border-radius:4px}
.gd .guli{position:absolute;left:3%;top:85%;margin:-4px 0 0 -11px;width:22px;height:8px;background:#f1d29a;border-radius:4px;box-shadow:0 0 12px #fff}
.gd .trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gd .controls{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.gd .power{flex:1;min-width:200px;height:14px;background:rgba(255,255,255,.1);border-radius:7px;overflow:hidden}
.gd .power i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ga),var(--gb))}
.gd button.hitbtn{padding:12px 26px;border-radius:10px;background:var(--ga);color:#2a1300;font-weight:700;letter-spacing:.12em;box-shadow:0 4px 0 #a5571c}
.gd .read{font-family:var(--f-display);font-size:1.6rem;min-width:110px;text-align:right;color:var(--ga)}
.gd .callout{text-align:center;font-family:var(--f-display);font-size:1.4rem;min-height:1.6em;margin-top:8px;color:var(--gb)}

/* ===== ABOUT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:40px}}
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stack div{padding:20px;background:var(--panel);border:1px solid var(--line)}
.stack b{font-family:var(--f-display);display:block;font-size:1rem;margin-bottom:6px}
.stack span{color:var(--mute);font-size:.9rem}
@media (max-width:760px){.stack{grid-template-columns:1fr 1fr}}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.values article{padding:34px 28px;border:1px solid var(--line);background:var(--panel)}
.values .big{font-family:var(--f-display);font-weight:800;font-size:3rem;color:var(--a);line-height:1;margin-bottom:18px}
.values h3{font-family:var(--f-display);font-size:1.3rem;margin-bottom:10px}
.values p{color:var(--mute)}
@media (max-width:860px){.values{grid-template-columns:1fr}}

/* ===== CONTACT: character select form ===== */
.form{display:grid;gap:26px}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pick label{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0}
.pick span{display:grid;gap:8px;padding:18px 16px;border:1px solid var(--line);background:var(--panel);transition:.2s;height:100%}
.pick span b{font-family:var(--f-display);font-size:.98rem;line-height:1.15}
.pick span i{font-style:normal;color:var(--mute);font-size:.85rem}
.pick span em{font-style:normal;font-family:var(--f-hud);color:var(--a);font-size:1.1rem}
.pick input:checked + span{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--panel));box-shadow:inset 0 0 0 1px var(--a)}
.pick input:focus-visible + span{outline:2px solid var(--a);outline-offset:2px}
@media (max-width:860px){.pick{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:10px}
.field label{color:var(--mute)}
.field input,.field textarea,.field select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);padding:16px 18px;transition:border-color .2s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--a)}
.field textarea{min-height:150px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.two{grid-template-columns:1fr}}
.budget{display:flex;gap:8px;flex-wrap:wrap}
.budget label input{position:absolute;opacity:0}
.budget label span{display:block;padding:.75em 1.1em;border:1px solid var(--line);font-family:var(--f-hud);font-size:.76rem;letter-spacing:.1em;cursor:pointer;transition:.2s}
.budget label input:checked + span{background:var(--a);color:var(--ink);border-color:var(--a)}
.side-card{padding:32px;border:1px solid var(--line);background:var(--panel);position:sticky;top:110px}
.side-card h3{font-family:var(--f-display);font-size:1.4rem;margin-bottom:14px}
.side-card ul{list-style:none;display:grid;gap:14px;margin:22px 0}
.side-card li{display:flex;gap:12px;color:var(--mute)}
.side-card li b{color:var(--text);font-weight:600}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);background:var(--a);color:var(--ink);padding:16px 24px;font-family:var(--f-hud);font-weight:700;letter-spacing:.1em;text-transform:uppercase;z-index:160;transition:transform .5s var(--spring)}
.toast.on{transform:translate(-50%,0)}

/* achievement popup (easter egg + form) */
.ach{position:fixed;right:24px;bottom:24px;z-index:170;display:flex;gap:14px;align-items:center;padding:14px 20px 14px 14px;background:#0f1218;border:1px solid var(--a);box-shadow:0 0 30px -6px var(--a);transform:translateX(130%);transition:transform .6s var(--spring)}
.ach.on{transform:none}
.ach .ico{width:44px;height:44px;display:grid;place-items:center;background:var(--a);color:var(--ink);font-weight:800;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ach small{display:block;color:var(--a)}

/* custom cursor ring (desktop only) */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid var(--a);border-radius:50%;pointer-events:none;z-index:300;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s;opacity:0;will-change:transform}
.cursor.on{opacity:1}
.cursor.hover{width:64px;height:64px;background:rgba(200,255,46,.15)}
@media (hover:none){.cursor{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .line span{transform:none}
}
.contact-split{grid-template-columns:1.5fr 1fr}
@media (max-width:860px){.contact-split{grid-template-columns:1fr}}
@media (max-width:620px){.next-game{grid-template-columns:1fr}.next-game .btn{justify-self:start}}