/* MoWave Games — site styles
   Palette: ink (ground), tide (surface), current (deep wave), foam (links), crown gold (brand), paper (text) */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
:root{
  --ink:#070d1a;
  --tide:#0e1e38;
  --tide-2:#132a4c;
  --current:#1f4e8c;
  --foam:#8ec5f2;
  --gold:#5aaaf0;
  --gold-hi:#8ec5f2;
  --paper:#ecf1f7;
  --muted:#93a3ba;
  --line:rgba(236,241,247,.1);

  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1200px;
  --gutter:clamp(20px,4vw,40px);
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --header:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{font-family:var(--body);font-size:17px;line-height:1.6;background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--foam);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:12px}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header);display:flex;align-items:center;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,13,26,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center}
.logo img{height:30px;width:auto}
.logo:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:28px;list-style:none}
.nav a{color:var(--muted);font-weight:500;font-size:15px;padding:12px 0}
.nav a:hover{color:var(--paper);text-decoration:none}
.nav .btn{padding:10px 18px;font-size:15px;color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:16px;line-height:1;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s,border-color .2s,color .2s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-hi)}
.btn-ghost{border-color:rgba(236,241,247,.28);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--header) + 40px) 0 140px;
  background:
    radial-gradient(900px 600px at 78% 40%,rgba(90,170,240,.2),transparent 62%),
    radial-gradient(1100px 700px at 85% 110%,rgba(31,78,140,.55),transparent 60%),
    linear-gradient(180deg,#081022 0%,var(--ink) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(56px,9vw,128px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
.hero h1 .gold{color:var(--gold);display:block}
.hero p{margin-top:26px;font-size:clamp(17px,1.6vw,20px);color:#c3cfdf;max-width:34ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* the crown mark, tinted gold with a CSS mask so the same white logo file works everywhere */
.crest{position:relative;justify-self:center;width:min(240px,60%);aspect-ratio:200/207}
.crest .mark{position:absolute;inset:0;background:#fff;
  -webkit-mask:url(/assets/img/mark.svg) center/contain no-repeat;mask:url(/assets/img/mark.svg) center/contain no-repeat;
  filter:drop-shadow(0 12px 40px rgba(90,170,240,.45))}
.crest::after{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,170,240,.25),transparent);z-index:-1}

/* waves along the bottom of the hero */
.waves{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none}
.waves svg{max-width:none;position:absolute;bottom:0;left:0;width:200%;height:100%}
.waves .w1{animation:drift 26s linear infinite}
.waves .w2{animation:drift 18s linear infinite reverse}
.waves .w3{animation:drift 34s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* one entrance on load */
.enter{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.enter.d1{animation-delay:.08s}.enter.d2{animation-delay:.2s}.enter.d3{animation-delay:.32s}.enter.d4{animation-delay:.2s;animation-duration:1.3s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Sections ---------- */
.section{padding:clamp(80px,12vh,140px) 0;border-top:1px solid var(--line)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:48px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,80px);line-height:.95;text-transform:uppercase}
.section-head p{color:var(--muted);max-width:44ch}

/* ---------- Apps ---------- */
.apps{background:linear-gradient(180deg,var(--ink),#0a1630)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.app{display:flex;flex-direction:column;background:var(--tide);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:transform .2s ease,border-color .2s}
.app:hover{transform:translateY(-2px);border-color:rgba(90,170,240,.45)}
.app-art{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,var(--current),var(--tide-2) 60%,var(--ink))}
.app-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.app:hover .app-art img{transform:scale(1.03)}
.app-art .placeholder-mark{position:absolute;inset:28% 40%;background:#fff;opacity:.9;-webkit-mask:url(/assets/img/mark.svg) center/contain no-repeat;mask:url(/assets/img/mark.svg) center/contain no-repeat}
.app-body{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;margin-top:20px}
.app h3{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase}
.app .status{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--gold);background:rgba(90,170,240,.15);padding:4px 10px;border-radius:999px}
.app p{color:var(--muted);font-size:15px;margin-top:10px}
.qr{width:92px;border-radius:var(--r-sm);overflow:hidden;background:var(--paper);padding:4px}
.qr img{width:100%;height:auto}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px}
.store{flex:1 1 140px;display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:8px 16px;border-radius:var(--r-sm);border:1px solid rgba(236,241,247,.22);color:var(--paper);line-height:1.2;transition:border-color .2s,transform .15s}
.store small{font-size:11px;color:var(--muted)}
.store strong{font-size:16px;font-weight:600}
a.store:hover{border-color:var(--paper);text-decoration:none;transform:translateY(-2px)}
.store[aria-disabled="true"]{opacity:.55;cursor:default}

/* ---------- Studio ---------- */
.studio .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.studio .big{font-family:var(--display);font-weight:800;font-size:clamp(60px,8vw,118px);line-height:.88;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(142,197,242,.8)}
.studio .big span{display:block;color:var(--paper);-webkit-text-stroke:0}
.studio h2{margin-bottom:24px}
.studio p{color:#c3cfdf;max-width:52ch}
.studio p + p{margin-top:16px}
.facts{list-style:none;margin-top:32px;display:grid;gap:14px}
.facts li{display:flex;gap:14px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.facts strong{min-width:130px;color:var(--gold);font-weight:600}

/* ---------- Contact ---------- */
.contact{background:radial-gradient(800px 400px at 20% 100%,rgba(31,78,140,.45),transparent 70%),var(--ink)}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.contact p{color:#c3cfdf;margin-top:20px;max-width:46ch}
.contact .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.contact dl{display:grid;gap:22px}
.contact dt{font-size:14px;color:var(--muted)}
.contact dd{font-size:20px;margin-top:2px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:14px}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.site-footer img{height:22px;width:auto;opacity:.8}
.site-footer nav{display:flex;gap:24px}
.site-footer nav a{color:var(--muted);padding:12px 0}
.site-footer nav a:hover{color:var(--paper)}

/* ---------- Legal pages ---------- */
.legal{padding:calc(var(--header) + 64px) 0 96px}
.legal .wrap{max-width:780px}
.legal h1{font-family:var(--display);font-weight:800;font-size:clamp(48px,7vw,80px);line-height:.95;text-transform:uppercase}
.legal .meta{color:var(--muted);margin:12px 0 36px}
.legal h2{font-size:clamp(26px,3vw,32px);margin:40px 0 12px}
.legal p,.legal li{color:#c9d5e6}
.legal ul{padding-left:22px;margin:10px 0}
.legal li{margin:6px 0}
.legal p + p{margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .wrap,.studio .wrap,.contact .wrap{grid-template-columns:1fr}
  .crest{width:min(260px,60%);justify-self:start;order:-1}
  .hero{align-items:flex-start}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav li:not(:last-child){display:none}
  .hero .actions .btn,.contact .actions .btn{flex:1 1 100%}
  .waves{height:130px}
  .app-body{grid-template-columns:1fr}
  .qr{display:none}
  .facts li{flex-direction:column;gap:2px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .enter{opacity:1;transform:none}
  html{scroll-behavior:auto}
}