/* TELEFONOS NÉZET (2026-10-06, a játékos visszajelzése: „nem jól jelenik meg”). Mérés (tools/verify-mobil.cjs,
   390x844): a fejléc, az épületsáv és a lap képes fejléce együtt ~390 px volt — a képernyő fele, mielőtt bármi
   tartalom látszott —, a két lebegő gomb (csevegő, küldetések) a tartalom jobb szélét takarta, a betűk nagy része
   9-10 px volt, és a kártyák kétszeres belső margója a szűk képernyőn a táblázatokat préselte. Ez a lap CSAK
   telefonon (max-width: 760px) ír felül, a betűméret alsó határa külön, generált lapon van (mobil-betu.css). */
/* Az iOS Safari és több androidos böngésző forgatáskor magától nagyítja a betűt: a méretet a lap szabja meg. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* A 100vh telefonon a címsor mögötti részt is beleszámolja: ahol lehet, a látható magasság (dvh). */
@supports (height:100dvh){
  @media (max-width:760px){
    .gf-k,.outside-route #tartalom{min-height:100dvh}
  }
}
@media (max-width:760px){
  /* --- Fejléc: tömörebb, a nyersanyagsor közelebb --- */
  .topbar{min-height:0;padding:10px 14px 0;gap:0 10px}
  .village-picker b{font-size:19px}
  .resources{margin-top:8px;padding:8px 0 10px;gap:8px}
  .resource b{font-size:12px}

  /* --- Épületsáv: felirattal, egy sorban, oldalra görgethető (a puszta ikonok nem mondták meg, mi mi) --- */
  .quickbar{padding:5px 10px;gap:8px}
  .quickbar a{padding:4px 9px 4px 5px;gap:6px}
  .quickbar a>span:not(.quick-art){display:inline}
  .quick-art{width:26px;height:21px}

  /* --- Tartalom: kisebb oldalmargó, és alul annyi hely, hogy a lap aljára görgetve semmi ne maradjon a lebegő
     gombok (alulról 74 + 44 + 8 + 44 px) és az alsó sáv alatt --- */
  #tartalom{padding:14px 12px calc(182px + env(safe-area-inset-bottom))}
  /* A széltől szélig érő sávok negatív margója a tartalom oldalmargójához igazodik (eddig 18 px volt). */
  .gf-tabs{margin-left:-12px;margin-right:-12px}
  .wm-card{margin-left:-12px;margin-right:-12px}

  /* --- A lap képes fejléce: a felére --- */
  .page-heading{margin-bottom:14px}
  .page-heading.menu-illustrated{min-height:0;padding:14px 16px;gap:8px}
  .page-heading h1{font-size:27px}
  .page-heading p{max-width:none}
  .page-heading.menu-illustrated p:not(.eyebrow){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .page-heading .eyebrow{margin-bottom:4px}
  /* A térképen a térkép a lényeg: a leírás sora a térkép helyét vette el. */
  body.map-route .page-heading p:not(.eyebrow){display:none}

  /* --- Kártyák: kisebb fejléc-margó (a kártya törzséhez nem nyúlunk: a csevegő és a táblázatos kártyák
     szándékosan margó nélküliek) --- */
  .card-header{padding:14px 14px}
  .queue-row{padding:13px 14px}
  .movements .card-header,.movements-footer,.hero-stats{padding-left:14px;padding-right:14px}

  /* --- Táblázatok: szűkebb cellák, törhető fejléc, hogy oldalra görgetés nélkül elférjenek (a Gyülekezőhely
     parancsában az „összes” gomb eddig kilógott a képernyőről) --- */
  .gf-table th,.gf-table td{padding:9px 7px}
  .gf-table th{white-space:normal}
  .gf-send-input{gap:6px}
  .gf-send-input input{width:62px!important}

  /* --- A legtöbbet használt táblák két sorban: fent a név és a gomb/mező, alatta a költség. Telefonon eddig a
     Főépület „Fejlesztés” gombja, a kiképzés mezője és a kutatás gombja a képernyő jobb szélén túl volt. --- */
  .gf-build-table thead,.gf-train-table thead,.gf-research-table thead{display:none}
  .gf-build-table,.gf-build-table tbody,.gf-train-table,.gf-train-table tbody,.gf-research-table,.gf-research-table tbody{display:block;width:100%;min-width:0}
  .gf-build-table tr,.gf-train-table tr,.gf-research-table tr{display:grid;column-gap:10px;row-gap:7px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
  .gf-build-table td,.gf-train-table td,.gf-research-table td{display:block;padding:0!important;border:0!important;min-width:0}
  .gf-build-table td:only-child,.gf-train-table td:only-child,.gf-research-table td:only-child{grid-column:1/-1}
  /* Építés: épület | gomb — költség | idő */
  .gf-build-table tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nev gomb" "ar ido"}
  .gf-build-table td:nth-child(1){grid-area:nev}
  .gf-build-table td:nth-child(2){grid-area:ar}
  .gf-build-table td:nth-child(3){grid-area:ido;text-align:right;color:var(--muted)}
  .gf-build-table td:nth-child(4){grid-area:gomb;text-align:right}
  .gf-build-table .gf-req{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:150px}
  /* Kiképzés: egység | a faluban | mező — költség és idő */
  .gf-train-table tr{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"egyseg falu mezo" "ar ar ar"}
  .gf-train-table td:nth-child(1){grid-area:egyseg}
  .gf-train-table td:nth-child(2){grid-area:ar}
  .gf-train-table td:nth-child(2) small{display:inline;margin-left:8px}
  .gf-train-table td:nth-child(3){grid-area:falu;text-align:right;color:var(--muted)}
  .gf-train-table td:nth-child(3)::before{content:"A faluban ";font-size:11px;color:var(--subtle)}
  .gf-train-table td:nth-child(3):lang(en)::before{content:"In the village "}
  .gf-train-table td:nth-child(4){grid-area:mezo;text-align:right}
  .gf-train-table td:nth-child(4) input{width:78px}
  /* Mező helyett megjegyzés („Előbb ki kell kutatni…”): külön sorba, különben rácsúszik a darabszámra. */
  .gf-train-table td:nth-child(4):not(:has(input)){grid-column:1/-1;grid-row:3;text-align:left;font-size:12px;color:var(--muted)}
  /* Kutatás: egység | gomb — költség | feltétel */
  .gf-research-table tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"egyseg gomb" "ar feltetel"}
  .gf-research-table td:nth-child(1){grid-area:egyseg}
  .gf-research-table td:nth-child(2){grid-area:feltetel;text-align:right;color:var(--muted);font-size:12px}
  .gf-research-table td:nth-child(3){grid-area:ar}
  .gf-research-table td:nth-child(3) small{display:inline;margin-left:8px}
  .gf-research-table td:nth-child(4){grid-area:gomb;text-align:right}

  /* --- A többi tábla: ha az utolsó oszlopban gomb vagy mező van, az oszlop a jobb szélen marad oldalra
     görgetéskor is (a többi oszlop alatta görgethető) --- */
  .gf-table tr>:last-child:has(>.btn,>button,>a.btn,>input,>.gf-send-input,>form){position:sticky;right:0;z-index:1;background:var(--surface);box-shadow:-12px 0 12px -10px #0009}
  /* Hadijelentések: a célpont a tárgyban is benne van — telefonon az oszlop elmarad. */
  .gf-report-table th:nth-child(4),.gf-report-table td:nth-child(4){display:none}

  /* --- Lebegő gombok: kisebbek, a jobb szélhez közelebb, és görgetéskor lefelé elbújnak (mobil.js) --- */
  .gf-dock-button,.gf-kuldetes-gomb{width:44px;height:44px}
  .gf-dock-button .icon,.gf-kuldetes-gomb .icon{width:21px;height:21px}
  .gf-kuldetes{right:10px;bottom:calc(74px + env(safe-area-inset-bottom))}
  #gf-chat-dock{right:10px;bottom:calc(126px + env(safe-area-inset-bottom))}
  .gf-kuldetes,#gf-chat-dock{transition:transform .22s ease,opacity .22s ease}
  html.gf-lebego-rejtve .gf-kuldetes,html.gf-lebego-rejtve #gf-chat-dock{transform:translateY(150px);opacity:0}
  html.gf-lebego-rejtve .gf-kuldetes>*,html.gf-lebego-rejtve #gf-chat-dock>*{pointer-events:none}

  /* --- Érintési felület: a kis szöveges gombok és címkék legalább 32 px magasak --- */
  .text-button{min-height:32px}
  .btn.small{min-height:36px}
  a.chip,button.chip{min-height:28px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .gf-kuldetes,#gf-chat-dock{transition:none}
}

/* FEKVŐ TELEFON (761 px-nél szélesebb, de legfeljebb 500 px magas — pl. 844x390): ilyenkor az asztali elrendezés
   jön, oldalmenüvel. Mérve: a menü logója 136 px, az alján a játékoskártya 101 px volt, így a menüpontoknak 83 px
   maradt; a fejléc, a gyorssáv és a lapfej a magasság felét vitte, a két nagy lebegő gomb a jobb oldalt takarta. */
@media (min-width:761px) and (max-height:500px){
  .brand{padding:12px 16px 10px}
  .brand small{display:none}
  .world-badge{margin-bottom:8px;padding:8px 0}
  .sidebar-bottom{display:none}
  .quickbar{padding-top:3px;padding-bottom:3px}
  #tartalom{padding-top:16px;padding-bottom:110px}
  .page-heading.menu-illustrated{min-height:0;padding:14px 22px}
  .page-heading{margin-bottom:16px}
  .page-heading h1{font-size:30px}
  .gf-dock-button,.gf-kuldetes-gomb{width:44px;height:44px}
  .gf-kuldetes{bottom:14px}
  #gf-chat-dock{bottom:66px}
  .gf-kuldetes,#gf-chat-dock{transition:transform .22s ease,opacity .22s ease}
  html.gf-lebego-rejtve .gf-kuldetes,html.gf-lebego-rejtve #gf-chat-dock{transform:translateY(130px);opacity:0}
  html.gf-lebego-rejtve .gf-kuldetes>*,html.gf-lebego-rejtve #gf-chat-dock>*{pointer-events:none}
}