*{box-sizing:border-box}
body{margin:0;color:#f2ead4;background:#091613;font:14px/1.5 system-ui,sans-serif;min-height:100svh;display:grid;place-items:center}
main{width:100%}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:wait}
button:focus-visible,a:focus-visible{outline:2px solid #f8d27d;outline-offset:4px}
#cinema{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#091613}
canvas{display:block;width:100%;height:100%}
.actions{position:absolute;z-index:5;top:clamp(12px,2.2vw,36px);right:clamp(12px,2.2vw,36px);display:flex;gap:10px}
.actions button{min-height:44px;border:1px solid #ffffff40;border-radius:5px;background:#10211cbd;padding:9px 16px;text-shadow:0 1px 3px #0008;backdrop-filter:blur(8px)}
.actions button:hover{background:#233c2fee}
#loading{position:absolute;inset:0;background:#14231f;display:grid;align-content:center;justify-items:center;z-index:4;color:#ddceaa}
.loading-mark{font-size:52px}#loading p{margin-bottom:6px}#loading small{color:#9faa94}
#retry{margin-top:20px;padding:10px 24px;background:#d9b972;color:#17231d;border:0;border-radius:4px}
[hidden]{display:none!important}
#ending{position:absolute;left:0;bottom:0;width:53%;padding:5% 4% 3%;background:radial-gradient(ellipse at 25% 100%,#0b1715ed 10%,#0b1715ad 50%,transparent 75%);text-shadow:0 2px 14px #07110b}
h1{margin:10px 0;line-height:1}.game-logo{display:block;width:min(100%,480px);height:auto;filter:drop-shadow(0 5px 12px #0008)}
.eyebrow{font-size:clamp(7px,.65vw,11px);letter-spacing:.24em;color:#edcd8c;margin:0}
.tagline{color:#e0dfcf;font-size:clamp(11px,1.1vw,16px);margin:12px 0 20px}
.ending-actions{display:flex;gap:24px;align-items:center}
.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;background:#e2c17d;color:#18251e;padding:13px 26px;min-height:44px;text-shadow:none;font-weight:650;border:1px solid #ffe4a7;border-radius:5px;text-decoration:none;box-shadow:0 5px 25px #0003}
.primary:hover{background:#f4d799}.login{color:#f5e4be;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
#chapter-tag{position:absolute;top:clamp(12px,2.2vw,36px);left:clamp(12px,2.2vw,36px);padding:8px 12px;background:#10211cbd;color:#f0e6ce;letter-spacing:.18em;font-size:9px}
#chapter-tag span{padding:0 8px;color:#e9bd66}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.actions{top:8px;right:8px;gap:6px}.actions button{font-size:11px;padding:6px 10px}#chapter-tag{display:none}#ending{width:60%;padding:12px;background:radial-gradient(ellipse at bottom left,#0b1715ed,transparent 85%)}h1{margin:0 0 6px}.game-logo{width:170px;max-width:100%}.eyebrow,.tagline{display:none}.ending-actions{gap:14px;font-size:12px}.primary{padding:8px 12px;gap:12px}.loading-mark{font-size:30px}}
@media(min-aspect-ratio:1672/941){main{width:calc(100svh * 1672 / 941)}}
@media(orientation:portrait){
 body{min-height:100dvh}
 main{width:100%}
 #cinema{height:100dvh;aspect-ratio:auto}
 .actions{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
 #chapter-tag{display:none}
 #ending{width:100%;padding:70px 24px max(28px,env(safe-area-inset-bottom));text-align:center;background:linear-gradient(transparent,#0b1715c9 40%,#0b1715ed)}
 .game-logo{width:min(100%,360px);margin:auto}
 .ending-actions{justify-content:center;font-size:14px;gap:24px}
 .primary{padding:12px 24px;gap:32px}
 .tagline{display:block;font-size:13px;margin:12px 0 20px}
}
