:root{
  --panel:#1d1610; --panel2:#2a1f13; --edge:#4a3a22; --gold:#d8a93c; --gold2:#e6c25a;
  --txt:#e8dcc3; --sub:#a8987a; --err:#e08070; --ok:#a8cf84;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:#0b111a; color:var(--txt);
  font-family:Georgia,'Times New Roman',serif;
  overscroll-behavior:none;                       /* kein Ziehen-zum-Neuladen mitten im Spiel */
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;}
/* touch-action:none — sonst deutet der Browser jedes Wischen als Scrollen und wir sehen es nie. */
canvas#cv{position:fixed; inset:0; display:block; touch-action:none;}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge); border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,0.5);}
.sub{color:var(--sub); font-size:12px;}
.err{color:var(--err); font-size:13px; min-height:18px; margin-top:8px; text-align:center;}
button{font-family:inherit; background:linear-gradient(180deg,#3b2c1c,#2a1f13); color:var(--txt);
  border:1px solid var(--edge); border-radius:6px; padding:7px 14px; cursor:pointer; font-size:14px;}
button:hover{border-color:var(--gold); color:var(--gold2);}
button.gold{background:linear-gradient(180deg,#6a5222,#4a3a16); border-color:var(--gold); color:var(--gold2); font-size:16px; width:100%; margin-top:10px;}
input{width:100%; background:#140f09; border:1px solid var(--edge); color:var(--txt); border-radius:6px;
  padding:9px 12px; margin:5px 0; font-family:inherit; font-size:15px;}
input:focus{outline:none; border-color:var(--gold);}

/* Auth */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #16222e, #070b11); z-index:100;}
.authbox{width:min(440px, 92vw); padding:26px 30px; text-align:center;}
.authbox h1{color:#5a6c7e; font-size:20px; letter-spacing:8px; font-weight:normal;}
.authbox h2{color:var(--gold2); font-size:34px; letter-spacing:4px; margin:2px 0 4px;}
.authbox h2 span{color:#7ea0be; font-size:20px; letter-spacing:6px;}
.authbox .sub{margin-bottom:14px;}
.authver{margin-top:12px; font-size:11px; color:var(--sub); letter-spacing:1px;}
.tabs{display:flex; gap:6px; margin:8px 0;}
.tab{flex:1; padding:8px; background:#140f09; border:1px solid var(--edge); border-radius:6px; cursor:pointer; color:var(--sub);}
.tab.active{color:var(--gold2); border-color:var(--gold);}
.clanpick{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0;}
.clan{border:1px solid var(--edge); border-radius:6px; padding:8px; cursor:pointer; text-align:left; background:#140f09;}
.clan b{display:block; font-size:14px;}
.clan i{font-style:normal; font-size:11px; color:var(--sub);}
.clan.active{border-color:var(--gold); background:#241a0e;}
.clan.active b{color:var(--gold2);}

/* Kopfzeile — eine Reihe für Umschalter, Rohstoffe und Name.
   Die Rohstoffleiste stand früher mittig über dem Bildschirm und schob sich auf schmalen
   Fenstern unter den Umschalter. Jetzt teilen sich die drei denselben Platz: Die Leiste
   nimmt nur, was zwischen ihren Nachbarn frei ist, und bricht bei Enge in zwei Zeilen um.
   Der Streifen selbst lässt Klicks durch (pointer-events), sonst läge er über der Karte. */
#topstrip{position:fixed; top:10px; left:10px; right:10px; z-index:20;
  display:flex; align-items:flex-start; gap:10px; pointer-events:none;}
#topstrip > .panel{pointer-events:auto;}

/* Topbar */
#topbar{display:flex; gap:12px; padding:8px 14px; flex-wrap:wrap; justify-content:center;
  margin:0 auto; min-width:0;}
.res{display:flex; align-items:center; gap:5px; font-size:15px; min-width:56px; font-variant-numeric:tabular-nums;}
.res i{width:18px; height:18px; display:inline-block; border-radius:4px;}
#r-wood i{background:#7a5a34;} #r-food i{background:#c9a850;} #r-gold i{background:#d8a93c; border-radius:50%;}
#r-stone i{background:#8a8d93;} #r-ore i{background:#4c4038; box-shadow:inset 0 0 0 2px #c46a3a;}
#r-met i{background:#d8a93c; border-radius:3px 3px 5px 5px; box-shadow:inset 0 3px 0 #e8dcc3;}  /* Krug: Met mit Schaumrand */
#r-weap i{background:linear-gradient(135deg,#c8ccd2 50%,#7a5a34 50%);}
#r-pop i{background:#c9a382; border-radius:50%;} #r-mood i{background:#7fae4c; border-radius:50%;}
.res s{text-decoration:none; font-size:11px; color:var(--sub);}

/* Tooltip: erklärt beim Überfahren, wofür das Symbol steht.
   Nur mit echtem Zeiger — auf dem Handy bliebe ein :hover nach dem Tippen kleben. */
@media (hover:hover){
  .res[data-tip]{position:relative; cursor:help;}
  .res[data-tip]::after{
    content:attr(data-tip); position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
    width:max-content; max-width:230px; padding:7px 10px; text-align:left;
    font-size:12px; line-height:1.4; color:var(--txt);
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--edge); border-radius:6px; box-shadow:0 4px 18px rgba(0,0,0,0.6);
    opacity:0; pointer-events:none; transition:opacity .12s ease-out .15s; z-index:40;}
  .res[data-tip]:hover::after{opacity:1;}
}

/* ---------- Inselwechsler ----------
   Eine Wappenreihe über dem HUD: ein Knopf je eigener Insel, der aktive mit Goldrand. Der
   Alarmpunkt ist der Grund, warum es die Reihe gibt — er muss auch dann ins Auge fallen, wenn
   der Jarl gerade woanders baut. Ein einzelner Knopf (Heimat allein) wird von app.js gar nicht
   erst gezeigt: eine Reihe von eins ist keine Reihe. */
/* `--wx-top` setzt app.js aus der GEMESSENEN Höhe des Kopfstreifens: Bricht die Rohstoffleiste
   auf schmalen Fenstern in zwei Zeilen um, wächst der Streifen nach unten — und der Wechsler
   rutscht mit, statt sich über die Rohstoffe zu schieben. Ohne die Variable (JS noch nicht
   gelaufen) trägt der Fallwert. */
#wechsler{position:fixed; top:var(--wx-top,62px); left:50%; transform:translateX(-50%); z-index:21;
  padding:6px 8px; max-width:min(560px, 94vw);}
#wx-reihe{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.wxb{display:inline-flex; align-items:center; gap:6px; position:relative;
  padding:5px 10px; border:1px solid var(--edge); border-radius:7px; cursor:pointer;
  background:linear-gradient(180deg,#2a1f13,#1d1610); color:var(--txt); font-size:13px; white-space:nowrap;}
.wxb:hover{border-color:var(--gold2);}
.wxb.aktiv{border-color:var(--gold); background:#3a2a15; color:var(--gold2); box-shadow:0 0 0 1px var(--gold) inset;}
.wxb i{font-style:normal; font-size:15px;}
.wxb em{font-style:normal; font-size:10px; color:var(--sub);}
/* Der Punkt am Wappen: rot Feindflotte, orange Hunger, gelb ungedeckter Sold, grau Landungsfrieden.
   Er LEUCHTET nicht nur, er SCHLÄGT — und zwar um so schneller, je schlimmer es steht: Krieg
   hämmert (0,7 s), Hunger pocht (1,4 s), der Sold mahnt gemächlich (2,6 s). Der Landungsfrieden
   ist kein Alarm, sondern eine Zusage: Er ruht still und grau. Ein Punkt, der nur leuchtet, geht
   im Augenwinkel unter — und dann verhungert die dritte Kolonie, während der Jarl auf der ersten
   baut. Wer Bewegung nicht sehen will oder kann, dem lässt `prefers-reduced-motion` den ruhigen
   Punkt; die Farbe allein bleibt aussagekräftig. */
.wxp{width:9px; height:9px; border-radius:50%; flex:0 0 auto; position:relative;
  box-shadow:0 0 5px currentColor;}
/* Die Welle: ein zweiter Ring, der aus dem Punkt herausläuft und verglüht. */
.wxp::after{content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid currentColor; opacity:0;}
.wxp.krieg {background:#e05540; color:#e05540; animation:wxpuls .7s ease-out infinite;}
.wxp.hunger{background:#e08a3c; color:#e08a3c; animation:wxpuls 1.4s ease-out infinite;}
.wxp.sold  {background:#e0c26a; color:#e0c26a; animation:wxpuls 2.6s ease-out infinite;}
.wxp.krieg::after {animation:wxwelle .7s ease-out infinite;}
.wxp.hunger::after{animation:wxwelle 1.4s ease-out infinite;}
.wxp.sold::after  {animation:wxwelle 2.6s ease-out infinite;}
.wxp.schutz{background:#9aa7b2; color:#9aa7b2; box-shadow:none;}   /* Schutz ist Ruhe, kein Alarm */
@keyframes wxpuls{
  0%   {box-shadow:0 0 4px currentColor; transform:scale(1);}
  35%  {box-shadow:0 0 11px 2px currentColor; transform:scale(1.22);}
  100% {box-shadow:0 0 4px currentColor; transform:scale(1);}
}
@keyframes wxwelle{
  0%   {opacity:.75; transform:scale(1);}
  70%  {opacity:0;   transform:scale(2.6);}
  100% {opacity:0;   transform:scale(2.6);}
}
/* Der Kriegsknopf selbst bekommt einen schwachen roten Saum — der Punkt allein ist 9 px groß. */
.wxb:has(.wxp.krieg){border-color:#8a3a2c; box-shadow:0 0 8px rgba(224,85,64,0.25);}
@media (prefers-reduced-motion: reduce){
  .wxp, .wxp::after{animation:none !important;}
}
#wx-kopf{margin-top:5px; font-size:12px; color:var(--sub); text-align:center; line-height:1.5;}
#wx-kopf b{color:var(--gold2);}
#wx-kopf .not{color:var(--err);}

/* Ansicht-Umschalter */
#viewswitch{display:flex; gap:6px; padding:6px; flex:0 0 auto;}
#viewswitch button{display:inline-flex; align-items:center; gap:5px;}
#viewswitch button b{font-weight:normal;}
#viewswitch button i{font-style:normal;}
#viewswitch button.active{border-color:var(--gold); color:var(--gold2);}
#viewswitch em{font-style:normal; color:var(--err);}
/* Der Inseln-Knopf lebt nur auf dem Handy — am Schreibtisch trägt die sichtbare Wappenreihe.
   app.js blendet ihn zusätzlich aus, solange der Jarl nur eine Insel hat. */
#v-isles{display:none;}
/* Der Alarmpunkt auf dem Knopf: dieselbe Optik wie am Wappen (.wxp), nur dass er hier als
   einzelner Punkt in der Ecke sitzt. Leer bleibt er unsichtbar. */
#islesbadge{display:none;}
/* Farbe und Puls tragen die .wxp-Alarmklassen (.wxp.krieg usw.) — hier NICHT color setzen,
   sonst überstimmt die höhere Id-Spezifität die Alarmfarbe und der Punkt wäre farblos. */
#islesbadge.wxp{display:block; width:8px; height:8px;}
.nurmobil{display:none;}
.sheetx{display:none;}
#whoami{padding:8px 14px; font-size:14px; color:var(--gold2); flex:0 0 auto; white-space:nowrap;}

/* Baumenü
   Die Leiste steht jetzt in zwei Etagen: oben die Reiter, darunter das Gitter der gewählten
   Gruppe. Achtzehn Knöpfe nebeneinander wuchsen sonst über drei Reihen und nahmen dem Jarl
   genau die Insel weg, auf die er gerade bauen wollte. */
#buildbar{position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; padding:8px; z-index:20; max-width:94vw;}
.breiter{display:flex; gap:4px; justify-content:center; flex-wrap:wrap;
  border-bottom:1px solid var(--edge); padding-bottom:7px;}
.brtab{display:flex; align-items:center; gap:5px; padding:5px 11px; font-size:11.5px;
  color:var(--sub); background:linear-gradient(180deg,#2e2317,#211809);
  border:1px solid var(--edge); border-radius:5px 5px 0 0; border-bottom:none; cursor:pointer;
  white-space:nowrap;}
.brtab i{font-style:normal; font-size:13px; line-height:1;}
.brtab:hover{color:var(--gold2); border-color:var(--gold);}
/* Der aktive Reiter trägt die Farbe des Blatts, das an ihm hängt — er ist kein Knopf mehr,
   sondern die Lasche der offenen Seite. */
.brtab.active{color:var(--gold2); background:#241a0e; border-color:var(--gold);
  box-shadow:inset 0 -2px 0 var(--gold2);}
/* Die Baukunde ist kein fünfter Reiter: Sie öffnet ein Buch, sie wählt keine Gruppe. Der Abstand
   und die runde Ecke sagen das, bevor man sie drückt. */
.kundetab{margin-left:8px; border-radius:5px; border-bottom:1px solid var(--edge);}
/* Die Baustellen-Staffel steht zwischen Reitern und Gitter — sie gilt für JEDEN Knopf darunter,
   also gehört sie über alle und nicht an einen. */
.bplatz{font-size:11px; color:var(--sub); text-align:center; margin:-2px 0 2px;}
.bgitter{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
/* Rechts im Knopf bleibt eine Spalte für die Kunde-Rune frei — sonst läge sie über dem Namen. */
.bbtn{width:86px; padding:6px 20px 6px 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:linear-gradient(180deg,#3b2c1c,#2a1f13); border:1px solid var(--edge); border-radius:5px; cursor:pointer;}
.bbtn:hover{border-color:var(--gold);}
.bbtn.active{border-color:var(--gold2); background:#241a0e;}
.bbtn.locked{opacity:0.45;}
/* Von jedem Gott steht nur EIN Standbild. Das darf man nicht erst aus der Absage des Servers
   erfahren — der Knopf graut aus, sobald das Bild steht (oder im Bau ist). */
.bbtn.gesperrt{opacity:0.4; filter:grayscale(0.7); cursor:not-allowed;}
.bbtn.gesperrt:hover{border-color:var(--edge);}
.bbtn{position:relative;}
.bbtn b{font-size:11px; font-weight:normal;}
.bbtn s{text-decoration:none; font-size:9px; color:var(--sub);}
/* Die Kunde-Rune: goldene Münze am rechten Rand, statt eines grauen „?" im Text. Der langsame
   Puls holt das Auge — beim Überfahren hört er auf, damit das Ziel nicht unter dem Zeiger zappelt. */
.bbtn .bhelp{position:absolute; top:50%; right:3px; margin-top:-9px; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; line-height:1; text-decoration:none; cursor:help;
  color:#241a0e; background:radial-gradient(circle at 34% 28%, #f6dd94, var(--gold) 72%);
  border:1px solid #7a5f26; border-radius:50%;
  box-shadow:0 0 0 2px rgba(20,15,9,0.9), 0 0 6px rgba(216,169,60,0.35);
  transition:transform 0.12s ease, box-shadow 0.15s ease;
  animation:runenpuls 2.8s ease-in-out infinite;}
@keyframes runenpuls{
  0%,72%,100%{box-shadow:0 0 0 2px rgba(20,15,9,0.9), 0 0 6px rgba(216,169,60,0.35);}
  86%        {box-shadow:0 0 0 2px rgba(20,15,9,0.9), 0 0 13px rgba(230,194,90,0.95);}}
.bbtn .bhelp:hover{animation:none; transform:scale(1.28);
  box-shadow:0 0 0 2px rgba(20,15,9,0.9), 0 0 14px rgba(230,194,90,0.95);}
/* Der Marktstand — Kontor, Preise, Kauf.
   Er sitzt im Auswahl-Panel, nicht in einem eigenen Fenster: Der Markt IST der Bau, den man
   angewählt hat, und ein zweites Blatt darüber verdeckte nur die Insel. */
.mkbalken{height:7px; margin:5px 0 3px; border:1px solid var(--edge); border-radius:4px;
  background:#150f07; overflow:hidden;}
.mkbalken i{display:block; height:100%;
  background:linear-gradient(90deg,#8a6a24,var(--gold) 70%,#f0d68a);
  transition:width 0.4s ease;}
.mksub{font-size:10.5px; color:var(--sub); line-height:1.45;}
.mkrow{display:grid; grid-template-columns:1fr 62px 40px 62px; gap:5px; align-items:center;
  margin-top:6px;}
.mklbl{display:flex; flex-direction:column; line-height:1.3;}
.mklbl b{font-size:12px; font-weight:normal; color:var(--gold2);}
.mklbl i{font-style:normal; font-size:10px; color:var(--sub);}
.mkrow input{min-width:0; padding:4px 6px; font-size:12px; text-align:right;}
.mkmax, .mkbuy{padding:5px 4px; font-size:11px; cursor:pointer; white-space:nowrap;}
.mkbuy{color:var(--gold2);}
/* Der Preis steht UNTER der Zeile, über die volle Breite — daneben gequetscht wäre er die Zahl,
   die man übersieht, und ausgerechnet sie entscheidet über den Kauf. */
.mkkosten{grid-column:1 / -1; font-style:normal; font-size:10.5px; color:var(--sub);
  text-align:right; margin-top:-2px;}
.mkkosten.mkrot{color:#e07a5a;}                   /* Kontor oder Kasse reichen nicht */

/* Baukunde: die Gruppen des Baumenüs, damit man dort sucht, wo man baut. */
.kgruppe{margin:14px 0 6px; padding-bottom:4px; font-size:12px; color:var(--gold2);
  border-bottom:1px solid var(--edge); letter-spacing:0.5px;}

/* Baukunde */
#kunde{position:fixed; left:50%; transform:translateX(-50%); top:70px; width:min(620px,92vw);
  padding:14px; z-index:23; max-height:74vh; overflow:auto;}
#kunde h3{color:var(--gold2); margin-bottom:8px;}
/* Auch am Schreibtisch bekommt jedes Blatt sein ✕: dass der Knopf in der Fußleiste ein
   zweites Mal gedrückt wieder schließt, sieht man dem Fenster nicht an. */
#kunde .sheetx, #reports .sheetx{display:block; position:absolute; top:8px; right:10px;
  width:32px; height:32px; padding:0; margin:0; font-size:15px; line-height:1; z-index:2;}
#kunde .intro{font-size:12px; color:var(--sub); line-height:1.5; margin-bottom:10px;
  border-left:2px solid var(--edge); padding-left:8px;}
#kunde .intro b{color:var(--gold2); font-weight:normal;}
.kbtn{border:1px solid var(--edge); border-radius:6px; background:#181109;
  padding:8px 10px; margin-bottom:8px;}
.kbtn.fokus{border-color:var(--gold2); background:#241a0e;}
.kbtn > b{color:var(--gold2); font-size:14px; font-weight:normal;}
.ksub{font-size:11px; color:var(--sub); margin:2px 0 6px;}
.krow{display:grid; grid-template-columns:62px 1fr; gap:8px; font-size:12.5px; line-height:1.45; padding:1px 0;}
.krow i{font-style:normal; color:var(--sub);}

/* Versionsanzeige & Chronik.
   Der Knopf sitzt am Rechner unter der Kopfzeile rechts, auf dem Handy an der linken Flanke —
   dort ist er dem Bau-Blatt und der Bau-Bestätigung nicht im Weg. */
#vbadge{position:fixed; top:62px; right:10px; z-index:22;
  padding:3px 9px; font-size:11px; letter-spacing:0.5px; color:var(--sub); line-height:1.6;}
#vbadge:hover{color:var(--gold2);}
#vbadge.alt{color:var(--err); border-color:var(--err);}   /* Browser spielt eine alte Datei */
#chronik{position:fixed; left:50%; transform:translateX(-50%); top:70px; width:min(560px,92vw);
  padding:14px; z-index:24; max-height:74vh; overflow:auto;}
#chronik h3{color:var(--gold2); margin-bottom:8px;}
#chronik .sheetx{display:block; position:absolute; top:8px; right:10px;
  width:32px; height:32px; padding:0; margin:0; font-size:15px; line-height:1; z-index:2;}
#chronik .intro{font-size:12px; color:var(--sub); line-height:1.5; margin-bottom:10px;
  border-left:2px solid var(--edge); padding-left:8px;}
.cver{border:1px solid var(--edge); border-radius:6px; background:#181109;
  padding:8px 10px; margin-bottom:8px;}
.cver.jetzt{border-color:var(--gold2); background:#241a0e;}   /* die Fassung, die gerade läuft */
.cver > b{color:var(--gold2); font-size:14px; font-weight:normal;}
.cver .cdat{font-size:11px; color:var(--sub); margin-left:6px;}
.cver .cjetzt{font-size:10px; color:var(--gold); border:1px solid var(--gold); border-radius:4px;
  padding:1px 5px; margin-left:6px;}
.cver ul{margin:5px 0 0 16px;}
.cver li{font-size:12.5px; line-height:1.5; color:var(--txt);}

/* Auswahl-Panel */
#selpanel{position:fixed; left:10px; bottom:12px; width:300px; padding:12px; z-index:21; max-height:70vh; overflow:auto;}
#selname{color:var(--gold2); font-size:17px;}
.abtn{margin-top:6px; padding:6px 10px; background:#140f09; border:1px solid var(--edge); border-radius:5px;
  cursor:pointer; font-size:13px;}
.abtn:hover{border-color:var(--gold);}
.rowflex{display:flex; gap:6px; align-items:center; margin-top:6px;}
/* Stillstand: ein Gebäude, das nichts abwirft — passend zum Warnschild auf der Insel */
.warnbox{margin-top:6px; padding:6px 10px; font-size:13px; line-height:1.35;
  background:rgba(226,168,52,0.10); border:1px solid #e2a834; border-left-width:3px; border-radius:5px;}
.warnbox b{color:#e2a834;}
.prog{height:6px; background:#140f09; border-radius:3px; overflow:hidden; margin-top:6px;}
.prog b{display:block; height:100%; background:var(--gold); width:0;}

/* Heer & Flotte */
#armybar{position:fixed; right:10px; bottom:12px; padding:10px 14px; z-index:20; font-size:14px; max-width:300px;}
#trainq{font-size:12px; color:var(--sub); margin-top:4px;}
/* Wehrkraft: Angriff links, Verteidigung rechts — die zwei Zahlen, um die es geht. */
#wehrbox{margin-top:6px; border-top:1px solid var(--edge); padding-top:6px;}
.wehrzeile{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:4px; align-items:baseline; font-size:14px;}
.wehrzeile b{font-size:16px; color:var(--gold2);}
.wk{font-size:11.5px; color:var(--sub);}
.wk.atk{color:#e08070;} .wk.def{color:#8fd07a;}
/* Was auf See ist, verteidigt die Insel nicht — die Warnung, die vor dem Auslaufen zählt. */
.wehrsee{margin-top:5px; padding:5px 7px; font-size:12px; line-height:1.35; border-radius:4px;
  background:rgba(226,168,52,0.10); border-left:3px solid #e2a834;}
.wehrsee b{color:#e2a834;}
/* Beladung einer Flotte: grün, solange sie passt — rot, sobald der Kiel fehlt. */
.ladung{margin-top:6px; padding:5px 8px; font-size:12.5px; border-radius:4px; background:#140f09;
  border:1px solid var(--edge);}
.ladung.voll{border-color:#e05540; color:#e08070;}
.ladung b{color:var(--gold2);}
.ladung.voll b{color:#e08070;}

/* Weltkarte-Panel */
#worldpanel{position:fixed; right:10px; top:70px; width:300px; padding:12px; z-index:21; max-height:75vh; overflow:auto;}
#wp-title{color:var(--gold2); font-size:16px;}
/* Die Bilanz einer Kolonie: man schickt nicht ins Blaue, man schickt gegen eine Zahl. */
.bilanz{margin-top:6px; padding:6px 8px; font-size:12.5px; line-height:1.5; border-radius:5px;
  background:#140f09; border:1px solid var(--edge);}
.bilanz b{color:var(--gold2); font-variant-numeric:tabular-nums;}
.bilanz .minus{color:#e08070;}
.bilanz .plus{color:#a8cf84;}
.bilanz .knapp{color:#e0c26a;}
/* Was der Gründung noch fehlt — VOR der Absage, nicht danach. */
.fehlt{margin-top:6px; padding:6px 10px; font-size:12.5px; line-height:1.4; border-radius:5px;
  background:rgba(224,85,64,0.10); border:1px solid #e05540; border-left-width:3px;}
.fehlt.gut{background:rgba(168,207,132,0.10); border-color:#a8cf84;}
.wxopt{display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12.5px; cursor:pointer;}
.wxopt input{margin:0; width:auto;}
.sendrow{display:grid; grid-template-columns:1fr 64px; gap:6px; align-items:center; margin-top:4px; font-size:13px;}
.sendrow input{margin:0; padding:4px 8px; font-size:13px;}

/* ---------- Flotten am Horizont ----------
   Sitzt links, unter der Kopfzeile — dort, wo nichts anderes liegt, und immer im Bild. Eine
   anrückende Kriegsflotte muss man sehen, ohne sie zu suchen. */
#fleetbar{position:fixed; left:10px; top:70px; z-index:21; padding:8px 10px; max-width:270px;}
.fl{display:flex; align-items:center; gap:7px; font-size:12.5px; padding:3px 0;
  font-variant-numeric:tabular-nums;}
.fl + .fl{border-top:1px solid #2a1f13;}
.fl i{font-style:normal; font-size:15px;}
.fl .wo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fl .uhr{color:var(--gold2); font-weight:bold;}
/* Eine fremde Kriegsflotte ist die einzige Zeile, die den Blick FORDERN darf. */
.fl.feind{color:#e08070;}
.fl.feind .uhr{color:#e05540;}
.fl.feind i{animation:puls 1.1s ease-in-out infinite;}
.fl.freund{color:#a8cf84;}
.fl.eigen{color:var(--sub);}
@keyframes puls{0%,100%{opacity:1;} 50%{opacity:0.35;}}

/* ---------- Diplomatie-Angebot ----------
   Kein Bericht, den man überliest: eine Frage mitten im Bild, die nur eine Antwort auflöst. */
#diplo{position:fixed; left:50%; top:80px; transform:translateX(-50%); z-index:45;
  width:min(440px,94vw); padding:12px 14px; text-align:center;
  border-color:var(--gold); box-shadow:0 0 0 1px rgba(226,168,52,0.25), 0 8px 30px rgba(0,0,0,0.6);
  animation:pochen 2s ease-in-out infinite;}
#dp-txt{font-size:14px; line-height:1.4; margin-bottom:10px;}
#dp-txt b{color:var(--gold2);}
#diplo .bc-row button{flex:1; margin:0; min-height:42px; font-size:14px;}
@keyframes pochen{
  0%,100%{box-shadow:0 0 0 1px rgba(226,168,52,0.25), 0 8px 30px rgba(0,0,0,0.6);}
  50%    {box-shadow:0 0 0 3px rgba(226,168,52,0.45), 0 8px 34px rgba(0,0,0,0.6);}
}

/* ---------- Bünde & Fehden ---------- */
#dipl{position:fixed; left:50%; transform:translateX(-50%); top:70px; width:min(560px,92vw);
  padding:14px; z-index:22; max-height:74vh; overflow:auto;}
#dipl h3{color:var(--gold2); margin-bottom:8px;}
#dipl .sheetx{display:block; position:absolute; top:8px; right:10px;
  width:32px; height:32px; padding:0; margin:0; font-size:15px; line-height:1; z-index:2;}
#dipl .intro{font-size:12px; color:var(--sub); line-height:1.5; margin-top:10px;
  border-left:2px solid var(--edge); padding-left:8px;}
#dipl .intro b{color:var(--gold2); font-weight:normal;}
#dipl .leer{color:var(--sub); font-size:13px; padding:8px 2px;}
.drow{border-bottom:1px solid #2a1f13; padding:8px 2px; cursor:pointer;}
.drow:hover{background:rgba(226,168,52,0.06);}
.drow .kopf{display:flex; align-items:baseline; gap:6px; font-size:14px;}
.drow .kopf b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.drow .stufe{font-size:12px;}
.drow .zahl{font-variant-numeric:tabular-nums; font-size:12px; color:var(--sub);}
/* Das Barometer: Mitte = neutral, nach rechts Freundschaft, nach links Feindschaft. */
.baro{position:relative; height:7px; background:#140f09; border-radius:4px; margin-top:5px;
  border:1px solid var(--edge); overflow:hidden;}
.baro .mitte{position:absolute; left:50%; top:0; bottom:0; width:1px; background:#4a3a26;}
.baro .bal{position:absolute; top:0; bottom:0; border-radius:2px;}
.drow .unten{display:flex; gap:10px; margin-top:5px; font-size:11.5px; color:var(--sub);}
.drow .marke{padding:1px 6px; border:1px solid var(--edge); border-radius:4px;}
.drow .marke.pakt{border-color:#a8cf84; color:#a8cf84;}
.drow .marke.offen{border-color:var(--gold); color:var(--gold2);}

/* Berichte */
#reports{position:fixed; left:50%; transform:translateX(-50%); top:70px; width:min(560px,92vw);
  padding:14px; z-index:22; max-height:70vh; overflow:auto;}
#reports h3{color:var(--gold2); margin-bottom:8px;}
.rep{border-bottom:1px solid #2a1f13; padding:7px 2px; font-size:13px;}
.rep .ts{color:var(--sub); font-size:11px;}
.rep.win{color:var(--ok);} .rep.loss{color:var(--err);} .rep.warn{color:#e0c26a;}
.rep.pakt{color:var(--gold2);}

/* Rangliste */
#board{position:fixed; left:50%; transform:translateX(-50%); top:70px; width:min(560px,92vw);
  padding:14px; z-index:22; max-height:74vh; overflow:auto;}
#board h3{color:var(--gold2); margin-bottom:8px;}
#board .sheetx{display:block; position:absolute; top:8px; right:10px;
  width:32px; height:32px; padding:0; margin:0; font-size:15px; line-height:1; z-index:2;}
#board .intro{font-size:12px; color:var(--sub); line-height:1.5; margin-top:10px;
  border-left:2px solid var(--edge); padding-left:8px;}
#board .intro b{color:var(--gold2); font-weight:normal;}
/* Eigene Punkte, aufgeschlüsselt — nur der eigene Jarl sieht, woraus seine Zahl besteht. */
#myscore{border:1px solid var(--gold); border-radius:6px; background:#241a0e;
  padding:8px 10px; margin-bottom:10px;}
#myscore .gross{color:var(--gold2); font-size:15px;}
#myscore .teile{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;}
#myscore .teil{border:1px solid var(--edge); border-radius:4px; padding:2px 7px; font-size:11.5px; color:var(--sub);}
#myscore .teil b{color:#e8dcc3; font-weight:normal;}
/* Die Abzeichen der erlegten Untiere. Sie sitzen abgesetzt unter der Aufschlüsselung: Sie sind
   keine weitere Punktequelle unter vielen, sondern eine Auszeichnung — und der Satz darunter trägt
   die Regel, dass je Art nur eines zählt. */
#myscore .ehre{margin-top:8px; border-top:1px solid var(--edge); padding-top:7px;}
#myscore .ehre .teil.hat{border-color:var(--gold); color:var(--gold2);}
#myscore .ehre .sub{margin-top:5px; font-size:11px; line-height:1.45;}
.brow{display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center;
  border-bottom:1px solid #2a1f13; padding:7px 4px; font-size:13px; cursor:pointer;}
.brow:hover{background:#1c1409;}
.brow.mine{background:#241a0e;}
.brow .rg{color:var(--gold2); text-align:right;}
.brow .nm b{font-weight:normal;}
.brow .nm i{font-style:normal; color:var(--sub); font-size:11px; display:block;}
.brow .pt{color:var(--gold2); font-size:14px;}
.brow.mine .nm b{color:#a8c8e8;}

#toast{position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:50; display:flex; flex-direction:column; gap:6px; align-items:center;}
.tmsg{background:rgba(30,22,12,0.95); border:1px solid var(--edge); border-left:3px solid var(--gold);
  border-radius:6px; padding:8px 16px; font-size:13px; animation:fadein 0.3s;}
.tmsg.err{border-left-color:var(--err);}
@keyframes fadein{from{opacity:0; transform:translateY(-8px);} to{opacity:1;}}

/* Bau-Bestätigung (nur mit Fingern nötig) */
#bconfirm{position:fixed; left:50%; transform:translateX(-50%); z-index:30; padding:10px 12px;
  width:min(420px,94vw); text-align:center;}
#bc-txt{font-size:14px; margin-bottom:8px;}
.bc-row{display:flex; gap:8px;}
.bc-row button{flex:1; margin:0; font-size:15px; min-height:44px;}
.bc-row button:disabled{opacity:0.4;}

/* ===================================================================
   Handy: die schwebenden Panels vom Desktop taugen auf 390 px nicht.
   Statt dessen eine Fußleiste und Panels, die als Blatt von unten
   hereinfahren — immer nur eines, damit die Insel sichtbar bleibt.
   Umgeschaltet wird über die Klasse `mob` am <body> (siehe app.js),
   damit CSS und JS dieselbe Wahrheit benutzen.
   =================================================================== */
body.mob{ --nav: calc(58px + env(safe-area-inset-bottom)); }
body.mob .nurmobil{display:inline-flex;}
body.mob #whoami{display:none !important;}
/* Auf dem Handy sitzen Rohstoffe oben und Umschalter unten — die gemeinsame Reihe
   des Rechners wird dafür aufgelöst, beide Leisten hängen wieder selbst am Rand.
   FALLE: `display:contents` löst die Box des Streifens auf — mitsamt seinem `position:fixed`.
   Die beiden Leisten fallen damit in den Textfluss zurück, ihre top/left/z-index-Regeln
   greifen ins Leere und der bildfüllende Canvas malt sie zu. Sie brauchen ihr `fixed`
   also selbst zurück, sonst sind Rohstoffe und Fußleiste schlicht unsichtbar. */
body.mob #topstrip{display:contents;}

/* Rohstoffleiste: DREI je Zeile, drei Zeilen — neun Kacheln (Holz, Nahrung, Gold, Stein, Erz,
   Met, Waffen, Bewohner, Stimmung). Mit dem Met kam die neunte dazu; bei vier Spalten hätte die
   letzte Zeile eine einzelne Kachel getragen und ausgerechnet die STIMMUNG wäre ans Ende
   gerutscht — die Zahl, die über den Zug entscheidet. 3×3 geht glatt auf.

   Festes Raster statt Flex-Umbruch: Ein Umbruch richtet sich nach dem Inhalt, und sobald
   „1.240 +38" breiter wird als seine Spalte, rutscht die letzte Kachel aus dem Bild.
   `min-width:0` erlaubt der Kachel zu schrumpfen statt zu drängeln. */
body.mob #topbar{position:fixed; z-index:20;
  top:0; left:0; right:0; transform:none; max-width:none; border-radius:0;
  border-width:0 0 1px 0;
  display:grid; grid-template-columns:repeat(3,1fr); row-gap:3px; column-gap:0;
  padding:calc(4px + env(safe-area-inset-top)) 6px 4px;
  background:linear-gradient(180deg,rgba(42,31,19,0.96),rgba(29,22,16,0.92));}
body.mob .res{font-size:12.5px; min-width:0; gap:3px; justify-content:center;
  white-space:nowrap; overflow:hidden;}
body.mob .res i{width:13px; height:13px; flex:0 0 auto;}
body.mob .res s{font-size:9px; flex:0 0 auto;}
body.mob #r-pop b{font-size:10.5px;}    /* „3 frei · 15/26" ist der längste Wert — er muss in die Spalte */

/* Fußleiste */
body.mob #viewswitch{position:fixed;
  top:auto; left:0; right:0; bottom:0; border-radius:0; border-width:1px 0 0 0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; z-index:40;
  padding:5px 3px calc(5px + env(safe-area-inset-bottom));}
/* `min-width:0` ist Pflicht: Ein Rasterfeld wird sonst nie schmaler als sein Inhalt, und
   „Weltkarte" schiebt dann den letzten Knopf („Berichte") aus dem Bild. */
body.mob #viewswitch button{flex-direction:column; gap:1px; padding:5px 0; min-height:48px;
  min-width:0; overflow:hidden;
  font-size:9px; justify-content:center; position:relative; white-space:nowrap;}
body.mob #viewswitch button b{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
body.mob #viewswitch button i{font-size:19px; line-height:1;}
body.mob #viewswitch em{position:absolute; top:3px; right:8px; font-size:14px;}

/* Der Versionsknopf hängt unter der Rohstoffleiste am rechten Rand — dort, wo man ihn auch am
   Rechner sucht. An der linken Flanke (auf halber Höhe, grau vor der Insel) hat ihn schlicht
   niemand gefunden: Er ist die einzige Tür zur Chronik, also muss er dort liegen, wo der Blick
   ohnehin hinfällt. Unten ginge nicht — da liegen Bau-Bestätigung und Flottenleiste. */
body.mob #vbadge{top:calc(46px + env(safe-area-inset-top)); right:8px; left:auto; transform:none;
  z-index:25; padding:6px 9px; min-height:34px; font-size:12px;}

/* Der Inselwechsler ist auf dem Handy ein Blatt von unten (Grundlayout aus der Blatt-Gruppe
   oben), geöffnet über den Fußknopf „Inseln". Er liegt damit NICHT mehr über der dreizeiligen
   Rohstoffleiste — der Alarmpunkt, der ihn trägt, wandert dafür auf den Knopf selbst. Die
   Inseln stapeln sich als volle Zeilen: mit dem Finger leichter zu treffen als eine enge Reihe. */
body.mob #wx-reihe{flex-direction:column; gap:6px;}
body.mob .wxb{width:100%; min-height:46px; font-size:13px; justify-content:flex-start; padding:8px 10px;}
body.mob #wx-kopf{text-align:left; font-size:12px; margin-top:8px;}
/* Acht statt sieben Knöpfe, sobald der Inseln-Knopf dazukommt (app.js schaltet die Klasse). */
body.mob #viewswitch.acht{grid-template-columns:repeat(8,1fr);}
body.mob #viewswitch #islesbadge{top:5px; right:7px;}

/* Blätter von unten */
body.mob #buildbar, body.mob #selpanel, body.mob #armybar, body.mob #worldpanel, body.mob #reports,
body.mob #kunde, body.mob #board, body.mob #chronik, body.mob #dipl, body.mob #wechsler{
  position:fixed; left:0; right:0; bottom:var(--nav); top:auto; transform:none;
  width:auto; max-width:none; border-radius:12px 12px 0 0; border-width:1px 0 0 0;
  max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:32px 12px calc(12px + env(safe-area-inset-bottom)); z-index:35;
  animation:sheetup 0.18s ease-out;}
@keyframes sheetup{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
body.mob .sheetx{display:block; position:absolute; top:6px; right:8px; width:34px; height:34px;
  padding:0; font-size:15px; line-height:1; z-index:2;}
/* Baumenü am Handy. Drei Spalten waren zu dritt zu eng — die Namen brachen („Metsiede-rei"), und
   sechs Reihen davon schoben das Blatt über die halbe Insel. Mit den Gruppen stehen nie mehr als
   sechs Knöpfe zugleich da, also passen ZWEI Spalten: breitere Namen, größere Trefferfläche, und
   das Blatt bleibt flach genug, dass man den Bauplatz darunter noch sieht. */
body.mob #buildbar{gap:8px;}
body.mob .bgitter{gap:8px; justify-content:flex-start;}
body.mob .bbtn{width:calc(50% - 4px); min-height:58px; padding:8px 34px 8px 8px;
  flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:0 6px;}
/* Am Handy liegt der Name in einer eigenen Zeile, Kosten und Bauzeit darunter nebeneinander —
   die Knöpfe sind breit, aber nicht hoch, sonst scrollt man wieder. */
body.mob .bbtn b{width:100%; font-size:13px; text-align:left;}
body.mob .bbtn s{font-size:10px;}
/* Die Reiter tragen am Handy nur ihre Rune — vier ausgeschriebene Namen passen nicht nebeneinander,
   und umgebrochen wären sie eine zweite Wand. Der Name steht darunter im Gitter ohnehin nicht,
   also bleibt er als `title` und in der Baukunde. */
body.mob .breiter{gap:4px; justify-content:space-between;}
body.mob .brtab{flex:1; justify-content:center; min-height:40px; padding:5px 3px;}
body.mob .brtab i{font-size:17px;}
body.mob .brtab span{display:none;}
body.mob .kundetab{margin-left:4px; flex:0 0 44px;}

/* Der Marktstand am Handy: Der Kaufknopf rutscht in eine eigene Zeile, damit Feld, „max" und
   „Kaufen" alle eine Fingerkuppe breit bleiben.
   Der Preis muss dabei ZWISCHEN Eingabe und Kaufknopf stehen, nicht darunter: Unter dem Knopf
   klebte er optisch an der nächsten Ware — „bis 62 Stk." las sich als Angebot für die Nahrung
   darunter. Darum stehen beide Zeilen hier ausdrücklich, statt sich aus der Reihenfolge im
   Markup zu ergeben. */
body.mob .mkrow{grid-template-columns:1fr 76px 52px; gap:6px; margin-top:10px;}
body.mob .mkrow input{min-height:38px; font-size:15px;}
body.mob .mkmax{min-height:38px; font-size:12px;}
body.mob .mkkosten{grid-column:1 / -1; grid-row:2; font-size:11.5px; margin-top:0;}
body.mob .mkbuy{grid-column:1 / -1; grid-row:3; min-height:40px; font-size:14px;}
/* Mit dem Finger braucht die Rune eine Fläche, sonst tippt man daneben und baut versehentlich. */
body.mob .bbtn .bhelp{width:26px; height:26px; margin-top:-13px; right:5px; font-size:15px;}
body.mob #kunde{max-height:66vh;}                 /* die Einträge sind lang — mehr Blatt als sonst */
body.mob #board{max-height:66vh;}
body.mob #chronik{max-height:66vh;}
body.mob #dipl{max-height:66vh;}
/* Die Flottenleiste rutscht unter die zweizeilige Rohstoffleiste — und wird schmaler, damit sie
   auf der Insel nicht die halbe Sicht nimmt. Verschwinden darf sie nicht: Sie ist die einzige
   Warnung vor einer anrückenden Kriegsflotte. */
body.mob #fleetbar{top:auto; bottom:calc(var(--nav) + 8px); left:8px; right:8px; max-width:none;
  padding:6px 9px;}
/* Das Angebot liegt mittig und über allem — mit dem Finger sind die Knöpfe groß genug. */
body.mob #diplo{top:calc(72px + env(safe-area-inset-top)); left:8px; right:8px; width:auto; transform:none;}
body.mob #diplo .bc-row button{min-height:46px; font-size:15px;}
/* Der Rang steht als Zahl im Knopf — als Badge wäre er im Gedränge der Fußleiste unlesbar. */
body.mob #viewswitch #rangbadge{position:static; font-size:9.5px; color:var(--gold2);}
body.mob #bconfirm{bottom:calc(var(--nav) + 10px); left:8px; right:8px; width:auto; transform:none;}
body.mob .abtn{min-height:42px; display:flex; align-items:center; font-size:14px;}
body.mob .rowflex button{min-width:44px; min-height:40px; font-size:16px;}
body.mob .sendrow{grid-template-columns:1fr 82px;}
body.mob .sendrow input{min-height:38px; font-size:15px;}
/* Unter dem Versionsknopf, nicht auf ihm: eine Meldung ist flüchtig, der Knopf bleibt. */
body.mob #toast{top:calc(88px + env(safe-area-inset-top)); bottom:auto; width:92vw;}
body.mob .tmsg{text-align:center;}