/* style.css — interfejs gry Łowcy Tornad */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: #fff; }
#game-container canvas { display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; user-select: none; }
#ui .panel, #ui button { pointer-events: auto; }
.hidden { display: none !important; }
.dim { color: #9aa; font-size: 13px; }
.center { text-align: center; }

/* pasek górny */
#topbar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 22px; background: rgba(10, 16, 20, 0.72);
  padding: 8px 20px; border-radius: 10px; font-size: 16px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
}

/* wskaźnik ekipy w pasku górnym (multiplayer) */
#hud-ekipa {
  background: rgba(60,170,110,.22); border: 1px solid rgba(120,230,170,.45);
  color: #cdf5e0; font: 600 14px/1 'Segoe UI', system-ui, sans-serif;
  padding: 5px 10px; border-radius: 8px; cursor: pointer; margin: -3px 0;
}
#hud-ekipa:hover { background: rgba(60,170,110,.4); }

/* lewy dół */
#bottomleft { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
#healthwrap { width: 220px; height: 22px; background: rgba(0,0,0,0.55); border-radius: 11px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.2); }
#healthbar { height: 100%; width: 100%; background: #4caf50; transition: width 0.2s; }
#healthtxt { position: absolute; inset: 0; text-align: center; line-height: 22px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#speed { font-size: 26px; font-weight: 800; text-shadow: 0 2px 4px #000; }
#windmeter { font-size: 15px; font-weight: 600; color: #aaddff; text-shadow: 0 1px 3px #000; }

/* minimapa */
#minimap { position: absolute; top: 14px; right: 14px; border-radius: 10px; opacity: 0.92; }

/* podpowiedź kontekstowa */
#hint {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 16, 20, 0.8); padding: 10px 18px; border-radius: 8px;
  font-size: 16px; font-weight: 600; border: 1px solid rgba(255,255,255,0.2);
}

/* pasek postępu akcji */
#progresswrap {
  position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 18px; background: rgba(0,0,0,0.6); border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
}
#progressbar { height: 100%; background: linear-gradient(90deg, #2196f3, #4caf50); width: 0; transition: width 0.1s; }
#progresstxt { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; font-weight: 700; text-shadow: 0 1px 2px #000; }

/* powiadomienia */
#notify { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.note {
  background: rgba(20, 28, 34, 0.9); padding: 9px 18px; border-radius: 8px; font-size: 15px; font-weight: 600;
  opacity: 0; transform: translateY(-8px); transition: all 0.35s; border-left: 4px solid #2196f3; max-width: 640px; text-align: center;
}
.note.show { opacity: 1; transform: translateY(0); }
.note.warn { border-color: #ff9800; }
.note.danger { border-color: #f44336; background: rgba(60, 16, 12, 0.92); }
.note.good { border-color: #4caf50; }

/* tryb foto */
#photo-overlay { position: absolute; inset: 0; }
.pf { position: absolute; width: 70px; height: 70px; border: 3px solid rgba(255,255,255,0.85); }
.pf.tl { top: 14%; left: 14%; border-right: none; border-bottom: none; }
.pf.tr { top: 14%; right: 14%; border-left: none; border-bottom: none; }
.pf.bl { bottom: 14%; left: 14%; border-right: none; border-top: none; }
.pf.br { bottom: 14%; right: 14%; border-left: none; border-top: none; }
#photo-info { position: absolute; bottom: 8%; width: 100%; text-align: center; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px #000; }
#photo-zoom { position: absolute; top: 8%; width: 100%; text-align: center; font-size: 22px; font-weight: 800; text-shadow: 0 1px 3px #000; }

/* ── UI 3.0: wspólny język paneli ────────────────────────────────────────
   Jedna paleta i jedna geometria dla WSZYSTKICH okien — do 2.8 każdy panel
   miał własne kolory, szerokość i sposób zamykania. */
:root {
  --panel-tlo: rgba(12, 18, 24, 0.94);
  --panel-ramka: rgba(255,255,255,0.15);
  --panel-r: 14px;
  --akcent: #e65100;
  --akcent2: #c62828;
  --tekst-drugi: #8fb8d8;
  --tekst-przygaszony: #9aabb8;
  --kafel: rgba(255,255,255,0.055);
  --kafel-ramka: rgba(255,255,255,0.12);
}

/* Przyciemnione tło pod otwartym oknem — blokuje kliknięcia w menu i HUD.
   BEZ `backdrop-filter: blur()` — za tłem stoi canvas, który przerysowuje się
   co klatkę, więc rozmycie liczyłoby się 60 razy na sekundę. Na software
   renderze (testy) potrafiło to zagłodzić całą przeglądarkę; na słabszym
   telefonie kosztowałoby połowę klatek. Gradient daje ten sam efekt „głębi”. */
#panel-tlo {
  position: absolute; inset: 0; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(4, 8, 12, 0.5) 35%, rgba(2, 5, 8, 0.78) 100%);
  animation: tlo-wejscie .12s ease-out;
}
@keyframes tlo-wejscie { from { opacity: 0; } to { opacity: 1; } }
/* przy otwartym oknie HUD-owe warstwy schodzą na drugi plan i przestają
   łapać dotyk (samo `pointer-events: none` na #touch-ui nie wystarczy —
   przyciski mają własne `auto`, więc trzeba wyłączyć też dzieci) */
body.panel-otwarty #tutorial, body.panel-otwarty #chat { opacity: .2; }
body.panel-otwarty #touch-ui { opacity: .25; }
body.panel-otwarty #touch-ui, body.panel-otwarty #touch-ui * { pointer-events: none !important; }

/* Krzyżyk zamykający — wstrzykiwany przez ui/panel.js do KAŻDEGO okna.
   Selektor z #ui, bo inaczej wygrywa `.panel button` (pomarańczowy gradient)
   i skromny ✕ zamienia się w wielki czerwony przycisk. */
#ui .xbtn, .xbtn {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  pointer-events: auto; z-index: 2;
}
#ui .xbtn:hover, .xbtn:hover { background: rgba(255,255,255,0.2); filter: none; }

/* panele */
.panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--panel-tlo); border: 1px solid var(--panel-ramka);
  border-radius: var(--panel-r); padding: 28px 36px; text-align: center; min-width: 420px; max-width: 90vw;
  max-height: 88vh; overflow-y: auto;
}
.panel.na-stosie { animation: panel-wejscie .14s ease-out; }
@keyframes panel-wejscie {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.panel h1 { font-size: 40px; margin-bottom: 4px; letter-spacing: 1px; }
.panel h2 { margin-bottom: 14px; }
.panel .sub { color: #8fb8d8; margin-bottom: 20px; font-size: 16px; }
.panel button {
  background: linear-gradient(135deg, #c62828, #e65100); color: #fff; border: none;
  font-size: 18px; font-weight: 700; padding: 12px 34px; border-radius: 10px; cursor: pointer; margin: 6px;
}
.panel button:hover { filter: brightness(1.15); }
#controls { margin-top: 22px; text-align: left; }
#controls h3 { margin-bottom: 8px; text-align: center; color: #8fb8d8; }
#controls table { margin: 0 auto; border-collapse: collapse; font-size: 14px; }
#controls td { padding: 3px 14px; }
#controls td:first-child { color: #ffcc66; font-weight: 700; text-align: right; }

/* ── KARTA ŁOWCY (ui/dziennik.js) ──────────────────────────────────────── */
#journal { min-width: 620px; width: min(96vw, 860px); }
#journal-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
#journal-tabs button { font-size: 13.5px; padding: 8px 14px; background: #263238; margin: 0; }
#journal-tabs button.active { background: linear-gradient(135deg, var(--akcent2), var(--akcent)); }
#journal-content { text-align: left; }
#journal-content h3 { color: var(--tekst-drugi); margin: 16px 0 8px; font-size: 15px; }

/* nagłówek postaci: awatar, ranga, pasek do następnej rangi */
.karta-glowa { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.karta-glowa .awatar {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 16px; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(230,81,0,.35), rgba(198,40,40,.25));
  border: 1px solid rgba(255,255,255,.18);
}
.karta-kim { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.karta-kim .ranga { font-size: 21px; }
.pasek-rangi { height: 9px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; margin: 3px 0; }
.pasek-rangi div { height: 100%; background: linear-gradient(90deg, #ffb300, var(--akcent)); transition: width .3s; }

/* kafle liczbowe */
.kafle { display: grid; gap: 8px; margin: 6px 0; }
.kafle.w3 { grid-template-columns: repeat(3, 1fr); }
.kafle.w4 { grid-template-columns: repeat(4, 1fr); }
.kafel {
  background: var(--kafel); border: 1px solid var(--kafel-ramka); border-radius: 10px;
  padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.kafel-ikona { font-size: 17px; }
.kafel-wartosc { font-size: 17px; font-weight: 700; color: #ffd479; }
.kafel-etykieta { font-size: 11px; color: var(--tekst-przygaszony); text-align: center; }

/* sloty ekwipunku */
.sloty { display: flex; flex-direction: column; gap: 8px; }
.slot {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--kafel); border: 1px solid var(--kafel-ramka); border-radius: 12px;
}
.slot.aktywny { border-color: rgba(255,170,60,.55); background: rgba(230,120,0,.12); }
.slot-ikona { font-size: 24px; width: 34px; text-align: center; flex: 0 0 auto; }
.slot-tresc { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.slot-tresc .dim { font-size: 12px; line-height: 1.35; }
.slot-stan { font-size: 13px; color: #ffd479; font-weight: 600; }

/* wiersze list (znajomi, zaproszenia) i tabelki */
.wiersz {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 9px; background: var(--kafel); margin-bottom: 5px; font-size: 14px;
}
.wiersz.zaproszenie { border: 1px solid rgba(255,190,80,.45); background: rgba(255,170,40,.1); }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tabela .liczby { text-align: right; white-space: nowrap; color: var(--tekst-przygaszony); }
.tabela tr.ja td { color: #ffd88a; }
.pusto { text-align: center; padding: 18px 8px; }
.komunikat { min-height: 18px; margin-top: 8px; }
button.maly { font-size: 12.5px; padding: 5px 12px; margin: 0 0 0 6px; }
.row.wąski input { flex: 1; min-width: 140px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color: #eef4f8; font-size: 13.5px; }
#ekipa-czat { max-height: 132px; overflow-y: auto; }
.wiersz-czat { padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,.05); margin-bottom: 3px; font-size: 13px; }
.wiersz-czat b { color: #9fd3ff; }
.wiersz-czat.wlasna b { color: #ffd88a; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery figure img { width: 100%; border-radius: 6px; }
.gallery .noimg { height: 70px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #223; border-radius: 6px; }
.gallery figcaption { font-size: 11px; color: #aab; margin-top: 3px; }
.shopitem { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; }
.shopitem button { font-size: 15px; padding: 8px 20px; }
.shopitem.owned { opacity: 0.6; }
.shopitem .ok { color: #4caf50; font-weight: 700; }

/* karta konta w menu głównym (hub) */
#menu-konto {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--kafel); border: 1px solid var(--kafel-ramka);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 16px;
}
.awatar.mini {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
}
#menu-konto .karta-kim { flex: 1; }
#menu-konto .dim { font-size: 12px; }
.konto-glowa { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 10px; }
.kafle-menu { margin-top: 8px; }

/* lobby światów — control-plane przed połączeniem WebSocket */
#world-lobby-wrap {
  width: min(760px, 82vw); margin: 0 auto 18px; padding: 12px;
  border: 1px solid rgba(96, 187, 255, .28); border-radius: 12px;
  background: rgba(21, 45, 63, .32); text-align: left;
}
#world-lobby-wrap > h3 { color: var(--tekst-drugi); text-align: center; margin-bottom: 8px; }
.world-section { margin-top: 10px; }
.world-section h4 { color: #c7e6ff; margin: 0 0 6px; font-size: 14px; }
.world-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px;
  align-items: center; padding: 9px 10px; margin-bottom: 6px;
  border: 1px solid var(--kafel-ramka); border-radius: 10px; background: var(--kafel);
}
.world-card.selected { border-color: rgba(87, 218, 137, .58); background: rgba(34, 125, 72, .2); }
.world-card.friend { border-color: rgba(255, 190, 80, .4); }
.world-card.invitation { border-color: rgba(255, 160, 60, .58); background: rgba(145, 73, 10, .18); }
.world-card-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.world-card-main b { overflow-wrap: anywhere; }
.world-card .dim { line-height: 1.3; }
.world-invite-row { grid-column: 1 / -1; display: flex; gap: 7px; align-items: center; }
.world-invite-row input, .world-create input {
  flex: 1; min-width: 130px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color: #eef4f8;
}
.world-create { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.world-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.world-message { margin: 4px 0 8px; text-align: center; }
.world-refresh { display: block; margin: 10px auto 0 !important; }
#world-lobby .ok { color: #7fd67f; }
#world-lobby .warn { color: #ffb14a; }
#world-lobby button { font-size: 13px; padding: 7px 12px; margin: 2px; }
#world-lobby button:disabled { cursor: default; opacity: .62; filter: none; }

/* wybór pojazdu / garaż */
.garage-title { color: var(--tekst-drugi); margin-bottom: 10px; }
#vehicle-select, .garage { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
#vehicle-select .vcard { width: 168px; padding: 9px 12px; }
#vehicle-select .vcard p { display: none; }          /* opis dopiero w Garażu */
#vehicle-select .vcard { cursor: default; }
.vcard {
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 12px 16px; width: 190px; cursor: pointer; text-align: left;
  transition: all 0.15s; pointer-events: auto;
}
.vcard:hover { border-color: #e65100; }
.vcard.sel { border-color: #ff8822; background: rgba(230, 81, 0, 0.18); }
.vcard.locked { border-color: rgba(255,255,255,0.09); background: rgba(0,0,0,0.18); }
.vcard.locked > b { opacity: 0.78; }
.vcard > button { width: 100%; margin-top: 9px; }
.vcard b { font-size: 17px; }
.vcard p { font-size: 11.5px; margin: 6px 0; }
.vstats { font-size: 11px; border-collapse: collapse; }
.vstats td { padding: 1px 6px 1px 0; color: #9ab; }
.vstats td:last-child { color: #ffbb44; letter-spacing: 1.5px; }
.garage-status {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid rgba(255, 181, 65, .35); border-radius: 9px; background: rgba(117, 66, 8, .18);
}
.garage-status.ok { border-color: rgba(72, 196, 116, .45); background: rgba(26, 112, 57, .18); }
.garage-status span { color: var(--tekst-drugi); font-size: 12px; }

/* prognoza stacji meteo */
#forecast { min-width: 460px; }
.fline { font-size: 16px; margin: 8px 0; }

/* terminale wielopiętrowego kompleksu meteorologicznego */
#weather-station-panel { width: min(680px, 92vw); }
.ws-eyebrow { color: #65c9ff; font-size: 12px; font-weight: 800; letter-spacing: .16em; margin-bottom: 7px; }
.ws-description { margin: -5px 0 16px; }
.ws-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ws-stat { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid rgba(103, 196, 244, .22); border-radius: 8px; background: rgba(7, 26, 39, .72); }
.ws-stat span { color: #9cb4c4; }
.ws-stat b { text-align: right; color: #eaf7ff; }
.ws-stat.accent { border-color: rgba(87, 215, 255, .62); box-shadow: inset 0 0 18px rgba(53, 178, 229, .12); }
.ws-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
#weather-station-panel .ws-primary { background: linear-gradient(135deg, #0c80b8, #16a2c8); }

/* duża mapa */
#bigmap-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#bigmap { border-radius: 12px; border: 2px solid rgba(255,255,255,0.3); }

/* winieta obrażeń */
#damage-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200, 20, 10, 0.55) 100%);
}

/* panel kalibracji kamery pokładowej (klawisz K) */
#camcalib {
  position: absolute; right: 16px; top: 240px; width: 250px;
  background: rgba(14, 20, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.45;
  color: #eaf2f8; pointer-events: none; z-index: 30;
}
#camcalib b { display: block; margin-bottom: 4px; }
#camcalib table { width: 100%; margin: 8px 0; border-collapse: collapse; }
#camcalib td { padding: 1px 0; }
#camcalib td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: #ffd479; }
#camcalib .camkeys { font-size: 11.5px; opacity: 0.72; margin-top: 6px; }
#camcalib-state { margin-top: 8px; font-size: 11.5px; }

/* konto gracza i ustawienia */
#account, #settings { max-width: 560px; }
#account label { display: block; margin: 8px 0; }
#account input { width: 100%; padding: 7px 9px; margin-top: 3px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.35); color: #eef4f8; font-size: 14px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
button.ghost { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22); }
#settings-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
#settings-tabs button { padding: 5px 12px; font-size: 13px; }
#settings-tabs button.active { background: #d8a020; color: #1a1a1a; }
table.setlist { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.setlist td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); }
table.setlist td:last-child { text-align: right; white-space: nowrap; }
table.setlist .val { display: inline-block; min-width: 62px; text-align: right; color: #ffd479;
  font-variant-numeric: tabular-nums; }
button.keybtn { min-width: 96px; padding: 3px 10px; font-size: 12.5px; }
button.keybtn.wait { background: #d8a020; color: #1a1a1a; }
#account .ok, #settings .ok { color: #7fd67f; }
#account .warn, #settings .warn { color: #ffb14a; }
#account-status { margin-top: 6px; font-size: 12.5px; }

/* dymki dialogowe mieszkańców (ui/speech.js) */
#dymki { position: fixed; inset: 0; pointer-events: none; z-index: 22; }
.dymek {
  position: absolute; transform: translate(-50%, -100%);
  max-width: 240px; padding: 7px 10px 8px;
  background: rgba(16, 22, 28, 0.86); border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px; color: #eaf2f8; font-size: 13px; line-height: 1.35;
  text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: opacity 0.18s linear;
}
.dymek b { display: block; font-size: 11.5px; color: #ffd479; margin-bottom: 2px; letter-spacing: 0.03em; }
.dymek::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: rgba(16, 22, 28, 0.86); border-bottom: 0;
}


/* ── STEROWANIE DOTYKOWE (ui/touch.js) ─────────────────────────────────── */
#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: none; }
body.dotyk #touch-ui { display: block; }
body.dotyk canvas { touch-action: none; }

.tj-base {
  position: absolute; left: 22px; bottom: 22px;
  width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.28);
  pointer-events: auto; touch-action: none;
}
.tj-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255,255,255,.38);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.tbtn {
  position: absolute; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(18,28,40,.6); border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; font: 700 20px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tbtn-on { background: rgba(43,98,196,.85); transform: scale(.94); }

.tbtn-e   { width: 78px; height: 78px; right: 24px; bottom: 92px; font-size: 30px;
            background: rgba(43,98,196,.7); }
.tbtn-q   { right: 116px; bottom: 76px; }
.tbtn-g   { right: 128px; bottom: 146px; }
.tbtn-h   { right: 62px;  bottom: 188px; }
.tbtn-x   { right: 24px;  bottom: 24px;  }
.tbtn-f   { right: 130px; bottom: 216px; }
.tbtn-tab { right: 16px; top: 64px; }
.tbtn-m   { right: 16px; top: 126px; }
.tbtn-t   { right: 16px; top: 188px; }
.tbtn-esc { right: 16px; top: 8px; width: 46px; height: 46px; }

/* ── HUD 2.0: ekwipunek, minimapa z przyciskami, panel pogody, samouczek ── */
#equip {
  margin-top: 6px; padding: 4px 10px; border-radius: 8px;
  background: rgba(10,16,22,.55); color: #cfe0ee; font-size: 12.5px;
  width: fit-content; white-space: nowrap;
}

#minimap-wrap { position: fixed; top: 10px; right: 10px; z-index: 25; }
#minimap-wrap #minimap { position: static; display: block; }
#minimap-wrap.mini #minimap { width: 120px; height: 120px; }
#minimap-wrap.mini #weatherbox { width: 120px; font-size: 10.5px; }
#minimap-btns {
  position: absolute; top: 2px; left: 2px; z-index: 26; display: flex; gap: 2px;
}
#minimap-btns button, #mm-open {
  width: 22px; height: 22px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(10,16,22,.7);
  color: #fff; font: 700 13px/1 sans-serif; cursor: pointer;
}
#mm-open { position: fixed; top: 10px; right: 10px; z-index: 25; width: 34px; height: 34px; font-size: 16px; }

#weatherbox {
  margin-top: 4px; padding: 6px 8px; border-radius: 8px;
  background: rgba(10,16,22,.72); color: #e8f0f8; font-size: 12.5px;
  width: 200px; box-sizing: border-box; line-height: 1.45;
}
#wb-strzalka { display: inline-block; transition: transform .3s; font-size: 13px; }

#tutorial {
  position: fixed; top: 44px; left: 50%; transform: translateX(-50%);
  z-index: 45; display: flex; align-items: center; gap: 10px;
  background: rgba(16,40,72,.92); border: 1px solid rgba(120,180,255,.5);
  border-radius: 10px; padding: 8px 12px; color: #eaf2ff;
  font-size: 14px; max-width: min(92vw, 640px); box-shadow: 0 3px 14px rgba(0,0,0,.4);
}
#tutorial button {
  border: none; background: rgba(255,255,255,.15); color: #fff;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; flex: 0 0 auto;
}

/* ── Multiplayer: ranking łowców (panel Konto) ── */
#ranking-box tr.ja td { color: #ffd88a; }
#ranking-box td { padding: 2px 8px 2px 0; white-space: nowrap; }

/* ── Multiplayer: czat znajomych ([T]) ── */
#chat {
  position: fixed; left: 12px; bottom: 196px; z-index: 40;
  width: min(46vw, 380px); font-size: 13px; pointer-events: none;
}
#chat-msgs div {
  background: rgba(10,16,22,.62); color: #e8f0f8; border-radius: 8px;
  padding: 3px 9px; margin-top: 3px; width: fit-content; max-width: 100%;
  overflow-wrap: anywhere;
}
#chat-msgs b { color: #9fd3ff; }
#chat-msgs div.wlasna b { color: #ffd88a; }
#chat input {
  display: none; margin-top: 5px; width: 100%; box-sizing: border-box;
  pointer-events: auto; background: rgba(10,16,22,.88);
  border: 1px solid rgba(140,190,255,.55); border-radius: 8px;
  color: #fff; padding: 6px 9px; font-size: 13px; outline: none;
}
#chat.otwarty input { display: block; }

#howto { z-index: 70; max-width: min(94vw, 660px); }
#howto-body { max-height: 62vh; overflow-y: auto; text-align: left; padding-right: 8px; }
#howto-body h3 { margin: 10px 0 4px; color: #8fc8ff; }
#howto-body p { margin: 4px 0 8px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   TELEFON I TABLET (UI 3.1)
   Do 2.9 układ był rysowany pod monitor: HUD, minimapa, powiadomienia
   i przyciski dotykowe zajmowały te same miejsca i zasłaniały się nawzajem
   (zwłaszcza w pionie), a okna wymagały klawiszy, których na telefonie nie ma.
   Zasada nowego układu — cztery rozłączne strefy:
     ⬉ lewy góra: statystyki i zdrowie      ⬈ prawy góra: minimapa + pogoda
     ⬋ lewy dół:  drążek ruchu              ⬊ prawy dół:  akcje + pasek systemowy
   Środek ekranu zostaje PUSTY — tam jest gra.
   ══════════════════════════════════════════════════════════════════════ */

/* bezpieczne marginesy (notch, pasek gestów) */
:root {
  --bezp-g: env(safe-area-inset-top, 0px);
  --bezp-d: env(safe-area-inset-bottom, 0px);
  --bezp-l: env(safe-area-inset-left, 0px);
  --bezp-p: env(safe-area-inset-right, 0px);
}

@media (max-width: 900px), (pointer: coarse) {
  #ui { font-size: 12.5px; }
  #world-lobby-wrap { width: min(760px, 86vw); }
  .world-card { grid-template-columns: 1fr; }
  .world-card > button, .world-actions { width: 100%; justify-content: center; }
  .world-invite-row, .world-create { flex-direction: column; align-items: stretch; }

  /* pasek górny: zwarty, przyklejony do lewej — nie zasłania minimapy */
  #topbar {
    left: calc(8px + var(--bezp-l)); transform: none;
    top: calc(6px + var(--bezp-g));
    gap: 10px; padding: 5px 10px; font-size: 12.5px; border-radius: 8px;
    max-width: calc(100vw - 190px - var(--bezp-l) - var(--bezp-p));
    flex-wrap: wrap;
  }
  #hud-ekipa { font-size: 12px; padding: 3px 7px; }

  /* zdrowie i ekwipunek pod paskiem górnym, a NIE nad drążkiem */
  #bottomleft {
    left: calc(8px + var(--bezp-l)); bottom: auto;
    top: calc(42px + var(--bezp-g)); gap: 4px; align-items: flex-start;
  }
  #healthwrap { width: 128px; height: 16px; }
  #healthtxt { line-height: 16px; font-size: 11px; }
  #speed { font-size: 17px; }
  #windmeter, #equip { font-size: 11px; padding: 2px 7px; white-space: normal; max-width: 46vw; }

  /* minimapa mniejsza i odsunięta od paska systemowego po prawej */
  #minimap-wrap { top: calc(6px + var(--bezp-g)); right: calc(58px + var(--bezp-p)); }
  #minimap-wrap #minimap { width: 116px; height: 116px; }
  #minimap-wrap.mini #minimap { width: 76px; height: 76px; }
  #weatherbox { width: 116px; font-size: 10.5px; padding: 4px 6px; line-height: 1.3; }
  #minimap-wrap.mini #weatherbox { width: 76px; font-size: 9.5px; }
  #mm-open { top: calc(6px + var(--bezp-g)); right: calc(58px + var(--bezp-p)); }

  /* powiadomienia i podpowiedzi: wąskie, nad strefą przycisków */
  #notify { top: auto; bottom: calc(34% + var(--bezp-d)); width: min(78vw, 420px); }
  .note { font-size: 12.5px; padding: 6px 10px; max-width: 100%; }
  #hint { bottom: calc(26% + var(--bezp-d)); font-size: 13px; padding: 7px 12px; max-width: 74vw; text-align: center; }
  #progresswrap { bottom: calc(32% + var(--bezp-d)); width: min(70vw, 320px); }
  #tutorial { top: calc(4px + var(--bezp-g)); font-size: 12px; padding: 6px 9px; max-width: 92vw; }
  #chat { bottom: calc(30% + var(--bezp-d)); left: calc(8px + var(--bezp-l)); width: min(64vw, 340px); }

  /* ── sterowanie dotykowe: drążek ⬋, akcje ⬊, pasek systemowy przy krawędzi ── */
  .tj-base {
    left: calc(14px + var(--bezp-l)); bottom: calc(14px + var(--bezp-d));
    width: 116px; height: 116px;
  }
  .tj-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }

  .tbtn { width: 50px; height: 50px; font-size: 19px; }
  .tbtn-e   { width: 74px; height: 74px; font-size: 27px;
              right: calc(14px + var(--bezp-p)); bottom: calc(74px + var(--bezp-d)); }
  .tbtn-q   { right: calc(96px + var(--bezp-p)); bottom: calc(22px + var(--bezp-d)); }
  .tbtn-g   { right: calc(96px + var(--bezp-p)); bottom: calc(84px + var(--bezp-d)); }
  .tbtn-f   { right: calc(96px + var(--bezp-p)); bottom: calc(146px + var(--bezp-d)); }
  .tbtn-h   { right: calc(22px + var(--bezp-p)); bottom: calc(158px + var(--bezp-d)); }
  .tbtn-x   { right: calc(22px + var(--bezp-p)); bottom: calc(14px + var(--bezp-d)); }
  /* pasek systemowy: pionowa kolumna przy prawej krawędzi, nad minimapą */
  .tbtn-esc, .tbtn-tab, .tbtn-m, .tbtn-t {
    right: calc(6px + var(--bezp-p)); width: 44px; height: 44px; font-size: 18px;
  }
  .tbtn-esc { top: calc(6px + var(--bezp-g)); }
  .tbtn-tab { top: calc(56px + var(--bezp-g)); }
  .tbtn-m   { top: calc(106px + var(--bezp-g)); }
  .tbtn-t   { top: calc(156px + var(--bezp-g)); }
}

/* ekran w pionie: mniej miejsca w poziomie — HUD jeszcze ciaśniej */
@media (max-width: 560px) and (orientation: portrait) {
  #topbar { max-width: calc(100vw - 172px); font-size: 11.5px; gap: 7px; }
  /* pasek samouczka NIE mieści się w górnym rzędzie (jest tam już HUD
     i minimapa) — schodzi pod nie, do lewej krawędzi */
  #tutorial {
    top: calc(208px + var(--bezp-g)); left: calc(8px + var(--bezp-l)); transform: none;
    max-width: calc(100vw - 70px - var(--bezp-l) - var(--bezp-p));
  }
  #minimap-wrap #minimap { width: 96px; height: 96px; }
  #weatherbox { width: 96px; }
  #minimap-wrap { right: calc(54px + var(--bezp-p)); }
  #notify { bottom: calc(30% + var(--bezp-d)); width: 86vw; }
  #hint { bottom: calc(23% + var(--bezp-d)); }
}

/* ── OKNA NA WĄSKIM EKRANIE: pełnoekranowe arkusze ──────────────────────
   Wyśrodkowane okienko o stałej szerokości nie ma sensu na telefonie:
   wystawało poza ekran, a treść trzeba było przewijać na ślepo. Na wąskim
   ekranie okno zajmuje CAŁY ekran, ma przyklejony nagłówek z dużym ✕
   i przewijaną treść. */
@media (max-width: 720px), ((pointer: coarse) and (max-width: 1000px)) {
  .panel {
    top: 0; left: 0; transform: none;
    width: 100vw; max-width: 100vw; min-width: 0;
    height: 100dvh; max-height: 100dvh; border-radius: 0;
    padding: calc(52px + var(--bezp-g)) 14px calc(20px + var(--bezp-d));
    overscroll-behavior: contain;
  }
  .panel.na-stosie { animation: panel-wejscie-mobile .16s ease-out; }
  @keyframes panel-wejscie-mobile {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  #journal { width: 100vw; min-width: 0; }
  .panel h1 { font-size: 30px; }
  .panel h2 { font-size: 20px; margin-bottom: 10px; }
  .panel button { font-size: 16px; padding: 11px 20px; }
  /* ✕ przyklejony do rogu ekranu, nie do przewijanej treści */
  #ui .xbtn, .xbtn {
    position: fixed; top: calc(8px + var(--bezp-g)); right: calc(10px + var(--bezp-p));
    width: 46px; height: 46px; font-size: 19px;
  }
  #journal-tabs { gap: 5px; }
  #journal-tabs button { font-size: 12.5px; padding: 7px 10px; }
  .kafle.w4 { grid-template-columns: repeat(3, 1fr); }
  .kafle.w3 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .slot { padding: 9px 10px; gap: 9px; }
  .slot-ikona { font-size: 21px; width: 28px; }
  .vcard, #vehicle-select .vcard { width: calc(50% - 6px); }
  #controls { font-size: 12px; }
  #controls table { width: 100%; }
  #controls td { padding: 2px 6px; }
  #howto-body { max-height: none; }
  .ws-screen-grid { grid-template-columns: 1fr; }
  .row { gap: 8px; }
  /* duża mapa dopasowana do ekranu */
  #bigmap { width: min(94vw, 94dvh); height: min(94vw, 94dvh); }
  #bigmap-wrap .dim { font-size: 12px; }
}

/* poziomo na telefonie: bardzo niski ekran — HUD musi się zmieścić w 380 px */
@media (max-height: 480px) and (pointer: coarse) {
  #topbar { padding: 3px 8px; font-size: 11.5px; }
  #bottomleft { top: calc(34px + var(--bezp-g)); }
  #minimap-wrap #minimap { width: 92px; height: 92px; }
  #weatherbox { width: 92px; }
  .tj-base { width: 96px; height: 96px; }
  .tbtn { width: 44px; height: 44px; font-size: 17px; }
  .tbtn-e { width: 62px; height: 62px; font-size: 23px; bottom: calc(62px + var(--bezp-d)); }
  .tbtn-q { bottom: calc(16px + var(--bezp-d)); right: calc(86px + var(--bezp-p)); }
  .tbtn-g { bottom: calc(70px + var(--bezp-d)); right: calc(86px + var(--bezp-p)); }
  .tbtn-f { bottom: calc(124px + var(--bezp-d)); right: calc(86px + var(--bezp-p)); }
  .tbtn-h { bottom: calc(130px + var(--bezp-d)); right: calc(18px + var(--bezp-p)); }
  .tbtn-esc, .tbtn-tab, .tbtn-m, .tbtn-t { width: 38px; height: 38px; font-size: 15px; }
  .tbtn-tab { top: calc(48px + var(--bezp-g)); }
  .tbtn-m   { top: calc(90px + var(--bezp-g)); }
  .tbtn-t   { top: calc(132px + var(--bezp-g)); }
  #notify { bottom: calc(26% + var(--bezp-d)); }
  #hint { bottom: calc(19% + var(--bezp-d)); font-size: 12px; }
}
#realtime-status {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 34;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  background: rgba(5,10,15,.82);
  color: #b8c4ce;
  font: 700 12px/1.2 ui-monospace, Consolas, monospace;
  pointer-events: none;
}
#realtime-status.online { color: #8ff0b6; border-color: rgba(86,220,142,.45); }