/* TenX Realm — minimalny CSS. Cale UI (HUD, czat, dialog, zdolnosci, hint) renderowane w 3D (ui3d.js).
   Tu zostaje tylko: canvas, ukryty input klawiatury, dotykowe kontrolki ruchu (mobile). */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #0a0d14;
  font-family: -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; touch-action: none; -webkit-user-select: none; user-select: none;
}
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ukryty input — przechwyt klawiatury, niewidoczny (tekst renderujemy w 3D) */
#keysink {
  position: fixed; left: -9999px; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; background: transparent;
}

/* dotykowe kontrolki ruchu — TYLKO mobile (ukryte na desktopie) */
#ui-controls { display: none; }
body.touch #ui-controls { display: block; }
/* JOYSTICK (lewy-dol) */
#joy { position: fixed; left: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
  width: 124px; height: 124px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(12,15,24,0.4); backdrop-filter: blur(8px); touch-action: none; }
#joy-stick { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(0,229,255,0.35); border: 1.5px solid rgba(0,229,255,0.6);
  pointer-events: none; }
#right-controls { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; display: flex; flex-direction: column; gap: 14px; align-items: center; }
#btn-jump { width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(0,229,255,0.5);
  background: rgba(0,229,255,0.18); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .05em; backdrop-filter: blur(8px); }
#btn-jump:active { background: rgba(0,229,255,0.4); }
/* ikona wiadomosci — przy LEWYM GORNYM rogu czatu (czat na GORZE ekranu na mobile) */
#btn-chat { position: fixed; left: 8px; top: calc(46px + env(safe-area-inset-top)); z-index: 31;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(12,15,24,0.6); font-size: 16px; }