: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. */
#wechsler{position:fixed; 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);}
.nurmobil{display:none;}
#zoom{display:none;}
.sheetx{display:none;}
#whoami{padding:8px 14px; font-size:14px; color:var(--gold2); flex:0 0 auto; white-space:nowrap;}

/* Baumenü */
#buildbar{position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; padding:8px; z-index:20; flex-wrap:wrap; justify-content:center; max-width:94vw;}
/* 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);}
.kundebtn{padding-right:6px;}                     /* trägt keine Rune, braucht die Spalte also nicht */
.kundebtn{justify-content:center;}

/* 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 dem Zoom gegenüber 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;}
.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;}

/* Zoomknöpfe — Pinch geht, aber einhändig ist das hier bequemer. Sie sitzen auf halber Höhe
   am Rand, nicht unten: dort liegt die Bau-Bestätigung. */
body.mob #zoom{display:flex; flex-direction:column; gap:4px; position:fixed; right:8px;
  top:50%; transform:translateY(-50%); bottom:auto; padding:4px; z-index:25;}
body.mob #zoom button{width:44px; height:44px; padding:0; font-size:19px;}

/* 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 rutscht unter die zweizeilige Rohstoffleiste — links neben den
   Versionsknopf, der rechts hängt. Er darf nicht verschwinden: Der Alarmpunkt einer hungernden
   Kolonie ist auf dem Handy die einzige Warnung, die man ohne Umweg sieht. */
body.mob #wechsler{top:calc(46px + env(safe-area-inset-top)); left:8px; right:66px;
  transform:none; max-width:none; z-index:24; padding:5px 6px;}
body.mob #wx-reihe{justify-content:flex-start; gap:5px;}
body.mob .wxb{padding:6px 8px; min-height:36px; font-size:12px;}
body.mob .wxb em{display:none;}                  /* auf 390 px zählt der Name, nicht die Nummer */
body.mob #wx-kopf{text-align:left; font-size:11px; margin-top:4px;}

/* 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{
  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;}
body.mob #buildbar{gap:8px; justify-content:flex-start;}
body.mob .bbtn{width:calc(33.33% - 6px); min-height:60px; padding:8px 30px 8px 6px;}
body.mob .kundebtn{padding-right:6px;}
body.mob .bbtn b{font-size:12px;}
/* 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;}