:root{--frost:#eef5fb;--card:#fff;--text:#0e1b2e;--mute:#51627a;--line:#cfe0ee;--ice:#8fd3ff;--accent:#1f6fd0;--navbg:rgba(238,245,251,.84);--hill:var(--frost);--hill2:#d9eaf7;--shadow:0 14px 34px -16px rgba(20,60,120,.35);
--e:cubic-bezier(.22,1,.36,1);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--frost:#0b1428;--card:#13203c;--text:#eaf2fb;--mute:#9fb2cc;--line:#233556;--accent:#8fd3ff;--navbg:rgba(11,20,40,.82);--hill2:#13244a;--shadow:0 14px 34px -16px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--frost:#0b1428;--card:#13203c;--text:#eaf2fb;--mute:#9fb2cc;--line:#233556;--accent:#8fd3ff;--navbg:rgba(11,20,40,.82);--hill2:#13244a;--shadow:0 14px 34px -16px rgba(0,0,0,.7)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;height:100%}
body{margin:0;background:var(--frost);color:var(--text);font:500 17px/1.55 Figtree,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--navbg);backdrop-filter:blur(10px)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
.disp,h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:19;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(18px,4vw,48px);background:var(--navbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav b{display:flex;align-items:center;gap:9px;font:800 24px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
nav b img{height:34px;width:auto;display:block}
nav div{display:flex;gap:24px}
nav a{font-weight:700;color:var(--mute);transition:color .3s}
nav a:hover{color:var(--text)}

/* scenes: twilight sky + snow */
.scene{position:relative;overflow:hidden;color:#fff;background:radial-gradient(ellipse 60% 50% at 78% 28%,rgba(160,215,255,.30),transparent 70%),linear-gradient(180deg,#071226 0%,#10295a 40%,#2f6aa8 76%,#a8d1ee 100%)}
.snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:var(--hh,24%);z-index:1;display:block}
.hills .h2{fill:var(--hill2)}.hills .h1{fill:var(--hill)}
.hero{min-height:calc(100svh - 62px);display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(36px,7vh,80px);--hh:26%}
.wrap{position:relative;z-index:2;padding:0 clamp(18px,4vw,48px)}
h1{margin:0;font:800 clamp(52px,10.5vw,152px)/.92 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em;color:#fff}
h1 span{display:block;overflow:hidden;padding:.04em .1em .12em 0}
h1 i{display:block;font-style:normal;transform:translateY(110%);animation:rise 1.1s var(--e) forwards}
h1 span:nth-child(2){color:#bfe6ff}
h1 span:nth-child(2) i{animation-delay:.14s}
@keyframes rise{to{transform:none}}
.say{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:26px;opacity:0;animation:fade 1s .55s var(--e) forwards}
@keyframes fade{to{opacity:1}}
.say p{margin:0;max-width:42ch;padding:16px 20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-weight:500;color:#f3f9ff}
.btn{display:inline-block;padding:14px 26px;background:#fff;color:#0a1830;font:700 17px Figtree,sans-serif;border-radius:999px;box-shadow:0 10px 26px -8px rgba(4,14,40,.55);transition:transform .4s var(--e),box-shadow .4s var(--e),background .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(143,211,255,.55)}
.btn.red{background:var(--ice)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.22)}
.fly{position:absolute;z-index:3;right:clamp(0px,3vw,60px);top:clamp(10px,4vh,50px);width:clamp(130px,23vw,330px);pointer-events:none;will-change:transform}
.fly img{width:100%;display:block;filter:drop-shadow(0 22px 26px rgba(3,10,30,.45));animation:hover 5s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-16px) rotate(-3deg)}}
.reel{position:relative;z-index:2;margin:34px 0 clamp(26px,5vh,54px);overflow:hidden}
.track{display:flex;gap:18px;width:max-content;will-change:transform;padding:8px 0 14px}
.track a{flex:none;width:clamp(230px,27vw,360px);aspect-ratio:16/9;border:1px solid rgba(255,255,255,.35);border-radius:18px;overflow:hidden;box-shadow:0 16px 30px -14px rgba(3,10,30,.7);background:#122448}
.track img{width:100%;height:100%;object-fit:cover;display:block}

section.pad{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,110px) clamp(18px,4vw,48px)}
h2{margin:0 0 12px;font:800 clamp(38px,6.4vw,82px)/.98 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.sub{margin:0 0 30px;color:var(--mute);max-width:54ch}

/* live stats */
.livehead{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 26px}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:700;font-size:15px;color:var(--mute)}
.status i{width:10px;height:10px;border-radius:50%;background:#f0b429}
.status[data-s="ok"] i{background:#2fcf7a;box-shadow:0 0 0 0 rgba(47,207,122,.6);animation:ping 2s infinite}
.status[data-s="err"] i{background:#f06060}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(47,207,122,0)}100%{box-shadow:0 0 0 0 rgba(47,207,122,0)}}
.every{flex:1 1 180px;max-width:320px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.every i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ice),var(--accent));border-radius:99px}
.every i.run{animation:fill 20s linear forwards}
@keyframes fill{to{width:100%}}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.tile{padding:26px 26px 24px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.tile.main{background:linear-gradient(160deg,#10295a,#2f6aa8);color:#fff;border-color:transparent}
.tile.main .lab{color:#cfe7fb}
.tile b{display:block;font:800 clamp(40px,6vw,74px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile .lab{display:block;margin-top:8px;color:var(--mute);font-weight:700}
.cover{margin:16px 2px 0;color:var(--mute);font-size:15px}
b.tick{animation:flash 1.1s var(--e)}
@keyframes flash{0%{color:var(--accent);text-shadow:0 0 18px rgba(143,211,255,.8)}100%{text-shadow:none}}

/* studios */
.logos{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:20px;max-width:1040px}
.logos li{aspect-ratio:1/1;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.logos li:hover{transform:translateY(-5px);box-shadow:0 22px 40px -16px rgba(31,111,208,.5)}
.logos img{width:100%;height:100%;object-fit:cover;display:block}
.logos img.pad{object-fit:contain;padding:12%}

/* games */
.find{width:100%;max-width:400px;padding:14px 20px;font:700 17px Figtree,sans-serif;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:999px;margin-bottom:34px;transition:box-shadow .4s var(--e),border-color .3s}
.find:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(143,211,255,.45)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;transition:transform .5s var(--e),box-shadow .5s var(--e),opacity .5s var(--e)}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 40px -18px rgba(31,111,208,.55)}
.card .pic{aspect-ratio:16/9;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e)}
.card:hover img{transform:scale(1.06)}
.card .body{padding:14px 18px 16px}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card h3{margin:0;font:700 21px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.card em{flex:none;font:700 14px Figtree,sans-serif;font-style:normal;padding:5px 14px;border-radius:99px;background:var(--ice);color:#0a1830}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;color:var(--mute);font-size:15px}
.meta b{color:var(--text);font-variant-numeric:tabular-nums}
.meta .on{display:inline-flex;align-items:center;gap:7px}
.meta .on i{width:8px;height:8px;border-radius:50%;background:#2fcf7a}
.card.hide{opacity:0;transform:scale(.94);pointer-events:none}
.card.gone{display:none}
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s var(--e),transform .9s var(--e)}
.card.rv.in{transition:opacity .9s var(--e),transform .9s var(--e),box-shadow .5s var(--e)}
details{margin-top:42px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow);padding:4px 24px}
summary{cursor:pointer;padding:16px 0;font:700 26px "Bricolage Grotesque",sans-serif;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";transition:transform .5s var(--e)}
details[open] summary::after{transform:rotate(45deg)}
details ul{columns:2 260px;margin:0;padding:0 0 18px;list-style:none}
details li a{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-weight:700;border-bottom:1px solid var(--line);break-inside:avoid;transition:color .3s}
details li a:hover{color:var(--accent)}
details li small{flex:none;color:var(--mute);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}
details li small b{color:var(--text);font-weight:700}

/* contact */
.contact{--hh:30%;padding:clamp(56px,8vw,100px) 0 clamp(130px,18vw,220px)}
.contact h2{color:#fff;text-shadow:0 0 50px rgba(143,211,255,.35)}
.contact .sub{color:#dcecfb}
.links{display:flex;flex-wrap:wrap;gap:16px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px clamp(18px,4vw,48px) 28px;background:var(--frost);color:var(--mute);font-weight:700}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}h1 i,.say,.rv{opacity:1;transform:none}.reel{overflow-x:auto}.every i{width:100%}}
@media (max-width:640px){nav{padding:10px 14px}nav b{font-size:21px;gap:6px}nav div{gap:13px}nav a{font-size:15px}.fly{opacity:.92;width:120px;top:6px}h1{margin-top:60px}}

.brand{display:flex;align-items:center;gap:9px;color:var(--text);font:800 24px 'Bricolage Grotesque',sans-serif}.brand img{width:34px;height:34px;object-fit:contain}.hero-eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#c8e6ff;margin:0 0 20px}.hero{padding-top:55px}.say{align-items:center}.hero-actions{display:flex;flex-wrap:wrap;gap:14px}.hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:18px;min-width:195px;border-radius:15px}.btn.primary{background:#2875ee;color:white}.hero-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.hero-totals{display:flex;flex-wrap:wrap;gap:28px 70px;margin:25px 0 0}.hero-totals strong{display:block;font:800 clamp(30px,4vw,52px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-1px}.hero-totals span{display:block;margin-top:7px;font-size:13px;color:#cee6fb}.fly{top:55px;width:clamp(150px,22vw,300px)}.showcase-track{display:flex;width:max-content;animation:reel-loop 85s linear infinite}.reel-group{display:flex;flex-shrink:0;gap:18px;padding:8px 9px 14px}.reel-group a{flex:none;width:clamp(230px,27vw,360px);aspect-ratio:16/9;border:1px solid #ffffff59;border-radius:18px;overflow:hidden;box-shadow:0 16px 30px -14px #030a1eb3;background:#122448}.reel-group img{width:100%;height:100%;object-fit:cover;display:block}.reel:hover .showcase-track,.reel:focus-within .showcase-track,.reel.is-paused .showcase-track{animation-play-state:paused}.showcase-pause{display:block;margin:3px 20px 0 auto;background:#07122680;border:1px solid #ffffff60;color:#edf8ff;border-radius:99px;padding:5px 12px;font:500 11px Figtree,sans-serif;cursor:pointer}@keyframes reel-loop{to{transform:translateX(-50%)}}.data-note{font-size:13px;color:var(--mute);margin:0}.badge{font-size:12px;letter-spacing:1px}.refresh-stats{font:700 13px Figtree,sans-serif;color:var(--accent);background:none;border:0;text-decoration:underline;cursor:pointer}.refresh-stats:disabled{opacity:.5}.status:has(.badge){font-size:12px}.about{background:#06090f;color:#f5f8fd;padding:85px 24px}.about-inner{max-width:1000px;margin:auto;text-align:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px}.about>.about-inner>.eyebrow{color:#8eabc8}.about h2{font-size:clamp(38px,5vw,58px);letter-spacing:-1.5px}.accent-line{width:80px;height:4px;border-radius:99px;background:linear-gradient(90deg,#3679ef,#b24de7);margin:20px auto 25px}.about-intro{max-width:800px;margin:0 auto 45px;color:#b9c6d7;font-size:18px;line-height:1.6}.services{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}.service{display:flex;gap:17px;padding:25px;background:linear-gradient(145deg,#101720,#1a2330);border:1px solid #263342;border-radius:18px}.service-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;background:#0daf72}.service-icon svg{width:24px;height:24px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.service-icon.qa{background:linear-gradient(135deg,#438bfa,#0698ac)}.service-icon.partnership{background:linear-gradient(135deg,#ab45e8,#d9289a)}.service-icon.creator{background:linear-gradient(135deg,#ff871b,#df7000)}.service h3{margin:2px 0 10px;font:700 21px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.3px}.service p{margin:0;color:#aebbc9;font-size:15px;line-height:1.6}.about-cta{margin-top:35px;background:#bfe6ff;border-radius:13px}.logos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}.studios-section{padding-bottom:70px!important}.games-section{padding-top:0!important}.pic{display:block}.play{flex:none;font:700 14px Figtree,sans-serif;padding:5px 14px;border-radius:99px;background:var(--ice);color:#0a1830}.game-card[hidden],.more-games-panel[hidden]{display:none}.more-games-panel{border:1px dashed #9dbdd3;background:linear-gradient(145deg,var(--card),var(--hill2));border-radius:22px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px 24px;text-align:center;gap:10px;min-height:340px}.more-games-icon{width:58px;height:58px;display:grid;place-items:center;background:#8fd3ff25;border:1px solid var(--line);border-radius:15px;font-size:29px;color:var(--accent)}.more-games-panel h3{font:800 42px 'Bricolage Grotesque',sans-serif;margin:0 0 -10px}.more-games-panel>p{margin:0;color:var(--mute);font-size:16px}.more-game-stat{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;max-width:250px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:12px}.more-game-stat strong{font-size:16px}.more-game-stat [data-more=playing]{color:#09816e}.more-games-panel .more-games-caption{font-size:11px;line-height:1.5;max-width:230px}.more-games-panel details{box-shadow:none;width:100%;text-align:left;background:transparent;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;margin:5px 0 0}.more-games-panel summary{font:700 12px Figtree,sans-serif;padding:13px 0}.more-games-panel ul{columns:1;padding:0;display:grid;gap:3px}.more-games-panel li a{font-size:11px;font-weight:500}.site-visit-counter{margin-top:28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#e4f3ff}.site-visit-counter[hidden]{display:none}.site-visit-counter strong{font-size:22px}.site-visit-counter small{flex-basis:100%;opacity:.75;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tile b{font-size:clamp(32px,5vw,66px)}.meta b{white-space:nowrap}#search-empty{color:var(--mute)}
@media(max-width:900px){.hero h1{font-size:10vw}.say p{max-width:40ch}.hero-actions{gap:10px}.hero-actions .btn{min-width:160px;font-size:15px;padding:14px 20px}.fly{width:185px;top:40px}.services{gap:18px}.service{padding:22px;gap:13px}.service h3{font-size:19px}}
@media(max-width:640px){nav{gap:10px}.brand{font-size:21px;gap:5px}.brand img{width:29px;height:29px}nav div{gap:12px;overflow-x:auto}nav a:not(.brand){font-size:12px;white-space:nowrap}.hero{padding-top:24px}.hero h1{font-size:clamp(39px,10.8vw,66px);margin-top:78px;letter-spacing:-.04em}.hero-eyebrow{font-size:8px;max-width:220px;letter-spacing:1px;margin:0}.fly{width:125px;top:6px;right:8px}.say{margin-top:14px;gap:16px}.say p{padding:14px 16px;font-size:14px;max-width:100%}.hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{min-width:0;padding:14px 10px;font-size:13px;gap:7px}.hero-totals{gap:20px;justify-content:space-between;margin-top:25px}.hero-totals>div{flex:1}.hero-totals strong{font-size:34px}.hero-totals span{font-size:10px}.reel{margin-top:25px}.services{grid-template-columns:1fr;gap:16px}.about{padding:60px 18px}.about-intro{font-size:16px;margin-bottom:30px}.service{padding:22px}.logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.logos li{border-radius:23px}.tiles{gap:14px}.tile{padding:23px}.tile b{font-size:48px}.livehead{gap:12px}.data-note{font-size:11px;flex-basis:100%;order:3}.card h3{font-size:20px}.meta{font-size:13px;gap:6px 12px}.contact .sub{font-size:16px}footer{font-size:12px}}
@media(prefers-reduced-motion:reduce){.showcase-track{animation:none}.reel{overflow-x:auto}.reel-group[aria-hidden=true]{display:none}.showcase-pause{display:none}}

/* About Me now lives in the snowy contact/footer area. */
.footer-layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.5fr);gap:55px;align-items:start;max-width:1440px;margin:auto}.contact-copy{position:sticky;top:100px}.contact-copy h2{font-size:clamp(42px,5vw,72px)}.contact-copy .sub{font-size:16px}.contact-copy .links{gap:12px}.contact-copy .btn{font-size:14px;padding:13px 20px}.footer-about{scroll-margin-top:85px}.footer-about .about-inner{text-align:left;max-width:none}.footer-about .eyebrow{color:#c7e6ff;font-size:9px}.footer-about h2{font-size:46px;letter-spacing:-1.5px;margin:12px 0}.footer-about .accent-line{margin:17px 0 22px;background:linear-gradient(90deg,#bfe6ff,#9291f0)}.footer-about .about-intro{font-size:15px;color:#d9eafa;margin:0 0 25px;line-height:1.6}.footer-about .services{gap:16px}.footer-about .service{background:linear-gradient(145deg,#ffffff12,#d5eeff0b);border-color:#c3e6ff33;padding:20px 17px;gap:12px;backdrop-filter:blur(10px)}.footer-about .service-icon{width:38px;height:38px;flex-basis:38px;border-radius:11px}.footer-about .service-icon svg{width:21px;height:21px}.footer-about .service h3{font-size:18px;color:#f2f9ff;line-height:1.2}.footer-about .service p{font-size:13px;color:#c8def0;line-height:1.6}.footer-about .about-cta{font-size:14px;margin-top:24px;padding:13px 22px}.contact{--hh:16%;padding-bottom:180px}
@media(max-width:1050px){.footer-layout{grid-template-columns:1fr;gap:55px}.contact-copy{position:static}.contact-copy .sub{max-width:650px}.footer-about .services{grid-template-columns:1fr 1fr}.footer-about .about-intro{max-width:750px}.footer-about .service{padding:23px}.footer-about .service h3{font-size:20px}.footer-about .service p{font-size:15px}.footer-about .service-icon{width:45px;height:45px;flex-basis:45px}}
@media(max-width:640px){.footer-layout{gap:45px}.footer-about h2{font-size:38px}.footer-about .services{grid-template-columns:1fr}.footer-about .service{padding:20px}.footer-about .service h3{font-size:19px}.footer-about .service p{font-size:14px}.footer-about .about-intro{font-size:15px}.contact{padding-bottom:150px;--hh:7%}.contact-copy h2{font-size:49px}}