/* html+body locked to the viewport, never scrollable — without this, a
   mobile browser focusing the hidden native <input> Unity creates behind
   every TMP_InputField (see LoginScreen.cs's ContentType.Standard comment)
   can auto-scroll the page to bring that (usually off-screen) element into
   view, dragging the whole fixed-position canvas down with it and hiding
   the actual on-screen field the player just tapped. */
html, body { position: fixed; inset: 0; overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; background: #05060f }
#neuro-bg { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none }
#unity-container { position: absolute; z-index: 1 }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
/* touch-action:none stops the browser's own native pinch-zoom/pan gestures
   from firing on the canvas alongside Unity's own PinchZoomGraphic touch
   handling — without it, both try to scale the page/content at once on a
   2-finger pinch (the viewport meta's user-scalable=no is NOT reliable for
   this on its own; many browsers ignore it for accessibility reasons),
   which is what read as the puzzle preview image "jittering"/fighting
   itself while zooming (reported 2026-09-04, web build). */
#unity-canvas { background: #090E28; touch-action: none; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
/* Sized to the new brain-icon cutout's own aspect ratio (~1020x720, 1.42:1)
   — the old N-shape wordmark logo it replaces was a much wider/shorter
   170x60 strip. */
#neurofit-logo { width: 180px; height: 127px; background: url('neurofit-logo.png') no-repeat center; background-size: contain }
/* border-radius rounds the CSS background-image itself (default background-clip
   is border-box) — requested 2026-09-21: "при загрузки игры сделай шкалу с
   круглыми краями". Half the 14px height makes each end a true half-circle. */
#unity-progress-bar-empty { width: 220px; height: 14px; margin: 16px auto 0; background: url('progress-bar-empty-dark.png') no-repeat center; background-size: 220px 14px; border-radius: 7px; overflow: hidden }
/* No margin-top here: this element is nested INSIDE -empty (overflow:hidden,
   14px tall), so a 16px top margin pushed the fill entirely below the clipped
   area and the bar never visibly filled (reported 2026-09-21). */
#unity-progress-bar-full { width: 0%; height: 14px; margin: 0; background: url('progress-bar-full-dark.png') no-repeat left center; background-size: 220px 14px; border-radius: 7px; overflow: hidden }
#unity-loading-stats { width: 220px; margin: 8px auto 0; text-align: center; font-family: arial, sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }