@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;
  }
}

:root {

  --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); }

#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; }

.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;

  box-shadow: 0 18px 50px #0009, 0 0 0 1px #0004;
}

.setup-art { width: 104px; height: 104px; margin: 0 auto 14px; }
.setup-art svg { width: 100%; height: 100%; display: block; }

.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; }

.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); }

.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; }

.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; }

.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; }

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; }

.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; }

#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; }

#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; }

#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); } }

#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 {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: var(--marker-size, 46px); height: var(--marker-size, 46px);

  margin-top: calc(-0.71 * var(--marker-tail, 9px));

  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
#marker[hidden] { display: none; }

#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; }
}

#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));
}

#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); }

#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;
}

#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 {
  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;
  -webkit-tap-highlight-color: transparent;
}

#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);
}

#hud #hud-compass.active { box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent); }

.art-ico { display: block; object-fit: contain; }
.notice-art .art-ico { width: 84px; height: 84px; margin: 0 auto; }

.tamadas-art {
  display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #c8402a 0%, #95200f 58%, #520d06 100%);
  box-shadow: inset 0 0 0 3px #e2a24c, inset 0 0 14px #000a, 0 3px 8px #0008;
}
.tamadas-art .jel-ico, .notice-art .tamadas-art .jel-ico {
  display: block; width: 100%; height: 100%; margin: 0; object-fit: contain;
  filter: drop-shadow(0 2px 3px #000c);
}

#hud-tamadas {
  position: relative;
  width: var(--compass-size, 46px); height: var(--compass-size, 46px); margin-bottom: 8px;
  padding: 0; border: 0; border-radius: 50%; background: none;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  animation: tamadas-jel 1.8s ease-out infinite;
}
#hud-tamadas[hidden] { display: none; }
#hud-tamadas:active { transform: scale(.96); }
#hud-tamadas .tamadas-art { box-shadow: inset 0 0 0 2px #e2a24c, inset 0 0 10px #000a, 0 2px 6px #0009; }
.tamadas-jel-ido {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  padding: 0 6px; border-radius: 9px;
  background: #2a0c07; border: 1px solid #d6563c;
  color: #ffe2d0; font-size: 10px; font-weight: 700; line-height: 15px;
  font-family: var(--ui-font, system-ui); font-variant-numeric: tabular-nums; white-space: nowrap;
}

#hud-tamadas.tobb .tamadas-jel-ido { min-width: 18px; padding: 0 5px; font-size: 12px; line-height: 16px; text-align: center; }

.tamadas-lista { display: grid; gap: 8px; }
.tamadas-lista-sor {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  text-align: left; border-radius: 8px;
  border: 1px solid #c4553f; background: color-mix(in srgb, #c4553f 10%, transparent);
}
.tamadas-lista-sor:active { filter: brightness(.95); }
.tamadas-lista-kep { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 3px #0007; }
.tamadas-lista-szoveg { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tamadas-lista-szoveg b {
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); font-size: 15px; color: var(--panel-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tamadas-lista-szoveg span { font-size: 13px; color: #a8402c; font-variant-numeric: tabular-nums; }
.tamadas-lista-nyil { flex: none; font-size: 22px; color: var(--panel-muted); }
@keyframes tamadas-jel {
  0% { box-shadow: 0 0 0 0 #e0462c99; }
  70%, 100% { box-shadow: 0 0 0 9px #e0462c00; }
}
@media (prefers-reduced-motion: reduce) { #hud-tamadas { animation: none; } }

#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); }

#eagle-btn .eagle-ico {
  width: 86%; height: 86%; object-fit: contain; display: block;
}

#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); }
}

.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;
}
.eagle-left-label { font-size: 11px; color: var(--panel-muted); }

.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; }

:root {
  --nev-h: 34px; --menu-gomb-w: 80px; --menu-gomb-h: var(--nev-h); --menu-oszlop: calc(20px + var(--menu-gomb-h));
}
#menu-button {
  position: absolute; z-index: 6;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px;
  width: auto; height: var(--menu-gomb-h); padding: 0 8px 0 4px;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--ui-radius, 8px);

  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; }

#menu-button .menu-ico {
  display: block; flex: none; width: auto; height: calc(var(--menu-gomb-h) - 10px); aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 1px 2px #0009);
}

#menu-button .menu-gomb-felirat {
  display: block; flex: none; white-space: nowrap;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--panel-fg);
}
#menu-button .menu-gomb-felirat:empty { display: none; }
#menu-button:active { transform: scale(.96); }

#mail-flag {
  position: absolute; z-index: 6;

  top: calc(var(--menu-oszlop) + 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;

  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; }

#mission-badge {
  position: absolute; z-index: 6;
  top: calc(var(--menu-oszlop) + 54px + 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(var(--menu-oszlop) + 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; } }

#tour-badge {
  position: absolute; z-index: 6;
  top: calc(var(--menu-oszlop) + 108px + 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(var(--menu-oszlop) + 54px + env(safe-area-inset-top, 0px)); }
#mail-flag[hidden] + #mission-badge[hidden] + #tour-badge { top: calc(var(--menu-oszlop) + 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); }

#tour-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

#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; } }

.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; }

#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; }

.menu-hint.kuld-megj { margin: 14px 0 0; text-align: center; }
#mail-flag:active { transform: scale(.96); }

#mail-flag img { width: 34px; height: auto; display: block; filter: drop-shadow(0 1px 2px #0009); }

@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;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mail-flag {
    animation: none;
    color: #fff1e0;
    background: #e04f31;
    border-color: #ff7a55;
  }
}

#poi-layer {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}
.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; }

.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;

  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;

  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; }

.cam-pass { touch-action: none; }

.poi-pin.near::before,
.poi-pin.near::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;

  border: 3px solid #fff;
  box-shadow: 0 0 10px var(--poi-near, #6d9410), 0 0 6px #ffffff80 inset;
  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; }
  28%  { opacity: .95; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

@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)); }
}

.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;
  }
}

@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) {

  .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); }

.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);
  }
}

.poi-pin .poi-fust { display: none; }
.poi-pin.tuz {
  width: calc(var(--poi-size, 34px) * 1.05);
  height: calc(var(--poi-size, 34px) * 1.45);
  overflow: visible;
}
.poi-pin.tuz img {
  object-fit: contain;
  transform-origin: 50% 92%;
  animation: poi-tuz-lob .9s ease-in-out infinite alternate, poi-tuz-feny 1.7s ease-in-out infinite;
}
.poi-pin.tuz.near img { animation: poi-tuz-lob .55s ease-in-out infinite alternate, poi-tuz-feny 1s ease-in-out infinite; }
@keyframes poi-tuz-lob {
  0%   { transform: scale(1, 1) skewX(0deg); }
  35%  { transform: scale(.95, 1.07) skewX(-2.5deg); }
  70%  { transform: scale(1.04, .96) skewX(2deg); }
  100% { transform: scale(.98, 1.05) skewX(-1deg); }
}
@keyframes poi-tuz-feny {
  0%, 100% { filter: drop-shadow(0 0 4px #ff8a3cb0); }
  50%      { filter: drop-shadow(0 0 11px #ffb060ee); }
}
.poi-pin.tuz .poi-fust {
  display: block; position: absolute; left: 50%; bottom: 60%;
  width: 46%; height: 32%; margin-left: -23%; border-radius: 50%;
  background: radial-gradient(circle, rgba(88,82,78,.8) 0%, rgba(88,82,78,.35) 45%, rgba(88,82,78,0) 72%);
  pointer-events: none; opacity: 0;
  animation: poi-tuz-fust 2.6s linear infinite;
}
.poi-pin.tuz .poi-fust:nth-of-type(2) { animation-delay: .87s; }
.poi-pin.tuz .poi-fust:nth-of-type(3) { animation-delay: 1.73s; }
@keyframes poi-tuz-fust {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translate(40%, -270%) scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .poi-pin.tuz img, .poi-pin.tuz.near img { animation: none; filter: drop-shadow(0 0 6px #ff8a3cc0); }
  .poi-pin.tuz .poi-fust { animation: none; opacity: .45; transform: translateY(-130%) scale(1.5); }
  .poi-pin.tuz .poi-fust:nth-of-type(n+2) { display: none; }
}

#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, #ask-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], #ask-popup[hidden] { display: none; }

#geo-popup { z-index: 30; }

#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; }
#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; }

.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); }

.link-btn[hidden] { display: none; }

.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; }

.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; }

.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; }

.verify-note { margin: 0 0 8px; font-size: 13px; color: var(--panel-muted); }
.verify-note strong { color: var(--panel-fg); }

@keyframes veil-in {
  from { background-color: #0000; }
  to   { background-color: #0006; }
}

@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);
}

@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;
}

@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; }
}

.menu-card > .parazs-vaszon {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  border-radius: inherit;
}

.menu-card {
  width: 100%; max-width: 380px; max-height: 100%;
  display: flex; flex-direction: column;

  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,

#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;
  -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-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;
}

#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; }

#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;
}

#poi-cover-img {

  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;

  object-fit: cover; object-position: center 58%;
}

#poi-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0000 62%, #0008 100%);
  pointer-events: none;
}

#poi-cover.ostromolt::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, #7a0e08a8 0%, #7a0e082e 42%, #0000 64%),
    radial-gradient(ellipse at 50% 55%, #0000 52%, #8c140a8c 100%);
  box-shadow: inset 0 0 0 2px #d63a26d9, inset 0 0 30px #d63a26a6;
  pointer-events: none;
  animation: ostrom-dereng 2.4s ease-in-out infinite;
}
@keyframes ostrom-dereng { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
#poi-ostrom {
  position: absolute; left: 50%; top: 12px; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 58%; max-width: calc(100% - 24px);
  padding: 7px 16px 7px;
  background: linear-gradient(180deg, #3d0d08eb, #1e0806eb);
  border: 1px solid #d6563c;
  border-radius: 6px;
  box-shadow: 0 2px 10px #000a, 0 0 18px #d63a2673;
  color: #f6e7d8; text-align: center;
  pointer-events: none;
}
#poi-ostrom[hidden] { display: none; }
.poi-ostrom-kard {
  display: block; width: 30px; height: 30px; margin-bottom: 1px;
  background: var(--kardok) center / contain no-repeat;
  filter: drop-shadow(0 0 4px #e8462ecc) drop-shadow(0 1px 1px #000c);
}
#poi-ostrom strong {
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 17px; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase;
  color: #ffd9c8; text-shadow: 0 1px 2px #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
#poi-ostrom-ido {
  font-size: 14px; line-height: 1.25; color: #f1d3c2;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { #poi-cover.ostromolt::before { animation: none; opacity: 1; } }

#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; }

#poi-story-text {
  flex: 1 1 auto; min-width: 0;

  overflow-y: auto; overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px 16px;
  cursor: default;
}
#poi-story-text::-webkit-scrollbar { display: none; }

#poi-story.scrolls #poi-story-text { padding-right: 24px; }

#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);
}

.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; }
}

#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;
}

#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;
}

.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;
}

#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;
}

#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);
}

#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 {

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

#poi-body:empty { display: none; }
#poi-body > :first-child { margin-top: 0; }
#poi-actions { flex: 0 0 auto; padding: 14px 16px 16px; }

#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;

  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); }

#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));

  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); }

#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); }

#poi-tobbi { margin-top: 12px; padding-top: 2px; border-top: 1px solid #8a6a3a8c; }
#poi-tobbi:not(:has(> :not([hidden]))) { display: none; }

#poi-popup.ostromolt #poi-tobbi > .poi-reward { display: none; }
#poi-popup.ostromolt #poi-tobbi:not(:has(> :not([hidden]):not(.poi-reward))) { display: none; }
#poi-tobbi > .poi-reward, #poi-tobbi > #poi-heal, #poi-tobbi > #poi-demo-walk { margin-top: 10px; }

.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; }

.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; }

.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; }

.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; }

.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;
}

.lang-pick li button[aria-current="true"] {
  color: var(--panel-fg); font-weight: 700;
  border-color: var(--poi-near, #6d9410);
}

#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); }

.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; }

.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;
}

.szerk-ico { width: 18px; height: 18px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }

.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.profile-avatar-slot {
  position: relative; display: block;
  width: 56px; height: 56px; border-radius: 50%;
}
.profile-avatar-slot.is-busy .profile-avatar { visibility: hidden; }

.profile-avatar-slot .loading-layer { background: none; border-radius: 50%; }

.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;
}

.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; }

.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; }

.msg-row.remote { opacity: .72; }

#notice-popup {
  z-index: 22;
  align-items: center;
}
#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; }

.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; }

.notice-art .notice-item {
  width: 100%; height: 100%; display: block; object-fit: contain;
}

.notice-art .jel-ico, .setup-art .jel-ico { width: 100%; height: 100%; margin: 0; }

.setup-art .jel-ico { filter: drop-shadow(0 4px 10px #0008); }

#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));
}

#notice-lines .riddle-legend-row { justify-content: center; }

#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));
}

#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; }

#ask-popup { z-index: 22; align-items: center; }

#ask-art .jel-ico { object-fit: contain; }
#ask-popup .menu-card {
  max-width: 320px; text-align: center; padding: 18px 18px 16px;
  border: 2px solid var(--card-gold, #b9a05e);
}
#ask-title {
  display: block; font-size: 19px; line-height: 1.25;
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); color: var(--panel-fg);
}
#ask-lines p {
  margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--panel-muted);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.ask-gombok { display: flex; gap: 10px; margin-top: 16px; }
.ask-gombok button {
  flex: 1 1 0; padding: 11px; font-size: 15px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#ask-yes {
  color: #f2f8e2; border: 1px solid var(--poi-near, #6d9410); text-shadow: 0 1px 1px #0006;
  background: linear-gradient(180deg, var(--poi-near, #6d9410), #4a6a0b);
}
#ask-yes.attack { color: #ffe9e2; border-color: #d9694f; background: linear-gradient(180deg, #a8402c, #7d2a1c); }
#ask-yes:active, #ask-no:active { filter: brightness(.92); }

#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;
}

#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;
}

.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;
}

.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; }

.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; }

.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; }
}

.levels-now { text-align: center; margin-bottom: 14px; }

.levels-arc {
  width: 88px; height: 88px; margin: 2px auto 8px;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #3a2f1e, #1d160d);
  border: 2px solid var(--card-gold, #b9a05e);
  box-shadow: 0 0 0 3px #b9a05e33, 0 2px 8px #0006;
}
.levels-arc img { width: 100%; height: 100%; display: block; object-fit: cover; }
.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));
}

.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;

  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; }

.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;
}

.levels-table .lv-ico img,
.levels-table tr.rank-sep span.sep-coin img { width: 100%; height: 100%; display: block; object-fit: cover; }

.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); }

.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;
}

.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; }

#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-wrap { position: relative; min-height: 220px; }

.avatar-wrap.is-busy .avatar-grid { visibility: hidden; }

.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%;

  border: 3px solid #00000022;
  transition: transform .12s ease;
}
.avatar-cell:active img { transform: scale(.94); }

.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;
}

.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; }

.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; }

#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;
}

#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); }

#place-box {
  position: absolute; z-index: 5;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc((100% + var(--menu-gomb-w) - var(--compass-size, 46px)) / 2); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
}
#place-name {

  max-width: calc(100vw - 40px - var(--menu-gomb-w) - var(--compass-size, 46px)); 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));

  line-height: 1.25; white-space: normal; overflow-wrap: break-word; text-wrap: balance;
}
#place-name[hidden] { display: none; }

#net-note, #gps-note {
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 40px - var(--menu-gomb-w) - var(--compass-size, 46px)); 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; }
#gps-note::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: #e2a93b;
}
#gps-note[hidden] { display: none; }

#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; }

#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; } }

#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);
}

#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; }

.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-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; }

.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; }

.battle-stage {
  display: flex; align-items: center; justify-content: center;

  position: relative;

  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;
}

.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; }

.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);
}

.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); } }

@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; } }
}

#poi-cover.is-busy img { visibility: hidden; }

* {
  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; }

.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;
}

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

.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); }

.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; }

.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; }

.hp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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; }

.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; }

.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; }
}

.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; } }

.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); }
}

.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); }
}

.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); }
}

@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; } }

.battle-log { min-height: 30px; margin: 2px 0 8px; font-size: 12px; line-height: 1.4; }
.battle-log[hidden] { display: none; }

.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; }

.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; } }

.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;
}

.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; } }

.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%; }

.chase-cross.on { color: #ffe3a0; }

.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; }

.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%); }
}

.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); }
}

.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; }
}

.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;
}

.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; }

.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);
}

.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)); }

.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; }

.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;
}

.dice-stage.dice-nostage { min-height: 60px; }

.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));
}

.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;
}

#poi-popup:not(.fighting) .maze-stage:not(.maze-nostage):not(.maze-map-nagy) .maze-map { width: 78px; height: 78px; }

.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; }

.poi-reward-btn.labirintus-gomb { justify-content: center; text-align: center; }

.poi-reward-btn.remote { color: #eaf4ff; border-color: #3d7fb5; background: linear-gradient(180deg, #3d7fb5, #204c73); }

.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;
}

.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); }

.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; }

.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; }

.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;
}

.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;
}

.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; }

.ff-darab, .ff-ido { font-variant-numeric: tabular-nums; }
.ff-ido.fogy { color: #e0602a; }
.ff-stage { touch-action: none; cursor: crosshair; }
.ff-gomb[hidden] { display: none; }

.konyv-helyen, .konyv-csere, .konyv-ido { font-variant-numeric: tabular-nums; }
.konyv-ido.fogy { color: #e0602a; }
.konyv-stage { touch-action: none; cursor: pointer; }
.konyv-stage .battle-count {
  align-items: flex-start; padding: 4% 12px 0; text-align: center;
  font-size: clamp(22px, 6.5vmin, 40px); line-height: 1.1;
}
.konyv-gomb[hidden] { display: none; }

.tuzor-jelzett, .tuzor-hamis, .tuzor-ido { font-variant-numeric: tabular-nums; }
.tuzor-hamis.van { color: #e0a02a; }
.tuzor-ido.fogy { color: #e0602a; }
.tuzor-stage { touch-action: none; cursor: grab; }
.tuzor-stage:active { cursor: grabbing; }
.tuzor-stage .battle-count {
  align-items: flex-start; padding: 2% 12px 0; text-align: center;
  font-size: clamp(20px, 5.5vmin, 34px); line-height: 1.1;
}
.tuzor-gomb[hidden] { display: none; }

.fk-tanu, .fk-jo, .fk-ido { font-variant-numeric: tabular-nums; }
.fk-ido.fogy { color: #e0602a; }
.fk-stage { touch-action: manipulation; }
.fk-jegyzet {
  position: absolute; z-index: 2; top: 2%; left: 5%; right: 5%; max-height: 24%; overflow: hidden;
  margin: 0; padding: 8px 12px; border-radius: 3px; transform: rotate(-0.8deg);
  background: linear-gradient(180deg, #f4ecd4, #e6d8b4); color: #2c2016;
  box-shadow: 0 3px 10px rgba(0,0,0,.45); font-family: Georgia, "Times New Roman", serif;
}
.fk-jegyzet[hidden] { display: none; }
.fk-jegyzet-cim { margin: 0 0 4px; font-weight: 700; font-size: clamp(12px, 3.4vmin, 16px); color: #6a4420; }
.fk-jegyzet-szoveg { margin: 0; font-size: clamp(14px, 4vmin, 19px); line-height: 1.3; }
.fk-jegyzet.emlek .fk-jegyzet-szoveg { font-style: italic; color: #6a5a48; }
.fk-stage .battle-count {
  align-items: flex-end; padding: 0 12px 4%; text-align: center;
  font-size: clamp(20px, 5.5vmin, 34px); line-height: 1.1;

  text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 3px #000, 0 0 14px rgba(0,0,0,.8);
}
.fk-sorok { display: grid; gap: 6px; margin: 0 0 8px; }
.fk-sorok[hidden], .fk-sor[hidden] { display: none; }
.fk-sor { display: flex; align-items: center; gap: 8px; }
.fk-sor .fk-nyil { flex: 0 0 64px; padding: 10px 0; }
.fk-nev { flex: 1 1 auto; text-align: center; font-weight: 700; letter-spacing: .03em; color: var(--card-gold, #e2bf86); }
.fk-sor.jo .fk-nev { color: #8fd68f; }
.fk-sor.rossz .fk-nev { color: #f0907e; }
.fk-gomb[hidden] { display: none; }
#poi-popup.fighting .fk-sorok { flex: 0 0 auto; }

.olt-ki, .olt-ido { font-variant-numeric: tabular-nums; }
.olt-ido.fogy { color: #e0602a; }
.olt-stage { touch-action: none; cursor: crosshair; }
.olt-stage .battle-count {

  align-items: flex-start; padding: calc(min(18vmin, 120px) + 4%) 12px 0; text-align: center;
  font-size: clamp(20px, 5.5vmin, 34px); line-height: 1.1;
}
.olt-pumpa { padding: 20px 6px; font-size: 20px; }
.olt-pumpa.kell { box-shadow: 0 0 0 2px #c9a35f, 0 0 12px #ffb04a88; }
.olt-pumpa.nyom { animation: olt-nyom .16s ease-out; }
@keyframes olt-nyom { 0% { transform: translateY(3px) scale(.98); } 100% { transform: none; } }
.olt-gomb[hidden] { display: none; }

.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.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; }

.szef-kod { font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--card-gold, #e2bf86); }

.szef-kod i { font-style: normal; color: #e08a72; }
.szef-ido { font-variant-numeric: tabular-nums; }
.szef-ido.fogy { color: #e0602a; }
.szef-stage { touch-action: none; cursor: grab; }
.szef-szam {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2;
  padding: 2px 14px; border-radius: 10px; border: 1px solid #c9a35f99; background: #000000aa;
  color: #ffe3a0; font-size: clamp(22px, 6vmin, 34px); font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.szef-key.szef-rogzit { flex: 2 1 0; }

.szef-stage .battle-count {
  align-items: flex-start; padding: 6% 12px 0; text-align: center;
  font-size: clamp(22px, 6.5vmin, 38px); line-height: 1.1;
}

.cup-kor, .cup-talalat { font-variant-numeric: tabular-nums; }
.cup-stage { touch-action: none; }
.cup-stage .battle-count {
  align-items: flex-start; padding: 8% 12px 0; text-align: center;
  font-size: clamp(24px, 7vmin, 42px); line-height: 1.1;
}
.cup-gomb:disabled { opacity: .6; }
#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,
#poi-popup.fighting .alk-hud,
#poi-popup.fighting .alk-erett { flex: 0 0 auto; }

.alk-nev { font-size: 17px; letter-spacing: .04em; color: var(--card-gold, #e2bf86); }
.alk-erett { margin: 0 0 8px; height: 8px; }
.alk-erett > i { transition: width .25s ease, background .4s ease; }
.alk-stage { touch-action: none; }
.alk-stage .battle-count {
  align-items: flex-start; padding: 6% 12px 0; text-align: center;
  font-size: clamp(26px, 8vmin, 46px); line-height: 1.1;
}
.alk-keys[hidden] { display: none; }

.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; }

.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;
}

.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; }

.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%)); }
}

.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; }
}

.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; }

.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; }
}

.target-stage.target-lost .battle-canvas,
.target-stage.target-lost .target-fallback { filter: grayscale(.55) brightness(.72); }

.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; }

.battle-count {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;

  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));

  text-shadow: 0 2px 10px #000000cc, 0 0 26px #00000099;
  pointer-events: none;
}
.battle-count[hidden] { display: none; }

.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; }
}

#poi-popup.fighting,
#poi-popup.exploring {
  padding: 0;
  background: #0b0906;
}
#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;
}

#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;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px
           calc(12px + env(safe-area-inset-bottom, 0px));
}

#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; }

#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; }

#poi-popup.exploring .forage-stage { max-width: 720px; align-self: center; width: 100%; }

.poi-desc { margin: 0; font-size: 19px; line-height: 1.5; color: var(--panel-fg); }

.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); }

.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));

  color: #f3e7cc; background: #12100ad9;
  border: 1px solid #ffffff47;
  text-shadow: 0 1px 2px #000a;
  pointer-events: none;
}
.marker-name[hidden] { display: none; }

.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); }

#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;

  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;

  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);

  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);

  box-shadow: inset 0 1px 2px #0007;
}
.elixir-bar > i {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;

  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); }

.quest-item.spent { opacity: .55; cursor: default; }
.quest-item-note { font-size: 12px; color: var(--panel-muted); line-height: 1.4; text-align: center; }

.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));
}

#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;
}

.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;
}

.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-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; }

.quiz-timer.mmss .quiz-timer-num { font-size: 15px; letter-spacing: 0; }

.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; }

.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; }

.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; }

.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;
}

.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));
}

.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; }

.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;
}

.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); }

.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; }

.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));
}

#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;

  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));
}

#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;
}

#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; } }

#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; }

.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;
}

#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); }
}

.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; }
}

#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); }
}

.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; } }

.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); }
}

.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; }
}

.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;
}

.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;
}

.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;
}

#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;
}

.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));
}

.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; }

#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; }

#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);
}

.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; }

.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));
}

.mk-ico { width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }

.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; }

.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; }

.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; font-weight: 600;
  color: color-mix(in srgb, var(--card-gold, #b9a05e) 38%, var(--panel-fg));
  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; }

.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);
}

.poi-guard {
  display: flex; align-items: center; gap: 6px;

  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; }

#poi-quests.guard, #poi-quests.attack {
  background: linear-gradient(180deg, #a8402c, #7d2a1c);
  border-color: #d9694f;
  color: #ffe9e2;
}

.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); }

.guard-zar { margin: 6px 0 0; color: #a8402c; }
.guard-piac {
  display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid #241a0f; color: #fff; cursor: pointer;
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); font-size: 13px; letter-spacing: .04em;
  background: linear-gradient(180deg, #5b4429 0%, var(--card-head-bg, #3a2a18) 55%, #2a1d10 100%);
  box-shadow: inset 0 1px 0 #ffffff3d, inset 0 -1px 0 #00000055, 0 2px 0 #241a0f, 0 3px 8px #00000055;
}
.guard-piac:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff24, 0 1px 0 #241a0f; }

.tamadas-var { text-align: center; padding: 0 4px 4px; }

.tamadas-borito {
  position: relative; margin: -16px -20px 14px;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  background: #0d0a06;
}
.tamadas-borito img {
  display: block; width: 100%;
  height: clamp(200px, 38vh, 330px);
  object-fit: cover; object-position: center 55%;
}
.tamadas-borito::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0000 38%, #0d0604b3 82%, #0d0604e6 100%);
}
.tamadas-ora {
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 46px; font-weight: 700; letter-spacing: .06em; line-height: 1.1;
  color: #a8402c; font-variant-numeric: tabular-nums;
}
.tamadas-borito .tamadas-ora {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1;
  font-size: 60px;
  color: #ffe8d8;
  text-shadow: 0 0 16px #e0462c, 0 0 32px #b0281499, 0 2px 4px #000;
}
.tamadas-szoveg { margin: 10px 0 16px; font-size: 14px; line-height: 1.5; color: var(--panel-fg); }
.tamadas-felad {
  padding: 8px 18px; border-radius: 8px; font-size: 13px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}

.erosites-hely {
  margin: 0 0 4px; font-size: 15px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.erosites-ora { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #a8402c; font-variant-numeric: tabular-nums; }

.lakt-borito {
  position: relative; margin: -16px -16px 14px;
  border-bottom: 1px solid var(--card-gold, #b9a05e);
  background: #0d0a06;
}
.lakt-borito img {
  display: block; width: 100%;
  height: clamp(150px, 26vh, 240px);
  object-fit: cover; object-position: center 62%;
}
.lakt-borito::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0000 62%, #0007 100%);
}
.lakt-leiras { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--panel-fg); }
.lakt-fej {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--panel-fg) 5%, transparent);
}
.lakt-kep { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 4px #0007); }
.lakt-lab {
  position: sticky; bottom: -16px; z-index: 2;
  margin: 16px -16px -16px; padding: 12px 16px 16px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
}
.lakt-szamok { flex: 1 1 auto; min-width: 0; }
.lakt-szam {
  margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.lakt-sor { margin: 0 0 3px; font-size: 13px; line-height: 1.4; color: var(--panel-fg); }
.lakt-sor.menu-hint { font-size: 12px; color: var(--panel-muted); }
.lakt-piac {
  display: block; width: 100%; margin: 0; padding: 11px;
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #fff6df; text-shadow: 0 1px 1px #0007;
  border: 1px solid #7a5a1c;
  background: linear-gradient(180deg, #c9a24a, #94701f);
}
.lakt-piac:active { filter: brightness(.92); }
.lakt-orseg { padding: 9px 0; border-top: 1px solid var(--border); }
.chron-h + .lakt-orseg { border-top: none; padding-top: 4px; }
.lakt-orseg-cim { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lakt-orseg-nev {
  min-width: 0; font-size: 14px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.lakt-orseg-n { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #a8402c; }
.lakt-orseg-sisak { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }
.lakt-orseg-gombok { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.lakt-elbocsat { margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.lakt-elbocsat-cim {
  display: block; margin-bottom: 8px; font-size: 14px; color: var(--panel-fg);
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.lakt-elbocsat-sor { display: flex; align-items: center; gap: 8px; }
.lakt-lepes { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; }
.lakt-lepes:disabled { opacity: .4; }
.lakt-elbocsat-n {
  min-width: 28px; 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));
}
.lakt-elbocsat-gomb {
  flex: 1 1 auto; padding: 9px 12px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  color: #fff3ea; text-shadow: 0 1px 1px #0007;
  border: 1px solid #7c2a1c; background: linear-gradient(180deg, #b4452f, #7f2a1b);
}
.lakt-elbocsat-gomb:active { filter: brightness(.92); }
.lakt-elbocsat-tipp { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
#profile-body .lakt-elbocsat-tipp { margin-top: 8px; }
.lakt-menesszt { color: #8d2f1f; }
.lakt-orseg-gombok button {
  padding: 5px 11px; border-radius: 8px; font-size: 12px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
.lakt-zar { margin: 4px 0 0; font-size: 11px; color: #a8402c; }
.lakt-szabaly { margin-top: 12px; font-size: 12px; line-height: 1.45; }

#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.mine.ostromolt { background: linear-gradient(180deg, #5c1a10, #2c0d08); }
#poi-claim.theirs { background: linear-gradient(180deg, #4a1f17, #2a1510); }
#poi-claim .claim-who { flex: 1 1 auto; min-width: 0; }

#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);
}

#poi-claim .claim-flag { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 20px; height: 20px; }

.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); }

.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; }

#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;
}

.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);
}

.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); }

.poi-flag {
  display: none;
  position: absolute; left: 50%; bottom: 100%;
  width: 16px; height: 16px;
  transform: translateX(-7px);
  pointer-events: none;

  z-index: 1;
}
.poi-pin.owned .poi-flag, .poi-pin.mine .poi-flag { display: block; }

.zaszlo-jel {
  position: relative; display: block;
  width: 16px; height: 16px;
  transform: scale(1.25); transform-origin: 50% 100%;
}
.poi-flag::before, .zaszlo-jel::before {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 2px; height: 11px;
  background: #4a3520;
  border-radius: 1px;
}
.poi-flag::after, .zaszlo-jel::after {
  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);
}

.poi-pin.mine .poi-flag::after, .zaszlo-jel.mine::after { background: var(--flag-mine, #5f9e35); }
.zaszlo-jel.free::after { background: var(--flag-free, #9aa0a6); }

.zaszlo-jel.kard {
  width: 18px; height: 18px; transform: scale(1.15);
  background: var(--kardok) center / contain no-repeat;
  filter: drop-shadow(0 0 3px #e8462ecc) drop-shadow(0 1px 1px #0009);
}
.zaszlo-jel.kard::before, .zaszlo-jel.kard::after { display: none; }

.poi-pin.siege .poi-flag {
  display: block;
  width: 22px; height: 22px;
  transform: translateX(-50%);
  background: var(--kardok) 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; }

.poi-orseg {
  display: none;
  position: absolute; right: -8px; bottom: -5px; z-index: 2;
  height: 19px; min-width: 19px; padding: 0 6px 0 19px;
  border-radius: 10px;
  background: #241a0f url("icons/mercenary.webp") 2px 50% / 16px 16px no-repeat;
  border: 1px solid var(--card-gold, #b9a05e);
  box-shadow: 0 1px 2px #0009;
  color: #f3e4c1; font-size: 11px; font-weight: 700; line-height: 17px;
  font-family: var(--ui-font, system-ui); font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.poi-pin.orseg .poi-orseg { display: block; }

:root { --kardok: 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"); }

.poi-pin.ostromolt .poi-flag {
  display: block;
  width: 24px; height: 24px;
  transform: translateX(-50%);
  background: var(--kardok) center / contain no-repeat;
  filter: drop-shadow(0 0 3px #e8462ef2) drop-shadow(0 1px 1px #0009);
  animation: ostrom-kard 1.6s ease-in-out infinite;
}
.poi-pin.ostromolt .poi-flag::before, .poi-pin.ostromolt .poi-flag::after { display: none; }
@keyframes ostrom-kard {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .poi-pin.ostromolt .poi-flag { animation: none; } }

.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; }

.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;
}

.chron-more {
  display: flex; align-items: center; gap: var(--chron-gap);
  width: 100%; margin: 0 0 4px;

  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; }

.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; }
}

.chron-more.filled .chron-ico { filter: drop-shadow(0 1px 2px #0007); }

.kat-bevezeto { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: var(--panel-fg); }
.kat-sor {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.chron-h + .kat-sor { border-top: none; padding-top: 4px; }
.kat-kep {
  flex: 0 0 72px; width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; border: 2px solid var(--card-gold, #b9a05e);
  box-shadow: 0 2px 6px #0006;
}
.kat-test { flex: 1 1 auto; min-width: 0; }
.kat-cim {
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
  font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--panel-fg);
}
.kat-helyek { margin-top: 2px; font-size: 11px; color: var(--panel-muted); }
.kat-szoveg { margin: 5px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--panel-fg); }
.kat-cimkek { display: flex; flex-wrap: wrap; gap: 4px; }
.kat-cimke {
  padding: 2px 7px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--btn-bg, #0000001a); color: var(--panel-fg);
  font-size: 10.5px; line-height: 1.4;
}
.kat-mutasd {
  margin-top: 8px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #241a0f; color: #fff; cursor: pointer;
  font-family: var(--ui-font-display, var(--ui-font, system-ui)); font-size: 12px;
  background: linear-gradient(180deg, #5b4429 0%, var(--card-head-bg, #3a2a18) 55%, #2a1d10 100%);
  box-shadow: inset 0 1px 0 #ffffff3d, inset 0 -1px 0 #00000055, 0 2px 0 #241a0f, 0 3px 8px #00000055;
}
.kat-mutasd:hover { filter: brightness(1.1); }
.kat-mutasd:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff24, 0 1px 0 #241a0f; }
.kat-messze { margin: 6px 0 0; font-size: 11px; color: var(--panel-muted); }

.chron-owned { margin-top: 10px; }
.chron-owned .msg-row {
  align-items: center; gap: var(--chron-gap);
  padding-left: var(--chron-inset);

  border-left: 0;
}
.chron-since { font-size: 11px; color: var(--panel-muted); }

.chron-ico { width: 22px; height: 22px; flex: none; display: block; }

.chron-types tr.todo { opacity: .55; }

.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; }

.bag-ico { width: 30px; height: 30px; flex: none; display: block; }

.bag-table tr.todo { opacity: .72; }
.bag-table tr.have td.bag-n { color: var(--card-gold, #b9a05e); font-weight: 700; }

.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); }

.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); }

.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); }

.poi-reward {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0;
}
.poi-reward > span {
  font-size: 15px; line-height: 1.4;

  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));
}

.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); }

.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));
}

.poi-pin.kesz img { filter: grayscale(.7) brightness(.85); opacity: .6; }

.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;

  container-type: size;
  border: 1px solid var(--card-gold, #b9a05e);
  border-radius: var(--ui-radius, 8px);

  background: radial-gradient(120% 120% at 50% 56%, #18240f 0%, #0a0e06 72%);
}

.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));
}

.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; }

.hl-trace {
  fill: none; stroke: #5e8f0c; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.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; }
}

.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); }
}

.hl-ekg.flat { opacity: .18; }
.hl-ekg.flat .hl-pulse { animation-duration: 6s; }
.hl-heart.calm { animation-duration: 5s; opacity: .08; }

.hl-caption { font-variant-numeric: tabular-nums; }

.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; }
}

.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;

  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%);

  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; }

.fo-radar.dim { opacity: .16; }

.fo-radar.off { opacity: .1; filter: grayscale(1); }

.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));
}

.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; }
}

.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); } }

.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; }
}

.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;
}

.fo-find[hidden] { display: none; }

.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;
}

.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;
  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;
}

.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; }
}

.fo-find.end { gap: 14px; }

.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;
}

.fo-end-ico .sack-body { fill: #241a0f; }
.fo-end-ico .sack-neck { fill: #241a0f; }

.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;
}

.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; }
}

.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; }
}

.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);

  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; }

.fo-caption.away { opacity: 0; }

.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; }
}

.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) {

  .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; }
}

.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));
}

#login-popup, #register-popup { z-index: 21; }
#login-popup .menu-card, #register-popup .menu-card { max-width: 380px; }

#login-email, #login-pass {

  font-family: var(--ui-font, system-ui);
  font-size: 16px;
  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; }

.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;
  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; }

.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; }

#register-popup label.menu-hint[hidden] { display: none; }

#reset-pass, #reset-pass2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#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; }

#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; }

.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; }

.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;
}

.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; }

#login-submit[disabled], #login-cancel[disabled],
#register-submit[disabled], #register-back[disabled] { opacity: .55; cursor: default; }

#menu-login { border-color: var(--flag-mine, #5f9e35); box-shadow: inset 0 0 0 1px #5f9e3544; }
#menu-logout { margin-top: 10px; }

.menu-art {
  position: relative;
  display: flex; justify-content: center;
  margin: 2px 0 6px;
  background: radial-gradient(closest-side, #ffd76a2e, transparent 75%);
}

.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;
  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; }
}

.menu-account {
  margin: 0 0 10px; font-size: 12px; color: var(--panel-muted);
  text-align: center; letter-spacing: .03em;
}

#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-profilkep {
  position: relative; z-index: 1; display: block; flex: none; width: auto; margin: 0 auto; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#menu-body .menu-profilkep .art-ico {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; background: #241608;
  box-shadow: 0 0 0 2px #c9a35f, 0 3px 8px #0009;
}
#menu-body .menu-profilkep:hover .art-ico, #menu-body .menu-profilkep:focus-visible .art-ico {
  box-shadow: 0 0 0 2px #f0cf7a, 0 0 12px #ffd76a66, 0 3px 8px #0009;
}
#menu-body .menu-profilkep:active { transform: scale(.95); }
#menu-body .menu-art-profil { margin-bottom: 9px; }
#menu-body .menu-art-profil::after { width: 64px; bottom: -6px; }
#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; }

#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%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

#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; }

#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: 13.5px;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#menu-body .menu-sor .menu-felirat { flex: 1 1 auto; min-width: 0; }

#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;
}

#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: 13.5px; line-height: 1.15; text-align: center;
  font-family: var(--ui-font-display, var(--ui-font, system-ui));
}
#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); }

#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;
}

#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); }

#menu-body .menu-sor.fo { border-color: var(--flag-mine, #5f9e35); box-shadow: inset 0 0 0 1px #5f9e3544; }

#menu-body .menu-vege .menu-sor { 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);
}

#menu-body .menu-vege .menu-sor-ikon.festett { width: 32px; height: 32px; background: none; }

#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; }
}

.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);
}

#net-busy {
  position: fixed; z-index: 40;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc((100% + var(--menu-gomb-w) - var(--compass-size, 46px)) / 2); transform: translateX(-50%);
  pointer-events: none;
  padding: 6px;
  border-radius: 50%;

  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; }

.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; }