/* =====================================================================
   BROKEN ARK STUDIOS — games world
   Origin: the studio logo (gunmetal warship, amber energy, broken ring)
   and Legacy of the Ark (chrome + cyan HUD). Cinematic, dark, angular,
   HUD-flavoured. body[data-page="games"]  = studio (amber)
                  body[data-page="legacy"] = the game (cyan/steel)
   ===================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/archivo-700.woff2') format('woff2');}

body[data-page="games"],body[data-page="legacy"]{
  --void:#05080d; --panel:#0b1119; --panel-2:#0f1722; --edge:rgba(120,170,220,.14);
  --ink:#eaf2fb; --muted:#8a99ad; --amber:#f59331; --amber-2:#ffc06b; --cyan:#41e2ff; --cyan-2:#8af3ff;
  --accent:var(--amber); --accent-2:var(--amber-2);
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace; --sans:'Archivo',system-ui,sans-serif;
  background:var(--void); color:var(--ink); padding-top:var(--nav-h);
  font-family:var(--sans); line-height:1.6; overflow-x:hidden;
}
body[data-page="legacy"]{--accent:var(--cyan);--accent-2:var(--cyan-2)}
/* starfield + nebula backdrop */
body[data-page="games"]::before,body[data-page="legacy"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 82% -6%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%),
    radial-gradient(46vw 40vh at -8% 20%, rgba(65,120,180,.16), transparent 60%),
    var(--void);
}
body[data-page="games"]::after,body[data-page="legacy"]::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 90% 20%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 12% 70%,rgba(255,255,255,.5),transparent);
  background-size:cover;
}
.g-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
body[data-page="games"] h1,body[data-page="games"] h2,body[data-page="games"] h3,
body[data-page="legacy"] h1,body[data-page="legacy"] h2,body[data-page="legacy"] h3{
  font-weight:800;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase}
.hud-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:.6em}
.hud-label::before{content:"▸";opacity:.8}

/* chamfered panel */
.panel{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--edge);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  position:relative}
.btn-g{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:.84rem;font-weight:600;padding:.95em 1.5em;color:#040a10;background:var(--accent);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:transform .18s,box-shadow .18s}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 12px 36px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-g.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn-g.ghost:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---- HERO (studio) ------------------------------------------------- */
.g-hero{position:relative;min-height:min(88vh,760px);display:grid;place-items:center;text-align:center;padding:clamp(48px,8vw,90px) 0}
.g-hero .ship{width:min(60%,420px);filter:drop-shadow(0 0 50px color-mix(in srgb,var(--accent) 60%,transparent));
  animation:hover 6s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.g-hero .ship{animation:none}}
.g-hero h1{font-size:clamp(2.6rem,7vw,5.6rem);margin:.4rem 0 0}
.g-hero h1 .thin{display:block;font-size:.34em;letter-spacing:.5em;color:var(--muted);font-weight:600;margin-top:1rem}
.g-hero p{color:var(--muted);max-width:54ch;margin:1.4rem auto 0;font-size:clamp(1rem,1.5vw,1.2rem);text-transform:none}
.g-hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px)}

/* ---- ABOUT THE STUDIO (amber, solo dev) ---------------------------- */
.g-about{padding:clamp(48px,7vw,100px) 0;border-top:1px solid var(--edge)}
.g-about .inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,60px);align-items:center}
.g-about .emblem{display:grid;place-items:center}
.g-about .emblem img{width:min(82%,340px);filter:drop-shadow(0 0 44px color-mix(in srgb,var(--amber) 55%,transparent))}
.g-about h2{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--amber-2);margin:.4rem 0 1rem}
.g-about p{color:var(--muted);text-transform:none;margin-bottom:1rem;max-width:58ch}
.g-about p strong{color:var(--ink)}
.g-about .solo{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.g-about .solo span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-2);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);padding:.45em .85em}
@media(max-width:820px){.g-about .inner{grid-template-columns:1fr}.g-about .emblem{max-width:300px}}

/* ---- FEATURED GAME (contained, game-themed cyan card) -------------- */
.g-feature{padding:clamp(48px,7vw,100px) 0;border-top:1px solid var(--edge)}
.g-feature .gamebox{background:linear-gradient(160deg,#08151e,#0a0f17);
  border:1px solid color-mix(in srgb,var(--cyan) 34%,transparent);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  padding:clamp(26px,4vw,52px);box-shadow:0 0 70px -26px rgba(65,226,255,.4)}
.g-feature .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
.g-feature .gamelogo{width:100%;max-width:520px;filter:drop-shadow(0 10px 30px rgba(65,226,255,.3))}
.g-feature h2{font-size:clamp(1.4rem,3vw,2.2rem);color:var(--cyan);margin:.4rem 0 1rem}
.g-feature .tag{font-family:var(--mono);color:var(--cyan-2);letter-spacing:.06em;text-transform:none;margin-bottom:1rem}
.g-feature p{color:var(--muted);text-transform:none;margin-bottom:1rem;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0}
.chips span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--cyan-2);border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);padding:.4em .8em;text-transform:uppercase}
.g-feature .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.g-feature .media{position:relative}
.g-feature .media img{width:100%;border:1px solid var(--edge);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}

/* ---- CORE LOOP ----------------------------------------------------- */
.g-loop{padding:clamp(48px,7vw,100px) 0}
.g-head{max-width:640px;margin-bottom:clamp(26px,4vw,48px)}
.g-head h2{font-size:clamp(1.8rem,4vw,3rem);margin:.5rem 0}
.g-head p{color:var(--muted);text-transform:none;font-size:1.05rem}
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.loop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.loop-grid{grid-template-columns:1fr}}
.loop-card{padding:clamp(20px,2.4vw,28px)}
.loop-card .ic{width:46px;height:46px;display:grid;place-items:center;margin-bottom:1rem;
  background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.loop-card .ic img{width:26px;height:26px}
.loop-card h3{font-size:1.05rem;letter-spacing:0}
.loop-card p{color:var(--muted);text-transform:none;font-size:.92rem;margin-top:.5rem}

/* ---- SCREENS ------------------------------------------------------- */
.g-shots{padding:clamp(48px,7vw,100px) 0;border-top:1px solid var(--edge)}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.shot-grid{grid-template-columns:repeat(2,1fr)}}
.shot-grid img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--edge);transition:transform .3s,border-color .3s}
.shot-grid img:hover{transform:scale(1.02);border-color:var(--cyan)}

/* ---- CREW ---------------------------------------------------------- */
.g-crew{padding:clamp(48px,7vw,100px) 0}
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.crew-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.crew-grid{grid-template-columns:1fr}}
.crew-card{padding:0;overflow:hidden}
.crew-card img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.9)}
.crew-card .c-meta{padding:14px 16px 18px}
.crew-card h3{font-size:1rem;letter-spacing:0}
.crew-card span{font-family:var(--mono);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}

/* ---- ETHOS / CTA --------------------------------------------------- */
.g-ethos{padding:clamp(48px,7vw,100px) 0;border-top:1px solid var(--edge)}
.ethos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem}
@media(max-width:760px){.ethos-grid{grid-template-columns:1fr}}
.ethos-grid .panel{padding:24px}
.ethos-grid h3{font-size:1rem;color:var(--accent);letter-spacing:.04em}
.ethos-grid p{color:var(--muted);text-transform:none;font-size:.92rem;margin-top:.5rem}
.g-cta{text-align:center;padding:clamp(56px,8vw,120px) 0}
.g-cta h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.g-cta p{color:var(--muted);text-transform:none;max-width:50ch;margin:1rem auto 0}
.g-cta .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

@media(max-width:860px){.g-feature .inner{grid-template-columns:1fr}.g-feature .media{order:-1}}