/* ---- ÉRINTŐKÉPERNYŐN nincs szöveg- és elemkijelölés ----------------------
   Egy játékban az ujj hosszú nyomása nem szövegkijelölés: iOS-en a nagyító,
   a „Másolás" buborék és a kép-mentés menü ugrana fel egy gomb vagy egy
   felirat fölött. A beviteli mezők maradnak kijelölhetők (a név, az e-mail, a
   jelszó szerkesztéséhez kell). Egérrel (asztali gépen) marad a szokásos. */
@media (hover: none) and (pointer: coarse) {
  html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  img { -webkit-user-drag: none; }
  input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }
}

/* Az alapértelmezés a sötét (éjszakai) felület; a nappali változatot a
   témafájl (themes/*.css) írja felül — a nappali változatot is. */
:root {
  /* Zászló-színek. Egy helyen, mert három helyen jelennek meg — a térképi
     jelölőn, a kártya birtoklás-sávján és a krónika fejlécén —, és a
     jelentésük csak akkor tanulható meg, ha mindenhol ugyanaz.
       saját  = zöld    (a tiéd, békében)
       idegen = vörös   (van gazdája, és nem te — ide még vissza kell térni)
       szabad = szürke  (senkié) */
  --flag-mine: #5f9e35;
  --flag-other: #c1503a;
  --flag-free: #9aa0a6;

  --panel-bg: #1e2128;
  --panel-fg: #d8dce3;
  --panel-muted: #8b93a2;
  --accent: #4b9fff;
  --border: #333844;
  --hud-bg: #0e1726cc;
  --field-bg: #14171d;
  --btn-bg: #2b3039;
  --err-color: #ff8a80;
  --code-bg: #2a2f38;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 14px/1.45 var(--ui-font, system-ui), "Segoe UI", Roboto, sans-serif;
  background: var(--map-bg, #0e1726); color: var(--panel-fg); }

/* ---- Setup / letöltő képernyő ------------------------------------------ */
/* A háttér egy rajzolt régi térkép (icons/ui/oldmap.webp), `cover`-rel: a kép
   négyzetes, tehát álló telefonon a függőleges, széles képernyőn a vízszintes
   középső sáv látszik belőle — a rajz ehhez van komponálva (lásd
   scripts/art.html → oldMapBackdrop). Fölötte egy sötétítő réteg, hogy a
   kártya szövege bármilyen kivágáson olvasható maradjon. */
/* ---- Indulás: a legelső képernyő ---------------------------------------
   A lap megnyitásától látszik, JavaScript nélkül. Ugyanaz a sötét lap és
   zöldes gyűrű, mint a többi töltés-jelzőnél — a játékos ugyanazt a jelet
   tanulja meg mindenhol. A `hidden` a kódból kerül rá, amikor van mit
   mutatni helyette. */
#booting {
  position: fixed; inset: 0; z-index: 2050;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #0b0906;
  color: var(--panel-muted, #ab9c7f);
  font: 13px system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
}
#booting[hidden] { display: none; }
#booting p { margin: 0; }

#setup, #unsupported {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--map-bg, #0e1726);
}
#setup::before, #unsupported::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, #17100822 0%, #120c0699 82%),
    url('icons/ui/oldmap.webp') center / cover no-repeat;
}
#setup > *, #unsupported > * { position: relative; }
#setup[hidden], #unsupported[hidden] { display: none; }
#unsupported { z-index: 2100; }
/* a technikai sor: apró, halvány, gépi írással — a hibakereséshez, nem olvasmány */
.unsupported-tech {
  margin: 14px 0 0; font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--panel-muted, #ab9c7f); opacity: .85; word-break: break-word;
}
.unsupported-tech:empty { display: none; }

.setup-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: calc(var(--ui-radius, 8px) + 4px); padding: 24px;
  /* A rajzolt háttér fölött a kártyának saját súlya kell, különben ráolvad. */
  box-shadow: 0 18px 50px #0009, 0 0 0 1px #0004;
}

/* Az embléma: ugyanaz a korong, mint az értesítő ablakoké (a hiba jele, a
   „nem támogatott" képernyő). Kis képernyőn kisebb, hogy a gomb is a hajtás
   fölött maradjon. */
.setup-art { width: 104px; height: 104px; margin: 0 auto 14px; }
.setup-art svg { width: 100%; height: 100%; display: block; }
/* Az első képernyőn a festett térkép (icons/map.webp): fekvő kép, a saját
   arányában; az árnyék a kártyától emeli el, mint egy asztalra tett tekercset. */
.setup-art.kep { width: 232px; max-width: 100%; height: auto; aspect-ratio: 640 / 447; margin-bottom: 6px; }
.setup-art.kep img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 14px #000a);
}
@media (max-height: 560px) {
  .setup-art { width: 72px; height: 72px; margin-bottom: 10px; }
  .setup-art.kep { width: 160px; height: auto; }
}
.setup-card h1 {
  margin: 0 0 8px; font-size: 20px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.field { display: block; margin: 16px 0 12px; }
.field span { display: block; font-size: 12px; color: var(--panel-muted); margin-bottom: 4px; }
.field input {
  width: 100%; padding: 9px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--field-bg); color: var(--panel-fg);
  font-size: 13px;
}
#download-btn { width: 100%; padding: 10px; font-size: 14px; }
#progress-wrap { margin-top: 16px; }
.progress { height: 8px; border-radius: 4px; background: var(--field-bg); overflow: hidden; }
#progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#setup-msg { font-size: 13px; margin: 12px 0 0; min-height: 18px; }
#setup-msg.err { color: var(--err-color); }
.sub { color: var(--panel-muted); font-size: 12px; margin: 4px 0; }
/* Az első képernyő adatvédelmi mondata: halk, a kártya alján — de olvasható,
   és a link valóban linknek látszik. */
.setup-privacy { color: var(--panel-muted); font-size: 12px; line-height: 1.5; margin: 18px 0 0; }
.setup-privacy a,
.reg-consent a,
#set-account-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

button {
  background: var(--btn-bg); color: var(--panel-fg); border: 1px solid var(--border);
  border-radius: var(--ui-radius, 8px); padding: 7px 10px; cursor: pointer; font-size: 13px;
}
button:hover { border-color: var(--accent); }

/* A továbblépés gombja: egy képernyő, egy döntés — legyen is akkora. */
.setup-go {
  width: 100%; padding: 12px; margin-top: 14px;
  font-size: 15px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: inset 0 0 0 1px #5f9e3544;
}
#setup-country[hidden], #setup-retry[hidden] { display: none; }
/* a kézi térképválasztás: egy gomb országonként */
.setup-maps { margin-top: 12px; display: grid; gap: 8px; }
.setup-maps[hidden] { display: none; }
.setup-maps .sub { margin: 0 0 2px; }
.setup-card.center .setup-maps button { margin-top: 0; width: 100%; padding: 10px; font-size: 14px; }
/* sok ország: a telefon saját választója (lásd app.js setupMaps) */
.setup-map-select {
  width: 100%; min-height: 42px; padding: 8px 10px;
  font: inherit; font-size: 15px;
  color: var(--panel-fg); background: var(--btn-bg, var(--hud-bg));
  border: 1px solid var(--border); border-radius: var(--ui-radius, 8px);
}
.setup-maps button:disabled { opacity: .55; cursor: default; }
#setup-login, #setup-register { display: block; margin: 14px auto 0; }
#setup-register + #setup-login { margin-top: 2px; }
#setup-login[hidden], #setup-register[hidden] { display: none; }
#login-register { display: block; margin: 14px auto 0; }
#login-register[hidden] { display: none; }
/* a belépés ablakai az első képernyő (#setup, z-index 2000) FÖLÉ, ha onnan nyílnak */
body.setup-open #login-popup, body.setup-open #register-popup, body.setup-open #reset-popup,
body.setup-open #forgot-popup, body.setup-open #notice-popup, body.setup-open #geo-popup { position: fixed; z-index: 2100; }

/* ---- DEMÓ MÓD sávja (a boltok demó fiókja) ------------------------------ */
/* fent, a település neve (és a térkép-forrás sora) alatt: lent a tallér- és az
   elixír-sáv, meg a nagyító gombjai ülnek */
.demo-banner {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%);
  top: calc(86px + env(safe-area-inset-top, 0px));
  max-width: calc(100vw - 150px);
  padding: 6px 12px; border-radius: 999px;
  background: #1c1710e6; color: #f3e4c1; border: 1px solid #c9a35f;
  font-size: 12px; line-height: 1.35; text-align: center;
  pointer-events: none;
}
.demo-banner[hidden] { display: none; }
#setup-retry { margin-top: 12px; }
#setup-detect:empty { display: none; }
#setup-msg:empty { display: none; }
#unsupported-text { margin-top: 6px; }

/* ---- Új ország felajánlása (a térkép fölött) --------------------------- */
#offer {
  position: absolute; z-index: 7; left: 50%; transform: translateX(-50%);
  top: calc(58px + env(safe-area-inset-top, 0px));
  width: min(340px, calc(100vw - 24px));
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 10px 30px #0007;
}
#offer[hidden] { display: none; }
/* KÖTELEZŐ FRISSÍTÉS (a játékos térképe): a panel középen, alatta a játékot
   letakaró sötét réteg — kattintani se lehet át rajta */
#offer-shade { position: fixed; inset: 0; z-index: 1900; background: #000000c2; }
#offer-shade[hidden] { display: none; }
#offer.kotelezo {
  position: fixed; z-index: 1910; top: 50%; transform: translate(-50%, -50%);
  border-color: var(--accent);
}
#offer strong { display: block; margin-bottom: 2px; }
#offer .btn-row { display: flex; gap: 8px; margin-top: 10px; }
#offer .btn-row button { flex: 1; }
#offer-accept { background: var(--accent); color: #fff; border-color: transparent; }
#offer-progress { margin-top: 10px; }
#offer-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---- Helymeghatározás-képernyő (indulás) ------------------------------- */
#locating {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--map-bg, #0e1726);
}
#locating[hidden] { display: none; }
.setup-card.center { text-align: center; max-width: 360px; }
.setup-card.center h1 { font-size: 17px; margin: 14px 0 6px; }
.setup-card.center button { margin-top: 16px; }
.spinner {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 3D vászon (teljes képernyő) --------------------------------------- */
#map {
  position: fixed; inset: 0;
  background: var(--map-bg, #0e1726);
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
#map:active { cursor: grabbing; }
#map canvas.gl { display: block; width: 100%; height: 100%; }

/* ---- Marker (kör alakú kép a vászon fölött) ---------------------------- */
/* A JS csak a helyére tolja (transform translate a vetített pontra); a
   megjelenés — kör, fehér keret, árnyék, méret — innen és a téma
   --marker-* változóiból jön. A "farok" a talajponttal köti össze. */
#marker {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: var(--marker-size, 46px); height: var(--marker-size, 46px);
  /* a forgatott "farok" csúcsa ~0.71*tail-lel lóg a doboz alá: ennyivel
     feljebb tesszük, hogy pontosan a talajponton álljon */
  margin-top: calc(-0.71 * var(--marker-tail, 9px));
  /* koppintásra a profil nyílik, ezért fogadnia kell az eseményeket */
  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
#marker[hidden] { display: none; }

/* ---- Induló köd --------------------------------------------------------- */
/* A térkép első másodperceiben fehér köd takar mindent (a jelenetet, a
   jelölőket, a markert és a kezelőfelületet — az ablakokat nem), amíg a
   marker körül minden kirajzolódik; aztán lassan felszáll (app.js
   `introFogShow`/`introFogLift`). Az ideje a configból jön (`--intro-fog-ms`). */
#intro-fog {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, #fffdf9 0%, #faf6ee 45%, #f1eadd 100%);
  opacity: 1;
  transition: opacity var(--intro-fog-ms, 2600ms) cubic-bezier(.4, 0, .2, 1);
}
#intro-fog.lift { opacity: 0; }
#intro-fog[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  #intro-fog { transition-duration: 600ms; }
}
/* A PEREM AZ ÉLETERŐ SZERINT (app.js paintMarkerRing): zöld, a felénél sárga,
   a negyedénél vörös — ugyanaz a három szín, ami a fölötte lévő csíkon
   (.marker-hp > i). A változó a keretet ÉS a farkat is festi. Belépés nélkül
   nincs `data-hp`: akkor a téma pereme marad (--marker-ring). */
#marker[data-hp="ok"]   { --marker-ring: #7cbc14; }
#marker[data-hp="warn"] { --marker-ring: #ebbd2f; }
#marker[data-hp="low"]  { --marker-ring: #dc4f31; }
#marker[data-hp] .marker-face, #marker[data-hp] .marker-tail { transition: border-color .3s ease, background-color .3s ease; }

#marker:active .marker-face { transform: scale(.94); }

.marker-face {
  position: relative; z-index: 1;
  transition: transform .12s ease;
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--marker-ring, #fff);
  border: var(--marker-border, 3px) solid var(--marker-ring, #fff);
  box-shadow: var(--marker-shadow, 0 4px 12px rgba(0,0,0,.5));
}

.marker-tail {
  position: absolute; left: 50%; z-index: 0;
  bottom: calc(-0.5 * var(--marker-tail, 9px));
  width: var(--marker-tail, 9px); height: var(--marker-tail, 9px);
  margin-left: calc(-0.5 * var(--marker-tail, 9px));
  background: var(--marker-ring, #fff);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: var(--marker-shadow, 0 4px 12px rgba(0,0,0,.5));
}

/* ---- Iránytű a legközelebbi hirdetményhez (app.js paintFreeCompass) ---- */
/* A marker ALATT áll (a JS tolja a talppont alá; fölötte a név és a csík),
   és nem mozog körbe: csak a nyíl fordul. Ugyanaz a sötét táblácska, mint a
   játékos neve — a kettő egy család, az arany keret mondja, hogy koppintható. */
/* A RÉTEG: a jelölők (#poi-layer, 3) ALATT, a térkép fölött. A marker alatt
   épp az a jelölő áll, amelyiknél a játékos van (egy idegen birtok, egy
   gyűjtőpont, egy láda, egy tábla) — azt nem takarhatja el, és a koppintást
   sem veheti el tőle. Ahol nincs fölötte jelölő, ott a pirula a koppintható. */
#free-compass {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  height: 28px; min-height: 0; margin: 0; padding: 0 9px 0 3px;
  border-radius: 999px;
  color: #f3e7cc; background: #12100ae0;
  border: 1px solid #c9a35fcc;
  box-shadow: 0 2px 6px #0007;
  font-size: 12px; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #000a;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  animation: fc-be .35s ease;
}
#free-compass[hidden] { display: none; }
#free-compass:active { filter: brightness(1.15); }
/* a nyíl egy kis arany korongon — iránytű-tű, nem egérmutató */
#free-compass .fc-nyil {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #f8dc84, #c08d2c 70%, #8a5f17);
  box-shadow: inset 0 0 0 1px #5b3b0c99, 0 1px 2px #0008;
}
/* a festett tű (icons/ui/iranytu-nyil.webp — arany peremmel) az arany korongon */
#free-compass .fc-nyil img { width: 22px; height: 22px; display: block; }
@keyframes fc-be { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #free-compass { animation: none; } }

/* ---- HUD (iránytű + zoom) ---------------------------------------------- */
/* A HUD OSZLOP: az iránytű felül, alatta a többi jelző (most a Sas szem).
   Korábban sor volt, de egyetlen elem ült benne — a bővítés iránya lefelé
   természetes: a jobb felső sarokban a szélesség a szűk, nem a magasság. */
#hud {
  position: absolute; right: 12px; z-index: 5;
  top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
#hud-compass {
  width: var(--compass-size, 46px); height: var(--compass-size, 46px);
  padding: 0; border-radius: 50%;
  background: var(--hud-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--panel-fg);
  pointer-events: auto;                    /* koppintásra tájolás-követés */
  -webkit-tap-highlight-color: transparent;
}
/* A FESTETT IRÁNYTŰ (icons/ui/iranytu.webp): a sárgaréz peremet a kép hozza, ezért a gomb
   maga nem kap keretet és hátteret (a témák #hud-compass szabályai fölött: #hud #hud-compass).
   Az EGÉSZ számlap fordul a közepe körül — az N jel és a tű így együtt mutat északra. */
#hud #hud-compass { background: none; border: 0; box-shadow: none; }
#hud-compass .compass-face {
  display: block; width: 100%; height: 100%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 4px #0009);
}
/* tájolás-követés közben a perem körül kiemelt fény */
#hud #hud-compass.active { box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent); }

/* A FESTETT IKONOK (sas, elixír, zsoldos) képek, nem rajzok: a színeiket
   magukkal hozzák, tehát itt csak a méretük kérdés. Az arányukat megtartjuk
   (`contain`), mert nem mind négyzetes: a lombik és a sisak magasabb, mint
   amilyen széles. */
.art-ico { display: block; object-fit: contain; }
.notice-art .art-ico { width: 84px; height: 84px; margin: 0 auto; }

/* ---- SAS SZEM a HUD-ban ------------------------------------------------ */
/* Ugyanaz a korong, mint az iránytűé: egy család, egy hely, egy méret. Csak
   akkor van itt, amíg a megvett óra tart — lejárva nyomtalanul eltűnik. */
#eagle-btn {
  width: var(--compass-size, 46px); height: var(--compass-size, 46px);
  padding: 0; border-radius: 50%;
  background: var(--hud-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#eagle-btn[hidden] { display: none; }
#eagle-btn:active { transform: scale(.96); }
/* A KÉP KITÖLTI A KORONGOT: a generátor már levágta az üres szélt
   (make-eagle.mjs), tehát itt sincs szükség térközre — csak annyi, hogy a
   keretet ne érje. */
#eagle-btn .eagle-ico {
  width: 86%; height: 86%; object-fit: contain; display: block;
}

/* AZ UTOLSÓ PERCEK: a korong lassan lüktet. Nem riadó, csak annyi, hogy a
   szem elkapja — a pontos időt úgyis az ablak mondja meg. */
#eagle-btn.soon { animation: eagle-soon 1.8s ease-in-out infinite; }
@keyframes eagle-soon {
  0%, 100% { border-color: var(--border); }
  50% { border-color: var(--card-gold, #b9a05e); }
}
@media (prefers-reduced-motion: reduce) {
  #eagle-btn.soon { animation: none; border-color: var(--card-gold, #b9a05e); }
}

/* ---- A Sas szem ablaka ------------------------------------------------- */
/* Fejléc: a sas, mellette a hátralévő idő — ez az első, amit a játékos keres,
   mert ez mondja meg, mennyi ideje van még használni. */
.eagle-left {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.eagle-left .eagle-ico { width: 38px; height: 38px; flex: none; display: block; }
.eagle-left-time {
  font-size: 19px; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-gold, #b9a05e);
  font-variant-numeric: tabular-nums;       /* ne ugráljon a szám szélessége */
}
.eagle-left-label { font-size: 11px; color: var(--panel-muted); }

/* Egy helyszín sora: ikon, név, alatta a szokásos „Mutasd a térképen" link,
   jobbra a távolság. Ugyanaz a felépítés, mint a postaláda sorainál — a link
   is ugyanaz a `msg-goto`, hogy a játékosnak ne kelljen újratanulnia.

   A név és a link KÜLÖN SORBAN: egymás mellett összeérnek („ParkMutasd a
   térképen"), és a hosszú nevek amúgy is elfogynának a link elől. */
.eagle-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #00000014;
}
.eagle-row img { width: 26px; height: 26px; flex: none; }
.eagle-row .eagle-body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.eagle-row .eagle-name {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.eagle-row .eagle-dist {
  flex: none; font-size: 12px; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.eagle-empty { margin: 0; font-size: 13px; color: var(--panel-muted); line-height: 1.5; }

/* ---- Menügomb (pergamen) és a főmenü ----------------------------------- */
#menu-button {
  position: absolute; z-index: 6;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ui-radius, 8px);
  /* ugyanaz a gomb-háttér, mint a zoom +/− gomboknál */
  background: var(--btn-bg, var(--hud-bg)); border: 1px solid var(--border);
  color: var(--panel-fg);
  box-shadow: 0 3px 10px #0004;
  -webkit-tap-highlight-color: transparent;
}
#menu-button[hidden] { display: none; }
/* A festett krónika-könyv (icons/menu.webp): a gombot majdnem kitölti, a
   saját lágy fénye a sötét táblán kiemeli. Ugyanez a könyv áll a menü tetején
   (.menu-art). */
#menu-button .menu-ico {
  display: block; width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 1px 2px #0009);
}
#menu-button:active { transform: scale(.96); }

/* Olvasatlan üzenet: vörös boríték a menü-gomb mellett. Nem szám, hanem
   mozgás hívja fel rá a figyelmet — a pontos darabszám a listában úgyis ott
   van. A villogás lassú és nem tűnik el teljesen, hogy sétálás közben se
   legyen zavaró. */
#mail-flag {
  position: absolute; z-index: 6;
  /* a menü-gomb ALATT, azzal egy oszlopban: 12 (felső margó) + 46 (gomb) + 8 */
  top: calc(66px + env(safe-area-inset-top, 0px)); left: 12px;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ui-radius, 8px);
  background: var(--btn-bg, var(--hud-bg)); border: 1px solid #a8402c;
  /* A boríték színe innen jön (currentColor), így a villanás a rajzot is
     átfesti — nem csak halványít. A puszta áttetszőség tompítana, itt viszont
     épp az kell, hogy a jelzés ERŐSÖDJÖN fel. */
  color: #a8402c;
  box-shadow: 0 3px 10px #0004;
  -webkit-tap-highlight-color: transparent;
  animation: mail-blink 1.6s ease-in-out infinite;
}
#mail-flag[hidden] { display: none; }
/* A FELVETT KÜLDETÉS jelvénye (app.js `wireMissions`): a menü oszlopában, a
   boríték alatt — ha a boríték nincs kint, a helyén. A haladás a sarkában. */
#mission-badge {
  position: absolute; z-index: 6;
  top: calc(120px + env(safe-area-inset-top, 0px)); left: 12px;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ui-radius, 8px);
  background: var(--btn-bg, var(--hud-bg)); border: 1px solid #5b7fd4;
  box-shadow: 0 3px 10px #0004;
  -webkit-tap-highlight-color: transparent;
}
#mission-badge[hidden] { display: none; }
#mail-flag[hidden] + #mission-badge { top: calc(66px + env(safe-area-inset-top, 0px)); }
#mission-badge .art-ico { width: 38px; height: 38px; border-radius: 50%; }
#mission-progress {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 22px; padding: 1px 5px; border-radius: 999px;
  font-size: 11px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  color: #f4f7ff; background: #34508f; border: 1px solid #9bb3ea;
}
#mission-progress:empty { display: none; }
#mission-badge:active { transform: scale(.96); }
#mission-badge.halad { animation: kuld-halad .7s ease-out; }
@keyframes kuld-halad {
  0% { transform: scale(1); box-shadow: 0 3px 10px #0004, 0 0 0 0 #9bb3eacc; }
  35% { transform: scale(1.12); box-shadow: 0 3px 10px #0004, 0 0 14px 4px #9bb3eacc; }
  100% { transform: scale(1); box-shadow: 0 3px 10px #0004, 0 0 0 0 #9bb3ea00; }
}
@media (prefers-reduced-motion: reduce) { #mission-badge.halad { animation: none; } }

/* ---- A TÚRA (TURA.md; app.js „A TÚRA") ------------------------------------ */
/* A FELVETT TÚRA jelvénye (`paintTourBadge`): a küldetésé alatt — ha az (vagy a
   boríték) nincs kint, feljebb lép a helyére */
#tour-badge {
  position: absolute; z-index: 6;
  top: calc(174px + env(safe-area-inset-top, 0px)); left: 12px;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ui-radius, 8px);
  background: var(--btn-bg, var(--hud-bg)); border: 1px solid #cc3a2c;
  box-shadow: 0 3px 10px #0004;
  -webkit-tap-highlight-color: transparent;
}
#tour-badge[hidden] { display: none; }
#mission-badge[hidden] + #tour-badge,
#mail-flag[hidden] ~ #tour-badge { top: calc(120px + env(safe-area-inset-top, 0px)); }
#mail-flag[hidden] + #mission-badge[hidden] + #tour-badge { top: calc(66px + env(safe-area-inset-top, 0px)); }
#tour-badge .art-ico { width: 38px; height: 38px; border-radius: 50%; }
#tour-progress {
  position: absolute; right: -6px; bottom: -6px;
  min-width: 22px; padding: 1px 5px; border-radius: 999px;
  font-size: 11px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  color: #fff4ec; background: #8f2a20; border: 1px solid #f0a090;
}
#tour-progress:empty { display: none; }
#tour-badge:active { transform: scale(.96); }

/* A TÚRA JELEI a térképen (`turaJelek`): a még hátralévő checkpointok
   számozott korongjai — a soron következő nagyobb, és lüktet. (A célban a
   kockás zászló áll, a csizma párja a #tour-top-on.) A helyszín-jelölők ALATT (#poi-layer: 3): a mindenki számára közös,
   foglalható helyszíneké az elsőbbség, mint a hirdetménynél. */
#tour-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* A CSIZMA a játékos jele (#marker: 4) FÖLÖTT: épp a játékos mellett áll, és a
   jele különben eltakarná (a koppintást is az kapná). A foglalható helyszíneket
   nem takarja: 20 m-en belül nem állhat mellettük (`clearMeters`). */
#tour-top { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#tour-top .poi-pin { pointer-events: auto; }
.tura-jel {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--ui-font, system-ui); font-variant-numeric: tabular-nums;
  color: #fff4ec; background: #cf2a1d; border: 2px solid #fff4ec;
  box-shadow: 0 2px 6px #0007;
  -webkit-tap-highlight-color: transparent;
}
.tura-jel[hidden] { display: none; }
.tura-jel.kovetkezo { width: 30px; height: 30px; font-size: 14px; animation: tura-kov 1.6s ease-in-out infinite; }
@keyframes tura-kov {
  0%, 100% { box-shadow: 0 2px 6px #0007, 0 0 0 0 #cf2a1d99; }
  50% { box-shadow: 0 2px 6px #0007, 0 0 0 9px #cf2a1d00; }
}
@media (prefers-reduced-motion: reduce) { .tura-jel.kovetkezo { animation: none; } }

/* A TÚRA KÁRTYÁJA (`paintTourBody`): a hirdetményé mintájára (`.tabla-kartya`) */
.tura-hosszak { display: grid; gap: 8px; }
.tura-hossz {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--ui-radius, 8px);
  background: color-mix(in srgb, var(--hud-bg) 55%, transparent); color: var(--panel-fg);
}
.tura-hossz b { font-size: 16px; }
.tura-hossz span { font-size: 12px; color: var(--panel-muted); }
.tura-hossz[aria-pressed="true"] { border-color: #cc3a2c; box-shadow: inset 0 0 0 1px #cc3a2c; }
.tura-hossz:disabled { opacity: .5; }
.tura-figyelj { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--panel-fg); }
#tura-utvonal, #tura-drop { width: 100%; margin-top: 8px; padding: 8px; }
.tura-gombok { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tura-gombok button { padding: 8px 6px; }
.kuld-aktiv.tura-aktiv { border-color: #cc3a2c; box-shadow: inset 0 0 0 1px #cc3a2c33; }
.tura-allas { margin: 0; font-size: 14px; color: var(--panel-fg); font-variant-numeric: tabular-nums; }

/* ---- A KÜLDETÉSEK TÁBLÁJA a kártyán (app.js `paintBoardBody`) ----------- */
/* A HIRDETŐTÁBLA KÁRTYÁJA (app.js `showBoardPopup`): a szokásos kártyán a kép
   kapja a maradék helyet, a törzs pedig annyi, amennyi a tartalma — a tábla
   ajánlatai viszont hosszúak (három sor, felvett küldetéssel négy), és így a
   kép a minimumára zsugorodott, az alja pedig levágódott. Itt fordítva: a
   borító FIX magasságú, a leírás csak annyi, amennyi kell (de LEGALÁBB HÁROM
   SOR látszik belőle, a többi azon belül görgethető — 2026-10-19: a „kártya
   ötöde" kis kijelzőn egy sorra nyomta össze), és a TÖRZS kapja a maradékot —
   görgethetően, a leírás ALATT.
   A magasság: három sor a `.poi-desc` betűjével (19px × 1,5), a két szélén a
   14px-es béléssel, és még egy bő fél sor — az alsó 30px-es halványítás
   (`.more-below`) így a negyedik sort fedi, nem a harmadikat. */
#poi-popup.tabla-kartya #poi-cover { flex: 0 0 auto; height: clamp(150px, 26vh, 250px); }
#poi-popup.tabla-kartya #poi-story { flex: 0 0 auto; max-height: calc(3.6 * 19px * 1.5 + 28px); }
#poi-popup.tabla-kartya #poi-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kuld-hely {
  margin: 2px 0 10px; text-align: center; font-size: 15px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.kuld-alcim {
  margin: 10px 2px 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel-muted);
}
.kuld-aktiv {
  padding: 8px 10px 10px; margin-bottom: 4px;
  border: 1px solid #5b7fd4; border-radius: var(--ui-radius, 8px);
  box-shadow: inset 0 0 0 1px #5b7fd433;
}
.kuld-aktiv .kuld-alcim { margin-top: 0; }
.kuld-aktiv-sor, .kuld-ajanlat { display: flex; align-items: center; gap: 10px; }
#kuld-drop, #kuld-hajsza { width: 100%; margin-top: 8px; padding: 7px; }
.kuld-ejfel { margin: 6px 0 0; font-size: 12px; text-align: left; }
.kuld-lista { display: grid; gap: 8px; }
.kuld-ajanlat {
  padding: 8px; border: 1px solid var(--border); border-radius: var(--ui-radius, 8px);
  background: color-mix(in srgb, var(--hud-bg) 55%, transparent);
}
.kuld-kep { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.kuld-kep img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #0007); }
.kuld-tartalom { flex: 1 1 auto; min-width: 0; }
.kuld-szoveg { margin: 0; font-size: 14px; line-height: 1.3; color: var(--panel-fg); }
.kuld-jutalom { margin: 3px 0 0; font-size: 12px; color: var(--panel-muted); }
.kuld-jutalom b { color: var(--panel-fg); }
.kuld-felvesz { flex: none; padding: 7px 10px; font-size: 13px; }
.kuld-felvesz:disabled { opacity: .45; }
/* a `.menu-hint` (margin: 0) később áll a fájlban: a két osztállyal ez nyer —
   a sor fölött ugyanannyi hely, mint alatta a gombig (`.poi-leave` 14px) */
.menu-hint.kuld-megj { margin: 14px 0 0; text-align: center; }
#mail-flag:active { transform: scale(.96); }
/* A FESTETT boríték (icons/envelope.webp — a menü Üzenetek-csempéjéé): a villanás a gomb
   hátterét festi vörösre, a boríték maga ugyanaz marad, árnyékkal kiemelve */
#mail-flag img { width: 34px; height: auto; display: block; filter: drop-shadow(0 1px 2px #0009); }
/* A villanás csúcsán a gomb maga is vörösre vált, a boríték pedig világosra:
   így a jelzés a pergamen HUD-on is kiugrik, sötét és világos témában
   egyaránt. */
@keyframes mail-blink {
  0%, 100% {
    color: #a8402c;
    background: var(--btn-bg, var(--hud-bg));
    border-color: #a8402c;
    box-shadow: 0 3px 10px #0004;
  }
  50% {
    color: #fff1e0;
    background: #e04f31;
    border-color: #ff7a55;
    box-shadow: 0 0 16px #e04f31cc, 0 3px 10px #0005;
  }
}
/* Aki nem kéri a mozgást, annál nincs villogás — helyette ÁLLANDÓAN az élénk
   állapot látszik, hogy a jelzés akkor se sikkadjon el. */
@media (prefers-reduced-motion: reduce) {
  #mail-flag {
    animation: none;
    color: #fff1e0;
    background: #e04f31;
    border-color: #ff7a55;
  }
}

/* ---- POI-ikonok a térképen --------------------------------------------- */
#poi-layer {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;                 /* csak maguk az ikonok kattinthatók */
}
.poi-pin {
  position: absolute; left: 0; top: 0;
  width: var(--poi-size, 34px); height: var(--poi-size, 34px);
  padding: 0; border: none; background: none; border-radius: 50%;
  pointer-events: auto; cursor: pointer;
  will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  -webkit-tap-highlight-color: transparent;
}
.poi-pin[hidden] { display: none; }

/* ---- SZÁMOK a jelölők helyett (kis nagyításon) --------------------------
   Nem gomb és nem is kattintható: nem elvisz valahová, hanem MEGMUTATJA,
   hogy arra van mit keresni. A pontos ikonokért nagyítani kell — ezt a
   településnév alatti sor mondja ki. A jelölőknél halkabb (kisebb, sötét
   korong), hogy a pulzáló helyszín mellette is kitűnjön. */
.poi-count {
  position: absolute; left: 0; top: 0;
  min-width: 28px; height: 22px; padding: 0 7px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  /* UGYANAZOK A SZÍNEK, MINT A HUD GOMBJAIN (+/−): a korong ugyanúgy a
     térkép fölött ül, mint azok, tehát ugyanúgy is kell viselkednie
     nappal és este. Volt itt beégetett sötét háttér a téma-színű felirat
     alatt — nappali fényben (`--panel-fg` sötétbarna) az sötétet írt
     sötétre, és a számok egyszerűen eltűntek. */
  background: var(--hud-bg); border: 1px solid var(--border);
  color: var(--panel-fg); font-size: 11px; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  letter-spacing: .02em;
  box-shadow: 0 2px 6px #0007;
  will-change: transform;
  /* KOPPINTHATÓ: egy szintet nagyít (lásd app.js `paintPoiCounts`). A réteg
     maga átengedi a mutatót, ezért itt kell visszakapcsolni. */
  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.poi-count:hover { border-color: var(--accent, #6d9410); }
.poi-count:active { background: var(--btn-bg); border-color: var(--accent); }
.poi-count[hidden] { display: none; }

/* ---- ÁTENGEDŐ ELEMEK: a mozdulat a térképé, a koppintás az elemé --------
   A `#map` `touch-action: none`-t kap, hogy a húzást mi kezeljük. Ez viszont
   NEM öröklődik: a fölötte ülő jelölő és marker alapértelmezetten „auto"
   maradt, és ott a böngésző vette el a mozdulatot (görgetésnek nézte), majd
   `pointercancel`-lel elvágta a húzást. Innen jött a panasz, hogy telefonon
   a jelölők fölött megakad a tolás, és „mellé kell menni".

   A `cam-pass` osztályt a JS teszi rájuk (app.js), és a camera3d.js ebből
   tudja, hogy az ott induló mozdulat mégis a térképé. */
.cam-pass { touch-action: none; }

/* Közeli helyszín (config: poi.nearMeters).
   KÉT gyűrű fut egymás után (::after és ::before, fél ütem eltolással), ezért
   folyamatos hullám látszik. Mindegyik FEHÉREN indul és zöldben hal el: a
   fehér felfutó él a pergamen térképen is messziről kiszúrható, a zöld pedig
   megtartja a „közeled valamihez" jelentést. A gyűrűk külön pszeudoelemek,
   hogy maga az ikon ne torzuljon. */
.poi-pin.near::before,
.poi-pin.near::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  animation: poi-pulse 1.9s ease-out infinite;
  pointer-events: none;
}
.poi-pin.near::before { animation-delay: .95s; }

.poi-pin.near img { animation: poi-glow 1.9s ease-in-out infinite; }

@keyframes poi-pulse {
  0% {
    transform: scale(.7); opacity: 1;
    border-color: #ffffff;
    box-shadow: 0 0 12px #ffffffb0, 0 0 6px #ffffff80 inset;
  }
  28% {
    opacity: .95;
    border-color: #f2ffd6;
    box-shadow: 0 0 9px #ffffff66, 0 0 0 #0000 inset;
  }
  70% {
    transform: scale(1.42); opacity: 0;
    border-color: var(--poi-near, #6d9410);
    box-shadow: 0 0 0 #0000, 0 0 0 #0000 inset;
  }
  100% { transform: scale(1.42); opacity: 0; }
}
/* az ikon fénye is fehéren villan, zölden hal el */
@keyframes poi-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--poi-near, #6d9410)); }
  45%      { filter: drop-shadow(0 0 10px #ffffffcc); }
  65%      { filter: drop-shadow(0 0 9px var(--poi-near, #6d9410)); }
}
/* ---- A KERESETT helyszín kiemelése ---------------------------------------
   A „Mutasd a térképen" odaállítja a kamerát, de nem mondja meg, MELYIK
   korongról volt szó — egy erdőben tíz egyforma jelölő esik a képbe. A
   keresett pont ezért egy másodpercig lüktet (config: `poi.spotMs`).

   Két dologban tér el a közelség-pulzálástól, és mindkettő szándékos:
   ARANYSZÍNŰ (a közelségé fehér→zöld, azt jelenti: „ide odaérsz"; ez mást
   jelent: „ezt kerested"), és TÁGABBRA fut, hogy a szomszédai közül kiváljon.

   A két gyűrű ugyanaz a két pszeudoelem, amit a közelség használ — egy
   jelölőre nem fér több. Ezért ez a szabály a `.near` UTÁN áll: azonos
   fajsúlynál a későbbi nyer, tehát a kiemelés egy másodpercre elnyomja a
   közelség-pulzálást, majd magától visszaadja a helyét. */
.poi-pin.spot::before,
.poi-pin.spot::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 3px solid var(--card-gold, #b9a05e);
  animation: poi-spot .5s ease-out 2;
  pointer-events: none;
}
.poi-pin.spot::before { animation-delay: .25s; }
.poi-pin.spot img { animation: poi-spot-icon 1s ease-out; }

@keyframes poi-spot {
  from {
    transform: scale(.7); opacity: 1;
    border-color: #fff6d8;
    box-shadow: 0 0 18px #ffe9a8e0, 0 0 8px #fff6d8a0 inset;
  }
  to {
    transform: scale(2.2); opacity: 0;
    border-color: var(--card-gold, #b9a05e);
    box-shadow: 0 0 0 #0000, 0 0 0 #0000 inset;
  }
}
/* az ikon egy pillanatra megnő és felizzik: a gyűrű messziről, ez közelről szúr szemet */
@keyframes poi-spot-icon {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 10px #ffe9a8); }
  22%  { transform: scale(1.28); filter: drop-shadow(0 0 16px #fff6d8); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 #0000); }
}

@media (prefers-reduced-motion: reduce) {
  /* A kiemelésnél nem elég a mozgást elhagyni: pont az a dolga, hogy
     MEGMUTASSA, melyik az. Animáció helyett egy álló arany gyűrű marad ki
     ugyanannyi ideig — a class úgyis magától lekerül. */
  .poi-pin.spot::before { display: none; }
  .poi-pin.spot::after {
    animation: none;
    border-color: #fff6d8;
    box-shadow: 0 0 14px #ffe9a8c0;
  }
  .poi-pin.spot img { animation: none; }
  .poi-pin.near::before, .poi-pin.near::after, .poi-pin.near img { animation: none; }
  .poi-pin.near::before { display: none; }
  .poi-pin.near::after {
    opacity: .95;
    border-color: var(--poi-near, #6d9410);
    box-shadow: 0 0 0 2px #ffffff66;
  }
}
.poi-pin img { display: block; width: 100%; height: 100%; }
.poi-pin:active img { transform: scale(.92); }

/* ---- KINCSES LÁDA --------------------------------------------------------
   Nem korongon ül, mint a többi jelölő, hanem magában — ettől tűnik ki. A
   láda fekvő (6:5), és korong nélkül kisebbnek hatna a társainál, ezért egy
   hajszállal nagyobb dobozt kap. Körülötte halvány arany fény, lassan
   lélegezve. A közelség gyűrűi (.near) ugyanazok, mint mindenütt — ott a
   fény is gyorsabban, fehéren villan, a gyűrűkkel együtt. */
.poi-pin.treasure {
  width: calc(var(--poi-size, 34px) * 1.18);
  height: calc(var(--poi-size, 34px) * 1.18);
}
.poi-pin.treasure img {
  object-fit: contain;
  animation: poi-treasure 3.2s ease-in-out infinite;
}
.poi-pin.treasure.near img { animation: poi-treasure-near 1.9s ease-in-out infinite; }
@keyframes poi-treasure {
  0%, 100% { filter: drop-shadow(0 0 3px #ffd76a99); }
  50%      { filter: drop-shadow(0 0 8px #ffe08fd9); }
}
@keyframes poi-treasure-near {
  0%, 100% { filter: drop-shadow(0 0 4px #ffd76acc); }
  45%      { filter: drop-shadow(0 0 11px #fff6d8); }
}
@media (prefers-reduced-motion: reduce) {
  .poi-pin.treasure img, .poi-pin.treasure.near img {
    animation: none;
    filter: drop-shadow(0 0 5px #ffd76ab0);
  }
}

#menu, #poi-popup, #profile-popup, #market-popup, #name-popup, #notice-popup,
#login-popup, #register-popup, #account-popup, #eagle-popup,
#forgot-popup, #reset-popup, #geo-popup, #tutorial-popup {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px
           calc(16px + env(safe-area-inset-bottom, 0px));
  background: #0006;
}
#menu[hidden], #poi-popup[hidden], #profile-popup[hidden], #market-popup[hidden],
#name-popup[hidden], #notice-popup[hidden],
#login-popup[hidden], #register-popup[hidden], #account-popup[hidden],
#eagle-popup[hidden], #forgot-popup[hidden], #reset-popup[hidden], #geo-popup[hidden],
#tutorial-popup[hidden] { display: none; }

/* HA NINCS HELYZET (#geo-popup): az ok, a lépések számozva, alul a technikai sor */
#geo-popup { z-index: 30; }
/* TILTÁSNÁL fix képernyő: mindent eltakar (a játék nem folytatható), és nincs
   bezárása — csak az „Újra" (és a belépés) */
#geo-popup.blokk, body.setup-open #geo-popup.blokk { position: fixed; z-index: 2200; background: #050403f2; }
#geo-popup.blokk #geo-need { color: var(--panel-fg); font-size: 14px; }   /* itt ez a lényeg: nem folytatható */
#geo-login { display: block; margin: 4px auto 0; }
#geo-login[hidden] { display: none; }
.geo-why { margin: 0 0 6px; font-weight: 600; line-height: 1.4; }
.geo-steps-title { margin: 12px 0 4px; font-size: 14px; color: var(--panel-fg); }
.geo-steps { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.45; }
.geo-steps li { margin: 0 0 6px; }
.geo-details { margin: 0 0 12px; font-size: 11px; line-height: 1.4; color: var(--panel-muted); overflow-wrap: anywhere; }
.geo-details code { font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* SZÖVEGES GOMB (elfelejtett jelszó). Nem `primary`, és nem is szokásos gomb:
   ez kiút, nem választás — ha úgy nézne ki, mint a „Belépés", versenyezne
   vele. Aláhúzás jelzi, hogy kattintható; a mérete a segédszövegeké. */
.link-btn {
  display: inline-block; width: auto;
  margin: 2px 0 10px; padding: 4px 0;
  background: none; border: none; box-shadow: none;
  color: var(--panel-muted); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--panel-fg); }
/* A `display` felülírná a `hidden` attribútumot (a böngésző alap-szabályát):
   enélkül egy elrejtett szöveges gomb — például a „Megerősítő levél
   újraküldése", amit csak a megerősítetlen fiók hibájánál szabad mutatni —
   mindig kint állt a belépő ablakban. */
.link-btn[hidden] { display: none; }

/* BELÉPÉS GOOGLE-LEL (src/googlelogin.js): a „vagy" elválasztó és a gomb helye. A böngészőben a
   Google saját gombja (egy keret) kerül a helyére, az Android-appban a miénk — a Google arculati
   szabálya szerint: fehér alap, szürke keret, sötét felirat, a színes G. */
.google-row { margin: 14px 0 4px; }
.google-row[hidden] { display: none; }
.google-row-top { margin: 0 0 14px; }
.or-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; color: var(--panel-muted); font-size: 13px;
}
.google-row-top .or-sep { margin: 12px 0 0; }
.or-sep::before, .or-sep::after { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .35; }
.google-slot { display: flex; justify-content: center; min-height: 44px; }
/* A JÁTÉK TÖBBI GOMBJÁHOZ IGAZÍTVA (2026-10-26): pici barnás, árnyékos keret. A gomb SAJÁT színe,
   vékony kerete, jele és felirata marad (a Google és az Apple arculati szabálya ezt köti meg) — a
   keret köréjük kerül. A Google böngészős gombja beágyazott keretben (iframe) jön, arra csak szűrő
   hat: ezért a hely kapja, és a szűrő a gomb körvonalát követi, nem a dobozét. */
.google-slot {
  filter: drop-shadow(0 0 1px var(--border, #8a6a42)) drop-shadow(0 0 1px var(--border, #8a6a42))
    drop-shadow(0 2px 3px rgba(60, 40, 15, .35));
}
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 320px; height: 44px; padding: 0 16px;
  background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 22px;
  font: 500 15px/1.2 Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .01em;
  box-shadow: none; cursor: pointer;
}
.google-btn:active { background: #f1f3f4; }
.google-btn[disabled] { opacity: .6; cursor: default; }
.google-btn .google-g { flex: 0 0 auto; }
/* BELÉPÉS APPLE-LEL (src/applelogin.js): a Google gombja alatt, ugyanakkora — az Apple arculati
   szabálya szerint: fekete alap, fehér jel és felirat, a rendszer betűje. */
.google-slot[hidden] { display: none; }
.apple-slot { margin-top: 10px; }
.apple-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 320px; height: 44px; padding: 0 16px;
  background: #000; color: #fff; border: 1px solid #000; border-radius: 22px;
  font: 500 16px/1.2 -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em;
  box-shadow: none; cursor: pointer;
}
.apple-btn:active { background: #2b2b2b; }
.apple-btn[disabled] { opacity: .6; cursor: default; }
.apple-btn .apple-logo { flex: 0 0 auto; margin-top: -2px; }

/* A „megerősítetlen cím" figyelmeztetése a Beállításokban. Nem hibaszínű: ez
   nem elrontott dolog, csak egy hátralévő lépés. */
.verify-note { margin: 0 0 8px; font-size: 13px; color: var(--panel-muted); }
.verify-note strong { color: var(--panel-fg); }

/* ---- AZ ABLAKOK MEGJELENÉSE ----------------------------------------------
   Az ablakok eddig egyik képkockáról a másikra ott termettek, a sötétítő
   fátyollal együtt. Egy koppintásnyi út a térképtől a kártyáig — ennyi kell
   hozzá, hogy a kettő összetartozzon, és ne úgy hasson, mintha a kép
   kicserélődött volna.

   MIÉRT a `:not([hidden])` a kapcsoló, és miért nem külön osztály: az ablakot
   a `hidden` mutatja meg, az pedig `display: none`-ról vált — a böngésző az
   animációt ilyenkor magától elindítja. Így a megnyitásnak nincs JavaScript
   része, és nem lehet olyan út, amelyik „elfelejtette" hozzáadni az osztályt.

   A kártyán BELÜLI képernyőváltások (küldetés-lista, krónika, harc, teljes
   képernyő) nem indítják újra: azok csak a tartalmat cserélik, a `display`
   nem változik. */

/* A fátyol mindkét ablaké: a háttér ne egy ugrással sötétüljön el. */
@keyframes veil-in {
  from { background-color: #0000; }
  to   { background-color: #0006; }
}

/* A HELYSZÍN-KÁRTYA alulról, hajszálnyit kisebbről érkezik, és a végén
   megérkezik — a görbe utolsó szakasza egy kicsit túlfut (1,06), ettől van
   súlya: leteszik, nem megjelenik. */
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
#poi-popup:not([hidden]) { animation: veil-in .22s ease-out; }
#poi-popup:not([hidden]) > .menu-card {
  animation: card-in .26s cubic-bezier(.22, .9, .25, 1.06);
}

/* A JUTALOM- ÉS VERESÉG-ABLAK. Ez a játék hangsúlyos pillanata, és a kettő
   nem ugyanaz az érzés — ezért nem ugyanaz a mozdulat sem. Az ablak már a
   megnyitás előtt megkapja a `good` vagy `bad` osztályt (lásd showNotice),
   tehát az első képkockától a helyes animáció fut.

   GYŐZELEM, JUTALOM: alulról jön, nagyobb lendülettel és túlfutással —
   felfelé tartó mozdulat, ahogy a hír is. A jelvény egy hajszálnyit KÉSVE
   pattan a helyére: előbb a keret érkezik meg, aztán a szem rátalál a
   címerre. A `backwards` azért kell, hogy a késleltetés alatt a jelvény a
   kezdőállapotában várjon — enélkül egy képkockára teljes méretben
   felvillanna.

   VERESÉG: FELÜLRŐL jön, és túlfutás nélkül nyomódik a helyére — nem
   pattan, hanem leül. A jelvény nagyból zsugorodik a helyére, mint egy
   becsapódás. Ugyanaz a nyelv, fordított irány. */
@keyframes notice-good-in {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes notice-good-art {
  from { opacity: 0; transform: scale(.5) rotate(-10deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes notice-bad-in {
  from { opacity: 0; transform: translateY(-18px) scale(1.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes notice-bad-art {
  from { opacity: 0; transform: scale(1.6); }
  to   { opacity: 1; transform: none; }
}
#notice-popup:not([hidden]) { animation: veil-in .2s ease-out; }
#notice-popup:not([hidden]) > .menu-card.good {
  animation: notice-good-in .32s cubic-bezier(.2, .95, .25, 1.1);
}
#notice-popup:not([hidden]) > .menu-card.good .notice-art {
  animation: notice-good-art .42s cubic-bezier(.2, 1.5, .35, 1) .1s backwards;
}
#notice-popup:not([hidden]) > .menu-card.bad {
  animation: notice-bad-in .26s ease-out;
}
#notice-popup:not([hidden]) > .menu-card.bad .notice-art {
  animation: notice-bad-art .3s ease-out;
}

/* Mozgásra érzékenyeknek nincs mozgás — csak ott, ahol egyáltalán van. */
@media (prefers-reduced-motion: reduce) {
  #poi-popup:not([hidden]),
  #poi-popup:not([hidden]) > .menu-card,
  #notice-popup:not([hidden]),
  #notice-popup:not([hidden]) > .menu-card,
  #notice-popup:not([hidden]) > .menu-card .notice-art { animation: none; }
}

/* ---- PARÁZS AZ ABLAKOKON -------------------------------------------------
   A vászon a kártya FÖLÖTT van, nem alatta, és ez nem ízlés kérdése: a
   `.menu-card` háttere átlátszatlan, alatta egyetlen szikra sem látszana.
   Fölötte pedig a szöveg olvasható marad, mert a szikrák aprók és lágyak.

   A KEVERÉS nem itt dől el, hanem a vásznon belül (`globalCompositeOperation`):
   sötét kártyán összeadó, világos pergamenen ráfestő. Egy CSS-ből rögzített
   `mix-blend-mode: screen` pont a világos lapon tüntette el a mezőt.

   `pointer-events: none`: a vászon az egész kártyát lefedi, gombostul. Enélkül
   egyetlen gomb sem volna megnyomható — és ez pont az a hiba, ami csak
   telefonon, élesben derülne ki.

   A rajzolás a src/popupembers.js dolga; ide csak a hely tartozik.

   MIÉRT `.menu-card > .parazs-vaszon` és nem csak az osztály: a középkori téma
   a lap gyermekeit egységesen `position: relative; z-index: 1`-re állítja
   (a pergamen-textúra fölé emeli őket), és az később tölt be, mint ez a fájl.
   Azonos fajsúlynál a KÉSŐBBI nyer — a vászon így folyamba került, a
   magasságával megnövelte a kártyát, az meg a következő képkockában még
   nagyobb vásznat kért: a kártya futásonként háromszorosára hízott. Két
   osztálynyi fajsúly zárja rövidre. */
.menu-card > .parazs-vaszon {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  border-radius: inherit;
}

/* A kártya sosem nő ki a képernyőből: a fejléc (és a POI-nál a gomb) a helyén
   marad, a köztes tartalom pedig **görgethető**. Ezért oszlop-flex a kártya,
   és min-height:0 a görgő elemen — enélkül a flex-elem nem tud a
   tartalmánál kisebb lenni, és a görgetés helyett kilógna. */
.menu-card {
  width: 100%; max-width: 380px; max-height: 100%;
  display: flex; flex-direction: column;
  /* a parázs-vászon horgonya (src/popupembers.js) */
  position: relative;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: calc(var(--ui-radius, 8px) + 2px);
  box-shadow: 0 12px 36px #0008;
}
.menu-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--border);
}
.menu-head strong {
  font-size: 16px; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#menu-close, #poi-close {
  width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1;
  background: none; border: none; color: var(--panel-muted);
}
#menu-body, #profile-body, #name-popup .menu-body,
#login-popup .menu-body, #register-popup .menu-body, #account-popup .menu-body,
#eagle-popup .menu-body,
/* A két új ablak IDE IS KELL. Ez a szabály azonosítónként sorolja fel a
   lapokat, és ami kimarad belőle, az nem „kicsit szűkebb" lesz, hanem
   margó NÉLKÜLI: a szöveg a fejlécnek ütközik, a gombok a lap aljának. */
#forgot-popup .menu-body, #reset-popup .menu-body, #geo-popup .menu-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;            /* ne a térkép mozduljon a végén */
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}
#menu-body { min-height: 120px; }
.menu-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.menu-table td { padding: 4px 0; vertical-align: top; }
.menu-table td:first-child { color: var(--panel-muted); white-space: nowrap; padding-right: 12px; }
.menu-table td:last-child { word-break: break-word; }
/* ---- POI „hatalom-kártya" ---------------------------------------------- */
/* A kártya: arany kettős keret, felül a borítókép, rajta a távolság-plakett,
   alatta a szöveg és a küldetés-gomb. A képet a kártya vágja, ezért a
   kerekítés a kártyán van, a képen nem. */
#poi-popup .menu-card {
  position: relative;
  border: 2px solid var(--card-gold, #b9a05e);
  box-shadow: 0 12px 36px #000a, inset 0 0 0 1px #0006;
  overflow: hidden;
}
/* Fejléc: tömör sötétbarna sáv, világos felirattal — a kártya „neve". */
#poi-popup .menu-head {
  background: var(--card-head-bg, #3a2a18);
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  color: var(--card-head-fg, #f3e4c1);
}
#poi-title { font-size: 17px; color: var(--card-head-fg, #f3e4c1); }
#poi-close { color: var(--card-head-fg, #f3e4c1); opacity: .75; }

/* A KÁRTYA A TELJES KÉPERNYŐ-MAGASSÁGBAN, minimális margóval. A sorrend a
   régi: fejléc, birtoklás-sáv, kép, szöveg, gombok. A szövegblokk
   rögzített magasságú (a kártya kb. 30%-a), a gombok a saját magasságukat
   kérik — a KÉP kapja, ami marad. Így a kártya minden képernyőn kitölti a
   helyét, és a szöveg sosem tolja le a gombokat. */
#poi-popup {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px
           calc(8px + env(safe-area-inset-bottom, 0px));
}
#poi-popup > .menu-card { height: 100%; }

#poi-cover {
  flex: 1 1 auto; min-height: 120px;
  position: relative; margin: 0;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  background: #0d0a06;
}
/* CSAK a borítókép: a `#poi-cover img` a védettség-jelvény sisakjára is
   ráillene, és azt is kinyújtaná a borító teljes méretére */
#poi-cover-img {
  /* a kép a maradék helyet tölti ki, a saját mérete nem számít bele */
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  /* a vágás középre, kicsit lejjebb, mert a rajzon ott van a helyszín */
  object-fit: cover; object-position: center 58%;
}
/* felül-alul finom elsötétítés, hogy a fejléc és a plakett olvasható legyen */
#poi-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0000 62%, #0008 100%);
  pointer-events: none;
}

/* ---- A LEÍRÁS: saját blokk a kép és a gombok között -----------------------
   Rögzített magasság (a kártya kb. 30%-a): a szöveg hosszától nem ugrál a
   kártya, és a kép mérete sem. A szöveg írógéppel íródik ki; ami nem fér ki,
   az a blokkon BELÜL görgethető — saját sávval a jobb szélén.

   A SÁV SAJÁT RAJZ, nem a böngészőé: telefonon a beépített sáv csak görgetés
   közben villan fel, a játékosnak viszont előre látnia kell, hogy van még
   szöveg. */
#poi-story {
  flex: 0 0 30%; min-height: 0;
  position: relative;
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--card-gold, #b9a05e) 45%, transparent);
}
#poi-story[hidden] { display: none; }
/* a szöveg a `.poi-desc` betűjével és (témánként) színével */
#poi-story-text {
  flex: 1 1 auto; min-width: 0;
  /* `none`, nem `contain`: a kártya se mozduljon a végén, ÉS a szöveg se
     rugózzon — a saját csúszka a rugózást nem tudná követni (lásd
     paintStoryScroll) */
  overflow-y: auto; overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                    /* a saját sáv látszik helyette */
  padding: 14px 16px;
  cursor: default;
}
#poi-story-text::-webkit-scrollbar { display: none; }
/* görgethető szövegnél a sáv helye kimarad a szöveg jobb széléről */
#poi-story.scrolls #poi-story-text { padding-right: 24px; }
/* görgetésnél a szöveg a blokk szélén elhalványul — ott még folytatódik */
#poi-story.more-below #poi-story-text {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), #0000);
          mask-image: linear-gradient(180deg, #000 calc(100% - 30px), #0000);
}
#poi-story.more-above #poi-story-text {
  -webkit-mask-image: linear-gradient(180deg, #0000, #000 24px);
          mask-image: linear-gradient(180deg, #0000, #000 24px);
}
#poi-story.more-above.more-below #poi-story-text {
  -webkit-mask-image: linear-gradient(180deg, #0000, #000 24px, #000 calc(100% - 30px), #0000);
          mask-image: linear-gradient(180deg, #0000, #000 24px, #000 calc(100% - 30px), #0000);
}

/* AZ ÍRÓGÉP (src/typewriter.js): minden betű lágyan tűnik elő — aranylón indul, és a
   következő már indul, mielőtt az előző kiteljesedett volna. A késleltetést a betű maga
   viszi (`animation-delay`); az alapállapot a LÁTHATÓ betű, tehát ha az animáció
   lekerül (a végén, vagy koppintásra), a szöveg egyszerűen ott marad.
   CSAK ÁTLÁTSZÓSÁG ÉS SZÍN (2026-10-21): a korábbi elmosás (`filter: blur`) és derengés
   (`text-shadow`) betűnként külön rajzolást kért minden képkockán — egyszerre ~18 betű
   „született" —, és a kártya parazsa ettől akadozott írás közben. */
.tw-ink { --tw-glow: #f2d58ccc; }
html:not([data-daytime="night"]) .tw-ink { --tw-glow: #c8922fb3; }
.tw-typing .tw-ch {
  animation: tw-in var(--tw-fade, 700ms) cubic-bezier(.25, .6, .35, 1) both;
}
@keyframes tw-in {
  0%   { opacity: 0; color: var(--tw-glow); }
  45%  { opacity: .75; }
  100% { opacity: 1; }
}

/* A SÁV: vékony vájat a blokk jobb szélén, benne a húzható csúszka — a
   gördítősáv színeivel (lásd lent, „Gördítősáv") */
#poi-story-rail {
  position: absolute; top: 12px; bottom: 12px; right: 7px; width: 6px;
  border-radius: 3px;
  background: #8a6a3633;
  box-shadow: inset 0 0 0 1px #0000001f;
  touch-action: none; cursor: pointer;
  display: none;
}
/* a koppintható felület szélesebb, mint a rajz */
#poi-story-rail::before { content: ''; position: absolute; inset: -4px -7px; }
#poi-story.scrolls #poi-story-rail { display: block; }
#poi-story-thumb {
  position: absolute; left: 0; right: 0; top: 0; min-height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #b48a45, #6b4d24);
  box-shadow: 0 0 4px #b9a05e66;
}

/* ---- A borító alsó sora ------------------------------------------------------
   Kódex BALRA, védettség és távolság JOBBRA — a védettség közvetlenül a
   távolság előtt. */
.poi-cover-bar {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.poi-cover-end {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}

/* Kódex: a helyszín krónikája. A borító BAL alsó sarkában, szemben a
   távolság-plakettel — így a két információ nem torlódik. */
/* A felirat a kódex mellett van, nem alatta: a szó mondja meg, mi ez, az ikon
   pedig messziről is megtalálhatóvá teszi. Egy gomb a kettő, tehát a szóra
   koppintás is nyit — mobilon ez a nagyobb célfelület számít. */
/* A borító alsó sorában három dolog áll: kódex, védettség, távolság. Ezek EGY
   család — azonos bélés, betűméret és kerekítés —, különben a kártya alja
   rendezetlennek látszik. A kódex korábban 40 pixel magas, bőven bélelt gomb
   volt, a másik kettő pedig apró plakett. */
#poi-chronicle {
  padding: 5px 11px 5px 8px; gap: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #14100ac9;
  border: 1px solid var(--card-gold, #b9a05e);
  -webkit-tap-highlight-color: transparent;
}
/* A `display: flex` erősebb, mint a böngésző beépített `[hidden]` szabálya,
   ezért az elrejtést itt is ki kell mondani — enélkül a gyűjtőpont kártyáján
   is ott maradt a kódex-gomb, pedig annak nincs krónikája. Ugyanez a minta,
   mint a #marker, a .poi-pin és a többi saját megjelenítésű elemnél. */
#poi-chronicle[hidden] { display: none; }
#poi-chronicle:hover { border-color: var(--card-gold, #b9a05e); filter: brightness(1.15); }
#poi-chronicle:active { transform: scale(.95); }
#poi-chronicle img { width: 19px; height: 19px; flex: none; filter: drop-shadow(0 1px 1px #000a); }
#poi-chronicle span {
  font-size: 12px; letter-spacing: .06em; line-height: 1.25;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-head-fg, #f3e4c1);
}

/* a távolság a kártya JOBB oldalán, a borító alsó sarkában */
/* A plakettek magassága ne a tartalmuktól függjön: a kódexben szöveg és
   ikon van, a védettségben ikon és szám, a távolságban csak szöveg — így
   pixelre egy vonalban ülnek. */
#poi-chronicle, .poi-guard, #poi-distance {
  box-sizing: border-box; min-height: 29px;
}

#poi-distance {
  display: flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  color: #f3e6c4; background: #14100ac9;
  border: 1px solid var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

#poi-body {
  /* a gyűjtőpont és a hirdetmény gombjai: a saját magasságukat kérik, a
     maradék hely a képé */
  flex: 0 0 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px; color: var(--panel-muted);
}
/* A leírás a saját blokkjában van (#poi-story): a helyszín kártyáján a törzs
   üres — egy üres, bélelt sáv csak távolságot tenne a szöveg és a gomb közé. */
#poi-body:empty { display: none; }
#poi-body > :first-child { margin-top: 0; }
#poi-actions { flex: 0 0 auto; padding: 14px 16px 16px; }
/* ha a törzsben is van valami (gyűjtőpont, hirdetmény), a gombsor ne
   duplázza a térközt */
#poi-body:not(:empty):not([hidden]) + #poi-actions { padding-top: 0; }
#poi-actions[hidden] { display: none; }
#poi-quests {
  width: 100%; padding: 11px; letter-spacing: .1em; font-weight: 700;
  /* a gomb a gyűrű színéből indul, de sötétebb tónusban — ezért világos felirat */
  color: #f2f8e2; border: 1px solid var(--poi-near, #6d9410);
  background: linear-gradient(180deg, var(--poi-near, #6d9410), #4a6a0b);
  text-shadow: 0 1px 1px #0006;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#poi-quests:active { filter: brightness(.92); }

/* GYÓGYÍTÁS: a próbatétel-gomb alatt, MÁSODIK gombként.
   Ugyanaz a szélesség és betű, hogy a kettő egy család legyen, de halkabb —
   keretes, nem kitöltött: a fő gomb maradjon a fő gomb. A színt a színpadról
   hozza (`.hl-pulse` mentazöldje), így a megnyomása előtt is látszik, hová
   visz. */
#poi-heal {
  width: 100%; margin-top: 8px; padding: 9px; letter-spacing: .08em;
  font-weight: 700; font-family: var(--ui-font-display, var(--ui-font, system-ui));
  /* a próbatétel-gombbal egy család (`--poi-near`), csak halkabb: keretes,
     nem kitöltött — a fő gomb maradjon a fő gomb */
  color: #dbeeb2; border: 1px solid color-mix(in srgb, var(--poi-near, #6d9410) 60%, transparent);
  background: linear-gradient(180deg, #23300e, #161d09);
  text-shadow: 0 1px 1px #0006;
}
#poi-heal[hidden] { display: none; }
#poi-heal:hover { color: #eaf7cd; border-color: var(--poi-near, #6d9410); }
#poi-heal:active { filter: brightness(.92); transform: scale(.995); }
/* DEMÓ: „Odamegyek" — a próbatétel-gomb alatt, a gyógyítás-gomb formájában, de
   a demó sáv arany keretével (egy jelentés, egy jelölés) */
#poi-demo-walk {
  width: 100%; margin-top: 8px; padding: 9px; letter-spacing: .06em;
  font-weight: 700; font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #f3e4c1; border: 1px solid #c9a35f; background: linear-gradient(180deg, #2a2015, #1c1710);
}
#poi-demo-walk[hidden] { display: none; }
#poi-demo-walk:active { filter: brightness(.92); transform: scale(.995); }

/* Beállítások szakasz a főmenüben */
.menu-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.menu-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; margin-bottom: 10px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.menu-section button { width: 100%; padding: 9px; margin-bottom: 8px; }

/* RANGLISTA — egy ország, a birtokok száma szerint. A saját sor kiemelve
   (a közelség zöldjével, mint a be-kapcsolók), az első három érem-színt kap:
   egy pillantásra látszódjon, ki áll az élen és hol tartok én. */
.rank-head { text-align: center; margin: 2px 0 14px; }
.rank-country {
  font-size: 20px; font-weight: 700; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.rank-sub { font-size: 12px; color: var(--panel-muted); margin-top: 3px; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--hud-bg) 60%, transparent);
}
.rank-row .rank-n {
  flex: 0 0 2.4em; font-weight: 700; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
}
.rank-row .rank-name {
  flex: 1 1 auto; min-width: 0; color: var(--panel-fg); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-row .rank-name i { font-style: normal; font-weight: 400; color: var(--panel-muted); font-size: 12px; }
.rank-row .rank-count {
  flex: 0 0 auto; font-weight: 700; color: var(--panel-fg);
  font-variant-numeric: tabular-nums;
}
.rank-row.top1 .rank-n { color: #d4a73a; }
.rank-row.top2 .rank-n { color: #aeb6bf; }
.rank-row.top3 .rank-n { color: #b87333; }
.rank-row.me { border-color: var(--poi-near, #6d9410); box-shadow: inset 0 0 0 1px var(--poi-near, #6d9410); }
.rank-gap { text-align: center; color: var(--panel-muted); margin: -2px 0 4px; letter-spacing: .2em; }
.rank-empty { text-align: center; color: var(--panel-muted); margin: 10px 0; }

/* EGY LETÖLTÖTT TÉRKÉP SORA: név, méret, törlés. A méret nem dísz — ez
   dönti el, megéri-e megtartani. A gomb keskeny, hogy a sor egy sor
   maradjon a telefonon is. */
.map-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.map-row .map-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--panel-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-row .map-size {
  flex: 0 0 auto; font-size: 12px; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
}
.map-row .map-del {
  flex: 0 0 auto; width: auto; margin: 0; padding: 6px 12px; font-size: 12px;
}
.menu-section button.danger { color: #f3c9c0; border-color: #7d3b2f; background: #40211a; }

/* Hang-kapcsoló: a felirat balra, az állapot jobbra — egy pillantásból
   látszik, mi szól. Bekapcsolva a közelség-zöld keret jelzi, ugyanaz, ami a
   térképen a "elérhető" állapoté. */
.menu-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.menu-toggle .state {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-muted);
}
.menu-toggle.on { border-color: var(--poi-near, #6d9410); }
.menu-toggle.on .state { color: var(--poi-near, #6d9410); font-weight: 700; }

/* ---- Nyelvválasztó: zászlós legördülő, mint a bemutatkozó oldalon --------
   `<details>`: JavaScript nélkül nyílik és csukódik. A sávban a választott
   nyelv zászlója és neve áll egy nyíllal; kinyitva mind, zászlóval, a SAJÁT
   nyelvük nevén (config `i18n.names` — ezért kapnak `lang` attribútumot is:
   az elválasztás és a felolvasás ebből tudja, milyen nyelvű szöveget lát).
   A zászlók a src/flags.js-ből jönnek, ugyanazok, mint a bemutatkozó oldalé.

   A Beállításokban a lista a SORBAN nyílik (a görgethető ablak levágná a
   lebegőt); az első képernyőn (`.float`) a kártya tetején, középen áll, és a
   lista alatta lebeg, szintén középen. */
.lang-pick { position: relative; }
.lang-pick summary {
  display: flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 0 12px;
  list-style: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--btn-bg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 15px; letter-spacing: .04em; color: var(--panel-fg);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover, .lang-pick[open] summary { border-color: var(--accent); }
.lang-pick summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-pick .chev {
  display: block; flex: none; margin-left: auto;
  width: 10px; height: 7px;
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.lang-pick[open] .chev { transform: rotate(180deg); }
.lang-pick .flag {
  display: block; flex: none;
  width: 21px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px #0008;
}
.lang-pick ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px;
  margin: 6px 0 0; padding: 6px; list-style: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-bg);
}
.lang-pick li button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; margin: 0; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px;
  background: none; text-align: left;
  font-size: 15px; color: var(--panel-muted);
}
.lang-pick li button:hover, .lang-pick li button:focus-visible {
  background: var(--btn-bg); color: var(--panel-fg); outline: none;
}
/* a választott nyelv ugyanazt a zöld keretet kapja, mint a bekapcsolt
   hang-csatorna: egy jelentés, egy jelölés */
.lang-pick li button[aria-current="true"] {
  color: var(--panel-fg); font-weight: 700;
  border-color: var(--poi-near, #6d9410);
}
/* az első képernyőn: a kártya tetején, középen (a sarokban a képre lógott),
   a lista alatta lebeg — ugyanúgy középen, a kártya tartalma fölött */
#setup-lang { display: flex; justify-content: center; margin: -6px 0 12px; }
#setup-lang:empty { display: none; }
.lang-pick.float { position: relative; z-index: 5; }
.lang-pick.float summary { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
.lang-pick.float ul {
  position: absolute; left: 50%; top: 100%; z-index: 6;
  transform: translateX(-50%);
  width: max-content; min-width: 190px; grid-template-columns: 1fr;
  box-shadow: 0 14px 30px #000b;
}
.menu-hint { margin: 0; font-size: 11px; color: var(--panel-muted); }
/* a főmenü legalján: melyik változat fut (app.js `verzioSor`) — sima,
   középre igazított súgósor, nem sáv */
.menu-version { margin-top: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.menu-version:empty { display: none; }
.menu-question { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }

/* ---- Fiókadatok a profilban (e-mail, jelszó) ---------------------------
   Két sor, mindkettő gomb: balra a megnevezés, jobbra az érték, a végén
   ugyanaz a ceruza, ami a név mellett áll. A ceruza a jel arra, hogy ez nem
   felirat, hanem szerkeszthető — és mivel a név mellett már megtanulta a
   játékos, itt nem kell újratanulnia.

   Az érték elfogyhat (`ellipsis`): egy hosszú e-mail-cím különben
   szétfeszítené a kártyát egy telefon szélességében. */
.account-row {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
}
.account-label { flex: none; color: var(--panel-muted); font-size: 13px; }
.account-value {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right; font-size: 13px;
}
/* a szerkesztés jele: a festett lúdtoll (`SZERK_IKON`) */
.szerk-ico { width: 18px; height: 18px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }

/* ---- Profil ------------------------------------------------------------ */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* A profilkép foglalata: ezen ül a töltés-jelző (ezért relatív helyzetű), és
   ez tartja a helyet, amíg a kép megérkezik — enélkül a fejléc ugrana egyet. */
.profile-avatar-slot {
  position: relative; display: block;
  width: 56px; height: 56px; border-radius: 50%;
}
.profile-avatar-slot.is-busy .profile-avatar { visibility: hidden; }
/* itt nem takarunk sötét lappal: a kör kicsi, a gyűrű magában is elég jelzés */
.profile-avatar-slot .loading-layer { background: none; border-radius: 50%; }
/* a szokásos 42 pixeles gyűrű kilógna egy 56 pixeles körből */
.profile-avatar-slot .loading-ring { width: 26px; height: 26px; border-width: 2px; }

.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--marker-ring, #fff);
  border: 2px solid var(--marker-ring, #fff);
  box-shadow: 0 3px 10px #0006;
}
/* A név gomb: koppintásra nyílik a szerkesztő. A ceruza halványan ül mellette
   — jelzi, hogy szerkeszthető, de nem vonja el a figyelmet a névről. */
.profile-name {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  font-size: 17px; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.profile-name:active { opacity: .7; }

/* ---- „Korábbiak betöltése" (hosszú listák lapozása) --------------------- */
/* A gomb a lista ALJÁN ül, halkabban, mint a képernyő fő gombjai: nem ez a
   dolgunk, csak egy lehetőség. Letöltés közben a helyén a szokásos gyűrű
   pörög — a helyi lapozás azonnali, ott nincs mit mutatni. */
.more-row {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 6px 0 2px;
}
.more-row .loading-ring { width: 26px; height: 26px; }
.more-btn {
  padding: 8px 16px; font-size: 13px;
  color: var(--panel-muted);
  background: none; border: 1px dashed var(--border);
}
.more-btn:hover { color: var(--panel-fg); border-style: solid; }
/* A szerverről pótolt régi üzenet halványabb: megvan, de már nem „friss". */
.msg-row.remote { opacity: .72; }

/* ---- Értesítő ablak (próbatétel vége) ----------------------------------- */
/* A képernyő közepén, a próbatétel-ablak FÖLÖTT: ez a pillanat a játék
   hangsúlyos pontja, ezért nem egy sor a lap alján, hanem megállítja a
   játékost. A jelvény rajzolt SVG (lásd NOTICE_ART az app.js-ben). */
#notice-popup {
  z-index: 22;
  align-items: center;                     /* függőlegesen is középen */
}
#notice-popup .menu-card {
  max-width: 320px;
  text-align: center;
  padding: 18px 18px 16px;
  border: 2px solid var(--card-gold, #b9a05e);
}
#notice-popup .menu-card.bad { border-color: #a8402c; }
.notice-art { position: relative; margin: 0 auto 10px; width: 108px; height: 108px; }
.notice-art svg { width: 100%; height: 100%; display: block; }
/* AZ ÁRNYÉK: külön, lágy ovális folt a jel alatt — NEM `filter: drop-shadow`.
   A jel nyitáskor animálódik (`notice-good-art`, `notice-bad-art`: méret,
   forgatás), és a szűrő az animált képen telefonon (Android WebView, Safari) a
   kép NÉGYZETES dobozára vágódott: a győzelem és a bukás jele mögött szögletes,
   csonka árnyék állt. Ugyanaz a hiba és ugyanaz a javítás, mint a menü címerénél
   (.menu-art::after). Egy színátmenetnek nincs mit levágni. */
.notice-art::after {
  content: '';
  position: absolute; left: 50%; bottom: -5px;
  width: 76%; height: 15%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #00000070, #00000036 55%, transparent);
  pointer-events: none;
}
.notice-art > * { position: relative; z-index: 1; }   /* a jel az árnyék fölött */
/* A piac a megvett vagy eladott TÁRGY saját rajzát teszi ide — az kép, nem
   SVG, tehát külön szabály kell neki. */
.notice-art .notice-item {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
/* A FESTETT JELEK: a győzelem (icons/win.webp), a bukás (icons/loose.webp), a
   figyelmeztető jel (icons/warning.webp — minden rendszer-, hálózati és
   technikai probléma) és a lakat (icons/lock.webp — belépés, kiléptetés).
   Korong nélkül, a saját keretükkel, egy méretben (az értesítőben 108, az
   induló- és a „nem támogatott" képernyőn 104 képpont), árnyékkal a lap fölé
   emelve. A rajzolt (SVG) jelvények mind nyugdíjba mentek. */
.notice-art .jel-ico, .setup-art .jel-ico { width: 100%; height: 100%; margin: 0; }
/* az induló képernyő jele nem animálódik: ott maradhat a szűrő */
.setup-art .jel-ico { filter: drop-shadow(0 4px 10px #0008); }

/* Vert aranyérme (napi ajándék): a lap alatt kilátszó perem adja a
   vastagságot, a vésett korona a „pénz" jelét. Ugyanaz a korona és ugyanazok
   a színek, mint a kijelzőn lévő érmén (#coins) — egy érme van a játékban. */
/* A kiürült lombik rajzolt változata NYUGDÍJBA MENT: az értesítő a festett
   elixír-képet mutatja (`artIcon('elixir')`), mint a zsoldos és a tallér. A
   hozzá tartozó `.e-*` szabályok ezzel gazdátlanná váltak, ezért elkerültek —
   egy dead-CSS-blokk később mindig úgy néz ki, mintha kellene. */
#notice-title {
  display: block; margin-bottom: 8px;
  font-size: 19px; line-height: 1.25;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
}
#notice-popup .menu-card.bad #notice-title { color: #a8402c; }
#notice-lines p {
  margin: 4px 0; font-size: 14px; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* jelmagyarázat az ablakban (a bukott rejtvény): a kártyáé, középre igazítva */
#notice-lines .riddle-legend-row { justify-content: center; }
/* alatta a végleges megfejtés: a kérdés-sor a válasszal (a kártya tábláján
   megoldottként látszó sor), és a számokkal is */
#notice-lines .notice-solution { margin-top: 12px; }
#notice-lines .notice-solution .riddle-eq.question {
  margin: 0; padding: 4px 0 0; border-top: 0;
}
#notice-lines .notice-solution .riddle-sym { width: 38px; }
#notice-lines .notice-solution .riddle-num { height: 38px; min-width: 30px; font-size: 21px; color: inherit; }
#notice-lines .notice-solution-num {
  margin-top: 4px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* A NAPI SOROZAT a napi ajándék ablakában (app.js `noticeStreak`): a hét
   napja egy-egy érme, az utolsó a hét ládája. Ami megvolt, aranyban; a mai
   felizzik és megugrik; a hátralévők halványak. Egy sorban fér el 320 px-en is. */
#notice-lines .napi-sorozat { margin: 12px 0 2px; }
#notice-lines .napi-cim {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--panel-muted); margin-bottom: 6px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#notice-lines .napi-sor { display: flex; justify-content: center; gap: 4px; }
#notice-lines .napi-nap {
  position: relative; flex: 0 1 34px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#notice-lines .napi-nap img { width: 100%; max-width: 30px; aspect-ratio: 1; object-fit: contain; }
#notice-lines .napi-nap.lada img { max-width: 34px; }
#notice-lines .napi-nap i {
  font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--panel-muted);
}
#notice-lines .napi-nap.hatra img { opacity: .32; filter: grayscale(.85); }
#notice-lines .napi-nap.ma img {
  filter: drop-shadow(0 0 6px #ffd76a) drop-shadow(0 0 2px #ffd76a);
  animation: napi-ma 1.1s ease-out .35s both;
}
#notice-lines .napi-nap.ma i { color: var(--panel-fg); font-weight: 700; }
@keyframes napi-ma {
  0% { transform: scale(.6); opacity: .3; }
  45% { transform: scale(1.28); opacity: 1; }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { #notice-lines .napi-nap.ma img { animation: none; transform: scale(1.08); } }
#notice-action { width: 100%; margin-top: 14px; }
#notice-action[hidden] { display: none; }
#notice-ok { width: 100%; margin-top: 14px; }
/* Ha van cselekvő gomb, a HANGSÚLY ODA kerül, a bezárás pedig másodlagos
   lesz: egy ablakon egy hangsúlyos gomb legyen, különben egyik sem az. A
   keretszínt is vissza kell venni, nem csak a hátteret — a zöld perem
   magában is elsődlegesnek látszik. */
#notice-popup.has-action #notice-action {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: inset 0 0 0 1px #5f9e3544;
}
#notice-popup.has-action .menu-card.good #notice-ok,
#notice-popup.has-action .menu-card.bad #notice-ok {
  margin-top: 8px;
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
  color: var(--panel-muted);
}

#notice-popup .menu-card.good #notice-ok {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: inset 0 0 0 1px #5f9e3544;
}

/* ---- Útmutató (src/tutorial.js) ------------------------------------------
   Három lapozható lap a kezdő lépésekről. Ugyanaz a kártya, mint az
   értesítőé (középen, aranyperem), fölötte a lap illusztrációja a játék saját
   festett képeiből; alul a lapjelző pöttyök és a két gomb. */
#tutorial-popup { z-index: 23; align-items: center; }
#tutorial-popup .tut-card {
  max-width: 340px; width: 100%;
  text-align: center;
  padding: 16px 18px 16px;
  border: 2px solid var(--card-gold, #b9a05e);
  touch-action: pan-y;                     /* a vízszintes húzás a lapozásé */
}
/* a `.tut-card > .tut-close` kell: a `.menu-card > *` (a lap gyermekei egységesen
   `position: relative`) különben felülírta, és a gomb a bal felső sarokba csúszott */
.tut-card > .tut-close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  border: none; background: none; box-shadow: none;
  font-size: 24px; line-height: 1; color: var(--panel-muted);
}
.tut-art {
  position: relative; height: 150px; margin: 4px auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.tut-art .tut-nagy { width: 104px; height: 104px; filter: drop-shadow(0 4px 6px #0006); }
.tut-art-hodit, .tut-art-napi { position: relative; display: grid; justify-items: center; gap: 6px; }
.tut-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tut-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 4px; border-radius: 999px;
  border: 1px solid var(--border); background: #0000000f;
  font-size: 12px; color: var(--panel-fg);
}
.tut-chip .tut-chip-ico { width: 20px; height: 20px; }
.tut-plusz {
  position: absolute; top: 2px; right: -14px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--flag-mine, #5f9e35); color: #fff;
  font-weight: 700; font-size: 14px; box-shadow: 0 2px 4px #0005;
}
/* KÖZEL / TÁVOL: a bal oldali hely pulzál (a térkép jelölője, `.poi-pin.near`),
   mellette a játékos markere; a jobb oldali halvány, alatta az elixír-ára */
.tut-art-kozel { display: flex; gap: 34px; align-items: flex-start; justify-content: center; }
.tut-hely { position: relative; width: 96px; height: 120px; display: flex; flex-direction: column; align-items: center; }
.tut-hely .tut-pin {
  position: relative; left: auto; top: auto; margin-top: 14px;
  --poi-size: 52px; pointer-events: none; cursor: default;
}
.tut-hely .tut-pin img { width: 100%; height: 100%; }
.tut-hely .tut-marker {
  position: absolute; left: 58px; top: 50px; width: 30px; height: 30px;
  border-radius: 50%; border: 2px solid var(--flag-mine, #5f9e35);
  box-shadow: 0 2px 4px #0006; background: #fff;
}
.tut-hely.tavol .tut-pin { opacity: .55; filter: grayscale(.4) drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.tut-felirat {
  margin-top: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--panel-muted); white-space: nowrap;
}
.tut-felirat.jo { color: var(--flag-mine, #5f9e35); font-weight: 700; }
.tut-felirat .tut-mini { width: 18px; height: 18px; }
/* AZ ARANY IRÁNYTŰ: a marker, alatta a pirula (ugyanaz, mint a térképen,
   #free-compass), a nyíl a jobb felső halvány hirdetményre mutat és finoman leng */
.tut-art-iranytu { position: relative; width: 210px; height: 136px; margin: 0 auto; }
.tut-art-iranytu .tut-cel {
  position: absolute; left: auto; right: 4px; top: 0; --poi-size: 46px;
  opacity: .8; pointer-events: none; cursor: default;
}
.tut-art-iranytu .tut-cel img { width: 100%; height: 100%; }
.tut-art-iranytu .tut-marker {
  position: absolute; left: 50px; top: 26px; width: 50px; height: 50px;
  border-radius: 50%; border: 3px solid var(--flag-mine, #5f9e35);
  background: #fff; box-shadow: 0 3px 8px #0007;
}
.tut-pirula {
  position: absolute; left: 22px; top: 92px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px 0 4px; border-radius: 999px;
  color: #f3e7cc; background: #12100ae0; border: 1px solid #c9a35fcc;
  box-shadow: 0 2px 6px #0007;
  font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.tut-pirula .fc-nyil {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #f8dc84, #c08d2c 70%, #8a5f17);
  box-shadow: inset 0 0 0 1px #5b3b0c99, 0 1px 2px #0008;
  transform: rotate(72deg);
  animation: tut-iranytu-leng 2.6s ease-in-out infinite;
}
.tut-pirula .fc-nyil img { width: 22px; height: 22px; display: block; }
@keyframes tut-iranytu-leng { 0%, 100% { transform: rotate(64deg); } 50% { transform: rotate(80deg); } }
.tut-title {
  display: block; font-size: 18px; margin-bottom: 6px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.tut-text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--panel-fg); min-height: 6.2em; }
/* a biztonsági figyelmeztetés (az utolsó lap alján): halk, de külön sor, a figyelmeztető jellel */
.tut-note {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  margin: -4px 0 12px; padding: 8px 10px; border-radius: var(--ui-radius, 8px);
  font-size: 13px; line-height: 1.4; color: var(--panel-fg);
  background: color-mix(in srgb, #e0a526 14%, transparent);
  border: 1px solid color-mix(in srgb, #e0a526 45%, transparent);
}
.tut-note[hidden] { display: none; }
.tut-note img { flex: none; width: 22px; height: 22px; object-fit: contain; margin-top: 1px; }
.tut-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.tut-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.tut-dots span.on { background: var(--flag-mine, #5f9e35); transform: scale(1.25); }
.tut-gombok { display: flex; gap: 8px; }
.tut-gombok button { flex: 1 1 0; }
.tut-gombok button[hidden] { display: none; }
#tut-next { border-color: var(--flag-mine, #5f9e35); box-shadow: inset 0 0 0 1px #5f9e3544; }
@media (prefers-reduced-motion: reduce) {
  .tut-hely .tut-pin.near::before, .tut-hely .tut-pin.near::after, .tut-hely .tut-pin.near img { animation: none; }
  .tut-pirula .fc-nyil { animation: none; }
}

/* ---- Szintek ------------------------------------------------------------ */
/* Fejléc a mostani állással, alatta a teljes létra. A jelen sora kiemelve, a
   meglévő szintek halványabbak: a lista arról szól, mi VAN MÉG hátra. */
.levels-now { text-align: center; margin-bottom: 14px; }
.levels-rank {
  font-size: 19px; letter-spacing: .05em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.levels-lv { font-size: 13px; color: var(--panel-muted); margin-bottom: 8px; }
.levels-xp { font-size: 12px; color: var(--panel-muted); margin-top: 5px; }
.levels-table { font-size: 12px; table-layout: fixed; width: 100%; }
.levels-every {
  margin: 0 0 10px; font-size: 12px; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* Rögzített elrendezésnél az oszlopszélességet az ELSŐ sor adja, vagyis a
   fejléc — a törzs-cellákra tett szélesség hatástalan. Ezért a méretek itt
   vannak, és minden cella törhet, hogy egy hosszú szó se lógjon át. */
.levels-table th:nth-child(1) { width: 38px; }
.levels-table th:nth-child(2) { width: 3.2em; }
.levels-table th:nth-child(3) { width: 6.4em; }
.levels-table th:nth-child(4) { width: 6.4em; }
.levels-table th, .levels-table td { overflow-wrap: anywhere; }
.levels-table th {
  text-align: left; padding: 0 6px 6px 0;
  /* Törhessen: rögzített oszlopszélességnél a hosszú felirat különben
     átlóg a szomszédjára. */
  white-space: normal; line-height: 1.2;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--panel-muted); font-weight: 600;
}
.levels-table td { padding: 5px 6px 5px 0; vertical-align: top; white-space: normal; }
/* A jelvény kerek ÉRME, ugyanaz a formanyelv, mint az avatar-választóé:
   sötét korong, arany gyűrű, benne a vonalas rajz. Egy 18 pixeles, kontúr
   nélküli ikon a pergamenen elveszett — így viszont súlya van a sornak. */
.levels-table .lv-ico { width: 38px; padding-right: 6px; }
.levels-table .lv-ico span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #3a2f1e, #1d160d);
  border: 1.5px solid var(--card-gold, #b9a05e);
  box-shadow: 0 1px 3px #0004;
  overflow: hidden;
}
/* a rang feje kitölti az érmét (a kép négyzetes, az érme vágja körre) */
.levels-table .lv-ico img,
.levels-table tr.rank-sep span.sep-coin img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* a mostani szint érméje kiemelve, a jövőbeliek halványabbak — a lista így
   magától mutatja, hol tartunk */
.levels-table tr.now .lv-ico span {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: 0 0 0 2px #5f9e3540, 0 1px 4px #0005;
}
.levels-table tr.todo .lv-ico span { opacity: .6; }
.levels-table .lv-n { width: 2em; font-variant-numeric: tabular-nums; color: var(--panel-fg); }
/* Rang-elválasztó: a lista fejezetcíme. */
.levels-table tr.rank-sep td {
  padding: 12px 0 5px;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
}
.levels-table tr.rank-sep span.sep-coin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 8px; vertical-align: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #4a3a1c, #241a0d);
  border: 1.5px solid var(--card-gold, #b9a05e);
  overflow: hidden;
}
.levels-table tr.rank-sep span {
  font-size: 13px; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-gold, #b9a05e);
}
.levels-table tr.rank-sep i {
  font-style: normal; font-size: 11px; color: var(--panel-muted); margin-left: 8px;
}
/* A feltétel darabokból áll: a tapasztalat mindig semleges, a birtok és a
   tartalék viszont vörös, ha épp nem teljesül — ez a lista lényege. */
.levels-table .lv-need .ok { color: var(--panel-muted); }
.levels-table .lv-need .miss { color: #a8402c; }
.levels-table .lv-perk { color: var(--panel-muted); }
.levels-blocked {
  margin: 0 0 12px; padding: 8px 10px;
  border-radius: var(--ui-radius, 8px);
  background: #a8402c1a; border: 1px solid #a8402c55;
  font-size: 12px; line-height: 1.45; color: var(--panel-fg);
}
.levels-table tr.done { opacity: .45; }
.levels-table tr.now td {
  background: #5f9e351f;
  border-top: 1px solid var(--flag-mine, #5f9e35);
  border-bottom: 1px solid var(--flag-mine, #5f9e35);
  color: var(--panel-fg);
}
.levels-table tr.now .lv-n { font-weight: 700; }

/* ---- Név- és fiókszerkesztő --------------------------------------------- */
/* Mindkettő a PROFIL FÖLÖTT nyílik, ezért egy réteggel feljebb ül: azonos
   z-indexnél a DOM-sorrend döntene, és a profil takarná el. (A fiókszerkesztőn
   ez pontosan így is történt: az ablak kinyílt, a gombjai mégsem voltak
   elérhetők, mert a profil lapja ült rajtuk.) */
#name-popup, #account-popup { z-index: 21; }
#name-popup .menu-card, #account-popup .menu-card,
#forgot-popup .menu-card, #reset-popup .menu-card { max-width: 380px; }
#geo-popup .menu-card { max-width: 420px; }
#login-email, #login-pass,
#name-input {
  width: 100%; box-sizing: border-box;
  margin: 6px 0 4px; padding: 10px 12px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid var(--border);
  background: var(--field-bg, #fff8e6);
  color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 17px;
}
#login-email:focus, #login-pass:focus,
#name-input:focus { outline: 2px solid var(--card-gold, #b9a05e); outline-offset: 1px; }
.name-count {
  margin: 0 0 10px; text-align: right;
  font-size: 11px; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
}
.name-error { margin: 0 0 10px; font-size: 12px; color: #a8402c; }
.name-error[hidden] { display: none; }
.name-actions { display: flex; gap: 8px; }
.name-actions button { flex: 1 1 auto; }
.name-actions .primary {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: inset 0 0 0 1px #5f9e3544;
}
/* ---- Avatar-választó ---------------------------------------------------- */
/* Öt oszlop, kerek képek. Öt azért, mert telefonon ennyi fér el úgy, hogy a
   motívum még felismerhető maradjon — hatnál már csak színes pöttyök vannak. */
/* A rács befogadója: ezen ül a töltés-jelző, ezért kell a relatív helyzet.
   A minimális magasság azért van, hogy a jelző ne egy nulla magas dobozban
   próbáljon középre állni, mielőtt a képek megjönnek. */
.avatar-wrap { position: relative; min-height: 220px; }
/* Töltés közben a rács ott van, csak nem látszik: így a helye már ki van
   mérve, és a megjelenéskor semmi nem ugrik. */
.avatar-wrap.is-busy .avatar-grid { visibility: hidden; }
/* Itt nem kell a sötét takarólap: a rács amúgy is rejtve van, és egy fekete
   téglalap a pergamenlapon idegen test lenne. Marad a zöld gyűrű a papíron. */
.avatar-wrap .loading-layer {
  background: none;
  border-radius: var(--ui-radius, 8px);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}
.avatar-cell {
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-cell img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* alap állapotban is van kerete, különben a kiválasztás „megnövelné" a képet */
  border: 3px solid #00000022;
  transition: transform .12s ease;
}
.avatar-cell:active img { transform: scale(.94); }
/* a kiválasztott: zöld keret és halvány ragyogás — ugyanaz a zöld, mint a
   saját területek zászlaján, tehát „ez a tiéd" jelentéssel */
.avatar-cell.sel img {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: 0 0 0 2px #5f9e3555, 0 2px 8px #0005;
}
.avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-actions button { flex: 1 1 auto; }
.avatar-actions .primary {
  border-color: var(--flag-mine, #5f9e35);
  box-shadow: inset 0 0 0 1px #5f9e3544;
}

/* A törlés a profil alján: apró és semleges, amíg rá nem kérdezünk. Nem
   rejtjük el, de nem is kínálja magát — visszafordíthatatlan művelet. */
.profile-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid #00000018; }
#profile-wipe {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 11px;
  color: var(--panel-muted); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
#profile-wipe:active { opacity: .6; }
#profile-wipe-ask[hidden] { display: none; }
#profile-wipe-ask .menu-question { margin-bottom: 4px; }
#profile-wipe-ask .menu-hint { margin: 0 0 10px; }
.wipe-buttons { display: flex; gap: 8px; }
.wipe-buttons button { flex: 1 1 auto; }

/* profilkép-gombok: a kép alatt, apró szöveges hivatkozásként */
.profile-pic { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.profile-pic button {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 11px;
  color: #7a5a1e; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.profile-pic button:active { opacity: .6; }

#profile-body .menu-hint { margin-top: 14px; }
#menu-confirm[hidden] { display: none; }
.menu-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- A RENDSZERSÁV csíkja (telepített alkalmazás) ----------------------
   iOS-en a `apple-mobile-web-app-status-bar-style: black-translucent` miatt a
   lap a rendszersáv ALÁ fut — vagyis az óra és a térerő mögött a mi
   hátterünk látszik, és a `theme-color`-t az iOS itt nem veszi figyelembe.
   Ezért a sávot magunk festjük ki: egy csík, pontosan a biztonságos zóna
   magasságában.

   Böngészőben ez a magasság 0 (a lap nem fut a sáv alá), tehát a csík ott
   nincs is — egyetlen szabály mindkét esetre. Minden fölött áll, mert a
   rendszersáv a betöltő és a beállító képernyő fölött is ugyanaz. */
#statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2200;
  height: env(safe-area-inset-top, 0px);
  background: var(--chrome-bg, #33251a);
  pointer-events: none;                 /* nem fog el koppintást a lap elől */
}

/* ---- Zoom gombok (mobilhoz) -------------------------------------------- */
#hud-zoom-buttons {
  position: absolute; right: 12px; z-index: 6;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px;
}
#hud-zoom-buttons[hidden] { display: none; }

#hud-zoom-buttons button {
  width: 46px; height: 46px; padding: 0;
  font-size: 22px; line-height: 1; font-weight: 600;
  border-radius: 12px; background: var(--hud-bg); border: 1px solid var(--border);
  color: var(--panel-fg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px #0004;
  -webkit-tap-highlight-color: transparent;
}
#hud-zoom-buttons button svg { display: block; }
#hud-zoom-buttons button:active { background: var(--btn-bg); border-color: var(--accent); }

/* ---- Településnév (a helyzet alapján, dinamikusan) ---------------------- */
/* A doboz tartja a helyet: a név és alatta a „nagyíts rá" sor. Ha a név
   hiányzik (vagy még nem tudjuk, hol járunk), a sor magától felcsúszik. */
#place-box {
  position: absolute; z-index: 5;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
}
#place-name {
  max-width: 60vw; text-align: center;
  background: var(--hud-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; font-size: 14px; font-weight: 600; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#place-name[hidden] { display: none; }

/* KAPCSOLAT NÉLKÜL — apró, halk sor a település neve alatt: nem riasztás,
   csak magyarázat, miért látszik kevesebb helyszín (csak a gyűjtőpontok). */
#net-note {
  display: flex; align-items: center; gap: 6px;
  max-width: 60vw; padding: 2px 9px;
  background: var(--hud-bg); border: 1px solid var(--border); border-radius: 999px;
  font-size: 11px; line-height: 1.35; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: hint-in .25s ease both;
}
#net-note::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--err-color, #c9573f);
}
#net-note[hidden] { display: none; }

/* A TÉRKÉPADATOK HIVATKOZÁSA — a település neve alatt, a doboz sorában
   (a „nagyíts rá" fölött). Az OpenStreetMap irányelve: látszódjon
   interakció nélkül; összecsukódhat (nálunk 5 mp után), ha a licenc utána
   egy menüpontból érhető el (Források). Halványulás után az app.js ki is
   veszi a sorból (`hidden`), hogy a „nagyíts rá" visszacsússzon.
   A doboz nem fog el koppintást — a felirat igen: rákoppintva a Források
   nyílik. */
#map-credit {
  pointer-events: auto;
  width: auto; min-height: 0; margin: 0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px; line-height: 1.3; font-weight: 600; white-space: nowrap;
  color: var(--panel-fg);
  background: var(--hud-bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px #0003;
  opacity: .92;
  transition: opacity .6s ease;
  cursor: pointer;
}
#map-credit[hidden] { display: none; }
#map-credit.faded { opacity: 0; pointer-events: none; }

/* „Nagyíts rá" — halkabb a névnél: kérés, nem hír. Csak akkor van kint,
   amikor a nagyítás tényleg elrejt helyszíneket (lásd app.js
   `paintZoomHint`), különben a szem pár perc alatt megtanulná nem látni. */
#place-hint {
  max-width: 70vw; text-align: center;
  background: var(--hud-bg); border: 1px dashed var(--border); border-radius: 8px;
  padding: 3px 9px; font-size: 12px; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: hint-in .25s ease both;
}
#place-hint[hidden] { display: none; }
@keyframes hint-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #place-hint { animation: none; } }

/* ---- Elem-infó (kattintás) --------------------------------------------- */
#feature-info {
  position: absolute; z-index: 6; max-width: 240px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 26px 7px 10px; font-size: 12px;
  box-shadow: 0 8px 24px #0008;
}
#feature-info[hidden] { display: none; }
#info-body { font-weight: 600; color: var(--panel-fg); }
#info-close {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  padding: 0; line-height: 1; background: none; border: none; color: var(--panel-muted);
}

/* ---- Küldetés-képernyők a POI-kártyán ---------------------------------- */
#poi-back {
  width: 28px; height: 30px; padding: 0; margin-right: -4px;
  font-size: 22px; line-height: 1;
  background: none; border: none;
  color: var(--card-head-fg, #f3e4c1);
}
#poi-back[hidden] { display: none; }

#poi-screen {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}
#poi-screen[hidden] { display: none; }

/* Próbatétel-választó: egy gomb = egy próbatétel, fölötte a fajtája.
   A kártyán ez a két gomb a lényeg, ezért középre igazítva és nagy betűvel:
   a felirat maga a döntés, nem melléktájékoztatás. */
.quest-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; margin-bottom: 12px; padding: 15px 13px; text-align: center;
}
.quest-item-kind {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700;
  color: var(--card-gold, #b9a05e);
}
.quest-item-name {
  font-size: 20px; line-height: 1.2;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0004;
}

/* quiz */
.quiz-progress {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .1em;
  color: var(--panel-muted);
}
.quiz-question {
  margin: 0 0 14px; font-size: 15px; line-height: 1.45;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.quiz-answers { display: flex; flex-direction: column; gap: 8px; }
.quiz-answer { width: 100%; padding: 10px 12px; text-align: left; font-size: 13px; }
.quiz-answer:disabled { opacity: .75; }
/* a helyes/rossz válasz a közelség-zöldet és a vörös keresztek vörösét viszi */
.quiz-answer.good {
  border-color: var(--poi-near, #6d9410);
  background: color-mix(in srgb, var(--poi-near, #6d9410) 26%, transparent);
  opacity: 1;
}
.quiz-answer.bad {
  border-color: #a33a2e;
  background: #a33a2e40;
  opacity: 1;
}
.quiz-result {
  margin: 0 0 14px; font-size: 15px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.quest-next { width: 100%; margin-top: 14px; padding: 10px; }

/* harc: a majdani GLB-jelenet helye */
.battle-stage {
  display: flex; align-items: center; justify-content: center;
  /* a visszaszámláló a színpadra ül (.battle-count), ezért pozicionált ős */
  position: relative;
  /* széles, alacsony színpad: a modell így is elfér, viszont marad hely a
     csíkoknak és a gomboknak egy 640 px magas telefonon is */
  aspect-ratio: 16 / 9; max-height: 30vh; margin-bottom: 10px;
  border: 1px dashed var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  background: #0000001f;
}
/* Ha animált modell ül a színpadon, a dobozt a WebGL-renderelő tölti ki
   (scissor-téglalap), ezért itt átlátszóvá tesszük — különben a saját
   hátterünk takarná el a modellt. */
/* Modell esetén a színpad saját vásznat kap: sötét háttér, tömör keret. */
.battle-stage.has-model { background: #14100a; border-style: solid; border-color: #0000004d; padding: 0; }
.battle-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; transition: filter 1.4s ease; }
/* AZ EMLÉKKÉP (battle3d.js `emlek`): a győzelem eredménye fölött a legyőzött
   ellenfél barnítva, mint egy régi festmény, a szélein sötétedő kerettel */
.battle-stage.emlek .battle-canvas { filter: sepia(.88) saturate(.75) contrast(1.08) brightness(1); }
.battle-stage.emlek::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 52%, #0000 52%, #24150aa6 100%);
  animation: emlek-be 1.4s ease both;
}
@keyframes emlek-be { from { opacity: 0; } to { opacity: 1; } }

.battle-placeholder {
  font-size: 12px; letter-spacing: .06em; color: var(--panel-muted);
}

/* ---- Töltés-jelző (borító, később GLB-modell) --------------------------- */
/* A lap a befogadó közepén ül és eltakarja a tartalmat, ezért nem villan be
   a betöltés alatt az előző helyszín képe. A befogadó position: relative. */
.loading-layer {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #0b0906ee;
}
.loading-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid #ffffff1f;
  border-top-color: var(--poi-near, #6d9410);
  border-right-color: color-mix(in srgb, var(--poi-near, #6d9410) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--poi-near, #6d9410) 45%, transparent);
  animation: loading-spin 900ms linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* mozgásérzékenyeknek: forgás helyett lüktetés */
@media (prefers-reduced-motion: reduce) {
  .loading-ring {
    animation: loading-pulse 1.4s ease-in-out infinite;
    border-color: var(--poi-near, #6d9410);
  }
  @keyframes loading-pulse { 50% { opacity: .35; } }
}

/* töltés alatt a kép ne látszódjon ki a lap mögül */
#poi-cover.is-busy img { visibility: hidden; }

/* ---- Gördítősáv --------------------------------------------------------- */
/* Barna, hogy a pergamen-világba illjen: az alapértelmezett kék-szürke sáv
   minden ablakon elárulja, hogy „ez egy weboldal". Két szabvány kell hozzá:
   a Firefox a scrollbar-color-t érti, a Chrome/Safari a ::-webkit- elemeket. */
* {
  scrollbar-width: thin;
  scrollbar-color: #8a6a36 #2a1f1233;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: #2a1f1233;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9a763c, #5c4321);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #a9853f; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* csak képernyőolvasónak */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Harc -------------------------------------------------------------- */
.battle-desc {
  margin: 0 0 8px; font-size: 12px; line-height: 1.45;
  color: var(--panel-muted);
}

/* életerő */
.hp { margin-bottom: 8px; }
.hp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
.hp-name {
  font-size: 13px; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.hp-num { font-size: 11px; color: var(--panel-muted); font-variant-numeric: tabular-nums; }
.hp-track {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: #0000003d;
  border: 1px solid var(--card-gold, #b9a05e);
}
.hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, var(--poi-near, #6d9410), #4a6a0b);
  transition: width .25s ease;
}
.hp-fill.low { background: linear-gradient(180deg, #b8452f, #7d2a1c); }
/* Az ellenfél csíkja MINDIG vörös — így egy pillantásból látszik, melyik kié.
   A .low itt nem jelent semmit, ezért felül is írjuk. */
.hp.foe .hp-fill, .hp.foe .hp-fill.low {
  background: linear-gradient(180deg, #d1503a, #7d1f14);
}
.hp.foe .hp-name { color: #d1503a; }
.hp.foe { margin-bottom: 6px; }

/* A két csík EGY SORBAN: te balra, az ellenfél jobbra, mindkettő a saját
   neve alatt — mint egy párbaj pontjelzője. Egymás alatt két sort vittek el a
   kártya tetejéből; a megspórolt hely a SZÍNPADÉ, mert harc közben úgyis a
   modellt nézi az ember. */
.hp-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.hp-row .hp { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* A név egy sorban marad: a hosszabbak (》Nekromanta《) inkább levágódnak,
   mint hogy elcsúsztassák a csíkot. */
.hp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Az ellenfél oldala tükrözve: a neve jobbra igazodik, és a csíkja is
   jobbról fogy — a két életerő a képernyő két széléről közelít egymáshoz. */
.hp-row .hp.foe .hp-head { justify-content: flex-end; }
.hp-row .hp.foe .hp-track { display: flex; justify-content: flex-end; }
.hp-row .hp.foe .hp-fill { flex: 0 0 auto; }

/* ---- Harc: a sebzés látványa ------------------------------------------- */
/* A SEB: a fogyó csík mögött az elvesztett rész egy pillanatig világosan
   látszik, és csak késve húzódik utána — a sebzés nagysága így olvasható. */
.hp-track { position: relative; }
.hp-fill { position: relative; z-index: 1; }
.hp-lag {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: #ffe2c2;
  transition: width .5s ease-in .28s;
}
.hp-row .hp.foe .hp-lag { left: auto; right: 0; background: #fff0b0; }
/* a csík felvillan és megremeg */
.hp.hit .hp-track { animation: hp-hit .45s ease-out; }
.hp.foe.hit .hp-track { animation-name: hp-hit-foe; }
@keyframes hp-hit {
  0%   { box-shadow: 0 0 0 0 #ff3c2800; transform: none; }
  18%  { box-shadow: 0 0 0 2px #ff3c28d9, 0 0 14px #ff2a1ecc; transform: translateX(-3px); }
  36%  { transform: translateX(3px); }
  54%  { transform: translateX(-2px); }
  100% { box-shadow: 0 0 0 0 #ff3c2800; transform: none; }
}
@keyframes hp-hit-foe {
  0%   { box-shadow: 0 0 0 0 #ffd76a00; }
  20%  { box-shadow: 0 0 0 2px #ffd76acc, 0 0 12px #ffc23fb3; }
  100% { box-shadow: 0 0 0 0 #ffd76a00; }
}

/* VÖRÖS VIGNETTA a színpad szélein (a mi sebződésünk) — és egy pillanatra az
   egész színpad vöröses. A réteg a vászon fölött ül, de nem fogja el a koppintást. */
.battle-hurt {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(ellipse at center, #a0000000 38%, #b40a0a8c 76%, #780000e0 100%);
}
.battle-hurt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #ff281e; opacity: 0;
}
.battle-hurt.on { animation: battle-hurt .5s ease-out; }
.battle-hurt.on::after { animation: battle-hurt-tint .22s ease-out; }
@keyframes battle-hurt { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes battle-hurt-tint { 0% { opacity: 0; } 25% { opacity: .32; } 100% { opacity: 0; } }

/* a színpad megrázkódik */
.battle-stage.shake { animation: battle-shake .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes battle-shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(3px, -1px); }
  30%, 50%, 70% { transform: translate(-5px, 1px); }
  40%, 60% { transform: translate(5px, -1px); }
}

/* FELÚSZÓ SEBZÉSSZÁM: kiugrik, megnő, majd felúszva elhalványul */
.battle-dmg {
  position: absolute; z-index: 4; top: 58%; pointer-events: none;
  transform: translate(-50%, 0);
  font-size: 30px; font-weight: 700; line-height: 1;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #ff5040;
  text-shadow: 0 2px 0 #3a0000, 0 0 14px #ff3c28b3;
  animation: battle-dmg 1s ease-out forwards;
}
.battle-dmg.foe {
  top: 30%; font-size: 26px; color: #ffe08a;
  text-shadow: 0 2px 0 #3a2400, 0 0 12px #ffd76ab3;
}
@keyframes battle-dmg {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(.5); }
  14%  { opacity: 1; transform: translate(-50%, 0) scale(1.3); }
  28%  { transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(.95); }
}

/* KRITIKUS TALÁLAT (quests.js `sebeztunk`, OTLETEK.md 11.): a szám nagyobb és
   fehéren izzó arany, fölötte a „Kritikus!" felirat kiugrik és elhalványul */
.battle-dmg.foe.crit {
  font-size: 40px; color: #fff3c4;
  text-shadow: 0 2px 0 #4a2a00, 0 0 18px #ffd76a, 0 0 34px #ffb84acc;
}
.battle-crit {
  position: absolute; z-index: 5; left: 50%; top: 16%; pointer-events: none;
  transform: translate(-50%, 0);
  font-size: 24px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #ffe08a;
  text-shadow: 0 2px 0 #3a2400, 0 0 16px #ffb84a;
  animation: battle-crit .9s ease-out forwards;
}
@keyframes battle-crit {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.4) rotate(-6deg); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.25) rotate(-3deg); }
  32%  { transform: translate(-50%, 0) scale(1) rotate(-3deg); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1) rotate(-3deg); }
}

/* „kevesebb mozgás": nincs rázás, a villanás és a szám marad (rövidebben) */
@media (prefers-reduced-motion: reduce) {
  .battle-stage.shake, .hp.hit .hp-track { animation: none; }
  .battle-dmg { animation-duration: .6s; }
  .battle-crit { animation: battle-crit-csendes .9s linear forwards; }
}
@keyframes battle-crit-csendes { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* A gomb-magyarázat a színpad alatt — CSAK a küzdelem előtt.
   A zöld és vörös találat-feliratok („Találat: kígyó −2") kikerültek: a
   küzdelem kezdetén a sor eltűnik, és a helye a színpadé lesz. Amit mondott,
   azt a szikra-villanás és a két életerő-csík a találat pillanatában mondja
   el — harc közben oda úgysem néz senki. */
.battle-log { min-height: 30px; margin: 2px 0 8px; font-size: 12px; line-height: 1.4; }
.battle-log[hidden] { display: none; }

/* --- Reakció-harc: négy mozdulat-gomb --------------------------------------
   A négy gomb EGY SORBAN áll, és szándékosan alacsony: kis telefonon a teljes
   harc — két életerő-csík, a színpad, a napló és a gombok — elférjen görgetés
   nélkül. Mindig egy világít; a többi tompán ül a helyén. */
.rc-keys {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-top: 2px;
}
.rc-key {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border-radius: 10px;
  border: 2px solid #00000033;
  background: var(--rc-color, #8a5c2e); color: #fff9ef;
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  opacity: .48; filter: saturate(.6);
  transition: opacity .1s ease, transform .1s ease, box-shadow .1s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none;
}
.rc-key svg { width: 22px; height: 22px; fill: currentColor; }
.rc-key:hover { border-color: #00000033; }
/* ez a felvillanás: erre kell ütni */
.rc-key.hot {
  opacity: 1; filter: none; transform: scale(1.06);
  box-shadow: 0 0 0 3px #ffffffcc, 0 0 18px 5px var(--rc-color, #8a5c2e);
}
.rc-key.good { box-shadow: 0 0 0 3px #cdf5a8, 0 0 16px 4px #7fbf3fcc; }
.rc-key.crit { box-shadow: 0 0 0 3px #fff3c4, 0 0 22px 7px #ffd76ae6; }
.rc-key.bad  { box-shadow: 0 0 0 3px #ffc4bb, 0 0 16px 4px #d0503bcc; }
.rc-key:disabled { opacity: .25; }
@media (prefers-reduced-motion: reduce) { .rc-key { transition: none; } }

/* --- HAJSZA (quests.js `renderChase`, chase3d.js) ---------------------------
   A harc kerete, egyetlen gombbal: az óra a menekülő életereje mellett, a
   színpadon a körbejáró célkereszt, alul a lövés. */
.chase-row { align-items: center; }
.chase-timer {
  flex: 0 0 auto; min-width: 66px; padding: 4px 10px; text-align: center;
  border-radius: 999px; border: 1px solid #00000059; background: #2a1e12;
  box-shadow: inset 0 1px 0 #ffffff14;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 20px; font-weight: 700; letter-spacing: .04em; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: #ffe3a0;
}
/* az utolsó negyedperc: vörösen lüktet */
.chase-timer.vesz { color: #ff6a50; border-color: #ff5a4066; animation: chase-vesz 1s ease-in-out infinite; }
@keyframes chase-vesz { 50% { transform: scale(1.08); box-shadow: 0 0 14px #ff4a3299; } }

/* a célkereszt: a menekülő körül kering (a helyét a JS adja, `transform`) */
.chase-cross {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  color: #f4ead2; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 0 2px #000c) drop-shadow(0 0 6px #0008);
}
.chase-cross[hidden] { display: none; }
.chase-cross svg { display: block; width: 100%; height: 100%; }
/* a testen áll: halványan aranyba fordul (a döntés a játékos szemén múlik) */
.chase-cross.on { color: #ffe3a0; }

/* a lövés gombja: egyetlen, nagyobb gomb; a töltés sötét fátyla alulról fogy el */
.chase-keys { grid-template-columns: 1fr; justify-items: center; }
.chase-keys[hidden] { display: none; }
.chase-fire {
  position: relative; overflow: hidden;
  width: min(100%, 240px); flex-direction: row; justify-content: center; gap: 10px;
  padding: 12px 18px; font-size: 13px;
  opacity: 1; filter: none;
  box-shadow: 0 0 0 2px #ffffff40, 0 6px 16px #0007;
}
.chase-fire svg { width: 28px; height: 28px; }
.chase-fire::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #000000a6; transform-origin: top; transform: scaleY(0);
}
.chase-fire.tolt::after { animation: chase-tolt var(--tolt, .8s) linear forwards; }
@keyframes chase-tolt { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.chase-fire:active { transform: scale(.97); }
.chase-fire:disabled { opacity: .35; }

/* a nyílvessző útja a képernyő aljáról a célkeresztig */
.chase-arrow {
  position: absolute; z-index: 3; height: 3px; margin-top: -1.5px;
  transform-origin: 0 50%; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, #fff0 0%, #ffe9b066 55%, #fff6d8 100%);
  animation: chase-arrow .3s ease-out forwards;
}
@keyframes chase-arrow {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  30%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 70%); }
}
/* a sebzés a célkereszt fölött, a „Mellé!" a helyén */
.battle-dmg.chase-dmg { margin-top: -40px; }
.chase-miss {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -50%);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 18px; font-weight: 700; color: #ddd5c5;
  text-shadow: 0 2px 0 #000, 0 0 10px #0009;
  animation: chase-miss .9s ease-out forwards;
}
@keyframes chase-miss {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
/* az elszökés eredménye: vörös keret, ✕ jel */
.quiz-perfect.chase-lost { border-color: #b8402f; background: color-mix(in srgb, #b8402f 16%, transparent); }
.quiz-perfect.chase-lost .quiz-perfect-mark { color: #d1503a; }
@media (prefers-reduced-motion: reduce) {
  .chase-timer.vesz { animation: none; }
  .chase-arrow { animation-duration: .2s; }
}

/* --- CÉLBALÖVÉS (quests.js `renderTarget`, target3d.js) ----------------------
   A hajsza kerete: az óra mellett az életerő helyén a PONTSZÁMLÁLÓ (a csík a
   célig telik, aranyban), a gombon a tegez (hány vessző maradt), a találat
   pontja a célkereszt fölött úszik fel. */
.target-score .hp-head { gap: 8px; }
.target-score .hp-name { color: #e8c46a; }
.target-num {
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 15px; font-weight: 700; color: #ffe3a0; font-variant-numeric: tabular-nums;
}
.target-score .target-fill {
  width: 0; background: linear-gradient(180deg, #f2cc6a, #a8781e);
  transition: width .35s ease;
}
.target-score.kesz .hp-track { box-shadow: 0 0 0 1px #ffd76a, 0 0 14px #ffc94a99; }
.target-score.hit .hp-track { animation: target-pont .5s ease-out; }
@keyframes target-pont {
  0%   { box-shadow: 0 0 0 0 #ffd76a00; }
  25%  { box-shadow: 0 0 0 2px #ffd76ad9, 0 0 16px #ffc94acc; }
  100% { box-shadow: 0 0 0 0 #ffd76a00; }
}
.target-quiver {
  padding: 2px 9px; border-radius: 999px; background: #00000059;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe9b8;
}
/* a pont a becsapódás fölött; a kiemelt (tripla, dupla, közép) nagyobb */
.battle-dmg.target-pont { margin-top: -38px; font-size: 24px; }
.battle-dmg.target-pont.crit { font-size: 34px; }
.battle-crit.target-nev { top: 9%; font-size: 22px; }
/* a TARTALÉK (WebGL nélkül): maga a festett tábla, síkban, a színpad közepén */
.target-fallback {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 86%; max-width: 86%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 6px 14px #000a);
}
/* --- KOCKAPÁRBAJ (quests.js `renderDice`, kocka3d.js) ------------------------
   Fölül az állás (a két fél nyert fordulói pöttyökkel), a színpadon az
   asztal, alatta a kocka-kártyák: az ellenfélé rejtve, amíg a pohár alatt
   van, a tiéd koppintásra jelölhető újradobásra. */
.dice-score { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dice-score-side { display: flex; align-items: center; gap: 8px; }
.dice-score-side.ellen { flex-direction: row-reverse; }
.dice-score-nev {
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.dice-score-side.en .dice-score-nev { color: var(--poi-near, #8fb22a); }
.dice-score-side.ellen .dice-score-nev { color: #d1503a; }
.dice-pips { display: flex; gap: 5px; }
.dice-pip {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--card-gold, #b9a05e); background: #0000004d;
}
.dice-score-side.en .dice-pip.on { background: var(--poi-near, #8fb22a); border-color: #cfe58a; box-shadow: 0 0 8px #a8d04a99; }
.dice-score-side.ellen .dice-pip.on { background: #c9503a; border-color: #ffb09a; box-shadow: 0 0 8px #ff6a4a99; }
.dice-round {
  font-size: 15px; font-weight: 700; color: #ffe3a0; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.dice-board { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.dice-side { display: flex; align-items: center; gap: 8px; }
.dice-side-nev { min-width: 74px; font-size: 13px; color: var(--panel-muted); }
.dice-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 9px;
  border: 1px solid var(--card-gold, #b9a05e); background: #00000040;
}
button.dice-chip { cursor: pointer; }
.dice-chip img { width: 40px; height: 40px; border-radius: 7px; box-shadow: 0 2px 4px #0008; }
.dice-chip-q { font-size: 22px; font-weight: 700; color: var(--panel-muted); font-family: var(--ui-font-display, var(--ui-font, system-ui)); }
/* újradobásra jelölve: arany keret és egy környíl a sarkában */
.dice-chip.ujra { border-color: #e8b64a; box-shadow: 0 0 0 2px #e8b64a, 0 0 12px #e8b64a88; }
.dice-chip.ujra::after {
  content: '\21bb'; position: absolute; right: -7px; top: -9px;
  width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center;
  font-size: 13px; font-weight: 700; color: #2c1e11; background: #e8b64a;
}
.dice-sum {
  margin-left: 4px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe3a0;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.dice-keys { display: flex; gap: 10px; justify-content: center; }
.dice-keys[hidden] { display: none; }
.dice-key { flex: 1 1 0; max-width: 220px; padding: 12px 10px; font-size: 15px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); }
.dice-key[hidden] { display: none; }
.dice-key:disabled { opacity: .4; }
.dice-log { min-height: 2.6em; }
#poi-popup.fighting .dice-score,
#poi-popup.fighting .dice-board,
#poi-popup.fighting .dice-keys { flex: 0 0 auto; }
/* a forduló eredménye a kép TETEJÉN (a kocsmafal előtt), kisebben: a kockák látsszanak alatta */
.dice-stage .battle-count {
  align-items: flex-start; padding: 7% 12px 0; text-align: center;
  font-size: clamp(30px, 9vmin, 58px); line-height: 1.05;
}
/* WebGL nélkül a kártyák a kockák: a színpad helye kicsi marad */
.dice-stage.dice-nostage { min-height: 60px; }

/* --- A LABIRINTUS (quests.js `renderMaze`, labirintus3d.js) ---------------------
   Fölül a fáklya sávja (és a hátralévő idő), mellette a kulcs jele; a színpad
   sarkában a térkép (koppintásra nagyobb); alul a négy gomb keresztben. */
.maze-hud { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.maze-ico { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.maze-kulcs { opacity: .3; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.maze-kulcs.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 200, 80, .85)); }
.maze-faklya {
  flex: 1 1 auto; height: 12px; overflow: hidden;
  border-radius: 999px; border: 1px solid #c9a35f99; background: #00000066;
}
.maze-faklya > i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #ffb347, #ffd98a);
  transition: width .2s linear;
}
.maze-faklya.fogy > i { background: linear-gradient(90deg, #d8701c, #f0b04a); }
.maze-faklya.vege > i { background: linear-gradient(90deg, #b8321c, #e0602a); animation: maze-pislog .5s infinite alternate; }
@keyframes maze-pislog { from { opacity: 1; } to { opacity: .5; } }
.maze-ido {
  min-width: 3.2em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--panel-fg); font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* a színpadon a húzás lépés, nem görgetés */
.maze-stage { touch-action: none; }
.maze-stage .maze-map {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  width: 112px; height: 112px;
  border: 1px solid #c9a35f80; border-radius: 8px;
  cursor: pointer;
}
.maze-stage.maze-map-nagy .maze-map,
.maze-stage.maze-nostage .maze-map {
  right: 50%; transform: translateX(50%);
  width: min(80%, 300px); height: auto; aspect-ratio: 1;
}
/* a kis színpadon (a felvezetés és az eredmény alatt) a térkép is kisebb */
#poi-popup:not(.fighting) .maze-stage:not(.maze-nostage):not(.maze-map-nagy) .maze-map { width: 78px; height: 78px; }
/* WebGL nélkül a térkép a fő nézet (felülről): végigjátszható */
.maze-stage.maze-nostage { min-height: 280px; }
.maze-keys {
  display: grid; gap: 8px; justify-content: center;
  grid-template-columns: repeat(3, minmax(0, 92px));
  grid-template-areas: "bal elore jobb" ". hatra .";
}
.maze-keys[hidden] { display: none; }
.maze-key { padding: 10px 0; font-size: 22px; line-height: 1; font-weight: 700; }
.maze-bal { grid-area: bal; }
.maze-elore { grid-area: elore; }
.maze-jobb { grid-area: jobb; }
.maze-hatra { grid-area: hatra; }
#poi-popup.fighting .maze-hud,
#poi-popup.fighting .maze-keys { flex: 0 0 auto; }
/* a lejárat kérdése (messziről): a szöveg fölül, a két gomb alatta — a sáv teljes szélességében */
.labirintus-kerdes { flex: 1 1 auto; }
.labirintus-kerdes .menu-question { margin: 0 0 10px; }
/* a lejárat gombja: csak a felirat, középen */
.poi-reward-btn.labirintus-gomb { justify-content: center; text-align: center; }
/* a lejárat gombja messziről: kék, mint a távoli próbatételé (elixírbe kerül) */
.poi-reward-btn.remote { color: #eaf4ff; border-color: #3d7fb5; background: linear-gradient(180deg, #3d7fb5, #204c73); }

/* --- A HORGÁSZAT és A FAVÁGÁS (quests.js `renderFishing`, `renderWoodcut`; horgaszat2d.js,
   favagas2d.js) — HORGASZAT.md. A színpad egy 2D-s vászon a festett háttérrel; fölötte a
   felső sor (hány hal még / a fa élete és a csapások), alatta a csíkok és a nagy gomb. */
.szinpad2d-host { touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.horg-hud, .fav-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; font-weight: 700; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.horg-hud[hidden] { display: none; }
.horg-szerencse {
  font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  color: #eaf4ff; background: #2d5f8acc; border: 1px solid #6fa6d6aa;
}
/* a feszültség csíkja: a zöld sáv vándorol (az erős hal elhúzza), a tű a húzással jár */
.horg-csiksor { margin: 0 0 8px; }
.horg-csiksor[hidden] { display: none; }
.horg-csik {
  position: relative; height: 22px; border-radius: 999px; overflow: hidden;
  border: 1px solid #c9a35f99;
  background: linear-gradient(90deg, #5a3a1caa 0%, #00000066 18%, #00000066 82%, #8a1f14cc 100%);
}
.horg-zold {
  position: absolute; top: 0; bottom: 0; left: 40%; width: 20%;
  background: linear-gradient(180deg, #5fbf5acc, #2f8a34cc);
  box-shadow: inset 0 0 0 1px #b8f0a880;
}
.horg-csik.jo .horg-zold { background: linear-gradient(180deg, #7ad874, #3aa040); }
.horg-tu {
  position: absolute; top: -2px; bottom: -2px; left: 50%; width: 4px; margin-left: -2px;
  border-radius: 2px; background: #fff4d6; box-shadow: 0 0 6px #000c;
}
.horg-csik.veszely .horg-tu { background: #ff8a6a; }
.horg-halad {
  height: 6px; margin-top: 5px; border-radius: 999px; overflow: hidden;
  background: #00000066; border: 1px solid #c9a35f66;
}
.horg-halad > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd98a, #ffb347); }
/* a nagy gomb: dob, bevág, húz (nyomva tartva) */
.horg-gomb, .fav-gomb {
  width: 100%; padding: 14px; font-size: 18px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.horg-gomb.horg-huz { background: linear-gradient(180deg, #3d7fb5, #204c73); color: #eaf4ff; border-color: #3d7fb5; }
.horg-gomb[hidden], .horg-vege[hidden], .fav-gomb[hidden] { display: none; }
.horg-vege { width: 100%; margin-top: 8px; padding: 9px; }
/* a fa élete: a rovások (a fél vágás fél rovás) */
.fav-elet { display: inline-flex; gap: 4px; }
.fav-elet > i {
  width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg);
  border: 1px solid #c9a35f; background: #00000055;
}
.fav-elet > i.fel { background: linear-gradient(135deg, #e2bf86 50%, #00000055 50%); }
.fav-elet > i.tele { background: #e2bf86; box-shadow: 0 0 5px #ffd98a99; }
.fav-csapas { font-variant-numeric: tabular-nums; }
/* a vágócsík: a gyenge sáv, közepén az arany, rajta a lengő jelző */
.fav-csik {
  position: relative; height: 24px; margin: 0 0 8px; border-radius: 999px; overflow: hidden;
  border: 1px solid #c9a35f99; background: #00000077;
}
.fav-csik[hidden] { display: none; }
.fav-gyenge { position: absolute; top: 0; bottom: 0; background: #c9a35f55; }
.fav-arany {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, #ffe08a, #d9a030); box-shadow: 0 0 8px #ffd98aaa;
}
.fav-jelzo {
  position: absolute; top: -2px; bottom: -2px; left: 0; width: 5px; margin-left: -2.5px;
  border-radius: 2px; background: #fff; box-shadow: 0 0 6px #000;
}
/* a kifogott hal neve és súlya a színpad tetején (a hal alatta lebeg) */
.battle-count.horg-nev {
  align-items: flex-start; padding: 7% 12px 0; text-align: center;
  font-size: clamp(28px, 8vmin, 48px); line-height: 1.1;
}
/* az ARATÁS (quests.js `renderHarvest`): a favágás csíkja és gombja; fölül a rendek, az idő, a lendület */
.arat-ido { font-variant-numeric: tabular-nums; }
.arat-ido.fogy { color: #e0602a; }
.arat-lendulet { min-width: 6em; text-align: right; color: var(--card-gold, #b9a05e); opacity: 0; transition: opacity .2s ease; }
.arat-lendulet.on { opacity: 1; }
.arat-stage { touch-action: none; }
/* a HAJTÁNY (quests.js `renderHandcar`, hajtany2d.js): fölül a csille távolsága, az idő, a lendület;
   alul a két nagy gomb a két hüvelykujjnak (Le, Fel), köztük a váltó. Amelyiket most kell
   megnyomni, aranyban izzik — az arany sávban erősebben (a fogantyú a színpadon ugyanígy). */
.hajt-tav { font-variant-numeric: tabular-nums; }
.hajt-tav.kozel { color: #ffd76a; }
.hajt-stage { touch-action: none; }
.hajt-stage .battle-count {
  align-items: flex-start; padding: 6% 12px 0; text-align: center;
  font-size: clamp(24px, 7vmin, 44px); line-height: 1.1;
}
.hajt-keys { display: flex; gap: 8px; margin: 0 0 8px; }
.hajt-keys[hidden] { display: none; }
.hajt-key {
  flex: 1 1 0; padding: 16px 6px; font-size: 18px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: box-shadow .08s ease, background .08s ease;
}
.hajt-key.hajt-valto { flex: 0.8 1 0; font-size: 15px; }
.hajt-key.hajt-valto:disabled { opacity: .35; }
.hajt-key.hajt-valto.kell { color: #2c1e11; background: linear-gradient(180deg, #ffd27a, #d99a2b); border-color: #ffe3a0; }
.hajt-key.kell { box-shadow: 0 0 0 2px #c9a35f, 0 0 10px #ffd98a66; }
.hajt-key.arany { color: #2c1e11; background: linear-gradient(180deg, #ffe08a, #d9a030); box-shadow: 0 0 0 2px #ffe3a0, 0 0 16px #ffd98acc; }
#poi-popup.fighting .horg-hud,
#poi-popup.fighting .horg-csiksor,
#poi-popup.fighting .horg-gomb,
#poi-popup.fighting .horg-vege,
#poi-popup.fighting .fav-hud,
#poi-popup.fighting .fav-csik,
#poi-popup.fighting .fav-gomb,
#poi-popup.fighting .hajt-keys { flex: 0 0 auto; }

/* --- MAKAÓ (quests.js `renderMakao`, kartya3d.js, makao.js) ----------------------
   Fölül a két fél lapjainak száma, középen a kért szín vagy a kettes-büntetés;
   a gombok és a napló a kockapárbajé (`dice-*`). A színpad alján a KEZED:
   legyezőben, nagyban — a letehető lapok kiemelve (fölemelve, arany fénnyel),
   a többi halványan; koppintásra a lap a dobópaklira repül. */
.mk-db {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffe3a0;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.mk-kozep { font-size: 16px; }
.mk-kozep.piros { color: #ff8a78; }
/* a kezed: a színpad alsó harmadában, a lap szélessége a magasságból és a
   szélességből (a legyező a kép 84%-án belül — a dőlés és a fölemelés is beférjen —, a lapok 58%-a fedi egymást) */
.mk-kez {
  --n: 5; position: absolute; left: 0; right: 0; bottom: 3%; height: 36%; z-index: 3;
  display: flex; justify-content: center; align-items: flex-end; container-type: size;
  --kw: min(calc(88cqh * 300 / 420), calc(84cqw / (1 + 0.42 * (var(--n) - 1))));
}
.mk-lap {
  --i: 0; width: var(--kw, 18%); height: auto; aspect-ratio: 300 / 420; border-radius: 3.5% / 2.5%;
  margin: 0 calc(var(--kw, 18%) * -0.29);
  transform: rotate(calc(var(--i) * 4deg)) translateY(calc(var(--i) * var(--i) * 1.4%));
  transform-origin: 50% 130%;
  box-shadow: 0 8px 18px #000b, 0 0 0 1px #00000040;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* letehető: fölemelve, arany szegéllyel */
.mk-lap.jo {
  transform: rotate(calc(var(--i) * 4deg)) translateY(calc(var(--i) * var(--i) * 1.4% - 9%));
  box-shadow: 0 10px 22px #000c, 0 0 0 2px #e8b64a, 0 0 14px #e8b64a99;
}
.mk-lap.nem { filter: brightness(.62) saturate(.7); cursor: default; }
/* a most érkezett lap beúszik alulról, közben felfordul */
.mk-lap.uj { animation: mk-be .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mk-be {
  from { opacity: 0; transform: translateY(55%) rotate(calc(var(--i) * 4deg)) rotateY(80deg); }
  to { opacity: 1; transform: rotate(calc(var(--i) * 4deg)) translateY(calc(var(--i) * var(--i) * 1.4%)); }
}
/* nem tehető le: egy rövid rázás */
.mk-lap.rossz { animation: mk-razas .32s ease both; }
@keyframes mk-razas {
  0%, 100% { translate: 0 0; }
  25% { translate: -6% 0; }
  75% { translate: 6% 0; }
}
/* a színválasztó (a bubinál): négy nagy gomb a szín jelével */
.mk-szinek { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.mk-szinek[hidden] { display: none; }
.mk-szin {
  flex: 1 1 0; max-width: 84px; padding: 6px 0; font-size: 34px; line-height: 1.1;
  color: #1d1a16; background: #f3ead3; border: 2px solid var(--card-gold, #b9a05e);
}
.mk-szin-H, .mk-szin-D { color: #b3261e; }
#poi-popup.fighting .mk-szinek { flex: 0 0 auto; }
/* WebGL nélkül: a dobópakli felső lapja a színpad tetején */
.mk-tartalek { display: none; }
.mk-stage.dice-nostage { min-height: 320px; }
.mk-stage.dice-nostage .mk-tartalek {
  display: flex; justify-content: center; position: absolute; top: 6%; left: 0; right: 0; height: 40%;
}
.mk-tartalek-lap { height: 100%; aspect-ratio: 300 / 420; border-radius: 5px; box-shadow: 0 4px 10px #000b; }
@media (prefers-reduced-motion: reduce) {
  .mk-lap { transition: none; }
  .mk-lap.uj, .mk-lap.rossz { animation: none; }
}

/* elbukva a tábla elszürkül, mint egy elmúlt pillanat */
.target-stage.target-lost .battle-canvas,
.target-stage.target-lost .target-fallback { filter: grayscale(.55) brightness(.72); }

/* Az indítógomb hangsúlyosabb, mint a próbatétel-gombok: vörös, világos
   felirattal — ez az egyetlen dolog, amit a harc előtt meg kell nyomni. */
.rc-start {
  width: 100%; margin-top: 10px; padding: 13px;
  font-size: 16px; letter-spacing: .12em; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #fff4ea;
  border: 2px solid #7d2a1c;
  background: linear-gradient(180deg, #c1503a, #8a2f1f);
  box-shadow: 0 3px 10px #0004, inset 0 1px 0 #ffffff2e;
  text-shadow: 0 1px 2px #0006;
}
.rc-start:hover { border-color: #7d2a1c; filter: brightness(1.06); }
.rc-start:active { transform: scale(.985); }
.rc-start:disabled { opacity: .55; }
/* ---- 3-2-1: a SZÍNPAD KÖZEPÉN ------------------------------------------
   Korábban a színpad ALATT, a napló sorában állt: ott egy külön sort vett el
   a kártya amúgy is szűk magasságából, és a szem a modellről oda-vissza járt.
   Ide téve nem foglal helyet (a színpad fölött lebeg), és ugyanott van, ahol
   az ellenfél — egyetlen pillantás elég.

   A méret `vmin`-ben: a szám a kijelzőhöz nő, nem a kártyához, tehát
   teljes képernyős harcban is akkora marad, amekkorának szánjuk. */
.battle-count {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  /* a több sorba törő felirat is KÖZÉPEN („Mély vágás!", „Megvan a láda!"), kiegyensúlyozott
     sorokkal, és nem ér a színpad széléig (2026-10-19: eddig balra igazodott) */
  text-align: center; text-wrap: balance; padding: 0 5%;
  font-size: clamp(44px, 17vmin, 128px);
  line-height: 1.05; font-weight: 700; letter-spacing: .02em;
  color: var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  /* a szám a MODELL előtt áll: sötét udvar nélkül a világos díszleten
     olvashatatlan lenne */
  text-shadow: 0 2px 10px #000000cc, 0 0 26px #00000099;
  pointer-events: none;                 /* a színpad alatta végig fogható */
}
.battle-count[hidden] { display: none; }
/* minden váltásnál egy lüktetés: a szám nem „kicserélődik", hanem üt egyet */
.battle-count.beat { animation: battle-beat .5s ease-out; }
@keyframes battle-beat {
  0%   { transform: scale(1.45); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-count.beat { animation: none; }
}

/* ---- Teljes képernyős SZÍNPAD (harc és felfedezés) ----------------------
   A küzdelem — a visszaszámlálás után — és a felfedezés egyaránt elfoglalja
   az egész kijelzőt: a kártya kerete, fejléce, borítója és a birtoklás-sáv
   eltűnik, és a helyükre a SZÍNPAD nő be. Ilyenkor úgysem néz a játékos
   semmi másra, a színpad viszont telefonon csak így lesz akkora, hogy
   lásson rajta valamit.

   KÉT osztály, egy közös rész. A keret eltüntetése mindkettőnél ugyanaz,
   ami MELLETTE marad, az nem: a harcban a két életerő-csík és a négy gomb,
   a felfedezésnél a leletek sora és a megszakító gomb. Csak osztály, semmi
   JS-ből számolt méret — az app.js teszi a felugró ablakra a
   `wandalor:battle`, illetve a `wandalor:explore` eseményre. */
#poi-popup.fighting,
#poi-popup.exploring {
  padding: 0;
  background: #0b0906;                  /* a térkép ne látsszon át mögötte */
}
#poi-popup.fighting .menu-card,
#poi-popup.exploring .menu-card {
  width: 100%; max-width: none; height: 100%; max-height: none;
  border: none; border-radius: 0; box-shadow: none;
}
/* fejléc, birtoklás-sáv: színpad közben nem kell */
#poi-popup.fighting .menu-head,
#poi-popup.fighting #poi-claim,
#poi-popup.exploring .menu-head,
#poi-popup.exploring #poi-claim { display: none; }

#poi-popup.fighting #poi-screen,
#poi-popup.exploring #poi-screen {
  display: flex; flex-direction: column;
  overflow: hidden;                     /* a színpad nem görget: minden elfér */
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px
           calc(12px + env(safe-area-inset-bottom, 0px));
}
/* a színpad kapja a maradék helyet — se rögzített képarány, se magasságkorlát */
#poi-popup.fighting .battle-stage {
  flex: 1 1 auto; min-height: 0;
  aspect-ratio: auto; max-height: none; margin-bottom: 8px;
}
#poi-popup.fighting .hp-row,
#poi-popup.fighting .battle-log,
#poi-popup.fighting .rc-keys,
#poi-popup.fighting .quest-next { flex: 0 0 auto; }
#poi-popup.fighting .battle-log { margin: 0 0 8px; text-align: center; }
#poi-popup.fighting .quest-next { margin-top: 10px; }

/* A FELFEDEZÉS színpada ugyanígy kapja meg a maradék helyet: se rögzített
   képarány, se magasságkorlát. Ami mellette marad, az a leletek sora és egy
   gomb — mindkettő a saját magasságát kéri, semmi többet. */
#poi-popup.exploring .forage-stage {
  flex: 1 1 auto; min-height: 0;
  aspect-ratio: auto; max-height: none; margin: 0 0 10px;
}
#poi-popup.exploring .forage-bag,
#poi-popup.exploring .forage-stop,
#poi-popup.exploring .forage-done { flex: 0 0 auto; }
/* Nagy kijelzőn a radar ne nyúljon el: a kör úgyis négyzetes, a színpad
   maradék szélessége meg csak üres hely volna. */
#poi-popup.exploring .forage-stage { max-width: 720px; align-self: center; width: 100%; }

/* a kártya alja: a helyszín leírása */
/* A kártya leírása: nagyobb és erősebb, mint a segédszövegek — ezt tényleg
   el kell olvasni, a magyarázó ablakok szövegével egy méretben. */
.poi-desc { margin: 0; font-size: 19px; line-height: 1.5; color: var(--panel-fg); }

/* ---- Életerő-csík a marker fölött -------------------------------------- */
/* A marker fix méretű doboz; a csík e fölé ül, kicsit szélesebben, hogy
   messziről is látszódjon. A színt az állapot adja (config: marker.health). */
.marker-hp {
  position: absolute; left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%);
  width: calc(var(--marker-size, 46px) * 1.15);
  height: 6px; padding: 1px;
  border-radius: 999px;
  background: #12100acc;
  border: 1px solid #ffffff5c;
  box-shadow: 0 2px 5px #0006;
  overflow: hidden;
  pointer-events: none;
}
.marker-hp[hidden] { display: none; }
.marker-hp > i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #8fd11a, #5e8f0c);
  transition: width .25s ease, background .25s ease;
}
.marker-hp[data-state="warn"] > i { background: linear-gradient(180deg, #f0c53a, #b8890f); }
.marker-hp[data-state="low"]  > i { background: linear-gradient(180deg, #e2593c, #a32d19); }

/* a játékos neve a marker fölött, az életerő-csík fölé */
.marker-name {
  position: absolute; left: 50%; bottom: calc(100% + 15px);
  transform: translateX(-50%);
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; letter-spacing: .05em; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  /* a táblácska mindig sötét, ezért a felirat fix világos — a --panel-fg
     világos témán sötét lenne, és beleolvadna */
  color: #f3e7cc; background: #12100ad9;
  border: 1px solid #ffffff47;
  text-shadow: 0 1px 2px #000a;
  pointer-events: none;
}
.marker-name[hidden] { display: none; }

/* profil-fejléc: a kép mellett fent a csík, alatta a név */
.profile-ident { flex: 1; min-width: 0; }
.profile-hp {
  height: 10px; padding: 1px; margin-bottom: 8px;
  border-radius: 999px; overflow: hidden;
  background: #00000038;
  border: 1px solid var(--card-gold, #b9a05e);
}
.profile-hp > i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #8fd11a, #5e8f0c);
  transition: width .25s ease, background .25s ease;
}
.profile-hp[data-state="warn"] > i { background: linear-gradient(180deg, #f0c53a, #b8890f); }
.profile-hp[data-state="low"]  > i { background: linear-gradient(180deg, #e2593c, #a32d19); }

/* ---- Elixír: a távolság ára ------------------------------------------- */
/* Bal alul, a képernyő szélén, egy sorban: lombik + (felirat, csík).
   Szándékosan alacsony — a térképből ne vegyen el többet a kelleténél. */
#elixir {
  position: absolute; z-index: 6;
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px 6px 8px;
  border-radius: 999px;
  background: var(--hud-bg); border: 1px solid var(--border);
  box-shadow: 0 3px 10px #0005, inset 0 1px 0 #ffffff21;
  /* koppintható: magyarázó ablakot nyit */
  cursor: pointer; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
#elixir[hidden] { display: none; }
#elixir:active { transform: scale(.97); }

#elixir-flask {
  width: 30px; height: 30px; flex: none;
  /* a lombik vet árnyékot a sávra — ettől ül ki a felületből */
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .45));
}

.elixir-text { display: flex; flex-direction: column; gap: 3px; min-width: 92px; }
.elixir-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--panel-fg);
  /* vésett hatás: sötét árnyék alul, halvány fény fölül */
  text-shadow: 0 1px 0 #0006, 0 -1px 0 #ffffff2e;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.elixir-bar {
  height: 7px; padding: 1px;
  border-radius: 999px; overflow: hidden;
  background: #00000047;
  border: 1px solid var(--border);
  /* a sáv besüllyed: belső árnyék felül */
  box-shadow: inset 0 1px 2px #0007;
}
.elixir-bar > i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  /* a kitöltés viszont kidomborodik: felül fény, alul sötét él */
  background: linear-gradient(180deg, #7fd2ff 0%, #3a97dd 45%, #14538c 100%);
  box-shadow: inset 0 1px 0 #ffffff6b, 0 0 5px #2f8fd680;
  transition: width .3s ease, background .3s ease;
}
#elixir[data-state="warn"] .elixir-bar > i { background: linear-gradient(180deg, #4f93c8, #2a5f8c); }
#elixir[data-state="low"]  .elixir-bar > i { background: linear-gradient(180deg, #8a6fc0, #513a86); }

/* ---- Távoli küldetés: kékes gomb + megerősítés ------------------------- */
#poi-quests.remote {
  color: #eaf4ff;
  border-color: #3d7fb5;
  background: linear-gradient(180deg, #3d7fb5, #204c73);
}
#poi-confirm[hidden] { display: none; }
#poi-confirm .menu-question { margin-bottom: 10px; }
.poi-confirm-buttons { display: flex; gap: 9px; }
.poi-confirm-buttons button { flex: 1 1 0; padding: 10px; }
.poi-confirm-buttons .remote {
  color: #eaf4ff; border-color: #3d7fb5;
  background: linear-gradient(180deg, #3d7fb5, #204c73);
}

/* kimerült küldetés a listában (óránkénti korlát) */
.quest-item.spent { opacity: .55; cursor: default; }
.quest-item-note { font-size: 12px; color: var(--panel-muted); line-height: 1.4; text-align: center; }

/* hibátlan quiz: kiemelt gratuláció */
.quiz-perfect {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 6px; padding: 14px 16px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid var(--poi-near, #6d9410);
  background: color-mix(in srgb, var(--poi-near, #6d9410) 18%, transparent);
}
.quiz-perfect-mark {
  font-size: 30px; line-height: 1; color: var(--card-gold, #b9a05e);
  text-shadow: 0 2px 4px #0006;
}
.quiz-perfect-text {
  margin: 0; font-size: 15px; line-height: 1.45;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

/* ---- Elixír-magyarázó ablak -------------------------------------------- */
#elixir-popup {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px
           calc(16px + env(safe-area-inset-bottom, 0px));
  background: #0006;
}
#elixir-popup[hidden] { display: none; }
#elixir-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px;
}
/* nagy lombik-grafika a szöveg fölött */
.elixir-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.elixir-hero .art-ico {
  width: 86px; height: 86px; flex: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}

.elixir-have {
  font-size: 26px; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0004;
}
/* A magyarázó ablakok szövege: nagyobb (≈1,5×) és erősebb kontraszt, mert
   ezeket tényleg el kell olvasni, nem csak megpillantani. */
.elixir-note,
.popup-note {
  margin: 0 0 12px;
  font-size: 19px; line-height: 1.5;
  color: var(--panel-fg);
}
#elixir-ok { width: 100%; margin-top: 8px; padding: 11px; font-size: 16px; }

/* ---- Quiz: körkörös visszaszámláló ------------------------------------- */
/* A kör egészére szól, ezért a kérdések fölött végig ott marad. A gyűrű a
   kártya arany szegélyének tónusából indul, és fogyó időnél vörösbe vált. */
.quiz-timer {
  position: relative;
  width: 62px; height: 62px;
  margin: 0 auto 16px;
}
.quiz-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-timer .track {
  fill: #00000026;
  stroke: var(--border); stroke-width: 3;
}
.quiz-timer .arc {
  fill: none;
  stroke: var(--card-gold, #b9a05e); stroke-width: 3.5; stroke-linecap: round;
  transition: stroke-dashoffset .12s linear, stroke .3s ease;
  filter: drop-shadow(0 0 3px #0006);
}
.quiz-timer[data-state="warn"] .arc { stroke: #d9994f; }
.quiz-timer[data-state="low"]  .arc { stroke: #b8452f; }
.quiz-timer-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0006;
}
.quiz-timer[data-state="low"] .quiz-timer-num { color: #e0765c; }
/* perc:másodperc (a rejtvénynél): öt jel fér a gyűrűbe, kisebb betűvel */
.quiz-timer.mmss .quiz-timer-num { font-size: 15px; letter-spacing: 0; }

/* lejárt idő */
.quiz-timeout {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 6px; padding: 14px 16px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid #8a3a2a;
  background: #b8452f26;
}
.quiz-timeout-mark { font-size: 28px; line-height: 1; }
.quiz-timeout-text {
  margin: 0 0 4px; font-size: 15px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.quiz-timeout .menu-hint { margin: 0; }

/* ---- Az ész próbája: szimbólum-rejtvény --------------------------------- */
/* A TÁBLA PERGAMEN. A jelek sötét tinta-kontúrral készültek (mint a tárgyak),
   és a kártya sötét hátterén a kontúr beleveszne — világos alapon viszont a
   kard és a balta kicsiben is két külön alak. A számok is tintával íródnak. */
.riddle-intro {
  margin: 0 0 8px; font-size: 14px; line-height: 1.4;
  color: var(--panel-fg);
}
.riddle-board {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 6px;
  border: 2px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  background: linear-gradient(180deg, #f7ecd3, #e5d1a4);
  box-shadow: inset 0 0 0 1px #fff7, inset 0 2px 12px #7a5a2a30, 0 2px 8px #0006;
  color: #2c1e11;
}
.riddle-eq {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px;
}
.riddle-left { display: flex; align-items: center; }
/* Négy jel egy sorban egy 360 px-es telefonon is elfér: a méret a szélességgel
   együtt nő, de 50 px fölé nem — a tábla nem a jelek kiállítása. */
.riddle-sym {
  width: clamp(32px, 9.4vw, 50px); height: auto; aspect-ratio: 1 / 1; flex: none;
  filter: drop-shadow(0 1px 1px #0003);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.riddle-op {
  min-width: 16px; text-align: center;
  font-size: 22px; font-weight: 700; line-height: 1;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.riddle-op.eq { margin: 0 3px 0 4px; }
/* a KITÖLTÖTT szám (a könnyebb fokon a jel helyén): tintával írt szám egy
   halvány pergamen-mezőben, a jelekkel egy magasságban */
.riddle-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: clamp(28px, 8vw, 42px); height: clamp(32px, 9.4vw, 50px); padding: 0 4px;
  font-size: 23px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #2c1e11;
}
/* A NEHÉZSÉG választója: három gomb egymás alatt — a minta-sor (jelek és
   számok), a név, a rejtett jelek száma és a jutalom */
.riddle-levels { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.riddle-level {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; text-align: left;
}
.riddle-level-minta {
  display: flex; align-items: center; justify-content: center; flex: none;
  min-width: 132px; padding: 4px 6px;
  border: 1px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  background: linear-gradient(180deg, #f7ecd3, #e5d1a4);
}
.riddle-level-minta .riddle-sym { width: 34px; }
.riddle-level-minta .riddle-num { min-width: 28px; height: 34px; font-size: 20px; }
.riddle-level-szoveg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.riddle-level-nev {
  font-size: 17px; font-weight: 700; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.riddle-level-leiras { font-size: 13px; color: var(--panel-muted); }
.riddle-level-jutalom { font-size: 13px; color: var(--card-gold, #b9a05e); }
.riddle-level-cimke {
  display: inline-block; margin: 0 6px 0 0; padding: 1px 9px; vertical-align: 1px;
  border-radius: 999px; border: 1px solid currentColor;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.riddle-level-cimke.riddle-level-easy { color: var(--poi-near, #6d9410); }
.riddle-level-cimke.riddle-level-medium { color: #c9862f; }
.riddle-level-cimke.riddle-level-hard { color: #c9503a; }
.riddle-level-sor { margin: 2px 0 0; font-size: 13px; color: var(--panel-muted); }
.riddle-res {
  min-width: 44px;
  font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* a kérdés-sor: szaggatott vonallal elválasztva, a kérdőjel vörös tintával */
.riddle-eq.question {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px dashed #8a6a3a99;
}
.riddle-eq.question .riddle-res { color: #9a2a1c; font-weight: 700; }
.riddle-eq.question.solved .riddle-res { color: #3f6a0a; }
/* a műveleti sorrend figyelmeztetése: a téma szövegszínével, keretben — a
   sötét és a világos (pergamen) témán is olvasható legyen */
.riddle-order {
  margin: 8px 0 0; padding: 4px 10px;
  font-size: 13px; line-height: 1.4; text-align: center;
  color: var(--panel-fg);
  border: 1px dashed #c9862f;
  border-radius: var(--ui-radius, 8px);
  background: #d9994f22;
}

/* a válasz: kijelző és SAJÁT számbillentyűzet (a telefoné eltakarná a táblát) */
/* TÖMÖREN: a tábla, a kijelző és a billentyűzet egy 390×860-as telefonon
   görgetés nélkül is elférjen — a számolás közben ne kelljen fel-le húzni. */
.riddle-answer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 10px;
}
.riddle-display {
  min-width: 150px; padding: 2px 18px; text-align: center;
  font-size: 28px; line-height: 1.2; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  border: 1px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  background: #0000002e;
}
.riddle-display.empty { color: var(--panel-muted); }
.riddle-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  width: 100%; max-width: 300px;
}
.riddle-key {
  padding: 7px 0; font-size: 22px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  touch-action: manipulation;
}
.riddle-key.del { color: var(--panel-muted); }
/* a „Kész" a próbatétel-gomb zöldjét viszi: ez a döntés gombja */
.riddle-key.ok {
  color: #f2f8e2; border-color: var(--poi-near, #6d9410);
  background: linear-gradient(180deg, var(--poi-near, #6d9410), #4a6a0b);
}
.riddle-key.ok:disabled { opacity: .4; }

/* a végén: a jelek értéke, kis pergamen-címkéken */
.riddle-solved { margin-top: 14px; }
.riddle-body > .quiz-timeout { margin-top: 14px; }
.riddle-legend { margin: 12px 0 0; }
.riddle-legend-title {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--card-gold, #b9a05e);
}
.riddle-legend-row { display: flex; flex-wrap: wrap; gap: 6px; }
.riddle-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 10px 2px 3px;
  border-radius: 999px;
  border: 1px solid var(--card-gold, #b9a05e);
  background: linear-gradient(180deg, #f7ecd3, #e5d1a4);
  color: #2c1e11;
}
.riddle-chip .riddle-sym { width: 30px; }
.riddle-chip-val {
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

/* ---- Aranytallér: a pontrendszer -------------------------------------- */
/* Az elixír fölött, ugyanabban a bal alsó oszlopban. Nincs csík: a tallér
   nem fogy magától, nincs mihez viszonyítani — csak az egyenleg számít. */
#coins {
  position: absolute; z-index: 6;
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 8px;
  border-radius: 999px;
  background: var(--hud-bg); border: 1px solid var(--border);
  box-shadow: 0 3px 10px #0005, inset 0 1px 0 #ffffff21;
  /* koppintható: magyarázó ablakot nyit */
  cursor: pointer; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
#coins[hidden] { display: none; }
#coins:active { transform: scale(.97); }
#coins svg {
  width: 24px; height: 24px; flex: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
/* A térhatás három rétegből áll: a lap alatt kilátszó perem (vastagság), a
   lapon fentről lefelé sötétedő arany átmenet, és egy fényfolt bal fölül. */
#coins .art-ico { width: 26px; height: 26px; }
.coins-num {
  font-size: 15px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
  text-shadow: 0 1px 0 #0006, 0 -1px 0 #ffffff2e;
}

/* gyarapodás: rövid felvillanás */
#coins.gain { animation: coins-gain .7s ease-out; }
@keyframes coins-gain {
  0%   { box-shadow: 0 3px 10px #0005, inset 0 1px 0 #ffffff21, 0 0 0 0 #f4d98acc; }
  40%  { box-shadow: 0 3px 10px #0005, inset 0 1px 0 #ffffff21, 0 0 14px 3px #f4d98acc; }
  100% { box-shadow: 0 3px 10px #0005, inset 0 1px 0 #ffffff21, 0 0 0 0 #f4d98a00; }
}
@media (prefers-reduced-motion: reduce) { #coins.gain { animation: none; } }

/* ---- Jutalom-effektek (src/jutalomfx.js; OTLETEK.md 9. és 10.) -----------
   Egy saját, a képernyőt lefedő réteg: nem fogja a koppintást, és minden
   ablak fölött van — a jutalom a győzelmi ablakból is a kijelzőig száll. */
#fx-reteg { position: fixed; inset: 0; z-index: 3000; pointer-events: none; overflow: hidden; }
.fx-erme {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  filter: drop-shadow(0 2px 3px #0008);
  will-change: transform, opacity;
}
.fx-xp {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffd76a 42%, #e0a52c00 72%);
  box-shadow: 0 0 10px 3px #ffd76a99;
  will-change: transform, opacity;
}
.fx-felirat {
  position: absolute; white-space: nowrap;
  font-weight: 700; font-size: 20px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 2px 4px #000c, 0 0 10px #000a;
}
.fx-felirat.erme { color: #ffd76a; }
.fx-felirat.xp { color: #eaf4c4; font-size: 16px; }
/* a foglalás hulláma (a saját szín) és a parázs */
.fx-gyuru {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--flag-mine, #5f9e35);
  box-shadow: 0 0 14px #5f9e35aa, inset 0 0 10px #5f9e3566;
}
.fx-parazs {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4, #ffb84a 55%, #ff7a1a00 75%);
  box-shadow: 0 0 8px 2px #ffb84acc;
}
/* a cél: repülés közben az ablakok fölé emelkedik, érkezéskor megugrik */
#coins.fx-cel, #menu-button.fx-cel { z-index: 40; }
#coins .art-ico.fx-erkez, #menu-button.fx-erkez { animation: fx-ugras .45s ease-out; }
@keyframes fx-ugras {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); filter: drop-shadow(0 0 8px #ffd76acc); }
  100% { transform: scale(1); }
}
/* A FOGLALÁS ÜNNEPLÉSE a jelölőn: megugrik, a zászló nagyban felhúzódik és
   lobog, aztán visszaáll a szokásos méretére */
.poi-pin.unnep { z-index: 5; }
.poi-pin.unnep img { animation: fx-pin-ugras 1.1s ease-out; }
.poi-pin.unnep .poi-flag { display: block; transform-origin: 7px 100%; animation: fx-zaszlo 1.7s ease-out; }
.poi-pin.unnep .poi-flag::after { transform-origin: left center; animation: fx-lobog .42s ease-in-out 4 alternate; }
@keyframes fx-pin-ugras {
  0% { transform: scale(1); }
  30% { transform: scale(1.26); }
  55% { transform: scale(.94); }
  100% { transform: scale(1); }
}
@keyframes fx-zaszlo {
  0% { transform: translateX(-7px) scale(2, 0); }
  32% { transform: translateX(-7px) scale(2, 2.1); }
  48% { transform: translateX(-7px) scale(2); }
  80% { transform: translateX(-7px) scale(2); }
  100% { transform: translateX(-7px) scale(1); }
}
@keyframes fx-lobog {
  from { transform: skewY(0deg) scaleX(1); }
  to { transform: skewY(-9deg) scaleX(.84); }
}
@media (prefers-reduced-motion: reduce) {
  #coins .art-ico.fx-erkez, #menu-button.fx-erkez, .poi-pin.unnep img,
  .poi-pin.unnep .poi-flag, .poi-pin.unnep .poi-flag::after { animation: none; }
}

/* ---- AZ ÚJ RANG CEREMÓNIÁJA (app.js `rangCeremonia`, OTLETEK.md 13.) -------
   Teljes képernyő, minden fölött. Az idővonal (CSS-késleltetésekkel):
     0,0 mp  a háttér elsötétül, a fénysugarak lassan forogni kezdenek
     0,2 mp  „Új rang"
     0,5 mp  a címer lecsap (hullám, szikrák; a fanfár és a rezgés a JS-ből)
     0,8 mp  a jelvény kirajzolódik a címeren
     1,0 mp  a szalag kibomlik a rang nevével
     1,3 mp  a szint és a rang ajándéka, 1,6 mp a „Tovább" */
#rang-popup {
  position: fixed; inset: 0; z-index: 2600;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #2a1608ee 0%, #0d0704f5 62%, #050302fa 100%);
  animation: rang-be .35s ease-out both;
}
#rang-popup.zar { animation: rang-ki .3s ease-in forwards; }
@keyframes rang-be { from { opacity: 0; } to { opacity: 1; } }
@keyframes rang-ki { to { opacity: 0; } }
.rang-sugarak {
  position: absolute; left: 50%; top: 42%;
  width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  background: repeating-conic-gradient(from 0deg, #ffd76a1c 0deg 7deg, #ffd76a00 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, #0008 22%, #0000 46%);
          mask: radial-gradient(circle, #000 0%, #0008 22%, #0000 46%);
  animation: rang-sugar-be 1s ease-out .3s both, rang-forog 40s linear infinite;
  pointer-events: none;
}
@keyframes rang-sugar-be { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes rang-forog { to { rotate: 360deg; } }
.rang-tartalom {
  position: relative; width: min(340px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rang-felirat {
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 15px; letter-spacing: .32em; text-transform: uppercase;
  color: #f2dfa8; text-shadow: 0 0 12px #ffb84a99;
  animation: rang-fel .5s ease-out .2s both;
}
@keyframes rang-fel { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.rang-cimer { position: relative; width: 168px; height: 196px; margin: 14px 0 4px; }
.rang-cimer svg {
  position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 10px 18px #000c) drop-shadow(0 0 22px #ffb84a55);
  animation: rang-csapas .55s cubic-bezier(.3,1.5,.5,1) .15s both;
}
@keyframes rang-csapas {
  0% { opacity: 0; transform: scale(2.6) translateY(-30px); }
  55% { opacity: 1; transform: scale(.92); }
  75% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
/* a pajzs festett kép (icons/ui/rang-pajzs.webp), az érme a rang fejével rajta */
/* a rang feje egy érmében: a gyűrű kirajzolódik, aztán a fej előtűnik */
.rang-jel .rang-erme-alap { fill: #1d160c; }
.rang-jel .rang-erme-perem {
  fill: none; stroke: url(#rang-arany); stroke-width: 4;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rang-rajz .9s ease-out .8s forwards;
}
@keyframes rang-rajz { to { stroke-dashoffset: 0; } }
.rang-jel .rang-fej {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: rang-fej-be .6s ease-out 1.15s forwards;
}
@keyframes rang-fej-be { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
/* a lecsapás hulláma és a szikrák */
.rang-hullam {
  position: absolute; left: 50%; top: 48%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; border: 3px solid #ffd76a; box-shadow: 0 0 24px #ffb84a, inset 0 0 18px #ffb84a88;
  opacity: 0; animation: rang-hullam 1s ease-out .55s;
}
@keyframes rang-hullam {
  0% { opacity: .95; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.3); }
}
.rang-szikra {
  position: absolute; left: 50%; top: 48%; z-index: 2; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4, #ffb84a 55%, #ff7a1a00 75%);
  box-shadow: 0 0 8px 2px #ffb84acc;
  opacity: 0; animation-name: rang-szikra; animation-timing-function: ease-out; animation-fill-mode: both;
}
@keyframes rang-szikra {
  0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(.4); }
}
/* a szalag a rang nevével: kibomlik a közepéről */
.rang-szalag {
  position: relative; z-index: 2; margin-top: -26px; padding: 8px 34px 9px;
  background: linear-gradient(#c8902f, #8c5a1c);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  box-shadow: 0 6px 14px #0009;
  animation: rang-szalag .5s cubic-bezier(.2,1.3,.5,1) 1s both;
}
@keyframes rang-szalag { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#rang-nev {
  display: block; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 24px; font-weight: 700; letter-spacing: .04em;
  color: #fff6d8; text-shadow: 0 2px 0 #4a2a00, 0 0 10px #00000066;
  animation: rang-fel .4s ease-out 1.15s both;
}
.rang-szint {
  margin-top: 14px; font-size: 15px; color: #f2dfa8;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  animation: rang-fel .4s ease-out 1.3s both;
}
.rang-ajandek {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 15px; color: #ffd76a;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  animation: rang-fel .4s ease-out 1.42s both;
}
.rang-ajandek .art-ico { width: 24px; height: 24px; }
#rang-popup .rang-ok { margin-top: 20px; min-width: 180px; padding: 11px 22px; font-size: 16px; animation: rang-fel .4s ease-out 1.6s both; }
@media (prefers-reduced-motion: reduce) {
  .rang-sugarak { animation: rang-sugar-be .4s ease-out both; }
  .rang-cimer svg { animation: rang-be .3s ease-out both; }
  .rang-jel .rang-erme-perem { animation: none; stroke-dashoffset: 0; }
  .rang-jel .rang-fej { animation: none; opacity: 1; }
  .rang-hullam, .rang-szikra { display: none; }
  .rang-szalag { animation: rang-be .3s ease-out .3s both; }
}

/* Nyereség-sorok a próbatétel végén: tapasztalat, felfedezés, foglalás,
   szintlépés. Halkabbak, mint a tallér-jutalom — az a fő üzenet. */
.gain-xp, .gain-new, .gain-claim, .gain-level, .gain-rank {
  margin: 6px 0 0; font-size: 14px; line-height: 1.4;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.gain-xp { color: var(--panel-muted); }
.gain-new { color: #6d9410; }
.gain-claim { color: #b8862f; font-weight: 700; }
.gain-level, .gain-rank {
  color: var(--card-gold, #b9a05e); font-weight: 700;
  text-shadow: 0 1px 2px #0004;
}

/* a vereség ára a harc végén */
.battle-penalty {
  margin: 8px 0 0; font-size: 15px; font-weight: 700;
  color: #b8452f;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0004;
}

/* jutalom-sor a quiz végén */
.quiz-penalty {
  margin: 10px 0 0; font-size: 15px; font-weight: 700;
  color: #a8402c;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0004;
}
.quiz-reward {
  margin: 10px 0 0; font-size: 15px; font-weight: 700;
  color: var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0006;
}

/* ---- Aranytallér-ablak ------------------------------------------------- */
#coins-popup {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px
           calc(16px + env(safe-area-inset-bottom, 0px));
  background: #0006;
}
#coins-popup[hidden] { display: none; }
#coins-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px;
}
/* A BELÉPŐ ABLAK lakatja — középen, az űrlap fölött (a kiléptetés és a
   „belépés kell" ablakának képe is ez). Alacsony képernyőn kisebb, hogy a
   Belépés gomb a hajtás fölött maradjon. */
.login-art { display: flex; justify-content: center; margin: 2px 0 10px; }
.login-art .art-ico {
  width: 76px; height: 76px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
@media (max-height: 600px) {
  .login-art .art-ico { width: 52px; height: 52px; }
}
.coins-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.coins-hero svg {
  width: 76px; height: 76px; flex: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5));
}
/* térhatás: arany átmenet, ráfektetett fény, vetett árnyék */
.coins-hero .art-ico {
  width: 86px; height: 86px; flex: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}
.coins-have {
  font-size: 26px; letter-spacing: .04em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  text-shadow: 0 1px 2px #0004;
}
#coins-ok { width: 100%; margin-top: 8px; padding: 11px; font-size: 16px; }

/* a lista-kijelző erszénye is kapjon kis mélységet */

/* ---- Piac -------------------------------------------------------------- */
/* Ugyanaz a kártya-váz, mint a POI-knál: arany keret, felül borítókép, rajta
   az erszény tartalma — a különbség csak a benne lévő táblázat. */
#market-popup .menu-card {
  position: relative;
  border: 2px solid var(--card-gold, #b9a05e);
  box-shadow: 0 12px 36px #000a, inset 0 0 0 1px #0006;
  overflow: hidden;
}
#market-popup .menu-head {
  background: var(--card-head-bg, #3a2a18);
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  color: var(--card-head-fg, #f3e4c1);
}
#market-title { font-size: 17px; color: var(--card-head-fg, #f3e4c1); }
#market-close, #market-back {
  width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1;
  background: none; border: none;
  color: var(--card-head-fg, #f3e4c1); opacity: .75;
}
#market-back[hidden] { display: none; }

#market-cover {
  flex: 0 0 auto;
  position: relative; margin: 0;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  background: #0d0a06;
}
#market-cover img {
  display: block; width: 100%;
  aspect-ratio: 1 / 1; max-height: 30vh;
  object-fit: cover; object-position: center 58%;
}
#market-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0000 62%, #0008 100%);
  pointer-events: none;
}
#market-cover.is-busy img { visibility: hidden; }
/* az erszény tartalma a jobb alsó sarokban — ahol a POI-nál a távolság */
#market-purse {
  position: absolute; right: 12px; bottom: 10px; z-index: 1;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  color: #f3e6c4; background: #14100ac9;
  border: 1px solid var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

#market-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 14px 16px; color: var(--panel-muted);
}

/* a kínálat táblázata: ikon + név, jobbra az egységár */
/* ---- A piac két füle ---------------------------------------------------
   Vétel és Eladás: ugyanaz a hely, ugyanaz a mozdulat — egy koppintás az út
   a kettő közt. Az elöl álló fül tömör alapot és világos feliratot kap, a
   másik csak körvonalat: a különbség első pillantásra látszódjon, ne kelljen
   kiolvasni. */
.mk-tabs {
  display: flex; gap: 8px; margin: 0 0 12px;
}
.mk-tab {
  flex: 1 1 0; padding: 9px 6px;
  font-size: 14px; letter-spacing: .1em; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-muted);
  background: #0000001f;
  border: 1px solid #ffffff1f;
  border-radius: var(--ui-radius, 8px);
  cursor: pointer;
}
.mk-tab.on {
  color: var(--card-head-fg, #f2e6d2);
  background: linear-gradient(180deg, #5b4429 0%, var(--card-head-bg, #3a2a18) 100%);
  border-color: #241a0f;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 2px 0 #241a0f;
}
.mk-tab:not(.on):hover { color: var(--panel-fg); border-color: #ffffff3d; }

/* a zsákból eladható tárgy sora: a saját rajza, a neve, és hány van belőle */
.mk-item-ico { width: 30px; height: 30px; flex: none; display: block; }
.mk-n {
  margin-left: auto; padding-left: 10px;
  font-size: 13px; color: var(--panel-muted); white-space: nowrap;
}
.mk-item-big {
  width: 72px; height: 72px; flex: none; object-fit: contain;
  filter: drop-shadow(0 3px 6px #0006);
}

.market-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.market-table th {
  padding: 0 0 6px; text-align: left;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-muted); font-weight: 600;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
}
.market-table th:last-child { text-align: right; }
.market-table td {
  padding: 10px 0; vertical-align: middle;
  border-bottom: 1px solid #0000001f;
}
.market-table tbody tr { cursor: pointer; }
.market-table tbody tr:active { background: #ffffff14; }
.mk-cell {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.mk-price {
  text-align: right; white-space: nowrap;
  font-size: 13px; color: var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

/* a rajzolt tétel-ikonok */
.mk-ico { width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
/* étel: tányér, sült hús, cipó */

/* egy tétel részletei */
.mk-detail { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mk-detail .mk-ico { width: 58px; height: 58px; }
.mk-name {
  font-size: 19px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.mk-unit { font-size: 13px; color: var(--card-gold, #b9a05e); margin-top: 2px; }
.mk-have { font-size: 13px; color: var(--panel-muted); margin-top: 2px; }

.mk-buy { margin-top: 16px; }
/* Két ilyen sor is állhat egymás alatt („Mennyiség" és „Nap"), és a feliratok
   különböző hosszúak. Rugalmas elrendezésnél emiatt más-más helyre kerülnének
   a gombok — RÁCSBA tesszük őket, így a −, a szám és a + minden sorban egy
   vonalban áll, a felirat pedig azt kapja, ami marad. Az utolsó oszlop a
   „Max" gombé (a nap-sorban egy üres hely tartja). */
.mk-qty {
  display: grid;
  grid-template-columns: 1fr 38px 56px 38px 46px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mk-qty > span { font-size: 15px; color: var(--panel-fg); }
.mk-qty button {
  width: 38px; height: 38px; padding: 0;
  font-size: 20px; line-height: 1;
}
.mk-qty button:disabled { opacity: .4; }
.mk-qty .mk-max { width: 46px; font-size: 13px; letter-spacing: .04em; }
/* mindkét sor számára ugyanaz (nem csak a #mk-qty-ra) */
.mk-qty output {
  text-align: center;
  font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.mk-total {
  margin: 12px 0 10px; font-size: 17px;
  color: var(--card-gold, #b9a05e);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.mk-buy-btn {
  width: 100%; padding: 12px; font-size: 16px;
  letter-spacing: .08em; font-weight: 700;
}
.mk-buy-btn:disabled { opacity: .45; }

/* piac: miért nem vehető (pl. tele a készlet) */
.mk-warn {
  margin: 0 0 10px; padding: 8px 10px; border-radius: var(--ui-radius, 8px);
  font-size: 14px; color: #f3e6c4;
  background: #5a2a1acc; border: 1px solid var(--card-gold, #b9a05e);
}

/* ---- Védettség-jelvény a borítón ---------------------------------------- */
/* KÖZVETLENÜL a távolság-plakett előtt ül (a `.poi-cover-end` csoportban): a
   helyszín mostani állapotát mondja el, és az ostromlónak is szól. Vörös,
   mert ez a hely „védve van" — ugyanaz a jelentés, mint az idegen birtok
   zászlajáé. */
.poi-guard {
  display: flex; align-items: center; gap: 6px;
  /* a 19 px-es sisakkal is 29 px magas, mint a sor többi plakettje */
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: #40151099;
  border: 1px solid #c1503a;
  color: #ffd9cc;
  font-size: 12px; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  backdrop-filter: blur(2px);
}
.poi-guard[hidden] { display: none; }
.poi-guard .art-ico { width: 19px; height: 19px; }

/* A saját birtok gombja: nem szerzel, hanem tartasz — ezért vörös, nem zöld. */
#poi-quests.guard {
  background: linear-gradient(180deg, #a8402c, #7d2a1c);
  border-color: #d9694f;
  color: #ffe9e2;
}

/* Védelmi képernyő: a piac vásárló-sávját használja, mert ugyanaz a művelet —
   két szám, egy szorzat, egy gomb. */
.guard-state { margin-bottom: 14px; }
.guard-here {
  margin: 0 0 4px; font-size: 15px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
}
.guard-effect { margin: 0 0 6px; font-size: 13px; color: #a8402c; }
.guard-pool { margin: 0; font-size: 12px; color: var(--panel-muted); }

/* ---- Birtoklás-sáv a POI-kártya tetején ---------------------------------- */
/* A fejléc alatt, a borító fölött fut végig: kié a terület, és mi az ára. Ez a
   két adat dönti el, érdemes-e itt nekiveselkedni — a történet marad a
   krónikában. A sáv színe mondja meg a viszonyt: arany a sajátunk, vörös az
   idegen, semleges a szabad. */
#poi-claim[hidden] { display: none; }
#poi-claim {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-head-fg, #f3e4c1);
  background: #241a10;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
}
#poi-claim.mine { background: linear-gradient(180deg, #4a3413, #2a1e10); }
#poi-claim.theirs { background: linear-gradient(180deg, #4a1f17, #2a1510); }
#poi-claim .claim-who { flex: 1 1 auto; min-width: 0; }
/* az ár jobbra, plakettben — ugyanaz a forma, mint a borító távolság-jelén */
#poi-claim .claim-price {
  flex: none;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px;
  color: var(--card-head-fg, #f3e4c1);
  background: #0009; border: 1px solid var(--card-gold, #b9a05e);
}
/* a zászló: ugyanaz a rajz, mint a térkép jelölőjén (`.zaszlo-jel`, lásd ott) — szabad szürke,
   saját zöld, idegen vörös */
#poi-claim .claim-flag { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 20px; height: 20px; }

/* ---- Üzenetek ------------------------------------------------------------ */
/* Egy sor = egy értesítés: bal oldalt a dátum, mellette a szöveg. Az
   olvasatlant nem szín, hanem egy vékony jel emeli ki a sor elején — így a
   „jó" és „rossz" hír színe szabadon marad. */
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 0 0 8px 10px;
  border-bottom: 1px solid #00000014;
  border-left: 3px solid transparent;
}
.msg-row.unread { border-left-color: var(--card-gold, #b9a05e); }
.msg-date {
  flex: none; font-size: 11px; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
}
.msg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.msg-text { font-size: 14px; line-height: 1.45; color: var(--panel-fg); }
/* „Mutasd a térképen": hivatkozásnak látszik, de gomb — a képernyőolvasó is
   így érti, és koppintásra nem navigál el az oldalról. */
.msg-goto {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 12px;
  color: #7a5a1e; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.msg-goto:active { opacity: .6; }
.msg-row.bad .msg-text { color: #a8402c; }
.msg-row.good .msg-text { color: #4a6b2a; }

/* olvasatlan-jelvény a menüpontban. A [hidden] külön szabályt kap: az
   id-szelektor `display`-e egyébként legyőzné a globális [hidden]-t, és
   olvasatlan hír nélkül is ott ülne egy üres vörös folt. */
#menu-msg-badge[hidden] { display: none; }
#menu-msg-badge {
  display: inline-block; margin-left: 8px;
  min-width: 18px; padding: 1px 5px;
  border-radius: 999px;
  font-size: 11px; line-height: 16px; text-align: center;
  color: #fdf3d8; background: #a8402c;
}

/* ---- Krónika ------------------------------------------------------------ */
/* Felül, hogy kié a hely; alatta a történet, időrendben visszafelé. */
.chron-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid #00000026;
  background: #00000014;
}
.chron-banner.owned {
  border-color: var(--card-gold, #b9a05e);
  background: linear-gradient(180deg, #b8862f22, #00000014);
}
/* a festett zászló (quests.js): saját zöld, idegen vörös, szabad szürke */
.chron-flag img { width: 28px; height: 28px; display: block; object-fit: contain; filter: drop-shadow(0 1px 1px #0008); }
.chron-owner {
  font-size: 15px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
}
.chron-since { font-size: 12px; color: var(--panel-muted); margin-top: 2px; }

.chron-list { display: flex; flex-direction: column; gap: 8px; }
.chron-row {
  display: flex; gap: 10px; align-items: baseline;
  padding-bottom: 8px; border-bottom: 1px solid #00000014;
}
.chron-date {
  flex: none; font-size: 11px; color: var(--panel-muted);
  font-variant-numeric: tabular-nums;
}
.chron-text { font-size: 14px; line-height: 1.45; color: var(--panel-fg); }

/* Elfoglalt helyszín a térképen: zászló a jelölő TETEJÉN, középen. A rúd egy
   vékony vonal, a lobogó egy fecskefarkú négyszög — kicsiben is felismerhető,
   és nem takarja el az ikont.

   A zászló SAJÁT elem (`.poi-flag`), nem a jelölő pszeudo-eleme. Muszáj:
   a pulzáló gyűrűk is a `::before`/`::after` párost használják, és egy elemre
   csak ez a kettő jut — közeli, elfoglalt helyszínen a két szabály kioltotta
   egymást (se zászló, se ép pulzálás). Így a saját elem hozza a maga két
   pszeudo-elemét: rudat és lobogót. */
.poi-flag {
  display: none;
  position: absolute; left: 50%; bottom: 100%;
  width: 16px; height: 16px;
  transform: translateX(-7px);
  pointer-events: none;
  /* a gyűrűk fölött, hogy a pulzálás ne takarja el */
  z-index: 1;
}
.poi-pin.owned .poi-flag, .poi-pin.mine .poi-flag { display: block; }
/* A KÁRTYA felső sávjának zászlója (`#poi-claim .claim-flag`) UGYANEZ a rajz (2026-10-21 —
   addig festett zászlóképek álltak ott, és nem hasonlítottak a térképire): a rúd és a lobogó
   szabálya közös, a kártyán 1,25-szörös méretben, a szabad helyen szürkén. */
.zaszlo-jel {
  position: relative; display: block;
  width: 16px; height: 16px;
  transform: scale(1.25); transform-origin: 50% 100%;
}
.poi-flag::before, .zaszlo-jel::before {   /* rúd */
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 2px; height: 11px;
  background: #4a3520;
  border-radius: 1px;
}
.poi-flag::after, .zaszlo-jel::after {     /* lobogó */
  content: '';
  position: absolute; left: 1px; bottom: 5px;
  width: 14px; height: 9px;
  background: var(--flag-other, #c1503a);
  clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 1px #0007);
}
/* a sajátunk zöld, az idegené vörös — messziről is megkülönböztethető */
.poi-pin.mine .poi-flag::after, .zaszlo-jel.mine::after { background: var(--flag-mine, #5f9e35); }
.zaszlo-jel.free::after { background: var(--flag-free, #9aa0a6); }

/* A HARMADIK ÁLLAPOT: MEGKEZDETT OSTROM — két keresztbe tett kard a jelölő
   fölött, a zászló helyén (app.js `siege`: már van itt győzelmünk, de a hely
   még nem a miénk). Ha a hely valakié, a kard a vörös zászlót váltja: a
   kártyán a gazdája továbbra is ott áll. Ugyanaz az elem, mint a zászlóé —
   a rúd és a lobogó (a két pszeudo-elem) ilyenkor eltűnik. */
.poi-pin.siege .poi-flag {
  display: block;
  width: 22px; height: 22px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M5.5 18.5 19.5 4.5M18.5 18.5 4.5 4.5' stroke='%23231a12' stroke-width='3.6'/%3E%3Cpath d='M3 21l3-3M21 21l-3-3' stroke='%23231a12' stroke-width='4.2'/%3E%3Cpath d='M5 14.5l4.5 4.5M19 14.5 14.5 19' stroke='%23231a12' stroke-width='4'/%3E%3Cpath d='M5.5 18.5 19.5 4.5M18.5 18.5 4.5 4.5' stroke='%23eceae3' stroke-width='1.8'/%3E%3Cpath d='M3 21l3-3M21 21l-3-3' stroke='%237a4a26' stroke-width='2.4'/%3E%3Cpath d='M5 14.5l4.5 4.5M19 14.5 14.5 19' stroke='%23d9a441' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px #0009);
}
.poi-pin.siege .poi-flag::before, .poi-pin.siege .poi-flag::after { display: none; }

/* „Krónikám": a fajta-gyűjtemény táblázata. A cellák középre igazítva, mert a
   bal oldalon ikon + név van, jobbra egy sornyi szöveg — a felső igazítás
   mellett a kettő optikailag elcsúszna egymástól. */
.chron-stats {
  margin: 0 0 10px; font-size: 14px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
}
.chron-h { margin: 14px 0 6px; font-size: 13px; color: var(--panel-muted); font-weight: 600; }
/* HÁROM hasáb: a fajta neve, hányszor győztél ott, és hányat birtokolsz
   belőle. A két szám mást mond — egy helyszínen sokszor győzhettél anélkül,
   hogy a tiéd lenne —, ezért nem egy cellába zsúfolva áll. A birtok-hasáb
   ARANY és csak akkor van benne szám, ha van is birtok: így a lapon egy
   pillantással látszik, hol állsz jól. */
/* A NÉV-CELLA behúzása és térköze a „Birtokaim" gombéval AZONOS (12 px, majd
   8 px az ikon után): így a gomb ikonja és a sorok ikonjai egy függőleges
   vonalba esnek, és a feliratok is egy vonalban indulnak. A két érték egy
   helyen, változóban, hogy ne csúszhasson szét. */
.chron-types, .chron-more, .chron-owned { --chron-inset: 12px; --chron-gap: 8px; }
.chron-types td { vertical-align: middle; padding: 5px 0; }
.chron-types td.chron-name {
  color: var(--panel-fg); white-space: normal;
  display: flex; align-items: center; gap: var(--chron-gap);
  padding-left: var(--chron-inset);
}
.chron-types td.chron-n { text-align: right; color: var(--panel-muted); white-space: nowrap; }
.chron-types td.chron-own {
  text-align: right; white-space: nowrap; padding-left: 10px;
  color: var(--card-gold, #b9a05e); font-weight: 700;
}

/* Részletező gomb a Krónikám lapján („Birtokaim (7)") és a vissza-út onnan.
   A behúzás és a térköz a fajta-sorokéval azonos (lásd `--chron-inset`),
   tehát a gomb ikonja és a sorok ikonjai egy függőleges vonalban állnak. */
.chron-more {
  display: flex; align-items: center; gap: var(--chron-gap);
  width: 100%; margin: 0 0 4px;
  /* a bal behúzásból levonjuk a keret vastagságát: a gomb tartalma így
     pontosan ugyanott kezdődik, mint a keret nélküli táblázat-cellák */
  padding: 9px 12px 9px calc(var(--chron-inset) - 1px); text-align: left;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 14px; letter-spacing: .04em;
  color: var(--card-gold, #b9a05e);
  background: #ffffff0a;
  border: 1px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  cursor: pointer;
}
.chron-more:active { opacity: .7; }

/* A TÖLTÖTT változat: a kártya fejlécének barnája, fehér felirattal.
   A TÉRHATÁS négy rétegből áll, és mindegyiknek külön dolga van:

     függőleges átmenet   fentről jön a fény, tehát a lap teteje világosabb;
     felső fénycsík       a perem éle, ahol a fény megcsillan (inset, világos);
     alsó belső árnyék    a szemközti él, ahová nem jut fény (inset, sötét);
     tömör alsó él        `0 3px 0` — ez maga a gomb VASTAGSÁGA, nem elmosódó
                          árnyék, hanem a lap oldala;
     szórt árnyék         a gomb alatt, a lapról leemelve.

   A lenyomás nem csak halványít: a gomb LESÜLLYED (2 px), és közben a
   vastagsága is elfogy — ettől lesz megnyomva, nem kikapcsolva. */
.chron-more.filled {
  color: #fff;
  background: linear-gradient(180deg,
    #5b4429 0%, var(--card-head-bg, #3a2a18) 55%, #2a1d10 100%);
  border-color: #241a0f;
  box-shadow:
    inset 0 1px 0 #ffffff3d,
    inset 0 -2px 0 #00000055,
    0 3px 0 #241a0f,
    0 5px 12px #00000055;
  text-shadow: 0 1px 2px #0009;
  margin-bottom: 10px;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.chron-more.filled:hover { filter: brightness(1.1); }
.chron-more.filled:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 #ffffff24,
    inset 0 -1px 0 #00000044,
    0 1px 0 #241a0f,
    0 2px 6px #00000044;
}
@media (prefers-reduced-motion: reduce) {
  .chron-more.filled { transition: none; }
}
/* a gomb ikonja is kiemelkedik egy kicsit a barna lapból */
.chron-more.filled .chron-ico { filter: drop-shadow(0 1px 2px #0007); }

/* Birtokaim: a postaláda sorainak a nyelvén, de ikonnal és „mióta" sorral.
   A behúzás és a térköz itt is a közös érték, hogy a vissza-gomb felirata és
   a sorok ikonjai egy függőleges vonalban álljanak. */
.chron-owned { margin-top: 10px; }
.chron-owned .msg-row {
  align-items: center; gap: var(--chron-gap);
  padding-left: var(--chron-inset);
  /* A postaláda sorai 3 képpontnyi bal szegélyt tartanak fenn az olvasatlan-
     jelölésnek. Itt nincs olvasatlan állapot, tehát az a sáv csak elcsúsztatná
     a sort a vissza-gombhoz képest. */
  border-left: 0;
}
.chron-since { font-size: 11px; color: var(--panel-muted); }
/* a forrás 128 px-es: méret nélkül akkorán is ülne ki */
.chron-ico { width: 22px; height: 22px; flex: none; display: block; }
/* amit még nem gyűjtöttél be, halványabb — látszik, de nem versenyez */
.chron-types tr.todo { opacity: .55; }

/* „Tárgyaim": a zsák tartalma. Ugyanaz a váz, mint a Krónikámé — a két lap
   egymás mellett él a menüben, tehát ne kelljen újratanulni az olvasásukat.
   A darabszám jobbra, mert a szemnek ott a helye, ha összeadni akar. */
/* A TELJES katalógus szerepel, nem csak amiből van — ugyanaz a szemlélet,
   mint a Krónikámnál: látod, mi nincs még meg. Ami megvan, az teljes erővel
   és arany számmal áll; a többi halványan, de olvashatóan. A behúzás és a
   térköz a Krónikáméval közös, hogy a két lap egy nyelvet beszéljen. */
.bag-table { --chron-inset: 12px; --chron-gap: 10px; }
.bag-table td { vertical-align: middle; padding: 4px 0; }
.bag-table td.bag-name {
  color: var(--panel-fg); white-space: normal;
  display: flex; align-items: center; gap: var(--chron-gap);
  padding-left: var(--chron-inset);
}
.bag-table td.bag-n { text-align: right; color: var(--panel-muted); white-space: nowrap; }
/* a forrás 96 px-es: méret nélkül akkorán is kiülne */
.bag-ico { width: 30px; height: 30px; flex: none; display: block; }
/* Ami még nincs meg, az halványabb — de OLVASHATÓ marad: amíg a
   gyűjtögetés nincs bekötve, minden sor ilyen, és egy végig kifakult lap
   nem mondana semmit. */
.bag-table tr.todo { opacity: .72; }
.bag-table tr.have td.bag-n { color: var(--card-gold, #b9a05e); font-weight: 700; }
/* A MEGLÉVŐ tárgy sora megnyitható — a hiányzóé nem, ott nincs mit
   megmutatni. A kurzor és a megvilágosodó háttér ezt mondja el kattintás
   előtt. */
.bag-table tr[data-item] { cursor: pointer; }
.bag-table tr[data-item]:hover td,
.bag-table tr[data-item]:focus-visible td { background: #ffffff12; }
.bag-table tr[data-item]:focus-visible { outline: 2px solid var(--card-gold, #b9a05e); }

/* ---- EGY TÁRGY lapja ---------------------------------------------------
   A listában a tárgy harminc képpont; ez a lap arról szól, hogy nézd meg,
   ezért a NAGY rajz megy ki. Semmi más nincs rajta: a kép, a neve, és hogy
   hányad van — a többi a listáé. */
.bag-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 4px; text-align: center;
}
.bag-card-ico {
  width: 62%; max-width: 220px; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 6px 16px #0006);
}
.bag-card-name {
  margin: 10px 0 2px; font-size: 22px; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-fg);
}
.bag-card-n { margin: 0; font-size: 15px; color: var(--card-gold, #b9a05e); }

/* A gyűjtőpont kártyájának gombja — KÉK, és ez megkülönböztetés, nem dísz.
   A kártyák nagy gombja eddig kétféle volt: vörös (próbatétel, védelem) és
   vörös-halvány (távoli próbatétel). Mindkettő KOCKÁZATOT jelent: harc, tét,
   elixír. A felfedezés nem az — nincs ellenfele, nincs ára, nem veszíthetsz
   vele. A kék épp ezt mondja: más fajta cselekvés, mint amit a vörös gombok
   kínálnak. Élesben csak akkor van kint, ha a helyszín elérhető — a
   feltételt a config kapcsolja (`forage.search.requireNear`, lásd
   showForagePopup).

   A felfedezés VÉGÉN ugyanez a gomb zárja le a kártyát (`.forage-done`), és
   ilyen a tárgy-lap vissza-gombja is (`.bag-back`), és a kártya VISSZA
   gombja ott, ahol más gomb nincs (`.poi-leave`, pl. egy távoli gyűjtőponton):
   mindegyik ártalmatlan lépés, tehát ugyanaz a forma. */
.forage-collect, .forage-done, .bag-back, .poi-leave {
  display: block; width: 100%; margin: 14px 0 0; padding: 13px;
  font-size: 16px; letter-spacing: .12em; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #eaf3ff;
  border: 2px solid #24506f;
  border-radius: var(--ui-radius, 8px);
  background: linear-gradient(180deg, #3a7ba8, #24506f);
  box-shadow: 0 3px 10px #0004, inset 0 1px 0 #ffffff2e;
  text-shadow: 0 1px 2px #0006;
  cursor: pointer;
}
.forage-collect:hover, .forage-done:hover, .bag-back:hover, .poi-leave:hover { filter: brightness(1.08); }
.forage-collect:active, .forage-done:active, .bag-back:active, .poi-leave:active { transform: scale(.985); }

/* ---- KÖZÖS HELYSZÍN: napi látogatási jutalom ---------------------------
   Háromféle állapot fér el ugyanabban a sávban: gomb (ott vagy, ma még nem
   vetted fel), és két mondat (ma már megvolt / menj oda érte). Egy sáv, mert
   a kártyán ez EGY dolog — csak épp másképp áll épp. */
.poi-reward {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0;
}
.poi-reward > span {
  font-size: 15px; line-height: 1.4;
  /* ugyanaz a tinta, mint a kártya szövegéé (.poi-desc) — egy lapon egy szín */
  color: var(--panel-fg); opacity: .85;
}
.poi-reward-ico {
  width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
/* A GOMB maga viszi a sávot: a tallér a felirat elé kerül, nem mellé — így a
   megnyomható felület a teljes sor, nem csak a szöveg. */
.poi-reward-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  font-size: 15px; letter-spacing: .06em; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #fff3d0;
  border: 2px solid #7a5a1e;
  border-radius: var(--ui-radius, 8px);
  background: linear-gradient(180deg, #b98c34, #7a5a1e);
  box-shadow: 0 3px 10px #0004, inset 0 1px 0 #ffffff2e;
  text-shadow: 0 1px 2px #0006;
  cursor: pointer;
}
.poi-reward-btn:hover { filter: brightness(1.08); }
.poi-reward-btn:active { transform: scale(.985); }

/* ---- A KÚT (app.js `showKutPopup`) ---------------------------------------
   A díszkút neve a sáv fölött; a merítés gombja a többi jutalom-sávéval azonos. */
.kut-nev {
  margin: 2px 0 0; text-align: center; font-size: 15px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
/* a kút a térképen, ahonnan ma már merítettél: halvány (holnap újra ad) */
.poi-pin.kesz img { filter: grayscale(.7) brightness(.85); opacity: .6; }

/* ---- A KUTATÁS színpada -------------------------------------------------
   A gyűjtőpont nem egy koppintással adja oda, amije van: a Felfedezés gomb
   egy KERESÉST indít, ami percekig tart, és a leletek menet közben kerülnek
   elő. Ez a színpad az, amit közben nézni lehet.

   Miért DOM és CSS, nem WebGL: a harc színpada (battle3d.js) egy modellt
   mozgat, ahhoz kell a vászon. Itt egy pásztázó fénykör és néhány szikra a
   teljes díszlet — az böngészőben pár szabály, nem egy második
   grafikus kontextus a telefonon. Így offline is ugyanaz, és nem vesz el
   semmit a térkép elől. */
.forage-stage {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; max-height: 34vh; margin: 12px 0 0;
  /* A kereső kör a színpad KISEBBIK oldalához igazodik (lásd .fo-radar), és
     ehhez ismernie kell a színpad méretét — ezért befogadó (container). Enélkül
     teljes képernyőn, egy magas színpadon a kör kilógna oldalt. */
  container-type: size;
  border: 1px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);
  /* az éjszakai avar színe: a fény a közepéből jön, a szélek elvesznek */
  background: radial-gradient(120% 120% at 50% 56%, #18240f 0%, #0a0e06 72%);
}

/* A radar: gyűrűk, pásztázó fénypászta és a közepén a „szem". A három elem
   egymásra van rétegezve (grid, egy cella), így nem kell abszolút pozíció
   és nem csúszhatnak el egymástól. */
/* ---- GYÓGYÍTÁS: a színpad EKG-vel ---------------------------------------
   Ugyanaz a keret, mint a felfedezésé (`.forage-stage`) — egy játékban egy
   ilyen „várj itt" pillanat legyen egyforma. Ami más, az a közepén futó
   mozgás és a háttér színe: ott éjszakai avar, itt hűvös gyógyszertári zöld.

   MIÉRT NEM RADAR: a felfedezésé kereső mozdulat, ez életjel. Ha ugyanaz
   volna a mozgás, a játékos nem tudná ránézésre, melyik képernyőn van. */
/* A GYÓGYÍTÁS ZÖLDJE a JÁTÉK zöldje.
   Egyetlen zöld van a felületen — a közeli helyszín gyűrűje, a marker
   életerő-csíkja, a be-kapcsolók kerete (`--poi-near`, és a csík világosabb
   #8fd11a→#5e8f0c menete). Az EKG eleinte mentazöld volt: külön szép, de egy
   játékban egy zöld legyen, különben a szem két rendszert tanul meg. */
.heal-stage {
  background: radial-gradient(120% 120% at 50% 56%, #16200c 0%, #080c05 72%);
  border-color: color-mix(in srgb, var(--card-gold, #b9a05e) 70%, var(--poi-near, #6d9410));
}

/* A GÖRBE a színpad teljes szélességében fut. Nem négyzet, mint a radar: egy
   EKG vízszintes szalag, és ha körbe zárnánk, épp a felismerhetősége veszne
   el. */
.hl-ekg {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 46%;
  opacity: .95;
  transition: opacity .5s ease;
}
.hl-ekg svg { width: 100%; height: 100%; display: block; }

/* A NYOM: az egész görbe, halványan. Enélkül a fényes fej a semmiből
   bukkanna elő, és a színpad üres volna két ütem között. */
.hl-trace {
  fill: none; stroke: #5e8f0c; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* A FEJ: egy rövid, fényes szakasz szalad végig a nyomon. A futást a
   `stroke-dashoffset` animálja, tehát a BÖNGÉSZŐ rajzolja — nem képkockánként
   számoljuk, mint a harc visszaszámlálását. */
.hl-pulse {
  fill: none; stroke: #8fd11a; stroke-width: 2.6;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px #8fd11aaa);
  stroke-dasharray: 90 700;
  animation: hl-run 2.4s linear infinite;
}
@keyframes hl-run {
  from { stroke-dashoffset: 90; }
  to   { stroke-dashoffset: -700; }
}

/* A SZÍV a görbe mögött lüktet: ez adja az ütemet a szemnek. Halvány, mert
   nem ő a hír — a szám az. */
.hl-heart {
  position: absolute; top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .13;
  animation: hl-beat 2.4s ease-in-out infinite;
}
.hl-heart svg { width: 100%; height: 100%; display: block; fill: #8fd11a; }
@keyframes hl-beat {
  0%, 62%, 100% { transform: translate(-50%, -50%) scale(1); }
  68%           { transform: translate(-50%, -50%) scale(1.14); }
  76%           { transform: translate(-50%, -50%) scale(1.02); }
  82%           { transform: translate(-50%, -50%) scale(1.09); }
}

/* TELE VAN: a görbe megnyugszik, a szív elcsendesedik. Nem tűnik el — a
   gyógyulás megtörtént, nem megszakadt. */
.hl-ekg.flat { opacity: .18; }
.hl-ekg.flat .hl-pulse { animation-duration: 6s; }
.hl-heart.calm { animation-duration: 5s; opacity: .08; }

/* A felirat a színpad közepén — ugyanott, mint a felfedezésnél. Itt viszont
   SZÁM is van benne, ezért írógépbetűs számjegyekkel, hogy ne ugráljon a
   szélessége minden lépésnél. */
.hl-caption { font-variant-numeric: tabular-nums; }

/* A ZÁRÓ ÜZENET a színpad közepén, a felirat helyén. */
.hl-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px; text-align: center;
  opacity: 0; transform: scale(.94);
}
.hl-done.show { animation: hl-done-in .45s ease-out forwards; }
@keyframes hl-done-in {
  to { opacity: 1; transform: none; }
}

/* ÉLETERŐ-SÁV a színpad alatt: a szám mellett a mérték is látszik. A szám
   pontos, a sáv pedig egy pillantásra megmutatja, hol tartunk. */
.hl-bar {
  height: 10px; margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
  background: #0006;
}
.hl-bar-fill {
  display: block; height: 100%; width: 0;
  /* ugyanaz a két szín, mint a marker fölötti életerő-csíké (.marker-hp > i):
     ugyanarról szól, tehát ugyanúgy nézzen ki */
  background: linear-gradient(90deg, #5e8f0c, #8fd11a);
  transition: width .5s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hl-pulse, .hl-heart, .hl-done { animation: none; }
  .hl-done { opacity: 1; transform: none; }
  .hl-bar-fill { transition: none; }
}

.fo-radar {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* A kör a színpad KISEBBIK oldalának 88%-a: fekvő kártyán a magasság, álló
     teljes képernyőn a szélesség szabja meg. Az első sor a tartalék azoknak a
     böngészőknek, amelyek a befogadó-egységeket nem ismerik. */
  width: 88%; aspect-ratio: 1;
  width: min(94cqw, 92cqh);
  display: grid; place-items: center;
  transition: opacity .45s ease, filter .45s ease;
}
.fo-radar > * { grid-area: 1 / 1; }
/* Amíg egy lelet látszik, a pásztázás HÁTTÉRBE lép: két mozgás egymáson
   zavaros volna, és abban a pillanatban nem a keresés a hír. */
.fo-radar.dim { opacity: .16; }
/* A felfedezés VÉGE: a kör kihuny. Nem tűnik el — a hely megvolt, csak
   kimerült. */
.fo-radar.off { opacity: .1; filter: grayscale(1); }

/* A KERESŐKÖR: szaggatott perem és halvány szálkereszt. Nem mozog — ettől
   van mihez képest mozognia a pásztázásnak, és ettől nem üres a színpad
   akkor sem, amikor épp két gyűrű között tartunk. */
.fo-radar::before {
  content: ''; grid-area: 1 / 1;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--poi-near, #6d9410) 34%, transparent);
  background:
    linear-gradient(to right, transparent calc(50% - .5px), #6d941024 calc(50% - .5px),
      #6d941024 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), #6d941024 calc(50% - .5px),
      #6d941024 calc(50% + .5px), transparent calc(50% + .5px));
}

/* A gyűrűk kifelé tágulnak és elhalnak. Hárman vannak, eltolt indulással:
   így a lüktetés folyamatos hullám, nem egyszerre táguló karika. */
.fo-ring {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--poi-near, #6d9410) 70%, #e8f6c8);
  opacity: 0;
  animation: fo-ring 2.7s ease-out infinite;
}
.fo-ring:nth-child(2) { animation-delay: .9s; }
.fo-ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes fo-ring {
  0%   { transform: scale(.12); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}

/* A pásztázó pászta: egy körbeforgó fényék. A kúp-átmenet széle adja a
   „nyomvonalat" — utána sötét, tehát a kör nem világít egyenletesen. */
.fo-sweep {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--poi-near, #6d9410) 55%, transparent) 0deg,
    transparent 62deg, transparent 360deg);
  animation: fo-spin 3.4s linear infinite;
}
@keyframes fo-spin { to { transform: rotate(360deg); } }

/* A közepén a szem: lassan lélegzik, hogy a kép akkor se álljon meg, amikor
   épp két gyűrű között tartunk. */
.fo-eye {
  width: 12px; height: 12px; border-radius: 50%;
  background: #eaffc4;
  box-shadow: 0 0 10px var(--poi-near, #6d9410), 0 0 22px #6d941066;
  animation: fo-eye 1.8s ease-in-out infinite;
}
@keyframes fo-eye {
  0%, 100% { transform: scale(.8); opacity: .7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ---- A LELET: parázsból bomlik ki az ikon ------------------------------ */
.fo-find {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;                 /* a színpad alatta végig fogható */
}
/* A böngésző [hidden] szabályát a fenti display: flex különben legyőzné. */
.fo-find[hidden] { display: none; }
/* A LELET BURKOLÓJA: ez ugrik elő és ez lélegzik, és ez hordja a fényt meg az
   árnyékot — NEM a kép `filter: drop-shadow`-ja. Az animált képen a szűrő
   telefonon (Android WebView, Safari) a kép NÉGYZETES dobozára vágódott:
   szögletes, csonka árnyék és fény (ugyanaz a hiba, mint a menü címerénél és
   az értesítő jelénél). Két színátmenet: a parázs fénye a tárgy mögött (enélkül
   ráragasztott matricának látszana a színpadon), és egy lágy ovális árnyék
   alatta. Egy színátmenetnek nincs mit levágni. */
.fo-find-art {
  position: relative; display: block;
  width: 46%; max-width: 160px; aspect-ratio: 1;
}
.fo-find-art::before {
  content: ''; position: absolute; inset: -16%;
  background: radial-gradient(closest-side, #ff9a3c4d, #ff9a3c1f 55%, transparent);
  pointer-events: none;
}
/* a tárgyképek a négyzet közepén ülnek, alul üres sávval: az árnyék ezért
   nem a doboz aljára, hanem a tárgy alá kerül */
.fo-find-art::after {
  content: ''; position: absolute; left: 50%; bottom: 10%;
  width: 62%; height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #000000a0, #00000048 55%, transparent);
  pointer-events: none;
}
.fo-find-ico {
  position: relative; z-index: 1;    /* a fény és az árnyék fölött */
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.fo-find-name {
  font-size: 15px; letter-spacing: .08em; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-gold, #b9a05e);
  text-shadow: 0 2px 8px #000c;
}
/* Előbb egy ugrás (a lelet ELŐKERÜL), utána halk lüktetés, amíg látszik. */
.fo-find.show .fo-find-art {
  animation: fo-pop .6s cubic-bezier(.2, 1.5, .4, 1) both,
             fo-breathe 1.7s .6s ease-in-out infinite;
}
.fo-find.show .fo-find-name { animation: fo-name .5s .22s ease-out both; }
@keyframes fo-pop {
  0%   { transform: scale(.35) translateY(16px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes fo-name {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- A FELFEDEZÉS VÉGE: a zsák a színpadon ------------------------------
   Ugyanaz a réteg, amin az imént a leletek jöttek elő (`.fo-find`) — a szem
   már oda néz, és a színpad épp most ürült ki. A színpad ALATTI sor ehhez
   képest mellékhely volt: a lap alján, a gomb fölött. */
.fo-find.end { gap: 14px; }
/* a zsák is burkolóban: az ugrás és a lágy árnyék a burkolóé (lásd fent) */
.fo-end-art {
  position: relative; display: block;
  width: 34%; max-width: 120px; aspect-ratio: 1;
}
.fo-end-art::after {
  content: ''; position: absolute; left: 50%; bottom: -2%;
  width: 72%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #000000a0, #00000048 55%, transparent);
  pointer-events: none;
}
.fo-end-ico {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  fill: none;
  stroke: var(--card-gold, #b9a05e);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* a zsák teste tömör, hogy a sötét színpadon test legyen, ne csak körvonal */
.fo-end-ico .sack-body { fill: #241a0f; }
.fo-end-ico .sack-neck { fill: #241a0f; }
/* a szikrák halkabbak: jelzés, nem főszereplő */
.fo-end-ico .sack-spark { opacity: .7; stroke-width: 2.2; }

.fo-end-text {
  max-width: 86%; margin: 0; text-align: center;
  font-size: 16px; line-height: 1.45; font-weight: 700;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-gold, #b9a05e);
  text-shadow: 0 2px 8px #000c;
}
/* A záró kép EGYSZER áll be, és marad: a lelet lüktetése ide nem való — az a
   pillanat izgalma volt, ez a nyugvópont. */
.fo-find.end .fo-end-art { animation: fo-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.fo-find.end .fo-end-text { animation: fo-name .5s .2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .fo-find.end .fo-end-art, .fo-find.end .fo-end-text { animation: none; }
}

/* A PARÁZS. Minden szikra a saját sodrását, méretét és ütemét kapja (a JS
   írja be őket egyedi tulajdonságként), ezért nem egyszerre, egy irányba
   szállnak fel, hanem kupacban — ahogy a fújt parázs. */
.fo-ember {
  position: absolute; bottom: 10%; z-index: 2;
  width: var(--size, 4px); height: var(--size, 4px); border-radius: 50%;
  background: #ffc266;
  box-shadow: 0 0 8px #ff6a1e, 0 0 16px #ff3b0f7a;
  pointer-events: none;
  animation-name: fo-rise;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
@keyframes fo-rise {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--drift, 0), -150px) scale(1); opacity: 0; }
}

/* ---- A felfedezés felirata: a RADAR KÖZEPÉN -----------------------------
   Ugyanott és ugyanolyan arany betűvel, mint a harcban a visszaszámlálás és a
   „K.O." (`.battle-count`): a képernyőnek egy közepe van, és ami ott áll, azt
   olvasni kell. Csak a méret más — ez mondat, nem egy szám —, ezért kisebb és
   több sorba törhet.

   A radar fölött lebeg, tehát nem vesz el helyet a színpadból, és nem fog el
   koppintást sem. */
.fo-caption {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 11%;
  text-align: center; text-wrap: balance;
  font-size: clamp(20px, 6.4vmin, 38px);
  line-height: 1.28; font-weight: 700; letter-spacing: .04em;

  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--card-gold, #b9a05e);
  /* SÖTÉT UDVAR A BETŰK KÖRÜL — több rétegben, szűkről tágra.
     Kell: a radar „szeme" pont a színpad közepén ül, és a pásztázó fény is
     átvonul alatta. Egy háttérlap az egész radart elnyomná; így viszont a köd
     csak a szavak KÖRÜL nyílik szét, a kör és a fénypont pedig megmarad. */
  text-shadow:
    0 0 5px #0a0e06, 0 0 10px #0a0e06, 0 0 18px #0a0e06f2,
    0 2px 10px #000000cc;
  pointer-events: none;
  transition: opacity .35s ease;
}
.fo-caption[hidden] { display: none; }
/* amíg egy lelet látszik, a felirat félreáll — a közép most a leleté */
.fo-caption.away { opacity: 0; }

/* A megtaláltak sora. A hely akkor is megvan, amikor még üres — így a sor
   megjelenése nem tolja odébb a gombot a felfedezés közepén. */
.forage-bag {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  margin-top: 8px; min-height: 38px;
}
.forage-bag-item {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid #ffffff1f; border-radius: var(--ui-radius, 8px);
  background: #0000002e;
  animation: fo-drop .45s ease-out both;
}
.forage-bag-ico { width: 30px; height: 30px; object-fit: contain; }
@keyframes fo-drop {
  from { transform: translateY(-10px) scale(.7); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* A megszakítás HALK gomb: ott van, ha kell, de nem hívogat. A felfedezés
   folytatása az alapeset — a kilépés a kivétel. */
.forage-stop {
  display: block; width: 100%; margin: 12px 0 0; padding: 11px;
  font-size: 14px; letter-spacing: .1em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: var(--panel-muted);
  border: 1px solid #ffffff26;
  border-radius: var(--ui-radius, 8px);
  background: #00000026;
  cursor: pointer;
}
.forage-stop:hover { color: #e9e1cd; border-color: #ffffff45; }
.forage-stop:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  /* Mozgás nélkül is legyen felfedezés: a kör áll, a lelet ugrás nélkül jelenik
     meg, a parázs elmarad. Ami információ volt, az megmarad. */
  .fo-ring, .fo-sweep, .fo-eye, .fo-ember,
  .fo-find.show .fo-find-ico, .fo-find.show .fo-find-name,
  .forage-bag-item { animation: none; }
  .fo-ring { opacity: .5; transform: scale(1); }
  .fo-ring:nth-child(2) { transform: scale(.66); }
  .fo-ring:nth-child(3) { transform: scale(.33); }
  .fo-ember { display: none; }
}

/* az ostrom állása a krónikában és a próbatétel végén */
.chron-siege { font-size: 12px; color: var(--panel-muted); margin-top: 4px; }
.gain-siege {
  margin: 6px 0 0; font-size: 14px; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

/* ---- Belépés és regisztráció -------------------------------------------- */
/* A menü FÖLÖTT nyílnak (onnan hívja őket a játékos), ezért egy réteggel
   feljebb ülnek — azonos z-indexnél a DOM-sorrend döntene. */
#login-popup, #register-popup { z-index: 21; }
#login-popup .menu-card, #register-popup .menu-card { max-width: 380px; }

/* A címkék közvetlenül a mezőjük fölött állnak, ezért nem lóghatnak el
   annyira, mint egy önálló bekezdés. */
#login-email, #login-pass {
  /* A név-mező szándékosan díszbetűs (az egy fantázianév); egy e-mail cím és
     egy jelszó viszont karakterre pontosan olvasandó — ott a kiskapitális
     csupa nagybetűt csinál, és az 1/l, 0/O sem különbözik. */
  font-family: var(--ui-font, system-ui);
  font-size: 16px;                 /* iOS 16px alatt ráközelít a mezőre */
  letter-spacing: .01em;
}
#login-pass { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

#login-popup label.menu-hint { display: block; margin: 10px 0 0; }
#login-popup label.menu-hint:first-child { margin-top: 0; }

/* ---- Regisztráció ------------------------------------------------------- */
/* Ugyanaz a mező-kinézet, mint a belépésnél — egy űrlap-nyelve van a
   játéknak. Az e-mail és a jelszó itt is olvashatóság-elsőbbségű betűvel megy:
   a díszbetű csupa nagybetűt csinálna, és az 1/l, 0/O sem különbözne. */
.reg-field {
  width: 100%; box-sizing: border-box;
  margin: 6px 0 4px; padding: 10px 12px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid var(--border);
  background: var(--field-bg, #fff8e6);
  color: var(--panel-fg);
  font-family: var(--ui-font, system-ui);
  font-size: 16px;                 /* iOS 16px alatt ráközelít a mezőre */
  letter-spacing: .01em;
}
.reg-field:focus { outline: 2px solid var(--card-gold, #b9a05e); outline-offset: 1px; }
#reg-pass, #reg-pass2 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* A hibás mező kerete is szól, nem csak a szöveg alatta: színvakon és
   futó pillantással is látszódjon, HOL a baj. */
.reg-field.is-bad { border-color: #a8402c; outline-color: #a8402c; }
#register-popup label.menu-hint, #account-fields label.menu-hint,
#forgot-popup label.menu-hint, #reset-popup label.menu-hint {
  display: block; margin: 10px 0 0;
}
#register-popup label.menu-hint:first-child,
#account-fields label.menu-hint:first-child { margin-top: 0; }
/* a Google-ről érkező regisztrációjában az e-mail és a jelszó felirata is eltűnik (a `display` a
   `hidden` attribútumot különben felülírná) */
#register-popup label.menu-hint[hidden] { display: none; }

/* ---- Elfelejtett jelszó és új jelszó -----------------------------------
   Nincs saját mező-kinézetük: a `reg-field` osztályt viselik, mint a
   regisztráció és a fiókadatok. A játéknak EGY űrlap-nyelve van, és egy
   negyedik változat csak arra volna jó, hogy egyszer elcsússzon a többitől.

   A jelszómezők itt is írógépbetűsek: a díszbetű csupa nagybetűt csinálna, és
   az 1/l, 0/O sem különbözne — egy jelszónál ez a különbség számít. */
#reset-pass, #reset-pass2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* TÖBB LEVEGŐ, mint a többi ablakban — és nem szeszélyből.
   Ez a két lap rövid: egy-két mező, két gomb. A közös 16 képpont egy hosszú
   űrlapon arányos, itt viszont a kártya annyira összehúzódik, hogy a
   tartalom a kerethez tapad. A gombok alatt külön is kell a hely: alul
   nincs több sor, ami elválasztaná őket a lap szélétől. */
#forgot-popup .menu-body, #reset-popup .menu-body, #geo-popup .menu-body { padding: 20px 20px 24px; }
#forgot-popup .name-actions, #reset-popup .name-actions { margin-top: 18px; }

/* A bevezető és az „elküldtük" mondat levegőt kap: ezek nem mezőcímkék,
   hanem magyarázatok — a sorköz is nagyobb, mert ezt el kell olvasni. */
#forgot-intro, #reset-intro {
  margin: 0 0 16px; line-height: 1.55; font-size: 13px;
}
#forgot-done { margin: 16px 0 4px; line-height: 1.55; }
#register-popup .name-count { margin: 0 0 4px; }

/* Adatkezelés: a négyzet és a szöveg EGY címke, tehát a szövegre koppintva is
   bepipálódik — telefonon egy 16 pixeles négyzetet eltalálni bosszantó. */
/* BIZTONSÁGI KÉRDÉS a regisztrációban: a két szám a mező ELŐTT, nagyban
   („7 + 5 ="), a mezőbe csak az összeg kell; mellette a „másik kérdés". */
.reg-captcha { margin: 2px 0 6px; }
.reg-captcha-line { display: flex; align-items: center; gap: 12px; }
.reg-captcha-q {
  flex: none;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 20px; font-weight: 700; letter-spacing: .04em;
  color: var(--panel-fg);
  white-space: nowrap;
}
.reg-captcha-line .reg-field { flex: 0 0 84px; width: 84px; margin: 0; text-align: center; font-size: 18px; }
.reg-captcha-line .link-btn { margin: 0; }

/* A FIÓK NYELVE a regisztrációban: három zászlós gomb egy sorban (rádió a
   címkében — a címke a koppintási felület). Nincs előre kiválasztva; a
   választott ugyanazt a zöld keretet kapja, mint a nyelvválasztó listájában. */
.reg-lang { margin: 4px 0 6px; padding: 0; border: 0; min-width: 0; }
.reg-lang legend { padding: 0; }
.reg-lang-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.reg-lang-opt {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--btn-bg); cursor: pointer;
  font-size: 14px; color: var(--panel-muted);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
/* a rádió maga láthatatlan, de fókuszálható és a billentyűzettel is váltható */
.reg-lang-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.reg-lang-opt .flag {
  display: block; flex: none;
  width: 21px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px #0008;
}
.reg-lang-opt:hover { border-color: var(--accent); color: var(--panel-fg); }
.reg-lang-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-lang-opt.is-on {
  color: var(--panel-fg); font-weight: 700;
  border-color: var(--poi-near, #6d9410);
  box-shadow: inset 0 0 0 1px var(--poi-near, #6d9410);
}
.reg-lang.is-bad .reg-lang-opt { border-color: #a8402c; }
.reg-lang-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--panel-muted); }

.reg-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 8px; cursor: pointer;
  font-size: 13px; line-height: 1.45; color: var(--panel-muted);
}
.reg-consent input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  accent-color: var(--flag-mine, #5f9e35);
}
.reg-consent.is-bad { color: #a8402c; }

/* Belépés közben a gomb sem hazudik: felirata és állapota is jelzi, hogy
   várunk. A tiltás a dupla küldés ellen van — egy lassú hálózaton a türelmetlen
   második koppintás két munkamenetet nyitna. */
#login-submit[disabled], #login-cancel[disabled],
#register-submit[disabled], #register-back[disabled] { opacity: .55; cursor: default; }

/* A menü belépés-előtti állapota: a két gomb hangsúlyos, a magyarázat halk. */
#menu-login { border-color: var(--flag-mine, #5f9e35); box-shadow: inset 0 0 0 1px #5f9e3544; }
#menu-logout { margin-top: 10px; }
/* A MENÜ CÍMERE: a festett krónika-könyv középen, a gombok fölött — ugyanaz,
   ami a bal felső menügombon áll. Mögötte halvány arany dereng, és nyitáskor
   egy pillanatra „kiemelkedik" a lapból. Alacsony képernyőn kisebb, hogy a
   menüpontok a hajtás fölött maradjanak. */
.menu-art {
  position: relative;
  display: flex; justify-content: center;
  margin: 2px 0 6px;
  background: radial-gradient(closest-side, #ffd76a2e, transparent 75%);
}
/* AZ ÁRNYÉK: külön, lágy ovális folt a könyv alatt — NEM `filter:
   drop-shadow`. A szűrő az animált (nyitáskor átméretezett) képen telefonon
   (Android WebView, Safari) a kép NÉGYZETES dobozára vágódott: a könyv mögött
   szögletes, csonka árnyék állt. Egy sima színátmenetnek nincs mit levágni. */
.menu-art::after {
  content: '';
  position: absolute; left: 50%; bottom: -3px;
  width: 80px; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #00000070, #00000038 55%, transparent);
  pointer-events: none;
  animation: menu-art-arnyek .45s ease-out both;
}
.menu-art .art-ico {
  position: relative; z-index: 1;    /* az árnyék fölött */
  width: 92px; height: 92px;
  animation: menu-art-be .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes menu-art-be {
  from { transform: translateY(6px) scale(.86); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes menu-art-arnyek {
  from { opacity: 0; transform: translateX(-50%) scaleX(.7); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@media (max-height: 640px) {
  .menu-art .art-ico { width: 64px; height: 64px; }
  .menu-art::after { width: 56px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-art .art-ico, .menu-art::after { animation: none; }
}
/* „Belépve: …" — a könyv alatt, középen */
.menu-account {
  margin: 0 0 10px; font-size: 12px; color: var(--panel-muted);
  text-align: center; letter-spacing: .03em;
}

/* ---- A FŐMENÜ SZAKASZAI (app.js `fillMenu`) ------------------------------
   Fejléc (a könyv, „Belépve:", a rang és a szint), aztán a JÁTÉK csempéi két
   oszlopban, festett képpel, majd a FIÓK ÉS BEÁLLÍTÁSOK és a SÚGÓ sorai
   (vonalas ikon egy sötét érmén, jobbra a nyíl), végül külön a
   kijelentkezés. Minden a #menu-body-ra szűkítve: a .menu-section a
   Beállítások lapé is. */
#menu-body .menu-section { margin-top: 6px; padding-top: 8px; }
#menu-body .menu-fej { padding-bottom: 0; }
#menu-body .menu-art { margin-bottom: 4px; }
#menu-body .menu-art .art-ico { width: 54px; height: 54px; }
#menu-body .menu-account { margin-bottom: 2px; }
#menu-body .menu-fej .menu-hint { text-align: center; margin: 0 0 4px; line-height: 1.45; }
#menu-body .menu-rangsor {
  margin: 0 0 4px; text-align: center; font-size: 15px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); letter-spacing: .03em;
}
#menu-body .menu-section-title {
  margin: 0 2px 7px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--panel-muted);
}
#menu-body .menu-racs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* a csempe: fölül a festett kép, alatta a felirat — a csempe teljes szélessége a feliraté */
#menu-body .menu-csempe {
  position: relative; width: auto; min-width: 0; margin: 0; padding: 7px 5px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; font-size: 13.5px; line-height: 1.15; text-align: center;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#menu-body .menu-csempe .menu-felirat { max-width: 100%; }
/* a hely szélesebb, mint magas: a széles képek (a piac, a térkép) is kitöltik, a négyzetesek a magasságig nőnek */
#menu-body .menu-kep { flex: none; width: 50px; height: 34px; display: flex; align-items: center; justify-content: center; }
#menu-body .menu-kep img, #menu-body .menu-kep svg {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 3px #0006);
}
#menu-body .menu-csempe:active, #menu-body .menu-sor:active { transform: scale(.97); }
#menu-body .menu-csempe #menu-msg-badge { position: absolute; top: 4px; right: 5px; margin: 0; }
/* a KÜLDETÉS csempéje a Játék szakasz élén: teljes szélességben, fekve —
   balra a tekercs, mellette a cím és a felvett küldetés állása */
#menu-body .menu-csempe.szeles {
  grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 10px;
  min-height: 48px; padding: 5px 10px; text-align: left; border-color: #5b7fd4;
}
#menu-body .menu-szeles-szoveg { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
#menu-body .menu-kuld-allas {
  font-size: 12px; color: var(--panel-muted); font-family: var(--ui-font, system-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menu-body .menu-sor {
  width: 100%; margin: 0 0 6px; padding: 3px 12px 3px 6px;
  display: flex; align-items: center; gap: 11px; text-align: left; font-size: 14px;
}
#menu-body .menu-sor .menu-felirat { flex: 1 1 auto; min-width: 0; }
/* a nyíl: a menüpont továbbvisz; a külső lapé (adatkezelés) ferdén fölfelé mutat */
#menu-body .menu-sor::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-right: 3px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); opacity: .45;
}
/* a súgó kis csempéi: három egy sorban, fölül az érme, alatta a felirat */
#menu-body .menu-racs.harom { grid-template-columns: repeat(3, 1fr); gap: 7px; }
#menu-body .menu-kis {
  position: relative; width: auto; min-width: 0; margin: 0; padding: 7px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12.5px; line-height: 1.15; text-align: center;
}
#menu-body .menu-kis .menu-sor-ikon { width: 28px; height: 28px; }
#menu-body .menu-kis .menu-sor-ikon svg { width: 17px; height: 17px; }
#menu-body .menu-kis:active { transform: scale(.97); }
/* a külső lap (adatkezelés) jele a sarokban */
#menu-body .menu-kis.kulso::after {
  content: ''; position: absolute; top: 5px; right: 6px; width: 10px; height: 10px;
  background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9L9 3M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#menu-body .menu-sor-ikon {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #f2dfa8; border: 1px solid #c9a35f99;
  background: radial-gradient(circle at 35% 30%, #4d3822, #241608);
  box-shadow: 0 1px 2px #0005;
}
#menu-body .menu-sor-ikon svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* festett kép (a Beállítások fogaskereke): korong nélkül, a kép maga a jel */
#menu-body .menu-sor-ikon.festett { width: 34px; height: 34px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#menu-body .menu-sor-ikon.festett img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px #0008); }
/* a profilé a játékos saját képe */
#menu-body .menu-sor-ikon.kepes { overflow: hidden; border: 2px solid #c9a35f; background: #241608; }
#menu-body .menu-sor-ikon.kepes img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* belépés nélkül a belépés a fő lépés */
#menu-body .menu-sor.fo { border-color: var(--flag-mine, #5f9e35); box-shadow: inset 0 0 0 1px #5f9e3544; }
/* a kijelentkezés halkan, vörösen, keskenyen: kilép a játékból */
#menu-body .menu-vege .menu-sor { color: #b0503a; padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; }
#menu-body .menu-vege .menu-sor-ikon { width: 28px; height: 28px; }
#menu-body .menu-vege .menu-sor-ikon svg { width: 16px; height: 16px; }
#menu-body .menu-vege .menu-sor-ikon {
  color: #f3c9c0; border-color: #a8402c99;
  background: radial-gradient(circle at 35% 30%, #5c2a1e, #2c120b);
}
/* a festett ajtó (a kijelentkezés): korong nélkül, kicsit nagyobban */
#menu-body .menu-vege .menu-sor-ikon.festett { width: 32px; height: 32px; background: none; }
/* nyitáskor a csempék egymás után úsznak be */
#menu:not([hidden]) #menu-body .menu-csempe { animation: menu-csempe-be .32s ease-out both; }
#menu:not([hidden]) #menu-body .menu-csempe:nth-child(2) { animation-delay: .04s; }
#menu:not([hidden]) #menu-body .menu-csempe:nth-child(3) { animation-delay: .08s; }
#menu:not([hidden]) #menu-body .menu-csempe:nth-child(4) { animation-delay: .12s; }
#menu:not([hidden]) #menu-body .menu-csempe:nth-child(5) { animation-delay: .16s; }
#menu:not([hidden]) #menu-body .menu-csempe:nth-child(6) { animation-delay: .2s; }
@keyframes menu-csempe-be { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) {
  #menu-body .menu-csempe { min-height: 60px; }
  #menu-body .menu-kep { width: 42px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  #menu:not([hidden]) #menu-body .menu-csempe { animation: none; }
}
/* Offline: a hiányzó helyszínek magyarázata. Nem hibaüzenet — állapot. */
.menu-offline {
  margin: 8px 0 0; padding: 8px 10px;
  border-radius: var(--ui-radius, 8px);
  border: 1px solid var(--border);
  background: #00000014;
  font-size: 12px; color: var(--panel-muted);
}

/* ---- Hálózati töltés-jelző ---------------------------------------------- */
/* Fent középen, a biztonságos sáv alatt. Nem takar és nem fog koppintást: a
   hálózat a háttérben dolgozik, a térképet közben tovább lehet forgatni. */
#net-busy {
  position: fixed; z-index: 40;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  pointer-events: none;
  padding: 6px;
  border-radius: 50%;
  /* Tömör alap és világos perem: a jelző bármilyen háttér fölé kerülhet (a
     térkép, egy nyitott kártya fejléce), és mindegyiken látszania kell. */
  background: #0b0906ee;
  box-shadow: 0 2px 10px #0008, inset 0 0 0 1px #ffffff22;
}
#net-busy[hidden] { display: none; }
#net-busy .loading-ring { width: 20px; height: 20px; border-width: 2px; }


/* ---- Források (Credits) ------------------------------------------------ */
.credits-intro { margin: 0 0 4px; font-size: 14px; color: var(--panel-fg); }
.credit-text { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--panel-fg); }
.credit-links { margin: 0; font-size: 13px; }
.credit-links a {
  color: var(--panel-fg); text-decoration: underline; text-underline-offset: 3px;
  margin-right: 14px; white-space: nowrap;
}
.credits-made { margin: 18px 0 0; font-size: 12px; color: var(--panel-muted); text-align: center; }