:root{
  /* comfy palette: warm paper, soft ink, terracotta + sage */
  --bg:#f5efe6; --bg2:#efe7db; --card:#fffdf9; --line:#e7ddcd;
  --fg:#3d3630; --mut:#8a7d6f; --acc:#c2724f; --acc2:#8ca678;
  --max:1080px;
  --serif:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --shadow:0 2px 4px rgba(80,60,40,.04),0 10px 28px rgba(80,60,40,.07);
  /* placeholder hatch (theme-overridden) */
  --ph1:#efe7db; --ph2:#e9e0d0; --ph-fg:#b3a692; --ph-b:#9a8b76;
  --nav-bg:rgba(245,239,230,.88);
  --glow1:rgba(140,166,120,.20); --glow2:rgba(194,114,79,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16.5px/1.7 "Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* subtle warm paper-grain — sits above the paper bg, below all content, ignores clicks */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E")}
body.serious::before{display:none} /* dark theme reads clean without grain */
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---- serious theme: darker sub-pages (Helldiver, Eagle One) ---- */
body.serious{
  --bg:#1a1920; --bg2:#22212a; --card:#26242f; --line:#393644;
  --fg:#ece9f2; --mut:#a6a0b4; --acc:#d3805a; --acc2:#8aa0b4;
  --shadow:0 2px 4px rgba(0,0,0,.25),0 12px 30px rgba(0,0,0,.4);
  --ph1:#22212a; --ph2:#26242f; --ph-fg:#6f6a7d; --ph-b:#8b8598;
  --nav-bg:rgba(26,25,32,.86);
  --glow1:rgba(138,160,180,.10); --glow2:rgba(211,128,90,.14);
}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:26px;height:60px}
.brand{display:inline-flex;align-items:center;font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:18px}
.brand::before{content:"";width:22px;height:22px;flex:none;margin-inline-end:10px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23c2724f'/><path d='M16 25V15' stroke='%23fff3ea' stroke-width='2.4' stroke-linecap='round'/><ellipse cx='11.6' cy='14' rx='3.8' ry='6' transform='rotate(-34 11.6 14)' fill='%238ca678'/><ellipse cx='20.4' cy='12.6' rx='3.8' ry='6' transform='rotate(34 20.4 12.6)' fill='%23fff3ea'/></svg>") center/contain no-repeat}
.brand span{color:inherit}
nav a.lnk{color:var(--mut);font-size:14px}
nav a.lnk:hover{color:var(--fg)}
nav .sp{margin-left:auto}

/* ---- hero ---- */
header{padding:92px 0 74px;background:
  radial-gradient(900px 420px at 15% -10%, var(--glow1), transparent 62%),
  radial-gradient(760px 360px at 92% 0%, var(--glow2), transparent 62%)}
header .hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero-art img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
h1{font-family:var(--serif);font-size:clamp(37px,6vw,60px);line-height:1.08;margin:0 0 18px;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--acc)}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--mut);max-width:60ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:11px 21px;border-radius:12px;font-weight:600;font-size:15px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);transition:.18s}
.btn:hover{border-color:var(--acc);transform:translateY(-1px)}
.btn.pri{background:var(--acc);color:#fff8f2;border-color:var(--acc)}
.btn.pri:hover{filter:brightness(1.05)}

/* ---- sections ---- */
section{padding:66px 0;border-top:1px solid var(--line)}
h2{font-family:var(--serif);font-size:clamp(25px,3.4vw,32px);margin:0 0 6px;letter-spacing:-.01em}
h3{font-family:var(--serif)}
.sub{color:var(--mut);margin:0 0 30px;max-width:62ch}

/* ---- game cards ---- */
.game{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:26px;box-shadow:var(--shadow)}
.game .shot{position:relative;aspect-ratio:16/9;background:var(--bg2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover;display:block}
.game .body{padding:26px 28px}
.game h3{font-family:var(--serif);margin:0 0 4px;font-size:23px;letter-spacing:-.01em}
.tagline{color:var(--acc);font-size:14px;font-weight:600;margin:0 0 12px}
.game p{color:var(--mut);margin:0 0 14px;font-size:15px}
ul.feat{list-style:none;padding:0;margin:0 0 20px}
ul.feat li{color:var(--mut);font-size:14.5px;padding-left:19px;position:relative;margin:5px 0}
ul.feat li:before{content:"▸";position:absolute;left:0;color:var(--acc)}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.tag{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);border-radius:20px;padding:3px 11px}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--ph-fg);font-size:13px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--ph1),var(--ph1) 11px,var(--ph2) 11px,var(--ph2) 22px)}
.ph b{color:var(--ph-b);font-size:14px;letter-spacing:.04em}

/* ---- games as a 2-up grid (vertical cards) ---- */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.games-grid .game{grid-template-columns:1fr;margin-bottom:0}
/* single-game launch state: one card, centered at a comfortable width */
.games-grid.solo{grid-template-columns:1fr;max-width:660px;margin:0 auto}

/* card bodies read from the top; without this a card whose row-mate runs taller
   gets its rows spread down the extra space and the text floats mid-card */
.game{align-content:start}

/* app name with its launcher icon beside it */
.app-name{display:flex;align-items:center;gap:10px}
.app-name img{width:30px;height:30px;flex:none}
.detail h1.app-name{gap:14px}
.detail h1.app-name img{width:46px;height:46px}

/* ---- apps: portrait phone screenshots ---- */
/* card shot = triptych of portrait crops, anchored to the top of each screen.
   images are absolutely positioned thirds so their tall intrinsic height can
   never stretch the 16:10 aspect box (flex/grid children kept doing exactly that) */
.game .shot.triptych{aspect-ratio:16/10}
.game .shot.triptych img{position:absolute;top:0;height:100%;
  width:calc((100% - 4px)/3);object-fit:cover;object-position:top center}
.game .shot.triptych img:nth-child(2){left:calc((100% - 4px)/3 + 2px)}
.game .shot.triptych img:nth-child(3){left:calc(((100% - 4px)/3 + 2px)*2)}
/* sub-page = the three full screens side by side */
.app-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 30px}
.app-shots img{width:100%;display:block;border-radius:18px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--bg2)}

/* ---- sub-page: game / app detail ---- */
.pagehead{padding:34px 0 0}
.backlink{color:var(--mut);font-size:14px}
.backlink:hover{color:var(--fg)}
.detail{padding:20px 0 46px}
.detail .shot{position:relative;aspect-ratio:16/9;background:var(--bg2);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;margin:0 0 30px;box-shadow:var(--shadow)}
.detail .shot img{width:100%;height:100%;object-fit:cover;display:block}
.detail h1{font-family:var(--serif);font-size:clamp(30px,5vw,46px);line-height:1.08;margin:0 0 8px;letter-spacing:-.015em}
.detail .lead{font-size:clamp(16px,2vw,18px);color:var(--mut);max-width:64ch;margin:14px 0 24px}
.detail ul.feat{margin-bottom:26px}

/* ---- gallery ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.gal .cell{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg2);
  border:1px solid var(--line);position:relative;box-shadow:var(--shadow)}
.gal .cell img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.gal .cell:hover img{transform:scale(1.04)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:13px;
  font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}

/* ---- crew page portraits ---- */
.crew .portrait{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg2);
  border:1px solid var(--line);position:relative;box-shadow:var(--shadow);margin-bottom:14px}
.crew .portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 3D asset sheets ---- */
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sheets.wide{grid-template-columns:1fr}
.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.sheet img{width:100%;display:block;background:var(--bg2)}
.sheet figcaption{padding:9px 13px;font-size:13px;color:var(--mut);border-top:1px solid var(--line)}
.sheet figcaption b{color:var(--fg);font-weight:600}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.specs .tag{border-color:var(--line)}

/* ---- craft strip ---- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.col-art{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;
  border-radius:10px;display:block;margin:0 0 14px;border:1px solid var(--line)}
.col h4{font-family:var(--serif);margin:0 0 7px;font-size:16px;letter-spacing:-.005em}
.col p{margin:0;color:var(--mut);font-size:14px}

footer{border-top:1px solid var(--line);padding:46px 0 50px;color:var(--mut);font-size:14px}
footer a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--fg)}
.foot{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin:0 0 26px}
.foot-tag{margin:12px 0 0;max-width:42ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:start}
.foot-nav a,.foot-brand .brand{text-decoration:none}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  border-top:1px solid var(--line);padding-top:20px}
.foot-legal p{margin:0;font-size:13px}

/* ---- a11y: visible keyboard focus + skip-to-content ---- */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:fixed;left:8px;top:-48px;z-index:40;background:var(--acc);color:#fff8f2;
  padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:top .18s}
.skip:focus{top:8px}

/* ---- section kicker (rhythm cue above each h2) ---- */
.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc2);margin:0 0 6px}

/* ---- reveal on scroll: progressive enhancement, opt-in via .reveal + html.js ---- */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(18px)}
  html.js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
}

@media (max-width:760px){
  header .hero{grid-template-columns:1fr;gap:28px}
  .foot{grid-template-columns:1fr;gap:22px}
  .games-grid{grid-template-columns:1fr}
  .game{grid-template-columns:1fr}
  .app-shots{gap:8px}
  nav .wrap{gap:16px}
  nav a.lnk.hide-sm{display:none}
}