.hud, .touch-controls, .beast-trial { display: none !important; }
#loading-overlay { background: #090b0d; }
.loader-beast { display: block; width: 124px; height: 128px; object-fit: contain; animation: beast-loading 2.4s ease-in-out infinite; }
#loading-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#loading-overlay.loading-error #loading-status { position: static; width: auto; height: auto; margin: 24px 24px 0; max-width: 360px; overflow: visible; clip-path: none; white-space: normal; }
#loading-overlay.loading-error .loader-beast { animation: none; }
@keyframes beast-loading { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loader-beast { animation: none; } }
.beast-trial { position: fixed; inset: 0; z-index: 25; color: #fff9ed; pointer-events: none; font-family: 'DM Sans', sans-serif; background: linear-gradient(180deg, #090d1255 0%, transparent 30%, transparent 60%, #090d12bd 100%); }
.trial-brand { position: absolute; top: 38px; left: 38px; }
.trial-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.trial-brand h1 { margin: 12px 0 14px; font-size: clamp(30px, 5vw, 58px); font-weight: 900; line-height: .88; letter-spacing: -.055em; }
.trial-brand h1 span { display: block; font-size: .35em; letter-spacing: .28em; margin-top: 12px; }
.trial-brand p, .trial-location p { font-size: 13px; opacity: .8; }
.trial-status { position: absolute; top: 38px; right: 32px; font-size: 9px; letter-spacing: .12em; }
.trial-status #trial-fps { display: block; text-align: right; margin-top: 10px; opacity: .8; font-variant-numeric: tabular-nums; }
.trial-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d6fc76; margin-right: 6px; }
.trial-footer { position: absolute; bottom: 28px; left: 38px; right: 32px; }
.trial-location h2 { font-size: 29px; letter-spacing: -.04em; margin: 8px 0; }
.trial-location p { margin: 0 0 20px; }
.trial-controls { display: flex; gap: 7px; flex-wrap: wrap; pointer-events: auto; }
.trial-controls div { display: flex; border: 1px solid #ffffff40; border-radius: 7px; overflow: hidden; }
.trial-controls button { border: 1px solid #ffffff40; border-radius: 7px; background: #171d21cc; color: #fff9ed; padding: 11px 15px; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; backdrop-filter: blur(12px); }
.trial-controls div button { border: 0; border-radius: 0; }
.trial-controls button[aria-pressed=true] { background: #d6fc76; color: #192015; }
.trial-controls button:hover { filter: brightness(1.18); }
.trial-controls button:focus-visible { outline: 3px solid #d6fc76; outline-offset: 3px; }
.trial-select { display: flex; align-items: center; gap: 8px; padding-left: 5px; color: #fff9ed; font-size: 11px; }
.trial-select select { max-width: 180px; padding: 10px 8px; color: #fff9ed; border: 1px solid #ffffff40; border-radius: 7px; background: #171d21ed; font: inherit; }
.trial-select select:focus-visible { outline: 3px solid #d6fc76; outline-offset: 3px; }
.trial-credit { font-size: 9px; line-height: 1.7; color: #deded6bb; margin-top: 16px; pointer-events: auto; }
.trial-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 650px) { .trial-brand { left: 20px; top: 24px; } .trial-status { top: 25px; right: 16px; max-width: 140px; text-align: right; } .trial-footer { left: 20px; right: 16px; bottom: 20px; } .trial-controls button { padding: 10px; } .trial-location h2 { font-size: 25px; } }