/* Hearthlands – középkori hangulatú UI (pergamen / fa panelek) */
:root {
  --parch: #e9dbb4;
  --parch-dark: #cdb98a;
  --wood: #4a3320;
  --wood-light: #6e4d2e;
  --wood-dark: #2b1b0e;
  --gold: #d9a93a;
  --ink: #2b1e12;
  --red: #b8382a;
  --green: #5c8a3a;
  --ui-scale: 1;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1d2418; color: var(--ink); user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: default; }
#ui { position: fixed; inset: 0; pointer-events: none; zoom: var(--ui-scale); }
#ui > * { pointer-events: auto; }
#ui > #toasts, #ui > #tooltip, #ui > #devpanel, #ui > #objectives { pointer-events: none; }

.panel {
  background: linear-gradient(180deg, #6e4d2e 0%, #4a3320 100%);
  border: 2px solid var(--wood-dark);
  box-shadow: 0 2px 0 rgba(255, 220, 150, 0.18) inset, 0 4px 10px rgba(0, 0, 0, 0.45);
  color: #f3e6c4;
  border-radius: 6px;
}
.parch {
  background: linear-gradient(180deg, #efe2bc, #dcc994);
  border: 2px solid var(--wood-dark);
  box-shadow: 0 0 0 2px #a3875a inset, 0 4px 10px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  border-radius: 6px;
}
/* --- textúrák (a skin.js generálja; hiányukban a színátmenetek maradnak) --- */
.skinned .panel { background: linear-gradient(180deg, rgba(110, 77, 46, 0.55), rgba(50, 33, 18, 0.78)), var(--tex-wood); background-size: auto, 256px 96px; }
.skinned .parch { background: linear-gradient(180deg, rgba(255, 248, 220, 0.18), rgba(190, 150, 80, 0.14)), var(--tex-parch); background-size: auto, 192px 192px; }
.skinned #hud { background: linear-gradient(180deg, rgba(20, 12, 4, 0.55), rgba(40, 26, 12, 0.35)), var(--tex-wood-dark); background-size: auto, 256px 96px; border-bottom: 3px solid #1d1209; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 215, 140, 0.18) inset; }
.skinned .card { background: linear-gradient(180deg, rgba(255, 248, 220, 0.16), rgba(190, 150, 80, 0.12)), var(--tex-parch); background-size: auto, 192px 192px; }
.skinned .toast { background-image: var(--tex-parch); background-size: 192px 192px; }
.skinned .framed { border: 9px solid transparent; border-image: var(--frame-parch) 11 / 9px stretch; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); border-radius: 0; }
.skinned #minimap-wrap { background: var(--tex-wood); background-size: 256px 96px; border: 6px solid transparent; border-image: var(--frame-wood) 11 / 6px stretch; padding: 3px; }
.eico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; image-rendering: auto; margin: 0 1px; }
.card .ico .eico, .card img.bico { width: 38px; height: 38px; vertical-align: middle; }
.pico .eico, .pico img.bico { width: 38px; height: 38px; }
#hud .eico { width: 21px; height: 21px; vertical-align: -6px; filter: drop-shadow(0 0 1px rgba(255, 238, 200, 0.95)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
#hud .speed .eico { width: 18px; height: 18px; vertical-align: -4px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
button .eico { width: 1.25em; height: 1.25em; }
button { font: inherit; cursor: pointer; }
.btn {
  background: linear-gradient(180deg, #8a6338, #5e4125);
  color: #f9edcb; border: 2px solid var(--wood-dark); border-radius: 5px; padding: 4px 12px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 230, 170, 0.35) inset;
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #a0753f, #6e4d2e); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.big { padding: 10px 28px; font-size: 20px; min-width: 240px; }

/* HUD */
#hud {
  position: absolute; left: 0; right: 0; top: 0; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  background: linear-gradient(180deg, rgba(43, 27, 14, 0.96), rgba(74, 51, 32, 0.92));
  border-bottom: 2px solid var(--wood-dark); color: #f3e6c4; font-size: 14px; min-height: 36px;
}
#hud .grp { display: flex; gap: 10px; align-items: center; }
#hud #hud-res { flex-wrap: wrap; gap: 3px 8px; max-width: 100%; }
#hud .res { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); white-space: nowrap; cursor: default; transition: background 0.3s; }
#hud .res.up { background: rgba(110, 190, 80, 0.55); }
#hud .res.down { background: rgba(220, 120, 60, 0.55); }
#hud .res.full { background: rgba(200, 50, 40, 0.6); }
#hud .res small { opacity: 0.65; }
#hud .spacer { flex: 1; }
#hud .stat { white-space: nowrap; }
#hud .speed button { width: 30px; height: 26px; padding: 0; }
#hud .speed .speedtag { align-self: center; padding: 0 5px; font-size: 12px; font-weight: bold; color: #ffe9a8; background: rgba(0, 0, 0, 0.28); border-radius: 8px; line-height: 18px; }
#hud .speed button.on, #hud .speed .btn.on:hover:not(:disabled) { background: linear-gradient(180deg, #d9a93a, #a77a1c); color: #2b1b0e; }
#hud .food-bad { color: #ff9a8a; font-weight: bold; }
#hud .food-good { color: #b9e08a; }

/* Minimap */
#minimap-wrap { position: absolute; left: 8px; bottom: 8px; padding: 4px; background: var(--wood); border: 2px solid var(--wood-dark); border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
#minimap { display: block; width: 176px; height: 176px; background: #101510; cursor: pointer; }

/* Építőmenü */
#buildmenu { position: absolute; left: 190px; right: 8px; bottom: 8px; padding: 4px 6px 6px; display: none; }
#buildmenu.open { display: block; }
#buildmenu .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
#buildmenu .tab { padding: 2px 10px; font-size: 14px; }
#buildmenu .tab.on, #buildmenu .btn.tab.on:hover:not(:disabled) { background: linear-gradient(180deg, #d9a93a, #a77a1c); color: #2b1b0e; text-shadow: none; }
#buildmenu .cards { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
/* V5.3: összecsukható – csak a fülek maradnak (az építés-állapot sor, ha van, igen); a kártya-sor magassága puhán fut le */
#buildmenu .cards { max-height: 260px; transition: max-height 0.18s ease, opacity 0.16s ease, padding 0.18s ease; }
#buildmenu.collapsed .cards { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; }
#buildmenu.collapsed .lockinfo { display: none !important; }
#buildmenu.collapsed .tabs { margin-bottom: 0; }
#buildmenu .tabs { padding-right: 38px; }
#buildmenu .bm-collapse { position: absolute; right: 8px; top: 6px; width: 30px; height: 26px; padding: 0; line-height: 1; font-size: 15px; }
.card {
  flex: 0 0 auto; width: 96px; min-height: 76px; padding: 4px; text-align: center; font-size: 12px; cursor: pointer; position: relative;
  background: linear-gradient(180deg, #efe2bc, #d6c18a); border: 2px solid var(--wood-dark); border-radius: 5px; color: var(--ink);
}
.card:hover { filter: brightness(1.08); border-color: var(--gold); }
.card.sel { outline: 3px solid var(--gold); }
.card.locked { opacity: 0.55; filter: grayscale(0.5); }
.card .ico { font-size: 26px; line-height: 30px; }
.card .nm { font-weight: bold; font-size: 12px; }
.card .cost { font-size: 11px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 5px; }
.card .cost .lack { color: var(--red); font-weight: bold; }
.card .key { position: absolute; top: 1px; left: 3px; font-size: 10px; opacity: 0.6; }
#buildbtn { position: absolute; left: 190px; bottom: 8px; display: none; }
#buildbtn.show { display: block; }

/* Tooltip */
#tooltip { position: absolute; display: none; max-width: 300px; padding: 6px 9px; font-size: 13px; z-index: 50; }
#tooltip.show { display: block; animation: tip-in 0.14s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
#tooltip .eico { width: 17px; height: 17px; }
#tooltip h4 { margin: 0 0 2px; font-size: 14px; }
#tooltip .desc { margin-bottom: 3px; font-style: italic; opacity: 0.85; }
#tooltip .bad { color: var(--red); font-weight: bold; }

/* Toasts */
#toasts { position: absolute; top: calc(var(--hud-h, 40px) + 8px + var(--ribbon-h, 0px)); transition: top 0.3s; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(560px, 90vw); }
.toast { padding: 6px 14px; font-size: 14px; border-radius: 5px; border: 2px solid var(--wood-dark); background: rgba(233, 219, 180, 0.96); color: var(--ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); animation: toast-in 0.2s ease-out; pointer-events: auto; cursor: default; }
.toast.good { background: rgba(196, 226, 160, 0.97); }
.toast.warn { background: rgba(244, 214, 130, 0.97); }
.toast.bad { background: rgba(236, 160, 140, 0.97); }
.toast.link { cursor: pointer; }
.toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Dev */
#devpanel { position: absolute; left: 8px; bottom: 180px; font: 11px monospace; color: #cfe8a0; background: rgba(0, 0, 0, 0.6); padding: 4px 8px; display: none; white-space: pre; border-radius: 4px; }
#devpanel.show { display: block; }

/* Info-panel */
#panel { position: absolute; right: 8px; top: calc(var(--hud-h, 40px) + 8px); width: 290px; max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 8px - var(--bm-h, 160px)); overflow-y: auto; padding: 8px 10px; display: none; font-size: 14px; }
#panel.show { display: block; }
/* V5.3: nagy ablak (ablak-kezelő) nyitva: a jobb oldali épület- / egység-panel nem takarja / nem kandikál ki az ablak mögül (a kijelölés megmarad, az ablak zárásakor visszatér) */
body.window-open #panel.show { display: none; }
.phead { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(60, 40, 20, 0.4); padding-bottom: 6px; margin-bottom: 6px; }
.pico { font-size: 28px; }
.ptxt { flex: 1; min-width: 0; }
.ptitle { font-weight: bold; font-size: 17px; }
.psub { font-size: 12px; opacity: 0.75; font-style: italic; }
.pclose { padding: 0 7px; line-height: 20px; }
.pline { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.pline .lab { opacity: 0.8; }
.pline .val { font-weight: bold; text-align: right; }
.pdesc { font-style: italic; opacity: 0.85; margin: 2px 0 6px; font-size: 13px; }
.pbar { margin: 5px 0; }
.pbar .blab { display: flex; justify-content: space-between; font-size: 12px; }
.pbar .track { height: 8px; background: rgba(60, 40, 20, 0.35); border-radius: 4px; overflow: hidden; border: 1px solid rgba(40, 25, 10, 0.5); }
.pbar .fill { height: 100%; transition: width 0.3s; }
.pacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pacts .btn { font-size: 13px; padding: 3px 8px; }
.btn.danger { background: linear-gradient(180deg, #b34a3a, #7d2a1f); }
.btn.danger:hover:not(:disabled) { background: linear-gradient(180deg, #cc5846, #92322a); }
.confirm-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* Célok */
#objectives { position: absolute; left: 8px; top: calc(var(--hud-h, 40px) + 8px); width: 260px; padding: 6px 9px; font-size: 13px; display: none; }
/* a `#ui > #objectives { pointer-events: none }` (2 azonosító) erősebb volna a `#objectives.show`-nál (1 + 1 osztály): a megjelenő doboz kattintható kell legyen (összecsukás) */
#objectives.show, #ui > #objectives.show { display: block; pointer-events: auto; }
#objectives h4 { margin: 0 0 3px; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 4px; padding: 0 2px; user-select: none; }
#objectives h4:hover { background: rgba(217, 169, 58, 0.22); }
#objectives h4:focus-visible { outline: 2px solid #a8761c; }
#objectives h4 .oarrow { display: inline-block; width: 16px; text-align: center; opacity: 0.8; }
#objectives h4 .ocount { font-weight: normal; opacity: 0.75; font-size: 12px; margin-left: 6px; }
#objectives.min { padding-bottom: 3px; }
#objectives.min h4 { margin-bottom: 0; }
#objectives .obj { display: flex; gap: 6px; padding: 1px 0; align-items: baseline; }
#objectives .obj.done { opacity: 0.55; text-decoration: line-through; }
#objectives .obj .chk { width: 14px; flex: none; }
#objectives .obj .prog { margin-left: auto; opacity: 0.7; font-size: 12px; white-space: nowrap; }
#objectives.min .obj { display: none; }

/* Párbeszéd / menük */
/* V5.4: a menü-réteg a HUD-sáv / szalagok / ablakok (z-index 12–36) FÖLÖTT van – korábban z-index nélkül alattuk: egy esemény-kártya (#evbanner, z 13) a menü gombját takarta és a kattintást elnyelte (mérve az Új játék 🎲 gombján 800×600-on) */
#menu-layer { position: absolute; inset: 0; pointer-events: none; z-index: 48; }
#menu-layer.modal, #menu-layer.screen { pointer-events: auto; }
.dialog-back { position: absolute; inset: 0; background: rgba(10, 8, 4, 0.55); display: flex; align-items: center; justify-content: center; }
.dialog { padding: 16px 22px; min-width: 300px; max-width: 460px; text-align: center; }
.dialog h3 { margin: 0 0 8px; }
.dialog p { margin: 4px 0 12px; }
.dlg-btns { display: flex; gap: 10px; justify-content: center; }

/* Értesítés-napló */
#notifylog { position: absolute; right: 8px; top: calc(var(--hud-h, 40px) + 8px); width: 340px; max-height: 60vh; overflow-y: auto; padding: 8px 10px; display: none; font-size: 13px; z-index: 20; }
#notifylog.show { display: block; }
#notifylog .entry { padding: 3px 0; border-bottom: 1px dashed rgba(60, 40, 20, 0.35); }
#notifylog .entry.link { cursor: pointer; }
#notifylog .entry .day { font-size: 11px; opacity: 0.65; }
#notifylog .entry.good { color: #2d5a1c; }
#notifylog .entry.warn { color: #8a5a00; }
#notifylog .entry.bad { color: #9b2c20; font-weight: bold; }

/* Menük */
#menu-layer.screen { background: rgba(14, 10, 4, 0.5); display: flex; align-items: center; justify-content: center; overflow-y: auto; }
#menu-layer.screen.plain { background: transparent; }
.menu-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 100%; width: 100%; padding: 16px; }
.menu-screen .title { text-align: center; color: #f6e7b8; text-shadow: 0 3px 0 #2b1b0e, 0 0 24px rgba(0, 0, 0, 0.7); }
.menu-screen .title h1 { font-size: clamp(44px, 9vw, 92px); margin: 0; letter-spacing: 2px; }
.menu-screen .title .tsub { font-size: clamp(14px, 2.2vw, 22px); opacity: 0.85; font-style: italic; }
.menu-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.menu-col .btn.big { font-size: 20px; padding: 10px 26px; }
.menu-screen .foot { color: #d9c89c; opacity: 0.8; font-size: 13px; }
.menu-box { padding: 18px 24px; min-width: 340px; max-width: min(92vw, 560px); max-height: 92vh; overflow-y: auto; }
.menu-box.wide { max-width: min(94vw, 860px); width: min(94vw, 760px); }
.menu-box h2 { margin: 0 0 12px; text-align: center; }
.menu-box h3 { margin: 4px 0 6px; }
.menu-box p { margin: 6px 0; line-height: 1.4; }
.menu-box .small { font-size: 12px; opacity: 0.8; }
.frow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(60, 40, 20, 0.3); }
.frow .inline { display: inline-flex; align-items: center; gap: 8px; }
.inp { font: inherit; padding: 4px 8px; border: 2px solid var(--wood-dark); border-radius: 4px; background: #fbf3d9; width: 140px; }
.rng { width: 160px; }
.gen-bar { height: 16px; border: 2px solid var(--wood-dark); border-radius: 9px; background: rgba(0, 0, 0, 0.35); overflow: hidden; margin: 12px 0 8px; min-width: 300px; }
.gen-fill { height: 100%; width: 0; background: linear-gradient(180deg, #e2b84a, #a77a1c); transition: width 0.12s linear; }
.gen-label { text-align: center; font-size: 13px; opacity: 0.85; }
.seg { display: inline-flex; gap: 4px; }
.seg-btn.on, .btn.seg-btn.on:hover:not(:disabled) { background: linear-gradient(180deg, #d9a93a, #a77a1c); color: #2b1b0e; text-shadow: none; }
.btn.big2 { padding: 8px 22px; font-size: 17px; }
/* V5.4: a gombsor a görgethető (magas) menü-doboz aljához tapad – a Beállítások „Kész" gombja 720 px magasságon nem kerül a hajtás alá; a negatív margó a doboz belső margóját fedi */
.menu-box .dlg-btns { margin: 14px -24px -18px; padding: 10px 24px 16px; flex-wrap: wrap; position: sticky; bottom: 0; background: linear-gradient(to bottom, rgba(238, 222, 182, 0), rgba(238, 222, 182, 0.96) 28%); }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.25); border-radius: 5px; border: 1px solid rgba(60, 40, 20, 0.35); }
.slot.empty .slot-txt { opacity: 0.6; }
.slot-txt { flex: 1; }
.slot-info { font-size: 12px; opacity: 0.8; }
.gameover.won h1 { color: #2d6a1f; }
.gameover.lost h1 { color: #9b2c20; }
.gameover h1 { text-align: center; margin: 0 0 4px; font-size: 40px; }
.gameover .reason { text-align: center; font-style: italic; font-size: 17px; }
.stats { margin: 10px auto; max-width: 420px; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.keys { border-collapse: collapse; font-size: 13px; }
.keys th { text-align: left; padding: 2px 10px 2px 0; white-space: nowrap; font-family: Consolas, monospace; color: #5a3d1c; }
.keys td { padding: 2px 0; }
.tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
@media (max-width: 760px) { .help-cols { grid-template-columns: 1fr; } }
.ui-hidden #hud, .ui-hidden #minimap-wrap, .ui-hidden #buildmenu, .ui-hidden #buildbtn, .ui-hidden #panel, .ui-hidden #objectives, .ui-hidden #advisor, .ui-hidden #ribbon, .ui-hidden #banner, .ui-hidden #pauseind, .ui-hidden #toasts, .ui-hidden #notifylog { display: none !important; }

/* Hibakezelő overlay */
.error-back { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 6, 2, 0.75); display: flex; align-items: center; justify-content: center; }
.error-box { max-width: min(92vw, 620px); padding: 18px 24px; max-height: 90vh; overflow: auto; }
.error-box h2 { margin: 0 0 8px; }
.errmsg { font-family: Consolas, monospace; background: rgba(0, 0, 0, 0.08); padding: 6px 8px; border-radius: 4px; word-break: break-word; }
.error-box pre { white-space: pre-wrap; font-size: 11px; max-height: 200px; overflow: auto; }
.error-box details { margin: 6px 0; }

/* Gazdasági ablak (F2) */
#economy { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 30; }
#economy.show { display: block; }
.econ-win { width: min(1040px, 96vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); overflow: hidden; display: none; flex-direction: column; padding: 10px 14px 12px; font-size: 13px; }
#economy.show .econ-win, #economy.show.econ-win { display: flex; }
.econ-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.4); padding-bottom: 6px; margin-bottom: 8px; }
.econ-head .spacer { flex: 1; }
.econ-title { font-size: 20px; font-weight: bold; }
.econ-sub { font-size: 12px; opacity: 0.7; font-style: italic; }
.econ-body { overflow-y: auto; min-height: 0; }
.econ-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); gap: 16px; }
@media (max-width: 860px) { .econ-cols { grid-template-columns: 1fr; } }
.econ-win h3 { margin: 8px 0 4px; font-size: 14px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.econ-win h4 { margin: 8px 0 3px; font-size: 13px; }
.econ-tbl, .econ-prices { width: 100%; border-collapse: collapse; }
.econ-tbl th, .econ-prices th { text-align: left; font-size: 11px; opacity: 0.75; padding: 2px 6px; border-bottom: 1px solid rgba(60, 40, 20, 0.4); white-space: nowrap; }
.econ-tbl td, .econ-prices td { padding: 2px 6px; border-bottom: 1px dotted rgba(60, 40, 20, 0.25); vertical-align: middle; }
.econ-tbl tr.grp-row td { background: rgba(120, 85, 40, 0.18); font-weight: bold; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; }
.econ-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.econ-tbl .stock { min-width: 96px; }
.econ-tbl .stk b { font-variant-numeric: tabular-nums; }
.econ-tbl .stk small { opacity: 0.6; }
.econ-tbl .cap { height: 4px; background: rgba(60, 40, 20, 0.25); border-radius: 2px; margin-top: 1px; overflow: hidden; }
.econ-tbl .cap i { display: block; height: 100%; }
.econ-tbl tr.short td.nm { color: #9b2c20; font-weight: bold; }
.econ-tbl tr.full td.stock b { color: #9b2c20; }
.econ-tbl .ri { display: inline-block; min-width: 18px; text-align: center; }
.econ-tbl .tr { font-size: 11px; opacity: 0.85; white-space: nowrap; }
.up { color: #3f7d2a; } .down { color: #b5301f; }
.econ-tbl .sp { width: 70px; }
.spark { display: block; }
.econ-scroll { max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 230px); overflow-y: auto; }
.econ-chains, .econ-warn { list-style: none; margin: 2px 0; padding: 0; }
.econ-chains li { padding: 1px 0; }
.econ-chains .dot { display: inline-block; width: 16px; }
.econ-chains .ok .dot { color: #3f7d2a; } .econ-chains .slow .dot { color: #c98a1c; } .econ-chains .blocked .dot { color: #b5301f; }
.econ-chains .blocked .lb { color: #9b2c20; font-weight: bold; }
.econ-chains small { opacity: 0.75; }
.econ-warn li { color: #8a4a00; padding: 1px 0; }
.econ-empty { opacity: 0.7; font-style: italic; padding: 3px 0; }
.econ-empty.good { color: #3f7d2a; opacity: 0.9; }
.econ-class .pbar { margin: 2px 0 4px; }
.econ-orders .ord { padding: 1px 0; } .econ-orders .ord.soon { color: #b5301f; font-weight: bold; } .econ-orders .ord.done { opacity: 0.55; text-decoration: line-through; }
.econ-prices { font-size: 12px; margin-bottom: 4px; }
.econ-foot { margin-top: 4px; }
/* V5.4: Hatékonyság fül */
.econ-tabs { display: inline-flex; gap: 4px; }
.econ-tabs .tabbtn.on { background: linear-gradient(180deg, #d9a93a, #a77a1c); color: #2b1b0e; text-shadow: none; }
.eff-bn { list-style: none; margin: 2px 0 6px; padding: 0; }
.eff-bn li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; }
.eff-bn li.jump { cursor: pointer; }
.eff-bn li.jump:hover { background: rgba(255, 236, 180, 0.65); border-color: rgba(168, 118, 28, 0.5); }
.eff-bn .dot { flex: 0 0 18px; text-align: center; font-size: 14px; }
.eff-bn li.high .dot { color: #b5301f; } .eff-bn li.mid .dot { color: #d98a1c; } .eff-bn li.low .dot { color: #b8a336; }
.eff-bn .tt { font-weight: bold; }
.eff-bn .hint { font-size: 12.5px; opacity: 0.85; margin-top: 1px; }
.eff-sum .eff-meter { margin: 3px 0 6px; }
.eff-sum .blab { display: flex; justify-content: space-between; font-size: 12.5px; }
.eff-sum .track { height: 9px; border-radius: 5px; background: rgba(60, 40, 20, 0.25); border: 1px solid rgba(40, 25, 10, 0.4); overflow: hidden; }
.eff-sum .fill { height: 100%; }
.eff-tbl tr.jump { cursor: pointer; }
.eff-tbl tr.jump:hover td { background: rgba(255, 236, 180, 0.65); }
.eff-tbl tr.dormant td.nm::after { content: ' 💤'; opacity: 0.7; }
.eff-tbl td.ut { min-width: 96px; }
.eff-tbl td.ok { color: #3f7d2a; }
.eff-tbl .dim, .eff-lost .dim { opacity: 0.6; }
.eff-lost small { display: block; margin-top: 3px; font-size: 11.5px; }
.eff-sum .val.down, .eff-lost .val.down { color: #9b2c20; }

/* Rajtaütés-szalag és riasztás */
#banner { position: absolute; top: calc(var(--hud-h, 40px) + 6px + var(--ribbon-h, 0px)); left: 50%; transform: translateX(-50%); display: none; z-index: 12; pointer-events: auto; }
#banner.show { display: block; }
.raid-banner { padding: 7px 28px; font-size: 16px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; color: #fff4dc; border: 2px solid #2b1005; border-radius: 4px; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, #c96a2c, #8a3a12); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 190, 120, 0.25) inset; animation: banner-in 0.35s ease-out; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); }
.raid-banner.bad { background: linear-gradient(180deg, #d23a2a, #8a1710); animation: banner-in 0.35s ease-out, banner-pulse 0.9s ease-in-out infinite; }
.raid-banner.good { background: linear-gradient(180deg, #5a9a3a, #2f6a1f); }
@keyframes banner-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes banner-pulse { 50% { filter: brightness(1.25); } }
#vignette { position: fixed; inset: 0; pointer-events: none !important; box-shadow: inset 0 0 0 rgba(220, 30, 20, 0); opacity: 0; transition: opacity 0.5s; z-index: 5; }
body.raid-active #vignette { opacity: 1; animation: vignette-pulse 1.2s ease-in-out infinite; }
@keyframes vignette-pulse { 0%, 100% { box-shadow: inset 0 0 70px 6px rgba(200, 30, 20, 0.28); } 50% { box-shadow: inset 0 0 120px 20px rgba(220, 30, 20, 0.5); } }

/* Szünet-jelző */
#pauseind { position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%); display: none; padding: 3px 18px; font-size: 18px; letter-spacing: 1px; color: #fff2cf;
  background: rgba(43, 27, 14, 0.78); border: 2px solid var(--wood-dark); border-radius: 14px; pointer-events: none !important; animation: pause-blink 1.6s ease-in-out infinite; }
#pauseind.show { display: block; }
@keyframes pause-blink { 50% { opacity: 0.55; } }
input[type=range], input[type=checkbox] { accent-color: #a77a1c; }

/* ===== V2.1: tempó és haladás ===== */
/* HUD: szint (kattintható) + szint-pontok, építési helyek */
#hud .tierbtn { cursor: pointer; padding: 1px 6px; border-radius: 10px; transition: background 0.2s; display: inline-flex; align-items: center; gap: 6px; }
#hud .tierbtn:hover { background: rgba(255, 220, 150, 0.22); }
#hud .pips { display: inline-flex; gap: 2px; align-items: center; }
#hud .pips i { width: 6px; height: 10px; border-radius: 2px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 220, 150, 0.35); }
#hud .pips i.done { background: #b9863a; border-color: #d9a93a; }
#hud .pips i.cur { background: #f0c648; border-color: #fff0b0; box-shadow: 0 0 5px rgba(255, 220, 110, 0.9); }
#hud .slots { padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); cursor: default; }
#hud .slots.full { background: rgba(217, 169, 58, 0.45); }
#hud .slots.queued { color: #ffe2a0; }
/* folyamatjelző és követelmény-lista (tooltip, kártya, Krónika) */
.pbar2 { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: rgba(40, 28, 14, 0.35); border: 1px solid rgba(40, 28, 14, 0.55); overflow: hidden; vertical-align: middle; }
.pbar2 i { display: block; height: 100%; background: linear-gradient(180deg, #8ec458, #5c8a3a); border-radius: 2px; transition: width 0.4s; }
.reqs { list-style: none; margin: 3px 0 2px; padding: 0; font-size: 13px; }
.reqs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding: 1px 0; }
.reqs .reqs { flex-basis: 100%; margin: 1px 0 2px 22px; font-size: 12px; }
.reqs .reqs li.todo .rt { font-weight: normal; }
.reqs .tick { width: 16px; flex: none; text-align: center; opacity: 0.85; }
.reqs .tick .eico { width: 15px; height: 15px; margin: 0; vertical-align: -3px; }
.reqs li.done { color: #3a6a22; }
.reqs li.done .rt { text-decoration: line-through; opacity: 0.7; }
.reqs li.todo .rt { font-weight: bold; }
.reqs .rt { flex: 0 1 auto; }
.reqs small { opacity: 0.75; font-size: 11px; white-space: nowrap; }
#tooltip .reqs li.done { color: #9fd47a; }
#tooltip .reqs li.todo { color: #f3e6c4; }
#tooltip .reqs .pbar2 { width: 54px; }
#tooltip .lt, .lockinfo .lt { margin-top: 3px; font-weight: bold; font-size: 12px; opacity: 0.9; }
#tooltip .locktip { max-width: 290px; }
.icostrip { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.icostrip .ib { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 1px; border-radius: 6px; background: rgba(60, 40, 18, 0.18); border: 1px solid rgba(60, 40, 18, 0.4); }
.icostrip .ib.btn-like { cursor: pointer; }
.icostrip .ib.btn-like:hover { background: rgba(217, 169, 58, 0.4); border-color: var(--gold); }
.icostrip .ib.more { font-size: 12px; padding: 0 6px; }
.icostrip img.bico { width: 100%; height: 100%; object-fit: contain; }
img.bico.pending { background: rgba(60, 40, 18, 0.12); border-radius: 6px; }
/* építőmenü: kategória-fül jelzések, zárolt (teaser) kártyák, állapot-sor */
#buildmenu .tab { position: relative; }
#buildmenu .tab.dim { opacity: 0.6; }
#buildmenu .tab .newdot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ffcf3a; border: 2px solid #2b1b0e; box-shadow: 0 0 6px rgba(255, 207, 58, 0.9); animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse { 50% { transform: scale(1.3); } }
.card.new { border-color: #ffcf3a; box-shadow: 0 0 8px rgba(255, 207, 58, 0.7); }
.card.new::after { content: 'ÚJ'; position: absolute; top: -6px; right: -4px; background: #ffcf3a; color: #2b1b0e; font-size: 9px; font-weight: bold; padding: 0 4px; border-radius: 6px; border: 1px solid #2b1b0e; }
.card.hard::before { content: '⛔'; position: absolute; top: 1px; right: 3px; font-size: 11px; }
.card.teaser { background: linear-gradient(180deg, #cfc7b2, #b3a98c); border-style: dashed; color: #4a4030; width: 108px; }
.card.teaser .ico { position: relative; }
.card.teaser .ico img.bico { filter: grayscale(1) brightness(0.8) contrast(0.95); opacity: 0.6; }
.card.teaser .ico .lk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.card.teaser .ico .lk .eico { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.card.teaser .mini { font-size: 10.5px; line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.card.teaser .mini .mt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.teaser .mini small { opacity: 0.7; }
.card.teaser .pbar2 { width: 78px; }
.card.teaser.almost { border-color: #6aa04a; }
.lockdiv { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; margin: 0 2px; border-left: 2px dashed rgba(243, 230, 196, 0.35); color: rgba(243, 230, 196, 0.8); font-size: 11px; }
.bstat { display: none; gap: 14px; flex-wrap: wrap; align-items: baseline; padding: 3px 8px; margin-bottom: 4px; font-size: 13px; background: rgba(0, 0, 0, 0.3); border-radius: 4px; }
.bstat.show { display: flex; }
.bstat .badc { color: #ff9a8a; font-weight: bold; }
.bstat .warnc { color: #ffd78a; font-weight: bold; }
.bstat .goodc { color: #b9e08a; }
.bstat .dim { opacity: 0.85; }
.lockinfo { display: none; margin-bottom: 4px; padding: 5px 9px; font-size: 13px; background: linear-gradient(180deg, #efe2bc, #dcc994); color: var(--ink); border: 2px solid var(--wood-dark); border-radius: 5px; }
.lockinfo.show { display: block; }
.lockinfo .lhead { display: flex; gap: 8px; align-items: center; }
.lockinfo .lhead > div { flex: 1; }
.lockinfo .lhead img.bico { width: 34px; height: 34px; filter: grayscale(1); opacity: 0.7; }
.lockinfo .ldesc { font-style: italic; opacity: 0.8; font-size: 12px; }
.lockinfo .btn { padding: 0 8px; }
/* feloldás-szalag */
#ribbon { position: absolute; top: calc(var(--hud-h, 40px) + 8px); left: 50%; transform: translateX(-50%); display: none; z-index: 14; pointer-events: auto; max-width: 94vw; }
#ribbon.show { display: block; }
.ribbon { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 34px 10px 18px; min-width: 340px; max-width: min(660px, 94vw); color: #3a2410; cursor: pointer;
  background: linear-gradient(180deg, #f4e7bd, #dcc58e); border: 3px solid #5a3a16; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(240, 198, 72, 0.55) inset, 0 0 30px rgba(255, 214, 110, 0.35);
  animation: ribbon-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.ribbon.out { opacity: 0; transform: translateY(-12px); transition: opacity 0.4s, transform 0.4s; }
.ribbon.stage { padding: 14px 40px 14px 20px; border-color: #4a2c0c; }
.ribbon .rb-orn .eico { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(255, 220, 90, 0.9)); animation: orn-spin 3.2s ease-in-out infinite; }
.ribbon .rb-title { font-size: 20px; font-weight: bold; letter-spacing: 0.5px; }
.ribbon.stage .rb-title { font-size: 25px; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.8); }
.ribbon .rb-blurb { font-style: italic; opacity: 0.85; font-size: 14px; margin: 1px 0 3px; }
.ribbon .rb-sub { font-size: 12px; opacity: 0.8; margin-top: 4px; }
.ribbon .rb-hint { font-size: 11px; opacity: 0.6; margin-top: 2px; }
.ribbon .rb-x { position: absolute; top: 3px; right: 5px; background: none; border: none; color: #5a3a16; font-size: 15px; cursor: pointer; opacity: 0.6; }
.ribbon .rb-x:hover { opacity: 1; }
@keyframes ribbon-in { from { opacity: 0; transform: translateY(-26px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes orn-spin { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
/* ikonos értesítés (felfedezés, előjel) */
.toast.withicon { display: flex; align-items: center; gap: 8px; }
.toast.withicon .eico { width: 22px; height: 22px; flex: none; }
.toast.omen { background: linear-gradient(180deg, rgba(208, 216, 236, 0.97), rgba(170, 184, 214, 0.97)); border-color: #2b3550; font-style: italic; }
.lockinfo .reqs { max-width: 440px; }
.ribbon.stage { width: min(620px, 94vw); }
.ribbon .rb-body { flex: 1 1 auto; min-width: 0; }

/* --- Krónika / Fejlődés ablak (K) --- */
#chronicle { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.chron-win { width: min(1000px, 96vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#chronicle.show.chron-win { display: flex; }
.chron-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.chron-title { font-size: 22px; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.chron-sub { font-style: italic; opacity: 0.8; }
.chron-head .spacer { flex: 1; }
.chron-body { overflow-y: auto; padding-right: 4px; }
.chron-win h3 { margin: 10px 0 4px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.ladder { display: flex; flex-wrap: wrap; list-style: none; margin: 4px 0 8px; padding: 0; }
.ladder .step { flex: 1 1 0; min-width: 84px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; padding-top: 2px; }
.ladder .step::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 4px; background: rgba(60, 40, 20, 0.3); z-index: 0; }
.ladder .step:first-child::before { display: none; }
.ladder .step.done::before, .ladder .step.current::before { background: #b9863a; }
.ladder .node { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 3px solid #5a3a16; background: #d9c9a0; color: #5a3a16; }
.ladder .node .eico { width: 16px; height: 16px; margin: 0; filter: brightness(2.2); }
.ladder .done .node { background: #6aa04a; border-color: #2f5a1c; color: #fff; }
.ladder .current .node { background: #f0c648; border-color: #8a5a00; box-shadow: 0 0 0 4px rgba(240, 198, 72, 0.35), 0 0 12px rgba(240, 198, 72, 0.9); animation: cur-pulse 1.8s ease-in-out infinite; }
.ladder .future { opacity: 0.6; }
.ladder .sn { font-weight: bold; }
.ladder .current .sn { color: #7a4a00; }
@keyframes cur-pulse { 50% { box-shadow: 0 0 0 7px rgba(240, 198, 72, 0.15), 0 0 18px rgba(240, 198, 72, 1); } }
.chron-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 780px) { .chron-cols { grid-template-columns: 1fr; } }
.chron-cur b { font-size: 21px; }
.chron-blurb { font-style: italic; opacity: 0.8; font-size: 13px; }
.chron-next { margin-bottom: 2px; }
.chron-top { font-weight: bold; }
.chron-empty { font-style: italic; opacity: 0.7; padding: 3px 0; }
.chron-unl .lt { font-weight: bold; font-size: 12px; margin: 6px 0 3px; opacity: 0.9; }
.chron-win .reqs { font-size: 14px; }
.chron-win .reqs .pbar2 { width: 120px; height: 8px; }
.bgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.bcell { width: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; line-height: 1.15; padding: 3px 2px; border-radius: 6px; border: 1px solid rgba(60, 40, 18, 0.35); background: rgba(60, 40, 18, 0.08); }
.bcell.pick { cursor: pointer; }
.bcell.pick:hover { background: rgba(217, 169, 58, 0.4); border-color: var(--gold); }
.bcell .bi { position: relative; display: inline-flex; margin-bottom: 2px; }
.bcell .bi img.bico { width: 36px; height: 36px; object-fit: contain; }
.bcell.locked .bi img.bico { filter: grayscale(1) brightness(0.85); opacity: 0.55; }
.bcell.locked { opacity: 0.85; border-style: dashed; }
.bcell .lk { position: absolute; right: -5px; bottom: -4px; }
.bcell .lk .eico { width: 15px; height: 15px; margin: 0; }
.srow { margin-bottom: 7px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(60, 40, 18, 0.3); }
.srow.current { background: rgba(240, 198, 72, 0.22); border-color: #b9863a; }
.srow.done { background: rgba(106, 160, 74, 0.12); }
.srow .sh { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.srow .sno { opacity: 0.6; }
.srow .stag { font-size: 11px; opacity: 0.7; margin-left: auto; text-transform: uppercase; letter-spacing: 0.5px; }
.mlog { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.mlog li { padding: 3px 0; border-bottom: 1px dashed rgba(60, 40, 20, 0.3); display: flex; flex-direction: column; }
.mlog .md { font-size: 11px; opacity: 0.65; }
.mlog li.stage .mt { font-weight: bold; color: #7a4a00; }
.mlog li.unlock .mt { color: #3a6a22; }
.mlog li.discovery .mt { color: #2d5a1c; }
.mlog li.omen .mt { color: #3a4a7a; font-style: italic; }
.chron-slots { font-size: 14px; }
/* --- tanácsadó-sor a Célok doboz alatt --- */
#advisor { position: absolute; left: 8px; top: calc(var(--hud-h, 40px) + 150px); width: 260px; padding: 5px 9px 6px; font-size: 13px; display: none; z-index: 6; }
#advisor.show { display: block; }
#advisor h4 { margin: 0 0 3px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
#advisor .adv-btns { display: inline-flex; align-items: center; gap: 4px; }
#advisor .adv-more { background: rgba(60, 40, 18, 0.15); border: 1px solid rgba(60, 40, 18, 0.35); border-radius: 8px; cursor: pointer; font-size: 11px; padding: 0 6px; color: inherit; }
#advisor .adv-more:hover { background: rgba(217, 169, 58, 0.4); }
#advisor .adv-x { background: none; border: none; cursor: pointer; opacity: 0.55; font-size: 13px; color: inherit; padding: 0 2px; }
#advisor .adv-x:hover { opacity: 1; }
#advisor .adv { display: flex; gap: 6px; align-items: flex-start; padding: 2px 5px; border-left: 4px solid #6a8aa8; margin: 3px 0; border-radius: 0 4px 4px 0; background: rgba(106, 138, 168, 0.16); }
#advisor .adv .ai { flex: none; }
#advisor .adv .ai .eico { width: 16px; height: 16px; margin: 0; vertical-align: -3px; }
#advisor .adv.warn { border-left-color: #d9a93a; background: rgba(217, 169, 58, 0.22); }
#advisor .adv.bad { border-left-color: #b8382a; background: rgba(184, 56, 42, 0.2); font-weight: bold; }
#advisor .adv.link { cursor: pointer; }
#advisor .adv.link:hover { filter: brightness(1.08); }
#advisor.hidden { width: auto; padding: 3px 7px; }
#advisor .adv-chip { cursor: pointer; position: relative; display: inline-flex; }
#advisor .adv-chip i { position: absolute; top: -6px; right: -9px; background: #b8382a; color: #fff; font-size: 10px; font-style: normal; border-radius: 8px; padding: 0 4px; }
#advisor.flash { animation: adv-flash 0.9s ease-out; }
@keyframes adv-flash { from { box-shadow: 0 0 0 0 rgba(255, 214, 110, 0.95), 0 4px 10px rgba(0, 0, 0, 0.4); } to { box-shadow: 0 0 0 16px rgba(255, 214, 110, 0), 0 4px 10px rgba(0, 0, 0, 0.4); } }
/* --- célok-doboz: jutalom-sor (Feloldja: …) --- */
#objectives .obj .otx { flex: 1 1 auto; min-width: 0; }
#objectives .reward { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; font-size: 11.5px; margin-top: 2px; }
#objectives .reward > i { opacity: 0.75; }
#objectives .reward .rw { display: inline-flex; align-items: center; gap: 3px; background: rgba(60, 40, 18, 0.12); border-radius: 9px; padding: 0 6px 0 2px; }
#objectives .reward .rw img.bico { width: 20px; height: 20px; object-fit: contain; }
.lockdiv b { font-size: 11px; color: #ffe2a0; }
#objectives .reward.many .rw { padding: 0; background: none; }
#objectives .reward.many .rw img.bico { width: 24px; height: 24px; }

/* ===== V3: letisztult, csoportosított HUD ===== */
#hud { display: block; padding: 0; min-height: 0; }
#hud .hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; padding: 4px 8px; }
#hud .hrow.sub { padding: 2px 8px 3px; font-size: 13px; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 220, 150, 0.1); }
#hud .rgroups { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#hud .rg { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 13px; background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 220, 150, 0.14); }
#hud .rg .rgi { display: inline-flex; opacity: 0.9; }
#hud .rg .rgi .eico { width: 19px; height: 19px; }
#hud .rprim, #hud .rsec { display: inline-flex; align-items: center; gap: 3px 6px; }
#hud .rsec { display: none; padding-left: 5px; border-left: 1px solid rgba(255, 220, 150, 0.2); }
#hud .rg.open .rsec { display: inline-flex; }
#hud .rg .res { background: none; padding: 0 2px; border-radius: 8px; }
#hud .rg .res.up { background: rgba(110, 190, 80, 0.5); }
#hud .rg .res.down { background: rgba(220, 120, 60, 0.5); }
#hud .rg .res.full { background: rgba(200, 50, 40, 0.55); }
#hud .rmore { font: inherit; font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 8px; border: 1px solid rgba(255, 220, 150, 0.3); background: rgba(255, 220, 150, 0.1); color: #f3e6c4; cursor: pointer; }
#hud .rmore:hover { background: rgba(255, 220, 150, 0.24); }
#hud .date { opacity: 0.95; }
#hud .hrow.sub .eico { width: 16px; height: 16px; vertical-align: -3px; }
#hud .slots { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; line-height: 20px; }

/* ===== V3: UI-csiszolás – tipográfia, gombok, kártyák, panelek, tooltip, ablakok egységes hangulata ===== */
:root { --serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, "Times New Roman", serif; font-family: var(--serif); }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
/* gombok: lágyabb fény, finom lenyomás-visszajelzés */
.btn { border-radius: 7px; border-color: #20130a; font-weight: 600; letter-spacing: 0.15px; transition: background 0.12s, transform 0.08s, box-shadow 0.12s; box-shadow: 0 1px 0 rgba(255, 232, 178, 0.38) inset, 0 -2px 0 rgba(0, 0, 0, 0.22) inset, 0 2px 3px rgba(0, 0, 0, 0.35); }
.btn:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 238, 190, 0.5) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(217, 169, 58, 0.5); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset; }
/* panelek / pergamen: finom belső fény és mélység */
.panel { border-radius: 9px; box-shadow: 0 2px 0 rgba(255, 220, 150, 0.2) inset, 0 -3px 8px rgba(0, 0, 0, 0.22) inset, 0 6px 16px rgba(0, 0, 0, 0.5); }
.parch { border-radius: 9px; box-shadow: 0 0 0 2px #a3875a inset, 0 0 22px rgba(120, 84, 30, 0.18) inset, 0 6px 16px rgba(0, 0, 0, 0.45); }
/* építőmenü: nagyobb, kártya-szerű előnézetek */
#buildmenu { border-radius: 10px; padding: 6px 8px 8px; }
#buildmenu .cards { gap: 8px; padding: 4px 2px 5px; scrollbar-width: thin; scrollbar-color: #a77a1c rgba(0, 0, 0, 0.25); }
#buildmenu .tab { border-radius: 8px 8px 3px 3px; }
.card { width: 104px; min-height: 96px; border-radius: 9px; padding: 5px 4px 6px; border-width: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 6px rgba(0, 0, 0, 0.35); transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, border-color 0.12s; }
.card:hover { filter: none; transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 12px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(217, 169, 58, 0.5); }
.card:active { transform: translateY(-1px); }
.card.sel { outline: none; border-color: #f4c648; box-shadow: 0 0 0 3px rgba(244, 198, 72, 0.7), 0 6px 12px rgba(0, 0, 0, 0.4); background: linear-gradient(180deg, #f7ecc4, #e3cd8a); }
.card .ico { height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 72%); margin-bottom: 1px; }
.card .ico .eico, .card img.bico { width: 48px; height: 48px; filter: drop-shadow(0 2px 2px rgba(60, 38, 14, 0.45)); }
.card .nm { font-size: 12.5px; line-height: 1.15; margin: 1px 0 2px; }
.card .cost { gap: 1px 6px; }
.card .cost > span { background: rgba(60, 40, 18, 0.1); border-radius: 8px; padding: 0 5px; }
.card.teaser .ico { height: 48px; }
.card.teaser { width: 112px; }
/* tooltip: nagyobb olvashatóság, finom nyíl-mentes dobozolás */
#tooltip { padding: 8px 11px; font-size: 13.5px; line-height: 1.35; border-radius: 9px; max-width: 320px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55); }
#tooltip h4 { font-size: 15px; letter-spacing: 0.2px; padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 224, 160, 0.22); }
/* info-panel: tisztább fejléc, olvashatóbb sorok */
#panel { border-radius: 10px; padding: 10px 12px; }
.phead { border-bottom: 1px solid rgba(60, 40, 20, 0.45); padding-bottom: 7px; margin-bottom: 7px; }
.ptitle { font-size: 18px; letter-spacing: 0.2px; }
.pline { padding: 2px 0; border-bottom: 1px dotted rgba(60, 40, 20, 0.18); }
.pbar .track { height: 9px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; }
.pbar .fill { border-radius: 4px; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12)); }
.pacts .btn { font-size: 13px; padding: 4px 10px; }
/* ablakok (Krónika, Gazdasági ablak, értesítés-napló, dialógusok): egységes fejléc-stílus */
.chron-win h3, .econ-win h3 { font-size: 15px; letter-spacing: 0.3px; border-bottom: 1px solid rgba(60, 40, 20, 0.35); padding-bottom: 2px; }
.chron-title, .econ-title { letter-spacing: 0.4px; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.6); }
#notifylog, .dialog { border-radius: 10px; }
/* célok / tanácsadó: kisebb, nyugodtabb alapállapot */
#objectives { width: 244px; font-size: 12.5px; padding: 6px 9px 7px; }
#advisor { width: 244px; font-size: 12.5px; }
.qdesc { font-size: 12.5px; font-style: italic; opacity: 0.85; margin: -2px 0 10px; line-height: 1.35; }
#hud .slots { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; height: auto; }

/* ===== V4: Világtérkép ablak (M) ===== */
#worldmap { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.wm-win { width: min(1120px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#worldmap.show.wm-win { display: flex; }
.wm-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.wm-title { font-size: 22px; font-weight: bold; }
.wm-sub { font-style: italic; opacity: 0.8; }
.wm-head .spacer { flex: 1; }
.wm-body { display: flex; gap: 14px; align-items: flex-start; overflow: hidden; }
.wm-canvas { border: 2px solid #4a3318; border-radius: 4px; background: #0c110d; cursor: crosshair; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.wm-side { flex: 1 1 220px; min-width: 200px; overflow-y: auto; max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 110px); }
.wm-side h3 { margin: 2px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.wm-fac { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.wm-fac:hover { background: rgba(120, 84, 30, 0.14); }
.wm-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.55); flex: none; }
.wm-fn { font-weight: 600; flex: 1; }
.wm-fs { font-size: 12px; font-style: italic; }
.wm-empty, .wm-hint { font-size: 13px; font-style: italic; opacity: 0.85; line-height: 1.35; margin: 6px 0; }
.wm-legend { font-size: 12.5px; margin: 12px 0 4px; line-height: 1.7; }
.wm-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.5); vertical-align: -1px; }
/* ===== V4: Diplomácia ablak (N) ===== */
#diplomacy { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.dip-win { width: min(1080px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#diplomacy.show.dip-win { display: flex; }
.dip-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.dip-title { font-size: 22px; font-weight: bold; }
.dip-sub { font-style: italic; opacity: 0.8; }
.dip-head .spacer { flex: 1; }
.dip-body { overflow-y: auto; padding-right: 4px; }
.dip-win h3 { margin: 8px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.dip-win h4 { margin: 8px 0 4px; font-size: 14px; }
.dip-cols { display: flex; gap: 14px; align-items: flex-start; }
.dip-list { flex: 0 0 360px; }
.dip-right { flex: 1 1 auto; min-width: 0; }
.dcard { border: 2px solid rgba(80, 56, 28, 0.45); border-radius: 9px; padding: 7px 9px 8px; margin-bottom: 8px; background: rgba(255, 246, 214, 0.35); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.dcard:hover { background: rgba(255, 240, 190, 0.6); }
.dcard.sel { border-color: #b8801c; background: rgba(255, 236, 170, 0.75); box-shadow: 0 0 0 2px rgba(217, 169, 58, 0.45); }
.dcard.dim { opacity: 0.55; }
.dc-top { display: flex; align-items: center; gap: 8px; }
.dc-name { flex: 1; min-width: 0; line-height: 1.2; }
.dc-sub { font-size: 12px; opacity: 0.75; }
.banner-ico { border-radius: 2px; flex: none; }
.stance { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.35); white-space: nowrap; background: #d8d0b8; }
.stance.war { background: #e86a58; color: #fff; }
.stance.good { background: #8fd37e; }
.stance.tribute { background: #f2cf6a; }
.relbar { position: relative; height: 8px; margin: 6px 0 3px; border-radius: 4px; background: rgba(60, 40, 20, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; }
.rb-mid { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; background: rgba(60, 40, 20, 0.6); }
.rb-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.rb-fill.pos { background: linear-gradient(90deg, #7cc66a, #4ea03c); }
.rb-fill.neg { background: linear-gradient(270deg, #e0705c, #b8402e); }
.dc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; opacity: 0.85; }
.tribs { margin-top: 4px; font-size: 12px; }
.trib.in { color: #2f6a20; }
.trib.out { color: #8a3a22; }
.trib .next { opacity: 0.7; }
.dip-hidden, .dip-hint { font-size: 12.5px; font-style: italic; opacity: 0.8; margin: 6px 0; line-height: 1.35; }
.dip-empty { font-style: italic; opacity: 0.85; padding: 10px 4px; line-height: 1.4; }
.dip-empty.big { padding: 24px 12px; text-align: center; font-size: 15px; }
.dip-detail .dd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.dip-detail .dd-head h3 { margin: 0; border: 0; font-size: 18px; }
.dd-sub { font-size: 13px; opacity: 0.8; }
.dd-known { display: flex; gap: 8px; margin: 6px 0; }
.acts .act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 4px; border-bottom: 1px dotted rgba(60, 40, 20, 0.25); }
.acts .act.off { opacity: 0.55; }
.act-l { flex: 1; min-width: 0; font-weight: 600; }
.act-tip { display: block; font-weight: normal; font-size: 12px; opacity: 0.75; font-style: italic; }
.act-p { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.btn.small { font-size: 12.5px; padding: 3px 9px; }
.dip-pending .pcard { border: 2px solid #a8761c; border-radius: 9px; background: rgba(255, 232, 160, 0.55); padding: 7px 10px 9px; margin-bottom: 8px; }
.pcard.ultimatum, .pcard.urgent { border-color: #c4432e; background: rgba(255, 200, 180, 0.6); }
.pcard.urgent { animation: pc-pulse 1.4s ease-in-out infinite; }
@keyframes pc-pulse { 50% { box-shadow: 0 0 0 3px rgba(196, 67, 46, 0.45); } }
.pc-head { display: flex; align-items: center; gap: 8px; }
.pc-head .spacer { flex: 1; }
.pc-ic { font-size: 18px; }
.deadline { font-weight: 700; padding: 1px 8px; border-radius: 10px; background: rgba(60, 40, 20, 0.15); }
.deadline.urgent { background: #c4432e; color: #fff; }
.pc-text { margin: 5px 0 7px; line-height: 1.4; }
.pc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dip-log ul { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; }
.dip-log li { display: flex; gap: 10px; padding: 2px 0; font-size: 12.5px; border-bottom: 1px dotted rgba(60, 40, 20, 0.18); }
.dip-log .ld { opacity: 0.65; min-width: 54px; }
#hud .diplobtn { position: relative; }
#hud .diplobtn.has-pending::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #d4402a; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); animation: pc-pulse 1.4s ease-in-out infinite; }
/* --- V4: Hadtest-ablak (J) --- */
#army { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.army-win { width: min(1000px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#army.show.army-win { display: flex; }
.army-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.army-title { font-size: 22px; font-weight: bold; }
.army-sub { font-style: italic; opacity: 0.8; }
.army-head .spacer { flex: 1; }
.army-body { overflow-y: auto; padding-right: 4px; }
.army-win h3 { margin: 8px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.army-win h4 { margin: 8px 0 4px; font-size: 13.5px; }
.army-cols { display: flex; gap: 14px; align-items: flex-start; }
.army-list { flex: 0 0 300px; }
.army-right { flex: 1 1 auto; min-width: 0; }
.army-card { border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 244, 214, 0.5); padding: 6px 9px 7px; margin-bottom: 7px; cursor: pointer; }
.army-card:hover { background: rgba(255, 236, 180, 0.75); }
.army-card.sel { border-color: #a8761c; background: rgba(255, 226, 150, 0.8); box-shadow: 0 0 0 2px rgba(168, 118, 28, 0.35); }
.ac-top { display: flex; align-items: center; gap: 6px; }
.ac-top .spacer { flex: 1; }
.ac-ic { font-size: 17px; }
.ac-meta { font-size: 12.5px; opacity: 0.85; margin: 2px 0 4px; }
.ac-bars { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 6px; align-items: center; font-size: 11.5px; }
.army-mb { display: block; height: 7px; border-radius: 4px; background: rgba(60, 40, 20, 0.28); overflow: hidden; border: 1px solid rgba(40, 25, 10, 0.4); }
.army-mb i { display: block; height: 100%; }
.flag { font-size: 14px; }
.flag.bad { filter: drop-shadow(0 0 2px #c0392b); }
.newarmy { width: 100%; margin-top: 4px; }
.army-empty { font-style: italic; opacity: 0.85; padding: 10px 4px; line-height: 1.4; }
.army-empty.big { padding: 24px 12px; text-align: center; font-size: 15px; }
.ad-head h3 { margin: 0; border: 0; font-size: 18px; }
.ad-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-rename { display: flex; align-items: center; gap: 6px; }
.ad-rename input { flex: 1 1 auto; min-width: 0; max-width: 280px; font: inherit; font-size: 16px; font-weight: bold; padding: 3px 7px; border: 2px solid #a8761c; border-radius: 6px; background: rgba(255, 250, 232, 0.95); color: #2b1b0e; }
.newarmy + .newarmy { margin-top: 6px; }
.ad-cmds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.ad-comp { font-size: 12.5px; opacity: 0.85; margin: 4px 0 2px; font-style: italic; }
.ad-grid { display: flex; gap: 18px; align-items: flex-start; margin-top: 4px; }
.ad-col { flex: 1 1 0; min-width: 0; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg.wrap { margin-bottom: 6px; }
.seg .btn.cur { outline: 2px solid #a8761c; background: rgba(255, 214, 120, 0.85); color: #2b1b0e; text-shadow: none; opacity: 1; }
#hud .armybtn { position: relative; }
#hud .armybtn.has-armies::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #3b6ea5; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.dlg-btns.col { flex-direction: column; align-items: stretch; }
@media (max-width: 760px) { .army-cols, .ad-grid { flex-direction: column; } .army-list { flex-basis: auto; width: 100%; } }

.owner-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: 0.9; margin-bottom: 2px; }
.owner-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(20, 12, 6, 0.7); display: inline-block; }

/* --- V4: esemény-szalag (háború / hódítás / csata), jobb felső sarok --- */
#evbanner { position: absolute; right: 12px; top: calc(var(--hud-h, 40px) + 10px); width: min(290px, 60vw); display: none; flex-direction: column; gap: 6px; z-index: 13; pointer-events: none; }
#evbanner.show { display: flex; }
.evb { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 2px solid #2b1005; border-radius: 6px; color: #fff4dc; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); animation: toast-in 0.25s ease-out; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); transition: opacity 0.4s, transform 0.4s; }
.evb.out { opacity: 0; transform: translateX(20px); }
.evb.bad { background: linear-gradient(180deg, #c8402e, #8a1a12); }
.evb.warn { background: linear-gradient(180deg, #c58a2a, #85591a); }
.evb.good { background: linear-gradient(180deg, #5a9a3a, #2f6a1f); }
.evb.info { background: linear-gradient(180deg, #4a78a8, #2c4c72); }
.evb-ic { font-size: 24px; }
.evb-t { min-width: 0; line-height: 1.25; }
.evb-t b { font-size: 15px; }
.evb-s { font-size: 12.5px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-hidden #evbanner { display: none !important; }

.wm-fac { flex-direction: column; align-items: stretch; gap: 4px; }
.wm-fac.sel { background: rgba(168, 118, 28, 0.2); box-shadow: 0 0 0 1px rgba(168, 118, 28, 0.6) inset; }
.wm-frow { display: flex; align-items: center; gap: 8px; }
.wm-qa { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 2px 20px; }

/* --- V5: Útvonal-tervező és Kereskedelmi ablak (R) --- */
#routes { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.routes-win { width: min(1080px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#routes.show.routes-win { display: flex; }
.rt-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.rt-title { font-size: 22px; font-weight: bold; }
.rt-sub { font-style: italic; opacity: 0.8; font-size: 13px; }
.rt-head .spacer { flex: 1; }
.rt-tabs { display: flex; gap: 6px; }
.rt-tabs .tabbtn.on { outline: 2px solid #a8761c; background: rgba(255, 214, 120, 0.85); color: #2b1b0e; text-shadow: none; }
.rt-body { overflow-y: auto; padding-right: 4px; }
.routes-win h3 { margin: 6px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.routes-win h4 { margin: 8px 0 4px; font-size: 13.5px; }
.rt-cols { display: flex; gap: 16px; align-items: flex-start; }
.rt-list { flex: 0 0 330px; max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 140px); overflow-y: auto; }
.rt-plan { flex: 1 1 auto; min-width: 0; }
.rt-card { border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 244, 214, 0.5); padding: 6px 9px 7px; margin-bottom: 7px; cursor: pointer; }
.rt-card:hover { background: rgba(255, 236, 180, 0.75); }
.rt-card.sel { border-color: #a8761c; background: rgba(255, 226, 150, 0.8); }
.rt-card.blocked { border-color: #c4432e; }
.rt-card.paused { opacity: 0.8; }
.rc-top { display: flex; align-items: center; gap: 6px; }
.rc-top .spacer { flex: 1; }
.rc-st { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: rgba(60, 40, 20, 0.15); }
.rc-st.good { background: #8fd37e; } .rc-st.bad { background: #e0705c; color: #fff; }
.rc-meta, .rc-goods { font-size: 12.5px; opacity: 0.9; margin-top: 2px; }
.rc-stats { display: flex; gap: 12px; font-size: 12px; margin-top: 3px; opacity: 0.9; flex-wrap: wrap; }
.rc-warn { font-size: 12px; color: #a8301e; margin-top: 3px; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rt-empty { font-style: italic; opacity: 0.85; padding: 10px 4px; line-height: 1.4; }
.rt-empty.big { padding: 24px 12px; text-align: center; font-size: 15px; }
.rt-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; flex-wrap: wrap; }
.rt-row > label { flex: 0 0 74px; font-weight: 600; }
.rt-row > label.mini { flex: 0 0 auto; font-weight: normal; opacity: 0.8; }
.rt-row .inp { min-width: 0; }
.rt-row select.inp { flex: 1 1 200px; }
.inp.num { width: 76px; }
.rt-goods { margin: 8px 0; padding: 6px 8px; border: 1px dashed rgba(60, 40, 20, 0.4); border-radius: 6px; }
.rt-goodhead, .rt-good { display: grid; grid-template-columns: 1.4fr 80px 1.2fr 90px 34px; gap: 6px; align-items: center; margin: 3px 0; }
.rt-goodhead { font-size: 11.5px; opacity: 0.7; }
.rt-good select.inp { width: 100%; }
.rt-goodbtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rt-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.rt-hint { font-size: 12.5px; font-style: italic; opacity: 0.8; margin: 4px 0; }
.rt-est { border: 2px solid rgba(60, 40, 20, 0.4); border-radius: 8px; padding: 6px 10px 8px; margin: 8px 0; }
.rt-est.good { background: rgba(190, 230, 160, 0.4); border-color: #4f8a30; }
.rt-est.bad { background: rgba(240, 180, 160, 0.45); border-color: #c4432e; }
.rt-estgrid { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin-top: 4px; align-items: center; }
.rt-estgrid .pos { color: #2f6a20; } .rt-estgrid .neg { color: #a8301e; }
.riskbar { display: block; height: 8px; width: 140px; border-radius: 4px; background: rgba(60, 40, 20, 0.25); overflow: hidden; }
.riskbar i { display: block; height: 100%; }
.rt-btns { display: flex; gap: 8px; margin-top: 8px; }
.mk-partners { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mk-head { display: flex; align-items: center; gap: 16px; padding: 6px 4px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); flex-wrap: wrap; }
.mk-head .bad { color: #a8301e; font-weight: 700; }
.mk-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
.mk-table th { text-align: left; font-size: 12px; opacity: 0.75; padding: 4px 6px; border-bottom: 2px solid rgba(60, 40, 20, 0.3); }
.mk-table td { padding: 3px 6px; border-bottom: 1px dotted rgba(60, 40, 20, 0.22); vertical-align: middle; }
.mk-cell { display: flex; align-items: center; gap: 6px; }
.mk-cell span { min-width: 92px; }
.btn.tiny { font-size: 11.5px; padding: 1px 7px; }
.trend.up { color: #2f6a20; } .trend.down { color: #a8301e; } .trend.flat { opacity: 0.5; }
.dim { opacity: 0.55; }
.mk-routes { margin-top: 10px; }
.mk-route { padding: 3px 6px; border-bottom: 1px dotted rgba(60, 40, 20, 0.22); cursor: pointer; font-size: 13px; }
.mk-route:hover { background: rgba(255, 236, 180, 0.6); }
#hud .routebtn { position: relative; }
#hud .routebtn.has-blocked::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #d4402a; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); animation: pc-pulse 1.4s ease-in-out infinite; }
@media (max-width: 860px) { .rt-cols { flex-direction: column; } .rt-list { flex-basis: auto; width: 100%; max-height: 220px; } }

.wm-chk { display: block; margin: 10px 0 2px; font-size: 13px; cursor: pointer; }

#tooltip .tipx { font-size: 12.5px; opacity: 0.92; }

/* --- V5: Tudás-ablak (U) --- */
#knowledge { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.know-win { width: min(980px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#knowledge.show.know-win { display: flex; }
.kn-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.kn-title { font-size: 22px; font-weight: bold; }
.kn-sub { font-style: italic; opacity: 0.85; font-size: 13px; }
.kn-head .spacer { flex: 1; }
.kn-body { overflow-y: auto; padding-right: 4px; }
.know-win h3 { margin: 6px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.know-win h4 { margin: 10px 0 4px; font-size: 13.5px; opacity: 0.9; }
.kn-cols { display: flex; gap: 16px; align-items: flex-start; }
.kn-schools { flex: 0 0 260px; }
.kn-research { flex: 1 1 auto; min-width: 0; }
.kn-school { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; margin-bottom: 5px; border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 8px; background: rgba(255, 244, 214, 0.5); }
.kn-school .kn-perday { margin-left: auto; font-size: 12.5px; opacity: 0.9; }
.kn-school .rc-st.good { background: #8fd37e; } .kn-school .rc-st.bad { background: #e0705c; color: #fff; }
.kn-empty { font-size: 13px; font-style: italic; opacity: 0.8; padding: 6px 2px; }
.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; }
.kn-card { border: 2px solid rgba(60, 40, 20, 0.4); border-radius: 8px; padding: 6px 9px 7px; background: rgba(255, 244, 214, 0.5); display: flex; flex-direction: column; gap: 3px; }
.kn-card.ready { border-color: #a8761c; background: rgba(255, 226, 150, 0.75); }
.kn-card.done { background: rgba(160, 210, 140, 0.4); border-color: rgba(60, 120, 40, 0.5); }
.kn-card.locked { opacity: 0.78; }
.kc-top { display: flex; align-items: center; gap: 6px; }
.kc-top .spacer { flex: 1; }
.kc-cost { font-size: 12.5px; white-space: nowrap; }
.kc-desc { font-size: 12.5px; opacity: 0.92; }
.kc-why { font-size: 12px; color: #8a4a1c; }
.kc-go { align-self: flex-start; margin-top: 3px; }
#hud .knowbtn.has-ready::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #3b8a4a; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) { .kn-cols { flex-direction: column; } .kn-schools { flex-basis: auto; width: 100%; } }

/* --- V5: Konvojok fül, kíséret (R ablak) --- */
.rc-conv { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.rc-cv { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 3px; }
.cvbar { display: inline-block; width: 90px; height: 8px; background: rgba(60, 40, 20, 0.3); border: 1px solid rgba(40, 25, 10, 0.5); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.cvbar.wide { flex: 1 1 auto; width: auto; }
.cvbar i { display: block; height: 100%; background: linear-gradient(180deg, #8ee07a, #4f9a3a); }
.rc-escort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; }
.rc-escort .inp { max-width: 170px; }
.rt-adv { border: 2px dashed rgba(60, 40, 20, 0.4); border-radius: 8px; padding: 6px 10px 8px; margin: 8px 0; background: rgba(255, 244, 214, 0.35); }
.mk-table.adv tr.ok td { background: rgba(160, 210, 140, 0.35); }
.rt-list.wide { flex: 1 1 0; max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 140px); }
.cv-side { flex: 0 0 330px; }
.cv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 3px 2px; border-bottom: 1px dotted rgba(60, 40, 20, 0.25); }
.cv-row .dim { opacity: 0.75; font-size: 12px; }
.rt-card.cv { cursor: default; }
.rc-stats b.good { color: #2e7d32; } .rc-stats b.bad { color: #b3321e; } .rc-stats b.neutral { color: #9a6b0a; }
@media (max-width: 860px) { .cv-side { flex-basis: auto; width: 100%; } }
.rc-state { font-size: 12.5px; margin-top: 3px; opacity: 0.92; }
.rc-state.wait { color: #8a5a1c; }
.rt-fleet { font-weight: normal; opacity: 0.85; }

/* --- V5.1: Kitelepülés-ablak (E): Erőforrás-térkép, kitelepülés-varázsló, Kolónia-panel --- */
#frontier { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 31; }
.fr-win { width: min(1100px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#frontier.show.fr-win { display: flex; }
.fr-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.fr-title { font-size: 22px; font-weight: bold; }
.fr-sub { font-style: italic; opacity: 0.85; font-size: 13px; }
.fr-head .spacer { flex: 1; }
.fr-body { overflow-y: auto; padding-right: 4px; }
.fr-win h3 { margin: 4px 0 6px; font-size: 15px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); }
.fr-win h4 { margin: 8px 0 4px; font-size: 13.5px; }
.fr-cols { display: flex; gap: 14px; align-items: flex-start; }
.fr-mapcol { flex: 0 0 440px; }
.fr-listcol { flex: 1 1 auto; min-width: 0; }
.fr-canvas { display: block; border: 2px solid rgba(60, 40, 20, 0.6); border-radius: 6px; margin: 6px 0; cursor: crosshair; background: #0c110d; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fr-chip .fr-dot { width: 15px; height: 15px; line-height: 15px; font-size: 8.5px; }
.fr-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700; border: 1.5px solid rgba(255, 251, 232, 0.9); box-sizing: border-box; vertical-align: middle; }
.fr-dot.big { width: 30px; height: 30px; font-size: 13px; flex: 0 0 30px; }
.fr-list { max-height: 210px; overflow-y: auto; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: 3px; border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 7px; background: rgba(255, 244, 214, 0.5); cursor: pointer; }
.fr-row:hover { background: rgba(255, 236, 180, 0.75); }
.fr-row.sel { border-color: #a8761c; background: rgba(255, 226, 150, 0.8); }
.fr-row.claim-theirs { opacity: 0.7; }
.fr-rowmain { flex: 1 1 auto; min-width: 0; }
.fr-rowsub { font-size: 12px; opacity: 0.9; }
.fr-card { border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 244, 214, 0.55); padding: 8px 10px; margin-top: 8px; }
.fr-cardtop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fr-ic { font-size: 28px; }
.fr-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 13px; }
.fr-facts b.bad, .fr-lines .bad { color: #b3321e; } .fr-facts b.good { color: #2e7d32; } .fr-facts b.warn { color: #9a6b0a; }
.fr-wiz { margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgba(60, 40, 20, 0.4); }
.fr-kind { font-weight: bold; font-size: 14px; }
.fr-cost { font-size: 13px; margin: 4px 0; }
.fr-res.lack { color: #b3321e; font-weight: bold; }
.fr-detail { flex: 1 1 auto; min-width: 0; }
.fr-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.fr-lines td { padding: 2px 6px; border-bottom: 1px dotted rgba(60, 40, 20, 0.25); vertical-align: top; }
.fr-lines td.k { width: 120px; opacity: 0.75; }
.fr-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 3px 0; }
.fr-garrison { margin-top: 8px; border-top: 1px dashed rgba(60, 40, 20, 0.4); }
.wm-chk.inline { display: inline; margin: 0; }
#hud .frontbtn.has-alert::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #d4402a; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); animation: pc-pulse 1.4s ease-in-out infinite; }
@media (max-width: 960px) { .fr-cols { flex-direction: column; } .fr-mapcol { flex-basis: auto; width: 100%; } .fr-canvas { max-width: 100%; height: auto; } }
.fr-outlook { border: 2px dashed rgba(60, 40, 20, 0.4); border-radius: 8px; padding: 4px 9px 6px; margin-bottom: 8px; background: rgba(255, 244, 214, 0.35); }
.fr-ol { padding: 3px 0; border-bottom: 1px dotted rgba(60, 40, 20, 0.25); font-size: 13px; }
.fr-ol:last-child { border-bottom: 0; }
.fr-ol.link { cursor: pointer; }
.fr-ol.link:hover { background: rgba(255, 236, 180, 0.6); }
.fr-ol .dim { font-size: 12px; opacity: 0.85; }
.fr-ol .rc-st { margin-left: 6px; }
.econ-depots td { vertical-align: top; }

/* --- V5.2: Tanács-ablak (C) és Rendeletek-ablak (V) --- */
#council, #decrees { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 33; }
.council-win { width: min(760px, 96vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 16px 14px; font-size: 14.5px; overflow: hidden; }
.decrees-win { width: min(1000px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#council.show.council-win, #decrees.show.decrees-win { display: flex; }
.cn-head, .dc-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cn-title, .dc-title { font-size: 22px; font-weight: bold; }
.cn-sub, .dc-sub { font-style: italic; opacity: 0.85; font-size: 13px; }
.cn-head .spacer, .dc-head .spacer { flex: 1; }
.cn-body, .dc-body { overflow-y: auto; padding-right: 4px; }
.cn-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cn-top { display: flex; gap: 14px; align-items: center; }
.cn-portrait canvas { display: block; width: 96px; height: 96px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.cn-who h2 { margin: 0 0 6px; font-size: 21px; }
.cn-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cn-chip { font-size: 12px; padding: 1px 9px; border-radius: 10px; background: rgba(60, 40, 20, 0.16); }
.cn-chip.bad { background: #e0705c; color: #fff; }
.cn-text { font-size: 15.5px; line-height: 1.45; margin: 10px 2px 12px; }
.cn-opts { display: flex; flex-direction: column; gap: 7px; }
.cn-opt { text-align: left; border: 2px solid rgba(60, 40, 20, 0.5); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 240, 200, 0.92), rgba(238, 214, 160, 0.92)); color: #2b1b0e; padding: 7px 11px 8px; cursor: pointer; font: inherit; text-shadow: none; }
.cn-opt:hover:not(:disabled) { border-color: #a8761c; background: linear-gradient(180deg, rgba(255, 232, 170, 0.98), rgba(246, 206, 120, 0.98)); }
.cn-opt.off { opacity: 0.55; cursor: not-allowed; }
.cn-optl { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cn-optl b { flex: 1 1 auto; }
.cn-cost { display: inline-flex; gap: 6px; font-size: 13px; }
.cn-res.lack { color: #b3321e; font-weight: bold; }
.cn-prev { margin: 4px 0 0 18px; padding: 0; font-size: 12.5px; opacity: 0.92; }
.cn-tip { font-size: 12px; font-style: italic; opacity: 0.8; margin-top: 3px; }
.dc-intro { font-size: 13px; font-style: italic; opacity: 0.88; margin-bottom: 8px; }
.dc-slots { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.dc-pip { width: 14px; height: 14px; border-radius: 3px; border: 2px solid rgba(60, 40, 20, 0.6); background: rgba(255, 244, 214, 0.5); }
.dc-pip.used { background: #a8761c; }
.dc-cols { display: flex; gap: 16px; align-items: flex-start; }
.dc-col { flex: 1 1 0; min-width: 0; }
.dc-card { border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 244, 214, 0.5); padding: 6px 10px 8px; margin-bottom: 7px; }
.dc-card.active { border-color: #5a9a3a; background: rgba(190, 226, 150, 0.45); }
.dc-card.locked { opacity: 0.7; }
.dc-top { display: flex; align-items: center; gap: 6px; }
.dc-top .spacer { flex: 1; }
.dc-desc { font-size: 13px; margin: 3px 0; }
.dc-fx { margin: 2px 0 2px 18px; padding: 0; font-size: 12.5px; }
.dc-up { font-size: 12.5px; opacity: 0.9; }
#hud .councilbtn.has-pending::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #3b6ea5; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
#hud .councilbtn.urgent::after { background: #d4402a; animation: pc-pulse 1.4s ease-in-out infinite; }
#hud .decreesbtn.has-free::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #3b8a4a; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) { .dc-cols { flex-direction: column; } .cn-top { flex-direction: column; align-items: flex-start; } }

/* --- V5.2: A falu ablak (I): név, címer, kozmetikai katalógus --- */
#village { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 33; }
.village-win { width: min(940px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#village.show.village-win { display: flex; }
.vl-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.vl-title { font-size: 22px; font-weight: bold; }
.vl-sub { font-style: italic; opacity: 0.85; font-size: 14px; }
.vl-head .spacer { flex: 1; }
.vl-body { overflow-y: auto; padding-right: 4px; }
.em-editor { display: flex; gap: 18px; align-items: flex-start; }
.em-left { flex: 0 0 168px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.em-left canvas { display: block; }
.em-name { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 5px 8px; border: 2px solid rgba(60, 40, 20, 0.5); border-radius: 6px; background: rgba(255, 248, 224, 0.92); color: #2b1b0e; text-align: center; }
.em-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.em-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.em-sec h4 { margin: 0 0 4px; font-size: 13px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.em-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.em-opt { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 62px; padding: 4px 3px 3px; border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 7px; background: rgba(255, 244, 214, 0.55); color: #2b1b0e; cursor: pointer; font: inherit; text-shadow: none; }
.em-opt.wide { width: 74px; }
.em-opt:hover:not(:disabled) { border-color: #a8761c; background: rgba(255, 232, 170, 0.85); }
.em-opt.on { border-color: #a8761c; background: rgba(255, 214, 120, 0.9); box-shadow: 0 0 0 1px #a8761c inset; }
.em-opt.locked { opacity: 0.55; cursor: not-allowed; }
.em-oname { font-size: 10.5px; line-height: 1.1; text-align: center; }
.em-none { display: inline-block; width: 34px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; opacity: 0.6; }
.em-slots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.em-slot { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 12px; background: rgba(255, 244, 214, 0.55); color: #2b1b0e; font: inherit; font-size: 12px; cursor: pointer; text-shadow: none; }
.em-slot i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.6); display: inline-block; }
.em-slot.on { border-color: #a8761c; background: rgba(255, 214, 120, 0.9); }
.em-pal { display: flex; flex-wrap: wrap; gap: 4px; }
.em-sw { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, 0.55); cursor: pointer; padding: 0; }
.em-sw.on { outline: 3px solid #fff; outline-offset: -1px; box-shadow: 0 0 0 2px #a8761c; }
.cs-catalog { display: flex; flex-direction: column; gap: 8px; }
.cs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-head .spacer { flex: 1; }
.cs-count { font-size: 12.5px; opacity: 0.85; }
.cs-dev { font-size: 12.5px; cursor: pointer; }
.cs-note { font-size: 12.5px; font-style: italic; opacity: 0.85; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.cs-card { display: flex; gap: 10px; border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 244, 214, 0.5); padding: 7px 9px; }
.cs-card.on { border-color: #5a9a3a; background: rgba(190, 226, 150, 0.45); }
.cs-card.locked { opacity: 0.8; }
.cs-prev { flex: 0 0 92px; display: flex; align-items: center; justify-content: center; }
.cs-prev canvas { display: block; }
.cs-icon { font-size: 38px; }
.cs-info { flex: 1 1 0; min-width: 0; }
.cs-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.cs-desc { font-size: 12.5px; margin: 3px 0; opacity: 0.92; }
#hud .identchip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#hud .identchip canvas { display: block; }
#hud .identname { font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dip-me { display: flex; align-items: center; gap: 10px; padding: 4px 10px; margin-bottom: 8px; border: 2px solid rgba(160, 120, 40, 0.6); border-radius: 8px; background: rgba(255, 232, 150, 0.35); cursor: pointer; }
.dip-me canvas { display: block; }
.dip-mesub { font-size: 12px; font-style: italic; opacity: 0.8; }
@media (max-width: 860px) { .em-editor { flex-direction: column; align-items: center; } }

/* --- V5.2: Hősök-ablak (O) --- */
#heroes { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 33; }
.heroes-win { width: min(1000px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#heroes.show.heroes-win { display: flex; }
.ho-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.ho-title { font-size: 22px; font-weight: bold; }
.ho-sub { font-style: italic; opacity: 0.85; font-size: 13px; }
.ho-head .spacer { flex: 1; }
.ho-body { overflow-y: auto; padding-right: 4px; }
.ho-cols { display: flex; gap: 14px; align-items: flex-start; }
.ho-list { flex: 0 0 300px; display: flex; flex-direction: column; gap: 6px; }
.ho-right { flex: 1 1 0; min-width: 0; }
.ho-card { display: flex; align-items: center; gap: 9px; text-align: left; border: 2px solid rgba(60, 40, 20, 0.4); border-radius: 8px; background: rgba(255, 244, 214, 0.55); color: #2b1b0e; padding: 4px 8px 4px 4px; cursor: pointer; font: inherit; text-shadow: none; }
.ho-card.on { border-color: #a8761c; background: rgba(255, 214, 120, 0.85); }
.ho-card.dead { opacity: 0.7; filter: grayscale(0.7); }
.ho-card canvas { display: block; border-radius: 5px; flex: 0 0 auto; }
.ho-cinfo { flex: 1 1 0; min-width: 0; }
.ho-crole { font-size: 12px; opacity: 0.9; }
.ho-cdead { font-size: 11.5px; font-style: italic; }
.ho-bars { height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.ho-loy { display: block; height: 100%; background: #2e8b57; }
.rc-st.dead { background: #8a8378; color: #fff; }
.ho-fallen { margin: 8px 0 2px; font-size: 13px; opacity: 0.85; }
.ho-detail { border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 8px; background: rgba(255, 244, 214, 0.45); padding: 10px 12px; }
.ho-dtop { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.ho-dtop h2 { margin: 0 0 3px; font-size: 20px; }
.ho-dport canvas { display: block; border-radius: 7px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.ho-dsub { font-size: 13px; opacity: 0.9; }
.ho-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 3px 0; }
.ho-bar span { flex: 0 0 90px; }
.ho-track { flex: 1 1 0; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.ho-track i { display: block; height: 100%; }
.ho-lines { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.ho-line { margin: 2px 0; }
.ho-recs h3 { margin: 12px 0 6px; }
.ho-recgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.ho-rec { border: 2px solid rgba(60, 40, 20, 0.4); border-radius: 8px; background: rgba(255, 244, 214, 0.5); padding: 6px 9px 8px; }
.ho-rec.locked { opacity: 0.65; }
.ho-rdesc { font-size: 12.5px; margin: 3px 0; }
.ho-rmeta { font-size: 12px; opacity: 0.9; margin-bottom: 4px; }
#hud .herobtn.has-free::after { content: attr(data-badge); position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #c58a17; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) { .ho-cols { flex-direction: column; } .ho-list { flex-basis: auto; width: 100%; } }

/* --- V5.2: Piaci hírek és határidős szerződések (R → 📰 Hírek) --- */
.mn-cols { display: flex; gap: 14px; align-items: flex-start; }
.mn-left { flex: 0 0 300px; min-width: 0; }
.mn-right { flex: 1 1 0; min-width: 0; }
.mn-left h3, .mn-right h4 { margin: 0 0 6px; }
.mn-newslist { display: flex; flex-direction: column; gap: 5px; max-height: 470px; overflow-y: auto; padding-right: 3px; }
.mn-news { display: flex; gap: 8px; align-items: flex-start; border: 2px solid rgba(60, 40, 20, 0.3); border-radius: 7px; background: rgba(255, 244, 214, 0.5); padding: 5px 8px; cursor: pointer; font-size: 13px; }
.mn-news:hover { border-color: #a8761c; }
.mn-news.on { border-color: #a8761c; background: rgba(255, 214, 120, 0.7); }
.mn-ic { font-size: 18px; line-height: 1.1; }
.mn-nt small { opacity: 0.8; font-size: 11.5px; }
.mn-res { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mn-res .tabbtn { padding: 2px 7px; min-width: 32px; }
.mn-chartbox { margin-bottom: 8px; }
.mn-chart { display: block; width: 100%; max-width: 380px; height: auto; border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 6px; }
.mn-form { border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 8px; background: rgba(255, 244, 214, 0.45); padding: 8px 10px; margin-bottom: 10px; }
.mn-sides { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mn-frow { display: flex; gap: 10px; align-items: center; margin: 5px 0; }
.mn-frow > span { flex: 0 0 76px; font-size: 13px; }
.mn-in { width: 82px; font: inherit; padding: 3px 6px; border: 2px solid rgba(60, 40, 20, 0.5); border-radius: 5px; background: rgba(255, 248, 224, 0.95); color: #2b1b0e; }
.mn-days { display: flex; flex-wrap: wrap; gap: 4px; }
.mn-days .btn.on { outline: 2px solid #a8761c; background: rgba(255, 214, 120, 0.85); color: #2b1b0e; text-shadow: none; }
.mn-sum { font-size: 12.5px; margin: 7px 0; line-height: 1.45; }
.mn-sum small { opacity: 0.8; display: block; margin-top: 3px; }
.mn-cts { display: flex; flex-direction: column; gap: 6px; }
.mn-ct { border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 7px; background: rgba(255, 244, 214, 0.5); padding: 5px 9px; font-size: 13px; }
.mn-ct.settled { opacity: 0.85; }
.mn-ct1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mn-ct2 { font-size: 12px; opacity: 0.88; }
.mn-ct3 { font-size: 12.5px; font-weight: bold; }
.mn-ct3.win { color: #2e7d32; }
.mn-ct3.loss { color: #b3321e; }
@media (max-width: 860px) { .mn-cols { flex-direction: column; } .mn-left { flex-basis: auto; width: 100%; } }

/* --- V5.2: Hadjárat-nézet (Világtérkép → ⛺ Hadjárat) --- */
.wm-modes { margin-bottom: 8px; }
.cp-panel h4 { margin: 8px 0 5px; font-size: 14px; }
.cp-panel h4 small { font-weight: normal; opacity: 0.85; }
.cp-card { border: 2px solid rgba(60, 40, 20, 0.35); border-radius: 7px; background: rgba(255, 244, 214, 0.5); padding: 5px 8px 6px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.cp-card.on { border-color: #a8761c; background: rgba(255, 214, 120, 0.7); }
.cp-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cp-meta { font-size: 12px; opacity: 0.9; margin: 2px 0; }
.cp-bar { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin: 2px 0; }
.cp-bar span { flex: 0 0 76px; }
.cp-track { flex: 1 1 0; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.cp-track i { display: block; height: 100%; }
.cp-pending { padding: 6px 8px; margin-bottom: 6px; border: 2px dashed #a8761c; border-radius: 7px; background: rgba(255, 214, 120, 0.5); font-size: 13px; }
.cp-renown { margin-bottom: 4px; }

/* --- V5.2: Katasztrófa-szalag (előjelzés + aktív) --- */
#disasters { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 8px); transform: translateX(-50%); display: none; gap: 6px; z-index: 12; pointer-events: none; max-width: 70vw; flex-wrap: wrap; justify-content: center; }
#disasters.show { display: flex; }
.dz-chip { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 11px 4px 8px; border: 2px solid #d8a030; border-radius: 16px; background: linear-gradient(180deg, rgba(60, 36, 14, 0.92), rgba(30, 18, 8, 0.92)); color: #fff4dc; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5); font-size: 13px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.dz-chip.active { animation: dz-pulse 2.2s ease-in-out infinite; }
.dz-chip.outlook { opacity: 0.92; border-style: dashed; }
.dz-ic { font-size: 19px; line-height: 1; }
.dz-t { display: flex; flex-direction: column; line-height: 1.15; }
.dz-t small { opacity: 0.85; font-size: 11.5px; }
@keyframes dz-pulse { 0%, 100% { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 130, 50, 0.65); } }

/* V5.2: a kijelölt fül kiemelése az új ablakokban (Tanács, Hírek, A falu, Világtérkép módok) */
.cn-tabs .tabbtn.on, .mn-sides .tabbtn.on, .mn-res .tabbtn.on, .vl-tabs .tabbtn.on, .wm-modes .tabbtn.on { outline: 2px solid #a8761c; background: rgba(255, 214, 120, 0.9); color: #2b1b0e; text-shadow: none; }

/* --- V5.2: A falu története (Y) --- */
#story { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 34; }
.story-win { width: min(800px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; overflow: hidden; }
#story.show.story-win { display: flex; }
.sy-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; }
.sy-title { font-size: 22px; font-weight: bold; }
.sy-status { font-style: italic; opacity: 0.85; font-size: 13px; }
.sy-head .spacer { flex: 1; }
.sy-canvas { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border: 3px solid rgba(60, 40, 20, 0.6); border-radius: 6px; background: #2a2118; }
.sy-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sy-slider { flex: 1 1 auto; }

/* --- V5.3: Bolt (F4), próbaviselet, előnézetek, sima skin-csere --- */
#ui { transition: opacity 0.3s ease; }
#ui.skin-swap { opacity: 0.28; transition-duration: 0.16s; }
#shop { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 35; }
.shop-win { width: min(1000px, 97vw); max-height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); flex-direction: column; padding: 10px 14px 12px; font-size: 14px; overflow: hidden; }
#shop.show.shop-win { display: flex; }
.sh-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.sh-title { font-size: 22px; font-weight: bold; }
.sh-test { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: #e3b72e; color: #3a2410; font-weight: 700; }
.sh-sub { font-style: italic; opacity: 0.85; font-size: 13px; }
.sh-head .spacer { flex: 1; }
.sh-tabs { margin-bottom: 8px; }
.sh-tabs .tabbtn.on { outline: 2px solid #a8761c; background: rgba(255, 214, 120, 0.9); color: #2b1b0e; text-shadow: none; }
.sh-body { overflow-y: auto; padding-right: 4px; }
.sh-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sh-card .cs-prev { flex-basis: 96px; }
.sh-bundle { flex-direction: column; }
.sh-bprev { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-mini canvas { display: block; border-radius: 4px; }
.sh-mini { border: 1px solid rgba(60, 40, 20, 0.4); border-radius: 5px; padding: 2px; background: rgba(255, 244, 214, 0.6); }
.sh-bnames { font-size: 12px; opacity: 0.85; margin: 3px 0; }
.sh-modes { display: flex; flex-direction: column; gap: 8px; }
.ip-title, .ip-music { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 88px; min-height: 56px; border: 2px solid rgba(60, 40, 20, 0.45); border-radius: 8px; background: rgba(255, 236, 190, 0.7); font-size: 12px; text-align: center; padding: 3px; }
.ip-title span, .ip-note { font-size: 24px; line-height: 1; }
.tryon-bar { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 7px 14px; border: 2px solid #a8761c; border-radius: 22px; background: linear-gradient(180deg, rgba(60, 36, 14, 0.95), rgba(30, 18, 8, 0.95)); color: #fff4dc; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55); z-index: 36; font-size: 14px; }
.tryon-bar.show { display: flex; }
.to-ic { font-size: 18px; }
.to-label { font-weight: 700; }
.to-timer { opacity: 0.85; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- V5.5: Útmutató (ⓘ Infó, F1) és a kontextuális ⓘ gombok --- */
.info-i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; font: bold 11px/1 Georgia, serif; font-style: normal; cursor: pointer; color: #3b2710; background: rgba(217, 169, 58, 0.7); border: 1px solid rgba(60, 40, 20, 0.55); vertical-align: middle; user-select: none; text-shadow: none; transition: background 0.12s, opacity 0.12s; }
.info-i:hover { background: #f0c648; }
.info-i:focus-visible { outline: 2px solid #a8761c; outline-offset: 1px; }
.info-i.win { margin: 0 2px 0 0; width: 22px; height: 22px; font-size: 14px; }
#hud .statw { position: relative; display: inline-flex; align-items: center; }
#hud .info-i.hud { position: absolute; right: -9px; top: -7px; width: 14px; height: 14px; margin: 0; font-size: 10px; opacity: 0; pointer-events: none; z-index: 2; }
#hud .statw:hover .info-i.hud, #hud .info-i.hud:focus-visible { opacity: 0.95; pointer-events: auto; }
#hud .guidebtn { font-family: Georgia, serif; font-weight: bold; }
@keyframes gd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 207, 58, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 207, 58, 0.55); } }
#hud .guidebtn.attn { animation: gd-pulse 1.8s ease-in-out 8; }
#hud .guidebtn.on { background: linear-gradient(180deg, #d9a93a, #a77a1c); color: #2b1b0e; }
.card .info-i { position: absolute; top: 2px; right: 2px; margin: 0; width: 14px; height: 14px; font-size: 10px; opacity: 0.55; }
.card:hover .info-i, .card .info-i:focus-visible { opacity: 1; }
.phead .info-i { margin-left: 2px; }
.guide-hint h4 { margin: 0 0 2px; font-size: 14px; }
.guide-hint .gh-sum { font-size: 13px; }
.guide-hint .gh-more, #tooltip .gh-more { margin-top: 3px; font-size: 11.5px; opacity: 0.75; font-style: italic; }

#guide { position: absolute; left: 50%; top: calc(var(--hud-h, 40px) + 10px); transform: translateX(-50%); display: none; z-index: 34; }
.guide-win { width: min(1120px, 97vw); height: calc(100vh / var(--ui-scale) - var(--hud-h, 40px) - 24px); max-height: 780px; flex-direction: column; padding: 10px 14px 12px; font-size: 14.5px; overflow: hidden; }
#guide.show.guide-win { display: flex; }
.gd-head { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.gd-head .spacer { flex: 1; }
.gd-title { font-size: 22px; font-weight: bold; margin-right: 4px; }
.gd-title small { font-size: 13px; font-weight: normal; opacity: 0.7; }
.gd-search { flex: 0 1 330px; min-width: 150px; padding: 4px 9px; font: inherit; font-size: 14px; color: var(--ink); background: rgba(255, 248, 224, 0.85); border: 2px solid rgba(60, 40, 20, 0.5); border-radius: 14px; user-select: text; -webkit-user-select: text; }
.gd-search:focus { outline: none; border-color: #a8761c; background: #fffaf0; }
.gd-wikilink { text-decoration: none; display: inline-block; }
.gd-treebtn { display: none; }
.gd-body { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; position: relative; }
.gd-tree { flex: 0 0 258px; overflow-y: auto; border-right: 2px solid rgba(60, 40, 20, 0.25); padding-right: 8px; scrollbar-width: thin; }
.gd-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 0 8px 14px 2px; user-select: text; -webkit-user-select: text; line-height: 1.5; scrollbar-width: thin; }
.gd-node { display: flex; align-items: center; border-radius: 5px; padding: 1px 2px; }
.gd-node.d1 { padding-left: 16px; } .gd-node.d2 { padding-left: 30px; } .gd-node.d3 { padding-left: 44px; } .gd-node.d4 { padding-left: 58px; }
.gd-node:hover { background: rgba(217, 169, 58, 0.22); }
.gd-node.sel { background: rgba(217, 169, 58, 0.5); font-weight: bold; }
.gn-caret { flex: none; width: 18px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; color: #5a3d1c; }
.gn-caret.none { cursor: default; }
.gn-label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 2px 3px; color: inherit; text-decoration: none; }
.gn-i { flex: none; width: 20px; text-align: center; }
.gn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-crumbs { font-size: 12.5px; opacity: 0.8; margin-bottom: 2px; }
.gd-link { color: #7a4a14; text-decoration: underline dotted; cursor: pointer; }
.gd-link:hover { color: #a8761c; text-decoration: underline; }
.gd-h { margin: 0 0 4px; font-size: 25px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gd-hi { font-size: 28px; }
.gd-star { margin-left: auto; padding: 0 8px; font-size: 22px; line-height: 1.1; border: 0; background: none; cursor: pointer; color: #a8761c; }
.gd-star:hover { color: #d9a93a; transform: scale(1.12); }
.gd-star.on { color: #d98e1c; }
.gd-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; align-items: center; }
.gd-filter { padding: 3px 8px; font: inherit; font-size: 13px; color: var(--ink); background: rgba(255, 248, 224, 0.85); border: 2px solid rgba(60, 40, 20, 0.4); border-radius: 10px; }
.gd-back .gd-more { font-size: 12.5px; opacity: 0.75; align-self: center; }
.gd-kind { font-size: 12px; font-weight: normal; padding: 1px 9px; border-radius: 10px; background: rgba(60, 40, 20, 0.16); }
.gd-sum { font-style: italic; opacity: 0.88; margin-bottom: 6px; }
.gd-main p { margin: 8px 0; }
.gd-main h3 { margin: 16px 0 4px; font-size: 17px; border-bottom: 1px solid rgba(60, 40, 20, 0.3); padding-bottom: 2px; }
.gd-ul, .gd-ol { margin: 6px 0; padding-left: 22px; }
.gd-ul li, .gd-ol li { margin: 3px 0; }
.gd-ul.bad, .gd-ul.tip { list-style: none; padding-left: 2px; }
.gd-ul.bad li, .gd-ul.tip li { padding-left: 24px; position: relative; }
.gd-ul.bad li::before { content: '⚠'; position: absolute; left: 0; color: #a8761c; }
.gd-ul.tip li::before { content: '💡'; position: absolute; left: 0; }
.gd-ex { font-style: italic; border-left: 3px solid rgba(60, 40, 20, 0.35); padding-left: 10px; }
.gd-kv { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
.gd-kv th { text-align: left; vertical-align: top; width: 170px; padding: 4px 10px 4px 8px; background: rgba(60, 40, 20, 0.1); border-bottom: 1px solid rgba(60, 40, 20, 0.18); font-weight: bold; }
.gd-kv td { padding: 4px 8px; border-bottom: 1px solid rgba(60, 40, 20, 0.18); }
.gd-keys { width: 100%; margin: 4px 0 10px; }
.gd-keys th { width: 220px; white-space: normal; vertical-align: top; }
.gd-keys td { padding: 2px 0 2px 6px; }
.gd-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 7px 10px; border-radius: 6px; border-left: 4px solid #6a8aa8; background: rgba(106, 138, 168, 0.16); }
.gd-note.tip { border-left-color: #5c8a3a; background: rgba(92, 138, 58, 0.16); }
.gd-note.warn { border-left-color: #d9a93a; background: rgba(217, 169, 58, 0.24); }
.gd-note .gn-i { width: auto; flex: none; }
.gd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 14px 0 4px; font-size: 12.5px; opacity: 0.9; }
.gt-l { opacity: 0.7; }
.gd-tag { padding: 0 8px; border-radius: 9px; background: rgba(60, 40, 20, 0.1); color: inherit; text-decoration: none; }
.gd-tag:hover { background: rgba(217, 169, 58, 0.5); }
.gd-go { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.gd-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; background: rgba(60, 40, 20, 0.14); color: inherit; text-decoration: none; font-size: 13px; }
.gd-chip:hover { background: rgba(217, 169, 58, 0.5); }
.gd-list { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.gd-li { display: grid; grid-template-columns: 28px minmax(120px, 210px) 1fr; align-items: baseline; gap: 4px 8px; padding: 4px 8px; border-radius: 6px; background: rgba(60, 40, 20, 0.07); color: inherit; text-decoration: none; }
.gd-li:hover { background: rgba(217, 169, 58, 0.35); }
.gl-i { text-align: center; } .gl-t { font-weight: bold; } .gl-s { font-size: 13px; opacity: 0.85; }
.gl-k { grid-column: 3; font-size: 11.5px; opacity: 0.7; } .gl-k + .gl-s { grid-column: 2 / 4; }
.gd-empty { padding: 20px 6px; opacity: 0.8; font-style: italic; }
.gd-stepsbox { margin: 10px 0; }
.gs-prog { font-size: 13px; opacity: 0.85; margin-bottom: 4px; }
.gd-steps { list-style: none; margin: 0; padding: 0; }
.gd-steps li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; margin: 3px 0; border-radius: 6px; background: rgba(60, 40, 20, 0.07); }
.gd-steps li.done { opacity: 0.6; }
.gd-steps li.done .gs-text > div:first-child { text-decoration: line-through; }
.gd-steps li.cur { background: rgba(217, 169, 58, 0.4); outline: 2px solid #c8962a; }
.gs-mark { text-align: center; font-weight: bold; color: #4d7a2e; }
.gd-steps li.cur .gs-mark { color: #a8761c; }
.gs-unl { font-size: 12.5px; opacity: 0.9; margin-top: 2px; }
.gd-wins { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.gd-win { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: rgba(60, 40, 20, 0.07); }
.gw-i { font-size: 22px; text-align: center; }
.gw-k { margin-left: 8px; font: bold 12px Consolas, monospace; padding: 0 6px; border-radius: 4px; background: rgba(60, 40, 20, 0.18); }
.gw-d { font-size: 13px; opacity: 0.85; }
@media (max-width: 820px) {
  .gd-treebtn { display: inline-block; }
  .gd-tree { display: none; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 82%; max-width: 330px; background: #efe2bc; padding: 6px; border: 2px solid var(--wood-dark); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
  .gd-body.tree-open .gd-tree { display: block; }
  .gd-li { grid-template-columns: 26px 1fr; }
  .gl-s, .gl-k, .gl-k + .gl-s { grid-column: 2; }
  .gd-kv th { width: 120px; }
}

/* --- V5.6: szerver-üzenetek (verzió-sáv, hirdetmény, karbantartás, offline-jelző) és a Fiók ablak --- */
#notices { position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px; pointer-events: none; }
#notices > * { pointer-events: auto; }
#notices.has-maint { inset: 0; padding: 0; justify-content: center; }
.nt-update, .nt-motd { display: flex; align-items: center; gap: 10px; max-width: min(900px, 96vw); padding: 7px 12px; border-radius: 10px; border: 2px solid var(--wood-dark); background: linear-gradient(180deg, #f3e2a8, #e0c277); color: var(--ink); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); font-size: 14px; text-shadow: none; }
.nt-update { background: linear-gradient(180deg, #b3dc8e, #78ad56); }
.nt-motd.warn { background: linear-gradient(180deg, #f6d98a, #e0a93a); }
.nt-motd.bad { background: linear-gradient(180deg, #f0a898, #d4604a); color: #2b0f08; }
.nt-text { flex: 1 1 auto; }
.nt-ic { flex: none; font-size: 18px; }
.nt-x { flex: none; border: 0; background: none; cursor: pointer; font-size: 15px; opacity: 0.6; color: inherit; padding: 0 4px; }
.nt-x:hover { opacity: 1; }
.nt-offline { padding: 3px 12px; border-radius: 12px; background: rgba(20, 14, 8, 0.72); color: #f3e6c4; font-size: 12.5px; border: 1px solid rgba(255, 220, 150, 0.3); }
.nt-offline.admin { background: rgba(170, 110, 20, 0.85); }
.nt-maint { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 10, 5, 0.84); z-index: 61; padding: 12px; }
.nt-maint-box { padding: 22px 30px 18px; max-width: 540px; text-align: center; }
.nt-maint-box h2 { margin: 4px 0 8px; font-size: 26px; }
.nt-maint-ic { font-size: 44px; }

.acct-box { width: min(560px, 94vw); }
.acct-status { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 10px; border-radius: 10px; margin: 0 0 10px; background: rgba(60, 40, 20, 0.12); }
.acct-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8a8a; flex: none; }
.acct-status.online .dot { background: #5c9a3a; }
.acct-status.offline .dot { background: #c27a2a; }
.acct-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.acct-form { display: flex; flex-direction: column; gap: 8px; }
.acct-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.acct-form input[type="text"], .acct-form input[type="email"], .acct-form input[type="password"] { padding: 6px 9px; font: inherit; font-size: 15px; border: 2px solid rgba(60, 40, 20, 0.5); border-radius: 7px; background: rgba(255, 250, 235, 0.9); color: var(--ink); user-select: text; -webkit-user-select: text; }
.acct-form input:focus { outline: none; border-color: #a8761c; background: #fffaf0; }
.acct-form .link { background: none; border: none; box-shadow: none; color: #7a4a14; text-decoration: underline; align-self: flex-start; padding: 2px 0; font-size: 13px; cursor: pointer; min-height: 0; }
.acct-form .check { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.acct-err { color: #b3321e; font-weight: bold; font-size: 13.5px; min-height: 1.3em; }
.acct-ok { color: #3f7a24; font-weight: bold; font-size: 13.5px; min-height: 1.3em; }
.acct-me { padding: 8px 12px; border-radius: 8px; background: rgba(60, 40, 20, 0.1); margin-bottom: 8px; }
.acct-me b { font-size: 17px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.acct-info { font-size: 12.5px; opacity: 0.85; line-height: 1.4; }
.pw-meter { height: 6px; border-radius: 4px; background: rgba(60, 40, 20, 0.18); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; background: #b8382a; transition: width 0.15s, background 0.15s; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cloud-sec { margin-top: 12px; border-top: 2px solid rgba(60, 40, 20, 0.3); padding-top: 8px; }
.cloud-sec h3 { margin: 0 0 6px; font-size: 17px; }
.cloud-sec .slot-info.bad { color: #b3321e; }