:root { color-scheme: dark; --ink:#14121a; --paper:#fff8e6; --gold:#ffe23d; --sea:#73e2da; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; }
body { margin:0; background:#071b2a; color:var(--paper); font:15px/1.5 system-ui,sans-serif; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { font:800 12px/1.2 system-ui,sans-serif; cursor:pointer; border:2px solid var(--ink); background:var(--paper); color:var(--ink); padding:10px 14px; box-shadow:3px 3px 0 var(--ink); border-radius:3px; transition:transform .15s,box-shadow .15s; }
button:hover:not(:disabled) { transform:translate(-1px,-2px) rotate(-1deg); box-shadow:4px 5px 0 var(--ink); }
button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:3px solid var(--sea); outline-offset:5px; }
.back { color:var(--ink); font-size:12px; font-weight:700; text-decoration:none; }
.back:hover { text-decoration:underline; }
h1 span { color:var(--gold); }
main { width:100%; height:100%; }
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#071b2a; overflow:hidden; }
/* Keep Unity's 8:5 interface proportional, including on ultrawide screens. */
#game { display:block; width:min(100vw,160vh); height:min(100vh,62.5vw); width:min(100vw,160dvh); height:min(100dvh,62.5vw); outline:none; touch-action:none; }
#stage:fullscreen { width:100%; height:100%; }
.launch-links { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
#fullscreen { font-size:10px; padding:8px; }
#launch { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:5%; overflow:auto; background:linear-gradient(90deg,#072f5805,#072f5870),url(cover.jpg) center/cover; }
.launch-card { width:365px; max-width:100%; background:var(--paper); color:var(--ink); padding:28px; border:3px solid var(--ink); box-shadow:7px 8px var(--ink); border-radius:3px; transform:rotate(1deg); }
.eyebrow { font-size:10px; font-weight:900; letter-spacing:1.4px; }
h1 { font:italic 900 clamp(32px,4.5vw,54px)/1.1 Impact,'Arial Black',sans-serif; margin:13px 0; letter-spacing:1px; }
h1 span { -webkit-text-stroke:2px var(--ink); }
.launch-card p { font-weight:650; font-size:20px; line-height:1.4; margin:14px 0 20px; }
#play { background:var(--gold); width:100%; font-size:19px; padding:16px; }
.launch-card .fine { font-weight:500; font-size:12px; line-height:1.6; margin:20px 0 0; }
#loading { margin-top:20px; }
#progress { display:block; width:100%; height:18px; accent-color:#10a994; border:2px solid var(--ink); border-radius:2px; background:#e5decd; }
#progress::-webkit-progress-bar { background:#e5decd; }
#progress::-webkit-progress-value { background:#10a994; }
#status { font-size:13px; margin:10px 0 0; }
[hidden] { display:none !important; }
@media(max-width:700px), (max-height:550px) { #launch{padding:20px;justify-content:center;} .launch-card{width:300px;padding:16px;transform:none;} .eyebrow{font-size:8px;} h1{font-size:36px;margin:5px 0;} .launch-card p{font-size:14px;margin:6px 0 10px;} #play{font-size:15px;padding:10px;} .launch-card .fine{font-size:10px;margin-top:10px;} .launch-links{margin-top:12px;} }
@media(max-height:360px) { #launch { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{transition:none !important;} .launch-card{transform:none;} }