/* Moai Daddy / VS Interactive / Rare Rocks — one stylesheet for the whole site.
   Brand kept from the original site: ink navy, sun yellow, sticker boxes with hard shadows. */
:root{
  --ink:#101642; --sun:#FDDD02; --sun-deep:#F5B800; --neon:#37E6FF; --paper:#FFFDF6;
  --stone:#8E8E93; --muted:#5b6180; --line:#101642;
  /* Rare Rocks colours (from the game) */
  --rr-lilac:#F3EDFF; --rr-ink:#2a2238; --rr-yellow:#FFF3B0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Fredoka',sans-serif;line-height:1.08;letter-spacing:-.01em}
:focus-visible{outline:4px solid var(--neon);outline-offset:3px;border-radius:8px}
.wrap{width:min(1100px,92vw);margin:0 auto}
p{max-width:62ch}

/* buttons and sticker boxes */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;padding:.7em 1.4em;border-radius:999px;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-decoration:none;background:var(--sun);color:var(--ink);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:#fff}
.btn[aria-disabled="true"]{background:#fff;color:var(--muted);cursor:default;box-shadow:5px 5px 0 var(--stone);border-color:var(--stone)}
.btn[aria-disabled="true"]:hover{transform:none}
.sticker{background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,253,246,.92);backdrop-filter:blur(10px);border-bottom:4px solid var(--ink)}
nav{display:flex;align-items:center;gap:24px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.25rem;margin-right:auto;white-space:nowrap}
.brand img{width:44px;height:44px;flex:none;border-radius:50%;object-fit:contain}
nav ul{display:flex;gap:22px;list-style:none;font-weight:800}
nav ul a{text-decoration:none;white-space:nowrap;padding:4px 0}
nav ul a:hover,nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media(max-width:600px){.brand span{display:none}.brand{flex:none}nav{gap:12px}nav ul{gap:12px;font-size:.92rem}}
@media(max-width:420px){.brand img{width:38px;height:38px}nav{gap:10px}nav ul{gap:10px;font-size:.84rem}}

/* sections */
section{padding:80px 0}
h2{font-size:clamp(2rem,4.6vw,3rem);font-weight:700;margin-bottom:.4em}
.lead{font-size:1.18rem;font-weight:500;max-width:56ch}
.muted{color:var(--muted)}

/* home hero: the moai is the hero */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.plate{width:100%;max-width:400px;border-radius:50%;filter:drop-shadow(10px 10px 0 var(--ink))}
.hero h1{font-size:clamp(3rem,8vw,5.6rem);font-weight:700;letter-spacing:-.025em;margin-bottom:.15em}
.hero .role{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:18px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:36px}.plate{max-width:280px}}

/* studio block on home + studio page */
.studio{background:var(--ink);color:#fff}
.studio .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.studio h2{color:var(--sun)}
.studio p{color:#dfe2f2}
.studio .btn{border-color:#fff;box-shadow:5px 5px 0 var(--neon)}
.studio .art{width:220px}
@media(max-width:820px){.studio .wrap{grid-template-columns:1fr}.studio .art{width:160px}}

/* a game card */
.game{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:26px;max-width:760px;text-decoration:none;transition:transform .12s,box-shadow .12s}
a.game:hover{transform:translate(2px,2px);box-shadow:6px 6px 0 var(--ink)}
.game img{width:120px;height:120px;border-radius:26px;border:4px solid var(--ink);image-rendering:pixelated}
.game h3{font-size:1.9rem;margin-bottom:6px}
.game p{margin-bottom:10px}
.status{display:inline-block;font-weight:800;font-size:.9rem;background:var(--rr-yellow);border:3px solid var(--ink);border-radius:999px;padding:2px 12px}
@media(max-width:560px){.game{grid-template-columns:1fr}.game img{width:96px;height:96px}}

/* studio page */
.page-hero{padding:64px 0 24px}
.page-hero h1{font-size:clamp(2.8rem,7vw,4.6rem);font-weight:700;margin-bottom:.2em}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
.values div h3{font-size:1.35rem;margin-bottom:6px}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* Rare Rocks page: the game's own colours and pixel font for its name */
.rr{--ink:#2a2238}
.rr-hero{background:var(--rr-yellow);border-bottom:4px solid var(--rr-ink);padding:56px 0 64px}
.rr-hero .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.rr-icon{width:180px;height:180px;border-radius:40px;border:5px solid var(--rr-ink);box-shadow:10px 10px 0 var(--rr-ink);image-rendering:pixelated}
.rr-title{font-family:'Pixelify Sans','Fredoka',sans-serif;font-weight:700;font-size:clamp(3rem,8vw,5.4rem);line-height:1;color:var(--rr-ink);margin-bottom:12px}
.rr-hero .lead{color:var(--rr-ink)}
.rr-hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px}
@media(max-width:700px){.rr-hero .wrap{grid-template-columns:1fr}.rr-icon{width:130px;height:130px}}
.shots{display:flex;gap:22px;overflow-x:auto;padding:8px 8px 22px;scroll-snap-type:x mandatory}
.shots figure{flex:0 0 auto;width:230px;scroll-snap-align:start}
.shots img{width:230px;border:4px solid var(--rr-ink);border-radius:24px;box-shadow:6px 6px 0 var(--rr-ink);image-rendering:pixelated}
.shots figcaption{font-weight:700;font-size:.95rem;margin-top:12px;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 48px;margin-top:16px}
.features h3{font-size:1.3rem;margin-bottom:4px;color:var(--rr-ink)}
@media(max-width:760px){.features{grid-template-columns:1fr}}
.facts{background:var(--rr-lilac);border-top:4px solid var(--rr-ink);border-bottom:4px solid var(--rr-ink)}
.facts dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;max-width:640px}
.facts dt{font-weight:800}

/* legal text */
.legal{padding:56px 0 80px}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.3em}
.legal h2{font-size:1.5rem;margin:1.8em 0 .4em}
.legal p,.legal li{max-width:68ch;margin-bottom:.8em}
.legal ul{padding-left:1.3em}

/* footer */
footer{border-top:4px solid var(--ink);padding:36px 0 44px;font-weight:600}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer .copy{margin-right:auto;color:var(--muted)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* VS Interactive logo */
.vs-tile{background:#fff;border:4px solid #fff;border-radius:26px;padding:26px 30px;box-shadow:8px 8px 0 var(--neon)}
.vs-tile img{width:200px;height:auto}
.studio .vs-tile img{width:200px}
.page-hero .vs-head{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-bottom:10px}
.page-hero .vs-head img{width:180px;height:auto}
.page-hero .vs-head h1{margin:0}
@media(max-width:820px){.vs-tile{justify-self:start}.vs-tile img,.studio .vs-tile img{width:150px}.page-hero .vs-head img{width:130px}}