/* ===========================================================================
   BIRODALMAK — BELSŐ KÉPERNYŐK KÖZÖS DESIGN-NYELVE   (css/screens.css)
   TULAJDONOS: „belső-képernyő design" agent.

   Mit csinál?  A 13 modális képernyőt 11 különböző agent írta, mind saját
   inline <style>-lal.  Ez a lap NEM írja át őket: az ÁLTALUK HASZNÁLT
   osztályokra húz egységes tipográfiát, ritmust, keretet, sávot és fókuszt.

   ── BETÖLTÉSI SORREND (fontos!) ────────────────────────────────────────────
   A képernyő-modulok futásidőben szúrják be a saját <style> elemüket a <head>
   VÉGÉRE, tehát azonos specificitásnál ŐK nyernének.  Ezért itt szinte minden
   szabály `#modalCard` (id) előtaggal megy — az id-specificitás mindig üt.
   Ez egyben a helyes hatókör is: csak a modálison belül változtatunk.

   A lapot a `js/ui/modal.js` maga tölti be, ha az index.html még nem tette.
   Az index.html-ben a helye: a <link> sor VÉGÉN (a style.css UTÁN).

   ⚠️ A `.bar` szabálynak KÖTELEZŐEN `display:block` — több képernyő
      <span class="bar">-ként használja, inline elemen nem érvényesül a
      magasság (ez már okozott szétnyúló sávokat).  Lásd lent, kiemelve.
   =========================================================================== */

:root {
  /* — térköz-skála (4 px rács) — */
  --sc-1: 4px; --sc-2: 6px; --sc-3: 8px; --sc-4: 11px; --sc-5: 14px; --sc-6: 18px; --sc-7: 24px;

  /* — tipográfia-skála — */
  --sc-f-hero: 20px;   /* képernyő-hős szám / név          */
  --sc-f-h1:   18px;   /* modális cím                      */
  --sc-f-h2:   12.5px; /* szekció-cím (Cinzel, verzál)     */
  --sc-f-h3:   11.5px; /* panel-cím                        */
  --sc-f-lead: 13px;   /* kiemelt folyószöveg              */
  --sc-f-body: 12.5px; /* alap                             */
  --sc-f-sm:   11.5px; /* másodlagos                       */
  --sc-f-xs:   10.5px; /* magyarázat, halk                 */
  --sc-lh:      1.5;
  --sc-lh-tight: 1.3;

  /* — felületek / élek — */
  --sc-surface:    rgba(255, 255, 255, .042);
  --sc-surface-2:  rgba(255, 255, 255, .065);
  --sc-sunken:     rgba(0, 0, 0, .26);
  --sc-edge:       rgba(255, 255, 255, .10);
  --sc-edge-soft:  rgba(255, 255, 255, .07);
  --sc-edge-gold:  rgba(217, 180, 95, .42);
  --sc-hover:      rgba(217, 180, 95, .15);
  --sc-r:   10px;   /* kártya   */
  --sc-r-s:  8px;   /* gomb     */
  --sc-r-p: 999px;  /* chip     */

  /* — szín-SZEREPEK (a style.css alap-tokenjeire épülve) — */
  --sc-accent: var(--gold-2);      /* arany = kiemelés   */
  --sc-sci:    var(--sci);         /* kék   = tudomány   */
  --sc-cult:   var(--cult);        /* lila  = kultúra    */
  --sc-good:   var(--good);        /* zöld  = jó         */
  --sc-bad:    var(--bad);         /* piros = veszély    */
  --sc-warn:   var(--warn);        /* sárga = figyelem   */
  --sc-faith:  #e0c98a;
  --sc-prod:   #e8ad5c;
  --sc-food:   #8fd6a2;

  --sc-shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset;
}

/* ==========================================================================
   1. A MODÁLIS VÁZ  — fejléc · fül-sáv · görgethető törzs · lábléc
   ========================================================================== */

#modal { padding: 18px; }

#modalCard {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: min(1080px, calc(100vw - 36px));
  max-height: min(88vh, 900px);
  overflow: hidden;                  /* a törzs görget, nem a kártya */
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .5);
  outline: none;
}
#modalCard.wide { max-width: min(1340px, calc(100vw - 36px)); }

/* — fejléc — */
#modalCard .mc-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-6);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(217, 180, 95, .07), rgba(255, 255, 255, 0));
  position: static;                  /* flex-váz: nem kell sticky */
}
#modalCard .mc-ic {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 20px; line-height: 1; border-radius: var(--sc-r);
  background: linear-gradient(150deg, rgba(217, 180, 95, .20), rgba(255, 255, 255, .04));
  border: 1px solid var(--sc-edge-gold);
}
#modalCard .mc-titles { flex: 1 1 auto; min-width: 0; }
#modalCard .mc-head h2 {
  margin: 0; font-family: Cinzel, Georgia, serif; font-weight: 700;
  font-size: var(--sc-f-h1); line-height: 1.2; letter-spacing: .5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#modalCard .mc-sub {
  margin: 3px 0 0; font-size: var(--sc-f-sm); line-height: 1.35;
  color: var(--text-dim); font-weight: 400;
}
#modalCard .mc-head .mc-x {
  flex: 0 0 auto; margin-left: auto; width: 36px; height: 36px;
  border-radius: var(--sc-r-s); font-size: 15px; color: var(--text-dim);
  border: 1px solid transparent; background: rgba(255, 255, 255, .04);
  display: grid; place-items: center; transition: .14s;
}
#modalCard .mc-head .mc-x:hover { background: rgba(226, 106, 106, .22); border-color: rgba(226, 106, 106, .45); color: #fff; }

/* — egységes fül-sáv (openModal opts.tabs + a képernyők saját fül-sávjai) — */
#modalCard .mc-tabs,
#modalCard .cs2-tabs,
#modalCard .log-filters {
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: var(--sc-2);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
#modalCard .mc-tabs {
  padding: var(--sc-3) var(--sc-6) 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .16);
}
#modalCard .cs2-tabs { margin-bottom: var(--sc-3); }
#modalCard .log-filters { flex-wrap: wrap; margin: 0 0 var(--sc-5); }

#modalCard .mc-tab,
#modalCard .cs2-tab,
#modalCard .log-filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  padding: 8px 13px; min-height: 36px;
  font-size: var(--sc-f-body); font-family: inherit; line-height: 1.2; color: var(--text);
  background: var(--sc-surface); border: 1px solid var(--sc-edge);
  border-radius: var(--sc-r-s); cursor: pointer; transition: .14s; white-space: nowrap;
}
#modalCard .cs2-tab { flex: 1 1 0; }
#modalCard .mc-tab { border-radius: var(--sc-r-s) var(--sc-r-s) 0 0; border-bottom-color: transparent; margin-bottom: -1px; }
#modalCard .mc-tab:hover,
#modalCard .cs2-tab:hover,
#modalCard .log-filter:hover { background: var(--sc-hover); border-color: var(--sc-edge-gold); }
#modalCard .mc-tab.on,
#modalCard .cs2-tab.on,
#modalCard .log-filter.on {
  background: rgba(217, 180, 95, .20); border-color: var(--sc-edge-gold);
  color: var(--gold-2); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}
#modalCard .mc-tab[disabled] { opacity: .4; cursor: not-allowed; }
#modalCard .mt-ic { font-size: 14px; }
#modalCard .mt-badge,
#modalCard .log-filter .lf-n {
  font-size: var(--sc-f-xs); font-variant-numeric: tabular-nums; line-height: 1;
  padding: 2px 6px; border-radius: var(--sc-r-p);
  background: rgba(255, 255, 255, .10); color: var(--text-dim);
}
#modalCard .log-filter.on .lf-n,
#modalCard .mc-tab.on .mt-badge { background: rgba(217, 180, 95, .28); color: var(--gold-2); }

/* — görgethető törzs — */
#modalCard .mc-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;                    /* függőleges ÉS vízszintes (széles táblák) */
  padding: var(--sc-5) var(--sc-6) var(--sc-6);
  font-size: var(--sc-f-body); line-height: var(--sc-lh);
  overscroll-behavior: contain; scrollbar-width: thin; outline: none;
}
#modalCard.wide .mc-body { padding-left: var(--sc-5); padding-right: var(--sc-5); }
#modalCard .mc-body::-webkit-scrollbar { width: 9px; height: 9px; }
#modalCard .mc-body::-webkit-scrollbar-thumb { background: rgba(217, 180, 95, .30); border-radius: 5px; }
#modalCard .mc-body::-webkit-scrollbar-thumb:hover { background: rgba(217, 180, 95, .48); }
#modalCard .mc-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, .22); }

/* — lábléc — */
#modalCard .mc-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sc-3); flex-wrap: wrap;
  padding: var(--sc-4) var(--sc-6);
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .22);
}
#modalCard .mc-foot .mc-foot-r { margin-left: auto; }

/* ==========================================================================
   2. TIPOGRÁFIA ÉS RITMUS
   ========================================================================== */

#modalCard .mc-body h3,
#modalCard .mc-body h4,
#modalCard .mc-body h5 { font-family: Cinzel, Georgia, serif; font-weight: 600; }

/* szekció-cím: a lap fő ritmusa */
#modalCard .sec-title,
#modalCard .rel-sec,
#modalCard .mc-body > h4,
#modalCard .mc-body > div > h4 {
  font-family: Cinzel, Georgia, serif; font-weight: 600;
  font-size: var(--sc-f-h2); line-height: 1.25; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-2);
  margin: var(--sc-7) 0 var(--sc-3);
  padding-bottom: var(--sc-1);
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  display: flex; align-items: baseline; gap: var(--sc-2);
}
#modalCard .mc-body > .sec-title:first-child,
#modalCard .mc-body > div > .sec-title:first-child,
#modalCard .mc-body > h4:first-child { margin-top: 0; }

/* panel-cím (kártyán/dobozon belül) — halkabb, nincs alávonás */
#modalCard .cs2-h,
#modalCard .tech-era h4,
#modalCard .trd-col h4,
#modalCard .gp-cat h4,
#modalCard .slot-col h5,
#modalCard .age-hero h3,
#modalCard .gov-head h3 {
  font-family: Cinzel, Georgia, serif; font-weight: 600;
  font-size: var(--sc-f-h3); letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 var(--sc-3); line-height: 1.25;
}
#modalCard .age-hero h3,
#modalCard .gov-head h3 { font-size: 16px; text-transform: none; letter-spacing: .3px; }
#modalCard .tech-era h4 .te-cnt,
#modalCard .gp-cat h4 .gp-cnt,
#modalCard .cs2-h span.r {
  font-family: Inter, system-ui, sans-serif; font-weight: 500;
  font-size: var(--sc-f-xs); letter-spacing: 0; text-transform: none; color: var(--text-dim);
}

/* folyószöveg + halk magyarázat — MINDEN képernyőn ugyanaz a két méret */
#modalCard .mc-body p { margin: 0 0 var(--sc-3); line-height: var(--sc-lh); }
#modalCard .cs2-note, #modalCard .rel-note, #modalCard .age-note, #modalCard .gp-note,
#modalCard .trd-stats, #modalCard .bset-note, #modalCard .cs2-empty, #modalCard .trd-empty,
#modalCard .gp-empty, #modalCard .log-empty, #modalCard .gp-world, #modalCard .tree-legend,
#modalCard .age-statebox {
  font-size: var(--sc-f-sm); line-height: 1.55; color: var(--text-dim);
}
#modalCard .tree-top, #modalCard .civ-tabhead, #modalCard .rel-top,
#modalCard .trd-top, #modalCard .gp-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4);
  margin: 0 0 var(--sc-4); font-size: var(--sc-f-body); color: var(--text-dim);
}
#modalCard .tree-top b, #modalCard .civ-tabhead b, #modalCard .rel-top b,
#modalCard .trd-top b, #modalCard .gp-top b { color: var(--text); font-weight: 700; }

/* számok mindenütt táblázatos alakúak */
#modalCard b, #modalCard .ag-cnt, #modalCard .cs2-y b, #modalCard .cy b,
#modalCard .hr-pt, #modalCard .gp-nums, #modalCard .trd-y { font-variant-numeric: tabular-nums; }

/* a FONTOS szám legyen nagy, a magyarázat halk */
#modalCard .cs2-y b, #modalCard .cy b { font-size: 17px; line-height: 1.15; }
#modalCard .cs2-y i, #modalCard .cy i { font-size: var(--sc-f-sm); color: var(--text-dim); }

#modalCard kbd, #modalCard code, #modalCard .bset-keys kbd {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px;
  font-size: var(--sc-f-sm); font-family: ui-monospace, monospace;
  color: var(--gold-2); white-space: nowrap;
}

/* ==========================================================================
   3. KÁRTYÁK ÉS SOROK  — közös keret, hover, fókusz
   ========================================================================== */

#modalCard .tech-card,
#modalCard .civic-card,
#modalCard .prod-item,
#modalCard .cs2-item,
#modalCard .cs2-q,
#modalCard .rel-card,
#modalCard .gp-card,
#modalCard .trd-card,
#modalCard .civ-row,
#modalCard .age-goal,
#modalCard .age-hist .ah-row,
#modalCard .bset-row,
#modalCard .card-chip,
#modalCard .gov-opt {
  background: var(--sc-surface);
  border: 1px solid var(--sc-edge);
  border-radius: var(--sc-r);
  box-shadow: var(--sc-shadow-card);
  transition: background .14s, border-color .14s, transform .14s, box-shadow .14s;
}

/* egységes belső térköz + sor-ritmus */
#modalCard .tech-card,
#modalCard .civic-card { padding: 9px 10px; margin-bottom: var(--sc-2); gap: var(--sc-3); }
#modalCard .prod-item,
#modalCard .cs2-item,
#modalCard .rel-card,
#modalCard .gp-card,
#modalCard .trd-card { padding: 9px 11px; gap: var(--sc-3); }
#modalCard .civ-row { padding: 10px 12px; margin-bottom: var(--sc-2); gap: var(--sc-4); }
#modalCard .age-goal { padding: 11px 12px; }
#modalCard .bset-row { padding: 10px 12px; margin-bottom: var(--sc-2); }
#modalCard .card-chip { padding: 7px 9px; margin-bottom: var(--sc-1); gap: var(--sc-2); }
#modalCard .gov-opt { padding: 8px 11px; gap: var(--sc-3); }
#modalCard .cs2-q { padding: 6px 8px; margin-bottom: var(--sc-1); background: var(--sc-sunken); }

/* dobozok (panel-szerű konténerek) */
#modalCard .cs2-panel,
#modalCard .gp-cat,
#modalCard .age-hero,
#modalCard .gov-head,
#modalCard .age-crisis {
  border-radius: var(--sc-r); border: 1px solid var(--sc-edge);
  padding: var(--sc-4) var(--sc-5);
}
#modalCard .cs2-panel { background: var(--sc-surface); margin-bottom: var(--sc-3); }
#modalCard .gp-cat { background: var(--sc-surface); }

/* — kattintható: azonos hover-nyelv (kis emelés + arany él) — */
#modalCard .tech-card:hover:not(.locked),
#modalCard .prod-item:hover:not(.off),
#modalCard .cs2-item:hover:not(.off),
#modalCard .rel-card:hover:not(.locked),
#modalCard .gp-card.pick:hover,
#modalCard .trd-card.pick:hover,
#modalCard .gov-opt:hover,
#modalCard .card-chip:not(.empty):hover {
  background: var(--sc-hover);
  border-color: var(--sc-edge-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .30);
}
/* a fák hover-színe a saját szerep-színük marad (kék = tudomány, lila = kultúra) */
#modalCard .tech-card:hover:not(.locked) { background: rgba(95, 199, 232, .15); border-color: rgba(95, 199, 232, .45); }
#modalCard .civic-card:hover:not(.locked) { background: rgba(201, 138, 224, .15) !important; border-color: rgba(201, 138, 224, .45) !important; transform: translateY(-1px); }

/* — állapotok — */
#modalCard .tech-card.done, #modalCard .civic-card.done,
#modalCard .age-goal.done, #modalCard .gp-card.own,
#modalCard .rel-card.owned {
  background: rgba(111, 209, 138, .11); border-color: rgba(111, 209, 138, .34);
}
#modalCard .tech-card.active { background: rgba(95, 199, 232, .18); border-color: var(--sci); box-shadow: 0 0 0 1px rgba(95, 199, 232, .35); }
#modalCard .civic-card.active { background: rgba(201, 138, 224, .18) !important; border-color: var(--cult) !important; }
#modalCard .tech-card.locked, #modalCard .civic-card.locked,
#modalCard .rel-card.locked, #modalCard .cs2-item.off,
#modalCard .prod-item.off { opacity: .42; cursor: not-allowed; transform: none; }
#modalCard .tech-card.boosted, #modalCard .civic-card.boosted,
#modalCard .rel-card.sel { box-shadow: inset 3px 0 0 var(--gold); }
#modalCard .gp-cat.ready { border-color: var(--sc-edge-gold); box-shadow: inset 3px 0 0 var(--gold); }
#modalCard .cs2-item.wonder { background: linear-gradient(100deg, rgba(217, 180, 95, .15), var(--sc-surface)); border-color: var(--sc-edge-gold); }
#modalCard .card-chip.empty { opacity: .5; border-style: dashed; cursor: default; }

/* kártya-belső tipográfia: cím / alcím / meta — mindenhol azonos */
#modalCard .tech-card b, #modalCard .civic-card b, #modalCard .rel-card b,
#modalCard .gp-main b, #modalCard .trd-main b, #modalCard .cs2-item .it b,
#modalCard .prod-item .pi-txt b, #modalCard .card-chip b, #modalCard .gov-opt b,
#modalCard .civ-row .cr-txt b, #modalCard .bset-row .bs-txt b {
  display: block; font-size: var(--sc-f-body); font-weight: 600; line-height: 1.3;
}
#modalCard .civ-row .cr-txt b { font-family: Cinzel, Georgia, serif; font-size: 13px; }
#modalCard .tech-card i, #modalCard .civic-card i, #modalCard .rel-card i,
#modalCard .gp-main i, #modalCard .trd-main i, #modalCard .cs2-item .it i,
#modalCard .prod-item .pi-txt i, #modalCard .card-chip i, #modalCard .gov-opt i,
#modalCard .civ-row .cr-txt i, #modalCard .bset-row .bs-txt i, #modalCard .age-goal .ag-ds {
  display: block; font-style: normal; font-size: var(--sc-f-xs);
  color: var(--text-dim); line-height: 1.45; margin-top: 2px;
}
/* ikon-oszlop egységes szélessége → a szövegek egy vonalban indulnak */
#modalCard .tc-ic, #modalCard .rc-ic, #modalCard .gp-ic, #modalCard .trd-ic,
#modalCard .cs2-item .ii, #modalCard .prod-item .pi-ic, #modalCard .age-goal .ag-ic {
  flex: 0 0 auto; width: 22px; text-align: center; font-size: 17px; line-height: 1.25;
}
/* szerep-színek a kártya-metában */
#modalCard .tc-cost { color: var(--sci) !important; }
#modalCard .cc-cost { color: var(--cult) !important; }
#modalCard .tc-boost, #modalCard .cc-boost { color: var(--gold-2) !important; }
#modalCard .tc-boost.on, #modalCard .cc-boost.on { color: var(--good) !important; }
#modalCard .cs2-item .ic, #modalCard .prod-item .pi-cost { color: var(--gold-2); font-size: var(--sc-f-sm); text-align: right; }

/* ==========================================================================
   4. SÁVOK
   ⚠️⚠️ `.bar` — `display:block` KÖTELEZŐ (több képernyő <span>-ként használja)!
   ========================================================================== */

#modalCard .bar {
  display: block !important;          /* ← EZT SOHA NE VEDD KI */
  height: 8px; margin: 5px 0 3px;
  border-radius: var(--sc-r-p); overflow: hidden;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
#modalCard .bar > span { display: block; height: 100%; border-radius: var(--sc-r-p); transition: width .3s; }

#modalCard .cs2-bar,
#modalCard .tree-bar,
#modalCard .civ-bar,
#modalCard .rel-bar,
#modalCard .gp-bar,
#modalCard .trd-bar {
  display: block; height: 8px; border-radius: var(--sc-r-p); overflow: hidden;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
#modalCard .cs2-bar { margin: var(--sc-2) 0 var(--sc-1); }
#modalCard .tree-bar, #modalCard .civ-bar, #modalCard .rel-bar { flex: 1 1 180px; min-width: 140px; }
#modalCard .gp-bar { margin: var(--sc-1) 0 var(--sc-2); }
#modalCard .trd-bar { height: 6px; margin-top: var(--sc-2); }
#modalCard .cs2-bar > span, #modalCard .tree-bar > span, #modalCard .civ-bar > span,
#modalCard .rel-bar > span, #modalCard .gp-bar > span, #modalCard .trd-bar > span {
  display: block; height: 100%; border-radius: var(--sc-r-p); transition: width .3s;
}
/* táblázatba ágyazott mini-sáv */
#modalCard .rel-pbar {
  display: inline-block; width: 84px; height: 6px; vertical-align: middle;
  border-radius: var(--sc-r-p); overflow: hidden; margin-right: var(--sc-2);
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
#modalCard .rel-pbar > span { display: block; height: 100%; }

/* sáv-szerepek (a képernyők a saját gradienseiket adják, itt csak az alap) */
#modalCard .bar.food > span, #modalCard .cs2-bar.food > span { background: linear-gradient(90deg, #4fae6d, var(--sc-food)); }
#modalCard .bar.prod > span, #modalCard .cs2-bar.prod > span { background: linear-gradient(90deg, #c9862f, var(--sc-prod)); }
#modalCard .bar.cult > span, #modalCard .cs2-bar.cult > span { background: linear-gradient(90deg, #9a5ec0, #e2bcf0); }
#modalCard .tree-bar > span { background: linear-gradient(90deg, #2f8dae, var(--sci)); }
#modalCard .civ-bar > span { background: linear-gradient(90deg, #9a5ec0, var(--cult)); }
#modalCard .rel-bar > span { background: linear-gradient(90deg, #a8822f, var(--sc-faith)); }

/* ==========================================================================
   5. CHIPEK ÉS PIRULÁK
   ========================================================================== */

#modalCard .state-pill,
#modalCard .cs2-pill,
#modalCard .age-pill,
#modalCard .rel-pill,
#modalCard .bld-chip,
#modalCard .cs2-bld,
#modalCard .an-chip,
#modalCard .rel-actions .rel-pill {
  display: inline-flex; align-items: center; gap: var(--sc-1);
  min-height: 24px; padding: 3px 10px;
  font-size: var(--sc-f-sm); line-height: 1.35; white-space: nowrap;
  border-radius: var(--sc-r-p);
  background: var(--sc-surface-2); border: 1px solid var(--sc-edge);
  color: var(--text);
}
#modalCard .rel-pill, #modalCard .an-chip { white-space: normal; }
#modalCard .state-pill.war, #modalCard .cs2-pill.bad, #modalCard .age-pill.bad {
  background: rgba(226, 106, 106, .17); border-color: rgba(226, 106, 106, .45); color: #f2a7a7;
}
#modalCard .state-pill.peace, #modalCard .cs2-pill.good, #modalCard .age-pill.good,
#modalCard .bld-chip {
  background: rgba(111, 209, 138, .13); border-color: rgba(111, 209, 138, .34); color: #a6e6bb;
}
#modalCard .cs2-pill.warn, #modalCard .age-pill.warn {
  background: rgba(232, 193, 74, .15); border-color: rgba(232, 193, 74, .40); color: #f0dc9a;
}
#modalCard .state-pill.unknown, #modalCard .age-pill.neutral {
  background: var(--sc-surface-2); border-color: var(--sc-edge); color: var(--text-dim);
}
#modalCard .cs2-bld.w { background: rgba(217, 180, 95, .16); border-color: var(--sc-edge-gold); color: var(--gold-2); }

/* ==========================================================================
   6. GOMBOK
   ========================================================================== */

#modalCard .mini-btn,
#modalCard .cs2-fbtn,
#modalCard .rel-actions button,
#modalCard .bset-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  min-height: 34px; padding: 7px 13px;
  font-family: inherit; font-size: var(--sc-f-sm); line-height: 1.2; color: var(--text);
  background: var(--sc-surface-2); border: 1px solid var(--sc-edge);
  border-radius: var(--sc-r-s); cursor: pointer; transition: .14s;
}
#modalCard .mini-btn:hover:not(:disabled),
#modalCard .cs2-fbtn:hover:not(:disabled),
#modalCard .rel-actions button:hover:not(:disabled) {
  background: var(--sc-hover); border-color: var(--sc-edge-gold); color: var(--gold-2);
}
#modalCard .mini-btn:disabled,
#modalCard .cs2-fbtn:disabled,
#modalCard .rel-actions button:disabled,
#modalCard .cs2-buy:disabled { opacity: .40; cursor: not-allowed; }
#modalCard .cs2-fbtn.on { background: rgba(217, 180, 95, .24); border-color: var(--sc-edge-gold); color: var(--gold-2); font-weight: 600; }
#modalCard .bset-toggle { min-width: 66px; font-weight: 600; }
#modalCard .bset-toggle.on { background: rgba(111, 209, 138, .16); border-color: rgba(111, 209, 138, .42); color: #a6e6bb; }

#modalCard .cs2-buy {
  display: block; width: 100%; margin-top: var(--sc-1); padding: 5px 8px;
  font-size: var(--sc-f-xs); line-height: 1.2; border-radius: 6px; cursor: pointer;
  background: rgba(217, 180, 95, .17); border: 1px solid var(--sc-edge-gold); color: var(--gold-2);
}
#modalCard .cs2-buy:hover:not(:disabled) { background: rgba(217, 180, 95, .32); }
#modalCard .cs2-q .qb {
  width: 26px; height: 26px; border-radius: 6px; font-size: 11px; line-height: 1;
  display: grid; place-items: center; color: var(--text-dim);
  background: var(--sc-surface-2); border: 1px solid var(--sc-edge); cursor: pointer;
}
#modalCard .cs2-q .qb:hover { background: rgba(255, 255, 255, .16); color: #fff; }

#modalCard .mbtn {
  min-height: 40px; padding: 10px 18px; font-size: var(--sc-f-lead);
  border-radius: var(--sc-r-s); font-family: Cinzel, Georgia, serif; letter-spacing: .4px;
  background: var(--sc-surface-2); border: 1px solid var(--sc-edge); transition: .16s;
}
#modalCard .mbtn:hover:not(:disabled) { background: var(--sc-hover); border-color: var(--sc-edge-gold); transform: translateY(-1px); }
#modalCard .mbtn.primary {
  background: linear-gradient(160deg, #d9b45f, #a8822f); color: #201704;
  border-color: #f0d290; font-weight: 700;
}

/* ==========================================================================
   7. TÁBLÁZATOK
   ========================================================================== */

#modalCard .mc-body table { border-collapse: collapse; font-size: var(--sc-f-sm); width: 100%; }
#modalCard .mc-body th,
#modalCard .rel-tab th {
  text-align: left; font-weight: 600; font-size: var(--sc-f-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold-2);
  padding: 6px 8px; border-bottom: 1px solid var(--sc-edge); white-space: nowrap;
}
#modalCard .mc-body td,
#modalCard .rel-tab td,
#modalCard .key-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--sc-edge-soft);
  vertical-align: middle; line-height: 1.45;
}
#modalCard .mc-body tr:hover > td { background: rgba(255, 255, 255, .035); }
#modalCard .rel-tab tr.me td { background: rgba(217, 180, 95, .09); }
#modalCard .key-table td:first-child { width: 168px; white-space: nowrap; color: var(--text-dim); }

/* ==========================================================================
   8. LISTÁK (napló)
   ========================================================================== */

#modalCard .log-list { max-height: none; overflow: visible; min-width: 0; }
#modalCard .log-line {
  padding: 8px 11px; margin-bottom: var(--sc-1);
  font-size: var(--sc-f-body); line-height: 1.45;
  border-left: 3px solid rgba(255, 255, 255, .12);
  border-radius: 0 var(--sc-r-s) var(--sc-r-s) 0;
  background: rgba(255, 255, 255, .028);
}
#modalCard .log-line:hover { background: rgba(255, 255, 255, .055); }
#modalCard .log-line .lg-t {
  color: var(--text-dim); font-size: var(--sc-f-xs); margin-right: var(--sc-2);
  font-variant-numeric: tabular-nums;
}
#modalCard .log-empty { padding: 28px 4px; text-align: center; }
#modalCard .tip-list li { padding: 5px 0 5px 32px; font-size: var(--sc-f-body); line-height: 1.55; }
#modalCard .help-body { max-width: 780px; font-size: var(--sc-f-lead); line-height: 1.62; }
#modalCard .help-body ul, #modalCard .help-body ol { margin: 0 0 var(--sc-3); padding-left: 20px; }
#modalCard .help-body li { margin-bottom: var(--sc-1); }
#modalCard .help-body h4 {
  font-size: var(--sc-f-h2); letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-2); margin: var(--sc-7) 0 var(--sc-3);
  padding-bottom: var(--sc-1); border-bottom: 1px solid rgba(255, 255, 255, .075);
}

/* ==========================================================================
   9. AKADÁLYMENTESSÉG — látható fókusz-gyűrű mindenhol
   ========================================================================== */

#modalCard button:focus-visible,
#modalCard [tabindex]:focus-visible,
#modalCard .tech-card:focus-visible,
#modalCard .cs2-item:focus-visible,
#modalCard .rel-card:focus-visible,
#modalCard input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-2);
  border-radius: var(--sc-r-s); position: relative; z-index: 6;
}
#modalCard .mc-body:focus-visible { box-shadow: inset 0 0 0 2px rgba(240, 210, 144, .45); }

/* ==========================================================================
   10. KÉPERNYŐ-SPECIFIKUS FINOMHANGOLÁS  (data-screen — modal.js adja)
   ========================================================================== */

/* — VÁROS — a 3 oszlop 1180 px-es ablakban se lógjon ki — */
#modalCard[data-screen="city"] .cs2 { min-width: 0; }
#modalCard[data-screen="city"] .cs2-cols { gap: var(--sc-4); }
#modalCard[data-screen="city"] .cs2-head { padding-bottom: var(--sc-3); margin-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-edge-gold); }
/* a város neve már a modális fejlécében ott van — ne mondjuk el kétszer */
#modalCard[data-screen="city"] .cs2-title b { display: none; }
#modalCard[data-screen="city"] .cs2-title i { font-size: var(--sc-f-sm); color: var(--text-dim); }
#modalCard[data-screen="city"] .cs2-yields { gap: var(--sc-2); }
#modalCard[data-screen="city"] .cs2-y { background: var(--sc-sunken); border: 1px solid var(--sc-edge-soft); border-radius: var(--sc-r-s); padding: 7px 4px; }
#modalCard[data-screen="city"] .cs2-tab { padding: 8px 5px; font-size: var(--sc-f-sm); }
#modalCard[data-screen="city"] .cs2-list { max-height: min(44vh, 400px); padding-right: var(--sc-1); }
#modalCard[data-screen="city"] .cs2-list::-webkit-scrollbar { width: 8px; }
#modalCard[data-screen="city"] .cs2-list::-webkit-scrollbar-thumb { background: rgba(217, 180, 95, .28); border-radius: 4px; }
#modalCard[data-screen="city"] .cs2-map { max-width: 100%; }
#modalCard[data-screen="city"] .cs2-mid .cs2-panel { overflow: hidden; }

/* — TECH / TÁRSADALOM — oszlopos fa — */
#modalCard[data-screen="tech"] .tech-eras,
#modalCard[data-screen="civics"] .tech-eras {
  gap: var(--sc-5); padding-bottom: var(--sc-4); align-items: flex-start;
}
#modalCard[data-screen="tech"] .tech-era,
#modalCard[data-screen="civics"] .tech-era { min-width: 228px; flex: 0 0 228px; }
#modalCard[data-screen="tech"] .tech-era h4,
#modalCard[data-screen="civics"] .tech-era h4 {
  position: sticky; top: 0; z-index: 2; margin: 0 0 var(--sc-3);
  padding: var(--sc-2) var(--sc-2) var(--sc-2) 0;
  background: var(--panel-2); border-bottom: 1px solid var(--sc-edge);
}
#modalCard .tech-eras::-webkit-scrollbar { height: 9px; }
#modalCard .tech-eras::-webkit-scrollbar-thumb { background: rgba(217, 180, 95, .30); border-radius: 5px; }
#modalCard .tree-legend { gap: var(--sc-5); margin: 0 0 var(--sc-4); padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-s); background: var(--sc-sunken); }
#modalCard[data-screen="civics"] .gov-head { background: rgba(201, 138, 224, .10); border-color: rgba(201, 138, 224, .32); }
#modalCard[data-screen="civics"] .civ-pool .card-chip { width: 218px; }

/* — KORSZAKOK — */
#modalCard[data-screen="ages"] .age-hero { gap: var(--sc-5); margin-bottom: var(--sc-4); }
#modalCard[data-screen="ages"] .age-hero .ah-ic { font-size: 34px; }
#modalCard[data-screen="ages"] .age-hero p { font-size: var(--sc-f-lead); margin-bottom: var(--sc-1); }
#modalCard[data-screen="ages"] .age-grid { gap: var(--sc-3); }
#modalCard[data-screen="ages"] .age-goal .ag-cnt { font-size: 15px; font-weight: 700; color: var(--gold-2); }
#modalCard[data-screen="ages"] .age-goal .ag-nm { font-size: var(--sc-f-body); }
#modalCard[data-screen="ages"] .age-crisis { margin-bottom: var(--sc-4); }
#modalCard[data-screen="ages"] .age-hist { gap: var(--sc-2); }

/* — VALLÁS — */
#modalCard[data-screen="religion"] .rel-grid { gap: var(--sc-3); }
#modalCard[data-screen="religion"] .rel-actions { gap: var(--sc-2); margin: var(--sc-3) 0 var(--sc-4); }
#modalCard[data-screen="religion"] .rel-pills { gap: var(--sc-2); margin: var(--sc-2) 0 var(--sc-4); }
#modalCard[data-screen="religion"] .rel-card i { color: var(--text-dim); }

/* — KERESKEDELEM / NAGY EMBEREK — */
#modalCard[data-screen="trade"] .trd-cols { gap: var(--sc-6); }
#modalCard[data-screen="trade"] .trd-card { margin-bottom: var(--sc-2); }
#modalCard[data-screen="trade"] .trd-card.intl { border-left: 3px solid var(--sci); }
#modalCard[data-screen="trade"] .trd-card.dom { border-left: 3px solid var(--good); }
#modalCard[data-screen="greatpeople"] .gp-grid { gap: var(--sc-4); }
#modalCard[data-screen="greatpeople"] .gp-card { margin-bottom: var(--sc-2); }
#modalCard[data-screen="greatpeople"] .gp-nums { font-size: var(--sc-f-sm); margin-bottom: var(--sc-3); }

/* — DIPLOMÁCIA — sűrűbb sorok, olvasható meta — */
#modalCard[data-screen="diplo"] .civ-row { padding: 10px 12px; }
#modalCard[data-screen="diplo"] .civ-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }
#modalCard[data-screen="diplo"] .bld-chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
#modalCard[data-screen="diplo"] table { margin-top: var(--sc-2); }

/* — GYŐZELEM / JÁTÉK VÉGE — a modul 100%-ban inline-stílusos, ezért !important — */
#modalCard[data-screen="victory"] .mc-body > div > section {
  background: var(--sc-surface) !important;
  border-radius: var(--sc-r) !important;
  padding: var(--sc-4) var(--sc-5) !important;
  margin-bottom: var(--sc-3) !important;
  box-shadow: var(--sc-shadow-card);
}
#modalCard[data-screen="victory"] .mc-body > div > section:hover { background: rgba(255, 255, 255, .055) !important; }
#modalCard[data-screen="victory"] .mbtn { min-height: 30px; padding: 4px 12px; font-size: var(--sc-f-sm); }
#modalCard[data-screen="gameover"] .mc-body { text-align: initial; }
#modalCard[data-screen="gameover"] .key-table td:first-child { width: auto; }

/* — NAPLÓ / SÚGÓ / BEÁLLÍTÁSOK — */
#modalCard[data-screen="log"] .mc-body > div { min-width: 0 !important; }
#modalCard[data-screen="help"] .help-nav { gap: var(--sc-2); margin-bottom: var(--sc-4); }
#modalCard[data-screen="settings"] .bset { min-width: min(540px, 100%); max-width: 620px; }
#modalCard[data-screen="settings"] .bset-slider { padding: 0 12px 10px; margin: -6px 0 var(--sc-3); }
#modalCard[data-screen="settings"] .bset-keys { gap: 2px 18px; }

/* ==========================================================================
   11. RESPONSZÍV
   ========================================================================== */

/* A város-képernyő 3 oszlopa 1024 px-től KIFÉR (a modul saját töréspontja
   1180 px-en 2 oszlopra váltana — ott a termelési sor a hajtás alá csúszott). */
@media (min-width: 1024px) {
  #modalCard[data-screen="city"] .cs2-cols { grid-template-columns: 236px minmax(250px, 1fr) 316px; }
}
/* keskeny asztali / tablet: a fix oszlopok engedjenek */
@media (max-width: 1180px) { #modalCard.wide { max-width: calc(100vw - 24px); } }
@media (max-width: 1023px) and (min-width: 901px) {
  #modalCard[data-screen="city"] .cs2-cols { grid-template-columns: 236px minmax(230px, 1fr); }
}

@media (max-width: 900px) {
  #modal { padding: 10px; }
  #modalCard { max-width: calc(100vw - 20px); max-height: 92vh; }
  #modalCard .mc-head { padding: var(--sc-4) var(--sc-5); }
  #modalCard .mc-body { padding: var(--sc-4) var(--sc-5) var(--sc-5); }
  #modalCard .mc-tabs { padding: var(--sc-2) var(--sc-5) 0; }
  #modalCard[data-screen="city"] .cs2-cols { grid-template-columns: 1fr; }
  #modalCard .trd-cols, #modalCard .gp-grid, #modalCard .slot-grid { gap: var(--sc-4); }
}

/* telefon: teljes képernyős lap, görgethető fülek, 44 px érintőcélok */
@media (max-width: 700px) {
  #modal { padding: 0; place-items: stretch; }
  #modalCard,
  #modalCard.wide {
    width: 100vw; max-width: 100vw; height: 100%; max-height: 100%;
    border-radius: 0; border: none; box-shadow: none;
  }
  #modalCard .mc-head {
    padding: var(--sc-4) var(--sc-4);
    padding-top: max(var(--sc-4), env(safe-area-inset-top));
    gap: var(--sc-3);
  }
  #modalCard .mc-ic { width: 34px; height: 34px; font-size: 18px; }
  #modalCard .mc-head h2 { font-size: 16px; }
  #modalCard .mc-head .mc-x { width: 44px; height: 44px; }
  #modalCard .mc-tabs, #modalCard .cs2-tabs, #modalCard .log-filters {
    flex-wrap: nowrap; padding-left: var(--sc-4); padding-right: var(--sc-4);
    scrollbar-width: none;
  }
  #modalCard .mc-tabs::-webkit-scrollbar,
  #modalCard .cs2-tabs::-webkit-scrollbar,
  #modalCard .log-filters::-webkit-scrollbar { height: 0; }
  #modalCard .mc-body,
  #modalCard.wide .mc-body {
    padding: var(--sc-4) var(--sc-4) calc(var(--sc-7) + env(safe-area-inset-bottom));
  }
  #modalCard .mc-foot { padding: var(--sc-3) var(--sc-4) calc(var(--sc-3) + env(safe-area-inset-bottom)); }

  /* egy oszlop mindenütt */
  #modalCard .cs2-cols, #modalCard .rel-grid, #modalCard .age-grid,
  #modalCard .bset-keys, #modalCard .help-cols, #modalCard .prod-list,
  #modalCard .cs2-yields { grid-template-columns: 1fr; }
  #modalCard .cs2-yields { grid-template-columns: repeat(3, 1fr); }
  #modalCard .trd-col, #modalCard .gp-cat, #modalCard .slot-col, #modalCard .civ-pool .card-chip {
    flex: 1 1 100%; min-width: 0; width: auto;
  }
  #modalCard .tech-era { min-width: 78vw; flex: 0 0 78vw; }
  #modalCard .civ-row { flex-wrap: wrap; }
  #modalCard[data-screen="city"] .cs2-list { max-height: none; overflow: visible; }
}

/* érintés: minden kattintható elem legalább 44 px */
@media (pointer: coarse), (max-width: 700px) {
  #modalCard .mc-tab, #modalCard .cs2-tab, #modalCard .log-filter,
  #modalCard .mini-btn, #modalCard .cs2-fbtn, #modalCard .mbtn,
  #modalCard .rel-actions button, #modalCard .bset-toggle,
  #modalCard .tech-card, #modalCard .civic-card, #modalCard .prod-item,
  #modalCard .cs2-item, #modalCard .rel-card, #modalCard .gp-card.pick,
  #modalCard .trd-card.pick, #modalCard .gov-opt, #modalCard .card-chip,
  #modalCard .mc-head .mc-x { min-height: var(--tap, 44px); }
  #modalCard .mini-btn, #modalCard .cs2-fbtn { padding: 10px 15px; }
  #modalCard .cs2-q .qb { width: 34px; height: 34px; }
  #modalCard .cs2-buy { min-height: 34px; }
  #modalCard .mc-tab, #modalCard .cs2-tab, #modalCard .log-filter { padding: 11px 15px; }
}

/* nagyon keskeny telefon */
@media (max-width: 400px) {
  #modalCard .mc-head h2 { font-size: 15px; }
  #modalCard .mc-body { font-size: 12px; }
  #modalCard .tech-era { min-width: 86vw; flex: 0 0 86vw; }
  #modalCard[data-screen="city"] .cs2-map { transform-origin: top left; }
}

/* fekvő, alacsony képernyő */
@media (orientation: landscape) and (max-height: 560px) {
  #modalCard { max-height: 100vh; }
  #modalCard .mc-head { padding-top: var(--sc-3); padding-bottom: var(--sc-3); }
}

/* ==========================================================================
   12. MOZGÁS-CSÖKKENTÉS / KONTRASZT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #modalCard, #modalCard * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  #modalCard .tech-card:hover, #modalCard .civic-card:hover, #modalCard .prod-item:hover,
  #modalCard .cs2-item:hover, #modalCard .rel-card:hover, #modalCard .gp-card.pick:hover,
  #modalCard .trd-card.pick:hover, #modalCard .gov-opt:hover, #modalCard .card-chip:hover,
  #modalCard .mbtn:hover { transform: none !important; }
}

@media (prefers-contrast: more) {
  #modalCard {
    --sc-edge: rgba(255, 255, 255, .26);
    --sc-edge-soft: rgba(255, 255, 255, .18);
    --sc-surface: rgba(255, 255, 255, .08);
    --sc-surface-2: rgba(255, 255, 255, .12);
  }
  #modalCard .cs2-note, #modalCard .rel-note, #modalCard .age-note, #modalCard .gp-note,
  #modalCard .tech-card i, #modalCard .civic-card i, #modalCard .rel-card i { color: #ded8ca; }
}
