body.splash-screen{height:100dvh;overflow:hidden;background:#07172c}
body.splash-screen::before,body.splash-screen::after{display:none}
body.splash-screen main{width:100%;height:100dvh;min-height:0;max-width:none;margin:0;padding:0;isolation:isolate}
#splash-screen{position:fixed;inset:0;overflow:hidden;background:#07172c;isolation:isolate}
#splash-screen[hidden]{display:none}
#splash-screen .splash-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:-2}
#splash-screen::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#04142c24,transparent 32%,transparent 79%,#020b1c55)}
#splash-screen .splash-title{position:absolute;top:max(1.5dvh,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;padding:0;line-height:0;width:min(80vw,700px);text-align:center;filter:drop-shadow(0 5px 15px #0008)}
#splash-screen .splash-title img{display:block;width:100%;height:25dvh;max-height:290px;object-fit:contain;margin:0}
#splash-play{position:absolute;left:50%;bottom:max(5dvh,calc(env(safe-area-inset-bottom) + 16px));transform:translateX(-50%);width:clamp(190px,22vw,330px);min-height:clamp(60px,9dvh,90px);padding:10px 40px;border:3px solid #fff0b5;border-radius:22px;background:linear-gradient(#ffe79a,#efb94c 58%,#ce8129);color:#4b281d;font-size:clamp(28px,3.3vw,42px);font-weight:900;letter-spacing:1px;text-shadow:0 1px #fff8;box-shadow:0 5px 0 #783e22,0 10px 28px #0009;transition:filter .18s,box-shadow .18s}
#splash-play:hover{filter:brightness(1.1);box-shadow:0 5px 0 #783e22,0 10px 32px #f7bc4755}
#splash-play:active{transform:translate(-50%,3px);box-shadow:0 2px 0 #783e22,0 5px 15px #0008}
#splash-play:focus-visible{outline:4px solid white;outline-offset:7px}
body.splash-screen #connection:empty{display:none}
body.splash-screen #error:not(:empty){position:fixed;left:12px;right:12px;bottom:4px;color:#fff5df;text-align:center;z-index:2}
body.splash-screen #solomon-credit{display:none}
@media(orientation:portrait){
 #splash-screen .splash-art{object-fit:contain;object-position:center 54%}
 #splash-screen .splash-title{top:max(7dvh,env(safe-area-inset-top));width:86vw}
 #splash-screen .splash-title img{height:min(24dvh,43vw)}
 #splash-play{bottom:max(9dvh,calc(env(safe-area-inset-bottom) + 16px));width:min(68vw,310px)}
}
@media(max-height:450px) and (orientation:landscape){
 #splash-screen .splash-title img{height:25dvh}
 #splash-play{min-height:48px;width:180px;padding:6px 28px;border-radius:16px;font-size:26px;bottom:max(4dvh,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){#splash-play{transition:none}}

/* Only the full-screen selection scenery receives the pale game-colour wash. */
.host #game-select{isolation:isolate}
.host #game-select .selection-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background-position:center;background-size:cover}
.host #game-select .selection-background::after{content:'';position:absolute;inset:0;z-index:1;background:var(--selection-tint);opacity:.27}
.host #game-select .selection-background .game-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.host #game-select .selection-background .game-preview-video.is-selected.is-playing{opacity:1}
.host #game-select .game,.host #game-select .game.selected{background:transparent;background-image:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.host #game-select .game::after{content:none}
.host #game-select .game-logo{pointer-events:none}
@media(prefers-reduced-motion:reduce){.host #game-select .game-preview-video{display:none}.host #game-select .game-logo{transition:none}}

/* A secondary backup action stays clear of the main Play button. */
#splash-download{position:absolute;right:3vw;bottom:5dvh;padding:12px 20px;min-height:48px;border:2px solid #f4dbad;border-radius:14px;background:#142b43ed;color:#fff1cd;font:700 22px/1.2 system-ui,sans-serif;box-shadow:0 3px 12px #0008}
#splash-download:focus-visible{outline:3px solid white;outline-offset:4px}
#download-dialog{box-sizing:border-box;width:min(760px,94vw);max-width:min(760px,94vw);max-height:90dvh;overflow:auto;padding:28px;border:2px solid #b4813c;border-radius:20px;background:#fff3d7;color:#35291e;box-shadow:0 12px 60px #0008;font:22px/1.4 system-ui,sans-serif;text-align:left}
#download-dialog::backdrop{background:#061326b8}
#download-dialog h2{font-size:32px;margin:0 0 12px}
#download-dialog li{margin:10px 0}
#download-dialog .download-note{font-size:18px}
#download-dialog .download-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#download-dialog :is(a,button){font-size:20px;white-space:normal;text-align:center}
#download-dialog [hidden]{display:none!important}
@media(orientation:portrait){#splash-download{right:auto;left:50%;transform:translateX(-50%);bottom:2dvh;font-size:16px;padding:8px 14px}#download-dialog{font-size:17px;padding:18px}#download-dialog h2{font-size:25px}#download-dialog .download-note{font-size:15px}}
@media(max-height:450px) and (orientation:landscape){#splash-download{bottom:4dvh;font-size:16px;padding:8px 12px}}