html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; overscroll-behavior: none; background: #000; -ms-touch-action: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
*, *::before, *::after { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important }
canvas, img, button, #arcade-mobile-controls, .arcade-browser-control, .arcade-browser-control * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }
img { -webkit-user-drag: none; user-drag: none }
:root { --arcade-safe-top: env(safe-area-inset-top, 0px); --arcade-safe-right: env(safe-area-inset-right, 0px); --arcade-safe-bottom: env(safe-area-inset-bottom, 0px); --arcade-safe-left: env(safe-area-inset-left, 0px) }
#arcade-surround { position: fixed; inset: 0; z-index: 0; display: none; background-color: #030508; background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none }
body.arcade-surround-active #arcade-surround { display: block }
#unity-container { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: content-box; overflow: hidden; width: 1280px; height: 720px; background: #000; }
body.arcade-surround-active #unity-container { border: clamp(7px, 0.9vmin, 14px) solid #12151a; border-radius: clamp(12px, 1.45vmin, 24px); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10), inset 0 0 18px rgba(0,0,0,0.95), 0 0 0 2px rgba(0,0,0,0.88), 0 12px 32px rgba(0,0,0,0.78) }
body:not(.arcade-responsive-portrait).arcade-surround-active #unity-container { border-width: 12px }
#unity-canvas { width: 100%; height: 100%; background: #000; border: 0; outline: none; display: block; touch-action: none; -webkit-user-select: none; user-select: none }
#unity-canvas:focus, #unity-canvas:focus-visible { outline: none }
#unity-loading-bar { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--arcade-loading-logo-size, 256px); max-width: calc(100% - 16px); transform: translate(-50%, -50%); display: none; pointer-events: none }
#unity-logo { width: 100%; aspect-ratio: 1 / 1; background: url('unity-logo-dark.png') no-repeat center / contain }
#unity-progress-bar-empty { box-sizing: border-box; margin-left: auto; margin-right: auto; width: min(141px, calc(100% - 16px)); height: 18px; margin-top: 10px; padding: 2px; border: 2px solid #E6B83F; background: transparent }
#unity-progress-bar-full { width: 0%; height: 100%; background: #E6B83F }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#arcade-mobile-controls { position: fixed; inset: 0; z-index: 40000; visibility: hidden; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none }
body.arcade-gutter-controls-active #arcade-mobile-controls { visibility: visible }
body.arcade-gutter-controls-suppressed #arcade-mobile-controls { visibility: hidden; pointer-events: none }
body.arcade-responsive-portrait { background: #020407 }
body.arcade-responsive-portrait #arcade-surround { inset: auto; left: var(--arcade-portrait-left, 0px); top: var(--arcade-portrait-top, 0px); width: var(--arcade-portrait-width, 100%); height: var(--arcade-portrait-height, 100%); background-position: center; background-size: cover }
body.arcade-responsive-portrait.arcade-surround-active #unity-container { border-width: var(--arcade-portrait-bezel, 6px); border-radius: 0; box-shadow: inset 0 0 0 var(--arcade-portrait-highlight, 1px) rgba(255,255,255,0.18) }
body.arcade-responsive-portrait #arcade-mobile-controls::before { content: ""; position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); top: var(--arcade-control-deck-top, 50%); height: 1px; background: linear-gradient(90deg, transparent, rgba(63, 207, 214, 0.5), transparent); pointer-events: none }
.arcade-browser-control { position: fixed; box-sizing: border-box; transform: translate(-50%, -50%); margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; pointer-events: auto; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none }
.arcade-browser-control.is-hidden { display: none }
.arcade-browser-control.is-disabled { opacity: 0.42; pointer-events: none }
.arcade-browser-control.is-circular-hit-area { -webkit-clip-path: circle(40% at 50% 50%); clip-path: circle(40% at 50% 50%) }
.arcade-browser-control img { display: block; object-fit: contain; image-rendering: auto; pointer-events: none }
.arcade-browser-button-base, .arcade-browser-button-cap, .arcade-browser-button-overlay { position: absolute; inset: 0; width: 100%; height: 100% }
.arcade-browser-button-cap, .arcade-browser-button-overlay { transform: var(--arcade-button-rotation, rotate(0deg)); transform-origin: 50% 50%; transition: transform 55ms ease-out, filter 55ms ease-out; will-change: transform }
.arcade-browser-button.is-pressed .arcade-browser-button-cap { transform: translateY(5%) scale(0.96) var(--arcade-button-rotation, rotate(0deg)); filter: brightness(1.14) }
.arcade-browser-button.is-pressed .arcade-browser-button-overlay { transform: translateY(5%) scale(0.96) var(--arcade-button-rotation, rotate(0deg)); filter: brightness(1.14) }
.arcade-browser-joystick.is-pressed .arcade-browser-joystick-outer { filter: brightness(1.10) }
.arcade-browser-control-label { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: monospace; line-height: 1; text-align: center; text-shadow: none; pointer-events: none; transition: transform 55ms ease-out }
.arcade-visual-buttonc .arcade-browser-control-label, .arcade-visual-buttonblank .arcade-browser-control-label { text-shadow: none }
.arcade-browser-button.is-pressed .arcade-browser-control-label { transform: translateY(5%) scale(0.96) }
.arcade-browser-joystick { border-radius: 50% }
.arcade-browser-joystick-outer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1 }
.arcade-browser-joystick-inner { position: absolute; left: 25%; top: 25%; width: 50% !important; height: 50% !important; opacity: 1; will-change: transform }
#arcade-rotate-device { position: fixed; inset: 0; z-index: 99999; display: none; box-sizing: border-box; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #000; color: #fff; font-family: monospace; font-size: clamp(22px, 7vw, 42px); font-weight: bold; text-align: center; letter-spacing: 0.08em }
#arcade-rotate-device small { color: #aaa; font-size: clamp(12px, 3.5vw, 19px); font-weight: normal; letter-spacing: 0 }
.arcade-rotate-icon { color: #e63f22; font-size: clamp(52px, 18vw, 92px); line-height: 1 }
body.arcade-portrait-blocked #arcade-rotate-device { display: flex }