/* telefon.css — telefon trzymany pionowo (30.09.2026).
   Kłopot: pasek górny zjadał 245 px z 844, panel miał resztkę, mapa między nimi ~250 px.
   Teraz: pasek górny ~125 px (podpowiedź w dwóch liniach, stuknięcie rozwija), panel można
   rozwinąć na cały ekran uchwytem, dolny pasek ma „Mapę planety", a „Następny cykl" jest
   zwartym kafelkiem pod kciukiem. Selektory z #hud/#bar/#side, żeby wygrywały ze skórkami.
   Poziomy telefon ma własny plik (poziomo.css), tablety i komputery tego nie dostają. */

/* ✕ w uchwycie panelu to osobny przycisk (samo stuknięcie w uchwyt rozwija panel) */
.sideGrip .sideClose { pointer-events: auto; cursor: pointer; }

/* mapa planety: bez myszy nie ma „najechania", więc wolne pola z plusem widać od razu */
@media (hover: none) { .plPlus { opacity: .4; } }

/* tablet: w świecie online zakładek jest 6 — niech się zwężają zamiast wypychać „Następny cykl" za ekran */
@media (min-width: 700px) and (max-width: 999px) {
  #bar .tab { flex: 0 1 92px; }
  #bar .tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* przełącznik ‹ 2/3 › między własnymi planetami w nagłówku mapy planety */
.plPrzel { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.plPrzel button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: var(--hover);
  color: var(--txt); font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; cursor: pointer; }
.plPrzel button:hover { border-color: var(--acc); color: var(--acc); }
.plPrzel i { font-style: normal; font-size: 12px; color: var(--dim); min-width: 28px; text-align: center; }
/* retro: nagłówek mapy planety jest ciemny — przyciski jak „Mapa sektora" (kremowe) */
:root[data-skin="retro"] .plPrzel button { background: #fff8ea; color: #1a1a2e; border: 2px solid #1a1a2e; }
:root[data-skin="retro"] .plPrzel i { color: #d9ccb0; }

@media (max-width: 699px) and (orientation: portrait) {

  /* ---------- pasek górny ---------- */
  #hud { padding: calc(var(--sat) + 5px) calc(var(--sar) + 8px) 5px calc(var(--sal) + 8px); }
  #hud .hudRow { gap: 6px; }
  #hud .hudHouse { gap: 7px; }
  #hud .houseMark { width: 20px; height: 20px; }
  #hud .hudHouse b { font-size: 13px; }
  #hud .shield { font-size: 10px; padding: 0 6px; }
  #hud .hudTurn { gap: 5px; font-size: 11.5px; }
  #hud .iconBtn { width: 32px; height: 32px; border-radius: 9px; }
  #hud .iconBtn .ic { width: 18px; height: 18px; }
  #hud .hudLogin { height: 32px; padding: 0 8px; font-size: 12px; }
  #hud .tgBtn { width: 32px; height: 32px; }
  #hud .tgBtn .ic { width: 27px; height: 27px; }

  /* liczniki: podpis zostaje (nowy gracz musi wiedzieć, co jest czym), ale kafelek jest o 1/3 niższy */
  #hud .hudStats { margin-top: 5px; gap: 4px; }
  #hud .stat { padding: 2px 6px 3px; box-shadow: none; }
  #hud .stat label { font-size: 8px; line-height: 1.25; }
  #hud .stat b { font-size: 12.5px; line-height: 1.25; }

  #hud .goalWrap { margin-top: 4px; gap: 6px; }
  #hud .goalBar { height: 3px; }
  #hud .goalTxt { font-size: 10px; }

  /* podpowiedź doradcy: tytuł i rada po jednej linii, stuknięcie w tekst pokazuje całość */
  #hud .statusCard { margin-top: 5px; padding: 4px 4px 4px 9px; gap: 6px; flex-wrap: nowrap; border-radius: 10px; }
  #hud .statusTxt { display: grid; gap: 0; min-width: 0; flex: 1 1 auto; order: 0; cursor: pointer; }
  #hud .statusTxt b { font-size: 12px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud .statusTxt span { font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud #status.pelny .statusTxt b, #hud #status.pelny .statusTxt span { white-space: normal; }
  #hud .statusAct { order: 0; flex: none; margin: 0; height: 30px; padding: 0 11px; font-size: 12px; }
  #hud .tutorOff { order: 0; margin: 0; align-self: center; padding: 4px; }

  /* ---------- mapa ---------- */
  #mapWrap .mapLegenda { top: 50px; font-size: 10px; gap: 6px; padding: 3px 7px; }

  /* ---------- panel: połowa ekranu albo cały (uchwyt) ---------- */
  #side { max-height: 56%; }
  #side.duzy { max-height: 100%; border-radius: 0; }
  #side.empty { max-height: 0%; }
  #side .sideGrip { height: 28px; }
  /* strzałka pokazuje, co zrobi stuknięcie: ˄ rozwiń, ˅ zwiń */
  #side .sideGrip i { transform: translateY(3px) rotate(-135deg); transition: transform .2s; }
  #side.duzy .sideGrip i { transform: translateY(-3px) rotate(45deg); }
  #side .sideGrip .sideClose { width: 44px; height: 28px; right: 2px; }
  #side .sideBody { padding: 2px 12px 16px; }
  #side .portrait { height: 92px; }
  #side .portraitWrap { margin-bottom: 8px; }

  /* ---------- pasek dolny: 5 zakładek + zwarty „Następny cykl" ---------- */
  #bar { gap: 3px; padding: 5px calc(var(--sar) + 6px) calc(5px + var(--sab)) calc(var(--sal) + 6px); }
  #bar .tab { height: 48px; border-radius: 10px; gap: 2px; padding: 0 1px; }
  #bar .tab .ic { width: 20px; height: 20px; flex: none; }
  #bar .tab span { font-size: 8.5px; line-height: 1.1; letter-spacing: -.01em; text-transform: none; text-align: center;
    max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #bar .tabCzat { display: none; }            /* czat ma przycisk w pasku górnym — tu brakuje miejsca */
  #bar .next { flex: 0 0 66px; height: 48px; padding: 0 4px; margin: 0; flex-direction: column; gap: 2px;
    font-size: 10px; line-height: 1.1; letter-spacing: 0; white-space: normal; text-align: center; box-shadow: none; }
  #bar .next span { order: 2; font-size: 10px; letter-spacing: 0; }
  #bar .next .ic { order: 1; width: 18px; height: 18px; }

  /* ---------- mapa planety: nagłówek w dwóch liniach, plansza stoi, panel przewija się pod nią ---------- */
  #planetaView { overflow: hidden; }
  #planetaView .plHud { padding: calc(var(--sat, 0px) + 6px) 8px 6px; gap: 6px 8px; flex-wrap: wrap; }
  #planetaView .plWroc { padding: 6px 10px; font-size: 13px; }
  #planetaView .plTytul { flex: 1 1 0; gap: 7px; }
  #planetaView .plTytul h1 { font-size: 16px; line-height: 1.15; }
  #planetaView .plTytul small { font-size: 11px; line-height: 1.3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #planetaView .plTytul > div { min-width: 0; }
  #planetaView .plKula { width: 26px; height: 26px; }
  #planetaView .plPrzel button { width: 30px; height: 30px; font-size: 20px; }
  #planetaView .plPrzel i { min-width: 24px; font-size: 11px; }
  /* liczniki planety: jeden rząd przewijany palcem zamiast trzech rzędów kafelków */
  #planetaView .plStaty { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin: 0; width: 100%; scrollbar-width: none; }
  #planetaView .plStaty::-webkit-scrollbar { display: none; }
  #planetaView .plSt { flex: none; min-width: 0; padding: 3px 8px; border-radius: 8px; }
  #planetaView .plSt small { font-size: 8.5px; white-space: nowrap; }
  #planetaView .plSt b { font-size: 12.5px; }
  #planetaView .plGra { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #planetaView .plMapa { flex: none; padding: 2px 0 4px; }
  #planetaView #plPlansza { height: 70vw; max-height: 44vh; }
  #planetaView .plHoryzont { display: none; }
  #planetaView .plLegenda { flex-wrap: nowrap; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
  #planetaView .plLegenda::-webkit-scrollbar { display: none; }
  #planetaView .plLegenda span { flex: none; }
  #planetaView .plPanel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; gap: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}