/* ============================================================================
   Látványterv v2 – dizájnrendszer
   Nappali „Sajtópapír” és esti „Stratégiai” téma (GDD 2.A), a korábbi
   petrol–réz–zsálya arculat továbbvitele, adatújságírói komponensekkel.
   ========================================================================== */

:root {
  --bg: #f6f3ec;
  --surface: #fffdf8;
  --surface-2: #efeae0;
  --ink: #1b272c;
  --ink-2: #3c4a50;
  --muted: #66747a;
  --line: #e0d9c9;
  --line-strong: #c9bfa9;
  --petrol: #152c34;
  --petrol-2: #1f3d48;
  --accent: #9b6236;        /* réz – szövegre elég kontrasztos */
  --accent-soft: #e9d9c6;
  --gold: #b8912f;
  --sage: #3f7458;
  --sage-soft: #dbe7df;
  --crimson: #8a2438;
  --crimson-soft: #f2dde1;
  --warn: #a5671a;
  --on-dark: #f3eee2;
  --shadow: 0 1px 2px rgba(21, 44, 52, .06), 0 6px 20px rgba(21, 44, 52, .06);
  --radius: 10px;
  --radius-sm: 6px;
  --serif: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1320px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --surface: #111a2c; --surface-2: #17223a; --ink: #ebe6d9; --ink-2: #c9c4b6;
    --muted: #96a0b3; --line: #233150; --line-strong: #33456b; --petrol: #070c18; --petrol-2: #0f1a2e;
    --accent: #d9b45a; --accent-soft: #2c2a20; --gold: #e0bd5c; --sage: #6fb08b; --sage-soft: #15302a;
    --crimson: #e0718a; --crimson-soft: #3a1621; --warn: #e3a54a; --on-dark: #f3eee2;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1120; --surface: #111a2c; --surface-2: #17223a; --ink: #ebe6d9; --ink-2: #c9c4b6;
  --muted: #96a0b3; --line: #233150; --line-strong: #33456b; --petrol: #070c18; --petrol-2: #0f1a2e;
  --accent: #d9b45a; --accent-soft: #2c2a20; --gold: #e0bd5c; --sage: #6fb08b; --sage-soft: #15302a;
  --crimson: #e0718a; --crimson-soft: #3a1621; --warn: #e3a54a; --on-dark: #f3eee2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--sans); overflow-x: hidden;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.serif { font-family: var(--serif); font-weight: 400; }
.kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.up { color: var(--sage); } .down { color: var(--crimson); }

/* ---------- Távíró (felső hírszalag) ---------- */
.ticker { background: var(--petrol); color: var(--on-dark); font-size: 13px; }
.ticker .wrap { display: flex; align-items: center; gap: 18px; height: 36px; }
.ticker .date { white-space: nowrap; font-weight: 600; }
.ticker .phase { white-space: nowrap; border: 1px solid rgba(243, 238, 226, .3); border-radius: 99px; padding: 1px 9px; font-size: 11.5px; }
.ticker .marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker .track { display: inline-flex; gap: 28px; white-space: nowrap; animation: marquee 48s linear infinite; }
.ticker .track span b { font-family: var(--mono); font-weight: 500; }
.ticker .tick { white-space: nowrap; font-family: var(--mono); font-size: 12px; opacity: .85; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

/* ---------- Fejléc és menü ---------- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 47px; height: 48px; }
.brand .name { font-family: var(--serif); font-size: 30px; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.brand .sub { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.masthead .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.iconbtn:hover { border-color: var(--line-strong); }
.iconbtn svg { width: 18px; height: 18px; }
.nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.nav .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 13px 14px; text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav a .badge { font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--crimson); color: #fff; }

/* ---------- Karaktersáv (GDD: minden oldalon látható) ---------- */
.charbar { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.charbar .wrap { display: flex; align-items: center; gap: 22px; min-height: 52px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.charbar .who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line-strong); flex: none; }
.charbar .who b { display: block; line-height: 1.2; }
.charbar .who small { color: var(--muted); }
.stat { display: flex; flex-direction: column; line-height: 1.2; }
.stat small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.meter { width: 90px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--sage); border-radius: 99px; }
.charbar .quick { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Gombok, címkék ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--petrol); color: var(--on-dark); border-color: var(--petrol); }
:root[data-theme="dark"] .btn.primary { background: var(--accent); color: #111; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: var(--accent); color: #111; border-color: var(--accent); } }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--crimson); animation: pulse 1.6s infinite; }
.chip.ok { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.chip.hot { background: var(--crimson-soft); color: var(--crimson); border-color: transparent; }
.chip.gold { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
@keyframes pulse { 50% { opacity: .35; } }
.dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; flex: none; }

/* ---------- Oldalrács és kártyák ---------- */
main { padding: 28px 0 60px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.pagehead h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; margin: 6px 0 0; }
.pagehead p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.grid { display: grid; gap: 22px; }
.g-front { grid-template-columns: 290px minmax(0, 1fr) 320px; }
.g-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.g-2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 22px; align-content: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card > header h2, .card > header h3 { margin: 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card > .body { padding: 16px 18px; }
.card.dark { background: var(--petrol); color: var(--on-dark); border-color: var(--petrol-2); }
.card.dark > header { border-color: rgba(255, 255, 255, .12); }
.card.dark .muted { color: rgba(243, 238, 226, .7); }
.section-title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

@media (max-width: 1180px) {
  .g-front { grid-template-columns: minmax(0, 1fr) 300px; }
  .g-front > .col-left { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
  .g-front, .g-2, .g-2e, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand .name { font-size: 24px; }
  .charbar .quick { margin-left: 0; }
}
@media (max-width: 520px) {
  .g-4 { grid-template-columns: minmax(0, 1fr); }
  .ticker .phase, .masthead .tools .hide-sm { display: none; }
  .brand .sub { display: none; }
}

/* ---------- Címlap ---------- */
.lead { overflow: hidden; }
.lead .art { aspect-ratio: 16 / 7; background: var(--petrol); position: relative; overflow: hidden; }
.lead .art svg { width: 100%; height: 100%; display: block; }
.lead .art .tag { position: absolute; left: 18px; bottom: 14px; color: var(--on-dark); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.lead .body { padding: 20px 22px 18px; }
.lead h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin: 8px 0 10px; }
.lead p { color: var(--ink-2); margin: 0 0 14px; }
.byline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.react { margin-left: auto; display: flex; gap: 6px; }
.react button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; }
.react button[aria-pressed="true"] { border-color: var(--sage); color: var(--sage); background: var(--sage-soft); }
.react button.q[aria-pressed="true"] { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-soft); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 4px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 9px 12px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.article-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.article-row:last-child { border-bottom: 0; }
.article-row .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.article-row h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; margin: 4px 0 6px; }
.article-row p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 520px) { .article-row { grid-template-columns: 76px minmax(0, 1fr); } .article-row h3 { font-size: 18px; } }

.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.log li:last-child { border-bottom: 0; }
.log time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.log b { display: block; font-weight: 600; line-height: 1.3; }
.log .cat { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.log li.breaking { border-left: 3px solid var(--crimson); padding-left: 8px; margin-left: -11px; }
.log li.breaking .cat { color: var(--crimson); }

.poll-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px 44px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.poll-row .bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.poll-row .bar i { display: block; height: 100%; border-radius: 99px; }
.poll-row .delta { font-size: 12px; text-align: right; }

.chronicle { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.chronicle .stamp { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); }

.countdowns { display: grid; gap: 10px; }
.cd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cd b { font-weight: 600; font-size: 13.5px; display: block; }
.cd small { color: var(--muted); font-size: 12px; }
.cd .num { font-size: 18px; color: var(--accent); white-space: nowrap; }

.vote-widget .opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 8px; position: relative; overflow: hidden; font-size: 14px; }
.vote-widget .opt .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; transition: width .5s; }
.vote-widget .opt span { position: relative; z-index: 1; }
.vote-widget .opt .pct { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }
.vote-widget .opt[aria-pressed="true"] { border-color: var(--accent); }

/* ---------- Patkó ---------- */
.hemi svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Iránytű és térkép ---------- */
.compass svg, .island svg { width: 100%; height: auto; display: block; touch-action: none; }
.compass .axis { stroke: var(--line-strong); stroke-width: 1; }
.compass .grid-l { stroke: var(--line); stroke-width: 1; }
.compass text, .island text { font-family: var(--sans); fill: var(--muted); font-size: 11px; }
.compass .me { cursor: grab; }
.compass .me:active { cursor: grabbing; }
.attr-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.attr-row .bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.attr-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .15s; }
.island .region { stroke: var(--surface); stroke-width: 2; cursor: pointer; transition: opacity .2s; }
.island .region:hover, .island .region.sel { opacity: .85; stroke: var(--ink); }
.stacked { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.stacked i { display: block; height: 100%; }

/* ---------- Folyamatkövető (kormányalakítás) ---------- */
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; }
.stepper div { font-size: 12px; text-align: center; color: var(--muted); }
.stepper div::before { content: ""; display: block; height: 5px; border-radius: 99px; background: var(--line); margin-bottom: 7px; }
.stepper .done::before { background: var(--sage); }
.stepper .now { color: var(--ink); font-weight: 600; }
.stepper .now::before { background: var(--accent); }
.tally { display: flex; height: 26px; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--surface-2); font-size: 12px; font-weight: 600; }
.tally i { display: grid; place-items: center; color: #fff; font-style: normal; }
.tally .need { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kanban .col { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-width: 0; }
.kanban .col h4 { margin: 2px 4px 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.bill { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; font-size: 13px; }
.bill b { display: block; font-weight: 600; line-height: 1.3; margin: 3px 0 6px; }
.bill .meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; gap: 8px; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kanban { grid-template-columns: minmax(0, 1fr); } .stepper div { font-size: 10.5px; } }
.cq { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cq:last-child { border-bottom: 0; }
.cq b { font-size: 14px; }
.cq .opts { display: grid; gap: 5px; margin-top: 8px; }
.cq .o { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12.5px; }
.cq .o .bar { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; grid-column: 2; }
.cq .o .bar i { display: block; height: 100%; background: var(--accent); }

/* ---------- Gazdaság ---------- */
.kpi { padding: 14px 16px; }
.kpi small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.kpi .v { font-family: var(--mono); font-size: 26px; line-height: 1.2; margin-top: 4px; }
.kpi .d { font-size: 12.5px; }
.kpi svg { width: 100%; height: 34px; display: block; margin-top: 6px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data td.r, table.data th.r { text-align: right; }
table.data tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.slider { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 4px 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.slider output { text-align: right; font-family: var(--mono); font-size: 13px; }
.gauge { font-family: var(--mono); font-size: 34px; line-height: 1; }
.mood-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 46px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.mood-row .axis { height: 8px; position: relative; background: var(--surface-2); border-radius: 99px; }
.mood-row .axis::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.mood-row .axis i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.heat td { text-align: center; font-family: var(--mono); font-size: 12.5px; }

/* ---------- Irányítópult ---------- */
.ring { width: 92px; height: 92px; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.task:last-child { border-bottom: 0; }
.task input { margin-top: 3px; accent-color: var(--sage); }
.task.done span { text-decoration: line-through; color: var(--muted); }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.action { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 12px; }
.action:hover { border-color: var(--accent); }
.action b { display: block; font-size: 14px; margin: 6px 0 2px; }
.action small { color: var(--muted); }

/* ---------- Súgó ---------- */
.search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 99px; padding: 10px 16px; }
.search input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 16px; min-width: 0; }
.help-hit { padding: 14px 0; border-bottom: 1px solid var(--line); }
.help-hit h3 { margin: 4px 0 4px; font-size: 17px; }
.help-hit p { margin: 0; color: var(--ink-2); font-size: 14px; }
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.toc a { display: flex; justify-content: space-between; padding: 7px 0; text-decoration: none; border-bottom: 1px dashed var(--line); font-size: 14px; }
.toc a:hover { color: var(--accent); }

/* ---------- Lábléc, értesítés ---------- */
footer.site { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13px; color: var(--muted); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ============================================================================
   v0.8.0 – webes felület kiegészítései: űrlapok, flash, Gyülekező, STOP jel
   ========================================================================== */
.wrap.narrow { max-width: 640px; }
.nav-soon { display: flex; align-items: center; gap: 8px; padding: 13px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); opacity: .6; white-space: nowrap; cursor: help; background: none; border: 0; border-bottom: 2px solid transparent; }
.nav-soon:hover, .nav-soon:focus-visible { opacity: .85; }
.flashes { padding-top: 14px; display: grid; gap: 8px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid; }
.flash-ok { background: var(--sage-soft); border-color: transparent; color: var(--sage); }
.flash-error { background: var(--crimson-soft); border-color: transparent; color: var(--crimson); margin-bottom: 12px; }
.form .field { display: grid; gap: 5px; margin-bottom: 14px; }
.form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form input, .form select, .form textarea, .select-small {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; }
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form input[type="email"] { min-width: 0; flex: 1; }
.select-small { width: auto; padding: 5px 8px; font-size: 13px; }
.btn.big { padding: 12px 20px; font-size: 15px; }
.btn[disabled], button[disabled] { opacity: .5; cursor: not-allowed; }
.bg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bg-card { position: relative; display: block; cursor: pointer; }
.bg-card input { position: absolute; opacity: 0; }
.bg-card .bg-body { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); height: 100%; transition: border-color .15s; }
.bg-card .bg-body b { font-size: 14px; line-height: 1.3; }
.bg-card input:checked + .bg-body { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bg-card input:focus-visible + .bg-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.hot { background: var(--crimson-soft); color: var(--crimson); }
.resend { margin-top: 16px; }
.resend summary { padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600; }
.motto { margin: 0 0 14px; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--accent); border-left: 3px solid var(--accent-soft); padding-left: 12px; }
.react .inline-form button, .react-static { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; }
.react .inline-form button.q:hover { border-color: var(--crimson); }
.react .inline-form button:hover { border-color: var(--sage); }
.tabs a { padding: 9px 12px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.tabs a[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.poll-q { margin: 0 0 10px; font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.vote-widget form { margin: 0; }
.hemi-num { font: 400 38px var(--serif); fill: var(--ink); }
.hemi-sub { font: 600 9.5px var(--sans); letter-spacing: .14em; fill: var(--muted); }
.island-frame { background: var(--petrol); border-radius: var(--radius-sm); overflow: hidden; }
.island-frame svg, .lead .art svg { width: 100%; height: 100%; display: block; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; color: var(--muted); }
.checklist li::before { content: "○"; color: var(--line-strong); }
.checklist li.on { color: var(--ink); }
.checklist li.on::before { content: "●"; color: var(--sage); }

/* Gyülekező: hero és álló óra */
.gather-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 0 8px; }
.gather-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; margin: 8px 0 14px; }
.gather-hero p { color: var(--ink-2); max-width: 62ch; margin: 0 0 20px; font-size: 16.5px; }
.gather-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.clock-card { background: var(--petrol); color: var(--on-dark); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); text-align: center; }
.clock-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.clock-date { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; margin: 8px 0 14px; }
.clock-stop { display: grid; justify-items: center; gap: 10px; font-size: 14px; opacity: .92; }
.clock-sub { margin-top: 14px; font-size: 12px; opacity: .6; font-family: var(--mono); }
@media (max-width: 900px) { .gather-hero { grid-template-columns: minmax(0, 1fr); } }

/* v0.8.6: az idő áll – megállított stopper (Solar) finom pulzálással a régi villogó STOP tábla helyett */
.stop-sign { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #ff5a5f; animation: stoppulse 2.4s ease-in-out infinite; }
.stop-sign .ic { width: 100%; height: 100%; }
.stop-sign.big { width: 78px; height: 78px; color: #ff6b6b; filter: drop-shadow(0 0 14px rgba(255, 90, 95, .35)); }
.stop-tick { display: inline-flex; align-items: center; gap: 8px; }
@keyframes stoppulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .stop-sign { animation: none; } }
.island-frame svg { aspect-ratio: 780 / 330; height: auto; }
.transcript { max-height: 420px; overflow: auto; background: var(--petrol); color: var(--on-dark); border-radius: var(--radius-sm); padding: 12px 14px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ============================================================================
   v0.8.1 – ikonok, funkció szerinti színes gombok, fotók, karakterképek
   ========================================================================== */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.nav a .ic, .nav-soon .ic { width: 17px; height: 17px; opacity: .85; }
.card > header h2 .ic, .card > header h3 .ic { color: var(--accent); width: 17px; height: 17px; }
.kicker .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* Gombok: „iratfül” forma (levágott jobb felső sarok), tapintható alsó él, ikon + felirat.
   Funkció szerinti színek: létrehozás/igen = zöld, szerkesztés = borostyán, törlés/tiltás = piros,
   információ = kék, fő művelet = petrol, másodlagos = keretes. */
.btn {
  --bc: var(--surface); --bc2: var(--surface-2); --bt: var(--ink); --bb: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px;
  font: 600 13.5px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; color: var(--bt);
  background: linear-gradient(180deg, var(--bc), var(--bc2)); border: 1px solid var(--bb);
  border-radius: 7px 0 7px 7px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; cursor: pointer; white-space: nowrap;
}
.btn::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, .18) 50%); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); border-color: var(--bb); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22); }
.btn .ic { width: 16px; height: 16px; }
.btn.small { padding: 6px 12px 6px 9px; font-size: 12.5px; gap: 6px; }
.btn.small .ic { width: 14px; height: 14px; }
.btn.big { padding: 13px 22px 13px 17px; font-size: 15px; }
.btn.primary, .btn-primary { --bc: #24505e; --bc2: #152c34; --bt: #f3eee2; --bb: #152c34; }
.btn-ok     { --bc: #3f9a63; --bc2: #2c7a4b; --bt: #fff; --bb: #276c43; }
.btn-edit   { --bc: #e7b13e; --bc2: #cc9020; --bt: #241703; --bb: #b67f19; }
.btn-danger { --bc: #cf4152; --bc2: #a8283a; --bt: #fff; --bb: #962334; }
.btn-info   { --bc: #3f86c8; --bc2: #2a6aa8; --bt: #fff; --bb: #255f97; }
.btn-ghost  { --bc: transparent; --bc2: transparent; --bb: transparent; --bt: var(--ink-2); box-shadow: none; clip-path: none; border-radius: 7px; }
.btn-ghost::after { display: none; }
.btn-ghost:hover { --bc: var(--surface-2); --bc2: var(--surface-2); }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn-primary { --bc: #e3c06a; --bc2: #c9a24a; --bt: #14110a; --bb: #b38f3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary, :root:not([data-theme="light"]) .btn-primary { --bc: #e3c06a; --bc2: #c9a24a; --bt: #14110a; --bb: #b38f3a; } }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Ikonos mutatók és címsorok */
.kpi { position: relative; }
.kpi .kpi-ic { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); }
.kpi .kpi-ic .ic { width: 18px; height: 18px; }
.flash .ic { width: 17px; height: 17px; margin-right: 4px; }
.checklist li .ic { width: 16px; height: 16px; }

/* Karakterkép */
.avatar { overflow: hidden; }
img.avatar-img { object-fit: cover; padding: 0; background: var(--surface-2); display: inline-block; }
.avatar-edit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.avatar-edit .avatar { border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); }
.file-input { font-size: 13px; max-width: 100%; }

/* Fotós hőskép-sáv (Gyülekező) */
.hero-photo { position: relative; overflow: hidden; border-radius: 16px; margin-top: 4px; color: #f3eee2; min-height: 440px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(22px, 4vw, 48px); box-shadow: var(--shadow); }
.hero-photo > picture, .hero-photo > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 20, .9) 0%, rgba(5, 10, 20, .62) 50%, rgba(5, 10, 20, .2) 100%); }
.hero-photo > :not(picture) { position: relative; }
.hero-photo .kicker { color: #e3c06a; }
.hero-photo h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; margin: 8px 0 14px; color: #fff; }
.hero-photo p { color: rgba(243, 238, 226, .88); max-width: 60ch; margin: 0 0 20px; font-size: 16.5px; }
.hero-photo .clock-card { background: rgba(7, 12, 24, .62); backdrop-filter: blur(6px); border: 1px solid rgba(243, 238, 226, .18); }
.hero-photo .photo-credit { position: absolute; right: 14px; bottom: 10px; font-size: 11px; opacity: .55; }
@media (max-width: 900px) { .hero-photo { grid-template-columns: minmax(0, 1fr); min-height: 0; } .hero-photo::before { background: rgba(5, 10, 20, .72); } }

/* Kártyafotó és lap-fejléc kép */
.card-photo { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner { position: relative; display: block; height: clamp(140px, 22vw, 220px); border-radius: 14px; overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.lead .art picture, .lead .art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* v0.8.2 – robotvédelem, lezárt regisztráció, rendszergazdai beállítások */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.botguard { position: relative; }
.botguard-status { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); }
.botguard-status .ic { flex: none; }
.botguard.ok .botguard-status { color: var(--sage); }
.inline-form .botguard { flex-basis: 100%; }
.inline-form:has(.botguard) { flex-wrap: wrap; }
.btn-disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.closed-message { font-size: 16px; line-height: 1.55; margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.admin-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 13.5px; background: var(--surface); }
.admin-tabs a[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0 0 14px; }
.radio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.radio-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* v0.8.3 – Meridia térkép HTML-címkékkel, Névjegy */
.mmap { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: #0f3b47; container-type: inline-size; }
.mmap-img, .mmap-img img { display: block; width: 100%; height: auto; }
.mmap-label { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; text-decoration: none;
  background: rgba(10, 22, 34, .72); color: #f4efe3; padding: 4px 9px 4px 5px; border-radius: 99px; font-size: 12.5px; line-height: 1.15;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); white-space: nowrap; }
.mmap-label:hover, .mmap-label:focus-visible { background: rgba(10, 22, 34, .92); border-color: #e0bd5c; }
.mmap-label small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #d9cfb8; }
.mmap-label small .ic { width: 11px; height: 11px; }
.mmap-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: #e0bd5c; color: #1b1a14; font-weight: 700; font-size: 11.5px; flex: none; }
.mmap-no.inline { width: 18px; height: 18px; font-size: 10.5px; vertical-align: 1px; }
@container (max-width: 560px) { .mmap-text { display: none; } .mmap-label { padding: 2px; } }
@supports not (container-type: inline-size) { @media (max-width: 640px) { .mmap-text { display: none; } .mmap-label { padding: 2px; } } }
.about-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.about-head h1 { font-family: var(--serif); font-size: 44px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; line-height: 1; }
.about-tag { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.about-credits { margin: 22px 0 0; display: grid; gap: 4px; }
.about-credits dt { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.about-credits dd { margin: 0; font-size: 16px; font-weight: 500; }
.changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.changelog li { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.changelog .chip { justify-content: center; }
/* v0.8.4 – Meridia oldal, vezető hír, üzenet az adminnak */
.country-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.country-coat { width: 170px; height: auto; flex: none; }
.country-hero h1 { font-family: var(--serif); font-size: clamp(38px, 6vw, 60px); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0 8px; line-height: 1; }
.country-hero > div { flex: 1 1 320px; min-width: 0; }
.country-hero p { margin: 0; max-width: 62ch; color: var(--ink-2); line-height: 1.55; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.toc a { font-size: 13px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; background: var(--surface); }
.toc a:hover { border-color: var(--accent); }
[id] { scroll-margin-top: 70px; }
.facts th { text-align: left; font-weight: 600; width: 38%; color: var(--muted); font-size: 13px; vertical-align: top; }
.facts td { font-size: 14px; }
.symbol { margin: 0 0 18px; }
.symbol .flag-img, .symbol .flag-img img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 4px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.symbol figcaption { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.symbol-coat { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 0; }
.symbol-coat img { width: 110px; height: auto; flex: none; }
.symbol-coat figcaption { margin-top: 0; }
.prose p { line-height: 1.65; margin: 0 0 12px; }
.prose.cols { columns: 2 320px; column-gap: 32px; margin-top: 16px; }
.timeline, .lead-next { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li, .lead-next li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child, .lead-next li:last-child { border-bottom: 0; }
.tl-when { font-family: var(--mono); font-size: 12.5px; color: var(--accent); padding-top: 2px; }
.timeline p, .lead-next p { margin: 4px 0 0; line-height: 1.55; font-size: 14px; }
@media (max-width: 640px) { .timeline li, .lead-next li { grid-template-columns: 1fr; gap: 2px; } }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 26px; }
.city-grid h3 { font-size: 15px; margin: 0 0 8px; }
.city-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.city-grid .muted { font-size: 12.5px; }
.lead-story { overflow: hidden; }
.lead-photo, .lead-photo img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 45%; }
.lead-title { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; margin: 6px 0 12px; }
.lead-lede { font-size: 17px; line-height: 1.55; font-weight: 500; margin: 0 0 12px; }
.lead-story .body > p { line-height: 1.65; margin: 0 0 12px; }
.lead-next-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 4px; }
.lead-next { margin-bottom: 16px; }
.lead-next li { grid-template-columns: 1fr; gap: 2px; }
.lead-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
.lead-aside { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px 18px; align-self: start; }
@media (max-width: 900px) { .lead-cols { grid-template-columns: minmax(0, 1fr); } .lead-photo, .lead-photo img { aspect-ratio: 3 / 2; } }
.page-banner.focus-top img { object-position: center 22%; }
.field-legend { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.admin-msg { border-bottom: 1px solid var(--line); padding: 14px 0; }
.admin-msg:first-child { padding-top: 0; }
.admin-msg header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.admin-msg-body { margin: 8px 0 4px; line-height: 1.6; }
/* v0.8.5 – toast értesítések, megerősítő ablak, finom görgetés, lapfülek, Súgó */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 38px 12px 14px; border-radius: var(--radius-sm); position: relative;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-left: 4px solid var(--sage); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  font-size: 14px; line-height: 1.45; transform: translateY(12px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.toasts .toast:not([data-armed]) { transform: none; opacity: 1; }
.toast.in { transform: none; opacity: 1; }
.toast.out { transform: translateX(24px); opacity: 0; }
.toast .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--sage); }
.toast-error { border-left-color: var(--crimson); } .toast-error .ic { color: var(--crimson); }
.toast-info { border-left-color: var(--accent); } .toast-info .ic { color: var(--accent); }
.toast-close { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 99px; }
.toast-close:hover { background: var(--surface-2); color: var(--ink); }
.confirm-dialog { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px 24px 18px; width: min(420px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center; animation: dlg-in .18s ease; }
.confirm-dialog::backdrop { background: rgba(8, 14, 24, .55); backdrop-filter: blur(2px); }
.confirm-dialog.out { opacity: 0; transform: scale(.97); transition: opacity .15s, transform .15s; }
.confirm-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.confirm-ic.danger { background: var(--crimson-soft); color: var(--crimson); }
.confirm-ic .ic { width: 26px; height: 26px; }
.confirm-text { font-size: 16px; line-height: 1.5; margin: 6px 0 18px; }
.confirm-actions { justify-content: center; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes target-glow { 0% { box-shadow: 0 0 0 0 rgba(217, 180, 90, .0); background-color: var(--accent-soft); } 100% { box-shadow: none; background-color: transparent; } }
.flash-target { animation: target-glow 1.6s ease-out; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.tabbar { display: none; }
.tabs-on .tabbar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 18px; }
.tabbar [role="tab"] { font: inherit; font-size: 14px; font-weight: 500; padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.tabbar [role="tab"]:hover { color: var(--ink); }
.tabbar [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabbar [role="tab"] .ic { width: 16px; height: 16px; }
.tabs-on .tab-panel > .tab-title { display: none; }
.tab-title { margin: 26px 0 12px; font-size: 20px; }
.fade-in { animation: fade-in .22s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.help-side { position: sticky; top: 64px; }
.help-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.help-side a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px; }
.help-side a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.help-side a:hover { background: var(--surface-2); }
.help-search { display: flex; gap: 8px; margin-bottom: 18px; }
.help-search input { flex: 1; min-width: 0; }
.help-doc { font-size: 15px; line-height: 1.65; }
.help-doc h1 { font-family: var(--serif); font-size: 32px; margin: 0 0 14px; }
.help-doc h2 { font-size: 21px; margin: 28px 0 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.help-doc h3 { font-size: 17px; margin: 20px 0 8px; }
.help-doc h4 { font-size: 15px; margin: 16px 0 6px; }
.help-doc table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0 16px; }
.help-doc th, .help-doc td { border-bottom: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.help-doc th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.help-doc .tablewrap { overflow-x: auto; }
.help-doc blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.help-doc code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.help-doc mark { background: #f3d36b; color: #1b1a14; border-radius: 2px; padding: 0 1px; }
.help-toc { font-size: 13.5px; margin: 0 0 16px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
.help-toc ul { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; }
.help-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-hits li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.help-hits .path { font-size: 12.5px; color: var(--muted); }
.help-hits p { margin: 6px 0 0; font-size: 14px; }
.help-hits mark { background: #f3d36b; color: #1b1a14; }
@media (max-width: 860px) { .help-layout { grid-template-columns: minmax(0, 1fr); } .help-side { position: static; } }
/* v0.8.6 – szélesebb szövegek, kártyák belső görgetése, színes karakterjelölések, táblázat-kiegészítő */
.pagehead p { max-width: none; }
.wrap.narrow { max-width: 860px; }
.country-hero p, .gather-hero p, .hero-photo p { max-width: none; }
.card-scroll { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.card-scroll::-webkit-scrollbar { width: 8px; }
.card-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.card-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.char-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; vertical-align: -4px; border-radius: 99px; }
.char-mark .ic { width: 17px; height: 17px; }
.mark-main { color: #d9a514; }
.mark-gm { color: #8b5cf6; }
.mark-admin { color: #e11d48; }
:root[data-theme="dark"] .mark-main { color: #f2c14e; }
:root[data-theme="dark"] .mark-gm { color: #b69cff; }
:root[data-theme="dark"] .mark-admin { color: #ff6b8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-main { color: #f2c14e; } :root:not([data-theme="light"]) .mark-gm { color: #b69cff; } :root:not([data-theme="light"]) .mark-admin { color: #ff6b8a; } }
.chip.mark-gm-chip { background: rgba(139, 92, 246, .14); color: #7c4ddf; border-color: transparent; }
.chip.mark-admin-chip { background: rgba(225, 29, 72, .12); color: #c8143d; border-color: transparent; }
.charbar .who b + .char-mark { margin-left: 2px; }
.cell-user { display: flex; gap: 10px; align-items: flex-start; }
.dt-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dt-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface); flex: 1 1 260px; max-width: 420px; }
.dt-search input { border: 0; background: none; padding: 8px 0; flex: 1; min-width: 0; font: inherit; color: inherit; outline: none; }
.dt-search .ic { color: var(--muted); }
.dt-info { font-size: 13px; color: var(--muted); }
.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-sortable::after { content: " ↕"; opacity: .35; font-size: 11px; }
.dt-sortable[aria-sort="ascending"]::after { content: " ↑"; opacity: .9; }
.dt-sortable[aria-sort="descending"]::after { content: " ↓"; opacity: .9; }
.dt-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dt-pager button { min-width: 34px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.dt-pager button[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.dt-empty td { text-align: center; color: var(--muted); padding: 18px; }
/* v0.8.7 – játékfázisok, szavazás a játékról, fórum */
.phase-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.phase-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.phase-row:last-child { border-bottom: 0; }
.phase-dot { width: 12px; height: 12px; border-radius: 99px; background: var(--line-strong); box-shadow: 0 0 0 4px var(--surface-2); }
.phase-row.is-on .phase-dot { background: var(--sage); box-shadow: 0 0 0 4px var(--sage-soft); }
.phase-row.is-future { opacity: .62; }
.phase-text { display: grid; gap: 2px; }
.phase-text .muted { font-size: 13px; }
.phase-text small { font-size: 11.5px; }
@media (max-width: 640px) { .phase-row { grid-template-columns: 18px minmax(0, 1fr); } .phase-row > .chip, .phase-row > form, .phase-row > a { grid-column: 2; justify-self: start; } }
.poll-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pb-label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 4px; }
.pb-label .chip { margin-left: 6px; font-size: 11px; }
.pb-track { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pb-track i { display: block; height: 100%; border-radius: 99px; background: var(--line-strong); transition: width .6s ease; }
.poll-bars .is-lead .pb-track i { background: var(--accent); }
.poll-bars .is-mine .pb-label > span:first-child { font-weight: 600; }
.meta-poll-q { font-family: var(--serif); font-size: 21px; line-height: 1.3; margin: 0 0 14px; }
.meta-poll-form { margin-bottom: 4px; }
.admin-poll { padding: 14px 0; border-bottom: 1px solid var(--line); }
.admin-poll:first-child { padding-top: 0; }
.admin-poll.is-visible { border-left: 3px solid var(--sage); padding-left: 12px; }
.admin-poll .poll-bars { margin: 8px 0 10px; }
.poll-options-edit { border: 0; padding: 0; margin: 0 0 6px; }
.forum-cat { text-decoration: none; color: inherit; }
.forum-cat:hover { border-color: var(--accent); }
.forum-grid { align-items: start; }
.thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.thread-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.thread-list li:last-child { border-bottom: 0; }
.thread-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin-top: 4px; }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-head > span { flex: 1; }
.post-body { line-height: 1.65; overflow-wrap: anywhere; }
/* v0.8.7 – a címer ugyanolyan magas, mint a zászló (Meridia oldal, „Zászló és címer”) */
.symbol { --sym-h: clamp(150px, 24vw, 210px); }
.symbol .flag-img { display: inline-block; width: auto; max-width: 100%; height: auto; border: 0; box-shadow: none; border-radius: 0; }
.symbol .flag-img img { width: auto; max-width: 100%; height: var(--sym-h); aspect-ratio: 3 / 2; object-fit: cover; }
.symbol-coat { display: block; }
.symbol-coat img { width: auto; height: var(--sym-h); display: block; }
.symbol-coat figcaption { margin-top: 10px; }

/* v0.8.7 – infosáv minden oldal tetején (pl. lezárt regisztráció) */
.site-notice { background: var(--crimson-soft); color: var(--crimson); border-bottom: 1px solid rgba(138, 36, 56, .18); }
.site-notice .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; line-height: 1.45; flex-wrap: wrap; }
.site-notice .ic { width: 20px; height: 20px; flex: none; }
.site-notice b { font-weight: 700; }
.site-notice .msg { color: var(--ink); }
.site-notice a { color: inherit; font-weight: 600; margin-left: auto; white-space: nowrap; }
/* v0.8.8 – a felső menü a játékcím betűtípusával, csupa nagybetűvel */
.nav a, .nav-soon { font-family: var(--serif); font-weight: 400; font-size: 14.5px; letter-spacing: .09em; text-transform: uppercase; }
.nav a .ic, .nav-soon .ic { width: 16px; height: 16px; }

/* v0.8.8 – térkép: a címkék nem linkek, ráhúzva buborékban mutatják az adatokat; városok pontként */
.mmap { overflow: visible; }
.mmap-img, .mmap-img img { border-radius: var(--radius-sm); }
.mmap-label { font: inherit; font-size: 12.5px; cursor: help; z-index: 3; }
.mmap-label:focus-visible { outline: 2px solid #e0bd5c; outline-offset: 2px; }
.mmap-tip { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: min(300px, 78vw);
  white-space: normal; text-align: left; background: rgba(10, 18, 30, .96); color: #f4efe3; border: 1px solid rgba(224, 189, 92, .45); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 12.5px; line-height: 1.45; gap: 4px; pointer-events: none; }
.mmap-tip b { font-size: 13.5px; }
.mmap-tip .muted { color: #c7bfae; display: flex; align-items: center; gap: 4px; }
.mmap-tip .ic { width: 12px; height: 12px; }
.mmap-tip .tip-grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 4px 0; }
.mmap-tip .tip-grid span { color: #c7bfae; }
.mmap-tip .tip-num { display: flex; align-items: center; gap: 5px; color: #e0bd5c; font-family: var(--mono); }
.mmap-label:hover .mmap-tip, .mmap-label:focus .mmap-tip, .mmap-city:hover .mmap-tip, .mmap-city:focus .mmap-tip { display: grid; }
.mmap-label:hover, .mmap-label:focus, .mmap-city:hover, .mmap-city:focus { z-index: 25; }
.tip-left .mmap-tip { left: 0; transform: none; }
.tip-right .mmap-tip { left: auto; right: 0; transform: none; }
.tip-up .mmap-tip { top: auto; bottom: calc(100% + 8px); }
.mmap-city { position: absolute; transform: translate(-50%, -50%); width: 12px; height: 12px; padding: 0; border-radius: 99px; border: 2px solid #fff;
  background: #e0bd5c; box-shadow: 0 0 0 2px rgba(10, 18, 30, .55), 0 2px 6px rgba(0, 0, 0, .4); cursor: help; z-index: 2; }
.mmap-city.is-seat { width: 15px; height: 15px; background: #f2c14e; }
.mmap-city.is-capital { width: 18px; height: 18px; background: #e11d48; }
.mmap-city:hover, .mmap-city:focus-visible { outline: none; box-shadow: 0 0 0 3px #e0bd5c, 0 2px 8px rgba(0, 0, 0, .5); }
.mmap-city .mmap-tip { top: calc(100% + 6px); }
.mmap-city.tip-up .mmap-tip { top: auto; bottom: calc(100% + 6px); }
.mmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mmap-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 99px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); vertical-align: -1px; margin-right: 5px; }
.island-photo { margin: 0; }
.island-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.island-photo figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
/* ---------- v0.8.8: Gyülekező – szavazás harmadik kártyaként ---------- */
.gather-row .meta-poll .meta-poll-q { font-size: 18px; }
.gather-row .meta-poll .radio-row { flex-direction: column; gap: 8px; }
.gather-row .meta-poll .radio-pill { width: 100%; }
@media (min-width: 901px) and (max-width: 1180px) {
  .gather-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gather-row > .meta-poll { grid-column: 1 / -1; }
}

/* ---------- v0.8.8: pártok ---------- */
.party-grid { align-items: start; }
.party-name { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.party-dot { width: 12px; height: 12px; border-radius: 99px; flex: none; box-shadow: 0 0 0 1px var(--line-strong); }
.party-table td { vertical-align: middle; }
.party-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.party-badge { display: inline-block; padding: 3px 12px; border-radius: var(--radius-sm); background: var(--party, #567972); color: #fff;
  font-family: var(--sans, inherit); font-size: .55em; letter-spacing: .08em; font-weight: 700; }
.party-head .kicker a { text-decoration: none; }
.party-actions { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.party-actions p { margin: 0 0 10px; }
.party-inline { margin-top: 14px; flex-wrap: wrap; font-size: 13.5px; }
.party-more { margin-top: 14px; }
.party-more summary { cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.party-more[open] summary { margin-bottom: 12px; }
.party-program { white-space: normal; }
.member { display: inline-flex; gap: 9px; align-items: center; }
.platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.platforms li { display: grid; gap: 4px; }
.pbar { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; }
.applicant { align-items: center; flex-wrap: wrap; }
.applicant-body { flex: 1; min-width: 200px; }
.applicant-msg { display: block; margin-top: 5px; font-style: italic; color: var(--ink-2); }
.applicant-btns { display: inline-flex; gap: 6px; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form input[type="color"] { height: 40px; padding: 3px; }
.form input[type="range"] { padding: 0; accent-color: var(--accent); }
.found-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .found-grid, .row-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .row-2 { grid-template-columns: minmax(0, 1fr); } }

/* ideológiai térkép */
.ideo { margin: 0; }
.ideo svg { display: block; width: 100%; max-width: 420px; margin: 0 auto; height: auto; }
.ideo-q { stroke: none; }
.ideo-q.q1 { fill: rgba(63, 134, 200, .07); } .ideo-q.q2 { fill: rgba(111, 176, 139, .09); }
.ideo-q.q3 { fill: rgba(225, 29, 72, .06); }  .ideo-q.q4 { fill: rgba(217, 180, 90, .10); }
.ideo-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.ideo-axis { stroke: var(--line-strong); stroke-width: 1.2; }
.ideo-ax { font-size: 10px; fill: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ideo-pt text { font-size: 11px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ideo-pt circle { stroke: var(--surface); stroke-width: 2; }
.ideo-faction circle { opacity: .75; }
.ideo-me rect { fill: none; stroke: var(--ink); stroke-width: 2; }
.ideo a:hover circle, .ideo a:focus circle { stroke: var(--ink); }
.ideo-pick circle { fill: var(--accent); fill-opacity: .35; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 2; }
.ideo-pick text { font-size: 11px; font-weight: 700; fill: var(--accent); }
.ideo figcaption { text-align: center; font-size: 12.5px; margin-top: 6px; }

/* ---------- v0.8.8: Személyi Titkár ---------- */
.sec-bell { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--crimson);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface-2); }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec-task { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.sec-task:last-child { border-bottom: 0; }
.sec-ic { flex: none; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.sec-ic .ic { width: 16px; height: 16px; }
.tone-action .sec-ic { background: var(--accent-soft); color: var(--accent); }
.tone-ok .sec-ic { background: var(--sage-soft); color: var(--sage); }
.tone-warn .sec-ic { background: var(--crimson-soft); color: var(--crimson); }
.sec-body { flex: 1; min-width: 0; }
.sec-body a { text-decoration: none; }
.sec-body a:hover b { text-decoration: underline; }
/* ---------- v0.8.9: címsor-eszközök (Fórum, Súgó, téma, rendszergazda) ---------- */
.toollink { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 99px; border: 1px solid transparent;
  color: var(--ink-2); text-decoration: none; font: inherit; font-size: 13.5px; font-weight: 600; background: none; cursor: pointer; }
.toollink .ic { width: 17px; height: 17px; }
.toollink:hover { border-color: var(--line); color: var(--ink); }
.toollink[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.toollink[aria-disabled="true"] { opacity: .55; cursor: help; }
a.iconbtn { color: inherit; }
.iconbtn[aria-current="page"] { border-color: var(--accent); }
@media (max-width: 640px) {
  .toollink { padding: 0; width: 38px; justify-content: center; border-color: var(--line); }
  .toollink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .masthead .tools { gap: 6px; }
}

/* ---------- v0.8.9: szavazás a v2 látványterv formájában ---------- */
.vote-widget .opt { cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
.vote-widget .opt:hover:not(.is-static) { border-color: var(--line-strong); }
.vote-widget .opt.is-static { cursor: default; }
.vote-widget .opt.is-lead .fill { background: color-mix(in srgb, var(--accent) 30%, var(--accent-soft)); }
.vote-widget .opt[aria-pressed="true"] { border-color: var(--accent); font-weight: 600; }
.vote-widget .opt .opt-label { display: inline-flex; align-items: center; gap: 6px; }
.vote-widget .opt .opt-label .ic { width: 15px; height: 15px; color: var(--accent); }
.meta-poll .note { margin-top: 4px; }

/* ---------- v0.8.9: címlap az idő indítása előtt, közlemények, kassza ---------- */
.countdowns .clock-stop { justify-items: start; grid-template-columns: auto 1fr; align-items: center; text-align: left; }
.communique-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.communique-list li { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.communique-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.communique-list .cq-title { font-family: var(--serif); font-weight: 400; font-size: 16.5px; line-height: 1.3; }
.communique-list.full details summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.communique-list.full details .prose { margin-top: 8px; font-size: 14px; }
.donor-list { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.donor-list li { display: list-item; }
.donor-list li > .member { vertical-align: middle; }
.donor-list li > .num { float: right; }
.donor-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.donate-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
/* ---------- v0.8.9: Iroda (barna gomb, a teendők száma a gombon) ---------- */
.btn-office { --bc: #9a6a3f; --bc2: #7a4f2b; --bt: #fff; --bb: #6a4424; }
.btn-office .bell-badge { position: static; display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 99px;
  background: #fff; color: #7a4f2b; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: none; }
.office-ring { display: flex; gap: 16px; align-items: center; }
.office-ring .ring { flex: none; width: 92px; height: 92px; }
.ring-num { font: 500 20px var(--mono); fill: var(--ink); }
a.action { display: block; color: inherit; text-decoration: none; }
a.action b { color: var(--ink); }
.action { font: inherit; cursor: pointer; }
.action.is-soon { opacity: .6; cursor: help; }
.action.is-soon:hover { border-color: var(--line); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; flex: none; }

/* ---------- v0.8.9: főmenü – vastagabb betű (a Libre Caslon Display csak vékony, ezért a menüben a szövegváltozat) ---------- */
.nav a, .nav-soon { font-family: "Libre Caslon Text", var(--serif); font-weight: 400; letter-spacing: .07em; }
/* ---------- v0.9.0 ---------- */
/* népességszámok: a szóköz-ezreselválasztó miatt ne törjenek két sorba */
.data td.num, .data th.num, td.num, .tip-num, .kpi .v { white-space: nowrap; }
/* Meridia: a térkép a Tartományok és a Városok fülön is */
.map-card .mmap { max-width: 980px; margin: 0 auto; }
/* belépés: Emlékezz rám */
.check.remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; font-size: 14px; cursor: pointer; }
.check.remember input { width: 17px; height: 17px; accent-color: var(--sage); margin: 0; }
/* álló idő: visszaszámláló a hero-részen (a v2 .cd mintája) */
.pagehead-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stop-cd { min-width: 280px; box-shadow: var(--shadow); }
.stop-cd b { display: flex; align-items: center; gap: 6px; }
.stop-cd b .ic { width: 15px; height: 15px; color: var(--crimson); }
.clock-card .stop-cd { margin-top: 12px; background: rgba(7, 12, 24, .55); border-color: rgba(243, 238, 226, .22); box-shadow: none; min-width: 0; }
.clock-card .stop-cd b { color: #fff; }
.clock-card .stop-cd small { color: rgba(243, 238, 226, .78); }
.clock-card .stop-cd .num { color: #e3c06a; }
.stop-form .grid { margin-bottom: 4px; }
/* Iroda: fotós fejléc napszakos megszólítással, lapfülek */
.office-hero { min-height: 300px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: 4px; }
.office-hero > picture img { object-position: 50% 40%; }
.office-hero::before { background: linear-gradient(90deg, rgba(5, 10, 20, .88) 0%, rgba(5, 10, 20, .55) 55%, rgba(5, 10, 20, .12) 100%); }
.office-hero h1.greeting { font-size: clamp(30px, 4.4vw, 52px); margin: 8px 0 10px; }
.office-hero p { margin-bottom: 16px; }
.office-hero .btn { background: rgba(7, 12, 24, .55); color: #f3eee2; border-color: rgba(243, 238, 226, .35); }
.office-hero .btn:hover { background: rgba(7, 12, 24, .8); }
.office-tabs .tabbar .chip { margin-left: 2px; padding: 0 7px; font-size: 11px; }.office-hero > picture { z-index: 0; }
.office-hero::before { z-index: 1; }
.office-hero > div { z-index: 2; }
.office-hero .kicker, .office-hero h1, .office-hero p { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
/* ---------- v0.9.1: Meridiai Posta ---------- */
.post-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .post-layout { grid-template-columns: minmax(0, 1fr); } }
.post-nav .body { display: grid; gap: 14px; }
.post-new { justify-content: center; }
.post-folders, .post-extra { display: grid; gap: 2px; }
.post-folders a, .post-extra a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; }
.post-folders a:hover, .post-extra a:hover { background: var(--surface); }
.post-folders a[aria-current="page"] { background: var(--surface); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.post-folders a .chip { margin-left: auto; }
.post-extra { border-top: 1px solid var(--line); padding-top: 10px; }
.post-nav .note { margin: 0; }
.tg-list { list-style: none; margin: 0; padding: 0; }
.tg-row + .tg-row { border-top: 1px solid var(--line); }
.tg-row a { display: grid; grid-template-columns: 10px 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 6px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.tg-row a:hover { background: var(--surface); }
.tg-row .dot { align-self: center; }
.tg-main { display: grid; min-width: 0; }
.tg-subject { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-row.is-unread .tg-subject { font-weight: 700; }
.tg-snippet { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-meta { display: grid; justify-items: end; gap: 2px; font-size: 12.5px; text-align: right; }
.tg-who { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.tg-who .ic { width: 13px; height: 13px; }
.tg-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .tg-row a { grid-template-columns: 10px 34px minmax(0, 1fr); } .tg-meta { grid-column: 3; justify-items: start; text-align: left; } .tg-chips { justify-content: flex-start; } }
.pager { justify-content: center; align-items: center; margin-top: 14px; }
.tg-title { overflow-wrap: anywhere; }
.tg-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tg-msg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface); max-width: 92%; }
.tg-msg.is-mine { justify-self: end; background: var(--card, var(--surface)); border-color: var(--line-strong); }
.tg-msg.is-current { box-shadow: 0 0 0 2px var(--accent); }
.tg-msg-head { display: flex; gap: 10px; align-items: center; font-size: 13.5px; margin-bottom: 8px; }
.tg-msg-subject { display: block; margin-bottom: 6px; }
.tg-body { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.compose-types { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.compose-types legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.compose-type { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; }
.compose-type:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.compose-type input { margin-top: 3px; accent-color: var(--accent); flex: none; width: auto; min-width: 0; padding: 0; }
.compose-type span { display: grid; gap: 2px; }
.compose-type small { color: var(--muted); font-size: 12px; }
.compose-type .ic { width: 15px; height: 15px; }
.recipient-box { position: relative; }
.recipient-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--card, #fff); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; }
.recipient-list li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.recipient-list li small { color: var(--muted); font-size: 12px; }
.recipient-list li[aria-selected="true"], .recipient-list li:hover { background: var(--surface); }
.recipient-list .recipient-none { color: var(--muted); cursor: default; }
.char-counter { display: block; text-align: right; font-size: 12px; margin-top: 4px; }
.iconlink { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--muted); }
.iconlink:hover { color: var(--accent); }
.iconlink .ic { width: 16px; height: 16px; }
.tg-mini { text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.tg-mini:hover { background: var(--surface); }
.post-btn .bell-badge { position: static; display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 99px; background: #fff; color: var(--crimson); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: none; }
/* ---------- v0.9.2: ideológiai térkép a v2 iránytű formájában; pártoldal fülekkel ---------- */
.ideo svg { max-width: 480px; }
.ideo-q { display: none; }
.ideo-frame { fill: none; stroke: var(--line); }
.ideo-grid { stroke: var(--line); stroke-dasharray: none; stroke-width: 1; }
.ideo-axis { stroke: var(--line-strong); stroke-width: 1; }
.ideo-ax { font-family: var(--sans); font-size: 11px; fill: var(--muted); text-transform: none; letter-spacing: 0; }
.ideo-sigma { fill-opacity: .05; stroke-opacity: .5; stroke-dasharray: 3 4; stroke-width: 1.2; }
.ideo-pt circle { stroke: var(--surface); stroke-width: 2; }
.ideo-party text { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ideo-faction circle { opacity: .8; stroke-width: 1.5; }
.ideo-me rect { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.ideo-me text { font-size: 11.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ideo a:hover .ideo-party circle, .ideo a:focus .ideo-party circle { stroke: var(--ink); }
.ideo-pick-sigma { fill: var(--accent); fill-opacity: .05; stroke: var(--accent); stroke-opacity: .55; stroke-dasharray: 6 4; stroke-width: 1.4; }
.ideo-pick-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.ideo-pick text { font-size: 12px; font-weight: 700; fill: var(--accent); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.party-tabs { margin-top: 22px; }
.party-tabs .tabbar .chip { margin-left: 2px; padding: 0 7px; font-size: 11px; }
.party-tabs .tab-panel > .card + .card { margin-top: 22px; }
/* ---------- v0.9.3: karaktersáv (profil a képen/néven, azonnali karakterváltás); címlap üres kártyái ---------- */
.charbar .who-link { color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding: 3px 8px 3px 3px; margin-left: -3px; transition: background .15s; }
.charbar .who-link:hover, .charbar .who-link:focus-visible { background: var(--surface); }
.charbar .who-link:hover .who-name, .charbar .who-link:focus-visible .who-name { text-decoration: underline; text-underline-offset: 3px; }
.who-avatar { position: relative; display: inline-flex; flex: none; }
.who-edit { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 99px; background: var(--card, #fff); border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--muted); opacity: .85; transition: opacity .15s, color .15s; }
.who-edit .ic { width: 10px; height: 10px; }
.charbar .who-link:hover .who-edit, .charbar .who-link:focus-visible .who-edit { opacity: 1; color: var(--accent); }
.char-switch { cursor: pointer; }
.char-switch.is-busy { opacity: .6; }
.empty-line { margin: 0; color: var(--muted); font-size: 13.5px; }
.card.is-empty .body { min-height: 64px; display: flex; align-items: center; }
.card.lead.is-empty .body { min-height: 180px; justify-content: center; text-align: center; }
/* ---------- v0.9.4: címlap (kiemelt visszaszámláló, közlemények a hírekben, 0. napi vezércikk, Teendőid), fiók, admin gomb ---------- */
.stop-card { background: linear-gradient(135deg, #0f2a36 0%, #1d3f4d 100%); border-color: #1d3f4d; color: #f3eee2; box-shadow: var(--shadow); }
.stop-card .body { padding: 14px; }
.stop-card .stop-cd { background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; flex-wrap: wrap; }
.stop-card .stop-cd b { color: #fff; }
.stop-card .stop-cd b .ic { color: #e3c06a; }
.stop-card .stop-cd small { color: rgba(243, 238, 226, .8); }
.stop-card .stop-cd .num { color: #e3c06a; font-size: 22px; }
.todo-card { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.todo-card header { border-bottom-color: rgba(255, 255, 255, .12); }
.todo-card header h2, .todo-card header h2 .ic { color: var(--surface); }
.todo-card .body { display: grid; gap: 6px; }
.todo-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--surface); text-decoration: none; background: rgba(255, 255, 255, .06); }
.todo-line:hover, .todo-line:focus-visible { background: rgba(255, 255, 255, .14); }
.todo-line b { color: var(--gold, #e0bd5c); font-size: 15px; }
.todo-line .ic { width: 16px; height: 16px; }
.party-thumb { display: grid; place-items: center; background: var(--party); border-radius: var(--radius-sm); color: #fff; font-weight: 800; letter-spacing: .04em; font-size: 15px; }
.party-thumb span { padding: 4px; text-align: center; overflow-wrap: anywhere; }
.communique-row h3 a { color: inherit; text-decoration: none; }
.communique-row h3 a:hover { text-decoration: underline; }
.day0-more { margin-top: 10px; }
.day0-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.day0-more .prose { margin-top: 10px; font-size: 14.5px; }
.day0-more .lead-next { margin: 8px 0 12px; }
.day0-row .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.btn-icon { padding-left: 9px; padding-right: 9px; }
.btn-icon .ic { margin: 0; }
.account-btn[aria-current="page"], .admin-btn[aria-current="page"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.mail-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-toggle-text { display: flex; gap: 9px; align-items: flex-start; }
.mail-toggle-text > span { display: grid; gap: 1px; }
.mail-toggle-text small { color: var(--muted); font-size: 12px; }
.mail-toggle-text .ic { margin-top: 2px; }
.switch { flex: none; position: relative; width: 42px; height: 24px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-2, #e6e1d6); cursor: pointer; padding: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch.is-on { background: var(--sage); border-color: var(--sage); }
.switch.is-on::after { transform: translateX(18px); }
.post-mail { border-top: 1px solid var(--line); padding-top: 12px; }
.account-grid .card .form { margin: 0; }
/* ---------- v0.9.5: havi krónika („A nagyvilágban”) ---------- */
/* a bélyegkép a szélesség harmadán balra úszik, a szöveg mellette és alatta fut */
.chron-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.chron-item:last-child { border-bottom: 0; }
.chron-item::after { content: ""; display: block; clear: both; }
.chron-thumb { float: left; width: 33%; margin: 4px 16px 8px 0; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.chron-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chron-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.chron-ph .ic { width: 34%; height: 34%; opacity: .45; }
.chron-item h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; margin: 4px 0 6px; }
.chron-item p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.chron-item .chron-echo { font-style: italic; color: var(--muted); }
.chron-item .chron-echo b { font-style: normal; color: var(--ink-2); }
.chron-meta { clear: both; }
.chronicle .chron-item { padding-top: 0; border-bottom: 0; }
.chron-more { margin: 4px 0 0; font-size: 13.5px; }
.chron-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
@media (max-width: 520px) { .chron-thumb { margin-right: 12px; } .chron-item h3 { font-size: 18px; } }

/* ---------- v0.9.5: Közszereplők ---------- */
.cell-user .sub { font-size: 12px; color: var(--muted); }
.side-of { font-size: 12px; color: var(--muted); }
.side-of a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); }
tr.is-side td:first-child { padding-left: 28px; }
tr.is-side td:first-child .cell-user { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.figure-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.figure-facts > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--surface-2); }
.figure-facts small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.figure-facts b { font-size: 15px; }
.char-list { list-style: none; margin: 0; padding: 0; }
.char-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.char-list li:last-child { border-bottom: 0; }
.perm-form { display: inline-flex; margin: 0; }
/* ---------- v0.9.6: Iroda – kép a profilkártyán, bélyegképek a teendőknél ---------- */
.office-who { display: flex; align-items: center; gap: 12px; }
.office-avatar { flex: none; border-radius: 99px; line-height: 0; }
.office-avatar:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }
.actions { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.action.has-img { padding: 0 0 12px; overflow: hidden; display: flex; flex-direction: column; }
.action.has-img > .chip, .action.has-img > b, .action.has-img > small { margin-left: 12px; margin-right: 12px; }
.action.has-img > .chip { align-self: flex-start; margin-top: 10px; }
.action-img { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.action-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.action:hover .action-img img { transform: scale(1.04); }
.action.is-soon .action-img img { filter: grayscale(.7); }
.action-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.action-ph .ic { width: 30%; height: 30%; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .action-img img { transition: none; } .action:hover .action-img img { transform: none; } }

/* ---------- v0.9.6: képtár-képek a címlapon ---------- */
.lead .art .lead-img, .article-row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- v0.9.6: lapozó linkekkel (Nagyvilág) ---------- */
.page-links a { min-width: 34px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; color: inherit; text-decoration: none; }
.page-links a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.chron-years .tabbar { margin-bottom: 14px; }
/* ---------- v0.9.6: eszköztipp (a title-buborék helyett) ---------- */
.tip { position: absolute; z-index: 200; left: 0; top: 0; max-width: 280px; padding: 6px 10px; border-radius: 6px;
  background: var(--ink); color: var(--surface); font-size: 12.5px; line-height: 1.35; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease; visibility: hidden; }
.tip.on { opacity: .96; transform: none; visibility: visible; }
.tip::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--ink); }
.tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
/* ---------- v0.9.6: pártlogó ---------- */
.party-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.party-logo { object-fit: contain; border-radius: var(--radius-sm); background: transparent; flex: none; }
.party-logo-head { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)); }
.party-logo-sm { margin-right: 2px; vertical-align: middle; }
.party-thumb.has-logo { background: var(--surface-2); }
.party-thumb.has-logo img { width: 88%; height: 88%; }
.party-logo-edit .avatar-edit { margin-top: 10px; }
/* ---------- v0.9.7: archetípus-kártyák (regisztráció, mellékkarakter) ---------- */
.archetypes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.archetype .bg-body { align-content: start; gap: 8px; padding: 14px; }
.archetype .bg-body b { font-size: 15px; }
.archetype:hover .bg-body { border-color: var(--line-strong); }
.arch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arch-ico { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.arch-desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.arch-start { display: flex; gap: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.arch-start > span { display: inline-flex; align-items: center; gap: 4px; }
.arch-bonus { display: grid; gap: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.arch-row { display: grid; grid-template-columns: 104px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.arch-row .bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.arch-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.arch-row .num { text-align: right; font-weight: 600; color: var(--ink-2); }
.arch-row .num.neg { color: var(--crimson); }
.archetype input:checked + .bg-body .arch-ico { background: var(--accent); color: var(--surface); }
.arch-field { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.arch-field legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; padding: 0; }
.arch-group + .arch-group { margin-top: 12px; }
.arch-group .kicker { display: block; margin-bottom: 6px; }
.about-ai { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- v0.9.8: mobilon a karaktersáv gombjai csak ikonok (tömörebb, nem törnek új sorba) ---------- */
@media (max-width: 640px) {
  .charbar .quick .btn > span:not(.bell-badge) { display: none; }
  .charbar .quick .btn { padding: 7px 9px; gap: 0; position: relative; }
  .charbar .quick .btn .bell-badge { position: absolute; top: -6px; right: -6px; }
  .charbar .quick { gap: 5px; flex-wrap: nowrap; }
  .charbar .quick .char-switch { max-width: 120px; }
}

/* ---------- v0.9.8: regisztráció – kiemelt archetípus-választás ---------- */
.arch-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border-left: 4px solid var(--accent); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.arch-hint > .ic { flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- v0.9.8: Sajtó ---------- */
.share { display: grid; grid-template-columns: 80px 46px; align-items: center; gap: 8px; }
.share .bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.share .bar i { display: block; height: 100%; background: var(--accent); }
.share .num { text-align: right; font-weight: 600; }
.review-list { list-style: none; margin: 8px 0 0; padding: 0; }
.review-list li { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--line); }
.review-list li .btn-row { flex: none; }
@media (max-width: 640px) { .review-list li { flex-direction: column; } }
.keptar-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kp { position: relative; cursor: pointer; display: block; }
.kp input { position: absolute; opacity: 0; }
.kp img, .kp .kp-auto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; }
.kp .kp-auto { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--surface-2); color: var(--muted); text-align: center; }
.kp .kp-auto small { font-size: 11px; line-height: 1.2; padding: 0 4px; }
.kp input:checked + img, .kp input:checked + .kp-auto { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.kp input:focus-visible + img, .kp input:focus-visible + .kp-auto { outline: 2px solid var(--accent); outline-offset: 2px; }
.article-row h3 a, .lead h2 a.lead-link { color: inherit; text-decoration: none; }
.article-row h3 a:hover, .lead h2 a.lead-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed-more { margin: 14px 0 2px; text-align: center; }

/* ---------- v0.9.8: cikkoldal ---------- */
.article-page { max-width: 820px; }
.article-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 10px 0 10px; }
.article-lede { font-size: 18px; color: var(--ink-2); margin: 0 0 14px; }
.article-byline { margin-bottom: 16px; }
.article-figure { margin: 0 0 10px; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.article-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.article-body { font-size: 16.5px; line-height: 1.7; margin-top: 14px; }
.article-react { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.comment-list { list-style: none; margin: 0 0 12px; padding: 0; }
.comment-list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.comment-list li p { margin: 4px 0 0; font-size: 14px; }

/* ---------- v0.9.8: Korábbi hírek ---------- */
.archive-filter { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(110px, 1fr)) auto; gap: 10px; align-items: end; }
.archive-filter .field { margin: 0; }
.af-btns { display: flex; gap: 6px; }
@media (max-width: 900px) { .archive-filter { grid-template-columns: 1fr 1fr; } .archive-filter .af-q, .af-btns { grid-column: 1 / -1; } }
.news-archive .chron-ph { width: 100%; height: 100%; }
.news-archive .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
label.check { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; font-size: 14px; cursor: pointer; }
label.check input { width: 17px; height: 17px; accent-color: var(--sage); margin: 0; }

.archive-filter .field { display: grid; gap: 4px; }
.archive-filter .field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.archive-filter input, .archive-filter select { width: 100%; min-width: 0; }

/* ---------- v0.9.9: Legfrissebb a fórumon ---------- */
.fl-list { list-style: none; margin: 0; padding: 0; }
.fl-list li + li { border-top: 1px dashed var(--line); }
.fl-list a { display: flex; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; }
.fl-list a:hover .fl-thread { text-decoration: underline; text-underline-offset: 2px; }
.fl-body { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.fl-head { display: flex; justify-content: space-between; gap: 8px; }
.fl-head time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fl-thread { color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-text { color: var(--muted); font-size: 12.5px; }
/* ---------- v0.9.9: átlépés sávja, tesztkártya ---------- */
.imp-bar { background: var(--crimson); color: #fff; font-size: 13.5px; }
.imp-bar .wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.imp-bar .wrap > span { flex: 1; min-width: 200px; }
.imp-bar .btn { background: #fff; color: var(--crimson); border-color: #fff; }
.test-card { border-color: var(--crimson); }
/* ---------- v0.9.11: választási kampány, képek nélküli krónika ---------- */
.article-row.no-thumb { grid-template-columns: minmax(0, 1fr); }
.campaign-card .campaign-parties { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: rgba(243, 238, 226, .85); }
.campaign-card .campaign-parties .chip { background: rgba(255, 255, 255, .1); color: #fff; border-color: var(--party, rgba(255, 255, 255, .3)); border-left: 4px solid var(--party, #e3c06a); text-decoration: none; }
.campaign-when { margin: 0 0 12px; font-size: 14px; }
.campaign-kpis { gap: 12px; margin: 0 0 6px; }
.kpi-mini { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.kpi-mini small { color: var(--muted); font-size: 12px; }
.kpi-mini b { font-size: 16px; }
.campaign-sub { font-size: 15px; margin: 18px 0 6px; display: flex; gap: 6px; align-items: center; }
.campaign-rules { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.campaign-rules li + li { margin-top: 4px; }
.fee-box { padding: 10px 12px; margin: 0 0 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 13.5px; }
.fee-box .party-inline { margin-top: 8px; }
.phase-row.phase-sub { border-top: 0; padding-top: 0; margin-top: -6px; }
.phase-row.phase-sub .campaign-open { margin-top: 8px; }
.phase-row.phase-sub .row-3 { align-items: end; }
/* ---------- v0.9.12: címsorgombok egy sorban; képes oldalcímsor ---------- */
/* a címsor alatti gombok a címmel és az alcímmel egy sorban, jobbra (szélesebb kijelzőn nem törnek külön sorba) */
.pagehead > div:first-child { flex: 1 1 auto; min-width: 0; }
.pagehead > :not(:first-child) { flex: 0 0 auto; }
@media (min-width: 720px) { .pagehead { flex-wrap: nowrap; } }
.page-hero { min-height: 230px; display: flex; align-items: flex-end; padding: 26px 28px; margin-bottom: 22px; }
.page-hero::before { background: linear-gradient(90deg, rgba(5, 10, 20, .88) 0%, rgba(5, 10, 20, .6) 55%, rgba(5, 10, 20, .2) 100%); }
.page-hero > picture { z-index: 0; }
.page-hero::before { z-index: 1; }
.page-hero > .page-hero-row { z-index: 2; position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-hero-text { flex: 1 1 auto; min-width: 0; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 50px); margin: 6px 0 8px; }
.page-hero p { margin: 0; font-size: 15px; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.page-hero .kicker a { color: inherit; }
.page-hero-side { flex: 0 0 auto; }
.page-hero-side .btn:not(.btn-ok):not(.btn-primary) { background: rgba(7, 12, 24, .55); color: #f3eee2; border-color: rgba(243, 238, 226, .35); }
.page-hero-side .btn:not(.btn-ok):not(.btn-primary):hover { background: rgba(7, 12, 24, .8); }
@media (max-width: 719px) { .page-hero { padding: 20px 18px; } .page-hero > .page-hero-row { flex-wrap: wrap; } }
/* NPC-jel: ikon a név előtt / mellett, a név nem link (nincs adatlap) */
.npc-name { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.npc-name .ic, .npc-mark .ic { width: 15px; height: 15px; color: var(--muted); }
.npc-mark { display: inline-flex; vertical-align: -2px; cursor: help; }
/* Iroda: fejléc 2/3 fotó + 1/3 titkárjelentés */
.office-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin-bottom: 4px; }
.office-top .office-hero { margin-bottom: 0; min-height: 300px; }
.office-top .deadlines-card { margin-top: 4px; align-self: stretch; height: auto; display: flex; flex-direction: column; }
.office-top .deadlines-card > .body { flex: 1 1 auto; }
.office-top .deadlines-card .countdowns { max-height: 250px; overflow: auto; }
@media (max-width: 900px) { .office-top { grid-template-columns: minmax(0, 1fr); } }
/* Iroda: Naptár */
.cal-nav { display: inline-flex; gap: 6px; }
.cal-wrap { overflow-x: auto; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.cal th { font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px; text-align: left; }
.cal td { vertical-align: top; border: 1px solid var(--line); padding: 6px; height: 96px; font-size: 12px; }
.cal td.out { background: var(--surface-2); color: var(--muted); }
.cal td.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal .cal-day { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cal .cal-game { color: var(--accent); font-size: 11px; }
.cal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.cal li { line-height: 1.25; padding-left: 6px; border-left: 2px solid var(--line-strong); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal li.breaking { border-left-color: var(--crimson); font-weight: 600; }