:root{color-scheme:dark;--bg:#160b16;--pink:#ff2e88;--teal:#43d7c3;--gold:#ffd24a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#fff;font:16px/1.55 system-ui,-apple-system,sans-serif}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
main{max-width:1100px;margin:auto}
header{position:absolute;z-index:2;left:50%;transform:translateX(-50%);width:min(100%,1100px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left))}
.brand,.eyebrow{color:var(--teal);font-size:11px;font-weight:900;letter-spacing:.24em}
.back{color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-decoration:none}
.hero{min-height:min(800px,100svh);display:flex;align-items:flex-end;padding:120px 20px 64px;background:linear-gradient(180deg,#08091288 0%,#160b16bb 52%,#160b16 100%),url('/assets/splash.jpg') center 22%/cover no-repeat}
.hero-inner{width:min(690px,100%);margin:0 auto;text-align:center;text-shadow:0 2px 9px #000}
/* The approved painting already has the game title painted into it. */
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero p{max-width:650px;margin:10px auto;color:#f7eaf2;font-size:clamp(15px,2vw,19px)}
.online-note{padding:11px 15px;border:1px solid #ffd24a77;border-radius:12px;background:#1b101be8;font-size:14px!important}
.online-note strong{color:var(--gold)}
.install-action{display:block;width:min(530px,100%);min-height:66px;margin:24px auto 8px;border:1px solid #ffc5df;border-radius:12px;background:linear-gradient(100deg,#ff2e88,#ff7a2e);box-shadow:0 10px 35px #ff2e8844;color:#fff;font-size:17px;font-weight:950;letter-spacing:.14em;cursor:pointer}
.install-action:hover{filter:brightness(1.12)}
.status{min-height:26px;font-size:12px!important;color:#d8e8e4!important}
.details,.save-card{margin:0 20px 24px;padding:26px;max-width:850px;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(135deg,#251427,#111a22)}
.details{margin:0 auto 24px}
.details h2,.save-card h2{margin:0 0 8px;font-size:clamp(22px,4vw,32px);line-height:1.15;letter-spacing:.045em}
.section-intro{margin:0 0 18px;color:#d9cad9}
.device{margin-top:10px;border:1px solid #ffffff30;border-radius:12px;background:#110d17}
.device[open]{border-color:#43d7c377}
.device summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:15px 18px;cursor:pointer;list-style:none}
.device summary::-webkit-details-marker{display:none}
.device summary::after{content:'⌄';font-size:22px;color:var(--gold)}
.device[open] summary::after{content:'⌃'}
.device-name{font-size:14px;font-weight:900;letter-spacing:.08em}
.device-hint{margin-left:auto;color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.1em;text-align:right}
.device ol,.save-card ol{margin:0;padding:0 22px 12px 42px}
.device li,.save-card li{padding:4px 0 4px 5px;color:#e9dfea}
.device li::marker,.save-card li::marker{color:var(--gold);font-weight:900}
.device p{padding:0 18px 18px;margin:0;color:#b6e7dc;font-size:13px}
.save-card{margin-left:auto;margin-right:auto}
.save-card{border-color:#43d7c366}
footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 20px max(42px,env(safe-area-inset-bottom));text-align:center}
footer a{color:var(--gold);font-weight:900;letter-spacing:.08em}
footer small{color:#ae9aaa;font-size:10px;letter-spacing:.18em}
@media(max-width:650px){header{position:relative;left:auto;transform:none;min-height:64px;background:#160b16;padding:12px 16px}.brand{max-width:175px;line-height:1.25}.back{text-align:right}.hero{min-height:0;padding:calc(100vw * .56 + 18px) 16px 35px;background-color:#160b16;background-size:cover,100% auto;background-position:center,center top}.hero-inner{margin:0 auto}.hero p{font-size:15px}.details,.save-card{margin:0 12px 14px;padding:20px 16px}.device summary{padding:12px}.device-name{font-size:12px}.device-hint{font-size:9px}.device ol{padding-left:32px}}
@media(max-height:580px) and (orientation:landscape){.hero{min-height:580px;padding-top:90px}.hero-inner{margin:auto auto 0}h1{font-size:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}