html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { cursor: default; user-select: none; -webkit-user-select: none; }
canvas { display: block; }
#game { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
/* NOTE: #game (WebGL 3D) must stay smooth — no image-rendering:pixelated here (it blurs HiDPI 3D).
   Crisp pixels apply to #gui only; #gui backing-store DPR scaling lives in gui.js resize(). */
#gui { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
#crosshair { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; mix-blend-mode: difference; }
/* Full-resolution startup/world/pack overlay; independent of GUI scale. */
#loading-screen { --loading-width: min(52.8125vw, 120vh); --loading-accent: #fff; --loading-track: transparent; position: fixed; inset: 0; z-index: 100; background: #f0323e; opacity: 1; transition: opacity 180ms linear; cursor: default; }
#loading-screen[data-theme="dark"] { --loading-accent: #93f2b9; --loading-track: #2d4339; background: #141917; }
#loading-screen[hidden] { display: none; }
#loading-screen.loading-fade { opacity: 0; }
.loading-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--loading-width); aspect-ratio: 4 / 1; display: flex; }
/* The original 512x512 atlas contains two 512x256 halves of the logo. */
.loading-logo span { width: 50%; height: 100%; background: url('../assets/minecraft/textures/gui/title/mojangstudios.png') 0 0 / 100% 200% no-repeat; }
.loading-logo span + span { background-position: 0 100%; }
.loading-track { --loading-edge: max(1px, 0.29703vh); position: absolute; left: 50%; top: 83.564356vh; transform: translate(-50%, -50%); box-sizing: border-box; width: var(--loading-width); height: max(8px, 2.9703vh); border: var(--loading-edge) solid var(--loading-accent); padding: var(--loading-edge); background: var(--loading-track); }
.loading-fill { width: 0; height: 100%; background: var(--loading-accent); transition: width 120ms linear; }
@media (prefers-reduced-motion: reduce) { #loading-screen, .loading-fill { transition: none; } }