@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url('../assets/fonts/fredoka-latin-v17.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../assets/fonts/nunito-latin-v32.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/caveat-ascii-700-v23.woff2') format('woff2')}
:root{
--bg:#14100a; /* dark warm page bg */
--bg-2:#1a1610;
--card:#1f1810; /* card bg */
--card-2:#2a2218;
--fg:#f4ead5; /* cream text + borders */
--fg-dim:#bba994;
--fg-faint:#7a6c5a;
--line:#f4ead5;
--ink:#f4ead5; /* alias retained for css using --ink */
--ink-dim:#bba994;
--ink-faint:#7a6c5a;
--cream:#1f1810; /* alias for panels that used to be cream */
--cream-2:#2a2218;
--cream-3:#3a3022;
--mint:#97FCE4;
--mint-soft:#C7FBED;
--rose:#4FCBA3; /* HL deeper mint, secondary accent */
--rose-soft:#7BD9BC;
--sun:#F5C94C;
--sky:#7FC1E8;
--display:'Fredoka', system-ui, sans-serif;
--body:'Nunito', system-ui, sans-serif;
--hand:'Caveat', cursive;
--paw-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cellipse cx='16' cy='22' rx='9' ry='7' fill='%2397FCE4' stroke='%2314100A' stroke-width='2'/%3E%3Cellipse cx='6' cy='13' rx='3.2' ry='4' fill='%2397FCE4' stroke='%2314100A' stroke-width='1.8'/%3E%3Cellipse cx='12' cy='7' rx='3' ry='4' fill='%2397FCE4' stroke='%2314100A' stroke-width='1.8'/%3E%3Cellipse cx='20' cy='7' rx='3' ry='4' fill='%2397FCE4' stroke='%2314100A' stroke-width='1.8'/%3E%3Cellipse cx='26' cy='13' rx='3.2' ry='4' fill='%2397FCE4' stroke='%2314100A' stroke-width='1.8'/%3E%3C/svg%3E") 8 8, auto;
}
*{box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:96px;
scrollbar-width:thin;
scrollbar-color:rgba(244,234,213,.32) transparent;
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;cursor:var(--paw-cursor)}
body{
background:
radial-gradient(900px 500px at 90% 10%, rgba(146,224,74,.10), transparent 60%),
radial-gradient(700px 500px at -10% 20%, rgba(127,224,194,.08), transparent 60%),
var(--bg);
min-height:100vh;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--sun);color:#14100a}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
background:rgba(244,234,213,.28);
border:2px solid transparent;
border-radius:999px;
background-clip:padding-box;
transition:background .2s ease;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(151,252,228,.5);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;position:relative}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.display{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.015em}
.hand{font-family:var(--hand);font-weight:700}
.h1{font-size:clamp(52px, 7.4vw, 96px);font-weight:700}
.h2{font-size:clamp(34px, 4.6vw, 60px)}
.h3{font-size:clamp(22px, 2vw, 32px)}
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--hand);font-size:24px;color:var(--mint);font-weight:700;transform:rotate(-2deg);line-height:1}
/* Sticker / rounded box recipe */
.sticker{background:var(--card);border:2px solid var(--fg);border-radius:22px;box-shadow:5px 5px 0 0 var(--fg)}
.sticker:hover{box-shadow:6px 6px 0 0 var(--fg)}
/* Nav */
.nav{position:sticky;top:14px;z-index:50;margin:14px 28px 0;}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1240px;margin:0 auto}
.nav-logo{display:flex;align-items:center;flex:0 0 auto;line-height:0;color:var(--fg)}
.nav-logo .brand-wordmark{display:block;width:auto;height:112px;max-width:min(320px, 42vw);object-fit:contain}
.nav-in{display:flex;align-items:center;flex:0 0 auto;padding:11px 22px;
background:var(--card);border:2px solid var(--fg);border-radius:999px;box-shadow:4px 4px 0 0 var(--fg)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--fg)}
.logo .mark{width:52px;height:52px;flex:0 0 auto;display:block;margin:-8px 0}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-wordmark{display:block;width:auto;height:58px;max-width:180px;margin:-5px 0;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:20px;font-size:14px;color:var(--ink);font-weight:600}
.nav-links a{transition:color .15s ease;padding:5px 4px;border-radius:8px}
.nav-links a:hover{color:var(--mint)}
.nav-links .nav-enter{padding:8px 18px;color:#14100a}
.nav-links .nav-enter:hover{color:#14100a}
.nav-enter-menu{position:relative;flex:0 0 auto}
.nav-enter-menu .nav-enter{gap:12px;white-space:nowrap}
.nav-enter-menu .nav-enter::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav-enter-menu[data-open="true"] .nav-enter::after{
transform:translateY(2px) rotate(225deg)}
.nav-enter-options{position:absolute;top:100%;right:0;z-index:60;min-width:200px;padding-top:10px;
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);
transition:opacity .15s ease,transform .15s ease,visibility .15s ease}
.nav-enter-menu[data-open="true"] .nav-enter-options{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-enter-options-inner{padding:6px;background:var(--card);border:2px solid var(--fg);
border-radius:12px;box-shadow:4px 4px 0 0 var(--fg)}
.nav-links .nav-enter-options a{display:block;padding:10px 12px;border-radius:6px;color:var(--fg);
font-family:var(--display);font-size:14px;white-space:nowrap}
.nav-links .nav-enter-options a:hover,.nav-links .nav-enter-options a:focus-visible{
color:#14100a;background:var(--mint);outline:none}
.mobile-menu-toggle{display:none}
.mobile-menu-toggle,.mobile-nav-close{width:52px;height:52px;flex:0 0 52px;align-items:center;justify-content:center;
padding:0;border:1.5px solid var(--fg);border-radius:50%;background:var(--card);color:var(--fg);box-shadow:2px 2px 0 var(--fg);touch-action:manipulation}
.mobile-menu-toggle:hover,.mobile-nav-close:hover{background:var(--mint);color:#14100a}
.mobile-menu-toggle:focus-visible,.mobile-nav button:focus-visible,.mobile-nav a:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
.mobile-nav{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;
padding:calc(18px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
border:0;border-radius:0;background:var(--bg);color:var(--fg);overflow-y:auto;overscroll-behavior:contain}
.mobile-nav::backdrop{background:var(--bg)}
.mobile-nav-shell{width:100%;max-width:680px;margin:0 auto;min-height:100%}
.mobile-nav-head{position:sticky;top:env(safe-area-inset-top, 0px);z-index:1;background:var(--bg);
display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.mobile-nav-head>a{display:flex;line-height:0}
.mobile-nav-head img{display:block;width:140px;max-width:48vw;height:auto}
.mobile-nav-close{display:inline-flex}
.mobile-nav-content{display:grid;gap:25px}
.mobile-nav-group h2{font-family:var(--body);font-size:13px;font-weight:700;line-height:1.4;color:var(--ink-dim);margin:0 0 8px;letter-spacing:0}
.mobile-nav-group>a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:49px;padding:6px 0;
font-family:var(--display);font-size:27px;font-weight:500;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere}
.mobile-nav-group>a svg{flex:0 0 auto;color:var(--ink-dim)}
.mobile-nav-group>a:hover,.mobile-nav-group>a[aria-current="page"]{color:var(--mint)}
.mobile-nav-rooms{border-top:1px solid rgba(244,234,213,.24);padding-top:23px}
.mobile-nav-rooms>a{color:var(--mint)}
.mobile-nav-rooms>a svg{color:inherit}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
font-family:var(--display);font-size:15px;font-weight:600;cursor:pointer;border-radius:999px;
background:var(--mint);color:#14100a;border:1.5px solid var(--fg);box-shadow:2px 2px 0 0 var(--fg);
transition:transform .12s, box-shadow .12s, background .15s;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--fg)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--fg)}
.btn:disabled{cursor:not-allowed;opacity:.72;transform:none;box-shadow:2px 2px 0 0 var(--fg)}
.btn:disabled:hover{transform:none;box-shadow:2px 2px 0 0 var(--fg)}
a,button:not(:disabled),.btn:not(:disabled),.cat-banner-canvas,[role="button"]{cursor:var(--paw-cursor)}
.btn-ghost{background:var(--card);color:var(--fg)}
.btn-ghost:hover{background:var(--mint);color:#14100a}
.btn .arrow{display:inline-block;transition:transform .15s ease;font-family:var(--display)}
.btn:hover .arrow{transform:translateX(3px)}
#app,#leaderboard-app{opacity:0;transition:opacity .22s ease}
body.app-ready #app,body.app-ready #leaderboard-app{opacity:1}
.site-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
background:var(--bg);transition:opacity .24s ease,visibility .24s ease}
.site-loader-inner{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--fg);
font-family:var(--display);font-weight:600}
.site-loader img{width:150px;max-width:42vw;height:auto;display:block}
.site-loader-bar{width:132px;height:8px;border:2px solid var(--fg);border-radius:999px;overflow:hidden;background:var(--card)}
.site-loader-bar::before{content:"";display:block;width:42%;height:100%;border-radius:999px;background:var(--mint);
animation:loader-slide 1.05s ease-in-out infinite}
@keyframes loader-slide{0%{transform:translateX(-110%)}50%{transform:translateX(85%)}100%{transform:translateX(260%)}}
body.app-ready .site-loader{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion: reduce){
#app,#leaderboard-app,.site-loader{transition:none}
.site-loader-bar::before{animation:none;width:100%}
}
/* HERO */
.hero{position:relative;padding:36px 0 32px}
.hero-copy{min-width:0}
.hero h1{margin:0 0 22px;max-width:18ch}
.hero h1 .accent{color:var(--rose);position:relative;display:inline-block}
.hero h1 .accent::after{
content:"";position:absolute;left:-2%;right:-2%;bottom:-2px;height:14px;z-index:-1;
background:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
}
.hero .sub{font-size:clamp(17px, 1.25vw, 22px);color:var(--ink-dim);max-width:60ch;margin:0 0 26px;line-height:1.55}
.hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-ctas .btn{height:46px;min-height:46px;padding:0 25px;font-size:16px}
.hero-ctas .hero-social{width:46px;min-width:46px;padding:0;justify-content:center;background:var(--card);color:var(--fg)}
.hero-ctas .hero-social:hover{background:var(--mint);color:#14100a}
.hero-ctas .hero-social svg{display:block;width:18px;height:18px;fill:currentColor}
.hero-stage{position:relative;width:min(100%, 880px);margin:42px auto 0;border-radius:24px;overflow:hidden;
border:2px solid var(--fg);box-shadow:8px 8px 0 0 var(--fg);background:var(--card)}
.hero-trailer{width:min(100%,640px);aspect-ratio:4/3;background:#07090d}
.hero-trailer-video{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:4/3}
.hero-trailer-start{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.hero-trailer-start:focus-visible{outline:2px solid #fff;outline-offset:-7px}
.hero-trailer-play{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:grid;place-items:center;
width:64px;height:44px;border:0;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;
box-shadow:none;transition:background .15s ease}
.hero-trailer-play svg{margin-left:3px}
.hero-trailer-start:hover .hero-trailer-play{background:rgba(0,0,0,.7)}
.hero-trailer-loading{position:absolute;inset:0;display:grid;align-items:end;justify-items:center;padding-bottom:56px;pointer-events:none}
.hero-trailer-loading .site-loader-bar{background:var(--bg);box-shadow:0 0 0 6px rgba(7,9,13,.5)}
.hero-trailer-error{position:absolute;left:12px;right:12px;top:12px;margin:0;padding:9px 12px;background:var(--bg);
color:var(--fg);font-size:14px;line-height:1.4;text-align:center;pointer-events:none}
@media(min-width:981px){
.hero{padding:48px 0 56px}
.hero-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:56px;align-items:center}
.hero h1{font-size:64px;max-width:12ch;margin-bottom:20px;letter-spacing:0}
.hero .sub{max-width:46ch;margin-bottom:26px}
.hero-layout .hero-trailer{width:100%;max-width:640px;margin:0;justify-self:end}
}
@media(min-width:981px) and (max-width:1120px){
.hero-layout{gap:36px}
.hero h1{font-size:56px}
}
section.block.cat-banner{padding:56px 0 42px}
.cat-banner .wrap{max-width:1240px}
.cat-banner-stage{position:relative;width:100%;margin:18px auto 0;background:transparent}
.cat-banner-viewer{position:relative;width:100%;aspect-ratio:21/9;min-height:200px;background:transparent}
.cat-banner-canvas{background:transparent !important}
.cat-heart-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.cat-heart{position:absolute;left:0;top:0;width:clamp(52px, 5.4vw, 86px);aspect-ratio:1/1;
background:url("../assets/pet-heart.png") center/contain no-repeat;
filter:drop-shadow(0 5px 0 rgba(20,16,10,.35)) drop-shadow(0 0 14px rgba(255,154,188,.22));
transform:translate(-50%,-50%) scale(var(--scale,1));animation:cat-heart-float 1.2s ease-out forwards;will-change:transform,opacity}
@keyframes cat-heart-float{
0%{opacity:0;transform:translate(-50%,-20%) translateX(0) scale(.65) rotate(-8deg)}
15%{opacity:1}
100%{opacity:0;transform:translate(calc(-50% + var(--drift, 0px)), calc(-20% - var(--rise, 78px))) scale(var(--scale,1)) rotate(10deg)}
}
@media (prefers-reduced-motion: reduce){
.cat-heart{animation-duration:.01ms;opacity:0}
}
.cat-banner-status{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
font-family:var(--display);font-size:12px;font-weight:600;color:var(--mint);
background:rgba(20,16,10,.78);border:1px solid rgba(151,252,228,.35);padding:6px 12px;border-radius:999px;pointer-events:none}
.cat-banner-viewer.is-loaded .cat-banner-status:empty{display:none}
.cat-banner-viewer.is-error .cat-banner-status{color:var(--rose-soft)}
.gameplay-tag{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;
background:rgba(20,16,10,.72);color:#f4ead5;border:1px solid rgba(244,234,213,.25);
padding:5px 10px 5px 8px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;z-index:3}
.gameplay-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(151,252,228,.18)}
/* Section spacing */
section.block{padding:96px 0;position:relative}
.manifesto-copy p,.hip4-copy p,.singapurr-copy p,.friends-copy p{
font-size:clamp(16px, 1.1vw, 19px);line-height:1.65;color:var(--ink-dim);margin:0 0 16px;max-width:54ch}
/* Manifesto */
.manifesto{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px, 4vw, 64px);align-items:center}
.manifesto h2{margin:14px 0 22px;max-width:14ch}
.manifesto h2 .wave{position:relative;display:inline-block;color:var(--mint)}
.manifesto h2 .wave::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:10px;
background:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat}
.manifesto-copy p:last-child{margin:0}
.manifesto-copy strong{font-weight:700;color:#14100a;background:var(--sun);padding:0 4px;border-radius:4px}
.manifesto-gallery{position:relative;min-height:380px}
.manifesto-art{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;width:100%;
border:2px solid var(--fg);box-shadow:6px 6px 0 0 var(--fg);transform:rotate(2deg);background:var(--card)}
.manifesto-art:first-child{width:78%;margin-left:0}
.manifesto-art:nth-child(2){position:absolute;right:0;bottom:0;width:58%;transform:rotate(-1.5deg)}
.manifesto-art img{display:block;width:100%;height:100%;object-fit:cover}
.manifesto-gallery.is-single{min-height:0}
.manifesto-gallery.is-single .manifesto-art,
.manifesto-gallery.is-single .manifesto-art:first-child{width:100%;margin-left:0;transform:rotate(1deg)}
.manifesto-gallery.is-single .manifesto-art:nth-child(2){position:relative;right:auto;bottom:auto;width:100%;transform:rotate(1deg)}
.manifesto-art .cap{position:absolute;left:12px;bottom:12px;font-family:var(--display);font-weight:600;font-size:11px;
color:var(--fg);background:rgba(31,24,16,.86);border:1px solid var(--fg);padding:4px 9px;border-radius:999px}
.manifesto-art .gameplay-tag{top:10px;right:10px;font-size:9px;padding:4px 8px 4px 7px}
/* HIP-4 room */
.hip4{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px, 4vw, 64px);align-items:center}
.hip4-art{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;width:100%;
border:2px solid var(--fg);box-shadow:6px 6px 0 0 var(--fg);transform:rotate(-1deg);background:var(--card)}
.hip4-art img{display:block;width:100%;height:100%;object-fit:cover}
.hip4-art .gameplay-tag{top:12px;right:12px;font-size:9px;padding:4px 8px 4px 7px}
.hip4-copy h2{margin:14px 0 20px;max-width:12ch}
.section-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.section-actions .btn{font-size:15px;padding:11px 22px}
/* Singapurr GP */
.singapurr{display:grid;grid-template-columns:.92fr 1.08fr;grid-template-areas:"copy art" "actions art";
column-gap:clamp(34px, 4vw, 64px);row-gap:0;align-content:center;align-items:center}
.singapurr-copy{grid-area:copy;align-self:end}
.singapurr-copy h2{margin:0 0 20px;max-width:12ch}
.singapurr-actions{grid-area:actions;align-self:start;margin-top:10px}
.singapurr-art{grid-area:art;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--fg);
border-radius:22px;box-shadow:6px 6px 0 0 var(--fg);background:#06121c}
.singapurr-art video{display:block;width:100%;height:100%;object-fit:cover}
/* Hypurr & Friends */
.friends{display:grid;grid-template-columns:1.08fr .92fr;grid-template-areas:"art copy";gap:clamp(34px, 4vw, 64px);align-items:center}
.friends-copy{grid-area:copy}
.friends-copy h2{margin:0 0 20px;max-width:12ch}
.friends-art{grid-area:art;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1586/840;width:100%;
border:2px solid var(--fg);box-shadow:6px 6px 0 0 var(--fg);transform:rotate(1deg);background:var(--card)}
.friends-art img{display:block;width:100%;height:100%;object-fit:cover}
.friends-art .gameplay-tag{top:12px;right:12px;font-size:9px;padding:4px 8px 4px 7px}
/* Section heading */
.sec-head{margin-bottom:48px;max-width:780px}
.sec-head h2{margin:14px 0 14px}
.sec-head .lead{color:var(--ink-dim);font-size:17px;line-height:1.6;max-width:560px}
.sec-head.centered{margin:0 auto 56px;text-align:center;max-width:680px}
.sec-head.centered .lead{margin:0 auto}
.sec-head .squiggle{display:block;font-family:var(--hand);color:var(--rose);font-size:26px;transform:rotate(-2deg);line-height:1;margin-bottom:6px}
/* Universe */
.universe{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 4.5vw, 72px);align-items:center}
.universe-img{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1;
border:2px solid var(--fg);box-shadow:6px 6px 0 0 var(--fg);transform:rotate(-1.5deg);background:var(--card)}
.universe-img img{display:block;width:100%;height:100%;object-fit:cover}
.universe-map-viewer{position:relative;width:100%;height:100%;background:transparent;border-radius:20px;overflow:hidden;
clip-path:inset(0 round 20px);isolation:isolate}
.universe-map-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent !important;touch-action:none;cursor:grab}
.universe-map-viewer.is-interactive .universe-map-canvas:active{cursor:grabbing}
.universe-map-video{user-select:none;-webkit-user-drag:none}
.universe-map-video.is-dragging{cursor:grabbing}
.universe-map-status{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
font-family:var(--display);font-size:12px;font-weight:600;color:var(--mint);
background:rgba(20,16,10,.78);border:1px solid rgba(151,252,228,.35);padding:6px 12px;border-radius:999px;pointer-events:none}
.universe-map-viewer.is-loaded .universe-map-status:empty{display:none}
.universe-map-viewer.is-error .universe-map-status{color:var(--rose-soft)}
.universe-map-hint{position:absolute;left:14px;bottom:14px;z-index:4;font-family:var(--display);font-weight:600;font-size:12px;
color:rgba(244,234,213,.82);background:rgba(20,16,10,.42);border:1px solid rgba(244,234,213,.34);
padding:5px 10px;border-radius:999px;pointer-events:none;backdrop-filter:blur(6px)}
.universe-img .cap{position:absolute;left:14px;bottom:14px;z-index:4;font-family:var(--display);font-weight:600;font-size:13px;
color:var(--fg);background:var(--card);border:2px solid var(--fg);padding:6px 12px;border-radius:999px}
.universe h2{margin:14px 0 20px}
.universe p{font-size:clamp(16px, 1.1vw, 19px);line-height:1.6;color:var(--ink-dim);margin:0 0 20px;max-width:56ch}
.universe ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.universe ul li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink)}
.universe ul li .paw,.universe ul li svg{flex:0 0 auto;width:22px;height:22px;align-self:flex-start;margin-top:2px}
.universe ul li b{font-weight:700;color:var(--ink)}
.universe ul li span{color:var(--ink-dim)}
/* Footer */
footer{padding:48px 0 56px;border-top:2px dashed var(--fg);margin-top:96px}
.cat-banner + footer{margin-top:32px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:24px;font-size:15px;color:var(--fg);font-weight:600;flex-wrap:wrap;align-items:center}
.foot-links a:hover{color:var(--rose)}
.foot-links .is-disabled{color:var(--fg-faint);cursor:not-allowed;pointer-events:none}
.foot-links .is-disabled:hover{color:var(--fg-faint)}
.foot-links .social-link{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;margin:-10px 0;border:1.5px solid var(--fg);border-radius:999px;
background:var(--card);box-shadow:2px 2px 0 0 var(--fg);color:var(--fg);pointer-events:auto;
transition:transform .12s, box-shadow .12s, color .15s, background .15s}
.foot-links .social-link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 0 var(--fg);background:var(--mint);color:#14100a}
.foot-links .social-link svg{display:block;width:22px;height:22px;fill:currentColor}
.footer-logo-link{display:inline-flex;line-height:0}
.footer-wordmark{display:block;width:min(130px, 42vw);height:auto}
.foot-bot{margin-top:36px;display:flex;justify-content:space-between;font-size:14px;color:var(--fg-dim);flex-wrap:wrap;gap:12px;align-items:center}
.footer-credit{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.footer-credit>span{min-width:0}
.footer-sticker{display:block;flex:0 0 48px;width:48px;height:48px;object-fit:contain}
.foot-bot .hand{font-family:var(--hand);font-size:20px;color:var(--rose)}
.heart{color:var(--rose)}
/* responsive */
@media (max-width: 1120px){
.nav{margin:14px 18px 0}
.nav-row{gap:12px}
.nav-logo .brand-wordmark{height:84px;max-width:min(240px, 52vw)}
.nav-in{display:none}
.mobile-menu-toggle{display:inline-flex}
}
@media (max-width: 380px){
.mobile-nav{padding-left:20px;padding-right:20px}
.mobile-nav-group>a{font-size:24px;min-height:47px}
.mobile-nav-head{margin-bottom:24px}
}
@media (max-width: 980px){
.manifesto{grid-template-columns:1fr;gap:36px}
.manifesto-gallery{max-width:820px;min-height:420px}
.hip4{grid-template-columns:1fr;gap:30px}
.hip4-copy{order:1}
.hip4-art{order:2}
.hip4-copy h2{max-width:13ch}
.singapurr{grid-template-columns:1fr;grid-template-areas:"copy" "art" "actions";row-gap:24px}
.singapurr-actions{margin-top:0}
.friends{grid-template-columns:1fr;grid-template-areas:"copy" "art";gap:30px}
.universe{grid-template-columns:1fr;gap:32px}
.universe > div:last-child{order:1}
.universe-img{order:2}
}
@media (max-width: 640px){
.nav{margin:10px 18px 0}
.nav-logo .brand-wordmark{height:70px;max-width:min(182px, 52vw)}
.nav-links .nav-enter{padding:7px 14px;font-size:14px}
.nav-enter-options{min-width:180px}
.wrap{padding:0 18px}
.hero{padding:18px 0 10px}
.hero .label{font-size:20px}
.hero h1{font-size:clamp(38px, 11vw, 46px);margin:10px 0 14px !important}
.hero .sub{font-size:15px;line-height:1.45;margin-bottom:16px}
.hero-stage{margin-top:22px;border-radius:18px;box-shadow:5px 5px 0 0 var(--fg)}
.hero-trailer-play{width:56px;height:40px;bottom:16px}
.cat-banner{padding-bottom:72px}
.cat-banner-viewer{aspect-ratio:16/10;min-height:180px}
section.block{padding:64px 0}
section.block .label{display:none}
.manifesto,.hip4,.friends,.universe{gap:24px}
.manifesto h2,.hip4-copy h2,.singapurr-copy h2,.friends-copy h2,.universe h2{margin:0 0 14px}
.manifesto-copy p,.hip4-copy p,.singapurr-copy p,.friends-copy p{font-size:16px;line-height:1.58;margin-bottom:12px}
.manifesto-gallery{display:grid;grid-template-columns:1fr;gap:22px;min-height:0}
.manifesto-art:first-child,.manifesto-art:nth-child(2){position:relative;right:auto;bottom:auto;width:100%;margin:0}
.hip4-art{border-radius:18px;box-shadow:5px 5px 0 0 var(--fg)}
.hip4-copy h2{margin-bottom:16px}
.singapurr-art{border-radius:18px;box-shadow:5px 5px 0 0 var(--fg)}
.singapurr-copy h2{margin-bottom:16px}
.section-actions{margin-top:20px}
.section-actions .btn{font-size:14px;padding:10px 19px}
.friends-art{border-radius:18px;box-shadow:5px 5px 0 0 var(--fg)}
.friends-copy h2{margin-bottom:16px}
footer{margin-top:36px}
.foot{align-items:center}
.foot-links{gap:16px}
.footer-wordmark{width:min(112px, 38vw)}
.footer-credit{gap:8px}
.footer-credit .hand{display:block;white-space:nowrap}
.footer-sticker{width:40px;height:40px;flex-basis:40px}
}