:root {
  --cats: #3d8bff;
  --dogs: #ff8a1f;
  --bg: #15171c;
  --panel: rgba(18, 20, 26, 0.86);
  --panel-border: rgba(255, 255, 255, 0.1);
  --text: #f4f1ea;
  --muted: #a8adb8;
  --accent: #ffd166;
  --danger: #ff4d5e;
  --ok: #4ade80;
  --radius: 14px;
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); user-select: none; }
#app { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; letter-spacing: 2px; background: var(--bg); z-index: 50; }
.tr-pause { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 0 16px; }
.tr-exit { font: inherit; font-size: 15px; letter-spacing: 2px; padding: 10px 22px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: rgba(10,16,30,0.75); color: #fff; cursor: pointer; }
.tr-exit:hover { background: rgba(40,60,100,0.85); }
button { font-family: inherit; cursor: pointer; }

/* UI scale (Settings → UI scale, default 80%): every HUD widget and the menus are zoomed by
   --ui; the 3D view, crosshair and big map are not. Large displays multiply it further. */
:root { --ui: 0.8; --ui-k: 1; }
.hud-top, .hud-hp, .hud-hotbar, .kill-feed, .hud-banner, .hud-subbanner, .death-panel, .hud-carry, .hud-hint,
.hud-progress, .hud-objectives, .hud-alive, .chat-feed, .chat-input, .scoreboard, .debug-overlay, .hud-fps,
.minimap:not(.big) { zoom: calc(var(--ui) * var(--ui-k)); }
.panel { zoom: calc(min(1, var(--ui) + 0.1) * var(--ui-k)); }
@media (min-width: 2200px) and (min-height: 1250px) { :root { --ui-k: 1.35; } }
@media (min-width: 3400px) and (min-height: 1900px) { :root { --ui-k: 1.8; } }