:root { --navy:#070a14; --bg:#0b090d; --text:#ece6dc; --dim:#a69d91; --gold:#e0b860; --ember:#ff7a3c; --line:#2a2430; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 Georgia,"Times New Roman",serif; }
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
a { color:var(--gold); }
header.top { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); background:rgba(11,9,13,.85); }
header .logo { display:flex; align-items:center; gap:12px; font:700 16px/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-decoration:none; }
header .logo img { border-radius:8px; }
header nav { display:flex; align-items:center; gap:20px; font:14px system-ui,sans-serif; }
header nav > a, header nav summary { color:var(--dim); text-decoration:none; cursor:pointer; }
header nav > a:hover, header nav summary:hover, details.games[open] summary { color:var(--gold); }
details.games { position:relative; }
details.games summary { list-style:none; padding:6px 0; }
details.games summary::-webkit-details-marker { display:none; }
details.games summary::after { content:" ▾"; font-size:11px; }
details.games .menu { position:absolute; right:0; top:calc(100% + 10px); min-width:270px; background:#120f17; border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:0 16px 40px rgba(0,0,0,.6); }
details.games .menu a { display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; color:var(--text); text-decoration:none; }
details.games .menu a:hover { background:#1d1823; }
details.games .menu img { border-radius:10px; }
details.games .menu b { display:block; color:var(--gold); font:600 15px system-ui,sans-serif; }
details.games .menu small { color:var(--dim); font-size:12px; }
details.games .soon { display:block; padding:8px 10px 4px; color:#6f675e; font-size:12px; border-top:1px solid var(--line); margin-top:4px; }
.hero-in { position:relative; z-index:1; pointer-events:none; }
.hero-in a { pointer-events:auto; }
.hero-in h1 { font-size:clamp(44px, 9vw, 92px); margin:0; letter-spacing:.06em; color:var(--gold); text-shadow:0 0 40px rgba(255,122,60,.35); }
.hero-in > p { max-width:640px; margin:18px auto 0; color:var(--dim); font-size:19px; }
.cta { display:inline-block; margin-top:34px; padding:14px 30px; border:1px solid var(--gold); color:var(--gold); text-decoration:none; font:600 15px system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; max-width:1100px; margin:0 auto; padding:60px 24px; }
.features div { border-top:1px solid var(--line); padding-top:18px; }
.features h3 { margin:0 0 8px; color:var(--ember); font:600 15px system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.features p { margin:0; color:var(--dim); }
.doc { max-width:820px; margin:0 auto; padding:30px 24px 70px; }
.doc h1 { color:var(--gold); } .doc h2 { color:var(--ember); font-size:20px; margin-top:34px; }
footer { margin-top:auto; border-top:1px solid var(--line); text-align:center; color:var(--dim); padding:22px 20px; font:13px system-ui,sans-serif; }
footer a { margin:0 10px; }

.hero-in { position:relative; z-index:1; text-align:center; pointer-events:none; }
.hero-in a { pointer-events:auto; }
.hero-in h1 { font-size:clamp(40px, 8.5vw, 88px); margin:0; letter-spacing:.06em; color:var(--gold); text-shadow:0 0 40px rgba(255,122,60,.35); }
.hero-in > p { max-width:640px; margin:18px auto 0; color:var(--dim); font-size:19px; }
/* studio home: the southern sky */
.studio-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:80vh; padding:70px 20px; background:radial-gradient(ellipse at 70% 30%, #1a2647 0%, #0c1328 45%, var(--navy) 80%); touch-action:pan-y; }
.studio-hero.small { min-height:60vh; }
.studio-hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.studio-hero .mark { border-radius:26px; box-shadow:0 0 50px rgba(120,150,255,.25); margin-bottom:16px; }
.studio-hero h1 { color:#f3e6c4; text-shadow:0 0 30px rgba(180,200,255,.25); }
.studio-hero h1 span { display:block; font-size:.32em; letter-spacing:.55em; color:var(--gold); margin-top:10px; }
/* games list */
.games-list, .about { max-width:1100px; margin:0 auto; padding:60px 24px 10px; }
.games-list h2, .about h2 { color:var(--gold); font-size:26px; margin:0 0 22px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.card-game { display:flex; flex-direction:column; background:#110e14; border:1px solid var(--line); border-radius:14px; overflow:hidden; color:var(--text); text-decoration:none; transition:transform .2s, border-color .2s; }
a.card-game:hover { transform:translateY(-3px); border-color:#5a4426; }
.card-game .cover { display:block; aspect-ratio:2/1; overflow:hidden; } .card-game .cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
a.card-game:hover .cover img { transform:scale(1.05); }
.card-game .body { display:flex; align-items:center; gap:14px; padding:16px 18px 6px; }
.card-game .gicon { border-radius:14px; margin-top:-46px; border:3px solid #110e14; }
.card-game b { display:block; color:var(--gold); font:700 20px Georgia,serif; } .card-game small { color:var(--dim); font:13px system-ui,sans-serif; }
.card-game .desc { padding:4px 18px 20px; color:var(--dim); }
.card-game.next { border-style:dashed; justify-content:center; min-height:200px; opacity:.7; }
.about p { color:var(--dim); max-width:760px; font-size:17px; }
/* a game's page: its own art as the background */
.game-hero { position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; min-height:88vh; padding:70px 20px 56px; background:#0b090d; --lx:50%; --ly:45%; }
.game-hero .art { position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; transform:scale(1.04); will-change:transform; }
.game-hero .shade { position:absolute; inset:0; background:radial-gradient(circle at var(--lx) var(--ly), rgba(255,150,60,.16), rgba(0,0,0,0) 32%), linear-gradient(180deg, rgba(11,9,13,.35) 0%, rgba(11,9,13,0) 18%, rgba(11,9,13,0) 42%, rgba(11,9,13,.82) 72%, rgba(11,9,13,.97) 100%); }
.game-hero .gicon { width:112px; height:112px; border-radius:24px; box-shadow:0 0 50px rgba(170,90,255,.45); margin-bottom:12px; }
.game-hero .hero-in h1 { font-size:clamp(40px, 7.5vw, 78px); }
.game-hero .hero-in > p { color:#d8cfc2; text-shadow:0 1px 8px rgba(0,0,0,.8); }
.game-hero { justify-content:flex-start; padding-left:max(24px, calc((100vw - 1100px) / 2)); }
.game-hero .hero-in { text-align:left; max-width:560px; }
.game-hero .hero-in > p { margin-left:0; }
.game-hero .shade { background:radial-gradient(circle at var(--lx) var(--ly), rgba(255,150,60,.14), rgba(0,0,0,0) 30%), linear-gradient(90deg, rgba(11,9,13,.88) 0%, rgba(11,9,13,.55) 30%, rgba(11,9,13,0) 55%), linear-gradient(180deg, rgba(11,9,13,.3) 0%, rgba(11,9,13,0) 20%, rgba(11,9,13,0) 70%, rgba(11,9,13,.9) 100%); }
@media (max-width: 760px) {
  .game-hero { justify-content:center; padding-left:20px; }
  .game-hero .hero-in { text-align:center; }
  .game-hero .hero-in > p { margin:14px auto 0; }
  .game-hero { min-height:auto; padding-top:calc(56vw + 10px); padding-bottom:40px; }
  .game-hero .art { inset:0 auto auto -3%; width:106%; height:calc(56vw + 60px); object-position:50% 40%; }
  .game-hero .shade { background:linear-gradient(180deg, rgba(11,9,13,.25) 0%, rgba(11,9,13,0) 10%, rgba(11,9,13,0) calc(56vw - 60px), rgba(11,9,13,1) calc(56vw + 60px)); }
}
.crumb { font:13px system-ui,sans-serif; color:var(--dim) !important; margin:0 0 18px !important; } .crumb a { color:var(--gold); text-decoration:none; }
@media (max-width: 640px) { header.top { padding:12px 14px; } header .logo span { font-size:13px; } header nav { gap:14px; } details.games .menu { right:-60px; } }