body { height: 100svh; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.header-layout { width: var(--shell); margin-inline: auto; }
.game-shell { min-width: 0; min-height: 0; position: relative; background: var(--anthracite); }
.game-shell canvas { display: block; width: 100% !important; height: 100% !important; }
.game-shell canvas:focus-visible { outline: 3px solid var(--champagne); outline-offset: -3px; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; color: var(--ivory); background: var(--surface); }
.loading-inner { max-width: 100%; text-align: center; }
.loading-mark { display: block; width: min(17rem,100%); height: auto; margin: 0 auto 2rem; }
.loading strong { display: block; color: var(--champagne); font-family: "Playfair Display", Georgia, serif; font-size: 2rem; overflow-wrap: anywhere; }
.loading p { margin-block: 1rem; color: var(--ivory); font-size: .9rem; }
progress { width: min(20rem,70vw); height: .6rem; accent-color: var(--champagne); }
progress::-webkit-progress-bar { background: rgb(242 239 230 / 24%); }
progress::-webkit-progress-value { background: var(--champagne); }
progress::-moz-progress-bar { background: var(--champagne); }