/* playtheworld – Oberfläche
   Tinte & Messing: dunkles Kartentisch-Blau, Messing für Hervorhebungen, Pergament für Text. */
:root {
  --ink: #13222e;
  --ink-2: #1b2f3d;
  --deep: #0e1c27;
  --brass: #c8a55a;
  --brass-2: #e3c98a;
  --parch: #efe6d2;
  --parch-2: #b9b0a0;
  --patina: #6f9a8d;
  --seal: #a8443a;
  --line: rgba(200, 165, 90, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --r: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: var(--parch); font: 15px/1.45 var(--sans); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 2px; }
#map { position: fixed; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map.drag { cursor: grabbing; }
body.picking #map { cursor: crosshair; }

.panel { position: fixed; background: rgba(19, 34, 46, .93); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.btn { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--brass); }
.btn.primary { background: var(--brass); color: #1d1608; border-color: var(--brass); font-weight: 700; }
.btn.primary:hover { background: var(--brass-2); }
.btn.danger { border-color: rgba(168, 68, 58, .6); color: #f1b4ab; }
.btn.small { padding: 3px 8px; font-size: 13px; }
.btn.big { padding: 10px 18px; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: default; }
.hint { color: var(--parch-2); font-style: italic; }
h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }

/* ---------- Jahres-Kartusche ---------- */
#cartouche { top: 14px; left: 14px; display: flex; align-items: center; gap: 16px; padding: 10px 16px 10px 12px;
  border: 1px solid var(--brass); outline: 1px solid rgba(200, 165, 90, .35); outline-offset: 3px; }
#cartouche .ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: none; }
#cartouche .ring circle { fill: none; stroke-width: 5; }
#cartouche .ring .track { stroke: rgba(200, 165, 90, .18); }
#cartouche .ring .prog { stroke: var(--brass); stroke-dasharray: 276.5; stroke-dashoffset: 276.5; transition: stroke-dashoffset .4s; }
.year-block { margin-left: -70px; padding-left: 78px; min-width: 250px; }
.year { font: 700 38px/1 var(--serif); color: var(--brass-2); letter-spacing: .5px; font-variant-numeric: lining-nums; }
.era { font: italic 500 16px/1.2 var(--serif); color: var(--parch-2); margin-top: 3px; }
.controls { display: flex; gap: 8px; align-items: center; border-left: 1px solid var(--line); padding-left: 16px; }
.speed { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.speed button { background: none; border: 0; padding: 6px 9px; cursor: pointer; color: var(--parch-2); font-size: 13px; }
.speed button.on { background: var(--brass); color: #1d1608; font-weight: 700; }

/* ---------- Dossier (eigenes Volk) ---------- */
#dossier { top: 112px; left: 14px; width: 330px; max-height: calc(100vh - 360px); overflow: auto; padding: 14px 16px; }
.dz-head { display: flex; gap: 12px; align-items: center; }
.emblem { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--brass); flex: none; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); }
.dz-name { font: 700 24px/1.05 var(--serif); }
.dz-sub { color: var(--parch-2); font-size: 13px; }
.dz-sec { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.dz-sec h3 { font-size: 17px; color: var(--brass-2); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
.dz-sec h3 small { font: 400 12px var(--sans); color: var(--parch-2); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 14px; }
.stats dt { color: var(--parch-2); font-size: 12px; }
.stats dd { margin: 0 0 4px; font-weight: 500; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); cursor: pointer; font-size: 13px; }
.chip.on { border-color: var(--brass); background: rgba(200, 165, 90, .18); color: var(--brass-2); font-weight: 700; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bar { height: 7px; background: rgba(255, 255, 255, .07); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brass); }
.kv { display: grid; grid-template-columns: 82px 1fr 28px; gap: 6px; align-items: center; font-size: 13px; margin: 3px 0; }
.kv span:last-child { text-align: right; color: var(--parch-2); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.research { font-size: 14px; }
.research b { font-family: var(--serif); font-size: 17px; }
.rel { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed rgba(200, 165, 90, .12); font-size: 13px; }
.rel .sw { width: 12px; height: 12px; border-radius: 2px; }
.rel .st { font-size: 12px; padding: 1px 6px; border-radius: 3px; background: var(--ink-2); }
.rel .st.krieg { background: rgba(168, 68, 58, .35); color: #ffd2cb; }
.rel .st.kooperation, .rel .st.buendnis { background: rgba(111, 154, 141, .3); color: #d3efe7; }
.rel-actions { grid-column: 2 / 4; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }

/* ---------- Seitenleiste ---------- */
#side { top: 14px; right: 14px; width: 360px; max-height: calc(100vh - 380px); display: flex; flex-direction: column; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: none; border: 0; padding: 10px 4px 8px; cursor: pointer; color: var(--parch-2); font: 600 16px var(--serif); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--brass-2); border-bottom-color: var(--brass); }
.tabbody { overflow: auto; padding: 12px 16px 16px; }
.card { padding: 10px 0; border-bottom: 1px solid var(--line); }
.card:last-child { border-bottom: 0; }
.card h2 { font-size: 22px; line-height: 1.1; }
.card .kind { font-size: 12px; color: var(--brass); margin-bottom: 2px; }
.card p { margin: 6px 0; }
.card .meta { color: var(--parch-2); font-size: 13px; }
.card a { color: #9fd0e8; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; margin: 6px 0; }
.facts dt { color: var(--parch-2); }
.facts dd { margin: 0; }
.spark { width: 100%; height: 42px; display: block; margin: 6px 0; }
.list-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; cursor: pointer; border-radius: 3px; }
.list-row:hover { background: rgba(255, 255, 255, .05); }
.list-row .sw { width: 14px; height: 14px; border-radius: 3px; }
.list-row .nm { font-weight: 500; }
.list-row .sub { font-size: 12px; color: var(--parch-2); }
.list-row .num { font-size: 13px; color: var(--parch-2); text-align: right; }
.list-row.me .nm { color: var(--brass-2); }
.log { font-size: 13.5px; padding: 6px 4px 6px 10px; border-left: 3px solid var(--line); margin: 4px 0; cursor: pointer; }
.log:hover { background: rgba(255, 255, 255, .04); }
.log .y { font-weight: 700; color: var(--brass-2); margin-right: 6px; font-variant-numeric: tabular-nums; }
.log.me { border-left-color: var(--brass); }
.log.krieg { border-left-color: var(--seal); }
.log.tech { border-left-color: #6fa3c8; }
.log.religion { border-left-color: #8fd18f; }
.log.split { border-left-color: #b98ac0; }
.log.chronik { border-left-color: #8a7a5a; color: var(--parch-2); }
.filter { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.filter button { font-size: 12px; padding: 2px 8px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--parch-2); }
.filter button.on { border-color: var(--brass); color: var(--brass-2); }

/* ---------- Ebenen, Minikarte, Zeitleiste ---------- */
#layers { right: 14px; bottom: 102px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 5px; max-width: 360px; }
#layers button { font-size: 12.5px; padding: 3px 9px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--parch-2); }
#layers button.on { color: var(--brass-2); border-color: var(--brass); }
#minimapWrap { left: 14px; bottom: 102px; padding: 4px; line-height: 0; }
#minimap { width: 240px; height: 120px; cursor: pointer; border-radius: 2px; }
#timeline { left: 14px; right: 14px; bottom: 14px; height: 76px; padding: 8px 12px; }
#tlTrack { position: relative; height: 100%; cursor: pointer; }
#tlEras { position: absolute; inset: 0 0 22px 0; }
#tlEras .seg { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); padding: 2px 6px; font: italic 500 13px var(--serif); color: var(--parch-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#tlEras .seg.past { color: rgba(239, 230, 210, .55); font-size: 12px; }
#tlEras .seg.future { color: rgba(185, 176, 160, .4); font-size: 11.5px; border-left-style: dashed; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px); }
#tlEras .seg.cur { color: var(--brass-2); background: linear-gradient(rgba(200, 165, 90, .16), rgba(200, 165, 90, .03)); border-left: 2px solid var(--brass); display: flex; align-items: baseline; gap: 10px; font-style: normal; }
#tlEras .seg.cur b { font: 600 17px var(--serif); }
#tlEras .seg.cur .since { font: 13px var(--sans); color: var(--parch-2); overflow: hidden; text-overflow: ellipsis; }
#tlEras .seg.cur .next { margin-left: auto; font: 12.5px var(--sans); color: var(--parch-2); display: inline-flex; align-items: center; gap: 6px; }
.pbar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--brass); }
#tlTicks { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; }
#tlTicks i { position: absolute; bottom: 0; width: 2px; height: 8px; border-radius: 1px; opacity: .7; transform: translateX(-1px); }
#tlTicks i.big { width: 3px; height: 14px; opacity: .95; }
#tlTip { position: fixed; bottom: 98px; width: 340px; padding: 10px 14px; z-index: 30; font-size: 13.5px; pointer-events: none; }
#tlTip b { font: 600 17px var(--serif); color: var(--parch); display: block; margin: 2px 0 4px; }
#tlTip p { margin: 4px 0 0; }
#tlTip .kind { font: 600 11.5px var(--sans); letter-spacing: .02em; }
#tlNow { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--brass-2); box-shadow: 0 0 8px var(--brass); pointer-events: none; }

/* ---------- Tooltip & Meldungen ---------- */
#tip { position: fixed; pointer-events: none; z-index: 20; background: rgba(14, 28, 39, .95); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; font-size: 13px; max-width: 280px; }
#tip b { font-family: var(--serif); font-size: 16px; color: var(--brass-2); }
#tip .m { color: var(--parch-2); }
#toasts { position: fixed; left: 50%; top: 122px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; pointer-events: none; }
.toast { background: rgba(19, 34, 46, .96); border: 1px solid var(--brass); border-radius: var(--r); padding: 8px 14px; font-size: 14px; max-width: 520px; animation: toast 6s forwards; }
.toast.krieg { border-color: var(--seal); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 6%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Overlays, Dialoge ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(14, 28, 39, .55), rgba(8, 16, 22, .92)); }
.overlay[hidden] { display: none; }
.loader { text-align: center; }
.loader-year { font: 700 64px var(--serif); color: var(--brass); }
#loadMsg { color: var(--parch-2); font-style: italic; }
.start-card { width: min(1100px, 94vw); max-height: 92vh; overflow: auto; background: rgba(19, 34, 46, .97); border: 1px solid var(--brass); outline: 1px solid rgba(200, 165, 90, .35); outline-offset: 4px; border-radius: var(--r); padding: 28px 32px; }
.start-head h1 { font: 700 64px/1 var(--serif); color: var(--brass-2); margin: 0; letter-spacing: 1px; }
.start-head p { font: italic 500 21px var(--serif); color: var(--parch); margin: 6px 0 18px; max-width: 60ch; }
.start-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.continent { margin-top: 18px; }
.continent h3 { font-size: 21px; color: var(--brass-2); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 10px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pcard { text-align: left; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 14px 1fr; gap: 4px 10px; }
.pcard:hover, .pcard.sel { border-color: var(--brass); }
.pcard .sw { width: 14px; height: 14px; border-radius: 50%; margin-top: 5px; }
.pcard .nm { font: 700 19px/1.15 var(--serif); }
.pcard .sub { grid-column: 2; font-size: 12.5px; color: var(--parch-2); }
.pcard .tags { grid-column: 2; display: flex; gap: 4px; margin-top: 3px; }
.pcard .tags span { font-size: 11.5px; padding: 1px 6px; border-radius: 3px; background: rgba(0, 0, 0, .25); }
.pdetail { margin-top: 16px; padding: 14px; border: 1px solid var(--brass); border-radius: var(--r); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.pdetail p { margin: 6px 0; max-width: 75ch; }
dialog#dlg { position: fixed; inset: 0; margin: auto; color: var(--parch); width: min(1180px, 95vw); max-height: 90vh; padding: 0; z-index: 50; }
dialog::backdrop { background: rgba(8, 16, 22, .75); }
#dlgBody { padding: 20px 24px; max-height: 90vh; overflow: auto; }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dlg-head h2 { font-size: 30px; color: var(--brass-2); }

/* Technologiebaum */
.tt { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.tt-era h3 { font-size: 17px; color: var(--brass-2); position: sticky; top: 0; background: var(--ink); padding: 4px 0; }
.tnode { display: block; width: 100%; text-align: left; margin: 5px 0; padding: 6px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-2); font-size: 13px; cursor: default; position: relative; }
.tnode .c { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r) 0 0 var(--r); }
.tnode .n { font-weight: 700; }
.tnode .d { font-size: 11.5px; color: var(--parch-2); }
.tnode.known { background: rgba(111, 154, 141, .22); border-color: rgba(111, 154, 141, .55); }
.tnode.avail { border-color: var(--brass); cursor: pointer; }
.tnode.avail:hover { background: rgba(200, 165, 90, .15); }
.tnode.cur { box-shadow: 0 0 0 2px var(--brass-2); }
.tnode.locked { opacity: .45; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--parch-2); margin-bottom: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.saves { width: 100%; border-collapse: collapse; }
.saves td, .saves th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.saves th { font: 600 15px var(--serif); color: var(--brass-2); }

@media (max-width: 1100px) { #dossier { width: 290px; } #side { width: 310px; } #layers { max-width: 310px; } }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Diplomatie ---------- */
.offers { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.offer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--brass); border-radius: var(--r); background: rgba(200, 165, 90, .1); }
.dtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 12px; }
.dtabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--parch-2); font: 600 17px var(--serif); }
.dtabs button.on { color: var(--brass-2); border-bottom-color: var(--brass); }
.dgrid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.dlist { max-height: 60vh; overflow: auto; border-right: 1px solid var(--line); padding-right: 8px; }
.dlist .list-row { width: 100%; background: none; border: 0; text-align: left; }
.dlist .list-row.me { background: rgba(200, 165, 90, .14); }
.ddetail { max-height: 60vh; overflow: auto; }
.opt { display: grid; grid-template-columns: 1fr 230px; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(200, 165, 90, .15); }
.optr { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.chance { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; vertical-align: middle; margin-right: 4px; }
.chance i { display: block; height: 100%; }
.treaty-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.tchip { border: 1px solid; border-radius: 12px; padding: 2px 10px; font-size: 13px; }
.lcard { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.lhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lcard h3 { font-size: 21px; color: var(--parch); }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mchip { font-size: 13px; padding: 2px 8px; border-radius: 10px; background: var(--ink-2); }
.mchip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.invite { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; }
.inv { display: inline-flex; align-items: center; gap: 4px; }
select, input { background: var(--ink-2); color: var(--parch); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; font: inherit; }
.ttable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ttable th { text-align: left; font: 600 15px var(--serif); color: var(--brass-2); border-bottom: 1px solid var(--line); padding: 6px; }
.ttable td { border-bottom: 1px solid rgba(200, 165, 90, .1); padding: 7px 6px; vertical-align: top; }
.ttable tr.gesperrt td { opacity: .6; }
.ttable tr.verfallen td { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .2); }
.ttable tr.frei td:nth-child(2) { color: #a9d8c8; font-weight: 700; }
@media (max-width: 900px) { .dgrid { grid-template-columns: 1fr; } .opt { grid-template-columns: 1fr; } }

/* ---------- Staat & Provinzen ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.fcard { text-align: left; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; color: var(--parch); font: inherit; }
.fcard:hover:not(:disabled), .fcard.sel { border-color: var(--brass); }
.fcard.sel { box-shadow: 0 0 0 1px var(--brass) inset; background: rgba(200, 165, 90, .1); }
.fcard.locked { opacity: .5; cursor: default; }
.fcard p { margin: 6px 0; font-size: 13.5px; }
.fhead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-family: var(--serif); font-size: 19px; }
.tag { font: 600 11.5px var(--sans); padding: 1px 7px; border-radius: 9px; background: rgba(111, 154, 141, .35); color: #d3efe7; white-space: nowrap; }
.tag.lock { background: rgba(168, 68, 58, .3); color: #f3c2b9; white-space: normal; }
.fxs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.fx { font-size: 12px; padding: 1px 7px; border-radius: 9px; background: rgba(255, 255, 255, .07); }
.fx.good { background: rgba(111, 154, 141, .3); color: #cfeee3; }
.fx.bad { background: rgba(168, 68, 58, .28); color: #f3c2b9; }
.ptable tr.warn td { background: rgba(168, 68, 58, .12); }
.ptable a { color: inherit; }

/* ---------- v0.5: Reich, Hof, Bauten, Heer, Frieden ---------- */
#dlgBody a { color: var(--brass-2); }
.traits { display: flex; flex-wrap: wrap; margin-top: 6px; }
.gold { color: #f3d98f; font-weight: 700; }
.gold.neg, .big.neg { color: #f1a59a; }
.ruler-mini { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; margin: 8px 0 2px; font-size: 14px; }
.seat-ico { display: block; }
.armies-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.army-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; font-size: 12.5px; cursor: pointer; }
.army-chip:hover { border-color: var(--brass); }
.army-chip i { width: 9px; height: 11px; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
#dlgBody h3 { font: 600 20px var(--serif); color: var(--brass-2); margin: 16px 0 8px; }
#dlgBody h3 small { font: 400 13px var(--sans); color: var(--parch-2); margin-left: 6px; }
.treasury { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(90deg, rgba(200,165,90,.12), transparent 70%); }
.treasury .coin { width: 54px; height: 54px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff1c2, #d8b25e 45%, #8a6a26 100%); box-shadow: inset 0 0 0 3px rgba(60,40,10,.45), 0 4px 12px rgba(0,0,0,.4); }
.treasury .big { font: 700 30px var(--serif); color: #f3d98f; line-height: 1.1; }
.warnbox { border-left: 3px solid var(--seal); background: rgba(168,68,58,.14); padding: 8px 12px; margin: 10px 0; border-radius: 0 var(--r) var(--r) 0; }
.ttable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.taxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tax { text-align: left; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.tax span { font-size: 13.5px; color: var(--parch); } .tax small { color: var(--parch-2); }
.tax.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.ruler-card { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(90deg, rgba(200,165,90,.1), transparent 60%); }
.trait { display: inline-block; font-size: 12.5px; padding: 2px 9px; border-radius: 10px; border: 1px solid rgba(200,165,90,.45); color: var(--brass-2); margin: 0 4px 4px 0; cursor: help; }
.laws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.law { display: flex; justify-content: space-between; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; font-size: 13.5px; }
.law p { margin: 3px 0; } .law.cur { border-color: var(--brass); background: rgba(200,165,90,.08); } .law.locked { opacity: .6; }
.ftable td.acts { white-space: nowrap; } .ftable tr.warn td, .btable tr.warn td { background: rgba(168,68,58,.12); }
.btable tr.occ td { background: repeating-linear-gradient(45deg, rgba(168,68,58,.14) 0 6px, transparent 6px 12px); }
.bguide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.bguide > div { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.bguide b { font: 600 16px var(--serif); color: var(--brass-2); }
.bcell { min-width: 120px; } .bcell small { display: block; }
.bcell .lv { display: flex; gap: 3px; margin-bottom: 3px; }
.bcell .lv i { width: 16px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.1); }
.bcell .lv i.on { background: var(--brass); } .bcell .lv i.wip { background: repeating-linear-gradient(90deg, var(--brass) 0 3px, transparent 3px 5px); }
.bcell .btn { margin-top: 4px; }
.army-card { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; }
.army-card .ah { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font: 600 18px var(--serif); }
.btn.on { border-color: var(--brass); color: var(--brass-2); }
#dlgBody label { display: block; margin: 8px 0; font-size: 14px; }
#dlgBody select, #dlgBody input[type=range] { margin-left: 6px; }
#dlgBody select { background: var(--ink-2); color: var(--parch); border: 1px solid var(--line); border-radius: var(--r); padding: 3px 6px; }
.kinds > div { font-size: 13px; margin: 8px 0; } .kinds small { display: block; }
.peace { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.ws { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 6px 0; }
.ws .good { color: #a9d8c8; font-weight: 700; } .ws .bad { color: #f1a59a; font-weight: 700; }
.wsbar { position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); }
.wsbar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.wsbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--parch); }
.pchk { display: block; font-size: 13.5px; margin: 4px 0 !important; cursor: pointer; }
.ruler-line { margin: 6px 0; color: var(--brass-2); }

/* ---------- v0.7: Zeitalterwechsel ---------- */
#eraCard { top: 50%; left: 50%; transform: translate(-50%, -54%); width: min(860px, 94vw); z-index: 40; padding: 0; border-color: var(--brass); outline: 1px solid rgba(200,165,90,.35); outline-offset: 4px; }
#eraCard.show { animation: eraIn .55s ease-out; }
@keyframes eraIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -54%) scale(1); } }
@media (prefers-reduced-motion: reduce) { #eraCard.show { animation: none; } }
.era-inner { display: grid; grid-template-columns: 300px 1fr; }
.era-art { width: 100%; height: 100%; min-height: 240px; background: radial-gradient(circle at 50% 40%, #1d3344, #0e1c27 75%); border-right: 1px solid var(--line); }
.era-text { padding: 22px 26px 20px; }
.era-text h2 { font: 600 40px/1.05 var(--serif); color: var(--brass-2); margin: 2px 0 4px; }
.era-text .era-year { font: 600 20px var(--serif); color: var(--parch); margin-bottom: 8px; }
.era-text ul { margin: 6px 0 12px; padding-left: 18px; } .era-text li { margin: 3px 0; }
.era-text .actions { justify-content: flex-end; }
@media (max-width: 700px) { .era-inner { grid-template-columns: 1fr; } .era-art { min-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* Handelsgüter */
.gtable td { vertical-align: top; padding: 5px 6px; }
.gtable td:last-child { max-width: 320px; }
.gdot { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; font: 700 10px/1 "Alegreya Sans", system-ui, sans-serif; color: #13222e; box-shadow: 0 0 0 2px rgba(19,34,46,.9); }
.gst.own { color: #e8c66a; font-weight: 600; }
.gst.acc { color: #9cc7b8; }
.gst.miss { color: #e39a8d; }
.gst.lock { color: var(--parch-2); opacity: .75; }
.gtable tr.lock td { opacity: .7; }

/* 3D-Ansicht (WebGL) */
#map3d { position: fixed; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; display: block; }
#map3d.drag { cursor: grabbing; }
/* Stadtnamen über der 3D-Karte: immer lesbar, von der 3D-Ansicht ohne Überschneidung verteilt */
#labels3d { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
body:not(.gl3d) #labels3d { display: none; }
.lab3d { position: absolute; left: 0; top: 0; padding: 2px 9px 3px; border-radius: 7px; background: rgba(16,22,28,.86); border: 1.5px solid rgba(200,165,90,.85);
  font-family: "Cormorant Garamond", Georgia, serif; color: #f6ecd2; text-align: center; line-height: 1.05; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); will-change: transform; }
.lab3d[hidden] { display: none; }
.lab3d b { display: block; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.lab3d small { display: block; font-style: italic; font-weight: 500; font-size: 11.5px; color: rgba(255,245,225,.85); }
.lab3d.cap b { font-size: 16.5px; }
.lab3d.mine { border-color: #ffd36b; color: #ffe7a6; }
.lab3d.off { border-style: dashed; }
body.mobile .lab3d b { font-size: 13px; } body.mobile .lab3d small { font-size: 10px; }
/* Landschafts-, Provinz-, Völker-, Gipfel-, Meeres- und Flussnamen über dem 3D-Gelände: helle Schrift mit dunklem Saum, nie verzerrt */
.geo3d { position: absolute; left: 0; top: 0; font-family: "Cormorant Garamond", Georgia, serif; white-space: nowrap; text-align: center; line-height: 1.02; will-change: transform;
  color: #efe5cf; text-shadow: 0 0 2px rgba(20,14,8,.95), 0 0 5px rgba(20,14,8,.8), 0 1px 2px rgba(20,14,8,.9); }
.geo3d[hidden] { display: none; }
.geo3d small { display: block; font-size: .7em; font-style: italic; font-weight: 500; letter-spacing: 0; opacity: .9; }
.geo3d.people { font-weight: 600; letter-spacing: .18em; color: #fff; }
.geo3d.people.me { color: #fff1c0; }
.geo3d.state { font-style: italic; font-weight: 600; color: #ffe9b0; }
.geo3d.prov { font-weight: 700; letter-spacing: .2em; color: #f1e3c4; }
.geo3d.prov.me { color: #ffe09a; }
.geo3d.prov.free { color: rgba(236,226,206,.72); font-weight: 600; }
.geo3d.land { font-style: italic; font-weight: 600; letter-spacing: .08em; }
.geo3d.land.mtn { color: #ead0a6; } .geo3d.land.desert { color: #f7e4bc; }
.geo3d.peak { font-family: "Alegreya Sans", system-ui, sans-serif; font-weight: 600; color: #fff6e4; letter-spacing: .02em; }
.geo3d.peak small { font-style: normal; color: #e6d7bb; }
.geo3d.sea { font-style: italic; font-weight: 500; letter-spacing: .12em; color: #bfe0f2; text-shadow: 0 0 3px rgba(8,26,44,.95), 0 0 6px rgba(8,26,44,.7); }
.geo3d.sea.ocean { letter-spacing: .4em; }
.geo3d.river { font-style: italic; font-weight: 700; letter-spacing: .06em; color: #b6def6; text-shadow: 0 0 2px rgba(6,22,40,.95), 0 0 5px rgba(6,22,40,.8); }
body.picking #map3d { cursor: crosshair; }
body.gl3d #map { visibility: hidden; pointer-events: none; }
#layers .view3d { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(200,165,90,.25); width: 100%; }
#layers .view3d label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--parch-2); }
#layers .view3d input[type=range] { width: 110px; accent-color: #c8a55a; }

/* Technologiebaum: nur die nächsten Schritte */
.tt-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.tnode.tcard { text-align: left; min-height: 110px; padding: 10px 12px; }
.tnode.tcard .d { white-space: normal; margin-top: 4px; }
.tnode.tcard .cost { color: var(--brass-2); }
.tt-known { margin-top: 14px; }
.tt-known summary { cursor: pointer; color: var(--parch-2); }

/* Vor dem Start */
#setup { position: fixed; right: 14px; top: 170px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 300px); overflow: auto; padding: 16px 20px; z-index: 20; }
body.setup #layers { display: none; }
#setup h2 { margin: 0 0 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; color: var(--brass-2); }
#setup .st-step { margin-top: 12px; }
#setup .st-step .chips, #setup .st-techs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#setup .st-go { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.speed .tempo { align-self: center; padding: 4px 10px; font-size: 13px; color: var(--brass-2); white-space: nowrap; }
/* Technik-Schwerpunkte */
.tt-focus { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0, 0, 0, .18); }
.tt-focus-h { margin-bottom: 8px; }
.tt-focus-h small { display: block; margin-top: 2px; }
.tt-fchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fchip { display: grid; grid-template-columns: 10px 1fr auto; gap: 2px 6px; align-items: center; text-align: left; padding: 6px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-2); color: var(--parch); font-size: 12.5px; cursor: pointer; }
.fchip i { width: 10px; height: 10px; border-radius: 50%; }
.fchip b { color: var(--brass-2); font-variant-numeric: tabular-nums; }
.fchip small { grid-column: 2 / 4; color: var(--parch-2); font-size: 11px; }
.fchip.fit { border-color: rgba(200, 165, 90, .55); }
.fchip.on { background: rgba(200, 165, 90, .22); border-color: var(--brass-2); }
.fchip:hover { background: rgba(200, 165, 90, .12); }
.tnode.fit { background: linear-gradient(90deg, rgba(200, 165, 90, .10), transparent 60%), var(--ink-2); }
.fitmark { color: var(--brass-2); font-size: 11px; }
.tboni { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 3px; }
.tb { font-size: 11.5px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--fc); color: var(--parch); background: color-mix(in srgb, var(--fc) 16%, transparent); }
.tb b { color: var(--fc); }
.tb small { color: var(--parch-2); }
.chip-f { color: var(--parch-2); font-size: 10.5px; }
/* Schatzkammer über der Bautabelle */
.treasury { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(200, 165, 90, .08); }
.treasury div { display: flex; flex-direction: column; gap: 2px; }
.treasury b { font-size: 15px; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.treasury b.bad, .poor { color: #e7a296 !important; }
.bcell small { display: block; }
.gline { display: flex; align-items: baseline; gap: 6px; margin: 3px 0; font-size: 13px; flex-wrap: wrap; }
.gline i { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.gline small { color: var(--parch-2); }
#setup h2#setupHead { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
#setup h2#setupHead small { font-family: Inter, system-ui, sans-serif; font-size: 12px; }
#setup.min { top: auto; bottom: 110px; }
#setup.min > :not(h2):not(.st-go) { display: none; }
/* ---------- v0.13: Pflicht-Startfenster ---------- */
body.setup #setup { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 80px); z-index: 60;
  box-shadow: 0 0 0 100vmax rgba(8, 12, 16, .55), 0 20px 60px rgba(0, 0, 0, .6); }
body.setup.setup-away #setup { display: none; }
#setup .st-step { padding: 10px 12px; border-radius: var(--r); border: 1px solid transparent; }
#setup .st-step.todo { border-color: rgba(200, 165, 90, .55); background: rgba(200, 165, 90, .07); }
#setup .st-step.done > b::after { content: ' ✓'; color: #8fc7a8; }
#setup .st-step .btn { margin-top: 8px; }
#setup .st-go .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ---------- Großes Fenster für Befehle und Ereignisse ---------- */
#layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(8, 12, 16, .55); backdrop-filter: blur(2px); }
#layer[hidden] { display: none; }
.layer-card { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow: auto; padding: 22px 26px; }
.layer-card h2 { margin: 2px 0 10px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; color: var(--brass-2); line-height: 1.1; }
.layer-card .kind { color: var(--parch-2); font-size: 13px; }
.lhead { display: flex; gap: 16px; align-items: center; }
.licon { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgba(200, 165, 90, .18); border: 2px solid var(--brass); color: var(--brass-2); }
.lhead.loss .licon, .lhead.fail .licon { background: rgba(168, 68, 58, .2); border-color: #a8443a; color: #f1a59a; }
.lhead.war .licon { background: rgba(224, 103, 90, .18); border-color: #e0675a; color: #ffb3a8; }
.lhead.explore .licon { background: rgba(95, 179, 163, .18); border-color: #5fb3a3; color: #a9e0d4; }
.ltext { font-size: 16px; line-height: 1.55; margin: 12px 0 14px; }
.lfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; margin: 6px 0 12px; }
.lf { display: flex; flex-direction: column; } .lf span { color: var(--parch-2); font-size: 12px; } .lf b { font-size: 14.5px; } .lf em.bad { color: #f1a59a; font-style: normal; }
.lopts { display: grid; gap: 8px; margin: 8px 0; }
.lopt { text-align: left; padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--brass); background: rgba(200, 165, 90, .08); color: var(--parch); cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.lopt b { font-size: 15.5px; color: var(--brass-2); } .lopt b small { color: var(--parch-2); font-weight: 500; margin-left: 6px; }
.lopt span { color: var(--parch-2); }
.lopt:hover:not([disabled]), .lopt:focus-visible { background: rgba(200, 165, 90, .2); outline: none; }
.lopt[disabled] { opacity: .5; cursor: not-allowed; border-color: var(--line); }
.lopt.act { flex-direction: row; align-items: center; } .lopt.act b::before { content: '▸ '; }
.lfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* ---------- Ansichten-Knopf ---------- */
#btnViews { position: fixed; right: 14px; bottom: 102px; z-index: 15; padding: 8px 16px; }
#btnViews.on { border-color: var(--brass-2); color: var(--brass-2); }
#layers { bottom: 146px; }
#layers[hidden] { display: none; }
body.setup #btnViews { display: none; }
/* ---------- Kopfleiste mit den wichtigsten Werten ---------- */
#topstats { top: 14px; left: 762px; right: 390px; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; z-index: 12; }
#topstats[hidden] { display: none; }
#topstats .ts { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: var(--r); border: 1px solid transparent; background: transparent; color: var(--parch); cursor: pointer; text-align: left; min-width: 0; }
#topstats .ts:hover { border-color: var(--line); background: rgba(200, 165, 90, .08); }
#topstats .ts i { font-style: normal; font-size: 18px; color: var(--brass-2); width: 22px; text-align: center; }
#topstats .ts span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#topstats .ts small { font-size: 10.5px; color: var(--parch-2); }
#topstats .ts b { font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#topstats .ts em { font-style: normal; font-size: 11px; color: var(--parch-2); white-space: nowrap; }
#topstats .ts.bad b, #topstats .ts.bad em { color: #f1a59a; }
#topstats .ts.warn b { color: #f0d48a; }
@media (max-width: 1500px) { #topstats { top: 112px; left: 360px; right: 390px; } }
@media (max-width: 1100px) { #topstats { display: none; } }
/* ---------- Linkes Menü einklappbar ---------- */
#dossier .dz-sec.fold > h3 { cursor: pointer; user-select: none; }
#dossier .dz-sec.fold > h3::before { content: '▾ '; color: var(--brass); font-size: .8em; }
#dossier .dz-sec.fold.closed > h3::before { content: '▸ '; }
#dossier .dz-sec.closed > :not(h3) { display: none; }
#dossier .dz-sec.closed { padding-bottom: 2px; }
#dossier .dz-sec.fold > h3 { display: flex; justify-content: flex-start; align-items: baseline; gap: 6px; text-align: left; }
#dossier .dz-sec.fold > h3 small { margin-left: auto; }
.lhead > div { flex: 1; text-align: left; }
.layer-card { text-align: left; }
/* v0.14: kompaktes linkes Menü */
#dossier { max-height: calc(100vh - 330px); padding: 10px 14px; scrollbar-width: thin; }
#dossier .dz-sec { margin-top: 6px; padding-top: 6px; }
#dossier .dz-sec > h3 { margin: 2px 0 4px; font-size: 15px; }
#dossier .dz-head .dz-name { font-size: 20px; }
#dossier .stats { gap: 4px 10px; }
#side, #dossier, .tabbody, dialog { scrollbar-width: thin; scrollbar-color: rgba(200,165,90,.4) transparent; }
#dossier .dz-sec.closed > h3 small { display: none; }
#dossier .dz-sec > .kind { font-size: 11.5px; color: var(--parch-2); margin: 2px 0 4px; }
.bguide-wrap { margin-top: 12px; } .bguide-wrap summary { cursor: pointer; color: var(--brass-2); font-weight: 600; margin-bottom: 8px; }
/* kompakte Abschnittszeilen */
#dossier .dz-sec { margin-top: 2px; padding-top: 4px; }
#dossier .dz-sec.closed { padding-bottom: 0; }
#dossier .dz-sec > h3 { margin: 0 0 2px; padding: 3px 0; }
/* niedrige Bildschirme: offener Abschnitt bekommt den Platz der Minikarte */
@media (max-height: 860px) {
  #dossier { max-height: calc(100vh - 340px); }
  body.dz-open #dossier { max-height: calc(100vh - 210px); }
  body.dz-open #minimapWrap { display: none; }
}
/* Kopfleiste auf schmaleren Bildschirmen: eine Zeile, ohne Zusatzzeilen */
@media (max-width: 1500px) {
  #topstats { top: 112px; left: 356px; right: auto; flex-wrap: nowrap; padding: 4px 6px; gap: 2px; }
  #topstats .ts { padding: 3px 7px 3px 4px; gap: 5px; }
  #topstats .ts em { display: none; }
  #topstats .ts b { max-width: 110px; font-size: 13.5px; }
  #topstats .ts i { font-size: 15px; width: 16px; }
}

/* ---------- v0.15: schmale Kopfleiste ---------- */
#cartouche { padding: 5px 10px 5px 6px; gap: 10px; outline-offset: 2px; }
#cartouche .ring { width: 46px; height: 46px; }
#cartouche .year-block { margin-left: -52px; padding-left: 58px; min-width: 0; width: auto; }
#cartouche .year { font-size: 25px; letter-spacing: .2px; white-space: nowrap; }
#cartouche .era { font-size: 13px; margin-top: 1px; white-space: nowrap; }
#cartouche .controls { gap: 5px; padding-left: 10px; }
#cartouche .btn { padding: 5px 10px; font-size: 13px; }
#cartouche .speed .tempo { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
#dossier { top: 80px; }
#topstats { top: 14px; left: 560px; right: auto; flex-wrap: nowrap; gap: 1px; padding: 4px 5px; }
#topstats .ts { padding: 3px 8px 3px 4px; gap: 6px; }
#topstats .ts i { font-size: 15px; width: 17px; }
#topstats .ts b { font-size: 14px; max-width: 128px; line-height: 1.15; }
#topstats .ts small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
@media (max-width: 1500px) { #topstats .ts b, #topstats .ts small { max-width: 104px; } }
#cartouche { gap: 8px; }
#topstats .ts { padding: 3px 6px 3px 3px; gap: 5px; }
#topstats .ts i { width: 15px; font-size: 14px; }
#topstats { overflow: hidden; }
#topstats .ts { flex: 0 1 auto; min-width: 0; }
#topstats .ts span { min-width: 0; overflow: hidden; }
/* v0.16: Herrscherkarte */
.rdec { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.rdec small { font-size: 12px; }
.rdec { padding: 3px 0; gap: 6px; line-height: 1.25; }
.rdec b { font-size: 13.5px; } .rdec small { font-size: 11.5px; }
.rdec .btn.small { padding: 3px 8px; font-size: 12px; }
#rulerCard .kind { margin-top: 8px !important; }
/* viele Befehle: zweispaltig, damit das Fenster nicht scrollt */
.lopts.many { grid-template-columns: 1fr 1fr; }
.lopts.many .lopt { padding: 9px 12px; font-size: 12.5px; }
.lopts.many .lopt b { font-size: 14.5px; }
.layer-card:has(.lopts.many) { width: min(860px, calc(100vw - 32px)); }
@media (max-width: 760px) { .lopts.many { grid-template-columns: 1fr; } }
body.side-tall #side { max-height: calc(100vh - 170px); }

/* ---------- v0.18: Intro (ruhiger, rein in CSS) ---------- */
#intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer; opacity: 1;
  background: radial-gradient(ellipse at 50% 42%, #1d3344 0%, #12202b 55%, #0a131a 100%); transition: opacity .9s ease;
  animation: ptw-hold 9.2s linear forwards; }
#intro.out { opacity: 0; pointer-events: none; }
.intro-stage { position: relative; display: grid; justify-items: center; text-align: center; width: min(90vw, 760px); }
.astro { width: min(42vh, 320px); height: min(42vh, 320px); overflow: visible; filter: drop-shadow(0 0 18px rgba(200, 165, 90, .22));
  animation: ptw-astro-out 1.6s cubic-bezier(.4, 0, .2, 1) 6.4s forwards; will-change: transform, opacity; }
.astro .ring { fill: none; stroke: #c8a55a; stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; animation: ptw-draw 2.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.astro .r2 { stroke-width: .8; animation-delay: .35s; } .astro .m1 { animation-delay: .7s; stroke-width: .9; } .astro .m2 { animation-delay: .95s; stroke-width: .9; } .astro .eq { animation-delay: 1.2s; stroke-width: .8; stroke: #e3c98a; }
#introTicks line { stroke: #e3c98a; stroke-width: 1; opacity: 0; animation: ptw-fade .6s ease-out forwards; }
.astro .hand { transform-origin: 100px 100px; animation: ptw-sweep 5.6s cubic-bezier(.45, .05, .3, 1) 1s both; will-change: transform; }
.astro .hand line { stroke: #f3dfa6; stroke-width: 2; stroke-linecap: round; } .astro .hand circle { fill: #c8a55a; }
.ieras { position: relative; height: clamp(84px, 12vh, 112px); width: 100%; margin-top: 22px; }
.iera-item { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; gap: 6px; opacity: 0;
  animation: ptw-era .95s ease-in-out both; animation-delay: calc(1.3s + var(--i) * .9s); will-change: opacity, transform; }
.iera-item b { font: 700 clamp(34px, 6vh, 56px)/1 "Cormorant Garamond", Georgia, serif; color: #e3c98a; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.iera-item span { font: italic 500 clamp(16px, 2.3vh, 21px) "Cormorant Garamond", Georgia, serif; color: #cdbf9f; }
.iera-item[style*="--i:5"] { animation-name: ptw-era-last; animation-duration: 1.4s; }
.ititle { position: absolute; left: 50%; top: calc(min(42vh, 320px) * .62 + 10px); transform: translateX(-50%); margin: 0; white-space: nowrap; opacity: 0;
  font: 700 clamp(46px, 8vh, 84px)/1 "Cormorant Garamond", Georgia, serif; color: #f1e3bd; letter-spacing: .5em;
  animation: ptw-title 2s cubic-bezier(.2, .7, .2, 1) 6.7s forwards; }
.isub { position: absolute; left: 50%; top: calc(min(42vh, 320px) * .62 + clamp(46px, 8vh, 84px) + 26px); transform: translateX(-50%); margin: 0; white-space: nowrap; opacity: 0;
  font: 500 clamp(14px, 1.9vh, 18px) "Alegreya Sans", system-ui, sans-serif; color: #b8ad95; animation: ptw-fade-in 1.2s ease 7.5s forwards; }
.iskip { position: absolute; right: 22px; bottom: 20px; background: none; border: 1px solid rgba(200, 165, 90, .45); color: #cdbf9f; border-radius: 4px; padding: 6px 12px; font: 500 13px "Alegreya Sans", system-ui, sans-serif; cursor: pointer; }
.iskip:hover { border-color: #e3c98a; color: #f1e3bd; }
@keyframes ptw-hold { from { --x: 0; } to { --x: 1; } }
@keyframes ptw-draw { to { stroke-dashoffset: 0; } }
@keyframes ptw-fade { to { opacity: .9; } }
@keyframes ptw-fade-in { to { opacity: 1; } }
@keyframes ptw-sweep { from { transform: rotate(-20deg); } to { transform: rotate(340deg); } }
@keyframes ptw-era { 0% { opacity: 0; transform: translateY(10px); } 22% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ptw-era-last { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ptw-astro-out { to { transform: translateY(-11vh) scale(.6); opacity: .5; } }
@keyframes ptw-title { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) { #intro, #intro * { animation-duration: .01s !important; animation-delay: 0s !important; } .iera-item { display: none; } .astro .ring { stroke-dashoffset: 0; } #introTicks line { opacity: .9; } .ititle, .isub { opacity: 1; } }
/* Ton-Knopf */
#btnSound.off { color: var(--parch-2); text-decoration: line-through; text-decoration-color: rgba(200, 165, 90, .6); }
/* v0.18: Forschungsbalken in der Kopfleiste, Technikwahl */
#topstats .ts em.tbar { display: block; width: 110px; max-width: 100%; height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#topstats .ts em.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #7fb6dc, #b9dcf2); transition: width .6s ease; }
.lopt.cur { border-color: #7fb6dc; background: rgba(127, 182, 220, .1); }
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 2px; vertical-align: 0; }
#layerCard[data-kind="tech"] .lfoot { justify-content: space-between; }
/* v0.19: Spielmenü */
#gameMenu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 230px; padding: 6px; }
#gameMenu[hidden] { display: none; }
#gameMenu button { background: none; border: 0; color: var(--parch); text-align: left; padding: 8px 12px; border-radius: var(--r); cursor: pointer; font: 500 14.5px "Alegreya Sans", system-ui, sans-serif; }
#gameMenu button:hover, #gameMenu button:focus-visible { background: rgba(200, 165, 90, .14); color: var(--brass-2); }
#gameMenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
#gameMenu .gmVol { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 8px; color: var(--parch); font: 500 13.5px "Alegreya Sans", system-ui, sans-serif; }
#gameMenu .gmVol input { width: 100%; accent-color: var(--brass-2); }
#gameMenu .gmNow { padding: 2px 12px 8px; color: var(--brass-2); font: italic 13px "Alegreya Sans", system-ui, sans-serif; max-width: 260px; }
#gameMenu .gmNow:empty { display: none; }
#gameMenu #btnSound.off { text-decoration: none; color: var(--parch-2); }
/* Stabilität in der Kopfleiste */
#topstats .ts em.sbar { display: block; width: 92px; height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#topstats .ts em.sbar i { display: block; height: 100%; }
#topstats .ts b small.lvl { font: 600 11px "Alegreya Sans", system-ui, sans-serif; margin-left: 5px; letter-spacing: .02em; }
/* v0.19: Technologie – Fortschritt und Entwicklungsbaum */
.tprog { display: flex; height: 7px; margin: 6px 0 2px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.tprog i { display: block; height: 100%; }
.tprog i.gift { background: repeating-linear-gradient(135deg, #b9a0d8 0 4px, #8a72b0 4px 8px); }
.tprog i.own { background: linear-gradient(90deg, #7fb6dc, #b9dcf2); }
.tprog-l { font-size: 12px; } .tprog-l .gl { color: #c7b2e6; }
.tt-treebox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.tt-tree-h { margin-bottom: 6px; }
.tt-tree { position: relative; max-height: 46vh; overflow: auto; padding: 4px 6px 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(10, 18, 24, .35); scrollbar-width: thin; }
.tt-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tt-links path { fill: none; stroke: rgba(200, 165, 90, .28); stroke-width: 1.4; }
.tt-links path.avail { stroke: rgba(227, 201, 138, .75); stroke-width: 1.8; }
.tt-links path.next { stroke: rgba(200, 200, 200, .3); stroke-dasharray: 4 4; }
.tt-row { position: relative; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; padding: 10px 0; }
.tt-row + .tt-row { border-top: 1px dashed rgba(200, 165, 90, .12); }
.tt-tier { font: italic 500 12px var(--serif); color: var(--parch-2); }
.tt-nodes { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tt-node { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 14px; font: 500 13px "Alegreya Sans", system-ui, sans-serif; cursor: default; border: 1px solid var(--line); background: var(--ink-2); color: var(--parch); }
.tt-node .c { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tt-node.known { color: #b9ad94; background: rgba(27, 47, 61, .7); border-color: rgba(200, 165, 90, .22); }
.tt-node.avail { cursor: pointer; border-color: var(--brass); background: rgba(200, 165, 90, .14); color: var(--brass-2); font-weight: 700; }
.tt-node.avail:hover { background: rgba(200, 165, 90, .26); }
.tt-node.next { border-style: dashed; opacity: .6; }
.tt-node.cur { border-color: #7fb6dc; box-shadow: 0 0 0 2px rgba(127, 182, 220, .35); color: #cfe6f6; }
.tt-node .np { display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.tt-node .np i { display: block; height: 100%; background: #7fb6dc; }
.tt-sep { margin: 8px 0 2px; padding: 6px 4px 2px; border-top: 1px solid rgba(200, 165, 90, .35); font: italic 600 13px var(--serif); color: var(--brass-2); }
.tt-links path { stroke: rgba(200, 165, 90, .35); }
/* Räuberkarte: Stärke der Bande und Vergleich mit den eigenen Heeren */
#layerCard .bstr { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 8px; }
#layerCard .bcmp { align-items: center; gap: 12px; }
#layerCard .bcmp .st { white-space: nowrap; }
/* Ratgeber: Vorschläge mit Knopf zum Umsetzen */
.lhead.advice .licon { background: rgba(200, 165, 90, .16); border-color: var(--brass); color: var(--brass-2); }
#layerCard[data-kind="advice"] { max-width: 640px; }
.advl { display: grid; gap: 8px; margin: 10px 0 4px; max-height: 58vh; overflow: auto; padding-right: 4px; }
.adv { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid rgba(200, 165, 90, .22); border-left: 3px solid rgba(200, 165, 90, .45); border-radius: 6px; background: rgba(255, 255, 255, .025); }
.adv.p3 { border-left-color: #e0675a; background: rgba(224, 103, 90, .07); }
.adv.p1 { border-left-color: rgba(185, 176, 160, .35); }
.adv-i { font-size: 20px; line-height: 1.2; color: var(--brass-2); text-align: center; }
.adv.p3 .adv-i { color: #ffb3a8; }
.adv-b p { margin: 3px 0 7px; font-size: 13.5px; color: var(--parch-2); }
.adv-tag { color: #ffb3a8; font-weight: 700; }
.adv-a { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-btn { padding-inline: 10px; }
.adv-btn b { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(200, 165, 90, .25); color: var(--brass-2); font-size: 12px; line-height: 18px; text-align: center; }
.adv-btn.urgent { border-color: #e0675a; }
.adv-btn.urgent b { background: #c2453a; color: #fff; animation: adv-pulse 1.6s ease-in-out 3; }
.adv-btn.empty b { opacity: .5; }
@keyframes adv-pulse { 50% { box-shadow: 0 0 0 4px rgba(224, 103, 90, .35); } }
@media (prefers-reduced-motion: reduce) { .adv-btn.urgent b { animation: none; } }

/* ====================== Mobilansicht ====================== */
#mobBar { display: none; }
body.mobile #mobBar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-radius: 0; border-width: 1px 0 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); gap: 4px; }
body.mobile:has(#start:not([hidden])) #mobBar { display: none; }
#mobBar button { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 1px solid transparent; border-radius: var(--r); color: var(--parch); padding: 5px 2px; font: 500 12px "Alegreya Sans", system-ui, sans-serif; min-height: 46px; }
#mobBar button i { font-style: normal; font-size: 19px; color: var(--brass-2); line-height: 1.1; }
#mobBar button.on { border-color: var(--brass); background: rgba(200, 165, 90, .12); }
body.mobile #cartouche { top: calc(6px + env(safe-area-inset-top)); left: 6px; right: 6px; padding: 4px 8px; gap: 6px; justify-content: space-between; flex-wrap: nowrap; }
body.mobile #cartouche .ring { display: none; }
body.mobile #cartouche .year-block { margin: 0; padding: 0; }
body.mobile #cartouche .year { font-size: 19px; }
body.mobile #cartouche .era { font-size: 11.5px; }
body.mobile #cartouche .controls { flex-wrap: nowrap; padding-left: 0; border: 0; gap: 4px; }
body.mobile #cartouche .speed { display: none; }
body.mobile #cartouche .btn { padding: 7px 10px; font-size: 13px; min-height: 36px; }
body.mobile #topstats { display: flex; top: calc(60px + env(safe-area-inset-top)); left: 6px; right: 6px; max-width: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 3px 4px; -webkit-overflow-scrolling: touch; }
body.mobile #topstats[hidden] { display: none; }
body.mobile #topstats::-webkit-scrollbar { display: none; }
body.mobile #topstats .ts { flex: 0 0 auto; padding: 3px 8px 3px 4px; }
body.mobile #topstats .ts small, body.mobile #topstats .ts em { font-size: 10px; }
body.mobile #timeline, body.mobile #minimapWrap, body.mobile #btnViews, body.mobile #tip { display: none !important; }
/* Blätter von unten: Reich, Auswahl, Ansichten */
body.mobile #dossier, body.mobile #side, body.mobile #layers { display: none; }
body.mobile #dossier, body.mobile #side, body.mobile #layers { top: auto; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: min(62dvh, calc(100dvh - 170px)); border-radius: 12px 12px 0 0; z-index: 25; overflow: auto; }
body.mobile.sheet-dossier #dossier:not([hidden]) { display: block; animation: sheet-up .22s ease-out; }
body.mobile.sheet-side #side { display: flex; animation: sheet-up .22s ease-out; }
body.mobile.sheet-layers #layers { display: flex; padding: 12px; animation: sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
body.mobile #side .tabs button { padding: 10px 4px; }
/* Fenster im Vollbild */
body.mobile #layer { place-items: end center; }
body.mobile .layer-card, body.mobile .layer-card:has(.lopts.many) { width: 100vw; max-height: calc(100dvh - 10px - env(safe-area-inset-top)); border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
body.mobile .layer-card h2 { font-size: 25px; }
body.mobile .lopts.many { grid-template-columns: 1fr; }
body.mobile .lfoot { flex-wrap: wrap; gap: 6px; }
body.mobile .lfoot .btn { flex: 1 1 auto; min-height: 42px; }
body.mobile #layerCard .bstr { grid-template-columns: 1fr 1fr; }
body.mobile #layerCard .bcmp { grid-template-columns: 1fr !important; gap: 4px; }
body.mobile dialog#dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
body.mobile #eraCard { width: 100vw; max-height: 92dvh; overflow: auto; top: auto; bottom: 0; transform: none; border-radius: 14px 14px 0 0; }
body.mobile #setup, body.mobile.setup #setup { top: calc(8px + env(safe-area-inset-top)); bottom: 8px; left: 6px; right: 6px; width: auto; transform: none; max-height: none; padding: 12px 14px; }
body.mobile #setup .st-go { flex-wrap: wrap; }
body.mobile #toasts { top: calc(110px + env(safe-area-inset-top)); width: 92vw; }
body.mobile .start-card { width: 100vw; max-height: 100dvh; border-radius: 0; padding: 18px 14px; outline: 0; }
body.mobile .btn.small { min-height: 34px; }
body.mobile #gameMenu button { padding: 12px 14px; }
@media (prefers-reduced-motion: reduce) { body.mobile #dossier, body.mobile #side, body.mobile #layers { animation: none !important; } }

/* Ziele, Hof, Ereigniskarten, Weltwunder */
.goals { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid rgba(200, 165, 90, .35); border-radius: 6px; background: rgba(200, 165, 90, .06); }
.goals-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.goals-h b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; color: var(--brass-2); }
.goals .ruhm { color: #ffe7a6; font-weight: 700; font-size: 13.5px; }
.goal { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 8px; align-items: center; padding: 4px 0; font-size: 14px; }
.goal .gk { color: var(--brass-2); }
.goal.done .gk { color: #8fc7a8; } .goal.done .gt { color: var(--parch-2); text-decoration: line-through; text-decoration-color: rgba(143, 199, 168, .6); }
.goal .gp { font-size: 12.5px; color: var(--parch-2); font-variant-numeric: tabular-nums; }
.goal .gbar { grid-column: 2 / 4; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.goal .gbar i { display: block; height: 100%; background: linear-gradient(90deg, #c8a55a, #ffe7a6); }
.goal.done .gbar i { background: #8fc7a8; }
.court { margin: 0 0 10px; font-size: 14px; } .court .cp { margin: 2px 0; }
.evopts .lopt[disabled] { opacity: .5; cursor: not-allowed; }
#layerCard[data-kind="event"] .ltext { font-size: 16px; line-height: 1.5; }
#layerCard[data-kind="wonders"] { max-width: 760px; width: min(760px, calc(100vw - 32px)); }
.wonders { display: grid; gap: 6px; max-height: 60vh; overflow: auto; margin: 10px 0; padding-right: 4px; }
.wonder { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(200, 165, 90, .2); border-radius: 6px; }
.wonder.done { background: rgba(255, 255, 255, .025); }
.wonder .wi { font-size: 22px; color: var(--brass-2); text-align: center; }
.wonder .st { font-size: 12px; margin-left: 6px; }
body.mobile .wonder { grid-template-columns: 28px 1fr; } body.mobile .wonder > div:last-child { grid-column: 2; }
.wonder .st { padding: 1px 6px; border-radius: 3px; background: var(--ink-2); }
.wonder .st.kooperation { background: rgba(111, 154, 141, .3); color: #d3efe7; }

/* Aufgabenleiste: was jetzt getan werden soll oder muss */
#taskBar { position: fixed; z-index: 22; bottom: 104px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 580px)); min-width: 300px;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 34px 10px 12px;
  border: 1px solid var(--brass); border-left: 5px solid var(--brass); background: rgba(24, 38, 50, .97); box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }
#taskBar[hidden] { display: none; }
#taskBar.urgent { border-color: #e0675a; border-left-color: #e0675a; background: linear-gradient(90deg, rgba(90, 30, 24, .96), rgba(24, 38, 50, .97) 55%); }
#taskBar .tb-i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 19px/1 "Alegreya Sans", system-ui, sans-serif; color: #1a1208; background: var(--brass-2); }
#taskBar.urgent .tb-i { background: #e0675a; color: #fff; }
#taskBar .tb-k { font-size: 11.5px; letter-spacing: .02em; color: var(--brass-2); font-weight: 700; }
#taskBar.urgent .tb-k { color: #ffb3a8; }
#taskBar .tb-b b { display: block; font-size: 15.5px; line-height: 1.25; }
#taskBar .tb-b p { margin: 2px 0 0; font-size: 13px; color: var(--parch-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#taskBar .tb-a { display: flex; flex-direction: column; gap: 5px; }
#taskBar .tb-a .btn { white-space: nowrap; }
#taskBar .tb-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--parch-2); font-size: 14px; cursor: pointer; padding: 4px; }
#taskBar.flash { animation: tb-in .45s ease-out; }
#taskBar.urgent.flash .tb-i { animation: tb-pulse 1.2s ease-in-out 3; }
@keyframes tb-in { from { transform: translate(-50%, 16px); } }
@keyframes tb-pulse { 50% { box-shadow: 0 0 0 7px rgba(224, 103, 90, .35); } }
body.mobile #taskBar { left: 6px; right: 6px; width: auto; min-width: 0; transform: none; bottom: calc(62px + env(safe-area-inset-bottom)); grid-template-columns: 30px minmax(0, 1fr); padding: 8px 30px 8px 8px; gap: 8px; }
body.mobile #taskBar .tb-i { width: 28px; height: 28px; font-size: 16px; }
body.mobile #taskBar .tb-a { grid-column: 1 / -1; flex-direction: row; }
body.mobile #taskBar .tb-a .btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.mobile #taskBar .tb-b p { -webkit-line-clamp: 1; }
body.mobile.drawer-open #taskBar { display: none; }
body.mobile #taskBar.flash { animation: tb-in-m .45s ease-out; }
@keyframes tb-in-m { from { transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { #taskBar.flash, #taskBar.urgent.flash .tb-i { animation: none; } }

/* ====================== Nie über den Rand: Schutz gegen waagrechtes Scrollen ====================== */
html, body { max-width: 100vw; overflow-x: hidden; }
.start-card, .layer-card, #dlgBody, #dossier, #side, #setup, #layers, #eraCard, .tabbody, .advl, .wonders { overflow-x: hidden; }
.start-card *, .layer-card *, #dlgBody *, #dossier *, #side *, #setup * { min-width: 0; }
.start-card, .layer-card, #dlgBody, #dossier, #side, #setup, #eraCard { overflow-wrap: break-word; }
.btn, .chip, .ts, .lopt b, .tag { overflow-wrap: normal; }
body.mobile .pdetail { grid-template-columns: 1fr; }
body.mobile .pdetail .btn { width: 100%; }
body.mobile .start-actions { display: grid; grid-template-columns: 1fr; }
body.mobile .start-actions .btn { width: 100%; white-space: normal; }
body.mobile .start-head h1 { font-size: clamp(38px, 12vw, 64px); }
body.mobile .dtabs { flex-wrap: wrap; }
body.mobile .dtabs button { padding: 8px 10px; font-size: 15px; }
body.mobile #dlgBody { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); max-height: 100dvh; }
body.mobile .taxes, body.mobile .two, body.mobile .dgrid, body.mobile .opt { grid-template-columns: 1fr; }
body.mobile .ttable { font-size: 13px; }
body.mobile .ttable td, body.mobile .ttable th { padding: 5px 4px; }
body.mobile table { max-width: 100%; }
body.mobile .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.mobile img, body.mobile canvas:not(#map):not(#map3d), body.mobile svg { max-width: 100%; }

/* Ereignisfenster: was jetzt zu tun ist, deutlich hervorgehoben */
.todo-box { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--brass); border-left: 5px solid var(--brass); border-radius: 6px; background: rgba(200, 165, 90, .1); }
.todo-box.hot { border-color: #e0675a; border-left-color: #e0675a; background: rgba(224, 103, 90, .12); }
.todo-h { font: 700 13px "Alegreya Sans", system-ui, sans-serif; letter-spacing: .03em; color: var(--brass-2); margin-bottom: 8px; }
.todo-box.hot .todo-h { color: #ffb3a8; }
.todo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.mobile .todo-acts .btn { flex: 1 1 100%; }
body.mobile .facts { grid-template-columns: auto minmax(0, 1fr) !important; }

/* Intro auf schmalen Bildschirmen: alles innerhalb des Bildschirms, Texte umbrechen */
@media (max-width: 900px), (max-height: 520px) {
  #intro { overflow: hidden; }
  .intro-stage { width: 92vw; }
  .astro { width: min(34vh, 62vw); height: min(34vh, 62vw); }
  .ititle { font-size: clamp(34px, 11.5vw, 64px) !important; top: calc(min(34vh, 62vw) * .62 + 10px); max-width: 92vw; }
  .isub { white-space: normal; width: 88vw; top: calc(min(34vh, 62vw) * .62 + clamp(46px, 13vw, 84px) + 26px); font-size: 14px; }
  .iera-item b { font-size: clamp(30px, 9vw, 48px); }
  .iera-item span { font-size: 16px; padding: 0 4vw; }
  .iskip { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  @keyframes ptw-title { from { opacity: 0; letter-spacing: .25em; } to { opacity: 1; letter-spacing: .04em; } }
}

/* v0.25: automatischer Ausbau */
.autob { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0 4px; }
.autob input { accent-color: #c8a55a; }
.ract { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: rgba(255,240,205,.05); border: 1px solid rgba(200,165,90,.25); }
.ract > b { flex: 1 1 100%; } .ract small { flex: 1 1 100%; }
/* v0.30: Aufträge an der Provinz */
.uacts .uact { padding: 8px 0 6px; border-top: 1px solid var(--line); }
.uacts .uact:first-of-type { border-top: 0; }
.uacts .uact-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.uacts .uact-i { color: var(--brass-2); width: 16px; text-align: center; }
.uacts .uact-h .meta { margin-left: auto; }
.uacts .uact-b { display: flex; flex-wrap: wrap; gap: 6px; }
.uacts .uact-b .btn small { opacity: .75; margin-left: 4px; }
.lopt.pick { outline: 2px solid var(--brass-2); outline-offset: 1px; }
/* v0.30: Jahrhundert-Übersicht */
#layerCard[data-kind="century"] { max-width: min(860px, calc(100vw - 32px)); }
.cent { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 6px 0 4px; }
.cent-sec.wide { grid-column: 1 / -1; }
.cent h3 { font: 600 17px "Cormorant Garamond", Georgia, serif; color: var(--brass-2); margin: 0 0 6px; }
.cent-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cent-t th, .cent-t td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cent-t th:first-child { text-align: left; color: var(--parch-2); font-weight: 500; }
.cent-t thead th { color: var(--parch-2); font-weight: 500; font-size: 12px; }
.cent-t .up { color: #9fcf9a; } .cent-t .down { color: #f1a59a; }
.cent-r { margin: 0; padding-left: 22px; font-size: 13.5px; }
.cent-r li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.cent-r li > * { vertical-align: baseline; }
.cent-r li span { display: inline-block; min-width: 46%; }
.cent-r li b { float: right; color: var(--brass-2); }
.cent-r li.me span, .cent-r li.me b { color: #ffe7a6; font-weight: 700; }
.cent-a { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cent-a li { display: grid; gap: 2px; padding: 6px 10px; border-left: 2px solid var(--brass); background: rgba(200, 165, 90, .06); }
.cent-a li span { color: var(--parch-2); font-size: 13.5px; }
@media (max-width: 700px) { .cent { grid-template-columns: 1fr; } .cent-t { font-size: 12.5px; } .cent-r li span { min-width: 0; display: block; } }
/* ---------- v0.30: eine gemeinsame Kopfleiste ---------- */
:root { --bar-h: 56px; --ctl-h: 34px; }
body:not(.mobile) #cartouche { height: var(--bar-h); box-sizing: border-box; padding: 0 10px 0 6px; }
body:not(.mobile) #cartouche .ring { width: 44px; height: 44px; }
body:not(.mobile) #cartouche .year-block { margin-left: -50px; padding-left: 56px; }
body:not(.mobile) #cartouche .year { font-size: 24px; }
body:not(.mobile) #cartouche .era { font-size: 13px; }
#cartouche .controls { height: var(--ctl-h); }
#cartouche .btn, #cartouche .speed { height: var(--ctl-h); box-sizing: border-box; }
#cartouche .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font: 600 13.5px/1 "Alegreya Sans", system-ui, sans-serif; white-space: nowrap; }
#cartouche .speed { align-items: stretch; }
#cartouche .speed button, #cartouche .speed .tempo { display: inline-flex; align-items: center; font: 600 13px/1 "Alegreya Sans", system-ui, sans-serif; padding: 0 10px; }
#cartouche .btn.icon { width: var(--ctl-h); padding: 0; }
#btnMute svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#btnMute .spk { fill: currentColor; stroke: none; }
#btnMute .off { display: none; }
#btnMute.off { color: var(--parch-2); }
#btnMute.off .wav { display: none; }
#btnMute.off .off { display: inline; }
#btnMute:not(.off) { color: var(--brass-2); }
body:not(.mobile) #topstats { top: 14px; height: var(--bar-h); box-sizing: border-box; align-items: center; flex-wrap: nowrap; padding: 0 6px; gap: 2px; }
body:not(.mobile) #topstats .ts { height: 44px; box-sizing: border-box; padding: 0 9px 0 5px; gap: 7px; font-family: "Alegreya Sans", system-ui, sans-serif; }
body:not(.mobile) #topstats .ts i { font-size: 15px; width: 17px; }
body:not(.mobile) #topstats .ts b { font-size: 14px; line-height: 1.15; }
body:not(.mobile) #topstats .ts small { font-size: 11px; line-height: 1.2; }
body:not(.mobile) #topstats.tight .ts small, body:not(.mobile) #topstats.tight .ts em:not(.tbar) { display: none; }
body:not(.mobile) #topstats.tight .ts b { max-width: 92px; }
#topstats .ts.ts-hide { display: none !important; }
@media (max-width: 1100px) { body:not(.mobile) #topstats { display: flex; } }
body:not(.mobile) #topstats[hidden] { display: none; }
/* v0.31: Aktionsfenster einer Region */
#layerCard[data-kind="actions"] { max-width: min(720px, calc(100vw - 32px)); }
.act-wrap { display: grid; gap: 14px; margin-top: 10px; max-height: min(58vh, 620px); overflow-y: auto; padding-right: 4px; }
.act-sec h3 { font: 600 16.5px "Cormorant Garamond", Georgia, serif; color: var(--brass-2); margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; }
.act-sec h3 .meta { margin-left: auto; font: 500 12.5px "Alegreya Sans", system-ui, sans-serif; }
.act-sec .lopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.act-sec .lopt span { font-size: 13px; }
@media (max-width: 700px) { .act-sec .lopts { grid-template-columns: 1fr; } .act-wrap { max-height: 62vh; } }
@media (max-width: 700px) { #layerCard[data-kind="actions"] .lfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } }

/* ---------- Stadtansicht (v0.36) ---------- */
#cityView { position: fixed; inset: 0; z-index: 900; background: #0e1c28; }
#cityView canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#cityView .cv-bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; pointer-events: none; }
#cityView .cv-t { pointer-events: auto; background: rgba(16, 24, 31, .86); border: 1px solid rgba(200, 165, 90, .5); border-radius: 6px; padding: 8px 12px; max-width: min(640px, calc(100vw - 190px)); }
#cityView .cv-t b { display: block; font: 600 22px "Cormorant Garamond", Georgia, serif; color: #e7c77a; }
#cityView .cv-t span { display: block; color: #f1e6cc; font-size: 14px; }
#cityView .cv-t small { display: block; color: #c9bc9f; font-size: 12.5px; margin-top: 2px; }
#cityView .cv-bar .btn { pointer-events: auto; flex: none; }
#cityView .cv-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(16, 24, 31, .8); color: #f1e6cc; padding: 6px 12px; border-radius: 5px; font-size: 13px; transition: opacity .8s; max-width: calc(100vw - 40px); text-align: center; }
#cityView .cv-hint.fade { opacity: 0; }
#cityView .cv-load { position: absolute; inset: 0; display: grid; place-items: center; font: 600 22px "Cormorant Garamond", Georgia, serif; color: #e7c77a; background: #0e1c28; }
@media (max-width: 600px) { #cityView .cv-bar { flex-direction: column; align-items: stretch; } #cityView .cv-t { max-width: none; } #cityView .cv-t b { font-size: 19px; } #cityView .cv-bar .btn { align-self: flex-end; } }
/* v0.43: Stadtschild mit Trend, Bau und Grund für Einwohnerverlust */
.lab3d .tr { font-style: normal; font-weight: 700; font-size: 11px; margin-left: 3px; display: inline-block; transform: translateY(-1px); }
.lab3d b .tr { font-size: 12px; }
.lab3d .tr.up { color: #5fd16a; } .lab3d .tr.eq { color: #a9a49a; } .lab3d .tr.dn { color: #ff5b4d; }
.lab3d .bd { display: block; margin-top: 2px; font: 500 11px "Alegreya Sans", system-ui, sans-serif; color: #e9d9b0; }
.lab3d .why { display: block; margin: 3px -5px 0; padding: 1px 6px; border-radius: 4px; background: rgba(190,52,40,.9); color: #fff3ea;
  font: 600 11px "Alegreya Sans", system-ui, sans-serif; pointer-events: auto; cursor: help; }
.lab3d .why::after { content: ' ⓘ'; opacity: .8; }
.lab3d .why:focus-visible { outline: 2px solid #ffd36b; outline-offset: 1px; }
.lab3d .tip { display: none; max-width: 210px; white-space: normal; margin-top: 3px; font: 400 11px/1.3 "Alegreya Sans", system-ui, sans-serif; color: #f6ecd2; text-align: left; }
.lab3d.open .tip { display: block; }
.lab3d.loss { border-color: rgba(230,90,70,.9); }
body.mobile .lab3d .bd, body.mobile .lab3d .why { font-size: 10px; }
/* v0.43: Desktop – Jahreskartusche und Werte als eine Leiste */
#cartouche #topstats { position: static; display: flex; flex: 0 1 auto; min-width: 0; margin: 0 0 0 4px; padding: 0 0 0 10px; border: 0; border-left: 1px solid rgba(200,165,90,.4);
  outline: 0; background: none; box-shadow: none; backdrop-filter: none; border-radius: 0; align-self: stretch; align-items: center; }
#cartouche #topstats[hidden] { display: none; }
#cartouche { max-width: calc(100vw - 400px); }
/* v0.44: Bauprogramme für das ganze Land */
.bprog { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid rgba(200,165,90,.45); border-radius: 8px; background: rgba(200,165,90,.06); }
.bprog h3 { margin: 0 0 4px; }
.bplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; margin-top: 8px; }
.bp, .tunl { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(16,22,28,.35); }
.bp.on, .tunl.on { border-color: #6fbf73; background: rgba(76,175,80,.12); }
.bp.lock { opacity: .6; }
.bp .bi, .tunl .bi { font-size: 19px; width: 24px; text-align: center; flex: none; color: var(--brass); }
.bp .bt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bp .bt small { font-size: 11.5px; }
.bp .btn, .tunl .btn { flex: none; white-space: nowrap; }
.tunlock { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 5px; }
.tunl > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
@media (max-width: 640px) { .bplist { grid-template-columns: 1fr; } .bp, .tunl { flex-wrap: wrap; } .bp .btn, .tunl .btn { width: 100%; } }
/* v0.45: Bauprogramme als Übersichtstabelle mit Kosten und Nutzen */
.bpwrap { overflow-x: auto; margin-top: 8px; }
.bptab { width: 100%; border-collapse: collapse; font-size: 13px; }
.bptab th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted, #b9ad92); padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bptab td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bptab td small { display: block; font-size: 11px; }
.bptab tr.on td { background: rgba(76,175,80,.10); }
.bptab tr.on td:first-child { box-shadow: inset 3px 0 0 #6fbf73; }
.bptab tr.lock { opacity: .6; }
.bptab .bpn { display: flex; gap: 8px; align-items: flex-start; min-width: 190px; }
.bptab .bpn .bi { font-size: 19px; width: 24px; text-align: center; color: var(--brass); flex: none; }
.bptab .bpn > span:last-child { display: flex; flex-direction: column; }
.bptab b.good { color: #8fd694; } .bptab b.bad { color: #f1a59a; }
.bptab .bpw { min-width: 170px; }
.bpfx { display: block; white-space: nowrap; } .bpfx small { display: inline !important; opacity: .75; }
.bptab td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .bptab thead { display: none; }
  .bptab, .bptab tbody, .bptab tr, .bptab td { display: block; width: 100%; }
  .bptab tr { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; padding: 4px 0; }
  .bptab td { border: 0; padding: 3px 10px; display: flex; justify-content: space-between; gap: 10px; }
  .bptab td[data-l]::before { content: attr(data-l); color: var(--muted, #b9ad92); font-size: 12px; flex: none; }
  .bptab td[data-l] > * { text-align: right; }
  .bptab .bpn { display: flex; justify-content: flex-start; }
  .bptab td:last-child .btn { width: 100%; }
}
/* v0.46: Kopf der Bauprogramme mit Weg zu den Weltwundern */
.bprog .bphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bprog .bphead h3 { margin: 0; }
/* v0.47: Lenkung des Reiches – Regierung, Provinzen, Feldzüge, Hof, Lagebericht, Entscheidungskarten */
.lnote { margin: 8px 0 12px; padding: 8px 12px; border-left: 3px solid var(--brass); background: rgba(200, 165, 90, .09); border-radius: 0 var(--r) var(--r) 0; font-size: 14px; line-height: 1.4; }
.lnote b { color: var(--brass-2); margin-right: 4px; }
.lopt.rec { border-color: var(--brass) !important; box-shadow: inset 0 0 0 1px rgba(200, 165, 90, .5); }
.recb { font: 600 11px var(--sans); font-style: normal; padding: 1px 7px; border-radius: 9px; background: rgba(200, 165, 90, .25); color: var(--brass-2); white-space: nowrap; margin-left: 6px; vertical-align: 1px; }
.gov h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.gov h3:first-child { margin-top: 4px; }
.gov h3 small { font: 500 13px var(--sans); color: var(--parch-2); }
.gov .warnc, .tag.warnc { color: #f0d48a; }
.tag.warnc { background: rgba(240, 212, 138, .16); }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.gcard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .02); }
.gcard p { margin: 0; font-size: 13px; line-height: 1.35; }
.gcard .btn { align-self: flex-start; margin-top: auto; }
.gcard.on { border-color: #6fbf73; background: rgba(76, 175, 80, .09); }
.gcard.rec:not(.on) { border-color: rgba(200, 165, 90, .6); }
.gcard.locked { opacity: .55; }
.gcard.empty { border-style: dashed; }
.gch { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gch b { font-size: 15px; }
.gi { font-size: 18px; color: var(--brass); width: 22px; text-align: center; }
.gplus { color: #b6dfb2; } .gminus { color: #efb3a6; }
.gwho { font-size: 12px !important; }
.gopts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.gmore { margin: 6px 0; } .gmore > summary { cursor: pointer; color: var(--brass-2); font-size: 13.5px; padding: 4px 0; }
.gpast { margin: 4px 0; padding-left: 18px; font-size: 13px; line-height: 1.45; } .gpast li { margin: 2px 0; }
.rtab td:last-child { text-align: left; white-space: normal; }
.rtab td .btn { margin-top: 4px; }
.rtab select { background: var(--ink-2); color: var(--parch); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 6px; font: 13px var(--sans); max-width: 100%; }
.rtab .rpn small { display: block; }
.rleg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; font-size: 13px; }
.rleg > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.campcard { padding: 10px 14px; border: 1px solid #6fbf73; border-radius: 6px; background: rgba(76, 175, 80, .07); margin-bottom: 10px; }
.campcard p { margin: 6px 0; font-size: 14px; }
.cform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cform .kind { margin-bottom: 4px; }
.gradio { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; cursor: pointer; }
.gradio:has(input:checked) { border-color: var(--brass); background: rgba(200, 165, 90, .08); }
.gradio:has(input:disabled) { opacity: .5; cursor: default; }
.gradio input { margin-top: 3px; accent-color: var(--brass); }
.gradio span { display: flex; flex-direction: column; font-size: 13.5px; } .gradio small { font-size: 12px; }
.csel { display: flex; flex-direction: column; gap: 3px; font-size: 13px; margin-top: 4px; }
.csel select { background: var(--ink-2); color: var(--parch); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 6px; font: 13px var(--sans); }
.heirs { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.heir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.heir.on { border-color: #6fbf73; } .heir .btn { margin-left: auto; }
.cand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.cand span { display: flex; flex-direction: column; font-size: 13px; }
.rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.rgrid > div { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.rgrid b { font-size: 17px; font-variant-numeric: tabular-nums; } .rgrid small { font-size: 12px; }
.rgrid small.good, .gov small.good { color: #8fd694; } .rgrid small.bad, .gov small.bad { color: #f1a59a; }
.rh { margin: 14px 0 6px; font-size: 17px; }
.rfoot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rfoot .sp { flex: 1; }
.adv-tag.ok { color: #b6dfb2; }
@media (max-width: 760px) {
  .cform { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ggrid { grid-template-columns: 1fr; }
  .rtab td[data-l] > * { text-align: left; }
  .rtab td { flex-wrap: wrap; }
}
.adv-tag.mid { color: #f0d48a; }
.rtab select[data-postsel] { margin-top: 4px; }
.btn.tiny { padding: 0 6px; font-size: 11px; min-height: 0; line-height: 18px; }
/* v0.48: Ladebildschirm – deckt die Karte ganz ab, bis alles gezeichnet ist */
#loading { z-index: 150; background: radial-gradient(ellipse at 50% 40%, #183041 0%, #0e1c27 55%, #08121a 100%); transition: opacity .4s ease; }
#loading.out { opacity: 0; }
#loading .loader { width: min(440px, 88vw); }
#loading .loader-year { font-size: clamp(44px, 9vw, 64px); line-height: 1.05; }
.loader-title { font: italic 600 22px var(--serif); color: var(--parch); margin: 4px 0 18px; }
.lsteps { list-style: none; margin: 0 auto 16px; padding: 0; text-align: left; display: inline-flex; flex-direction: column; gap: 7px; }
.lsteps li { display: flex; align-items: center; gap: 10px; color: rgba(239, 230, 210, .38); font: 15px var(--sans); transition: color .3s; }
.lsteps li i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid rgba(200, 165, 90, .35); position: relative; }
.lsteps li.on { color: var(--parch); }
.lsteps li.on i { border-color: var(--brass); border-top-color: transparent; animation: lspin 0.9s linear infinite; }
.lsteps li.done { color: var(--parch-2); }
.lsteps li.done i { border-color: var(--brass); background: var(--brass); }
.lsteps li.done i::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #0e1c27; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lbar { height: 3px; background: rgba(200, 165, 90, .18); border-radius: 2px; overflow: hidden; margin: 0 auto; width: 100%; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a8843f, var(--brass-2)); transition: width .5s ease; }
#loadMsg:empty { display: none; }
#loadMsg { margin-top: 12px; }
@keyframes lspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lsteps li.on i { animation: none; border-top-color: var(--brass); } #loading { transition: none; } }
/* v0.49: Notizen der Ratgeber (begleitetes Spiel) */
.toast.advnote { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--brass); animation-duration: 11s; max-width: 420px; }
.toast.advnote b { color: var(--brass-2); font-weight: 600; }
.toast.advnote span { font-size: 13px; color: var(--parch-2); line-height: 1.35; }
/* v0.49: Weltlage */
#layerCard[data-kind="world"] { width: min(980px, 96vw); }
.wtabs { margin: 4px 0 10px; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.wcard { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.wcard h4 { margin: 0 0 6px; font: 600 16px var(--serif); color: var(--brass-2); }
.wcard ol { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wcard li { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 6px; align-items: baseline; font-size: 13.5px; }
.wcard li.me { color: var(--brass-2); font-weight: 600; }
.wcard .wr { color: var(--parch-2); font-variant-numeric: tabular-nums; }
.wcard .wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcard .wn i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.wcard .wv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wcard li em { grid-column: 2 / 4; height: 3px; background: rgba(255, 255, 255, .07); border-radius: 2px; overflow: hidden; }
.wcard li em b { display: block; height: 100%; background: var(--brass); opacity: .75; }
.wcard li.me em b { background: #f3dc9c; opacity: 1; }
.wchart { width: 100%; height: auto; display: block; margin: 6px 0; }
.wchart .wg { stroke: rgba(239, 230, 210, .1); stroke-width: 1; }
.wchart .wt { fill: var(--parch-2); font: 11px var(--sans); }
.wchart .wl { font: 600 12px var(--sans); } .wchart .wl.me { font-weight: 700; }
.wnews li { margin: 4px 0; }

/* ====================== v0.52: Kriegsziele, Ambition, Herrschaft, Werte, Erste Schritte ====================== */
.campcard.wz { border-color: #c97a5a; background: rgba(168, 68, 58, .07); }
.campcard.amb { border-color: var(--brass); background: rgba(200, 165, 90, .08); }
.wzbar { position: relative; height: 16px; margin: 8px 0 4px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid var(--line); }
.wzbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a6a2a, var(--brass-2)); border-radius: 8px; transition: width .5s; }
.wzbar span { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 14px; font-weight: 700; color: #fff7e0; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.wzopts { flex-wrap: wrap; }
.htl { list-style: none; margin: 6px 0 10px; padding: 0 0 0 16px; border-left: 2px solid var(--line); max-height: 320px; overflow: auto; }
.htl li { position: relative; margin: 0 0 7px; font-size: 13.5px; line-height: 1.4; }
.htl .hi { position: absolute; left: -27px; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--ink-2); border: 1px solid var(--line); color: var(--brass-2); }
.htl li.h-krieg .hi { color: #f1a59a; border-color: rgba(168, 68, 58, .6); } .htl li.h-frieden .hi { color: #b8e0b0; }
.htl li b { color: var(--brass-2); font-weight: 600; margin-right: 4px; }
.gmore.reign summary { cursor: pointer; padding: 4px 0; }
.rtable td.good, .xtab td.good, .rgrid .good { color: #b8e0b0; } .rtable td.bad, .xtab td.bad { color: #f1a59a; }
.xtot { font-size: 17px; margin: 4px 0 10px; }
.xtwo { gap: 14px; } .xtab td small { display: block; font-size: 11.5px; }
.xtab td { padding: 4px 6px; vertical-align: top; } .xtab td.num { white-space: nowrap; font-weight: 700; }
#topstats .ts[data-ts="stabx"], #topstats .ts[data-ts="growth"], #topstats .ts[data-ts="realm"] { cursor: help; }

.guide { position: fixed; left: 12px; top: calc(var(--bar-h, 56px) + 64px); width: 268px; z-index: 30; background: rgba(19, 34, 46, .94); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); backdrop-filter: blur(6px); font-size: 13px; }
.guide header { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line); }
.guide header b { font-family: var(--serif); font-size: 17px; color: var(--brass-2); flex: 1; }
.guide header small { color: var(--parch-2); }
.guide .gx { background: none; border: 0; color: var(--parch-2); cursor: pointer; padding: 2px 6px; border-radius: 4px; } .guide .gx:hover { color: var(--parch); background: rgba(255, 255, 255, .06); }
.guide ol { list-style: none; margin: 0; padding: 6px 10px 10px; }
.guide li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; color: var(--parch-2); }
.guide li .gk { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.guide li.ok { opacity: .62; } .guide li.ok .gk { background: rgba(111, 154, 141, .35); border-color: var(--patina); color: #dff0e8; } .guide li.ok b { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); font-weight: 500; }
.guide li.next { color: var(--parch); } .guide li.next .gk { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(200, 165, 90, .18); }
.guide li small { display: block; margin: 3px 0 6px; color: var(--parch-2); line-height: 1.35; }
.guide li b { font-weight: 600; }
.guide.min ol li:not(.next) { display: none; } .guide.min ol li.next small, .guide.min ol li.next .btn { display: none; }
body.mobile .guide { top: auto; bottom: 74px; left: 8px; width: min(268px, calc(100vw - 16px)); }
body.mobile .guide:not(.open) ol li:not(.next) { display: none; }
@media (prefers-reduced-motion: reduce) { .wzbar i { transition: none; } }