/* ==========================================================================
   MOBILE / DOTYK — css/mobile.css
   -------------------------------------------------------------------------
   1. Blokada orientacji pionowej (#rotate-overlay) — landscape only.
   2. Sterowanie Twin-Stick (joystick dynamiczny + celowanie prawą połową).
   3. Dotykowy HUD akcji: mikstury HP/MP, umiejętność, kontekstowa interakcja.
   4. Modal plecaka (zwinięty boczny panel ekwipunku) — sloty min. 44x44 px.
   5. env(safe-area-inset-*) — notchy i zaokrąglone rogi.

   ZASADY: wszystkie elementy aktywne WYŁĄCZNIE pod body.mobile-mode
   (nadawane przez src/engine/MobileControls.js na urządzeniach dotykowych).
   Desktop (klawiatura + mysz) pozostaje 1:1 nietknięty.
   ========================================================================== */

/* ==========================================================================
   1. BLOKADA ORIENTACJI PORTRAIT — „OBRÓĆ EKRAN DO POZIOMU"
   ========================================================================== */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999; /* NA wszystkim — przykrywa całą grę */
  background: #0f0d14;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Widoczna WYŁĄCZNIE w trybie pionowym na urządzeniach dotykowych. */
@media (orientation: portrait) and (any-pointer: coarse) {
  #rotate-overlay {
    display: flex;
  }
}

#rotate-overlay .rotate-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1.9;
  color: #e0e6ed;
  text-shadow: 2px 2px 0 #1a1625;
  max-width: 82vw;
}

#rotate-overlay .rotate-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #8f87a3;
  letter-spacing: 0;
}

#rotate-overlay .rotate-icon {
  image-rendering: pixelated;
  animation: rotateHint 1.6s steps(2, end) infinite;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}

/* ==========================================================================
   2. GLOBALNE WYŁĄCZENIE DZIAŁAŃ PRZEGLĄDARKI (dotyk)
   ========================================================================== */
body.mobile-mode,
body.mobile-mode #game-canvas,
body.mobile-mode #ui-container {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

body.mobile-mode {
  cursor: default;
}

/* Celownik myszy i panel klawiaturowy — bez sensu przy dotyku. */
body.mobile-mode #cursor-reticle,
body.mobile-mode #controls-panel {
  display: none !important;
}

/* Prompt „Press [E]" zastąpiony dużym przyciskiem akcji. */
body.mobile-mode #portal-prompt {
  display: none !important;
}

/* Tooltipy hoverowe nie istnieją przy dotyku (tap = akcja). */
body.mobile-mode #item-tooltip {
  display: none !important;
}

/* Lista „NEARBY PLAYERS" jest na hoverze (podgląd poziomu/ekwipunku) —
   przy dotyku nie ma jak jej otworzyć, więc panel znika w całości. */
body.mobile-mode #nearby-panel {
  display: none !important;
}

/* ==========================================================================
   3. KONTENER STEROWANIA DOTYKOWEGO + PRZYCISKI
   ========================================================================== */
#mobile-controls {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none; /* same przyciski przechwytują dotyk */
}

body.mobile-mode #mobile-controls {
  display: block;
}

.mobile-btn {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #e0e6ed;
  background: rgba(18, 20, 26, 0.88); /* --ui-panel */
  border: 2px solid #3a4454;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
}

.mobile-btn:active {
  background: rgba(38, 45, 58, 0.95); /* --ui-btn-hover */
  border-color: #d8c27a;
}

/* --- Mikstury HP / MP (prawy dolny róg, min. 50x50 px) --- */
.mobile-btn-potion {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-width: 3px;
}

.mobile-btn-hp {
  right: calc(14px + env(safe-area-inset-right, 0px));
  border-color: #5a3a3e;
}

.mobile-btn-mp {
  right: calc(88px + env(safe-area-inset-right, 0px));
  border-color: #3a4a6a;
}

.mobile-btn-potion .mobile-potion-art {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-btn-potion .mobile-potion-art svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
  image-rendering: pixelated;
}

.mobile-btn-count {
  font-size: 8px;
  font-weight: 700;
  color: #e0e6ed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.mobile-btn-label {
  font-size: 8px;
  font-weight: 700;
  color: #8f87a3;
}

.mobile-btn-potion.depleted {
  opacity: 0.45;
}

/* --- Umiejętność (Spacja) — okrągły, w zasięgu prawego kciuka, min. 54 px --- */
.mobile-btn-ability {
  position: fixed;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  right: calc(164px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  border-color: #d8c27a;
}

/* --- Kontekstowy przycisk akcji ([E] INTERACT / ENTER) — tylko przy portalu,
       skrzyni lub loocie (klasa .visible nadawana przez MobileControls) --- */
.mobile-btn-interact {
  display: none;
  position: fixed;
  min-width: 210px;
  height: 56px;
  padding: 0 18px;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border-color: #d8c27a;
  color: #d8c27a;
  background: rgba(26, 22, 37, 0.92);
  animation: pulseInteract 1.1s infinite alternate;
}

.mobile-btn-interact.visible {
  display: flex;
}

@keyframes pulseInteract {
  from { box-shadow: 0 0 0 0 rgba(216, 194, 122, 0.5); }
  to   { box-shadow: 0 0 12px 3px rgba(216, 194, 122, 0.35); }
}

/* --- Ikona plecaka (zwinięty panel ekwipunku) — lewy górny róg --- */
.mobile-btn-backpack {
  position: fixed;
  width: 56px;
  height: 56px;
  font-size: 22px;
  left: calc(12px + env(safe-area-inset-left, 0px));
  top: calc(12px + env(safe-area-inset-top, 0px));
}

/* ==========================================================================
   4. JOYSTICK RUCHU (dynamiczny, lewa połowa ekranu)
   ========================================================================== */
.mobile-joystick {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 490;
}

.mobile-joystick-base {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(26, 30, 38, 0.55); /* półprzezroczysta baza */
  border: 3px solid rgba(216, 194, 122, 0.65); /* pixel-artowa obwódka */
  box-shadow: inset 0 0 0 2px rgba(15, 13, 20, 0.55);
}

.mobile-joystick-knob {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(216, 194, 122, 0.78);
  border: 3px solid rgba(15, 13, 20, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   5. MODAL PLECAKA (ekwipunek / wyposażenie / łup)
   ========================================================================== */
#mobile-backpack-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(10, 12, 16, 0.72);
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

body.mobile-inv-open #mobile-backpack-modal {
  display: flex;
}

#mobile-backpack-panel {
  width: min(380px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  touch-action: pan-y; /* panel potrafi przewijać się na małych ekranach */
  background: rgba(18, 20, 26, 0.97);
  border: 2px solid #3a4454;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  padding: 10px 12px 12px;
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

#mobile-backpack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #e0e6ed;
  margin-bottom: 8px;
}

#mobile-backpack-close {
  position: static;
  width: 44px;
  height: 44px;
  font-size: 12px;
  border-color: #5a3a3e;
  color: #cf9a9a;
}

#mobile-backpack-hint {
  margin-top: 10px;
  font-size: 8px;
  color: #8f87a3;
  text-align: center;
  line-height: 1.6;
}

/* Przeniesione panele w modalu — bez własnego pozycjonowania HUD. */
#mobile-modal-body .equipment-section,
#mobile-modal-body .hud-tabs-section,
#mobile-modal-body .potion-belt,
#mobile-modal-body .ground-loot-panel,
#mobile-modal-body .vault-panel {
  position: static !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 10px;
  padding: 0 !important;
}

/* Panele kontekstowe (łup / skarbce) zachowują stan display:none. */
#mobile-modal-body .ground-loot-panel[style*="display: none"],
#mobile-modal-body .vault-panel[style*="display: none"] {
  display: none !important;
}

/* Sloty w rozmiarze zbliżonym do desktopu — wcześniej siatka `1fr` rozciągała
   je do ~100 px (ikony „za duże"). Stała szerokość kolumny = slot 46x46 px
   (wciąż wygodne pod palec), nadmiar szerokości panelu zostaje z lewej. */
#mobile-modal-body .equipment-grid,
#mobile-modal-body .inventory-grid {
  grid-template-columns: repeat(4, 46px);
  justify-content: start;
}

#mobile-modal-body .inv-slot,
#mobile-modal-body .equip-slot,
#mobile-modal-body .ground-slot,
#mobile-modal-body .vault-slot {
  min-width: 46px;
  min-height: 46px;
  touch-action: manipulation;
}

#mobile-modal-body .inv-slot:active,
#mobile-modal-body .equip-slot:active,
#mobile-modal-body .ground-slot:active,
#mobile-modal-body .vault-slot:active {
  background: var(--ui-slot-hover);
  border-color: #d8c27a;
}

/* Zakładki i pas mikstur — większe hitboxy pod palec. */
#mobile-modal-body .hud-tab-btn {
  min-height: 44px;
  font-size: 9px;
  touch-action: manipulation;
}

#mobile-modal-body .potion-slots {
  grid-template-columns: 46px 46px;
}

#mobile-modal-body .potion-slot {
  height: 46px;
}

/* ==========================================================================
   6. KOMPAKTOWY HUD NA MAŁYCH EKRANACH (landscape telefony)
   ========================================================================== */
@media (pointer: coarse) {
  /* Mniejszy radar — więcej miejsca na arenę gry. */
  #minimap-container {
    width: 104px !important;
    height: 104px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }

  #minimap-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* Kolumna HP/MP/EXP + statystyki — bezpośrednio pod mniejszym radarem. */
  #player-hud {
    top: calc(120px + env(safe-area-inset-top, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    width: 208px !important;
    min-width: 208px !important;
    max-height: calc(100vh - 132px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    padding: 5px 8px !important;
  }

  /* Lewa kolumna HUD (CEL + ZLECENIA DNIA) — zsunięta PONIŻEJ przycisku
     plecaka (56 px @ 12 px, prawy dolny róg ikony = ~68 px), żeby plecak nie
     zasłaniał zleceń dobowych. */
  #left-hud-stack {
    top: calc(78px + env(safe-area-inset-top, 0px)) !important;
    width: 200px !important;
  }

  /* Czat — „trochę mniejszy" na telefonie: węższy stos + niższa lista
     wiadomości (mniej zasłania arenę). */
  #left-bottom-stack {
    width: 232px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .chat-messages {
    height: 54px !important;
  }
  .chat-input {
    padding: 2px 5px !important;
  }

  /* Przyciski dźwięku / menu — większe hitboxy. */
  .bgm-toggle,
  .logout-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Panel ustawień (⚙️) — pełnowymiarowe pozycje na dotyk. */
  #settings-menu {
    top: 56px;
    min-width: 200px;
  }

  .settings-item {
    padding: 11px 12px;
  }
}