/* ═══════════════════════════════════════════════════════════════════════════
   GRINDVEIL — WARSTWA TELEFONU
   ───────────────────────────────────────────────────────────────────────────
   Wszystko tutaj dziala WYLACZNIE pod `html.gv-phone` (stemplowane w
   index.html przy innerWidth < 960). To jest jedyne miejsce, w ktorym pisze
   sie nowe reguly dla telefonu — `style.css` ma 52 rozne warunki media query,
   880 `!important` i zaden wspolny token, wiec doklada­nie tam kolejnej
   warstwy oznaczaloby dokladanie do osadu.

   Zasady tej warstwy:
   · jedna kolumna, zero szerokosci stalych — tylko min() / clamp()
   · cel dotkniecia >= 44 px
   · zaden `nowrap` bez `text-overflow`
   · pozycje liczone z tokenow ponizej, nigdy z wpisanej liczby

   Pomiar wyjsciowy (374x828, produkcja v23.0.1222): naglowek 70 + pasek akcji
   69 + nawigacja 122 = 296 px obudowy, czyli 36% ekranu. Plus 229 px pustego
   ogona pod kazdym panelem.
   ═══════════════════════════════════════════════════════════════════════════ */

html.gv-phone {
  /* Wysokosci obudowy. Deklaracja tutaj ma znaczenie: `--gv-tabbar-h` byla
     dotad ustawiana WYLACZNIE z JS, wiec do pierwszego pomiaru kazdy calc()
     liczyl sie z fallbacku 52 px — o 69 px za malo — i pasek akcji ladowal
     za nawigacja, po czym przeskakiwal klatke pozniej. JS te wartosci
     koryguje, nie tworzy. */
  --gv-hdr-h: 70px;
  --gv-nav-h: 122px;
  --gv-tabbar-h: 122px;
  --gv-safe-b: env(safe-area-inset-bottom, 0px);
  /* Ile miejsca zostawic pod trescia, zeby ostatni wiersz nie chowal sie pod
     nawigacja. Bylo 108 px doklejone na sztywno do zlej zmiennej. */
  --gv-content-tail: 14px;

  /* Warstwy. Jedna lista zamiast liczb rozsypanych po pliku — kolizje z
     audytu wzialy sie z tego, ze kazdy element wybieral sobie z-index sam. */
  --z-nav: 200;
  --z-scrim: 210;      /* przyciemnienie MUSI byc nad nawigacja */
  --z-sheet: 220;
  --z-float: 190;      /* orb, pigulki, plywajace przyciski — POD nawigacja */
  --z-toast: 320;      /* nad wszystkim poza modalem */
}

/* ── 1. Pusty ogon pod panelami ─────────────────────────────────────────────
   `.tab-panel { padding-bottom: calc(var(--gv-tabbar-h,52px) + 108px) }`
   rezerwowalo ~229 px pustki w kazdej zakladce. Ostatni realny wiersz
   wygladal jak koniec zepsutej strony. */
html.gv-phone .tab-panel {
  padding-bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + var(--gv-content-tail)) !important;
}

/* ── 2. Orb Wojny Veil ──────────────────────────────────────────────────────
   Mial `bottom: 120px` wpisane na sztywno i z-index 850, wiec lezal na pasku
   akcji (z-49) i na gornej krawedzi nawigacji (z-200). Gracz tapal w orb,
   celujac w „Dzienny odbierz". Teraz stoi NAD nawigacja i POD nia w warstwach. */
html.gv-phone .veil-orb-container {
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px) !important;
  right: 10px !important;
  z-index: var(--z-float) !important;
}

/* ── 3. Toasty ──────────────────────────────────────────────────────────────
   `.loot-notify` siedzial na `bottom: 80px` z z-index 90, czyli w calosci
   wewnatrz pasma nawigacji i POD nia. Powiadomienie o zdobytym przedmiocie
   nie bylo widoczne ani razu. Reszta toastow ma `nowrap` bez limitu
   szerokosci, wiec dluga nazwa wychodzila poza obie krawedzie. */
html.gv-phone .loot-notify,
html.gv-phone .invite-promo-slide,
html.gv-phone .pet-food-drop-toast {
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 12px) !important;
  z-index: var(--z-toast) !important;
}
html.gv-phone .loot-notify,
html.gv-phone .server-error-toast,
html.gv-phone .gv-floating-msg,
html.gv-phone .defense-toast,
html.gv-phone .boss-spawn-notification,
html.gv-phone .pet-food-drop-toast {
  max-width: min(340px, calc(100vw - 24px)) !important;
  white-space: normal !important;
  word-break: break-word;
}
html.gv-phone .boss-spawn-notification {
  /* Siadal na naglowku. Schodzi pod niego. */
  top: calc(var(--gv-hdr-h) + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ── 4. Przyciemnienie menu ─────────────────────────────────────────────────
   `.mob-nav-overlay` mialo z-index 199, a `#tabBar` 200: otwarcie hamburgera
   gasilo cala gre OPROCZ paska, ktory zostawal jasny. */
html.gv-phone .mob-nav-overlay { z-index: var(--z-scrim) !important; }
html.gv-phone .mob-nav-grid {
  z-index: calc(var(--z-scrim) + 1) !important;
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px) !important;
  max-height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - 40px);
  overflow-y: auto;
}

/* ── 5. Pigulka staminy w Szczelinie ────────────────────────────────────────
   `html.gv-port-mobile #riftStaminaBar { top: 4px; left: 4px }` ladowalo ja
   na awatarze, nicku i poziomie gracza. */
html.gv-phone #riftStaminaBar {
  top: calc(var(--gv-hdr-h) + 6px) !important;
  left: 8px !important;
  right: auto !important;
  z-index: var(--z-float) !important;
}

/* ── 6. Szuflada boczna ─────────────────────────────────────────────────────
   Przycisk na `left:0; top:70px` i panel 200 px zakrywaly ponad polowe
   szerokosci ekranu, na stale, nad trescia zakladki. */
html.gv-phone .side-drawer-panel {
  width: min(280px, 78vw) !important;
  max-height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - 20px) !important;
  overflow-y: auto;
  z-index: var(--z-sheet) !important;
}
html.gv-phone .side-drawer-toggle { z-index: var(--z-sheet) !important; }

/* ── 7. Szuflada czlonkow gildii ────────────────────────────────────────────
   Przycisk stal na `bottom:170px`, czyli dolnymi 20 px na pasku akcji. */
html.gv-phone .guild-members-toggle {
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 14px) !important;
  z-index: var(--z-float) !important;
}

/* ── 8. Okna ────────────────────────────────────────────────────────────────
   Dwanascie miejsc ustawia szerokosc modala z JS, do 960 px wlacznie
   (ekwipunek), bez zadnego ograniczenia do szerokosci ekranu. Tu jest ten
   jeden bezpiecznik — `max-width` bije `width`, wiec dziala niezaleznie od
   tego, co JS wpisze w `style`. */
html.gv-phone .modal-card,
html.gv-phone #itemCard {
  max-width: min(100vw - 20px, 440px) !important;
  max-height: calc(100dvh - 32px);
}
html.gv-phone .modal-overlay { padding: 12px !important; }

/* ── 9. Tlo zakladki pupili ─────────────────────────────────────────────────
   `#petBgFixed { top:56px; bottom:52px }` bylo wymierzone pod naglowek i
   pasek, ktore juz dawno nie maja tych wysokosci. */
html.gv-phone #petBgFixed {
  top: var(--gv-hdr-h) !important;
  bottom: var(--gv-nav-h) !important;
}

/* ── 10. Naglowek nie moze obcinac poczty ───────────────────────────────────
   `.header-right { overflow: hidden }` przy 374 px cielo przycisk poczty
   razem z plakietka nieprzeczytanych. */
html.gv-phone .header-right {
  overflow: visible !important;
  min-width: 0;
  flex-shrink: 1;
}
html.gv-phone .header-class-badge,
html.gv-phone .header-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 11. Cel dotkniecia ─────────────────────────────────────────────────────
   Minimum, ponizej ktorego palec nie trafia. Dotyczy tego, co jest realnie
   klikane w obudowie; tresc zakladek przechodzi w fazie 5. */
html.gv-phone .mob-nav-bar > *,
html.gv-phone .tab-btn,
html.gv-phone .mob-nav-grid-item {
  min-height: 44px;
}

/* ── 12. Nic nie przewija sie na boki ───────────────────────────────────────
   Ostatnia linia obrony: jesli cokolwiek w tresci wystaje, ma zostac uciete
   zamiast rozjechac cala strone w bok. */
html.gv-phone body { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 1b — PASEK AKCJI JAKO KAFELEK + ARKUSZ
   Pasek znika z ukladu (69 px odzyskane) i przestaje kolidowac z orbem.
   Te same kafle, ta sama tresc — tylko zwiniete pod jeden przycisk.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kafelek nad nawigacja, po lewej; orb stoi po prawej, wiec sie mijaja. */
.gv-quick-pill { display: none; }
html.gv-phone .gv-quick-pill {
  display: inline-flex; align-items: center; gap: 7px;
  position: fixed;
  left: 10px;
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px);
  z-index: var(--z-float);
  min-height: 44px;                 /* cel dotkniecia */
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid rgba(200, 168, 78, .38);
  background: linear-gradient(180deg, rgba(32, 22, 56, .96), rgba(18, 12, 34, .96));
  backdrop-filter: blur(8px);
  color: var(--text-dim, #A99BD0);
  font-family: var(--font-display, Cinzel, serif);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 22px -10px #000;
  cursor: pointer;
}
html.gv-phone .gv-quick-pill.gv-has {
  color: #1B1233;
  background: linear-gradient(180deg, #F3CE7E, #C8A84E);
  border-color: #E4BE68;
  box-shadow: 0 8px 22px -9px rgba(200, 168, 78, .8);
}
html.gv-phone .gv-quick-pill.gv-on { border-color: var(--gold-soft, #FFD46A); }
.gvqp-n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  background: #FF4757; color: #fff;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 11px; font-weight: 800; letter-spacing: 0;
}

/* Pasek zamienia sie w arkusz od dolu: pelna szerokosc, siatka kafli,
   czytelne etykiety. Domyslnie schowany — pokazuje go `.gv-open`. */
html.gv-phone .mob-quick-strip {
  position: fixed !important;
  left: 8px !important; right: 8px !important;
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 62px) !important;
  z-index: var(--z-sheet) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(200, 168, 78, .28);
  background: linear-gradient(180deg, rgba(26, 18, 51, .985), rgba(14, 9, 30, .985));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 48px -18px #000;
  overflow: visible !important;
  max-height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - 120px);
  overflow-y: auto !important;

  /* Schowany, ale nadal renderowany i odswiezany — licznik na kafelku
     czyta jego zawartosc, wiec nie moze byc `display:none`. */
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
html.gv-phone .mob-quick-strip.gv-open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
html.gv-phone .mob-quick-strip .mqs-tile {
  min-width: 0 !important;
  min-height: 62px;
  flex-direction: column !important;
  justify-content: center;
  gap: 3px !important;
  padding: 8px 6px !important;
}
html.gv-phone .mob-quick-strip .mqs-lbl {
  font-size: 9px !important;
  white-space: normal !important;
  text-align: center;
  line-height: 1.2;
}
html.gv-phone .mob-quick-strip .mqs-val { font-size: 10px !important; }

@media (prefers-reduced-motion: reduce) {
  html.gv-phone .mob-quick-strip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 1c — ORB DO NAGŁÓWKA, PASEK BOSSA POZA NAWIGACJĘ
   Nawigacja mierzyla 122 px, bo w srodku siedzial 38-pikselowy pasek
   Swiatowego Bossa, a nad nia unosil sie orb Wojny Veil. Po tej zmianie
   nawigacja to sama nawigacja.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Orb: przeniesiony do naglowka przez JS (klasa `vw-in-hdr`), wiec przestaje
   byc elementem plywajacym i nie ma czego zaslaniac. */
html.gv-phone #veilOrb.vw-in-hdr {
  position: static !important;
  transform: none !important;
  right: auto !important; bottom: auto !important; top: auto !important; left: auto !important;
  z-index: auto !important;
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
  padding: 0 0 0 6px;
  margin-left: 4px;
  border-left: 1px solid rgba(200, 168, 78, .22);
  max-width: 86px;
}
html.gv-phone #veilOrb.vw-in-hdr .veil-orb {
  width: 30px !important; height: 30px !important; border-width: 2px !important;
  box-shadow: 0 0 8px rgba(180, 80, 255, .35) !important;
}
html.gv-phone #veilOrb.vw-in-hdr .veil-orb-label {
  background: none !important; border: 0 !important; padding: 0 !important;
  min-width: 0; text-align: right;
}
html.gv-phone #veilOrb.vw-in-hdr .veil-orb-label { display: none !important; }
html.gv-phone #veilOrb.vw-in-hdr .vol-timer,
html.gv-phone #veilOrb.vw-in-hdr .veil-orb-cta { display: none !important; }

/* Naglowek przy 390 px nie ma 86 px zapasu: chip z procentami wychodzil poza
   prawa krawedz razem z ksiezycem. Zostaje sam orb — kto chce liczb, dotyka
   go i wchodzi do Wojny Veil. Podzial swiatlo/cien widac na samej kuli. */
html.gv-phone #veilOrb.vw-in-hdr {
  max-width: 40px;
  padding-left: 5px;
  margin-left: 3px;
}
html.gv-phone #veilOrb.vw-in-hdr .veil-orb {
  width: 26px !important; height: 26px !important; border-width: 2px !important;
}

/* Pasek Swiatowego Bossa wychodzi z nawigacji. Dostep do bossa zostaje:
   kafel „W.Boss" w arkuszu akcji (pojawia sie, gdy boss zyje) i pozycja
   „Boss" w menu Wiecej. Odzyskane 38 px z kazdego ekranu gry. */
html.gv-phone #worldBossBanner { display: none !important; }

/* Nawigacja bez paska bossa nie potrzebuje 24 px wewnetrznego marginesu. */
html.gv-phone #tabBar {
  padding-top: 6px !important;
  padding-bottom: calc(4px + var(--gv-safe-b)) !important;
}

/* Arkusz akcji nie moze dotykac kafelka. */
html.gv-phone .mob-quick-strip {
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 66px) !important;
}

/* Naglowek: prawa strona ma sie kurczyc, a nie wypychac tresci poza ekran. */
html.gv-phone #gameHeader { gap: 6px; }
html.gv-phone .header-right { gap: 5px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 2 — NAWIGACJA
   Pasek: Glowna · Szczelina · Arena · Glebiny · Wiecej. Gildia zeszla do
   arkusza — to miejsce odwiedzane rzadziej niz arena, ktora ma darmowa walke
   i licznik. Arkusz Wiecej trzyma pozostale 20 miejsc, teraz z nazwami sekcji
   i licznikiem, zeby nie byl slepa sciana ikon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Licznik na „Wiecej”: bez niego arkusz nie daje znac, ze cos w nim czeka. */
.mob-more-badge {
  position: absolute; top: 2px; right: calc(50% - 22px);
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #FF4757; color: #fff;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px rgba(10, 6, 22, .9);
  pointer-events: none;
}

/* Nazwy sekcji w arkuszu. Separator byl pusta kreska; teraz mowi, czego
   szukac w wierszu ponizej. */
html.gv-phone .mob-nav-grid-sep {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px;
  height: auto !important;
  margin: 12px 0 2px !important;
  background: none !important;
}
html.gv-phone .mob-nav-grid-sep span {
  font-family: var(--font-display, Cinzel, serif);
  font-size: 8.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-dim, #8A7233);
  white-space: nowrap;
}
html.gv-phone .mob-nav-grid-sep::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(200,168,78,.32), transparent);
}
html.gv-phone .mob-nav-grid-sep:first-child { margin-top: 0 !important; }

/* Arkusz Wiecej: pelna szerokosc, czytelne etykiety, przewijalny w calosci. */
html.gv-phone .mob-nav-grid {
  left: 8px !important; right: 8px !important;
  padding: 14px 12px !important;
  border-radius: 18px;
  gap: 8px !important;
}
html.gv-phone .mob-nav-grid-item {
  padding: 9px 4px !important;
}
html.gv-phone .mob-nav-grid-item span {
  max-width: none !important;
  font-size: 10px !important;
  white-space: normal !important;
  line-height: 1.2;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 5 — DLUGI POSZCZEGOLNYCH ZAKLADEK
   Kolejnosc z pomiaru, nie z przeczucia: to sa jedyne dwa miejsca, ktore przy
   360 px nadal cos ucinaly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Szczelina: rzad portali ma stale 386 px i trzy gniazda na stalych pozycjach,
   wiec przy 360 lewa etykieta wychodzila poza kadr. `--gv-rift-fit` liczy JS
   jako `min(1, (szerokosc - 8) / 386)` — plynnie, bez kolejnego progu. */
html.gv-phone .rift-circles-row {
  transform: scale(var(--gv-rift-fit, 1));
  transform-origin: top center;
}

/* Kodeks: dziewiec zakladek po 74 px w kontenerze 326 px. Pasek byl
   przewijalny w poziomie, wiec piec z nich siedzialo za gestem, o ktorym nic
   nie informowalo. Zawijaja sie teraz w dwa rzedy — wszystkie widoczne naraz,
   zgodnie z zalozeniem, ze na telefonie ma byc widac cala gre. */
html.gv-phone .cdx-tabs {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  justify-content: center;
  gap: 6px !important;
}
html.gv-phone .cdx-tabs .cdx-tab {
  flex: 0 0 auto;
  min-width: 0;
}

/* Pety: rzad podzakladek nie miescil sie przy 344 px — ostatnia
   („Przewodnik") wychodzila 39 px poza kadr. Zawija sie. */
html.gv-phone .pet-subtab { flex: 0 1 auto; min-width: 0; }
html.gv-phone .pet-subtab > span { white-space: normal; }
html.gv-phone .pet-subtab,
html.gv-phone .cdx-tab { max-width: 100%; }

/* Kontener podzakladek Petow jest budowany inline w JS i nie ma klasy, wiec
   nie da sie go zlapac selektorem po nazwie — bierzemy go przez dziecko. */
html.gv-phone .tab-panel.active div:has(> .pet-subtab) {
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 6px !important;
}

/* Poziom: kafelek i arkusz sa rozwiazaniem PIONU. W poziomie pasek akcji ma
   wlasny pionowy rail przy krawedzi kolumny bocznej — dziala i nic nie
   zaslania, wiec zostaje jak byl. Kafelek sie tam nie pokazuje. */
/* ── Cele dotkniecia w tresci ───────────────────────────────────────────────
   Przeglad na 390 px znalazl trzy klasy ponizej progu 44 px: chevrony
   zwijania newsow (26x26, osiem sztuk na Glownej), zakladki areny (73x30)
   i przycisk odswiezenia sklepu (129x28). Powiekszamy pole dotkniecia,
   nie sam rysunek — dlatego padding i min-height, nie skala. */
html.gv-phone .home-news-fold {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
html.gv-phone .arena-tab {
  min-height: 44px;
  padding-top: 8px; padding-bottom: 8px;
}
html.gv-phone .shop-refresh-btn {
  min-height: 44px;
  padding-top: 9px; padding-bottom: 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CZYTELNOSC — PODLOGA ROZMIARU PISMA
   ───────────────────────────────────────────────────────────────────────────
   Pomiar na 390 px: Arena miala 60 ze 111 wezlow tekstowych ponizej 11 px,
   najmniejszy **6,5 px**; Rankingi 71 z 71. To nie jest tekst, tylko szarosc.
   Ponizej sa dokladnie te klasy, ktore pomiar wskazal — nie ryczaltowe
   powiekszenie wszystkiego, bo to rozsadziloby uklady, ktore wlasnie
   doprowadzilismy do porzadku.

   Prog: 11 px dla czegokolwiek, co gracz CZYTA; 10 px wolno tylko plakietkom
   i licznikom, ktore rozpoznaje sie po ksztalcie, nie po literach.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Karta zawodnika w arenie — najgorsze miejsce w calej grze */
html.gv-phone .gva-lbl { font-size: 11px !important; letter-spacing: .06em !important; }
html.gv-phone .gva-sg span { font-size: 11px !important; }
html.gv-phone .gva-cls,
html.gv-phone .gva-fac { font-size: 11px !important; }
html.gv-phone .gva-seal-tier { font-size: 10.5px !important; }
html.gv-phone .gva-seal-lvl { font-size: 10px !important; }
html.gv-phone .gva-rw-win i,
html.gv-phone .gva-rw-loss i { font-size: 11px !important; font-style: normal; }
html.gv-phone .arena-pill-label { font-size: 11px !important; }
html.gv-phone .arena-dash-desc { font-size: 12px !important; line-height: 1.45; }

/* Rankingi */
html.gv-phone .rank-title { font-size: 12px !important; }

/* Glebiny */
html.gv-phone .dng-zrow-rates { font-size: 11.5px !important; }
html.gv-phone .dng-cd-label { font-size: 11px !important; }
html.gv-phone .dng-zones-count { font-size: 11.5px !important; }

/* Plakietki — zostaja male, ale nie mikroskopijne */
html.gv-phone .chat-msg-founder-tag { font-size: 10px !important; }

/* Arkusz akcji: etykiety kafli mialy 9 px, bo mialy sie zmiescic w pasku
   szerokim na 96 px. W arkuszu miejsca jest wiecej. */
html.gv-phone .mob-quick-strip .mqs-lbl { font-size: 10.5px !important; }
html.gv-phone .mob-quick-strip .mqs-val { font-size: 11px !important; }

/* Arkusz Wiecej */
html.gv-phone .mob-nav-grid-item span { font-size: 11px !important; }

/* ── Rozmiary wpisane inline ────────────────────────────────────────────────
   Po podniesieniu nazwanych klas zostalo 41 elementow na 10 px, 7 na 9 px
   i 3 na 6,5 px — wszystkie BEZ klasy, z rozmiarem w atrybucie `style`.
   To jest ten sam dlug co 2 593 inline'y w `ui.js`: CSS po nazwie ich nie
   zlapie. Lapiemy je po samej deklaracji.

   `!important` w arkuszu bije inline bez `!important`, wiec to dziala bez
   dotykania JS. Selektor trafia WYLACZNIE w elementy, ktore same deklaruja
   rozmiar ponizej progu — nic innego nie rusza.
   ─────────────────────────────────────────────────────────────────────────── */
html.gv-phone [style*="font-size:6px"],
html.gv-phone [style*="font-size: 6px"],
html.gv-phone [style*="font-size:6.5px"],
html.gv-phone [style*="font-size: 6.5px"],
html.gv-phone [style*="font-size:7px"],
html.gv-phone [style*="font-size: 7px"],
html.gv-phone [style*="font-size:7.5px"],
html.gv-phone [style*="font-size: 7.5px"],
html.gv-phone [style*="font-size:8px"],
html.gv-phone [style*="font-size: 8px"],
html.gv-phone [style*="font-size:8.5px"],
html.gv-phone [style*="font-size: 8.5px"],
html.gv-phone [style*="font-size:9px"],
html.gv-phone [style*="font-size: 9px"],
html.gv-phone [style*="font-size:9.5px"],
html.gv-phone [style*="font-size: 9.5px"],
html.gv-phone [style*="font-size:10px"],
html.gv-phone [style*="font-size: 10px"],
html.gv-phone [style*="font-size:10.5px"],
html.gv-phone [style*="font-size: 10.5px"] {
  font-size: 11px !important;
}
/* Znaczniki i plakietki moga zostac mniejsze — rozpoznaje sie je po ksztalcie. */
html.gv-phone .gva-seal-lvl,
html.gv-phone .gva-seal-lvl small,
html.gv-phone .item-lvl-badge,
html.gv-phone .tab-timer-badge,
html.gv-phone .mob-more-badge,
html.gv-phone .gvqp-n {
  font-size: 10px !important;
}

/* Ostatnie z pomiaru: napisy, ktore gracz naprawde czyta, a mialy 8-9,5 px. */
html.gv-phone .home-greet-hi { font-size: 11px !important; letter-spacing: .16em !important; }
html.gv-phone .home-news-cover-cat { font-size: 10px !important; }
html.gv-phone .home-news-cover-date { font-size: 11px !important; }
html.gv-phone .sh-ribbon { font-size: 10px !important; }
/* `.up` / `.down` to zmiany procentowe przy statystykach — czytane, nie
   rozpoznawane po ksztalcie. */
html.gv-phone .gva-hero .up,
html.gv-phone .gva-hero .down,
html.gv-phone .gva-sg .up,
html.gv-phone .gva-sg .down { font-size: 11px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 6 — PORZADEK NA EKRANIE (04.09.2026)
   Mark: „za duzo na ekranie, elementy niewidoczne albo zasloniete".
   Pomiar 390x844 (staging v23.0.1535): naglowek mial 290 px tresci na 226
   dostepnych (poczta wystawala, orb Wojny Veil stal CALY poza ekranem),
   a nad trescia lezaly cztery plywajace rzeczy naraz: pigulka akcji,
   plakietka zglaszania bledow (na 70% wysokosci, na srodku tresci),
   panel debug Veilplate i guzik demo walki (oba tylko na podgladzie) plus
   numer wersji na etykiecie „Wiecej".
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6.1 Naglowek: moc i orb w wierszu XP, prawa strona miesci sie ─────── */
html.gv-phone .header-xp-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0;
}
html.gv-phone .header-xp-bar-wrap { flex: 1; min-width: 0; }
html.gv-phone .header-power.hp-in-xp {
  flex: 0 0 auto; margin: 0; padding: 2px 8px;
  font-size: 11px; height: auto;
}
html.gv-phone .header-power.hp-in-xp .header-power-icon { width: 13px; height: 13px; }
html.gv-phone #veilOrb.vw-in-hdr { flex: 0 0 auto; margin: 0; }
html.gv-phone .header-right { gap: 4px !important; justify-content: flex-end; }
html.gv-phone .currency-item { padding: 3px 7px !important; font-size: 11.5px !important; }
html.gv-phone .currency-icon { width: 14px !important; height: 14px !important; }
html.gv-phone .header-mail-btn { width: 34px !important; height: 34px !important; flex: 0 0 auto; }
html.gv-phone .header-identity { min-width: 0; flex: 1 1 auto; }
html.gv-phone .header-name { max-width: 96px; }

/* ── 6.2 Narzedzia podgladu i numer wersji: nie na telefonie ───────────── */
html.gv-phone #vpDebug,
html.gv-phone #vbDemoBtn,
html.gv-phone #gv-ver { display: none !important; }

/* ── 6.3 Zglaszanie bledow: kolko nad nawigacja po prawej, bez plakietki ─
   Plakietka „Bug or idea" na 70% wysokosci lezala na srodku kazdej zakladki
   (na Rankingach na karcie #3, na Glebinach na „Odbierz nagrode"). Na
   telefonie zostaje samo kolko, w rogu nad nawigacja, po przeciwnej stronie
   niz pigulka akcji. Wejscie do zglaszania jest tez w arkuszu Wiecej. */
html.gv-phone .gvfb-fab {
  top: auto !important; right: 10px !important;
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px) !important;
  z-index: var(--z-float) !important;
}
html.gv-phone .gvfb-fab .gvfb-fab-lb,
html.gv-phone .gvfb-fab .gvfb-fab-x,
html.gv-phone .gvfb-fab .gvfb-fab-re { display: none !important; }
html.gv-phone .gvfb-fab .gvfb-fab-btn { width: 40px !important; height: 40px !important; font-size: 18px !important; opacity: .85; }
/* Gdy otwarty jest arkusz akcji albo Wiecej, kolko schodzi z drogi. */
html.gv-phone body.mob-nav-open .gvfb-fab,
html.gv-phone .mob-quick-strip.gv-open ~ .gvfb-fab { display: none !important; }

/* ── 6.4 Ogon tresci: pigulka akcji i kolko maja 44 px + odstep ────────── */
html.gv-phone { --gv-content-tail: 72px; }

/* ── 6.5 Aktualnosci: tytul tekstem pod okladka ────────────────────────── */
.home-news-cover-title { display: none; }
html.gv-phone .home-news-cover-title {
  display: block; width: 100%;
  font-family: var(--font-display, Cinzel, serif); font-weight: 700;
  font-size: 15px; line-height: 1.25; color: var(--gold-soft, #FFD46A);
  margin-bottom: 4px;
}
html.gv-phone .home-news-cover-foot { flex-wrap: wrap; }

/* ── 6.6 Drzewko umiejetnosci: pasek gorny w jednym wierszu, panel premii
   pod nim, nie na srodku drzewa ─────────────────────────────────────────── */
html.gv-phone #gvstTopBar { height: 52px !important; padding: 0 8px !important; gap: 6px; }
html.gv-phone #gvstTopBar > div:first-child > div:first-child { font-size: 14px !important; white-space: nowrap; }
html.gv-phone #gvstTopBar > div:first-child > div:nth-child(2) { display: none !important; }
html.gv-phone #gvstTopBar input { width: 96px !important; min-width: 0 !important; font-size: 12px !important; }
html.gv-phone #gvstBonusPanel {
  top: 60px !important; left: 8px !important; transform: none !important;
  max-width: 140px !important; max-height: 34vh !important;
  padding: 6px 8px !important; opacity: .92;
}

/* ── 6.7 Sklep: krzyzyk okna lezal na banerze „grasz jako gosc" ─────────── */
html.gv-phone .ds-guest-warn { padding-right: 52px !important; }

/* ── 6.8 Glebiny: lista stref ma 60 px, bo dwie kolumny desktopu dziela
   wysokosc panelu. Na telefonie kolumny ida jedna pod druga, a lista
   dostaje wlasna wysokosc i wlasne przewijanie. ─────────────────────────── */
html.gv-phone .dng-combined { flex-direction: column !important; }
html.gv-phone .dng-combined-left, html.gv-phone .dng-combined-right { flex: none !important; min-width: 0 !important; width: 100%; }
html.gv-phone .dng-zones-scroll { flex: none !important; height: auto !important; max-height: min(52vh, 440px); }

/* ── 6.9 Gildia: lista czlonkow i czat gildii w zasiegu palca ───────────────
   Przycisk listy czlonkow lezal pod kolkiem zglaszania bledow (oba w prawym
   dolnym rogu), a wejscie do czatu gildii (`.gh-talk-call`) nie pokazywalo
   sie na telefonie w ogole. Na zakladce gildii kolko schodzi; nad nawigacja
   stoja: pigulka akcji (lewo), czat (srodek), czlonkowie (prawo). */
html.gv-phone body[data-active-tab="guild"] .gvfb-fab { display: none !important; }
html.gv-phone .gh-roster-fab {
  right: 10px !important; bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px) !important;
  z-index: var(--z-float) !important; min-height: 44px;
}
html.gv-phone .gh.no-talk .gh-talk-call, html.gv-phone .gh-talk-call {
  display: flex !important; position: fixed !important;
  left: 50%; right: auto !important; transform: translateX(-50%);
  bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + 10px) !important;
  z-index: var(--z-float) !important; min-height: 44px;
}
html.gv-phone .gh.no-talk .gh-talk-call:hover { transform: translateX(-50%); }
/* Otwarta rozmowa pod hala: pelna wysokosc ekranu minus obudowa. */
html.gv-phone .gh-talk-col { height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - 24px) !important; }

/* ── 6.10 Arena: tablica Koloseum zajmowala pol ekranu, rywale byli pod nia.
   Tytul mniejszy, opis znika, pigulki w jednym rzedzie. ────────────────── */
html.gv-phone .arena-dash { padding: 4px 8px 4px !important; }
html.gv-phone .arena-dash-title { font-size: 15px !important; letter-spacing: 2px !important; }
html.gv-phone .arena-dash-desc { display: none !important; }
html.gv-phone .arena-dash-stats-row { gap: 5px !important; margin-bottom: 3px !important; flex-wrap: nowrap !important; }
html.gv-phone .arena-dash-left { gap: 6px !important; }
html.gv-phone .arena-dash-rank-name { font-size: 11px !important; }
html.gv-phone .arena-dash-elo { font-size: 10px !important; }
html.gv-phone .arena-dash-pill { min-width: 36px !important; padding: 2px 5px !important; }
html.gv-phone .arena-pill-val { font-size: 11px !important; }
html.gv-phone .arena-pill-label { font-size: 8px !important; }
html.gv-phone .arena-dash-sep { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 7 — POZIOM (04.09.2026)
   Mark: „zrob wersje landscape, zeby gracz sobie wybieral". Dotad poziom
   udawal desktop: kolumna bohatera 260 px, desktopowy pasek zakladek
   z etykietami „H.", „T..", pionowy rail akcji, brak naglowka. Przy
   844x390 nie dalo sie tego czytac. Teraz poziom to TEN SAM uklad, co pion
   (jedna kolumna, dolna nawigacja z pieciu przyciskow, arkusze), tylko
   obudowa jest nizsza: naglowek w jednym wierszu 44 px, nawigacja 58 px.
   Wszystkie reguly pionu dzialaja tez tutaj (selektor `html.gv-phone`);
   ten blok tylko odkreca stare reguly poziomu ze style.css i sciska obudowe.
   ═══════════════════════════════════════════════════════════════════════════ */
html.gv-phone.gv-land-mobile {
  --gv-hdr-h: 44px;
  --gv-nav-h: 58px;
  --gv-content-tail: 60px;
}
/* Uklad: jedna kolumna, bez kolumn bocznych. */
html.gv-phone.gv-land-mobile #gameLayout { flex-direction: column !important; }
html.gv-phone.gv-land-mobile .desktop-sidebar { display: none !important; }
html.gv-phone.gv-land-mobile #mainContent { order: 0 !important; flex: 1 1 auto !important; }
html.gv-phone.gv-land-mobile #mainContent > .tab-panel {
  padding-left: 12px !important; padding-right: 12px !important;
  padding-bottom: calc(var(--gv-nav-h) + var(--gv-safe-b) + var(--gv-content-tail)) !important;
}
html.gv-phone.gv-land-mobile #panelHero { display: none; }
html.gv-phone.gv-land-mobile #panelHero.active { display: block !important; }
/* Naglowek: jeden wiersz — tozsamosc, waluty, poczta, a po prawej XP z moca i orbem. */
html.gv-phone.gv-land-mobile #gameHeader {
  display: flex !important; align-items: center; gap: 10px;
  height: var(--gv-hdr-h); padding: 0 12px !important; box-sizing: border-box;
}
html.gv-phone.gv-land-mobile .header-row-top { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; }
html.gv-phone.gv-land-mobile .header-xp-row { flex: 0 0 auto; width: 250px; }
html.gv-phone.gv-land-mobile .header-avatar-wrap, html.gv-phone.gv-land-mobile .header-avatar { width: 30px !important; height: 30px !important; }
html.gv-phone.gv-land-mobile .header-name { font-size: 12px !important; }
html.gv-phone.gv-land-mobile .header-meta { display: none !important; }
/* Nawigacja: piec przyciskow, 58 px. */
html.gv-phone.gv-land-mobile #tabBar {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  margin: 0 !important; padding: 2px 0 calc(2px + var(--gv-safe-b)) !important;
  z-index: var(--z-nav) !important;
}
html.gv-phone.gv-land-mobile .tab-bar-inner { display: none !important; }
html.gv-phone.gv-land-mobile .mob-nav-bar { display: flex !important; }
html.gv-phone.gv-land-mobile .mob-nav-burger { display: flex !important; }
html.gv-phone.gv-land-mobile .mob-nav-bar > *, html.gv-phone.gv-land-mobile .tab-btn { min-height: 44px !important; padding: 2px 0 !important; }
html.gv-phone.gv-land-mobile .mob-nav-bar .tab-icon-img { width: 22px !important; height: 22px !important; }
html.gv-phone.gv-land-mobile .mob-nav-bar .tab-label { font-size: 9.5px !important; }
/* Arkusz akcji: siatka nad nawigacja, jak w pionie (stary pionowy rail precz). */
html.gv-phone.gv-land-mobile .mob-quick-strip {
  left: 8px !important; right: 8px !important; top: auto !important;
  transform: translateY(10px) !important; width: auto !important; max-width: none !important;
  flex-direction: row !important; border-radius: 16px !important;
  max-height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - 90px) !important;
}
html.gv-phone.gv-land-mobile .mob-quick-strip.gv-open { transform: none !important; }
html.gv-phone.gv-land-mobile .mob-quick-strip .mqs-item { flex-direction: row !important; }
/* Arkusz Wiecej: szerszy, wiecej kolumn, mniej przewijania. */
html.gv-phone.gv-land-mobile .mob-nav-grid { grid-template-columns: repeat(6, 1fr) !important; }
/* Okna: pelna wysokosc bywa 390 px — margines mniejszy. */
html.gv-phone.gv-land-mobile .modal-card, html.gv-phone.gv-land-mobile #itemCard { max-height: calc(100dvh - 16px) !important; max-width: min(100vw - 20px, 640px) !important; }
html.gv-phone.gv-land-mobile .modal-overlay { padding: 8px !important; }
/* Nawigacja w poziomie stoi na 844 px, gdzie style.css nie daje jej tla
   (tlo ma tylko ponizej 600 px) — tresc przeswitywala pod przyciskami. */
html.gv-phone.gv-land-mobile #tabBar {
  background: linear-gradient(180deg, rgba(12, 8, 20, 0.92), rgba(10, 6, 22, 0.98)) !important;
  border-top: 1px solid rgba(200, 168, 78, 0.22) !important;
}
/* Szczelina w poziomie: scena ma 100dvh = 390 px, a portale stoja na
   stalych procentach tej wysokosci, wiec dolny rzad wpadal pod nawigacje.
   Scena dostaje 620 px i przewija sie razem z zakladka. */
html.gv-phone.gv-land-mobile #panelTavern { min-height: 620px !important; height: auto !important; }
/* Szuflada boczna byla przyklejona do kolumny bohatera (268 px), ktorej juz nie ma. */
html.gv-phone.gv-land-mobile .side-drawer-toggle { left: 8px !important; top: calc(var(--gv-hdr-h) + 8px) !important; }
html.gv-phone.gv-land-mobile .side-drawer-panel { left: 8px !important; top: calc(var(--gv-hdr-h) + 52px) !important; }

/* ── 7.1 Duzy telefon w poziomie (>= 960 px): reguly desktopu ze style.css
   (`@media (min-width: 960px)`) wchodza tu mimo klasy gv-phone. Straznik:
   wszystko, co desktop pokazuje albo zweza, tu jest zdjete. ──────────── */
html.gv-phone #headerBugBtn, html.gv-phone #headerSettingsWrap { display: none !important; }
html.gv-phone #gameScreen { max-width: 100% !important; border: none !important; }
html.gv-phone #gameLayout { max-width: none !important; }
html.gv-phone .desktop-sidebar { display: none !important; }
html.gv-phone .tab-bar-inner { display: none !important; }
html.gv-phone #tabBar {
  width: 100% !important; max-width: none !important; left: 0 !important; right: 0 !important;
  border-radius: 0 !important; transform: none !important; margin: 0 !important;
}
html.gv-phone .mob-nav-bar { display: flex !important; width: 100% !important; max-width: none !important; }
html.gv-phone .mob-nav-burger {
  display: flex !important; background: none !important; border: none !important;
  box-shadow: none !important; color: inherit !important; width: auto !important;
}
html.gv-phone .mob-nav-burger > span:first-child { background: none !important; }
/* Przyciski nawigacji: przy >= 960 px `flex: 1` z `@media (max-width: 959px)`
   nie dziala i piatka zbijala sie do lewej krawedzi. */
html.gv-phone .mob-nav-bar { justify-content: space-around !important; }
html.gv-phone .mob-nav-bar .tab-btn, html.gv-phone .mob-nav-burger {
  flex: 1 1 0 !important; min-width: 0 !important;
  flex-direction: column !important; align-items: center !important; justify-content: center !important;
}
html.gv-phone .mob-nav-burger .tab-label { display: block !important; }
html.gv-phone .mob-quick-strip .mqs-tile { width: auto !important; max-width: none !important; }
html.gv-phone.gv-land-mobile .mob-quick-strip { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }

/* ── 7.2 Chowanie obudowy: uchwyty przy naglowku i nawigacji ───────────
   JS (ui.js, blok „Chowanie obudowy") dodaje cztery guziki i klasy
   `gv-hdr-off` / `gv-nav-off` na <html>. Tokeny wysokosci ustawia JS. */
.gv-chrome { display: none; }
html.gv-phone .gv-chrome {
  position: fixed; z-index: var(--z-nav); cursor: pointer;
  font-family: inherit; font-size: 9px; line-height: 1; letter-spacing: 0.1em;
  color: rgba(255, 212, 106, 0.85);
  background: linear-gradient(180deg, rgba(40, 28, 78, 0.95), rgba(16, 10, 32, 0.98));
  border: 1px solid rgba(200, 168, 78, 0.35); padding: 0;
}
/* Strzalka chowajaca naglowek: prawy gorny rog, na naglowku. */
html.gv-phone #gvChromeHdrHide { display: block; top: 0; right: 0; width: 22px; height: 18px; border-radius: 0 0 0 10px; border-top: 0; border-right: 0; opacity: .7; }
html.gv-phone.gv-hdr-off #gvChromeHdrHide { display: none; }
/* Naglowek schowany: zostaje uchwyt 18 px na gorze, na srodku. */
html.gv-phone.gv-hdr-off #gameHeader { display: none !important; }
html.gv-phone.gv-hdr-off #gvChromeHdrShow { display: block; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 0 0 10px 10px; border-top: 0; }
/* Strzalka chowajaca nawigacje: mala, tuz nad paskiem, po prawej. */
html.gv-phone #gvChromeNavHide { display: block; right: 0; bottom: calc(var(--gv-nav-h) + var(--gv-safe-b)); width: 22px; height: 16px; border-radius: 10px 0 0 0; border-right: 0; border-bottom: 0; opacity: .7; }
html.gv-phone.gv-nav-off #gvChromeNavHide { display: none; }
/* Nawigacja schowana: uchwyt „menu" na dole, na srodku. */
html.gv-phone.gv-nav-off #tabBar { display: none !important; }
html.gv-phone.gv-nav-off #gvChromeNavShow {
  display: block; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 84px; height: calc(18px + var(--gv-safe-b)); padding-bottom: var(--gv-safe-b);
  border-radius: 10px 10px 0 0; border-bottom: 0;
}
/* Pigulka akcji i kolka nie moga zaslaniac uchwytu — w poziomie i tak ich
   miejsce jest nad nawigacja, a bez nawigacji siadaja na 18 px uchwycie. */
html.gv-phone.gv-nav-off .gv-quick-pill, html.gv-phone.gv-nav-off .gvfb-fab,
html.gv-phone.gv-nav-off .gh-roster-fab, html.gv-phone.gv-nav-off .gh-talk-call { bottom: calc(26px + var(--gv-safe-b)) !important; }

/* ── 7.3 Szczelina w poziomie: pasek staminy nie na portalach ───────────
   Pasek jest `position: fixed` na 82 px wysokosci i lezal dokladnie na
   gornym rzedzie portali. W poziomie schodzi do lewego gornego rogu jako
   waska plakietka. */
html.gv-phone.gv-land-mobile #riftStaminaBar {
  top: calc(var(--gv-hdr-h) + 4px) !important; left: 8px !important;
  transform: scale(0.72) !important; transform-origin: top left !important;
  opacity: .92;
}
/* Pigulka akcji w poziomie: mniejsza, zeby nie lezala na lewym portalu Szczeliny. */
html.gv-phone.gv-land-mobile .gv-quick-pill { min-height: 38px; padding: 0 10px; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAZA 8 — POZIOM: DWIE KOLUMNY (04.09.2026)
   Mark: „w poziomie kazda strone trzeba scrollowac w dol i jest to brzydkie,
   zrob od nowa". Ekran ma 844-1000 px szerokosci i ~290 px tresci na
   wysokosc. Uklad pionu (jedna kolumna) marnuje szerokosc. Tu kazda
   zakladka, ktora ma dwie naturalne czesci, dostaje je obok siebie:
   stala kolumna po lewej (karta, tablica, filtry), reszta po prawej.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Strona glowna: karta powitania po lewej (przyklejona), aktualnosci po prawej. */
html.gv-phone.gv-land-mobile .home-content {
  display: grid !important; grid-template-columns: 280px minmax(0, 1fr); column-gap: 14px; align-items: start;
}
html.gv-phone.gv-land-mobile .home-greet {
  grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 0;
  flex-direction: column !important; align-items: center !important; text-align: center;
  padding: 16px 12px !important; gap: 8px !important;
  background: linear-gradient(180deg, rgba(64, 46, 122, 0.92), rgba(18, 11, 38, 0.97)) !important;
  border: 1px solid rgba(200, 168, 78, 0.38) !important; border-radius: 20px !important;
}
html.gv-phone.gv-land-mobile .home-greet-av { width: 84px !important; height: 84px !important; }
html.gv-phone.gv-land-mobile .home-greet-text { width: 100%; align-items: center; text-align: center; }
html.gv-phone.gv-land-mobile .home-news-st, html.gv-phone.gv-land-mobile .home-news,
html.gv-phone.gv-land-mobile #homeNewsArchive, html.gv-phone.gv-land-mobile .home-content > :not(.home-greet) { grid-column: 2; }
html.gv-phone.gv-land-mobile .home-news-st { margin-top: 0 !important; }
html.gv-phone.gv-land-mobile .home-news-cover-img img { max-height: 170px; object-fit: cover; object-position: top; }

/* Arena: tablica Koloseum po lewej (przyklejona), rywale po prawej. */
/* Tylko AKTYWNY panel: `display: grid !important` na samym #panelArena
   trzymalo arene widoczna pod kazda inna zakladka. */
html.gv-phone.gv-land-mobile #panelArena.active { display: grid !important; grid-template-columns: 330px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html.gv-phone.gv-land-mobile .arena-tabs .arena-tab { font-size: 12px !important; padding: 8px 8px !important; letter-spacing: 0.06em !important; }
html.gv-phone.gv-land-mobile .arena-top-row { grid-column: 1; position: sticky; top: 0; width: 100%; }
html.gv-phone.gv-land-mobile .arena-dash { width: 100% !important; max-width: none !important; }
html.gv-phone.gv-land-mobile .arena-dash-stats-row { flex-wrap: wrap !important; }
html.gv-phone.gv-land-mobile #gvaTrio, html.gv-phone.gv-land-mobile #panelArena > :not(.arena-top-row) { grid-column: 2; min-width: 0; }
html.gv-phone.gv-land-mobile .gvas-wrap { max-width: 480px; margin: 0 auto; }
html.gv-phone.gv-land-mobile .gva-legend { gap: 6px 12px; }

/* Glebiny: mapa po lewej, strefy po prawej (jak na desktopie), bez tytulu. */
html.gv-phone.gv-land-mobile .dng-title { display: none !important; }
html.gv-phone.gv-land-mobile .dng-subtabs { margin: 0 auto 8px !important; }
html.gv-phone.gv-land-mobile .dng-subtab { min-height: 40px !important; padding: 4px 10px !important; }
html.gv-phone.gv-land-mobile .dng-combined { flex-direction: row !important; gap: 10px !important; align-items: start; }
html.gv-phone.gv-land-mobile .dng-combined-left { flex: 1.1 1 0 !important; width: auto !important; }
html.gv-phone.gv-land-mobile .dng-combined-right { flex: 1 1 0 !important; width: auto !important; min-width: 300px !important; }
html.gv-phone.gv-land-mobile .dng-zones-scroll { max-height: 220px; }

/* Bazar: kupiec i oferta dnia po lewej, polka po prawej. */
html.gv-phone.gv-land-mobile .shv { display: grid !important; grid-template-columns: 280px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html.gv-phone.gv-land-mobile .shv-scene { grid-column: 1; height: auto !important; min-height: 0 !important; }
html.gv-phone.gv-land-mobile .shv-merchant { max-height: 180px; }
html.gv-phone.gv-land-mobile .shv-merchant img { max-height: 180px; }
html.gv-phone.gv-land-mobile .shv-deal { grid-column: 1; }
html.gv-phone.gv-land-mobile .bz-window { grid-column: 2; grid-row: 1 / span 3; }

/* Pupile: sztandar i karma po lewej, lista po prawej. */
html.gv-phone.gv-land-mobile .pet-content { max-width: none !important; width: 100% !important; display: grid !important; grid-template-columns: 300px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html.gv-phone.gv-land-mobile .pet-header-banner, html.gv-phone.gv-land-mobile .pet-food-bar-full { grid-column: 1; width: auto !important; }
html.gv-phone.gv-land-mobile .pet-main { grid-column: 2; grid-row: 1 / span 3; width: auto !important; }

/* Ekspedycje: panel po lewej, mapa po prawej. */
html.gv-phone.gv-land-mobile .exp-content { max-width: none !important; }
html.gv-phone.gv-land-mobile .exp-layout { display: flex !important; flex-direction: row !important; gap: 12px; align-items: flex-start; width: 100% !important; max-width: none !important; }
html.gv-phone.gv-land-mobile .exp-side { flex: 0 0 300px !important; width: 300px !important; }
html.gv-phone.gv-land-mobile .exp-mapcol { flex: 1 1 auto !important; width: auto !important; min-width: 0; }

/* Rankingi: naglowek i kategorie po lewej (przyklejone), lista po prawej. */
html.gv-phone.gv-land-mobile .gvrk { display: grid !important; grid-template-columns: 280px minmax(0, 1fr); column-gap: 12px; align-items: start; }
html.gv-phone.gv-land-mobile .gvrk-hd, html.gv-phone.gv-land-mobile .gvrk-cats { grid-column: 1; width: auto !important; }
html.gv-phone.gv-land-mobile .gvrk-hd { position: sticky; top: 0; }
html.gv-phone.gv-land-mobile #rankingsList { grid-column: 2; grid-row: 1 / span 3; width: auto !important; }
html.gv-phone.gv-land-mobile #rankingsSide { display: none !important; }
/* Praca: trzy karty obok siebie, naglowek nad nimi. */
html.gv-phone.gv-land-mobile #panelWork.active { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; align-items: start; }
html.gv-phone.gv-land-mobile #panelWork .work-hero { grid-column: 1 / -1; min-height: 0 !important; height: auto !important; padding: 8px 0 !important; }
html.gv-phone.gv-land-mobile #panelWork .work-card { width: auto !important; max-width: none !important; margin: 0 !important; }
/* Kuznia: tytul i opis ciasniej, zeby lawy byly widoczne od razu. */
html.gv-phone.gv-land-mobile .fr-hub > h1, html.gv-phone.gv-land-mobile .fr-hub .fr-title { font-size: 22px !important; margin: 0 0 2px !important; }
html.gv-phone.gv-land-mobile .fr-hub > p, html.gv-phone.gv-land-mobile .fr-hub .fr-sub { margin: 0 0 8px !important; font-size: 11px !important; }
/* Rankingi: kategorie zawijaja sie w kolumnie. */
html.gv-phone.gv-land-mobile .gvrk-cats { flex-wrap: wrap !important; overflow: visible !important; }
/* Lowienie: naglowek i zakladki nizsze. */
html.gv-phone.gv-land-mobile .fish-header { min-height: 0 !important; padding: 4px 0 !important; }
html.gv-phone.gv-land-mobile .fish-subtab { padding: 6px 8px !important; }

/* ── 8.1 Krawedz kolumny Veilplate (css/veilplate.css #gameLayout::after) ──
   Nakladka z zlota kreska i cieniem na `left: 260px` — dla POZIOMU
   z kolumna bohatera, ktorej od FAZY 7 nie ma. Rysowala sie jako pionowa
   granica przez caly ekran, a wszystko na prawo od niej wygladalo jak
   pod polprzezroczystym tlem. Na telefonie nie ma czego laczyc. */
html.gv-phone #gameLayout::after { display: none !important; }
/* ── 8.2 Szczelina w poziomie: trzy portale w jednym rzedzie na widocznej
   wysokosci. Pozycje portali sa wpisane inline (spawn.x/y w % sceny
   pionowej), wiec tu nadpisane przez !important; scena ma dokladnie
   wysokosc ekranu miedzy naglowkiem a nawigacja, bez przewijania. */
html.gv-phone.gv-land-mobile #panelTavern { min-height: 0 !important; height: calc(100dvh - var(--gv-hdr-h) - var(--gv-nav-h) - var(--gv-safe-b)) !important; overflow: hidden !important; }
html.gv-phone.gv-land-mobile .rift-circle-slot { transform: translate(-50%, -50%) !important; }
html.gv-phone.gv-land-mobile .rift-circle-slot[data-quest="0"] { left: 22% !important; top: 58% !important; }
html.gv-phone.gv-land-mobile .rift-circle-slot[data-quest="1"] { left: 50% !important; top: 58% !important; }
html.gv-phone.gv-land-mobile .rift-circle-slot[data-quest="2"] { left: 78% !important; top: 58% !important; }
html.gv-phone.gv-land-mobile .rift-circle-wrap { width: 84px !important; height: 84px !important; }