/* =========================================================================
   Vicus Tribusque - modernes, dunkles Tabellen-Design
   ========================================================================= */
:root{
  --bg:#0f1419; --bg2:#161d26; --panel:#1b2430; --panel2:#212c3a;
  --line:#2b3947; --line2:#38495b;
  --txt:#e6edf3; --muted:#8b9bb0; --dim:#64748b;
  --accent:#f5b942; --accent2:#e08a2b;
  --good:#4ade80; --bad:#f87171; --info:#60a5fa;
  --wood:#7cba59; --clay:#d98c4a; --iron:#9aa7b4; --crop:#f1c453; --cult:#c084fc;
  --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:radial-gradient(1200px 600px at 50% -10%,#1a2531,var(--bg)) fixed;
  color:var(--txt);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}
h1{font-size:1.5rem;margin:.2em 0}
h3{font-size:1rem;margin:0 0 .7rem;letter-spacing:.02em;color:var(--txt)}
h4{font-size:.85rem;margin:1rem 0 .5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--muted)}
.right{text-align:right}

/* ---- Topbar ---- */
/* Kopf: Hauptmenü + Funktions-Reiter kleben als Einheit oben fest. */
.topchrome{position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.topbar{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.5rem;
  background:linear-gradient(180deg,#1c2733,#151d27);border-bottom:1px solid var(--line);
  position:relative;z-index:2}

/* Funktions-Reiter, die unter dem Hauptmenü „hervorschauen". */
/* Kein overflow hier: das würde (CSS-Regel: overflow-x:auto -> overflow-y:auto)
   das Untermenü-Dropdown und den Sperr-Tooltip abschneiden. Auf schmalen Schirmen
   klappen die Reiter stattdessen auf Icons-only zusammen (Media-Query unten). */
/* Hintergrund = derselbe fixe Body-Gradient -> die Leiste verschmilzt mit der Seite,
   kein Streifen, keine Unterlinie: die Reiter „hängen" in die Seite hinein. Zentriert. */
.funcbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;align-items:flex-start;
  padding:0 1.25rem;
  background:radial-gradient(1200px 600px at 50% -10%,#1a2531,var(--bg)) fixed}
.fb-item{position:relative;flex:0 0 auto}
.fb-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem .4rem;
  border:1px solid var(--line);border-top:none;border-radius:0 0 9px 9px;
  background:var(--panel);color:var(--muted);font-weight:600;font-size:.85rem;line-height:1;
  white-space:nowrap;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s}
.fb-tab .ic{width:15px;height:15px;flex:0 0 auto}
.fb-tab:hover{background:var(--panel2);color:var(--txt)}
.fb-tab.active{background:var(--panel2);color:var(--accent);border-color:var(--accent);
  box-shadow:0 3px 12px rgba(245,185,66,.18)}
.fb-tab.active::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px}
.fb-caret{font-size:.6rem;opacity:.7;margin-left:-.1rem}

/* Hauptknopf "Dorf" in der Funktionsleiste: dezenter Akzent (leicht getoenter Grund
   + Akzenttext/-rand), minimal betont - klar erkennbar, aber nicht "bullig"/leuchtend. */
.fb-tab.fb-main,.fb-tab.fb-main.active{background:color-mix(in srgb, var(--accent) 12%, var(--panel));
  color:var(--accent);border-color:color-mix(in srgb, var(--accent) 50%, var(--line));
  font-weight:700;font-size:.9rem;padding:.36rem .82rem .42rem;box-shadow:none}
.fb-tab.fb-main .ic{opacity:1}
.fb-tab.fb-main:hover{background:color-mix(in srgb, var(--accent) 20%, var(--panel));
  color:var(--accent)}
.fb-tab.fb-main.active{color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 62%, var(--line))}
/* Gleiche Hervorhebung im schwebenden Dock (Opt-in). */
.fp-body .fd-main{color:var(--accent);font-weight:700}
.fp-body .fd-main .ic{opacity:1}

/* Gesperrter Reiter: ausgegraut; Hinweis (was bauen) als Tooltip beim Hover. */
.fb-tab.locked{background:transparent;border-color:transparent;color:var(--dim);cursor:default}
.fb-tab.locked .ic{opacity:.45}
.fb-lock{width:12px !important;height:12px !important;opacity:.55}
.fb-item:hover .fb-tab.locked{color:var(--muted)}
.fb-tab.locked::after{content:attr(data-hint);position:absolute;top:100%;left:.4rem;
  margin-top:.4rem;background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  padding:.4rem .6rem;font-size:.78rem;font-weight:500;color:var(--txt);white-space:nowrap;
  box-shadow:var(--shadow);opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .12s,transform .12s;z-index:30}
.fb-item:hover .fb-tab.locked::after{opacity:1;transform:translateY(0)}

/* Untermenü als Dropdown (z. B. Dorf-Einheiten -> Truppenübersicht / Farmen). */
.fb-sub{position:absolute;top:100%;left:0;min-width:190px;background:var(--panel);
  border:1px solid var(--line2);border-radius:10px;padding:.3rem;box-shadow:var(--shadow);
  display:none;z-index:30}
.fb-item:hover .fb-sub{display:block}
.fb-sub a{display:flex;align-items:center;gap:.5rem;padding:.42rem .55rem;border-radius:7px;
  color:var(--muted);font-weight:500;font-size:.85rem}
.fb-sub a .ic{width:15px;height:15px;opacity:.7}
.fb-sub a:hover{background:var(--panel2);color:var(--txt)}
.fb-sub a.active{color:var(--accent)}
.fb-sub a.active .ic{opacity:1}

/* Schmal: nur noch Icons (Labels weg; Name kommt per title-Tooltip). */
@media(max-width:820px){
  .funcbar{padding:0 .6rem}
  .fb-lbl{display:none}
  .fb-tab{padding:.4rem .55rem}
  .fb-tab.locked::after{left:0}
  /* Topmenü kollabiert genauso auf Symbole: Labels weg, Namen kommen per title-Tooltip.
     Logo schrumpft auf das Schwerter-Zeichen (Text ausgeblendet). So bleibt der Header
     auch auf schmalen/mobilen Schirmen kompakt. */
  .brand-txt{display:none}
  .brand .logo{margin-right:0}
  .mainnav .nav-lbl{display:none}
  .mainnav a{padding:.4rem .55rem}
  .topbar{gap:.7rem;padding:.6rem .8rem;flex-wrap:wrap}
  /* Dorf-Auswahl (nur bei mehreren Dörfern vorhanden) rutscht in eine eigene volle
     Zeile zwischen Topmenü und Dorfmenü. Dazu wird .user aufgelöst (display:contents),
     damit Switch + Avatar direkte Flex-Kinder der Topbar werden: Avatar bleibt oben
     rechts, das Switch-Dropdown bricht per flex-basis:100% als eigene Leiste um. */
  .topbar .user{display:contents}
  .usermenu{margin-left:auto}
  .switch{order:10;flex-basis:100%;margin:0}
  .switch select{width:100%}
}

/* Einstellungen: Menü-Stil-Auswahl. */
.set-dock{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.set-label{font-weight:600;margin-bottom:.5rem}
.set-radio{display:flex;align-items:center;gap:.6rem;padding:.25rem 0;cursor:pointer}
.set-radio input{width:16px;height:16px;accent-color:var(--accent)}
.brand{flex:0 0 auto;font-size:1.15rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.brand em{color:var(--accent);font-style:normal}
.brand .logo{color:var(--accent);margin-right:.2rem}
.mainnav{display:flex;gap:.4rem;flex:0 1 auto}
/* Topbar-Dreiteilung (nur Desktop): Logo links und Usermenue rechts sind gleich breite
   Flex-Seiten (flex:1), damit die Mitte der Hauptnavigation immer die Seitenmitte trifft -
   egal wie breit Logo oder Usermenue sind. Auf schmalen Schirmen (siehe unten) natuerlich
   angeordnet, sonst wuerde das Logo auf 0 schrumpfen. */
@media(min-width:900px){
  .topbar .brand{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar .user{flex:1 1 0;min-width:0;margin-left:0}
}
.mainnav a{padding:.4rem .9rem;border-radius:8px;color:var(--muted);font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem}
.mainnav a .ic{width:15px;height:15px;flex:0 0 auto}
/* "Karte" im Hauptmenü: Karten-Icon in Akzentfarbe -> faellt als einziges Icon auf. */
.mainnav .nav-map .ic{color:var(--accent)}
.mainnav a:hover{background:var(--panel);color:var(--txt)}
.mainnav a.active{background:var(--panel2);color:var(--accent)}
.badge{background:var(--bad);color:#fff;border-radius:10px;padding:0 .4rem;font-size:.7rem;font-weight:700}
.user{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;
  gap:1rem;font-size:.9rem}
.user .pname em{color:var(--accent);font-style:normal}
/* Profil-Chip (Avatar + Name) in der Topbar -> Link zu /settings. */
.pchip{display:inline-flex;align-items:center;gap:.5rem;padding:.2rem .5rem;border-radius:9px;
  color:var(--txt);text-decoration:none}
.pchip:hover{background:var(--panel)}
.pchip.active{background:var(--panel2)}
.pavatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line2)}
.pav-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);
  color:var(--accent);font-weight:700;font-size:.85rem}

/* Usermenue: Avatar-Knopf + aufklappbares Menue. */
.usermenu{position:relative;flex:0 0 auto}
.um-btn{display:inline-flex;padding:2px;border:none;background:none;cursor:pointer;border-radius:50%;
  line-height:0;transition:box-shadow .12s}
.um-btn .pavatar{width:30px;height:30px}
.um-btn:hover .pavatar,.um-btn[aria-expanded="true"] .pavatar{border-color:var(--accent)}
.um-btn[aria-expanded="true"]{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.um-pop{position:absolute;top:calc(100% + .5rem);right:0;min-width:230px;z-index:40;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:.4rem;box-shadow:var(--shadow)}
.um-head{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem .55rem;
  border-bottom:1px solid var(--line);margin-bottom:.35rem}
.um-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)}
.um-av.pav-fallback{font-size:1.15rem}
.um-id{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.um-name{font-size:.98rem;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-tribe{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--muted)}
.crest-xs{width:14px;height:17px;flex:0 0 auto}
.um-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:8px;
  color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem}
.um-row .ic{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.um-row:hover{background:var(--panel2);color:var(--txt)}
.um-row.active{color:var(--accent)}
.um-row.active .ic{opacity:1}
.um-rlbl{display:flex;flex-direction:column;line-height:1.25}
.um-rlbl strong{color:var(--txt);font-weight:700}
.um-row.active .um-rlbl strong{color:var(--accent)}
.um-sub{font-size:.74rem;font-weight:500;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:180px}
.um-logout{margin-top:.2rem;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--dim)}
.um-logout:hover{color:var(--bad)}
/* Einstellungsseite. */
.settings-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;
  max-width:920px;align-items:start}
.settings-wrap>.danger-zone{grid-column:1 / -1}
@media(max-width:720px){.settings-wrap{grid-template-columns:1fr}}
.settings-wrap .panel h3{margin:0 0 .7rem}
.set-profile{display:flex;align-items:center;gap:1.1rem}
.set-avatar{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line2)}
.set-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--accent);font-weight:800;font-size:2.4rem}
.set-name{font-size:1.25rem;font-weight:700;margin-bottom:.2rem}
.set-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:600}
.set-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.user select{background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:.35rem .5rem}
.logout{color:var(--muted);font-size:.85rem}

.wrap{max-width:1080px;margin:0 auto;padding:1.5rem}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.coords{color:var(--muted);font-weight:400;font-size:1rem}
/* Rechts-Gruppe im Seitenkopf: evtl. vorhandener Meta-Text + Mini-Rohstoffleiste,
   rechtsbündig zusammengefasst (per JS in .page-head eingehängt, s. base.html). */
.ph-right{display:flex;align-items:center;gap:.7rem;margin-left:auto;flex-wrap:wrap;
  justify-content:flex-end}
/* Trennstrich nur, wenn links davon schon Meta-Text steht (Oasen/Rathaus). */
.ph-right.has-meta .resmini{padding-left:.7rem;border-left:1px solid var(--line)}
.resmini{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.rm-chip{display:inline-flex;align-items:center;gap:.3rem;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:.16rem .55rem .16rem .4rem;font-size:.82rem;font-weight:600;color:var(--txt);
  line-height:1;white-space:nowrap}
.rm-chip .ic{width:15px;height:15px;flex:0 0 auto}
.rm-chip b{font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .rm-chip{font-size:.76rem;padding:.14rem .45rem .14rem .32rem}
  .resmini{gap:.25rem}
}
.cap-badge{background:var(--accent);color:#1a1204;padding:.1rem .5rem;border-radius:6px;font-size:.7rem;font-weight:700;vertical-align:middle}

/* ---- Flash ---- */
/* Toast: schwebt oben rechts, schiebt keinen Inhalt weg. */
.flash{position:fixed;top:14px;right:14px;left:auto;z-index:2000;max-width:340px;
  margin:0;padding:.7rem 1rem;background:var(--panel2);
  border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);animation:toast-in .22s ease-out}
.flash.inline{position:fixed;top:14px;right:14px;left:auto;margin:0}
.flash.fade-out{animation:toast-out .35s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-10px)}}

/* ---- Panels & Tabellen ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;color:var(--dim);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.3rem .5rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.42rem .5rem;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
/* Rechtsbündige Spalten: Header genauso ausrichten wie die Werte (sonst überstimmt
   .tbl th{text-align:left} die .right-Klasse und Kopf/Wert stehen versetzt). */
.tbl th.right{text-align:right}
.tbl tr:hover td{background:var(--panel2)}
.lvl{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.cost{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem}
.cost.bad{color:var(--bad)}

/* ---- Ressourcen-Leiste ---- */
.resbar{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1.2rem}
@media(max-width:820px){.resbar{grid-template-columns:repeat(2,1fr)}}
.res{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem .9rem;box-shadow:var(--shadow)}
.res-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.res-idcol{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;line-height:1}
.ic.res-ico{width:32px;height:32px}
.res-cult .res-ico{color:var(--cult)}
.res-top{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.res-eta{white-space:nowrap}
.res-rate{color:var(--good)}
.res-rate.neg{color:var(--bad)}
.res-num{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;margin:.15rem 0}
.res-cap{font-size:.72rem;color:var(--dim);font-weight:400}
.track{height:5px;background:var(--bg);border-radius:3px;overflow:hidden;margin-top:.3rem}
.fillbar{height:100%;width:0;transition:width .5s}
.res-wood .fillbar{background:var(--wood)} .res-wood .res-name{color:var(--wood)}
.res-clay .fillbar{background:var(--clay)} .res-clay .res-name{color:var(--clay)}
.res-iron .fillbar{background:var(--iron)} .res-iron .res-name{color:var(--iron)}
.res-crop .fillbar{background:var(--crop)} .res-crop .res-name{color:var(--crop)}
.res-cult .res-name{color:var(--cult)} .res-cult .mini{font-size:.72rem;color:var(--muted)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:#1a1204;
  border:none;border-radius:9px;padding:.6rem 1.2rem;font-weight:700;font-size:.95rem;
  cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line2)}
.btn-sm{background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:7px;padding:.28rem .6rem;font-size:.8rem;font-weight:600;cursor:pointer}
.btn-sm:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn-sm:disabled{opacity:.38;cursor:not-allowed}
.btn-sm.cant{opacity:.42}
.btn-sm.cant:hover{border-color:var(--line2);color:var(--txt)}
/* X zum Abbrechen einer laufenden Ausbildung (neben dem Countdown) */
.tq-cell{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.tq-x{border:1px solid var(--line2);background:var(--panel2);color:var(--muted);
  border-radius:6px;width:1.5rem;height:1.5rem;line-height:1;font-size:.8rem;
  cursor:pointer;flex:0 0 auto;padding:0}
.tq-x:hover{border-color:#f4a3a3;color:#f4a3a3}
.chip{margin:.2rem}
.newbuild{margin-top:1rem;border-top:1px dashed var(--line);padding-top:.7rem}
.opts{display:flex;flex-wrap:wrap;gap:.15rem}
.qty{width:64px;background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:6px;padding:.25rem .4rem;font-size:.85rem}

/* ---- Countdown ---- */
.cd{font-variant-numeric:tabular-nums;color:var(--info);font-weight:600}
.cd.done{color:var(--good)}

/* ---- Baustatus in Zeilen ---- */
.q2{color:var(--info);font-weight:700;margin-left:.4em;font-size:.9em}
.bstat{font-size:.82rem;font-weight:600;white-space:nowrap}
.bstat.b{color:var(--info)}
.bstat.w{color:var(--muted)}
tr.is-building td{background:rgba(96,165,250,.08)}

/* ---- Bestätigungsdialog ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:flex;align-items:center;justify-content:center}
.modal-overlay[hidden]{display:none}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  padding:1.4rem 1.6rem;width:min(540px,92vw);box-shadow:var(--shadow)}
.modal h3{font-size:1.1rem;margin-bottom:.9rem}
.um-cost{display:flex;flex-wrap:wrap;gap:1rem;font-size:1.05rem;margin-bottom:.7rem;
  font-variant-numeric:tabular-nums}
.um-cost .ci{color:var(--txt);margin:0}
.um-cost .ci.short{color:var(--bad)}
.um-cost .ic{width:1.1em;height:1.1em}
.um-time{color:var(--muted);font-size:.9rem;margin-bottom:.4rem}
.um-popinc{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.um-popinc .ic{width:1em;height:1em}
.um-popinc-crop{color:var(--muted)}
.um-note{color:var(--bad);font-size:.85rem}
.sm-eff{color:var(--txt);font-size:.95rem;margin-bottom:.7rem;font-variant-numeric:tabular-nums}
.modal-actions{display:flex;gap:.6rem;margin-top:1.1rem}
.modal-actions .btn,.modal-actions .btn-ghost{flex:1}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}

/* ---- Login / Choose ---- */
.login{min-height:70vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:2.5rem;text-align:center;max-width:420px;box-shadow:var(--shadow)}
.login-logo{font-size:3rem;color:var(--accent)}
.login-logo-img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto 1.2rem;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.login-card h1{font-size:1.8rem} .login-card h1 em{color:var(--accent);font-style:normal}
.sub{color:var(--muted);margin-bottom:1.5rem}
.btn-discord{background:#5865F2;color:#fff;width:100%}
.btn-discord:hover{background:#4752c4}
.notice{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;
  padding:1rem;font-size:.85rem;color:var(--muted);text-align:left}
.notice code{background:var(--bg);padding:.05rem .3rem;border-radius:4px;color:var(--accent)}
.dev{margin-top:1.2rem;display:flex;gap:.4rem}
.dev input{flex:1;background:var(--bg);color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:.5rem}

.choose{text-align:center;padding-top:1rem;max-width:1080px;margin:0 auto}
.choose-logo{display:block;max-width:min(520px,80%);height:auto;margin:0 auto .4rem;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55))}
.tribes{margin-top:1.2rem}
.tribe-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:.6rem}
@media(max-width:900px){.tribe-row{grid-template-columns:1fr}}
.region-title{text-align:left;color:var(--accent);font-weight:600;margin:1rem 0 .3rem}
.region-pick{margin-top:1rem}
.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:460px;margin:0 auto}
.region-opt{display:block;cursor:pointer}
.region-opt input{position:absolute;opacity:0}
.region-opt span{display:block;padding:.7rem;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--muted);transition:all .15s}
.region-opt:hover span{border-color:var(--accent)}
.region-opt input:checked + span{border-color:var(--accent);color:var(--fg);
  background:color-mix(in srgb, var(--accent) 14%, transparent);font-weight:600}
/* Volk-Karten: auswählbar (Radio), reicher Inhalt (Stärken/Schwächen aus dem Wiki) */
.tribe-card{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;cursor:pointer;
  text-align:left;color:var(--txt);transition:.15s;box-shadow:var(--shadow)}
.tribe-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.tribe-card input{position:absolute;opacity:0;pointer-events:none}
.tribe-card:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.tc-head{display:flex;align-items:center;gap:.6rem}
.tc-crest{width:38px;height:46px;flex:0 0 auto}
.tc-title h2{margin:0;color:var(--accent);font-size:1.25rem;line-height:1.1}
.tc-tag{color:var(--muted);font-size:.72rem;font-weight:600;margin-top:.15rem}
.tc-check{margin-left:auto;width:24px;height:24px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line2);color:transparent;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;transition:.15s}
.tribe-card:has(input:checked) .tc-check{background:var(--accent);border-color:var(--accent);color:#1a1204}
.tc-lead{color:var(--muted);font-size:.82rem;line-height:1.4;margin:.7rem 0 .5rem}
.tc-cols{display:grid;grid-template-columns:1fr;gap:.5rem;margin-bottom:.6rem}
.tc-col-h{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.15rem}
.tc-col-h.good{color:var(--good)} .tc-col-h.bad{color:var(--bad)}
.tc-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.tc-cols li{position:relative;padding-left:.9rem;font-size:.8rem;color:var(--txt);line-height:1.3}
.tc-pros li::before{content:"+";position:absolute;left:0;color:var(--good);font-weight:800}
.tc-cons li::before{content:"–";position:absolute;left:0;color:var(--bad);font-weight:800}
.tc-facts{margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--line2);
  display:flex;flex-direction:column;gap:.15rem;font-size:.75rem;color:var(--muted)}
.tc-fact b{color:var(--txt);font-weight:600}
.choose-go{margin-top:1.4rem}
.btn-big{font-size:1.05rem;padding:.8rem 2.4rem}

/* ---- Karte ---- */
.mapwrap{max-height:76vh;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);cursor:grab}
/* Karte per Maus ziehen: Greif-Cursor + kein Textmarkieren/Kachel-Geisterbild beim Pannen. */
.mapwrap.grabbing{cursor:grabbing;user-select:none}
.mapwrap.grabbing .tile{cursor:grabbing}
.mapwrap .tile{-webkit-user-drag:none;user-select:none}
.mapgrid{display:grid;grid-template-columns:repeat(var(--n),var(--tile,46px));
  grid-auto-rows:var(--tile,46px);gap:3px;width:max-content;margin:0 auto}
/* --- Hex-Layout (flat-top, versetzte Spalten) -------------------------------
   Rein visuell: jede Kachel ist absolut positioniert (ci/ri aus map_view).
   --w = Kachelbreite (= --tile vom Zoom), --h = Höhe, --stepx = Spaltenabstand. */
.mapgrid.hex{position:relative;display:block;width:max-content;margin:0 auto;
  --w:var(--tile,46px); --h:calc(var(--w) * 0.8660254); --stepx:calc(var(--w) * 0.75);
  width:calc(var(--stepx) * (var(--n) - 1) + var(--w));
  height:calc(var(--h) * var(--n) + var(--h) / 2)}
.mapgrid.hex .tile{position:absolute;width:var(--w);height:var(--h);border:0;
  border-radius:0;background:none;background-repeat:no-repeat;background-position:center;
  background-size:cover;overflow:visible;transition:filter .08s,transform .08s}
/* Alte eckige Rahmen (outline/box-shadow von Quadrat-Kacheln) im Hex-Modus abschalten. */
.mapgrid.hex .tile,
.mapgrid.hex .tile.village.center,
.mapgrid.hex .tile.oasis.occ{outline:0;box-shadow:none}
/* Alte Quadrat-Hintergründe/Opazität neutralisieren: die .tile.valley/.oasis/.cropper-
   Regeln nutzen das `background`-Shorthand und setzen damit size/repeat/position/color
   zurück (cropper hat gleiche Spezifität -> gewann sonst). Hier mit mehr Spezifität fixen. */
.mapgrid.hex .tile.valley,
.mapgrid.hex .tile.valley.cropper,
.mapgrid.hex .tile.oasis{background-color:transparent;background-size:cover;
  background-repeat:no-repeat;background-position:center;opacity:1}
.mapgrid.hex .tile:hover{outline:0;transform:translateY(-2px) scale(1.06);z-index:5;
  filter:drop-shadow(0 0 5px var(--accent)) brightness(1.08)}
/* Besitz-Hierarchie: Spieler leuchten farbig, Barbaren bleiben neutral/gedämpft. */
.mapgrid.hex .tile.village.ok-mine{filter:drop-shadow(0 0 4px var(--good))}
.mapgrid.hex .tile.village.ok-ally{filter:drop-shadow(0 0 4px #38bdf8)}
.mapgrid.hex .tile.village.ok-enemy{filter:drop-shadow(0 0 4px var(--bad))}
.mapgrid.hex .tile.village.ok-barbarian{filter:saturate(.6) brightness(.92)}
.mapgrid.hex .tile.village.center{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 4px var(--good))}
.mapgrid.hex .tile.oasis.occ{filter:drop-shadow(0 0 4px var(--accent))}
/* Besitz-Punkt: kleiner farbiger Marker oben rechts, auf einen Blick lesbar. */
.mapgrid.hex .owner-dot{position:absolute;top:8%;right:10%;width:26%;height:26%;
  max-width:11px;max-height:11px;min-width:5px;min-height:5px;border-radius:50%;
  background:var(--dim);box-shadow:0 0 0 1.5px rgba(0,0,0,.65)}
.mapgrid.hex .ok-mine .owner-dot{background:var(--good)}
.mapgrid.hex .ok-ally .owner-dot{background:#38bdf8}
.mapgrid.hex .ok-enemy .owner-dot{background:var(--bad)}
.mapgrid.hex .ok-barbarian .owner-dot{background:#9ca3af}
.mapgrid.hex .tile .tname{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-size:.5rem;text-shadow:0 1px 2px #000,0 0 3px #000;background:none}
.mapgrid.hex .tile .oasis-ic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mapgrid.hex .tile .cropbadge{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  text-shadow:0 1px 2px #000}
.mapgrid.hex.compact .tile{background-size:contain}
/* Kompakt-Modus (kleine Kacheln): nur Farbflächen, keine Texte/Badges/Icons. */
.mapgrid.compact{gap:1px}
.mapgrid.compact .tname,.mapgrid.compact .cropbadge,.mapgrid.compact .oasis-ic{display:none}
.mapgrid.compact .tdot{width:6px;height:6px}
.mapgrid.compact .tile{border-radius:3px}
/* Karten-Steuerung (Größe + Zoom) */
.mapctrls{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.mapctrls label{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem}
.mapctrls input[type=range]{accent-color:var(--accent);cursor:pointer;width:150px}
.mapctrls .mapbtn{gap:.4rem;padding:.34rem .7rem;font-size:.85rem}
.mapctrls .mapbtn .ic{width:14px;height:14px}
.tile{border-radius:7px;background:var(--bg2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:.55rem;overflow:hidden;
  border:1px solid var(--line);text-decoration:none;transition:transform .07s}
.tile:hover{outline:2px solid var(--accent);outline-offset:-1px;z-index:3;transform:scale(1.08)}
.tile .tdot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.tile .tname{color:var(--muted);margin-top:2px;white-space:nowrap;max-width:44px;overflow:hidden;text-overflow:ellipsis}
.tile.mine{background:#14301f;border-color:var(--good)} .tile.mine .tdot{background:var(--good)} .tile.mine .tname{color:#86efac}
.tile.foe{background:#301414;border-color:var(--bad)} .tile.foe .tdot{background:var(--bad)} .tile.foe .tname{color:#fca5a5}
.tile.ai{background:#2a2410;border-color:var(--accent)} .tile.ai .tdot{background:var(--accent)} .tile.ai .tname{color:#fcd34d}
.tile.village.center{outline:2px solid #fff;outline-offset:-1px;box-shadow:0 0 0 2px var(--accent)}
.legend{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-top:.8rem}
.lg{width:12px;height:12px;border-radius:3px;display:inline-block}
.lg.mine{background:var(--good)} .lg.foe{background:var(--bad)} .lg.ai{background:var(--accent)}
.radiusform input{width:60px;background:var(--panel);color:var(--txt);border:1px solid var(--line2);border-radius:7px;padding:.3rem}
/* Oasen- und Tal-Felder */
.tile.oasis{background:#0f2e2b;border-color:#1d5c54}
.tile.oasis .oasis-ic{display:flex;gap:1px;align-items:center}
.tile.oasis .ic{width:14px;height:14px}
.tile.oasis:hover{outline-color:#2dd4bf}
.tile.oasis.occ{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.tile.valley{background:var(--bg2);opacity:.7}
.tile.valley:hover{opacity:1}
.tile.valley.cropper{background:#12261a;border-color:#2f6b3f;opacity:1}
.cropbadge{display:flex;align-items:center;gap:1px;font-size:.72rem;color:var(--crop);font-weight:700}
.cropbadge .ic{width:13px;height:13px}
.lg.oasis{background:#1d5c54} .lg.cropper{background:#2f6b3f}
/* Karten-Hover-Tooltip */
.maptip{position:fixed;z-index:100;pointer-events:none;white-space:pre-line;max-width:260px;
  background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:.5rem .7rem;
  font-size:.85rem;line-height:1.45;color:var(--txt);box-shadow:0 6px 24px rgba(0,0,0,.5)}

/* Oasen-Panel im Dorf */
.oasispanel .oasis-list{display:flex;flex-wrap:wrap;gap:.4rem}
.oasis-chip{background:#0f2e2b;border:1px solid #1d5c54;border-radius:7px;
  padding:.25rem .6rem;font-size:.82rem;color:#5eead4}
.oasis-info{background:#0f2e2b;border:1px solid #1d5c54;border-radius:8px;
  padding:.7rem .9rem;margin-bottom:1rem;font-size:.88rem;color:var(--muted)}

/* Feiern im Rathaus (kompakt: Buttons, Details im Bestätigungsdialog) */
.celeb-body{margin-top:.6rem}
.celeb-buttons{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.celeb-btnform{display:inline-flex;align-items:center;gap:.5rem}
.celeb-btnform .celeb-cp{color:#fcd34d;font-weight:400;font-size:.85em}
.celeb-hint{margin-top:.5rem}
.celebpanel .celeb-active{background:#2e230f;border:1px solid #6b5320;border-radius:8px;
  padding:.55rem .8rem;margin-bottom:.7rem;font-size:.88rem;color:#fcd34d}
.celeb-opts{display:flex;flex-wrap:wrap;gap:.7rem}
.celeb-opt{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;
  padding:.6rem .75rem;min-width:200px;display:flex;flex-direction:column;gap:.35rem}
.celeb-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.celeb-name{font-weight:600}
.celeb-cp{color:#fcd34d;font-size:.85rem}
.celeb-meta{font-size:.82rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.celeb-note{font-size:.78rem}

/* Farm-Liste */
.farmtbl .farm-note{color:var(--muted);font-style:italic;margin-left:.4rem;font-size:.85rem}
.farm-troop{white-space:nowrap}
.farm-troop.short{color:#f87171}
.farmtbl tr.farm-warn{opacity:.6}
.farmadd .farmadd-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.farmadd label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}
.farmadd label.grow{flex:1;min-width:160px}
.farmadd input{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;
  padding:.4rem .55rem;color:var(--txt)}
.farmadd input[type=number]{width:90px}
.farmadd-troops{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}
.farmadd-hint{font-size:.78rem;margin-bottom:.7rem;line-height:1.6}
.farmadd-hint code{background:var(--panel2);border:1px solid var(--line2);border-radius:4px;
  padding:.05rem .3rem;font-size:.85em}
/* Farm-Ziel: Truppen je Einheit als Raster statt Schlüssel-Textfeld. */
.ft-head{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}
.ft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem .7rem;margin-bottom:.7rem}
.farmadd label.ft-unit{flex-direction:column;gap:.25rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:.4rem .55rem}
.ft-name{font-size:.82rem;color:var(--txt);font-weight:600}
.ft-inrow{display:flex;align-items:center;gap:.4rem}
.farmadd .ft-unit input[type=number]{width:64px}
.ft-have{font-variant-numeric:tabular-nums}
.farmadd label.ft-unit.ft-over{border-color:var(--warn,#f0a020)}
.farmadd label.ft-unit.ft-over .ft-have{color:var(--warn,#f0a020)}
.farmadd-actions{display:flex;align-items:center;gap:.8rem}
.ft-note.warn{color:#f87171}

/* (i)-Info-Button + Info-Popup */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);
  font-size:11px;font-style:italic;font-family:Georgia,serif;line-height:1;cursor:pointer;
  vertical-align:middle;padding:0}
.ibtn:hover{border-color:var(--accent);color:var(--accent)}
.opt-wrap{display:inline-flex;align-items:center;gap:.2rem}
#infomodal .modal{max-width:630px}
.im-cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:-.3rem 0 .5rem}
.im-desc{margin:0 0 .8rem;line-height:1.5;color:var(--txt)}
.im-eff{display:flex;gap:.6rem;align-items:baseline;padding:.5rem .65rem;border-radius:7px;
  margin-bottom:.4rem;font-size:.9rem;background:var(--panel2);border:1px solid var(--line2)}
.im-eff .im-lbl{flex:0 0 auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);min-width:88px}
.im-next{border-color:#3a5f3a}
.im-next .im-lbl{color:#86efac}

/* Feste Spalte rechts neben "Ausbauen" für Status/Abreißen -> Buttons bleiben bündig */
.act-trail{display:inline-flex;align-items:center;justify-content:flex-start;
  min-width:2rem;margin-left:.35rem;vertical-align:middle}
.act-trail:empty{min-width:2rem}

/* Mini-Aktionsbuttons (Abreißen / Bau abbrechen) */
.inline-act{display:inline}
.btn-mini{background:transparent;border:1px solid var(--line2);border-radius:6px;color:var(--muted);
  cursor:pointer;font-size:12px;line-height:1;padding:.22rem .4rem;vertical-align:middle;margin-left:.25rem}
.btn-mini:hover{border-color:#f87171;color:#f87171}
.btn-mini.demo:hover{border-color:#fb923c;color:#fb923c}
.btn-mini.danger{border-color:#7f1d1d;color:#f87171}
.btn-mini.danger:hover{border-color:#f87171;background:rgba(248,113,113,.12)}

/* Bauschlange-Badges neben den Box-Ueberschriften (Rohstoff-Produktion / Gebäude).
   Je Kategorie bis zu 2 Badges (aktiver Bau + wartender). Klick oeffnet ein
   kleines Popover mit Details + Abbrechen. */
.bq-badges{display:inline-flex;gap:.35rem;vertical-align:middle;margin-left:.5rem}
.bq-badge{position:relative;display:inline-block}
.bq-badge>summary{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
  list-style:none;padding:.15rem .45rem;border-radius:999px;font-size:.78rem;
  font-weight:600;font-variant-numeric:tabular-nums;border:1px solid var(--line2);
  background:var(--panel2);color:var(--muted);white-space:nowrap}
.bq-badge>summary::-webkit-details-marker{display:none}
.bq-badge>summary .ic{width:14px;height:14px}
.bq-badge.active>summary{border-color:var(--accent);color:var(--accent)}
.bq-badge.active>summary .ic{color:var(--accent)}
.bq-badge>summary:hover{border-color:var(--accent)}
.bq-badge[open]>summary{border-color:var(--accent)}
/* Klopfender Hammer am aktiven Bau-Badge (hinter der Zeit) */
.bq-hammer{width:15px;height:15px;flex:none;overflow:visible;color:var(--accent)}
.bq-swing{transform-box:view-box;transform-origin:46px 46px;
  animation:bq-swing .82s cubic-bezier(.5,0,.75,.35) infinite}
@keyframes bq-swing{
  0%,34%{transform:rotate(50deg)} 50%{transform:rotate(0deg)}
  58%{transform:rotate(6deg)} 66%{transform:rotate(0deg)} 100%{transform:rotate(50deg)}}
.bq-hit{transform-box:view-box;transform-origin:26px 53px;opacity:0;
  animation:bq-hit .82s linear infinite}
@keyframes bq-hit{
  0%,44%{opacity:0;transform:scale(.4)} 51%{opacity:1;transform:scale(1)}
  64%{opacity:0;transform:scale(1.5)} 100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .bq-swing{animation:none;transform:rotate(14deg)} .bq-hit{animation:none;opacity:0}}
.bq-pop{position:absolute;z-index:40;top:calc(100% + .4rem);right:0;min-width:210px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;box-shadow:0 10px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:.45rem}
.bq-pop-head{display:flex;align-items:center;gap:.4rem;font-weight:600}
.bq-pop-head .ic{width:18px;height:18px}
.bq-pop-name{font-size:.9rem}
.bq-pop-time{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--muted)}
.bq-pop-time .ic{width:13px;height:13px}
.bq-pop .btn-mini{margin-left:0;text-align:center}
@media(max-width:560px){.bq-pop{right:auto;left:0}}

/* Eingehende Angriffe - Alarm-Banner */
.alert-attack{border:1px solid #7f1d1d;background:linear-gradient(180deg,#2a1414,#1c1010);
  animation:atkpulse 2s ease-in-out infinite}
@keyframes atkpulse{0%,100%{border-color:#7f1d1d}50%{border-color:#ef4444}}
.alert-attack h3{color:#fca5a5;display:flex;align-items:center;gap:.5rem}
.alert-attack .atk-count{background:#ef4444;color:#fff;border-radius:999px;font-size:.75rem;
  padding:.05rem .5rem;font-weight:700}
.atk-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.atk-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;padding:.45rem .65rem;
  border-radius:7px;background:#1c1010;border:1px solid #3a1a1a;font-size:.9rem}
.atk-kind{font-weight:600;color:#fca5a5;min-width:110px}
.atk-eta{margin-left:auto;color:#fecaca}
.atk-eta .cd{font-variant-numeric:tabular-nums;font-weight:700}
@media (prefers-reduced-motion:reduce){.alert-attack{animation:none}}

/* Einklappbare Panels (Angriffe / eigene Bewegungen) */
details.panel>summary{list-style:none;cursor:pointer;font-weight:600;display:flex;
  align-items:center;gap:.5rem;flex-wrap:wrap}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
details.panel[open]>summary::before{transform:rotate(90deg)}
details.panel .atk-list,details.panel .mv-list,details.oasispanel .oasis-list{margin-top:.6rem}
.sum-hint{font-weight:400;font-size:.82rem}
.alert-attack>summary{color:#fca5a5}

/* Eigene Bewegungen */
.movepanel>summary{color:var(--txt)}
.mv-count{background:var(--panel2);border:1px solid var(--line2);color:var(--muted);
  border-radius:999px;font-size:.75rem;padding:.05rem .5rem;font-weight:700}
.mv-list{display:flex;flex-direction:column;gap:.3rem}
.mv-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;padding:.4rem .6rem;
  border-radius:7px;background:var(--panel2);border:1px solid var(--line2);font-size:.9rem}
.mv-row.mv-back{border-color:#2f5233}
.mv-kind{font-weight:600;min-width:110px}
.mv-row.mv-out .mv-kind{color:#93c5fd}
.mv-row.mv-back .mv-kind{color:#86efac}
.mv-eta{margin-left:auto;color:var(--muted)}
.mv-eta .cd{font-variant-numeric:tabular-nums}

/* "Max ausblenden"-Filter */
.hidemax-toggle{font-size:.78rem;font-weight:400;margin-left:.6rem;cursor:pointer}
.hidemax-toggle input{vertical-align:middle;margin-right:.2rem}
body.hide-maxed tr.bmax{display:none}

/* Gebäude per Drag & Drop anordnen */
.bld-grip{cursor:grab;color:var(--muted);margin-right:.4rem;user-select:none;
  font-size:.9rem;opacity:.55;display:inline-block}
.bld-grip:hover{opacity:1;color:var(--accent)}
.bld-grip:active{cursor:grabbing}
#bld-table tbody tr.dragging{opacity:.45;background:var(--panel2)}

/* Truppen-Tab: aufklappbare Ausbildungs-Kategorien */
details.unit-cat{border:1px solid var(--line);border-radius:9px;margin-bottom:.5rem}
details.unit-cat>summary{list-style:none;cursor:pointer;padding:.5rem .75rem;font-weight:600;
  display:flex;align-items:center;gap:.4rem}
details.unit-cat>summary::-webkit-details-marker{display:none}
details.unit-cat>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
details.unit-cat[open]>summary::before{transform:rotate(90deg)}
details.unit-cat[open]>summary{border-bottom:1px solid var(--line)}
details.unit-cat .tbl{margin:0}
details.unit-cat .tbl th{padding-top:.4rem}

/* Truppen in diesem Dorf: zarte Kategorie-Überschriften */
.troop-group{margin-bottom:.7rem}
.troop-cat{margin:.5rem 0 .1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:.2rem}

/* Att/Def gestapelt in der Ausbildungsliste */
.attdef{white-space:nowrap;line-height:1.2}
.attdef .ad-att,.attdef .ad-def{display:block;font-variant-numeric:tabular-nums}
.attdef .ad-att{color:#fca5a5}
.attdef .ad-def{color:#93c5fd}
.attdef-h,.akad-h{font-size:.72rem;white-space:nowrap}
/* Feste Spaltenbreiten -> Einheit schmal, Datenspalten einzeilig & über alle Kategorien bündig;
   Kosten ohne feste Breite nimmt den restlichen Platz auf (statt der Einheit-Spalte). */
details.unit-cat .tbl{table-layout:fixed;width:100%}
details.unit-cat .tbl th:first-child,details.unit-cat .tbl td:first-child{width:16rem;overflow:hidden;text-overflow:ellipsis}
details.unit-cat .tbl th.attdef-h,details.unit-cat .tbl td.attdef{width:7.5rem}
details.unit-cat .tbl th.akad-h,details.unit-cat .tbl td.akad{width:5.5rem;text-align:center}
details.unit-cat .tbl th:last-child,details.unit-cat .tbl td:last-child{width:6.5rem}
/* Kosten + Dauer auf einer gemeinsamen, vertikal zentrierten Linie (innerer Flex-
   Wrapper - die Zelle selbst bleibt table-cell, damit die Reihe mittig ausgerichtet bleibt;
   der Zeit-Chip ist sonst kein Flex-Element und kippt an der Textbasislinie ab). */
.tbl td.kosten .kd-line{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .2rem}
.tbl td.kosten .nowrap{display:inline-flex;align-items:center;gap:.25em;white-space:nowrap;margin-left:.15rem}
.tbl td.kosten .nowrap .ic{width:1.1em;height:1.1em}

/* Ausbildungs-Popup: Schieberegler + Live-Kosten (breiter, Kostenzeile bricht nicht um) */
#trainmodal .modal{min-width:600px;max-width:90vw}
/* ============================================================= *
 *  Nachrichten-Client (IGM) - 3-Spalten-Mailprogramm            *
 * ============================================================= */
.mailapp{display:grid;grid-template-columns:210px 320px 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;min-height:min(72vh,640px);max-height:78vh}
.mailapp>*{background:var(--panel);min-width:0}

/* --- Linke Spalte: Ordner + Adressbuch --- */
.mail-side{display:flex;flex-direction:column;gap:.7rem;padding:.8rem;overflow-y:auto}
.mail-new{width:100%;justify-content:center;font-weight:700}
.mail-folders{display:flex;flex-direction:column;gap:.15rem}
.mf{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:8px;
  color:var(--muted);text-decoration:none;font-size:.92rem}
.mf:hover{background:var(--panel2);color:var(--fg)}
.mf.active{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--fg);font-weight:600}
.mf-i{width:1.1em;text-align:center;opacity:.9}
.mf-c{margin-left:auto;font-size:.78rem;background:var(--panel2);color:var(--muted);
  padding:.05rem .45rem;border-radius:999px;min-width:1.4em;text-align:center}
.mf-c.badge{background:var(--accent);color:#1a1206;font-weight:700}
.mail-search{border-top:1px solid var(--line2);padding-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.ms-scope{display:flex;gap:.25rem}
.msc{flex:1;padding:.3rem .1rem;font-size:.78rem;background:var(--panel2);color:var(--muted);
  border:1px solid var(--line2);border-radius:6px;cursor:pointer}
.msc.active{background:var(--accent);color:#1a1206;border-color:var(--accent);font-weight:600}
#msearch{padding:.5rem .6rem;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line2);border-radius:8px;font:inherit;width:100%}
/* Trefferliste höhenbegrenzt + scrollend -> ein Klick/Tippen schiebt die Seite
   nie mehr nach unten, egal wie viele Spieler es gibt. */
.ms-results{display:flex;flex-direction:column;max-height:280px;overflow-y:auto}
.ms-hits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
.ms-hit{display:flex;align-items:center;gap:.45rem;padding:.3rem .4rem;border-radius:7px;
  text-decoration:none;color:var(--fg)}
.ms-hit:hover{background:var(--panel2)}
.conv-av,.th-av{flex:none;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:700;color:#1a1206;
  background:linear-gradient(135deg,var(--accent),#e0a03a)}
/* Such-Avatar bewusst klein/dezent (kein „bulliges" A/E vor jedem Namen). */
.ms-hit-av{flex:none;width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;
  font-size:.68rem;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line2)}
.ms-hit-main{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ms-hit-name{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-hit-sub{font-size:.72rem;color:var(--muted)}
.ms-star{color:var(--accent)}
.ms-empty,.ms-more{padding:.4rem .3rem 0;margin:0}
.ms-more{border-top:1px solid var(--line2);margin-top:.2rem;padding-top:.4rem;font-style:italic}

/* --- Mittlere Spalte: Konversationsliste --- */
.mail-list{overflow-y:auto}
.conv-list{list-style:none;margin:0;padding:0}
.conv{display:flex;align-items:center;gap:.6rem;padding:.65rem .7rem;text-decoration:none;
  color:var(--fg);border-bottom:1px solid var(--line2);position:relative}
.conv:hover{background:var(--panel2)}
.conv.active{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.conv.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.conv-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:.15rem}
.conv-top{display:flex;align-items:baseline;gap:.5rem}
.conv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap;flex:none}
.conv-prev{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-you{color:var(--muted);opacity:.8}
.conv.unread .conv-name{font-weight:800}
.conv.unread .conv-prev{color:var(--fg)}
.conv-badge{flex:none;background:var(--accent);color:#1a1206;font-weight:700;font-size:.72rem;
  border-radius:999px;min-width:1.4em;height:1.4em;padding:0 .35rem;display:grid;place-items:center}

/* --- Rechte Spalte: Thread --- */
.mail-thread{display:flex;flex-direction:column;min-height:0}
.th-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line2)}
.th-back{display:none;color:var(--muted);text-decoration:none;font-size:1.2rem;padding:.1rem .3rem}
.th-who{min-width:0;flex:1}
.th-name{font-weight:700}
.th-actions{display:flex;align-items:center;gap:.3rem}
.th-actions form{margin:0}
.th-star,.th-del{background:none;border:none;cursor:pointer;font-size:1.15rem;padding:.2rem .35rem;
  border-radius:7px;color:var(--muted);line-height:1}
.th-star:hover,.th-del:hover{background:var(--panel2)}
.th-star.on{color:var(--accent)}
.th-stream{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.bubble{max-width:78%;padding:.55rem .75rem;border-radius:14px;line-height:1.45}
.bubble.their{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:4px}
.bubble.mine{align-self:flex-end;background:color-mix(in srgb,var(--accent) 26%,var(--panel2));
  border-bottom-right-radius:4px}
.bub-subj{font-weight:700;font-size:.85rem;margin-bottom:.2rem}
.bub-body{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.bub-time{font-size:.68rem;color:var(--muted);margin-top:.25rem;text-align:right}
.th-fresh{margin:auto;text-align:center;padding:2rem 1rem}
.th-compose{border-top:1px solid var(--line2);padding:.6rem .7rem;display:flex;flex-direction:column;gap:.4rem;
  background:var(--panel)}
.th-subj{padding:.4rem .55rem;background:var(--panel2);color:var(--fg);border:1px solid var(--line2);
  border-radius:7px;font:inherit;font-size:.85rem}
.th-inputrow{display:flex;gap:.5rem;align-items:flex-end}
.th-compose textarea{flex:1;resize:vertical;min-height:2.6rem;max-height:9rem;padding:.5rem .6rem;
  background:var(--panel2);color:var(--fg);border:1px solid var(--line2);border-radius:8px;font:inherit}
.th-send{flex:none;white-space:nowrap}

/* --- Leerzustände --- */
.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.3rem;padding:2rem 1rem;height:100%;color:var(--fg)}
.mail-empty .me-ico{font-size:2.4rem;opacity:.6}
.mail-empty p{margin:0}

/* --- Schmal/Mobil: Spalten stapeln, Thread ersetzt die Liste --- */
@media(max-width:900px){
  .mailapp{grid-template-columns:1fr;max-height:none;min-height:0}
  .mail-side{flex-direction:column}
  .mail-thread{display:none}
  .th-back{display:inline-block}
  /* Offener Thread bekommt auf Mobil den vollen Fokus: Liste UND Seitenspalte
     weg, nur der Verlauf; der „←"-Knopf führt zurück zur Übersicht. */
  .mailapp[data-open] .mail-list,
  .mailapp[data-open] .mail-side{display:none}
  .mailapp[data-open] .mail-thread{display:flex;min-height:70vh}
  .th-stream{max-height:55vh}
}

/* Endgame */
.win-banner{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  border:1px solid var(--accent)}
.win-banner h2{margin-bottom:.3rem}
.ww-bar{height:14px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;
  overflow:hidden;margin-top:.5rem}
.ww-fill{height:100%;background:var(--accent);border-radius:8px 0 0 8px;transition:width .3s}
.eg-locked{margin-top:.6rem;padding:.6rem .8rem;border:1px dashed var(--line2);border-radius:8px;
  background:var(--panel2);font-size:.9rem}

/* Statistik / Rangliste */
.rank-panel .rank-tbl{width:100%}
.rank-tbl th.rk,.rank-tbl td.rk{width:2.5rem;text-align:right;color:var(--muted)}
.rank-tbl tr.me{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.rank-tbl tr.me td{font-weight:600}
.rank-tbl tr.rank-gap td{text-align:center;color:var(--muted);padding:.1rem}
.badge-ai{display:inline-block;font-size:.68rem;padding:.03rem .35rem;border-radius:5px;
  background:var(--line2);color:var(--muted);margin-left:.3rem;vertical-align:middle}

/* Handelsangebote am Marktplatz */
.offerform{display:flex;flex-direction:column;gap:.6rem}
.offer-line{display:flex;align-items:center;gap:.5rem}
.offer-lbl{min-width:3.2rem;color:var(--muted);font-size:.92rem}
.offer-line .qty{width:110px}
.offer-line select{padding:.35rem .5rem;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line2);border-radius:7px}
.offer-check{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem}
.badge-ally{display:inline-block;font-size:.72rem;padding:.05rem .4rem;border-radius:6px;
  background:var(--accent);color:#1a1205;font-weight:600;vertical-align:middle}
.small{font-size:.85rem}
.offer-tbl td{vertical-align:middle}
.tm-locrow{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .7rem}
.tm-locrow label{color:var(--muted);font-size:.92rem;white-space:nowrap}
.tm-locrow #tm-loc{flex:1;padding:.35rem .5rem;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line2);border-radius:7px}
.tm-qtyrow{display:flex;align-items:center;gap:.7rem;margin:.3rem 0 .8rem}
.tm-qtyrow #tm-range{flex:1;accent-color:var(--accent);cursor:pointer}
.tm-qtyrow #tm-num{width:80px}
.tm-cost{display:flex;flex-wrap:nowrap;gap:.6rem;justify-content:space-between;font-size:1.02rem;
  padding:.6rem .7rem;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;
  margin-bottom:.6rem;overflow-x:auto}
.tm-cost .ci{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}

/* Katapult-Zielwahl auf der Sende-Seite */
.catatarget{display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0;font-size:.9rem}
.catatarget select{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;
  padding:.4rem .55rem;color:var(--txt);max-width:320px}

/* ---- Senden ---- */
.sendform{max-width:560px}
.mkt-head{display:flex;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.mkt-row{display:block;margin-bottom:1rem;color:var(--muted)}
.mkt-row select{margin-left:.6rem;background:var(--bg);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.4rem .6rem}
.mkt-res{margin-bottom:1rem}
.sendkind{display:flex;gap:1.2rem;margin:1rem 0;flex-wrap:wrap}
.sendkind label{color:var(--muted)}
.back{display:inline-block;margin-left:1rem}

/* ---- Held ---- */
.hero-card{display:flex;flex-direction:column;gap:.9rem}
.hero-top{display:flex;align-items:center;gap:1rem}
.hero-emblem{font-size:2.6rem}
.hero-name{font-size:1.15rem;font-weight:700}
.hero-lvl{margin-left:auto;text-align:center;background:var(--panel2);border:1px solid var(--line2);
  border-radius:10px;padding:.35rem .7rem;font-size:.72rem;color:var(--muted)}
.hero-lvl b{font-size:1.5rem;color:var(--accent);display:block}
/* Helden-Porträt: quadratige Quelle wird rund beschnitten + einheitlicher Rahmen-Ring.
   Generator-Bilder duerfen beliebige Form/Rand haben - object-fit:cover normalisiert alles. */
.hero-portrait{width:72px;height:72px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  border:2px solid var(--accent);box-shadow:0 0 0 3px var(--panel2),var(--shadow);
  display:flex;align-items:center;justify-content:center;background:var(--panel2)}
.hero-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hero-portrait.emblem{font-size:2.2rem;color:var(--muted)}
/* Porträt + „Ändern"-Knopf darunter (Avatar-Popup öffnen) */
.hero-portrait-wrap{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:0 0 auto}
.hero-av-change{padding:.15rem .55rem;font-size:.72rem}
.hero-av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:.7rem;margin:.2rem 0 .8rem;max-height:52vh;overflow-y:auto;
  /* Innenabstand, damit der runde Auswahl-Ring (box-shadow) nicht am overflow-Rand
     zu einer geraden Kante geklippt wird. */
  padding:.5rem}
.hero-av{position:relative;cursor:pointer;display:block}
.hero-av input{position:absolute;opacity:0;width:0;height:0}
.hero-av img,.hero-av-none{width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;
  display:flex;align-items:center;justify-content:center;background:var(--panel2);
  border:2px solid var(--line2);box-sizing:border-box;transition:border-color .12s}
.hero-av-none{font-size:1.6rem;color:var(--muted)}
.hero-av:hover img,.hero-av:hover .hero-av-none{border-color:var(--muted)}
.hero-av.sel img,.hero-av.sel .hero-av-none,
.hero-av:has(input:checked) img,.hero-av:has(input:checked) .hero-av-none{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--panel2),0 0 0 4px var(--accent)}
.hero-av-cap{display:block;text-align:center;font-size:.7rem;color:var(--muted);margin-top:.15rem}
.hero-status{font-size:.85rem;margin-top:.2rem;font-weight:600}
.hs-home{color:var(--good)} .hs-marching{color:var(--info)} .hs-dead{color:var(--bad)}
.hero-bar-row{display:flex;align-items:center;gap:.7rem;font-size:.85rem}
.hero-bar-row>span:first-child{width:90px;color:var(--muted)}
.track.big{flex:1;height:12px}
.fillbar.hp{background:linear-gradient(90deg,var(--bad),var(--good))}
.fillbar.xp{background:var(--cult)}
.mono{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted);min-width:90px;text-align:right}
.small{font-size:.8rem}
.skillform{display:inline-flex;gap:.35rem;align-items:center}
.skillform .qty{width:56px}
.promoteform,.revive{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.promoteform select{background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:8px;padding:.5rem .6rem}
.herocheck{display:block;margin:.4rem 0 .9rem;color:var(--accent);font-weight:600;cursor:pointer}
.herocheck .muted{font-weight:400}

/* ---- Berichte ---- */
/* ---- Berichte: Filter-Toolbar + Pagination ---- */
.reports-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  margin-bottom:.8rem}
.rt-cats{display:flex;flex-wrap:wrap;gap:.35rem}
.rt-cat{display:inline-flex;align-items:center;gap:.3em;background:var(--panel);color:var(--muted);
  border:1px solid var(--line2);border-radius:999px;padding:.32rem .8rem;font-size:.82rem;
  font-weight:600;cursor:pointer;line-height:1}
.rt-cat .ic{width:.95em;height:.95em}
.rt-cat:hover{background:var(--panel2);color:var(--txt)}
.rt-cat.is-active{background:color-mix(in srgb, var(--accent) 15%, var(--panel));color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line2))}
.rt-search{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;
  padding:.4rem .7rem;font-size:.88rem;min-width:200px;flex:1;max-width:260px}
.rt-search:focus{outline:none;border-color:var(--accent)}
.reports-empty{text-align:center;padding:1.4rem 0}
.reports-pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.rp-info{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.reports-pager .btn-sm:disabled{opacity:.4;cursor:default}
.rp-cap{text-align:center;font-size:.8rem;margin-top:.6rem}
/* ---- Handels-Bericht ---- */
.rd-trade .rd-tradeline{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.3rem 0}
.rd-tl-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);
  min-width:5.5em}
.rd-tl-lbl.rd-in{color:var(--good)}
.reports{display:flex;flex-direction:column;gap:.7rem}
.report{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--dim);
  border-radius:9px;padding:.8rem 1rem}
.report.r-battle,.report.r-attack{border-left-color:var(--bad)}
.report.r-raid{border-left-color:var(--accent)}
.report.r-trade,.report.r-arrival{border-left-color:var(--good)}
.r-head{display:flex;justify-content:space-between;margin-bottom:.2rem}
.r-subj{font-weight:700}
.r-kind{color:var(--dim);font-size:.72rem;text-transform:uppercase}
.r-ago{color:var(--dim);font-size:.72rem}
.r-body{color:var(--muted);font-size:.9rem}

/* ---- Detaillierte Berichte ---- */
.r-detail{font-size:.9rem}
.r-detail p{margin:.25rem 0}
.rd-lead{color:var(--fg);font-size:.95rem}
.rd-tag{background:var(--panel2,#00000022);border:1px solid var(--line);border-radius:8px;
  padding:0 .4rem;font-size:.72rem;color:var(--muted);margin-left:.3rem}
.rd-eff{color:var(--muted)}
.rd-next{font-size:.85rem}
.rd-gain strong.rd-up{color:var(--good)} .rd-gain strong.rd-l{color:var(--bad)}
.rd-unlock{color:var(--good)}
.rd-loss,.rd-kill{color:var(--bad)}
.rd-resline,.rd-loot{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.rd-r{display:inline-flex;align-items:center;gap:.25em;font-variant-numeric:tabular-nums;font-weight:600}
.rd-r .ic{width:1em;height:1em;vertical-align:-.12em}
.rd-cols{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:.4rem}
.rd-cols>div{flex:1;min-width:180px}
.rd-h{font-size:.72rem;text-transform:uppercase;color:var(--dim);margin-bottom:.2rem;
  border-bottom:1px solid var(--line);padding-bottom:.15rem}
.rd-list{list-style:none;margin:0;padding:0;font-size:.88rem}
.rd-list li{padding:.05rem 0}
.rd-units{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}
.rd-units th{text-align:right;color:var(--dim);font-weight:500;font-size:.72rem;padding:.1rem .3rem}
.rd-units th:first-child{text-align:left}
.rd-units td{text-align:right;padding:.1rem .3rem;border-top:1px solid var(--line)}
.rd-units td:first-child{text-align:left}
.rd-units td.rd-l{color:var(--bad)}
.rd-power{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.3rem 0;font-size:.9rem}
.rd-power span{display:inline-flex;align-items:center;gap:.3em}
.rd-power .i-att{color:#fca5a5}
.rd-power .i-def{color:#93c5fd}
.rd-banner{display:inline-block;font-weight:700;border-radius:6px;padding:.1rem .5rem;font-size:.85rem}
.rd-banner.win{background:#14301f;color:#86efac}
.rd-banner.loss{background:#301414;color:#fca5a5}
.rd-siege,.rd-trap{color:var(--accent)}

/* ---- Rohstoff-Icons ---- */
.ic{width:1em;height:1em;vertical-align:-0.14em;fill:currentColor}
.ci{display:inline-flex;align-items:center;gap:.12em;margin-right:.55em;
  font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.ci:last-child{margin-right:0}
.ci.short{color:var(--bad);font-weight:600}
.ci.ico{margin-right:.3em}
.ci.ico .ic{width:1.15em;height:1.15em}
.ic-wood{color:var(--wood)} .ic-clay{color:var(--clay)}
.ic-iron{color:var(--iron)} .ic-crop{color:var(--crop)}
.costline{display:inline-flex;flex-wrap:wrap;gap:.05em;align-items:center}
.res-name{display:inline-flex;align-items:center;gap:.25em}
.res-name .ic{width:1.1em;height:1.1em}

/* ---- Akkordeon (Rohstofffelder) ---- */
details.acc{border:1px solid var(--line);border-radius:9px;margin-bottom:.5rem;
  background:var(--panel2);overflow:hidden}
details.acc>summary{list-style:none;cursor:pointer;padding:.55rem .8rem;
  display:flex;align-items:center;gap:.4rem;font-weight:600;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary:hover{background:var(--panel)}
details.acc[open]>summary{border-bottom:1px solid var(--line)}
.caret{color:var(--dim);transition:transform .18s;display:inline-block}
details.acc[open] .caret{transform:rotate(90deg)}
.acc-title{font-weight:700}
.acc-sum{margin-left:auto;color:var(--muted);font-size:.78rem;font-weight:400}
.acc-body{padding:.2rem .5rem .35rem}
.acc-body .tbl td{border-bottom:1px solid var(--line)}
.acc-body .tbl tr:last-child td{border-bottom:none}
/* Feste Spaltenbreiten: Stufe/Produktion/Aktion bleiben untereinander,
   egal ob eine Zeile gerade ausgebaut wird (das "→ N" die Zelle breiter macht). */
.acc-body .tbl{table-layout:fixed}
.acc-body .tbl .lvl{width:9.5rem}
.acc-body .tbl .prodcol{width:5rem}

/* ---- Floating-Panel-Basis (genutzt vom Funktions-Dock) ---- */
.floatpanel{position:fixed;top:92px;right:22px;width:248px;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);z-index:40}
.fp-head{padding:.5rem .8rem;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:12px 12px 0 0;cursor:move;font-weight:700;font-size:.85rem;
  display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.fp-grip{color:var(--dim);letter-spacing:-2px}
.fp-body{padding:.5rem .8rem;display:flex;flex-direction:column;gap:.4rem;max-height:60vh;overflow:auto}
@media(max-width:900px){.floatpanel{position:static;width:auto;margin-bottom:1.2rem}
  .fp-head{cursor:default}}

/* ---- Floating Funktions-Dock (Gebäude-Funktionen) ---- */
/* Standard oben links, eingeklappt (kleiner Footprint).
   Frei verschiebbar + auf/zu, beides pro Browser gemerkt. */
#funcdock{left:22px;right:auto;top:92px;width:184px;z-index:41}
#funcdock .fp-body{padding:.4rem;gap:.12rem}
#funcdock .fp-body a{display:flex;align-items:center;gap:.55rem;padding:.42rem .55rem;
  border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem}
#funcdock .fp-body a:hover{background:var(--panel2);color:var(--txt)}
#funcdock .fp-body a.active{background:var(--panel2);color:var(--accent)}
.fd-ic{width:1.25rem;text-align:center;flex:0 0 auto}
.fd-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Submenü-Punkte (z.B. unter Dorf-Einheiten): eingerückt + etwas dezenter. */
#funcdock .fp-body a.fd-sub{padding-left:1.4rem;font-size:.82rem;font-weight:500}
#funcdock .fp-body a.fd-sub .fd-ic{opacity:.6;font-size:.85rem}
.fd-toggle{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;
  line-height:1;padding:0 .15rem}
.fd-toggle:hover{color:var(--accent)}
#funcdock.collapsed .fp-body{display:none}
#funcdock.collapsed .fp-head{border-radius:12px;border-bottom:none}
#funcdock.collapsed{width:auto}
@media(max-width:900px){#funcdock{margin-top:0}}
/* Gesperrte Dock-Punkte: ausgegraut + Hinweis, welches Gebäude erst nötig ist. */
#funcdock .fp-body .fd-locked{display:flex;flex-direction:column;padding:.42rem .55rem;
  border-radius:8px;color:var(--dim);font-weight:600;font-size:.9rem;cursor:not-allowed;opacity:.75}
/* Icon + Label bleiben in EINER Zeile (sonst rutscht das Label unters Emoji). */
.fd-top{display:flex;align-items:center;gap:.55rem}
#funcdock .fp-body .fd-locked .fd-ic{opacity:.5}
.fd-hint{font-size:.68rem;font-weight:500;color:var(--dim);margin-left:1.8rem;margin-top:.05rem}

/* ---- Dorfkopf-Statusanzeigen (rechts, über Kultur): Feier + 3 Oasen-Plätze ---- */
.vh-badges{display:flex;align-items:center;gap:.5rem}
.vh-badge{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line2);font-size:1.1rem;
  text-decoration:none;box-shadow:0 0 0 0 var(--accent)}
.celeb-badge{animation:celebpulse 1.8s ease-in-out infinite}
@keyframes celebpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  50%{box-shadow:0 0 0 6px transparent}}
.vh-oases{display:inline-flex;gap:.25rem;text-decoration:none}
.oas-dot{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;
  border-radius:50%;border:1px solid var(--line2);font-size:.95rem;line-height:1}
.oas-dot.on{background:color-mix(in srgb,var(--good,#3ba55d) 28%,var(--panel));filter:none}
.oas-dot.off{background:var(--panel2);filter:grayscale(1);opacity:.4}

/* ---- Rathaus-Seite: Feier-Karten ---- */
.celeb-cards{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem}
.celeb-card{flex:1;min-width:210px;border:1px solid var(--line2);border-radius:10px;padding:.8rem;
  background:var(--panel2);display:flex;flex-direction:column;gap:.45rem}
.celeb-card.locked{opacity:.6}
.cc-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.cc-name{font-weight:700}
.cc-cp{color:var(--cult);font-weight:600;white-space:nowrap}
.celeb-active{margin-bottom:.6rem;padding:.5rem .7rem;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line2)}
.oasis-bon{display:inline-block;font-size:.82rem;color:var(--muted);white-space:nowrap}
.oasis-free{color:var(--good);font-weight:600}
.oasis-owner{color:var(--txt)}

/* ---- Schmiede / Rüstkammer ---- */
.smithy-head{display:flex;gap:1.4rem;flex-wrap:wrap}
.sh-item{font-size:.92rem}
.research{border-left:3px solid var(--info)}
.smithy-tbl td{vertical-align:top}
.smithy-tbl .uname{font-weight:600;white-space:nowrap}
.upval{font-size:.82rem;color:var(--muted);margin-bottom:.28rem}
.upval strong{color:var(--txt)}
.upval .arrow{color:var(--dim);margin:0 .12rem}
.upval .ic{width:14px;height:14px;vertical-align:-.15em;margin-right:.15rem}
/* Angriffs-/Verteidigungs-Symbole (rot/blau) wie in der Akademie. */
.att-ic{color:#fca5a5}
.def-ic{color:#93c5fd}
.att-val{color:#fca5a5 !important}
.def-val{color:#93c5fd !important}
.lvltag{display:inline-block;margin-left:.35rem;font-size:.68rem;color:var(--dim);
  border:1px solid var(--line2);border-radius:6px;padding:0 .32rem}
.upform{display:flex;flex-direction:column;gap:.18rem;align-items:flex-start}
.upcost{font-size:.72rem;display:flex;align-items:center;gap:.4rem}
.upcost .costline .ci{margin-right:.3rem}
.badge-max{font-size:.7rem;color:var(--good);border:1px solid var(--line2);
  border-radius:6px;padding:.05rem .4rem}
/* ---- Akademie / Forschung ---- */
.locked-row{opacity:.7}
.locked-row td:first-child{color:var(--muted)}
.lockbtn{text-decoration:none;display:inline-block}
.done-row{opacity:.75}
.done-row .badge{background:var(--good)}
.small{font-size:.76rem;margin-top:.8rem}
.small code{background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:.05rem .3rem;font-size:.72rem}

/* ---- Übersicht ---- */
.mv-tbl td{padding:.35rem .5rem;font-size:.85rem}
.mv-tbl tr.danger td{background:rgba(248,113,113,.12)}
.mv-tbl tr.danger td:first-child{color:var(--bad);font-weight:700}
.ov-villages{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}
.ov-vil{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem}
.ov-vil-head{margin-bottom:.35rem}
.ov-troops{list-style:none;margin:0;padding:0;font-size:.85rem}
.ov-troops li{padding:.1rem 0;border-bottom:1px solid var(--line)}
.ov-troops li:last-child{border-bottom:none}
.ov-troops li.reinf{color:var(--info)}
.ov-grand{display:flex;flex-wrap:wrap;gap:.35rem}
.chip-count{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
  padding:.15rem .5rem;font-size:.8rem}

/* ---- Truppen verschieben / zusammenziehen ---- */
.ov-move-btn{margin-left:.4rem;vertical-align:middle}
.gather-row{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .5rem}
.gather-row select{background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:6px;padding:.3rem .45rem}
.gather-preview{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}
.gather-line{padding:.1rem 0}
.mv-torow{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.mv-torow select{flex:1;background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:6px;padding:.35rem .45rem}
.mv-units{width:100%;margin-bottom:.5rem}
.mv-units td{padding:.25rem .3rem}
.mv-dur{margin:.2rem 0 .4rem;font-size:.9rem}

/* ---- Dorf umbenennen ---- */
.rename-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;
  padding:.1rem .3rem;border-radius:6px;vertical-align:middle}
.rename-btn:hover{color:var(--accent);background:var(--panel2)}
.rename-form{display:none;gap:.4rem;margin-top:.5rem;align-items:center}
.rename-form.show{display:flex}
.rename-input{background:var(--bg);color:var(--txt);border:1px solid var(--line2);
  border-radius:7px;padding:.35rem .55rem;font-size:.95rem;min-width:220px}
.rename-input:focus{outline:none;border-color:var(--accent)}

/* ---- Rohstoff-ETA "Voll in ..." ---- */
.res-eta{font-size:.7rem;color:var(--muted);margin-top:.25rem;min-height:.9rem;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.res-eta.warn{color:var(--accent)}

/* ---- Produktions-Spalte in der Feldtabelle ---- */
.prodcol{color:var(--good);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Berichte: Löschen ---- */
.r-meta{display:flex;align-items:center;gap:.6rem}
.r-del-form{display:inline}
.r-del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem;
  line-height:1;padding:.1rem .3rem;border-radius:5px}
.r-del:hover{color:var(--bad);background:var(--panel2)}
.report.r-scout{border-left-color:var(--info)}

/* ---- Bau-Aktionszelle: Status + Button nebeneinander ---- */
.nowrap{white-space:nowrap}
.nowrap .bstat{margin-right:.4rem}

/* ---- Generischer Bestätigungsdialog ---- */
.cm-msg{color:var(--muted);font-size:.92rem;margin-bottom:.3rem;line-height:1.5}
.btn.danger{background:linear-gradient(180deg,#f87171,#dc2626);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}

/* ---- Sekundär-/Abbrechen-Buttons: echter Button-Look, neutral statt farbig ---- */
/* .btn-ghost wurde teils allein (ohne .btn) genutzt -> hier vollständig definieren. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--panel2);color:var(--txt);border:1px solid var(--line2);
  border-radius:9px;padding:.6rem 1.2rem;font-weight:600;font-size:.95rem;
  cursor:pointer;box-shadow:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--panel);filter:none}
/* Kleine Variante (neben .btn-sm, z.B. im Umbenennen-Formular) */
.btn-sm.btn-ghost{border-radius:7px;padding:.28rem .6rem;font-size:.8rem}
.btn-ghost.danger{border-color:#7f1d1d;color:#fca5a5}
.btn-ghost.danger:hover{border-color:var(--bad);color:var(--bad);background:rgba(248,113,113,.08)}

/* ---- Allianz ---- */
.ally-tag{color:var(--accent);font-weight:700;text-decoration:none}
.ally-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:.6rem;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.ally-name{font-size:1.3rem;font-weight:700}
.ally-tagbig{color:var(--accent);font-weight:700;margin-left:.4rem}
.ally-manage{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.ally-inviteform,.ally-createform{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.4rem 0}
.ally-createform label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--muted)}
.ally-inviteform input,.ally-createform input{background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.42rem .6rem;font-size:.9rem}
.ally-inviteform input:focus,.ally-createform input:focus{outline:none;border-color:var(--accent)}
.ally-actions{margin-top:1.2rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.ally-diplo{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.diplo-sub{margin:.9rem 0 .3rem;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.diplo-badge{display:inline-block;font-size:.72rem;font-weight:700;border-radius:6px;padding:.05rem .45rem;margin-right:.3rem}
.diplo-confed{background:rgba(74,222,128,.18);color:var(--good)}
.diplo-nap{background:rgba(96,165,250,.18);color:var(--info)}
.diplo-war{background:rgba(248,113,113,.18);color:var(--bad)}
.diplo-form select{background:var(--bg2);color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:.42rem .5rem;font-size:.9rem}

/* ---- Allianz: Rechte, Markierung, Profil, Rundnachricht ---- */
.right-badge{display:inline-block;font-size:.68rem;background:var(--panel2);color:var(--muted);
  border:1px solid var(--line2);border-radius:5px;padding:.02rem .35rem;margin:.05rem .1rem;white-space:nowrap}
.spec-badge{display:inline-block;font-size:.7rem;font-weight:700;border-radius:6px;padding:.05rem .45rem}
.spec-off{background:rgba(248,113,113,.18);color:var(--bad)}
.spec-def{background:rgba(96,165,250,.18);color:var(--info)}
.ally-editrow>td{padding-top:0;border-top:none}
.ally-editrow details{margin:.1rem 0 .5rem}
.ally-editrow summary{cursor:pointer;user-select:none}
.ally-edit{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-end;margin-top:.5rem;
  padding:.6rem;background:var(--bg2);border:1px solid var(--line);border-radius:8px}
.ally-edit form{display:flex;flex-direction:column;gap:.5rem}
.rchk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.2rem .8rem}
.rchk{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--txt)}
.ally-edit select{background:var(--bg2);color:var(--txt);border:1px solid var(--line2);border-radius:7px;padding:.3rem .45rem}
.ally-edit label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--muted)}
.ally-toolbar{margin:.8rem 0}
.ally-toolbar .btn-sm{text-decoration:none;display:inline-block}
.ally-profile,.ally-massmail{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.ally-desc{white-space:pre-wrap;color:var(--muted)}
.ally-app textarea{width:100%;background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.5rem;font:inherit;resize:vertical;margin-bottom:.5rem}
.mail-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.5rem}
.mail-row select,.mail-row input{background:var(--bg2);color:var(--txt);border:1px solid var(--line2);
  border-radius:8px;padding:.42rem .5rem;font-size:.9rem}
.mail-row input{flex:1;min-width:180px}

/* ---- Allianz-Forum ---- */
.forum-newthread,.forum-reply{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0;align-items:flex-start}
.forum-newthread input,.forum-newthread textarea,.forum-reply textarea{width:100%;background:var(--bg2);
  color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:.5rem;font:inherit;resize:vertical}
.forum-threadbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;
  padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--line)}
.forum-threadbtns{display:flex;gap:.4rem}
.forum-post{padding:.7rem 0;border-bottom:1px solid var(--line)}
.forum-post-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.forum-post-body{white-space:pre-wrap;color:var(--txt);line-height:1.5}
.forum-reply{margin-top:1rem}

/* ---- Aufgaben / Quests ---- */
.badge-ok{background:var(--good);color:#0c2a17}
.quest-card{border-left:3px solid var(--accent)}
.quest-top{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.quest-step{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);
  border:1px solid var(--line2);border-radius:6px;padding:.1rem .45rem}
.quest-top h3{margin:0}
.quest-desc{color:var(--muted);margin:.5rem 0 .9rem}
.quest-progress{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.qp-bar{flex:1;height:9px;background:var(--bg2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.qp-fill{height:100%;background:var(--accent);transition:width .3s}
.qp-fill.done{background:var(--good)}
.qp-txt{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;color:var(--muted)}
.quest-reward{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin-bottom:1rem}
.qr-label{color:var(--muted);font-size:.9rem}
.quest-donelist{list-style:none;margin:.6rem 0 0;padding:0;columns:2;color:var(--muted);font-size:.9rem}
.quest-donelist li{padding:.15rem 0}
.quest-alldone{font-size:1.05rem}
/* Mehrere gleichzeitig aktive Aufgaben nebeneinander (gleitendes Fenster). */
.quest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:.4rem 0 1.2rem}
.quest-grid .quest-card{margin:0;display:flex;flex-direction:column}
.quest-grid .quest-card form{margin-top:auto}
.quest-card.quest-ready{border-left-color:var(--good)}
/* Warnung: Lager zu klein für die Belohnung. */
.quest-warn{border-left:3px solid var(--warn,#d9a441)}
.quest-warn h3{margin:0 0 .5rem}
.quest-warn-lead{color:var(--muted);margin:.2rem 0 .8rem}
.quest-warn-tab{border-collapse:collapse;margin:.4rem 0 .8rem;font-size:.9rem}
.quest-warn-tab th{color:var(--dim);font-weight:600;padding:.2rem .7rem;text-align:left}
.quest-warn-tab td{padding:.2rem .7rem;font-variant-numeric:tabular-nums}
.quest-warn-tab .right,.quest-warn-tab th.right{text-align:right}
.quest-warn-tab .loss{color:var(--bad);font-weight:700}
.quest-warn-total{color:var(--muted);margin:.2rem 0 1rem}
.quest-warn-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.btn-warn{background:var(--warn,#d9a441);color:#231a06}

/* ---- Anfängerschutz-Banner ---- */
.protbar{position:relative;padding-right:2.6rem;
  border-left:3px solid var(--good);background:linear-gradient(90deg,rgba(74,222,128,.08),transparent);
  font-size:.92rem;line-height:1.5}
.protbar .muted{display:block;margin-top:.25rem;font-size:.82rem}
.protbar .prot-bonus{display:block;margin-top:.25rem;color:var(--good)}
.protbar .prot-warn{display:block;margin-top:.35rem;color:var(--accent);font-size:.86rem}
.protbar .prot-warn .ic{width:15px;height:15px;vertical-align:-2px;margin-right:.15rem}
.protbar .prot-warn b{color:var(--crop)}
.protbar-x{position:absolute;top:.7rem;right:.8rem;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:1rem;line-height:1;padding:.15rem .35rem;border-radius:6px}
.protbar-x:hover{color:var(--txt);background:var(--panel2)}
/* Kleiner Chip hinter dem Dorfnamen (nur sichtbar, wenn Banner geschlossen). */
.prot-chip{display:none;align-items:center;gap:.3rem;vertical-align:middle;margin-left:.4rem;
  background:var(--panel2);border:1px solid var(--line2);color:var(--good);cursor:pointer;
  font-size:.8rem;font-weight:600;padding:.15rem .55rem;border-radius:999px}
.prot-chip:hover{border-color:var(--good)}
body.prot-collapsed .protbar{display:none}
body.prot-collapsed .prot-chip{display:inline-flex}

/* ============================ Admin-Backend ============================ */
.admin-dot{margin-left:.5rem;font-size:1rem;filter:grayscale(.2);opacity:.85}
.admin-dot:hover,.admin-dot.active{opacity:1;filter:none}
.imp-banner{background:linear-gradient(180deg,#3a2d10,#2a2109);border-bottom:1px solid var(--accent2);
  color:var(--accent);padding:.5rem 1rem;text-align:center;font-size:.9rem}
.imp-banner a{margin-left:.6rem;text-decoration:underline}
/* Sitter-Banner: bläulicher Ton, klar unterscheidbar von der Impersonation. */
.imp-banner.sit-banner{background:linear-gradient(180deg,#14314f,#0f2438);
  border-bottom-color:#3b82f6;color:#bfdbfe}

/* ---- Sitter / Kontobetreuung (Einstellungen) ---- */
.sitter-box{grid-column:1 / -1}
.sitter-section{margin-top:.9rem}
.sitter-section .set-label{margin-bottom:.45rem}
.sitter-card{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;margin-bottom:.5rem}
.sitter-av{width:40px;height:40px;border-radius:9px;flex:0 0 auto;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  background:var(--panel);color:var(--accent);border:1px solid var(--line2)}
.sitter-av img{width:40px;height:40px;object-fit:cover;border-radius:9px}
.sitter-meta{flex:1;min-width:180px}
.sitter-name{font-weight:600;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.sitter-name a{color:var(--txt);text-decoration:none}
.sitter-name a:hover{color:var(--accent)}
.sitter-badge{font-size:.72rem;padding:.08rem .45rem;border-radius:999px;font-weight:700}
.sitter-badge.active{background:rgba(52,211,153,.15);color:#6ee7b7}
.sitter-badge.pending{background:rgba(251,191,36,.15);color:#fcd34d}
.sitter-rights{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.28rem}
.sitter-chip{font-size:.7rem;padding:.06rem .42rem;border-radius:6px;
  background:var(--panel);border:1px solid var(--line2);color:var(--muted)}
.sitter-chip.on{color:var(--accent);border-color:var(--accent2)}
.sitter-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.sitter-actions form{margin:0}
.sitter-rights-edit{flex-basis:100%}
.sitter-rights-edit.show{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.3rem}
.set-toggle.small{font-weight:500;font-size:.9rem}
.sitter-add-form{display:flex;flex-direction:column;gap:.55rem;min-width:min(420px,80vw)}
.sitter-add-form input[type=text]{background:var(--panel);color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;font-size:1rem}
.sitter-loglink{margin-top:.5rem}
.sitter-log{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.sitter-log li{display:flex;gap:.5rem;align-items:baseline;padding:.32rem 0;
  border-bottom:1px solid var(--line)}
.sitter-log .sl-name{font-weight:600}
.sitter-log .sl-ago{margin-left:auto}
.sitter-defaults{display:flex;flex-direction:column;gap:.4rem}
.um-sitter-alert .um-rlbl strong{color:var(--accent)}

/* Masonry: die Panels fließen in bis zu 2 balancierte Spalten (statt starres Raster
   mit klaffenden Lücken neben hohen Panels). break-inside hält jedes Panel zusammen. */
.admin-masonry{columns:2 340px;column-gap:1.2rem;margin-bottom:1.2rem}
.admin-masonry .panel{break-inside:avoid;-webkit-column-break-inside:avoid}
.admin-masonry .panel h3,.admin-log-panel h3{margin:0 0 .6rem}
.admin-log-panel{margin-top:0}
/* Bot-Status-Plakette im Admin-Bot-Tab */
.bot-status{font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;
  vertical-align:middle;margin-left:.4rem;background:var(--bg2);color:var(--muted);border:1px solid var(--line2)}
.bot-status.bot-active{background:rgba(74,222,128,.14);color:#4ade80;border-color:transparent}
.bot-status.bot-inactive{background:rgba(148,163,184,.14);color:var(--muted);border-color:transparent}
.bot-status.bot-failed{background:rgba(248,113,113,.14);color:#fca5a5;border-color:transparent}
.bot-cmd{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;
  padding:.5rem .65rem;margin-top:.35rem;user-select:all;overflow-x:auto;white-space:nowrap}

/* Datenbank-Konsole (Tabellen-Browser mit Inline-Editor) */
.admin-db-panel{margin-top:0}
/* Titel + Untertitel/Zähler auf eine gemeinsame Grundlinie (statt center, das die
   kleinere Span durch abweichende Zeilenhöhe ~7px tiefer setzt). `details` voran,
   damit die Regel die globale details.panel>summary{align-items:center} überstimmt. */
details.admin-db-panel>summary,details.admin-log-panel>summary{align-items:baseline}
.admin-db-panel>summary{margin-bottom:.6rem}
.db-form{margin:.4rem 0 .8rem}
.db-form textarea{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.5rem .6rem;resize:vertical;
  font-size:.85rem;margin:.25rem 0 .5rem}
.db-err{color:var(--bad);font-weight:600}
.db-scroll{overflow:auto;max-height:30rem;border:1px solid var(--line);
  border-radius:8px;margin:.4rem 0}
.db-result{width:100%;border-collapse:collapse;white-space:nowrap}
.db-result th,.db-result td{padding:.3rem .55rem;text-align:left;border-bottom:1px solid var(--line)}
.db-result thead th{position:sticky;top:0;background:var(--panel);
  color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}
.db-result tbody tr:hover{background:var(--bg2)}
.db-editor{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.6rem}
.db-editor>summary{cursor:pointer;font-weight:600;margin-bottom:.4rem}

/* Browser-Leiste */
.db-browser-bar{margin:.3rem 0 .2rem}
.db-browser-bar input[type=text],.db-browser-bar input[id=db-where]{background:var(--bg2);
  color:var(--txt);border:1px solid var(--line2);border-radius:8px;padding:.4rem .6rem;
  flex:1 1 14rem;min-width:0}
#db-where{background:var(--bg2);color:var(--txt);border:1px solid var(--line2);
  border-radius:8px;padding:.4rem .6rem;flex:1 1 14rem;min-width:0}
#db-limit{width:6rem;background:var(--bg2);color:var(--txt);border:1px solid var(--line2);
  border-radius:8px;padding:.4rem .6rem}
.db-arm{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--accent);
  font-weight:600;cursor:pointer;white-space:nowrap}
.db-hint{margin:.2rem 0 .5rem}

/* Editierbares Raster */
.db-grid-table{border-collapse:collapse;white-space:nowrap;font-size:.85rem}
.db-grid-table th,.db-grid-table td{padding:.28rem .55rem;text-align:left;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.db-grid-table thead th{position:sticky;top:0;z-index:1;background:var(--panel);color:var(--muted);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
.db-grid-table tbody tr:hover{background:var(--bg2)}
.db-rid{color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem}
.db-cell{font-family:ui-monospace,Menlo,Consolas,monospace;max-width:22rem;overflow:hidden;
  text-overflow:ellipsis}
.db-cell.locked{color:var(--muted);opacity:.7}
.nullmark{color:var(--muted);opacity:.6}
/* Nur im scharfgeschalteten Raster signalisieren editierbare Zellen Klickbarkeit */
.db-scroll.armed .db-cell:not(.locked){cursor:cell}
.db-scroll.armed .db-cell:not(.locked):hover{background:rgba(255,196,84,.12);
  box-shadow:inset 0 0 0 1px var(--accent)}
.db-cell.saving{opacity:.5}
.db-cell.flash-ok{background:rgba(52,199,120,.28)!important}
.db-cell.flash-bad{background:rgba(248,113,113,.28)!important}
.db-cell-input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--txt);
  border:1px solid var(--accent);border-radius:5px;padding:.2rem .35rem;font-size:.85rem;
  font-family:ui-monospace,Menlo,Consolas,monospace}

/* Tester-/Zugangs-Panel */
.access-group{margin:.6rem 0}
.access-group+.access-group{border-top:1px solid var(--line);padding-top:.6rem}
.access-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem 0;flex-wrap:wrap}
.access-item+.access-item{border-top:1px solid var(--line)}
.access-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.access-add{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .3rem}
.access-add input[type=text]{background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.4rem .6rem;flex:1 1 8rem;min-width:0}

.row-inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.row-inline select,.row-inline input[type=number]{background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:8px;padding:.4rem .6rem}
.row-inline input[type=file]{color:var(--muted);font-size:.85rem;max-width:100%}

.btn-ok{background:linear-gradient(180deg,var(--good),#22a55a);color:#06230f;border:none;
  border-radius:9px;padding:.45rem .9rem;font-weight:700;cursor:pointer}
.btn-danger{background:linear-gradient(180deg,var(--bad),#c23b3b);color:#2a0808;border:none;
  border-radius:9px;padding:.55rem 1.1rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn-danger:hover{filter:brightness(1.08)}
.hero-dismiss{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.hero-dismiss .dismissform{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.warn-text{color:var(--accent)}

/* Getreide-Bilanz-Popup */
.res-name{position:relative}
.resinfo-btn{position:absolute;left:100%;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;border:1px solid var(--line2);background:var(--panel2);color:var(--muted);
  font-size:11px;font-style:italic;font-family:Georgia,serif;line-height:1;cursor:pointer;
  vertical-align:middle;padding:0;margin-left:.3em}
.resinfo-btn:hover{border-color:var(--accent);color:var(--accent)}
.cropmodal{max-width:420px}
.cropmodal-ico{width:22px;height:22px;color:var(--accent)}
.crop-net{font-size:1.05rem;margin:.2rem 0 .8rem;color:var(--good)}
.crop-net.neg{color:var(--bad)}
.crop-net b{font-weight:800}
.crop-sec{margin:.6rem 0;padding-top:.5rem;border-top:1px solid var(--line)}
.crop-sec h4{display:flex;justify-content:space-between;align-items:baseline;margin:.2rem 0 .4rem}
.crop-sum{font-weight:700;text-transform:none;letter-spacing:0;font-size:.9rem}
.crop-sum.ok{color:var(--good)}
.crop-sum.neg{color:var(--bad)}
.crop-line{display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0;font-size:.9rem}
.crop-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.crop-tbl td{padding:.15rem 0;border-bottom:1px solid var(--line)}
.crop-tbl tr:last-child td{border-bottom:none}
.crop-tbl td.right{text-align:right;color:var(--bad);font-variant-numeric:tabular-nums;white-space:nowrap}
.crop-det>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.4rem;
  padding:.1rem 0;margin:0 0 .3rem;font-size:.85rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.crop-det>summary::-webkit-details-marker{display:none}
.crop-det>summary:hover{color:var(--txt)}
.crop-det .caret{font-size:.75rem}
.crop-det[open]>summary .caret{transform:rotate(90deg)}
.crop-det .crop-cnt{text-transform:none;letter-spacing:0;font-weight:400;font-size:.8rem}
.crop-det .crop-sum{margin-left:auto}
.crop-det-body{padding-bottom:.2rem}
.sep{border:none;border-top:1px solid var(--line);margin:.9rem 0}

.admin-settings .set-row{padding:.5rem 0;border-bottom:1px solid var(--line)}
.admin-settings .set-row:last-of-type{border-bottom:none}
.admin-settings label{display:block;margin-bottom:.35rem}
.admin-settings label .muted{display:block;font-weight:400;margin-top:.1rem}
.admin-settings input[type=number]{width:7rem}

.avatar-review{display:flex;flex-direction:column;gap:.7rem}
.ava-item{display:flex;gap:.8rem;align-items:center}
.ava-item img{border-radius:8px;border:1px solid var(--line2);object-fit:cover}
.ava-meta{display:flex;flex-direction:column;gap:.4rem}

.stat-lines{display:flex;flex-direction:column;gap:.4rem}
.stat-line{display:grid;grid-template-columns:9rem 1fr;gap:.5rem;align-items:center;font-size:.88rem}
.stat-line>span:first-child{color:var(--muted)}
.stat-line .minibar{grid-column:2}
.minibar{height:6px;background:var(--bg2);border-radius:4px;overflow:hidden;margin-top:.2rem}
.minibar>span{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--accent))}

.backup-list{margin:.5rem 0 0;padding-left:1rem;max-height:180px;overflow:auto}
.backup-list li{margin:.2rem 0}
.danger-zone{border:1px solid #7f1d1d;border-radius:10px;padding:.7rem;background:rgba(248,113,113,.05)}
.danger-zone h3{color:#fca5a5}
.dz-list{margin:.4rem 0;padding-left:1.1rem}
.dz-list li{margin:.2rem 0}

.admin-log{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-log th,.admin-log td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line)}
.admin-log th{color:var(--muted);font-weight:600}
.admin-log .mono{min-width:auto;text-align:left;color:var(--txt)}

.ally-avatar{border-radius:8px;border:1px solid var(--line2);object-fit:cover;margin-bottom:.5rem}

/* Footer + Credits-Seite */
.sitefoot{max-width:1200px;margin:2rem auto 1rem;padding:1rem 1.2rem 0;border-top:1px solid var(--line2);
  display:flex;align-items:center;gap:.5rem;color:var(--dim);font-size:.85rem}
.sitefoot em{font-style:italic;opacity:.85}
.sitefoot .foot-sep{opacity:.5}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover,.sitefoot a.active{color:var(--txt)}
.credits{max-width:760px}
.credits h1{margin:.2rem 0 .4rem}
.credits .cred-group{margin-top:1.6rem}
.credits .cred-group h2{font-size:1.05rem;color:var(--accent);margin:0 0 .6rem;
  padding-bottom:.3rem;border-bottom:1px solid var(--line2)}
.cred-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.cred-item{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:.7rem .9rem}
.cred-main{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.cred-title{font-weight:700;color:var(--txt);text-decoration:none}
.cred-title:hover{color:var(--accent)}
.cred-lic{font-size:.78rem;color:var(--dim)}
.cred-lic a{color:var(--muted);text-decoration:none}
.cred-lic a:hover{color:var(--txt)}
.cred-desc{color:var(--muted);font-size:.9rem;margin-top:.25rem}
.cred-auth{color:var(--dim);font-size:.82rem;margin-top:.15rem}
.cred-foot{margin-top:1.6rem}

/* Icon-Größen im Nav/Dock (game-icons statt Emoji) */
.brand .logo .ic{width:1.1rem;height:1.1rem;vertical-align:-.15em}
.fd-ic .ic{width:1.15rem;height:1.15rem;vertical-align:-.22em}
.admin-dot .ic{width:1.15rem;height:1.15rem;vertical-align:-.18em}
.admin-dot{display:inline-flex;align-items:center}

/* Gebäude-Icons + Info-Popup-Icon + Völker-Wappen */
.ic-bld{width:1.15em;height:1.15em;vertical-align:-.24em;margin-right:.15rem;color:var(--muted)}
.ic-u{width:1.25em;height:1.25em;vertical-align:-.28em;margin-right:.2rem;color:var(--muted)}
.tbl tr:hover .ic-u,.done-row .ic-u,.locked-row .ic-u{color:var(--accent)}
.opt-wrap .upg .ic{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.1rem}
.im-head{display:flex;align-items:center;gap:12px;margin-bottom:.35rem}
.im-icon{width:44px;height:44px;flex:0 0 auto;fill:currentColor;color:var(--accent)}
.im-head h3{margin:0}
.tc-crest{width:66px;height:80px;display:block;margin:0 auto}

/* ---- Berater (Onboarding: Tour + kontextsensitives Panel) ---- */
.berater-btn{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;
  gap:.5rem;padding:.35rem .8rem .35rem .35rem;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);
  color:var(--txt);font-weight:700;font-size:.85rem;box-shadow:var(--shadow)}
.berater-btn:hover{border-color:var(--accent);color:var(--accent)}
.berater-btn-img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:top center;
  background:var(--bg);border:1px solid var(--line2);flex:0 0 auto}
.berater-btn-lbl{padding-right:.3rem}
@media(max-width:600px){.berater-btn-lbl{display:none}}

.berater-overlay{align-items:flex-end;justify-content:flex-end;padding:0 18px 84px}
.berater-modal{position:relative;width:min(560px,94vw);max-height:82vh;overflow:auto;
  padding:1.3rem 1.4rem}
.berater-close{position:absolute;top:.6rem;right:.7rem;background:transparent;border:none;
  color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;padding:.2rem}
.berater-close:hover{color:var(--txt)}

.advisor-hero{display:flex;gap:1rem;align-items:flex-start}
.advisor-portrait{width:104px;height:150px;flex:0 0 auto;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.advisor-speech{flex:1;min-width:0}
.advisor-name{font-weight:700;color:var(--accent);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:.4rem}
.advisor-bubbles{position:relative}
.advisor-bubble{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  border-top-left-radius:2px;padding:.7rem .9rem;min-height:118px}
.advisor-bubble[hidden]{display:none}
.ab-title{margin:0 0 .35rem;color:var(--txt);text-transform:none;font-size:.95rem;letter-spacing:0}
.ab-body{margin:0;font-size:.88rem;color:var(--txt);line-height:1.5}
.advisor-tour-nav{display:flex;align-items:center;gap:.6rem;margin-top:.6rem}
.advisor-dots{display:flex;gap:.3rem;flex:1;justify-content:center}
.ad-dot{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.ad-dot.on{background:var(--accent)}

.advisor-context{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.7rem}
.advisor-context h3{margin-bottom:.5rem}
.advisor-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.advisor-steps li{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem}
.advisor-steps li.met{border-color:var(--accent)}
.as-head{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem}
.as-check{width:1.1em;color:var(--accent);font-weight:800}
.as-title{flex:1}
.as-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#1a1204;background:var(--accent);border-radius:5px;padding:.06rem .35rem}
.as-desc{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.as-bar{height:5px;background:var(--line);border-radius:3px;margin-top:.4rem;overflow:hidden}
.as-bar>span{display:block;height:100%;background:var(--accent);border-radius:3px}
.as-num{font-size:.72rem;color:var(--dim);margin-top:.2rem;font-variant-numeric:tabular-nums}
.advisor-questlink{display:inline-block;margin-top:.6rem}
.advisor-prot{display:flex;align-items:flex-start;gap:.5rem;margin-top:.8rem;font-size:.82rem;
  color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem}
.advisor-prot .ic{width:18px;height:18px;flex:0 0 auto;color:var(--accent);margin-top:.05rem}
.advisor-prot-warn{margin-top:.5rem;border-color:var(--accent);color:var(--txt)}
.advisor-prot-warn b{color:var(--crop)}
.advisor-wiki{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.1rem;
  border:1px solid var(--accent);border-radius:10px;padding:.65rem .8rem;
  background:linear-gradient(180deg,rgba(212,160,60,.10),rgba(212,160,60,.03));font-size:.85rem}
.advisor-wiki .aw-ic{width:26px;height:26px;flex:0 0 auto;color:var(--accent);margin-top:.05rem}
.advisor-wiki .aw-txt b{color:var(--txt)}
.advisor-foot{margin-top:1.1rem;display:flex;justify-content:space-between;
  align-items:center;gap:.6rem;flex-wrap:wrap}
.advisor-wikibtn{display:inline-flex;align-items:center;gap:.45rem}
.advisor-wikibtn .aw-ic{width:18px;height:18px;flex:0 0 auto;color:currentColor}

@media(max-width:600px){
  .berater-overlay{padding:0;align-items:center;justify-content:center}
  .berater-modal{max-height:92vh;border-radius:14px}
  .advisor-portrait{width:74px;height:104px}
}

/* =========================================================================
   WIKI  (/wiki) - zweispaltige Spielhilfe (Menü links, Inhalt rechts)
   ========================================================================= */
.wrap:has(.wiki){max-width:1280px}
.wiki{display:flex;gap:1.5rem;align-items:flex-start}
.wiki-content{flex:1 1 auto;min-width:0}
.wiki [id]{scroll-margin-top:var(--chrome,96px)}   /* Anker frei vom klebenden Kopf */

/* ---- Sidebar ---- */
.wiki-nav{flex:0 0 220px;position:sticky;top:.8rem;align-self:flex-start;
  max-height:calc(100vh - 1.6rem);overflow-y:auto;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--radius);padding:.7rem}
.wnav-head{display:flex;align-items:center;gap:.45rem;font-weight:800;color:var(--accent);
  padding:.2rem .3rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;letter-spacing:.02em}
.wnav-head .ic{width:1.1em;height:1.1em}
.wnav-group{border-radius:8px}
.wnav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;
  padding:.4rem .45rem;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--txt);user-select:none}
.wnav-group>summary::-webkit-details-marker{display:none}
.wnav-group>summary::after{content:"▸";margin-left:auto;color:var(--dim);font-size:.75rem;transition:transform .15s}
.wnav-group[open]>summary::after{transform:rotate(90deg)}
.wnav-group>summary:hover{background:var(--panel2);color:var(--accent)}
.wnav-group>summary .ic{width:1em;height:1em;color:var(--accent)}
.wnav-group ul{list-style:none;margin:.1rem 0 .5rem;padding:0 0 0 1.55rem}
.wnav-group ul li a{display:block;padding:.24rem .4rem;border-radius:6px;text-decoration:none;
  color:var(--muted);font-size:.85rem;border-left:2px solid var(--line)}
.wnav-group ul li a:hover{color:var(--txt);background:var(--panel2);border-left-color:var(--accent)}

/* ---- Inhalt: Überschriften ---- */
.wiki-title{margin:.1rem 0 .3rem;font-size:1.7rem}
.wiki-lead{margin:0 0 1.2rem;max-width:60ch}
.wsec{margin-top:2.4rem;padding-top:.6rem;border-top:1px solid var(--line)}
.wsec:first-of-type{border-top:0;margin-top:.6rem}
.wsec>h2{display:flex;align-items:center;gap:.5rem;font-size:1.35rem;color:var(--accent);margin:.2rem 0 .7rem}
.wsec>h2 .ic{width:1.05em;height:1.05em}
.wsec h3{font-size:1.06rem;margin:1.6rem 0 .5rem;color:var(--txt);
  display:flex;align-items:center;gap:.4rem}
.wsec p{line-height:1.55;color:var(--txt)}
.wgroup{margin-top:1.4rem}
.wgroup-intro{margin:.1rem 0 .8rem !important;font-size:.9rem}

/* ---- Karten-Raster ---- */
.wgrid{display:grid;gap:.85rem;margin:.6rem 0 .4rem}
.wgrid-2{grid-template-columns:repeat(2,1fr)}
.wgrid-3{grid-template-columns:repeat(3,1fr)}
.wcard{background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:.8rem .9rem;min-width:0}
.wcard>p{margin:.35rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.5}
.wcard-h{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:1rem;flex-wrap:wrap}
.wcard-h .ic{width:1.3em;height:1.3em;color:var(--accent);flex:0 0 auto}
.res-wood .wcard-h .ic{color:var(--wood)} .res-clay .wcard-h .ic{color:var(--clay)}
.res-iron .wcard-h .ic{color:var(--iron)} .res-crop .wcard-h .ic{color:var(--crop)}
.wlvl{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--dim);
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem}
.wrole{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--info);
  background:rgba(96,165,250,.12);border-radius:999px;padding:.08rem .55rem}

/* ---- Tags / Meta / Kosten ---- */
.wtags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.wtag{font-size:.72rem;font-weight:700;color:var(--accent);background:rgba(245,185,66,.12);
  border:1px solid rgba(245,185,66,.3);border-radius:6px;padding:.08rem .45rem}
.wmeta{margin-top:.6rem;padding-top:.55rem;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:.35rem}
.wmeta-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem}
.wmeta-lbl{color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;
  flex:0 0 auto;min-width:5.8rem}
.w-cost{display:inline-flex;flex-wrap:wrap;gap:.55rem}
.w-cost .ci{display:inline-flex;align-items:center;gap:.2rem;font-weight:600;font-size:.86rem}
.w-cost .ic{width:1.05em;height:1.05em}
.wreqs{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.wreq{font-size:.76rem;color:var(--muted);background:var(--bg2);border:1px solid var(--line);
  border-radius:6px;padding:.06rem .45rem}

/* ---- Einheiten-Statleiste ---- */
.wstats{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.wstat{display:inline-flex;align-items:center;gap:.25rem;font-weight:700;font-size:.82rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:.12rem .45rem}
.wstat .ic{width:1em;height:1em;color:var(--muted)}
.wnature .wcard-h .ic{color:var(--bad)}

/* ---- Völker ---- */
.wtribe{margin-top:1rem;padding:1rem 1.1rem}
.wtribe-head{display:flex;align-items:center;gap:.9rem}
.wtribe-head h3{margin:0;font-size:1.2rem}
.crest{width:46px;height:56px;flex:0 0 auto;fill:currentColor;color:var(--accent)}
.crest-sm{width:20px;height:24px;vertical-align:-.4em}
.wtribe-tag{font-size:.82rem;color:var(--muted);font-weight:600}
.wtribe-cols{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.8rem}
.wcol-h{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.wcol-h.good{color:var(--good)} .wcol-h.bad{color:var(--bad)}
.wtribe-cols ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.28rem}
.wtribe-cols li{font-size:.86rem;line-height:1.4;color:var(--txt)}
.wpros li::marker{color:var(--good)} .wcons li::marker{color:var(--bad)}
.wtribe-facts{margin-top:.9rem;padding-top:.7rem;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:.35rem;font-size:.86rem}
.wfact b{color:var(--txt)}

/* ---- Schritte (Sieg) ---- */
.wsteps{margin:.4rem 0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.wsteps li{line-height:1.5}

/* ---- Tabellen ---- */
.wtable-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:10px;margin:.4rem 0}
.wtable{border-collapse:collapse;width:100%;font-size:.86rem}
.wtable th,.wtable td{padding:.4rem .6rem;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.wtable thead th{background:var(--panel2);color:var(--muted);font-weight:700;position:sticky;top:0}
.wtable tbody tr:last-child td{border-bottom:0}
.wtable tbody tr:hover td{background:var(--panel)}
.wtable td:first-child,.wtable th:first-child{text-align:left;color:var(--txt)}
.wtable .ic{width:1.05em;height:1.05em;vertical-align:-.16em}
.wtable-compact th,.wtable-compact td,.wtable-mini th,.wtable-mini td{padding:.3rem .45rem;font-size:.8rem}

.wiki-foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---- Responsiv ---- */
@media(max-width:860px){
  /* display:block statt flex-column: sonst behält .wiki-content die Min-Content-
     Breite der breiten Tabellen und überläuft den Viewport horizontal. */
  .wiki{display:block}
  .wiki-nav{position:static;width:auto;max-height:none;margin-bottom:1.2rem;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.3rem .8rem}
  .wnav-head{grid-column:1/-1}
  .wgrid-2,.wgrid-3{grid-template-columns:1fr}
  .wtribe-cols{grid-template-columns:1fr}
}

/* ===================== Allianz-Neugestaltung / Profile / Wappen ===================== */
/* Klickbare Namen + Allianz-Kürzel */
.plink{color:var(--txt);text-decoration:none;border-bottom:1px dotted var(--line2)}
.plink:hover{color:var(--accent);border-bottom-color:var(--accent)}
.alink{text-decoration:none;cursor:pointer}
.alink:hover{filter:brightness(1.2)}

/* Inline-Wappen (generiertes SVG) */
.acrest{display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.acrest-mini{border-radius:3px}
.acrest-lg,.acrest-mini{vertical-align:middle;object-fit:cover;border-radius:6px}

/* Reiter (Tabs) */
.tabbar{display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--line);margin:.6rem 0 1rem}
.tabbar .tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:.5rem .85rem;font-size:.9rem;font-weight:600;cursor:pointer;border-radius:6px 6px 0 0}
.tabbar .tab:hover{color:var(--txt);background:var(--panel2)}
.tabbar .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0803a;vertical-align:middle}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* Allianz-Kopf */
.ally-hero{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ally-hero .ally-name{font-size:1.25rem;font-weight:700}
.ally-forum-btn{margin-left:auto}
.pill-alert{display:inline-block;background:#e0803a;color:#1a1206;border-radius:10px;
  padding:.05rem .5rem;font-size:.75rem;font-weight:700}

/* Stat-Kacheln */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:.4rem 0 1rem}
.stat-tile{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  padding:.7rem .9rem;display:flex;flex-direction:column;gap:.15rem}
.stat-tile .st-val{font-size:1.35rem;font-weight:700;color:var(--txt)}
.stat-tile .st-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat-tile.att .st-val{color:#f4a3a3}
.stat-tile.def .st-val{color:#93c5fd}

/* Profilkarte (Spieler + Allianz) */
.profile-card .profile-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.profile-av{width:96px;height:96px;border-radius:14px;object-fit:cover;border:1px solid var(--line2)}
span.profile-av.pav-fallback{display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:700;background:var(--panel2);color:var(--accent)}
.profile-name{font-size:1.5rem;font-weight:700}
.profile-sub{margin-top:.15rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ally-crestlink{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;color:var(--muted)}
.ally-crestlink:hover{color:var(--accent)}
.profile-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.chip-prot{display:inline-flex;align-items:center;gap:.3rem;background:var(--panel2);
  border:1px solid var(--line2);border-radius:8px;padding:.15rem .5rem;margin-top:.35rem;color:#93c5fd}
.join-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.join-form input[type=text]{flex:1;min-width:200px}
.jr-msg{color:var(--muted);font-size:.82rem;font-style:italic;margin-top:.2rem}

/* Wappen-Builder */
.crest-builder .cb-layout{display:grid;grid-template-columns:180px 1fr;gap:1.2rem;align-items:start}
.cb-preview{text-align:center;position:sticky;top:.5rem}
.cb-preview #cbPreview{min-height:150px}
.cb-preview form{margin-top:.7rem}
.cb-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:.7rem 0 .3rem}
.cb-row{display:flex;flex-wrap:wrap;gap:.35rem}
.cb-pill{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;
  padding:.3rem .6rem;font-size:.82rem;color:var(--txt);cursor:pointer}
.cb-pill:hover{border-color:var(--accent)}
.cb-pill.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cb-sw{display:flex;flex-wrap:wrap;gap:.3rem}
.cb-swatch{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0}
.cb-swatch:hover{transform:scale(1.1)}
.cb-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.cb-iconcats{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.4rem}
.cb-catbtn{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;
  padding:.25rem .6rem;font-size:.8rem;color:var(--muted);cursor:pointer}
.cb-catbtn.on{color:var(--accent);border-color:var(--accent)}
.cb-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.35rem;max-height:230px;overflow-y:auto;padding:.2rem}
.cb-icon{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:.3rem;cursor:pointer;aspect-ratio:1}
.cb-icon svg{width:100%;height:100%;fill:var(--txt)}
.cb-icon:hover{border-color:var(--accent)}
.cb-icon.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cb-icon.on svg{fill:var(--accent)}
.cb-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.cb-preset{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--panel2);
  border:1px solid var(--line2);border-radius:9px;padding:.4rem .5rem;cursor:pointer;width:74px}
.cb-preset span{font-size:.66rem;color:var(--muted);text-align:center;line-height:1.1}
.cb-preset:hover{border-color:var(--accent)}
@media (max-width:640px){
  .crest-builder .cb-layout{grid-template-columns:1fr}
  .cb-preview{position:static}
}
/* Wappen in Flex-Köpfen nicht schrumpfen lassen */
.profile-head .acrest,.ally-hero .acrest{flex:0 0 auto}
/* Volk hinter dem Spielernamen (kleines Völker-Wappen) */
.profile-tribe{margin-left:.55rem;font-size:.9rem;font-weight:500;color:var(--muted);
  display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle}
.profile-sub{min-height:28px}