:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #484848; color: #dfdfdf; font: 11px Tahoma, Verdana, sans-serif; }
[hidden] { display: none !important; }
.title { position: absolute; top: 10px; left: 0; pointer-events: none; user-select: none; z-index: 1; }
#canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; border: 0; outline: none; visibility: hidden; image-rendering: auto; }
#launcher { position: fixed; inset: 0; isolation: isolate; background: #484848 url('./assets/entrance-background.jpg') center / cover no-repeat; }
.entrance-actions { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(190px, calc(100% - 40px)); display: flex; flex-direction: column; gap: 8px; }
#play, .download-client { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border: 1px solid #222222; border-top-color: #9a9a9a; border-left-color: #9a9a9a; background: linear-gradient(#686868, #484848); box-shadow: 0 0 0 1px #303030, inset 0 0 0 1px #ffffff08; color: #dfdfdf; font: 11px Tahoma, Verdana, sans-serif; text-decoration: none; text-align: center; text-shadow: 0 1px #000; cursor: pointer; white-space: nowrap; }
#play:hover:not(:disabled), .download-client:hover:not([aria-disabled='true']) { background: linear-gradient(#7a7a7a, #585858); }
#play:active:not(:disabled), .download-client:active:not([aria-disabled='true']) { border-color: #222222 #9a9a9a #9a9a9a #222222; background: #484848; }
#play:disabled { cursor: progress; color: #bfbfbf; }
.download-client[aria-disabled='true'] { color: #bfbfbf; cursor: progress; }
button:focus-visible, a:focus-visible { outline: 1px solid #dfdfdf; outline-offset: 3px; }
#loading-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.loading-copy, #load-bytes { display: none; }
.load-readout { text-align: center; margin: 0 0 5px; font-size: 11px; color: #dfdfdf; text-shadow: 0 1px 2px #000; }
#progress { display: block; appearance: none; width: 100%; height: 5px; padding: 0; border: 1px solid #242424; border-radius: 0; background: #3a3a3a; color: #b6b6b6; accent-color: #b6b6b6; }
#progress::-webkit-progress-bar { background: #3a3a3a; }
#progress::-webkit-progress-value { background: #b6b6b6; }
#progress::-moz-progress-bar { background: #b6b6b6; }
#status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.no-script { position: absolute; bottom: 40px; width: 100%; text-align: center; }
body[data-phase='running'] #launcher { display: none; }
body[data-phase='running'] #canvas { visibility: visible; }
#failure { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); max-height: 25vh; overflow: auto; padding: 10px 14px; border: 1px solid #8a8a8a; background: #424242f5; color: #dfdfdf; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@supports (height: 100dvh) { #canvas { height: 100dvh; } }
@media (max-height: 360px) { #status { display: none; } #failure { max-height: 18vh; } }