html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; background: #000; color: #e9eaee }
#unity-container { position: absolute; background: #000 }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { left: 0; top: 0; width: 100%; height: 100dvh }
#canvas-wrap { position: relative }
.unity-mobile #canvas-wrap { width: 100%; height: 100% }
#unity-canvas { display: block; width: 100%; height: 100%; background: #050505; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { position: relative; width: 320px; aspect-ratio: 623 / 202; background: url('nxro-logo-clean.png') no-repeat center; background-size: 100% 100% }
#unity-tail { position: absolute; left: 0; top: calc(185 / 202 * 100%); width: calc(472 / 623 * 100%); height: calc(4 / 202 * 100%); background: url('nxro-tail.png') no-repeat; background-size: 100% 100%; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0) }
#unity-star { position: absolute; width: calc(32 / 623 * 100%); aspect-ratio: 1; left: calc((472 * var(--p, 0) - 16) / 623 * 100%); top: calc((187 - 16) / 202 * 100%); background: url('nxro-star.png') no-repeat; background-size: 100% 100%; transform: rotate(var(--rot, 0deg)) }

/* footer under the canvas (desktop) */
#unity-footer { position: relative; height: 60px }
#unity-webgl-logo { display: none; float: left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center; filter: invert(1) }
#unity-build-title { display: none; float: right; margin-right: 10px; line-height: 38px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #e9eaee }
#unity-fullscreen-button { float: right; margin-top: 16px; width: 38px; height: 38px; cursor: pointer; background: url('fullscreen-button-white.png') no-repeat center }
#unity-links { display: none; padding-top: 6px; font: 16px/1.5 Arial, Helvetica, sans-serif }
#unity-links a { color: #8fb4ff; margin-right: 20px }
/* only the Facebook group link is shown for now (PC Client / DB files are not on the server) */
#unity-join { position: absolute; left: 0; top: 10px; display: block; line-height: 0 } #unity-join img { display: block; height: 50px; width: auto }

/* resize handle: bottom-right corner of the canvas */
#unity-resize-handle { position: absolute; right: 0; bottom: 0; z-index: 3; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; opacity: .6; background: linear-gradient(135deg, transparent 0 50%, #fff 50% 56%, transparent 56% 66%, #fff 66% 72%, transparent 72% 82%, #fff 82% 88%, transparent 88%) }
#unity-resize-handle:hover, body.dragging #unity-resize-handle { opacity: 1 }
body.dragging { cursor: nwse-resize; user-select: none }

/* mobile: canvas fills the screen, only a small fullscreen button stays */
.unity-mobile #unity-resize-handle, .unity-mobile #unity-webgl-logo, .unity-mobile #unity-build-title, .unity-mobile #unity-links { display: none }
.unity-mobile #unity-footer { display: none }

/* mobile in portrait: ask the player to rotate (browsers cannot force landscape) */
#rotate-overlay { display: none; position: fixed; inset: 0; z-index: 10; background: #000; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif }
#rotate-overlay p { margin: 0; font-size: 18px; font-weight: 500 }
#rotate-overlay small { color: #8d919c; font-size: 13px }
.rot-icon { width: 54px; height: 90px; border: 3px solid #e9eaee; border-radius: 10px; position: relative; animation: rot-turn 2.4s ease-in-out infinite }
.rot-icon::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 3px; margin-left: -8px; background: #e9eaee; border-radius: 2px }
@keyframes rot-turn { 0%, 25% { transform: rotate(0deg) } 60%, 100% { transform: rotate(-90deg) } }
@media (prefers-reduced-motion: reduce) { .rot-icon { animation: none } }
@media (orientation: portrait) { body.is-mobile #rotate-overlay { display: flex } }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }