/* Kata Shogunate — Oberfläche. Schwarzes Lack, feines Gold, Pergament. Edel, kein Comic. */
:root{
  --ink:#0e0a08; --ink2:#1c1410; --ink3:#241a14;
  --gold:#c9a24a; --gold2:#8a6a2e; --shine:#f3d58a;
  --parch:#efe2c4; --parch2:#d6c095; --text:#2a1a10;
  --lacquer:#8e1b14; --lacquer2:#b3261b; --lacquer3:#5e0f0a;
  --jade:#2fc47a; --koku:#e0b25a; --tetsu:#a9b9cc;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --display:"Cinzel",serif;
  --body:"Cormorant Garamond","Noto Serif",serif;
  --mincho:"Shippori Mincho B1",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0e0a08;font-family:var(--body);color:var(--parch);user-select:none;-webkit-user-select:none;overscroll-behavior:none;font-variant-numeric:lining-nums tabular-nums}   /* Cormorant-Ziffern sonst Mediäval: 0 sah aus wie o (Astra R5) */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#overlay{position:fixed;inset:0;pointer-events:none;z-index:2}
svg{width:1em;height:1em;flex:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
[hidden]{display:none!important}

.hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.hud>*{pointer-events:auto}
.gold-ico svg *{stroke:var(--gold)}

/* ============ Titelbildschirm ============ */
#title{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:linear-gradient(rgba(10,7,5,.35),rgba(8,5,4,.55) 55%,rgba(6,4,3,.92)),url('../assets/ui/title-bg.webp') center/cover no-repeat #0b0806;   /* feste Grundfarbe: solange das Bild lädt, scheint das HUD nicht durch */
  cursor:pointer;transition:opacity .5s ease}
#title.hide{opacity:0;pointer-events:none}
#title .logo{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;padding-top:9vh}
#title .kanji{font-family:var(--mincho);font-weight:700;font-size:min(20vw,150px);line-height:1;color:var(--shine);text-shadow:0 0 30px rgba(243,213,138,.5),0 3px 0 var(--ink);letter-spacing:.05em}
#title .word{font-family:var(--display);font-weight:600;font-size:min(6.5vw,42px);letter-spacing:.42em;padding-left:.42em;color:var(--parch);text-shadow:0 2px 6px rgba(0,0,0,.7)}
#title .tap{margin:6vh 0 8vh;font-family:var(--display);font-size:14px;letter-spacing:.2em;color:var(--gold);padding:10px 26px;border:1px solid var(--gold);border-radius:2px;animation:tapglow 1.8s ease-in-out infinite}
@keyframes tapglow{50%{opacity:.45;box-shadow:0 0 18px rgba(201,162,74,.5)}}

/* ============ Kontur-Rahmen: Lack + Goldlinie ============ */
.lac{background:linear-gradient(180deg,var(--ink3),var(--ink) 70%);border:1px solid var(--gold2);box-shadow:inset 0 0 0 1px rgba(243,213,138,.18),0 4px 10px rgba(0,0,0,.5)}

/* ---- Profil ---- */
.profile{position:absolute;top:calc(8px + var(--sat));left:8px;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:26px;background:linear-gradient(180deg,rgba(28,20,16,.9),rgba(14,10,8,.85));border:1px solid var(--gold2);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.crest{position:relative;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a2a1e,#0e0a08);border:2px solid var(--gold);box-shadow:0 0 0 1px var(--ink),0 0 10px rgba(201,162,74,.3);display:grid;place-items:center}
.crest svg{width:32px;height:32px}
.crest b{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 3px;border-radius:10px;background:linear-gradient(var(--lacquer2),var(--lacquer3));border:1.5px solid var(--gold);display:grid;place-items:center;font:700 11px var(--display);color:var(--shine)}
.pinfo{display:flex;flex-direction:column;gap:3px}
.pname{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--shine)}
.xp{position:relative;width:108px;height:12px;border-radius:4px;background:#00000066;border:1px solid var(--gold2);overflow:hidden}
.xp i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(var(--gold),var(--gold2));transition:width .4s}
.xp span{position:absolute;left:0;right:0;top:0;display:block;line-height:12px;text-align:center;font:700 9px var(--display);color:#fff;text-shadow:0 1px 2px #000}   /* EP-Zahl im Balken (lag vorher unsichtbar darunter) */
.honor{display:flex;align-items:center;gap:4px;font:600 12px var(--display);color:var(--parch2)}
.honor svg{width:15px;height:15px}

/* ---- Zimmerleute ---- */
.builders{position:absolute;top:calc(8px + var(--sat));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;height:30px;box-sizing:border-box;padding:0 12px;border-radius:15px;background:rgba(14,10,8,.82);border:1px solid var(--gold2)}
.builders svg{width:16px;height:16px}
.builders span{font:700 13px var(--display);color:var(--shine)}
.builders small{display:none;font:600 10px var(--body);color:var(--parch2);margin-left:3px}
@media (min-width:700px){.builders small{display:inline}}

/* ---- Ressourcen ---- */
.res{position:absolute;top:calc(8px + var(--sat));right:8px;display:flex;align-items:center;gap:6px}
.bar{position:relative;display:flex;align-items:center;gap:5px;height:30px;padding:0 8px 0 4px;border-radius:15px;background:rgba(14,10,8,.82);border:1px solid var(--gold2)}
.bar svg{width:22px;height:22px;flex:none}
.bar i{display:none}
.bar span{font:700 14px var(--display);color:var(--parch);letter-spacing:.01em}
.bar .plus{width:16px;height:16px;border-radius:50%;border:1px solid var(--gold2);display:grid;place-items:center;font:14px/1 var(--body);color:var(--gold);margin-left:2px}
.bar small{display:none}
.bar.jade span{color:var(--shine)}
.bar.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.1)}}

/* ---- Runde Knöpfe ---- */
.round{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;border:1.5px solid var(--gold2);background:linear-gradient(180deg,var(--ink3),var(--ink));box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(243,213,138,.15);transition:transform .08s}
.round svg{width:26px;height:26px}
.round span{font:600 11px var(--display);letter-spacing:.06em;margin-top:2px;color:var(--parch2)}
.round:active{transform:translateY(2px)}
.round.red{background:linear-gradient(180deg,var(--lacquer2),var(--lacquer3));border-color:var(--shine)}
.round.gold{border-color:var(--gold2)}   /* PJ66 SOL krit103 #5: volles Gold nur noch Raid (Hauptaktion), Nebenknöpfe gedämpft */
.round.wood{border-color:var(--gold2)}
.round.big{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 50% 32%,#3a2a1e,var(--ink) 75%);border:2px solid var(--gold);box-shadow:0 0 0 1px var(--ink),0 0 22px rgba(201,162,74,.35),0 4px 10px rgba(0,0,0,.5)}
.round.big svg{width:38px;height:38px}
.round.big span{font-size:12px;color:var(--shine)}
#btn-attack{position:absolute;left:12px;bottom:calc(14px + var(--sab))}
.right-btns{position:absolute;right:12px;bottom:calc(16px + var(--sab));display:flex;gap:10px}
.dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;padding:0 4px;background:var(--lacquer2);border:1px solid var(--shine);font:700 10px var(--display);color:#fff;text-align:center;line-height:16px}

/* ---- Aufgaben-Streifen ---- */
.taskbar{position:fixed;left:50%;bottom:calc(16px + var(--sab));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:22px;max-width:min(92vw,460px);pointer-events:auto;background:linear-gradient(180deg,rgba(28,20,16,.92),rgba(14,10,8,.88));border:1px solid var(--gold2);box-shadow:0 4px 10px rgba(0,0,0,.4);cursor:pointer}
.taskbar svg{width:20px;height:20px;flex:none}
.taskbar .tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.taskbar b{font:600 12px var(--body);color:var(--parch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taskbar .tp{position:relative;width:150px;height:6px;border-radius:3px;background:#00000060;border:1px solid var(--gold2);overflow:hidden}
.taskbar .tp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(var(--gold),var(--gold2));width:var(--p,0%)}
.taskbar .arrow{margin-left:auto;color:var(--gold);font-size:16px}
.taskbar.ready{border-color:var(--gold)}   /* PJ63 SOL #5: roter Punkt doppelte den Aufgaben-Punkt (gleiche Bedingung), Gold-Rand reicht */

/* ---- Aufgaben-Fenster ---- */
.quests{display:flex;flex-direction:column;gap:12px}
.qchapter{border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));border:1px solid var(--gold2);padding:12px 14px;color:var(--text)}
.qchead{display:flex;align-items:center;justify-content:space-between;font:600 15px var(--display);letter-spacing:.02em}
.qchead span{font:600 12px var(--body);color:#5a4530}
.qbar{position:relative;height:8px;border-radius:4px;background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.2);margin-top:8px}
.qbar.big{height:12px;margin-top:10px}
.qbar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:linear-gradient(var(--gold),var(--gold2))}
.qbar small{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font:700 12px var(--display);color:#5a4530}
.qchapclaim{margin-top:10px}
.qlist{display:flex;flex-direction:column;gap:8px}
.qrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));border:1px solid var(--gold2);color:var(--text)}
.qrow.qdone-row{opacity:.62;filter:grayscale(.35)}
.qinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qinfo b{font:600 14px var(--display)}
.qinfo>span{font:500 12px var(--body);color:#5a4530}
.qinfo .qbar{width:calc(100% - 64px);max-width:260px;margin-bottom:4px}
.qrow .cost{font-size:15px;padding:3px 11px}.qrow .cost svg{width:18px;height:18px}   /* Belohnung +20 % (SOL PI8) */
.qreward{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:130px}
.qbtn{flex:none;padding:8px 16px;border-radius:14px;font:600 12px var(--display);letter-spacing:.03em;color:#3a2a10;background:linear-gradient(var(--parch),var(--parch2));border:1px solid var(--gold2)}
.qbtn.go{background:linear-gradient(var(--shine),var(--gold));box-shadow:0 0 10px rgba(201,162,74,.4)}
.qdone{flex:none;display:flex;align-items:center;gap:4px;font:600 12px var(--body);color:var(--gold2)}
.qdone svg{width:14px;height:14px}
.qstory h2{font-size:24px}
.qstorytext{font:500 14px var(--body);color:var(--parch);max-width:440px;margin:0 auto 14px;line-height:1.5}
@media (max-width:899px){
  .qrow{flex-wrap:wrap;row-gap:8px}
  .qreward{max-width:none;order:2;justify-content:flex-start}
  .qinfo{order:1;flex-basis:100%}
  .qbtn,.qdone{order:3;margin-left:auto}   /* Handy: Belohnung links, Go rechts in einer Zeile (SOL 10.10.) */
  .qbtn{min-height:44px}
}

/* ---- Auswahl-Leiste ---- */
.ribbon{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + var(--sab));z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;animation:rise .18s ease-out}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}
.rtitle{display:flex;flex-direction:column;align-items:center;padding:5px 20px;border-radius:6px;background:linear-gradient(180deg,var(--ink3),var(--ink));border:1px solid var(--gold)}
.rtitle b{font:600 14px var(--display);color:var(--shine);letter-spacing:.05em}
.rtitle span{font:600 11px var(--body);color:var(--parch2)}
.ractions{display:flex;gap:8px}
.rbtn{position:relative;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--gold2);background:radial-gradient(circle at 50% 32%,var(--parch),var(--parch2) 75%);box-shadow:0 3px 6px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:var(--text)}
.rbtn svg{width:22px;height:22px}
.rbtn .cost{font:700 11px var(--body);display:flex;gap:2px;align-items:center;color:var(--text);position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--parch2);border:1px solid var(--gold2);border-radius:9px;padding:1px 5px;z-index:1}   /* unter dem Knopf: bis zu 3 Kosten passen nicht in den Kreis */
.rbtn .cost svg{width:11px;height:11px}
.rbtn:active{transform:translateY(2px)}
.rbtn.off{filter:grayscale(.7) brightness(.85)}
.rbtn.go{background:radial-gradient(circle at 50% 32%,#e8f3d8,var(--jade) 85%)}

/* ---- Platzieren ---- */
.placebar{position:fixed;z-index:6;display:flex;gap:10px;transform:translate(-50%,-100%)}
.sq{width:42px;height:38px;border-radius:8px;border:1.5px solid var(--gold);font-size:18px;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.sq.red{background:linear-gradient(var(--lacquer2),var(--lacquer3))}
.sq.green{background:linear-gradient(#5fbf6a,#2f8a3a)}
.sq:disabled{filter:grayscale(1) brightness(.8)}

/* ---- Gebäude-Namensschilder ---- */
.nametag{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:3px;pointer-events:none;white-space:nowrap;background:rgba(14,10,8,.72);border:1px solid var(--gold2);transition:opacity .12s ease-out}
.nametag.hid{opacity:0;pointer-events:none}
.nametag .rank{width:20px;height:20px;transform:rotate(45deg);background:linear-gradient(135deg,#6a1c14,#33100b);border:1px solid var(--gold2);display:grid;place-items:center}
.nametag:not(.key){background:rgba(14,10,8,.5);border-color:rgba(138,106,46,.45);padding:2px 8px 2px 3px}   /* Standard leiser, Tenshu/Auswahl hervor (Astra R5) */
.nametag:not(.key) .rank{width:16px;height:16px;background:#1c140d;border-color:rgba(138,106,46,.6)}   /* Rot nur Tenshu/Auswahl (SOL krit104 #3) */
.nametag:not(.key) .rank b{color:var(--gold)}
.nametag:not(.key) span{font-size:11px}
.nametag.key{background:rgba(14,10,8,.85);border-color:var(--gold)}
.nametag.key span:last-child{font:600 13px var(--display);letter-spacing:.06em;color:var(--shine)}
.nametag .rank b{transform:rotate(-45deg);font:700 10px var(--display);color:#fff}
.nametag span{font:600 12px var(--body);color:var(--parch)}

/* ---- Ernteblasen, Bauzeit, Lebensbalken ---- */
.bubble{position:absolute;width:36px;height:36px;margin:-42px 0 0 -18px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--parch),var(--parch2));border:1.5px solid var(--gold);box-shadow:0 3px 6px rgba(0,0,0,.4);pointer-events:auto;display:grid;place-items:center;animation:bob 1.2s ease-in-out infinite}
.bubble svg{width:20px;height:20px}
.bubble.full{background:radial-gradient(circle at 38% 32%,#ffc2b4,#d9503f);border-color:#ffe2a0;box-shadow:0 0 0 3px rgba(217,80,63,.45),0 3px 6px rgba(0,0,0,.4);animation-duration:.6s}   /* voller Sammler: rot wie CoC */
.info .full{color:#ff7a66}
@keyframes bob{50%{margin-top:-48px}}
.timer{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px}
.timer span{font:600 11px var(--body);color:var(--parch);text-shadow:0 1px 2px #000}
.timer i{display:block;width:60px;height:6px;border-radius:3px;border:1px solid var(--gold2);background:#00000080;overflow:hidden}
.timer i::before{content:"";display:block;height:100%;width:var(--p,0%);background:linear-gradient(var(--gold),var(--gold2))}
.hpbar{position:absolute;width:44px;height:6px;margin-left:-22px;border-radius:3px;border:1px solid var(--ink);background:#1d1410;overflow:hidden}
.hpbar::before{content:"";display:block;height:100%;width:var(--p,100%);background:linear-gradient(var(--jade),#1f8a4a)}
.hpbar.foe::before{background:linear-gradient(var(--lacquer2),var(--lacquer3))}
.hpbar.unit{width:22px;height:4px;margin-left:-11px}
.fly{position:fixed;z-index:9;width:26px;height:26px;margin:-13px;pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.3,.7,1),opacity .7s}
.pop{position:absolute;transform:translate(-50%,-50%);font:700 14px var(--display);color:var(--shine);text-shadow:0 1px 3px #000;animation:popup 1s ease-out forwards;white-space:nowrap}
@keyframes popup{to{transform:translate(-50%,-190%);opacity:0}}

/* ============ Fenster ============ */
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(6,4,3,.68);backdrop-filter:blur(2px);padding:12px}
.panel{position:relative;width:min(640px,100%);max-height:min(90vh,760px);display:flex;flex-direction:column;border-radius:6px;
  background:linear-gradient(180deg,var(--ink3),var(--ink) 60%);
  border:1px solid var(--gold2);box-shadow:0 0 0 1px var(--ink),inset 0 0 0 1px rgba(243,213,138,.12),0 20px 50px rgba(0,0,0,.6);animation:pop .2s cubic-bezier(.3,1.3,.6,1)}
.panel:has(.buildview,.storeview,.army2,.heroes,.research){width:min(1040px,100%)}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.ptitle{position:relative;display:flex;align-items:center;gap:10px;padding:14px 50px 12px 20px;border-bottom:1px solid var(--gold2)}
.ptitle::before{content:"";width:5px;align-self:stretch;background:linear-gradient(var(--lacquer2),var(--lacquer3));border-radius:2px;margin-right:2px}
.ptitle{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.06em;color:var(--shine)}
.close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--gold2);color:var(--parch2);font-size:15px;line-height:42px;text-align:center}
.close:hover{color:var(--shine);border-color:var(--gold)}
.ptabs{display:flex;gap:2px;padding:10px 16px 0;flex-wrap:wrap;border-bottom:1px solid rgba(201,162,74,.25)}
.ptabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 14px;border-radius:4px 4px 0 0;font:600 12px var(--body);color:var(--parch2);border-bottom:2px solid transparent}
.ptabs button.on{color:var(--shine);border-bottom-color:var(--gold);background:rgba(201,162,74,.08)}
.pbody{overflow:auto;padding:16px}
.pbody.plain{padding:16px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{position:relative;border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));border:1px solid var(--gold2);box-shadow:0 3px 8px rgba(0,0,0,.35);padding:0 0 8px;text-align:center;overflow:hidden;transition:transform .08s;color:var(--text)}
.card:active{transform:translateY(2px)}
.card.sel{outline:2px solid var(--gold);outline-offset:-2px}
.card .pic{height:96px;background:radial-gradient(ellipse at 50% 100%,#00000030,transparent 70%),linear-gradient(180deg,var(--ink3),var(--ink2));border-bottom:1px solid var(--gold2);display:grid;place-items:center;position:relative}
.card .pic img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.card .jp{position:absolute;left:5px;top:4px;font:700 13px var(--mincho);color:var(--shine);writing-mode:vertical-rl;opacity:.85}
.card .cnt{position:absolute;right:5px;top:4px;font:700 11px var(--display);color:var(--shine)}
.card h4{margin:7px 0 0;font:600 15px var(--display);letter-spacing:.02em;color:var(--text)}
.card .de{font:600 11px var(--body);color:#5a4530;margin-bottom:4px}
.cost{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--body);padding:2px 9px;border-radius:11px;background:rgba(14,10,8,.08);color:var(--text)}
.cost svg{width:15px;height:15px}
.cost.no{color:var(--lacquer2)}
.card .time{font:600 11px var(--body);color:#5a4530;margin-top:4px;display:flex;justify-content:center;gap:3px;align-items:center}
.card .time svg{width:12px;height:12px}
.card.locked{filter:grayscale(.4) brightness(1.15);opacity:.9}   /* gesperrt lesbar statt fast schwarz (SOL 08.10.) */
.card .lock{position:absolute;inset:auto 0 0;font:600 11px var(--body);color:#fff;background:rgba(14,10,8,.75);padding:4px}
.buildbtn{display:block;margin:6px auto 0;padding:5px 18px;border-radius:12px;font:600 12px var(--display);letter-spacing:.05em;color:#3a2a10;background:linear-gradient(var(--shine),var(--gold));border:1px solid var(--gold2)}
.buildbtn:disabled{filter:grayscale(.4)}

/* ---- Build-Detailspalte (Vorlage "Build") ---- */
.buildview{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.detail{position:sticky;top:0;border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));border:1px solid var(--gold2);padding:14px;color:var(--text)}
.detail img{width:100%;border-radius:5px;border:1px solid var(--gold2);background:linear-gradient(180deg,var(--ink3),var(--ink2))}
.detail h3{margin:10px 0 2px;font:600 18px var(--display);color:var(--text)}
.detail .de{font:600 12px var(--body);color:#5a4530;margin-bottom:8px}
.detail p{font:500 13px var(--body);margin:0 0 10px;color:var(--text)}
.detail .buildbtn{display:block;width:100%;margin-top:8px;padding:10px;font-size:14px}
@media (max-width:700px){.buildview{grid-template-columns:1fr}.detail{position:static}}

/* ---- Store: auswählbare Liste + genau eine Kaufaktion ---- */
.store-notice,.store-free{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(201,162,74,.32);border-radius:4px;background:rgba(201,162,74,.08);font:600 13px/1.4 var(--body);color:var(--parch)}
.store-free{margin:14px 0 0;color:var(--parch2);background:transparent}
.storeview{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.store-list{display:flex;flex-direction:column;gap:6px}
.store-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:62px;padding:7px 10px;border:1px solid rgba(201,162,74,.28);border-radius:4px;background:rgba(255,255,255,.035);text-align:left;color:var(--parch)}
.store-card:hover,.store-card.sel{border-color:var(--gold);background:rgba(201,162,74,.1)}
.store-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--gold2);border-radius:50%;font:800 24px var(--mincho);color:var(--shine);background:var(--ink)}
.store-card>span:nth-child(2){display:flex;min-width:0;flex-direction:column;gap:2px}.store-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 15px var(--display);color:var(--shine)}
.store-card small{font:700 13px var(--body);color:var(--parch2)}.store-card i{font:700 11px var(--body);font-style:normal;color:var(--shine)}
.store-detail{position:sticky;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border:1px solid var(--gold2);border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));color:var(--text)}
.store-detail .store-seal{font:800 46px/1 var(--mincho);color:var(--lacquer)}.store-detail>small{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6b4a2c}
.store-detail h3{margin:2px 0 0;font:700 23px/1.12 var(--display);color:var(--ink)}.store-detail p{margin:0;font:500 13px/1.45 var(--body)}
.store-price{font:700 21px var(--display);color:var(--lacquer)}.store-buy{width:100%;min-height:44px;justify-content:center;margin-top:4px}.store-buy:disabled{opacity:.65;filter:grayscale(.45)}
.store-method-label{display:flex;width:100%;flex-direction:column;gap:4px;font:700 11px var(--body);color:#6b4a2c}.store-method-label select{min-height:40px;padding:6px 8px;border:1px solid #8a6a2e;border-radius:4px;background:var(--parch);font:600 13px var(--body);color:var(--text)}
.store-empty{font:600 13px var(--body);color:var(--parch2)}
@media (max-width:700px){.storeview{grid-template-columns:1fr}.store-detail{position:static;grid-row:1}.store-card{min-height:56px}.store-mark{width:40px;height:40px;font-size:21px}}

.army{display:flex;flex-direction:column;gap:12px}
.camp{display:flex;align-items:center;gap:10px;font:600 13px var(--body);color:var(--parch2);text-shadow:0 1px 2px #000}
.camp .xp{flex:1;width:auto;height:14px}
.camp .xp span{top:15px}
.queue{display:flex;gap:8px;min-height:70px;padding:8px;border-radius:6px;background:rgba(0,0,0,.25);border:1px dashed var(--gold2);overflow-x:auto}
.queue:empty::before{content:"Keine Ausbildung. Tippe unten auf einen Krieger.";margin:auto;font:600 12px var(--body);color:var(--parch2)}
.qitem{position:relative;flex:none;width:56px;height:56px;border-radius:5px;border:1px solid var(--gold2);background:var(--ink2);overflow:hidden}
.qitem img{width:100%;height:100%;object-fit:cover}
.qitem b{position:absolute;right:2px;bottom:0;font:700 11px var(--display);color:var(--shine)}
.qitem i{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);width:var(--p,0%)}
.info{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.info img{width:150px;border-radius:6px;border:1px solid var(--gold2);background:linear-gradient(180deg,var(--ink3),var(--ink2))}
.info p{margin:0 0 10px;font:500 14px var(--body);color:var(--parch)}
.stat{display:flex;justify-content:space-between;padding:6px 10px;border-radius:4px;background:rgba(201,162,74,.08);font:600 13px var(--body);margin-bottom:4px;color:var(--parch)}
.detail .stat{color:var(--text)}   /* im hellen Bau-Detail sonst hell auf hell (1,3:1) */

/* ---- Kampf ---- */
.enemy{position:absolute;top:calc(16px + var(--sat));left:16px;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:4px;background:linear-gradient(90deg,rgba(34,17,12,.84),rgba(23,12,9,.58) 70%,rgba(15,8,6,0))}   /* Platte: Beute stand sonst direkt auf Gras/Bäumen (SOL R7) */
.ename{font:600 16px var(--display);color:var(--shine)}
.eloot{font:700 12px var(--body);color:var(--parch2)}
.lootrow{display:flex;align-items:center;gap:6px;font:800 20px var(--display);color:var(--parch);text-shadow:0 2px 3px rgba(0,0,0,.7)}
.lootrow svg{width:24px;height:24px}   /* Beute bei Gegnersuche groß wie CoC */
.bstatus{position:absolute;top:calc(16px + var(--sat));right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:10px 14px;border-radius:4px;background:linear-gradient(270deg,rgba(34,17,12,.84),rgba(23,12,9,.58) 70%,rgba(15,8,6,0))}
.clock{font:700 20px var(--display);color:var(--shine)}
.stars{display:flex;gap:2px}
.stars i{width:20px;height:20px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4l8 18 20 2-15 13 5 20-18-11-18 11 5-20L4 24l20-2z' fill='none' stroke='%23e0c078' stroke-width='4' stroke-linejoin='round'/></svg>") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
.stars i.on{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4l8 18 20 2-15 13 5 20-18-11-18 11 5-20L4 24l20-2z' fill='%23c9a24a' stroke='%230e0a08' stroke-width='3'/></svg>");animation:bump .4s}
.pct{font:600 14px var(--display);color:var(--parch2)}
.bbtns{position:absolute;right:calc(16px + var(--sar));top:calc(140px + var(--sat));display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pill{padding:8px 18px;border-radius:16px;border:1px solid var(--gold);font:600 13px var(--display);letter-spacing:.03em;display:flex;align-items:center;gap:6px;color:var(--shine);background:linear-gradient(var(--ink3),var(--ink))}
.pill small{display:flex;align-items:center;gap:2px;font:600 11px var(--body);color:var(--parch2)}
.pill small svg{width:13px;height:13px}
.pill.gold{background:linear-gradient(var(--gold),#b08a3e);color:#2a1a10}   /* heller Verlauf: Kontrast ≥ 4,5:1 (vorher 3,3:1) */
.pill.gold small{color:#2a1a10}
.pill.red{background:linear-gradient(var(--lacquer2),var(--lacquer3));color:#fff;border-color:var(--shine)}
.pill.green{background:linear-gradient(#5fbf6a,#2f8a3a);color:#fff;border-color:#bfe8a0}
#b-end{min-height:44px}
.pill:active{transform:translateY(2px)}
.bhint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(122px + var(--sab));padding:6px 16px;border-radius:14px;background:rgba(14,10,8,.75);border:1px solid var(--gold2);color:var(--parch);font:600 12px var(--body);text-align:center;max-width:90vw;pointer-events:none}
.troopbar{position:absolute;left:0;right:0;bottom:0;padding:10px 10px calc(26px + var(--sab));display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:linear-gradient(transparent 35%,rgba(6,4,3,.6))}
.tcard{position:relative;width:72px;height:92px;border-radius:6px;border:1px solid var(--gold2);background:linear-gradient(180deg,var(--parch),var(--parch2));box-shadow:0 3px 6px rgba(0,0,0,.4);overflow:hidden;color:var(--text)}
.tkey{display:none;position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 3px;border-radius:4px;background:rgba(20,12,6,.78);color:#f3dcae;font:700 11px/18px var(--display);text-align:center;pointer-events:none}
@media (min-width:800px){.tkey{display:block}}
.tcard img{width:100%;height:68px;object-fit:cover;background:linear-gradient(180deg,var(--ink3),var(--ink2))}
.tcard b{position:absolute;left:3px;top:3px;display:grid;place-items:center;min-width:20px;height:20px;box-sizing:border-box;padding:0 4px;border:1px solid var(--gold2);border-radius:10px;background:rgba(14,10,8,.82);font:700 12px/20px var(--display);color:var(--shine);text-shadow:0 1px 2px #000}
.tcard span{display:block;font:700 12px var(--body);color:var(--text);text-align:center;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.tcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 3px 6px rgba(0,0,0,.4);transform:translateY(-6px)}
@media (min-width:601px){.troopbar{left:50%;right:auto;bottom:calc(16px + var(--sab));transform:translateX(-50%);padding:8px;border:1px solid #6b4a22;border-radius:6px;background:linear-gradient(#2a1611,#170c09 55%,#0f0806);box-shadow:inset 0 1px 0 rgba(243,213,138,.14),0 4px 10px rgba(0,0,0,.45);flex-wrap:nowrap}}
.tcard.empty{filter:grayscale(1);opacity:.55}
@media (min-width:900px){.tcard{width:84px;height:108px}.tcard img{height:84px}.bhint{bottom:calc(150px + var(--sab))}}   /* PC-Karten größer (SOL krit108 #4) */

/* ---- Ergebnis ---- */
.result{text-align:center;padding:6px 4px 2px}
.result h2{font:600 34px var(--display);margin:4px 0 6px;color:var(--shine)}
.result .bigstars{display:flex;justify-content:center;gap:6px;margin:6px 0 14px}
.result .bigstars svg{width:52px;height:52px;opacity:.2}
.result .bigstars svg.on{opacity:1;animation:starin .5s cubic-bezier(.3,1.8,.6,1) backwards}
.result .bigstars svg:nth-child(2){width:66px;height:66px;margin-top:-8px}
@keyframes starin{from{transform:scale(2.2) rotate(-30deg);opacity:0}}
.result .row{display:flex;justify-content:center;gap:12px;margin:10px 0 16px;flex-wrap:wrap}
.result .pill{margin:0 auto;font-size:15px;padding:10px 22px}

/* ---- Wolken beim Suchen ---- */
.clouds{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;background:#0e0a08}
.clouds i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(201,162,74,.25),transparent 70%);transition:transform .7s cubic-bezier(.6,0,.3,1)}
.clouds i:nth-child(1){left:-30vmax;top:-30vmax;transform:translate(-120%,-60%)}
.clouds i:nth-child(2){right:-30vmax;top:-25vmax;transform:translate(120%,-60%)}
.clouds i:nth-child(3){left:-25vmax;bottom:-30vmax;transform:translate(-120%,60%)}
.clouds i:nth-child(4){right:-25vmax;bottom:-30vmax;transform:translate(120%,60%)}
.clouds i:nth-child(5){left:-10vmax;top:-10vmax;transform:translate(0,-160%)}
.clouds i:nth-child(6){left:-10vmax;bottom:-20vmax;transform:translate(0,160%)}
.clouds b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 18px var(--display);letter-spacing:.08em;color:var(--shine);opacity:0;transition:opacity .3s}
.clouds.on{pointer-events:auto;opacity:1}
.clouds{opacity:0;transition:opacity .35s}
.clouds.on i{transform:none}
.clouds.on b{opacity:1;transition-delay:.4s}

.toast{position:fixed;left:50%;top:calc(100px + var(--sat));transform:translate(-50%,-10px);z-index:41;padding:9px 20px;border-radius:14px;background:rgba(14,10,8,.94);border:1px solid var(--gold);font:600 14px var(--body);color:var(--parch);opacity:0;transition:.25s;pointer-events:none;text-align:center;max-width:88vw;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.err{position:fixed;left:0;right:0;bottom:0;z-index:99;background:#2a0a12;color:#ff8a9a;font:12px ui-monospace,monospace;white-space:pre-wrap;padding:10px;display:none;max-height:40%;overflow:auto}

/* ---- Handy / Hochformat ---- */
@media (max-width:899px){
  .profile{top:calc(6px + var(--sat));left:6px;padding:3px 10px 3px 3px}
  .crest{width:42px;height:42px}.crest svg{width:26px;height:26px}
  .pname{font-size:12px}.xp{width:78px}
  .res{flex-wrap:wrap;justify-content:flex-end;max-width:56vw;top:calc(6px + var(--sat));right:6px;gap:4px}
  .bar{height:24px;padding:0 6px 0 3px}.bar svg{width:17px;height:17px}.bar span{font-size:11px}
  .builders{display:none}
  .round{width:50px;height:50px;border-radius:12px}.round svg{width:22px;height:22px}.round span{display:none}
  .round.big{width:66px;height:66px}.round.big svg{width:28px;height:28px}.round.big span{display:block;font-size:11px}
  #btn-attack{left:auto;right:12px;bottom:calc(70px + var(--sab))}
  .right-btns{left:12px;right:auto;bottom:calc(14px + var(--sab));flex-direction:row}
  .taskbar{bottom:calc(78px + var(--sab));max-width:78vw;padding:6px 12px}
  .taskbar .tp{width:96px}
  .ribbon{bottom:calc(146px + var(--sab))}
  .rbtn{width:50px;height:50px}.rbtn svg{width:18px;height:18px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .buildview{grid-template-columns:1fr}
  .info{grid-template-columns:96px 1fr}.info img{width:96px}
  .panel{width:100%;max-height:94vh;border-radius:4px}
  .bbtns{top:calc(134px + var(--sat))}.enemy{top:calc(8px + var(--sat));left:8px;padding:8px 10px}.bstatus{top:calc(8px + var(--sat));right:8px;padding:8px 10px}   /* Handy: Kampfkoepfe eng, sonst liegt Retreat im Beute-Block */
  .bhint{bottom:calc(112px + var(--sab))}
  .tcard{width:56px;height:76px}.tcard img{height:54px}.tcard span{font-size:11px}
  #title .kanji{font-size:26vw}
  #title .word{font-size:5.4vw;letter-spacing:.3em;padding-left:.3em}
}

/* Scrollleiste passend zum Lack-Stil (statt weißer Systemleiste) */
*{scrollbar-width:thin;scrollbar-color:rgba(138,106,46,.45) transparent}   /* dezent: Scrollen bleibt möglich, Leiste stört die Fenster nicht (SOL 08.10.) */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(138,106,46,.45);border-radius:2px}
::-webkit-scrollbar-button{display:none}

/* ============ Volles HUD nach Vorlage (Leiste oben, Menü links, Karten rechts, Symbolreihe unten) ============ */
.topbar{position:absolute;left:0;right:0;top:0;height:calc(66px + var(--sat));pointer-events:none;
  background:linear-gradient(180deg,rgba(10,7,5,.92),rgba(14,10,8,.72) 70%,rgba(14,10,8,0));border-bottom:1px solid rgba(201,162,74,.28)}
.logo-mini{position:absolute;top:calc(6px + var(--sat));left:12px;display:flex;align-items:center;gap:8px;pointer-events:none}
.logo-mini b{font:700 40px/1 var(--mincho);color:var(--shine);text-shadow:0 0 14px rgba(243,213,138,.45),0 2px 0 #000}
.logo-mini span{font:600 11px/1.15 var(--display);letter-spacing:.28em;color:var(--parch)}
.hud .profile{left:154px}
.right-btns{display:none}

.sidenav{position:absolute;left:16px;top:calc(84px + var(--sat));width:176px;display:flex;flex-direction:column;border:1px solid var(--gold2);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,14,11,.9),rgba(12,8,6,.86));box-shadow:0 6px 16px rgba(0,0,0,.45)}
.sidenav button{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-bottom:1px solid rgba(201,162,74,.16);font:600 14px var(--body);color:var(--parch);text-align:left;transition:background .15s}
.sidenav button:last-child{border-bottom:0}
.more{display:flex;flex-direction:column;border:1px solid var(--gold2);border-radius:6px;overflow:hidden;background:linear-gradient(180deg,rgba(20,14,11,.9),rgba(12,8,6,.86))}
.more button{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;border-bottom:1px solid rgba(201,162,74,.16);font:600 16px var(--body);color:var(--parch);text-align:left}
.more button:last-child{border-bottom:0}
.more button svg{width:28px;height:28px}
.more button:active{background:rgba(201,162,74,.12)}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 16px;border:1px solid var(--gold2);border-radius:6px;background:rgba(12,8,6,.6);font:600 16px var(--body);color:var(--parch)}
.opts{gap:0}.opt:not(.col){border-radius:0;border-top-width:0;border-bottom-color:rgba(201,162,74,.16)}.opt:not(.col):first-child{border-top-width:1px;border-radius:6px 6px 0 0}.opt:not(.col):has(+ .col){border-bottom-color:var(--gold2);border-radius:0 0 6px 6px}.opt.col{margin-top:16px}.opt.col:first-child{margin-top:0}   /* Einstellungen: einfache Zeilen als eine Liste mit Trennlinien, Sonderblöcke bleiben Karten (SOL 10.10.) */
.opt input[type=checkbox]{width:24px;height:24px;accent-color:var(--gold)}
.opt input[type=range]{flex:1;max-width:240px;accent-color:var(--gold)}
#o-reset{align-self:flex-start;margin-top:8px}
.sidenav button svg{width:26px;height:26px}
.sidenav button:hover{background:rgba(201,162,74,.08)}
.sidenav button.on{background:linear-gradient(90deg,rgba(142,27,20,.55),rgba(94,15,10,.12));color:var(--shine);box-shadow:inset 0 0 0 1px rgba(201,162,74,.45)}
.soon{opacity:.55}
.soon::after{content:"bald";position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 11px var(--display);letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold2);border-radius:3px;padding:1px 4px}
.ndot{position:absolute;top:8px;left:30px;width:9px;height:9px;border-radius:50%;background:var(--lacquer2);border:1.5px solid var(--shine)}

.season{position:absolute;left:16px;top:calc(84px + 7*42px + 12px + var(--sat));width:176px;height:72px;border:1px solid var(--gold2);border-radius:6px;overflow:hidden;text-align:left;padding:8px 10px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,5,4,.5),rgba(8,5,4,.92) 65%),url('../assets/ui/ad-heer.webp') center/cover}   /* Überschrift oben lesbar (krit107) */
.season small{font:600 11px var(--display);letter-spacing:.2em;color:var(--gold)}
.season b{font:600 17px var(--display);color:var(--shine)}
.season span{font:600 11px var(--body);color:var(--parch2)}

.promo{position:absolute;right:16px;top:calc(56px + var(--sat));width:232px;display:flex;flex-direction:column;gap:8px}
.pcard{position:relative;border:1px solid var(--gold2);border-radius:6px;overflow:hidden;text-align:left;box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .15s,border-color .15s}
.pcard:hover{transform:translateY(-1px);border-color:var(--gold)}
.pcard.big{height:104px;padding:10px 12px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(8,5,4,.92)),url('../assets/ui/ad-kassen.webp') center/cover}
html.nacht .season{background:linear-gradient(180deg,rgba(8,12,26,.5) 0%,rgba(8,5,4,.94) 100%),url('../assets/ui/ad-heer.webp') center/cover}   /* nachts wie die Raid-Karte */
html.nacht .pcard.big{background:linear-gradient(180deg,rgba(8,12,26,.5) 0%,rgba(8,5,4,.94) 100%),url('../assets/ui/ad-kassen.webp') center/cover}   /* nachts: Tagesmotiv gedämpft, Text bleibt hell (Astra R4) */
.pcard.big b{font:700 24px var(--display);color:var(--shine);text-shadow:0 2px 6px #000}
.pcard.big small{font:600 13px var(--body);color:var(--parch)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pgrid .pcard{height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle at 50% 35%,#3a2a1e,#120c09 80%)}
.pgrid .pcard svg{width:34px;height:34px}
.pgrid .pcard b{font:600 13px var(--display);color:var(--parch)}
.pcard.event{height:72px;padding:8px 12px;background:linear-gradient(180deg,#24150f,#120b08);border-color:rgba(201,162,74,.4)}   /* Lack statt Rot: Rot bleibt Alarm/Raid (krit107 #5) */
.pcard.event small{font:600 11px var(--display);letter-spacing:.18em;color:var(--gold)}
.pcard.event b{display:block;font:600 16px var(--display);color:var(--shine)}
.pcard.event span{font:600 12px var(--body);color:var(--parch2)}

.chronik{position:absolute;left:16px;bottom:calc(16px + var(--sab));width:min(340px,30vw);display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-radius:6px;background:rgba(10,7,5,.62);border:1px solid rgba(201,162,74,.22);pointer-events:none}
.chronik:empty{display:none}
.chronik p{margin:0;font:600 12px var(--body);color:var(--parch2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chronik p i{font-style:normal;color:var(--gold)}

.bottomnav{position:absolute;right:calc(120px + var(--sar));bottom:calc(16px + var(--sab));display:flex;gap:8px}
.bottomnav button{position:relative;width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 50% 30%,#3a2a1e,#0e0a08 75%);border:2px solid var(--gold2);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.bottomnav button svg{width:26px;height:26px}
.bottomnav button span{max-width:100%;font:600 11px/1 var(--display);letter-spacing:0;color:var(--parch2);white-space:nowrap}
@media (max-width:380px){.bottomnav button span{font-size:10.5px;letter-spacing:0}}
.bottomnav .soon::after{top:-4px;right:-6px;transform:none;background:#0e0a08}
.bottomnav .ndot{top:4px;left:auto;right:6px}
#btn-attack{left:auto;right:calc(16px + var(--sar));bottom:calc(16px + var(--sab))}
.hud .taskbar{bottom:calc(88px + var(--sab))}
/* PC: Seitenleiste führt schon Bauen/Heer/Aufgaben/Helden → keine Doppel rechts und unten (ruhigeres Bild) */
@media (min-width:900px){ .pgrid{display:none} .bottomnav button:not([data-nav="mehr"]){display:none} }

@media (max-width:1180px) and (min-width:900px){ .promo{width:200px} .pcard.big{height:96px} .sidenav{width:164px} .season{width:164px} }
@media (max-width:899px){
  .logo-mini,.sidenav,.season,.promo,.chronik{display:none}
  .hud .profile{left:6px}
  .topbar{height:calc(58px + var(--sat))}
  .bottomnav{left:calc(8px + var(--sal));right:calc(92px + var(--sar));justify-content:space-between;gap:4px}
  .bottomnav button{width:auto;flex:1;max-width:64px;height:56px;border-radius:12px}
  #btn-attack{right:calc(16px + var(--sar));bottom:calc(16px + var(--sab))}
  .hud .taskbar{bottom:calc(88px + var(--sab))}
}
@media (max-width:600px){
  .bottomnav button{max-width:60px;height:52px;border-radius:10px}
  .bottomnav button svg{width:22px;height:22px}
  .bottomnav button span{font-size:10.5px}
  .hud .taskbar{bottom:calc(76px + var(--sab));max-width:64vw;padding:4px 10px;gap:8px}
  body.placing .bottomnav,body.placing .taskbar,body.placing #btn-attack{display:none}
  .hud .taskbar svg{width:18px;height:18px}
  .hud .taskbar b{font-size:11px}
  .hud .taskbar .tp{width:80px;height:5px}
}
.hud .profile{left:190px}
.sidenav button span{flex:1;min-width:0}
.sidenav .soon::after{position:static;transform:none;margin-left:auto;flex:none}
@media (max-width:1180px) and (min-width:900px){ .sidenav button{font-size:13px;gap:8px} }

/* ============ Kommandanten ============ */
.heroes{display:grid;grid-template-columns:200px 1fr;gap:14px}
.hlist{display:flex;flex-direction:column;gap:8px}
.hcard{position:relative;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px;border-radius:6px;border:1px solid var(--gold2);background:linear-gradient(180deg,#241a14,#120c09);text-align:left}
.hcard img{grid-row:1/3;width:56px;height:56px;object-fit:cover;border-radius:50%;border:1.5px solid var(--gold2);background:radial-gradient(circle,#3a2a1e,#0e0a08)}
.hcard b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 15px var(--display);color:var(--shine)}
.hcard small{font:600 12px var(--body);color:var(--parch2)}
.hcard i{position:absolute;right:6px;top:6px;font:600 11px var(--display);letter-spacing:.1em;color:var(--ink);background:var(--gold);border-radius:3px;padding:1px 5px;font-style:normal}
.hcard.on{border-color:var(--shine);box-shadow:0 0 0 1px var(--shine),0 3px 6px rgba(0,0,0,.4)}
.hcard.locked{filter:grayscale(.9);opacity:.6}
.hdetail{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch2));color:var(--text)}
.hhead{display:flex;gap:12px;align-items:center}
.hhead img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--gold2);background:radial-gradient(circle,#3a2a1e,#0e0a08)}
.hhead h3{margin:0;font:700 24px var(--display);color:var(--ink)}
.htitle{margin:0 0 6px;font:600 14px var(--body);color:#5a3a1e}
.hxp{width:180px;height:8px;background:#0003}
.hhead small{font:600 12px var(--body);color:#5a3a1e}
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hstats span{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:4px;background:#0000000f;font:600 11px var(--body);color:#5a3a1e}
.hstats b{font:700 16px var(--display);color:var(--ink)}
.hability{padding:8px 10px;border:1px solid rgba(192,57,43,.55);background:#8e1b1410;font:600 14px var(--body)}
.hability b{color:var(--lacquer)}
.hability small{display:block;font-size:12px;color:#5a3a1e}
.hpoints{font:600 14px var(--body)}
.hpoints b{color:var(--lacquer);font-size:16px}
.talents{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tbranch h5{margin:0 0 4px;font:600 12px var(--display);letter-spacing:.14em;color:#5a3a1e;text-transform:uppercase}
.talent{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:66px;margin-bottom:6px;padding:10px 12px;border-radius:4px;border:1px solid #8a6a2e66;background:#fff8;text-align:left}
.talent b{font:600 13px var(--display);color:var(--ink)}
.talent small{font:600 12px/1.35 var(--body);color:#5a3a1e}
.talent span{font-size:12px;color:var(--lacquer);letter-spacing:2px}
.talent.has{border-color:var(--lacquer2);background:#fff}
.talent:disabled{opacity:.65}
.talent:not(:disabled):hover{border-color:var(--lacquer2)}
.hlock{margin:0;font:600 14px var(--body);color:var(--lacquer)}
.skin-choices{display:flex;flex-wrap:wrap;gap:6px}.skin-choice{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;border:1px solid #8a6a2e66;border-radius:4px;background:#fff6;text-align:left}.skin-choice span{font:800 20px var(--mincho);color:var(--lacquer)}.skin-choice b{font:600 12px var(--display);color:var(--ink)}.skin-choice.on{border-color:var(--lacquer);background:#fff}
@media (max-width:700px){ .heroes{grid-template-columns:1fr} .hlist{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .hcard{scroll-snap-align:start} .hcard{min-width:176px} .talents{grid-template-columns:1fr} .hstats{grid-template-columns:repeat(2,1fr)} }

/* Faehigkeit im Kampf: Ring fuellt sich mit Wut */
.ability{position:absolute;right:calc(16px + var(--sar));bottom:calc(128px + var(--sab));width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 50% 35%,#3a2a1e,#0e0a08 75%) padding-box,conic-gradient(var(--shine) var(--r,0%),#3a2a1e 0) border-box;border:3px solid transparent;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ability svg{width:30px;height:30px}
.ability span{font:600 11px/1 var(--display);color:var(--parch2)}
@media (max-width:600px){.troopbar{right:0;padding-bottom:calc(16px + var(--sab));flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;gap:4px;padding-left:calc(8px + var(--sal,0px));padding-right:calc(86px + var(--sar));scrollbar-width:none}.troopbar .tcard{flex:none}.ability{right:calc(10px + var(--sar));bottom:calc(26px + var(--sab))}}
@media (min-width:900px){.ability{bottom:calc(144px + var(--sab))}}
.ability.ready{animation:abilityGlow 1s ease-in-out infinite;cursor:pointer}
.ability.dead{filter:grayscale(1);opacity:.5}
@keyframes abilityGlow{50%{box-shadow:0 0 0 3px rgba(243,213,138,.5),0 0 26px rgba(243,213,138,.8)}}
.tcard.hero{border-color:var(--shine)}
.tcard.hero b{color:var(--shine)}

/* ============ Provinzkarte (Stil: assets/ui/kit/07) ============ */
#worldmap{position:fixed;inset:0;z-index:9;display:grid;grid-template-columns:230px 1fr 340px;gap:0;background:radial-gradient(ellipse at 50% 40%,#1a1210,#070504 80%)}
.wm-left{position:relative;padding:calc(18px + var(--sat)) 14px 14px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(90deg,rgba(8,5,4,.92),rgba(8,5,4,.6));border-right:1px solid rgba(179,38,27,.35)}
.wm-kanji{font:700 46px/1 var(--mincho);color:#d9c49a}
.wm-cap{font:600 12px var(--display);letter-spacing:.3em;color:var(--parch2);margin-bottom:8px;text-transform:uppercase}
.wm-prov{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid rgba(201,162,74,.14);font:600 16px var(--body);color:var(--parch)}
.wm-prov i{width:26px;font:600 15px var(--display);font-style:normal;color:var(--parch2)}
.wm-prov em{margin-left:auto;font-style:normal;color:var(--gold);font-size:13px}
.wm-prov.own{background:linear-gradient(90deg,rgba(179,38,27,.75),rgba(94,15,10,.2));color:#fff}
.wm-prov.fog{opacity:.5}
.wm-back{margin-top:auto;padding:10px;border:1px solid var(--gold2);border-radius:4px;font:600 14px var(--display);color:var(--shine);background:rgba(14,10,8,.8)}
.wm-center{position:relative;min-width:0}
.wm-center canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:none}
.wm-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:14px;background:rgba(8,5,4,.75);font:600 13px var(--body);color:var(--parch2);white-space:nowrap}
.wm-right{position:relative;margin:calc(16px + var(--sat)) 14px 14px 0;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;
  background:linear-gradient(180deg,rgba(20,13,10,.96),rgba(10,7,5,.96));border:1px solid rgba(201,162,74,.45);box-shadow:inset 0 0 0 4px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.6)}
.wm-title b{display:block;font:800 40px/1 var(--mincho);color:#c8322a;text-shadow:0 0 12px rgba(200,50,42,.35)}
.wm-title span{display:block;font:600 20px var(--display);color:#e0584b}
.wm-title small{font:600 12px var(--display);letter-spacing:.14em;color:var(--parch2);text-transform:uppercase}
.wm-art{height:150px;border:1px solid rgba(201,162,74,.4);background:#120c09 center/cover no-repeat}
.wm-right p{margin:0;font:500 16px/1.45 var(--body);color:var(--parch)}
.wm-row{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(201,162,74,.18);font:600 14px var(--body);color:var(--parch2)}
.wm-row b{font:700 15px var(--display);color:var(--parch)}

/* Roter Pinselknopf (Hauptaktion) */
.brush{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;margin-top:6px;padding:8px 20px;color:#fff;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(255,120,90,.35),transparent 55%),
    linear-gradient(100deg,transparent 0 3%,#9a1c12 6% 94%,transparent 97%),
    linear-gradient(92deg,transparent 0 1%,#c8322a 4% 96%,transparent 99%);
  clip-path:polygon(2% 18%,8% 4%,40% 10%,70% 2%,97% 12%,100% 50%,96% 88%,62% 97%,30% 90%,4% 96%,0 60%);
  filter:drop-shadow(0 4px 10px rgba(179,38,27,.45));transition:transform .1s,filter .15s}
.brush b{font:700 20px var(--display);letter-spacing:.14em}
.brush small{font:600 13px var(--body);opacity:.85}
.brush:hover{filter:drop-shadow(0 0 14px rgba(255,90,60,.6))}
.brush:active{transform:scale(.98)}
.brush:disabled{filter:grayscale(.8) brightness(.7)}

@media (max-width:899px){
  #worldmap{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .wm-left{flex-direction:row;align-items:center;overflow-x:auto;padding:calc(8px + var(--sat)) 8px 8px;border-right:0;border-bottom:1px solid rgba(179,38,27,.35)}
  .wm-kanji{font-size:26px}.wm-cap{display:none}
  .wm-provs{display:flex;gap:4px}.wm-prov{border:0;padding:4px 8px;font-size:13px;white-space:nowrap}.wm-prov i{display:none}
  .wm-back{position:fixed;top:calc(62px + var(--sat));right:8px;z-index:11;margin:0;white-space:nowrap}
  .wm-right{margin:0 8px calc(8px + var(--sab));max-height:42vh;padding:12px}
  .wm-title b{font-size:28px}.wm-art{height:90px}
  .wm-hint{display:none}
}
@media (max-width:600px){#worldmap{grid-template-rows:auto 1fr}.wm-back{min-height:44px}.wm-right{position:fixed;inset:auto 8px calc(8px + var(--sab));z-index:10;max-height:28vh;margin:0;box-sizing:border-box}}

/* ============ Ergebnis (Stil: assets/ui/kit/05) ============ */
.mresult{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 0}
.mr-kanji{font:800 clamp(44px,8vw,78px)/1 var(--mincho);letter-spacing:.06em;color:#efe2c4;text-shadow:3px 3px 0 #8e1b14,0 0 24px rgba(179,38,27,.55)}
.lose .mr-kanji{color:#b9a88a;text-shadow:3px 3px 0 #2a1a10}
.mr-sub{font:600 13px var(--display);letter-spacing:.4em;color:var(--gold);text-transform:uppercase}
.mr-card{position:relative;display:grid;grid-template-columns:1fr 150px;gap:10px 18px;width:min(640px,100%);margin-top:8px;padding:16px 18px;color:var(--text);
  background:linear-gradient(180deg,#efe2c4,#d8c498);clip-path:polygon(0 2%,3% 0,50% 1.5%,97% 0,100% 3%,99% 50%,100% 97%,96% 100%,50% 98.5%,4% 100%,0 97%,1% 50%)}
.mr-left h4{margin:0 0 6px;font:700 20px var(--display)}
.mr-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #8a6a2e55;font:600 15px var(--body)}
.mr-row b{font:700 17px var(--display)}
.mr-stars svg{width:20px;height:20px;opacity:.25;filter:grayscale(1)}
.mr-stars svg.on{opacity:1;filter:none;animation:starin .5s cubic-bezier(.3,1.8,.6,1) backwards}
.mr-seal{display:flex;flex-direction:column;align-items:center;justify-content:center}
.mr-seal i{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;font:700 58px/1 var(--display);font-style:normal;color:#f3d58a;
  background:radial-gradient(circle,#1a1210 55%,transparent 58%),conic-gradient(from 20deg,#8e1b14,#1a1210 30%,#8e1b14 55%,#1a1210 80%,#8e1b14);text-shadow:0 0 12px rgba(243,213,138,.5);animation:starin .6s .9s cubic-bezier(.3,1.8,.6,1) backwards}
.mr-seal small{margin-top:4px;font:600 12px var(--display);letter-spacing:.3em;color:#5a3a1e;text-transform:uppercase}
.mr-rew{grid-column:1/-1}
.mr-rew h5{margin:4px 0 6px;font:600 14px var(--display);letter-spacing:.14em;color:#5a3a1e}
.mr-tiles{display:flex;gap:8px;flex-wrap:wrap}
.mr-tile{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;width:92px;height:82px;padding:6px;background:rgba(239,226,196,.38);border:1px solid rgba(138,106,46,.7);color:var(--text)}
.mr-tile svg{width:30px;height:30px}
.mr-tile b{font:700 16px var(--display);color:var(--text)}
.mr-tile small{font:600 11px var(--body);color:#5a3a1e}
.mr-extra{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mr-tip{flex-basis:100%;font-size:12px;line-height:1.35;padding:5px 8px;border-radius:8px;background:rgba(160,90,20,.12);border:1px solid rgba(140,80,20,.4);color:#4a2c10}
.mresult .brush{min-width:260px;margin-top:0}
@media (max-width:600px){ .panel:has(.mresult) .pbody{padding:10px 12px} .mr-card{grid-template-columns:minmax(0,1fr) 82px;gap:6px 10px;margin-top:4px;padding:12px 14px} .mr-left{min-width:0}.mr-left h4{font-size:17px}.mr-row{padding:4px 0;font-size:14px}.mr-row b{font-size:15px}.mr-seal{grid-column:2;grid-row:1;align-self:start}.mr-seal i{width:78px;height:78px;font-size:46px}.mr-seal small{font-size:10px;letter-spacing:.18em}.mr-rew{grid-column:1/-1}.mr-tile{width:calc((100% - 16px)/3);min-width:0;height:76px;padding:5px 3px}.mr-tile svg{width:26px;height:26px}.mr-tip{font-size:11px;padding:4px 7px}.mresult .brush{min-width:0;flex:1 1 140px;padding-inline:8px}.mresult .brush b{font-size:15px;letter-spacing:.08em}.mresult .brush small{font-size:11px} }

/* ============ Forschung (Stil: assets/ui/kit/08) ============ */
.research .rtrees{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rtree{padding:12px;border:1px solid rgba(201,162,74,.35);background:linear-gradient(180deg,rgba(28,18,13,.9),rgba(12,8,6,.9))}
.rtree h4{margin:0 0 10px;font:700 18px var(--display);color:#e0584b;letter-spacing:.06em}
.rnode{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid rgba(201,162,74,.22);background:rgba(8,5,4,.55)}
.rnode>i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font:800 28px/1 var(--mincho);font-style:normal;color:#7a6a58;border:2px solid #5a4a3a;background:radial-gradient(circle,#241a14,#0e0a08)}
.rnode.has>i{color:#f3d58a;border-color:var(--gold);box-shadow:0 0 12px rgba(201,162,74,.35)}
.rnode.run>i{color:#fff;border-color:#e0584b;animation:abilityGlow 1.2s ease-in-out infinite}
.rinfo b{display:block;font:600 15px var(--display);color:var(--parch)}
.rinfo small{display:block;font:600 12px/1.35 var(--body);color:var(--parch2)}
.rlv{font-size:12px;color:#e0584b;letter-spacing:2px}
.rinfo .xp{width:100%;margin-top:4px}
.rnode .pill{flex-direction:column;gap:2px;padding:6px 10px}
@media (max-width:600px),(pointer:coarse){ .a2-btns .pill{min-height:44px;min-width:60px;justify-content:center} }   /* Daumen: Trainingsknöpfe mind. 44 px (SOL Mobil 09.10.) */
.rnode .pill small{font:600 11px var(--body)}
.rnode .pill:disabled{filter:none;background:rgba(255,255,255,.04);border:1px solid rgba(201,162,74,.25);color:var(--parch2);box-shadow:none;opacity:.8}   /* gesperrt: dunkel im UI-Stil statt hellgrauer Klotz */
.rnode em{font:600 12px var(--display);color:var(--gold);font-style:normal}
.rwhy{grid-column:1/-1;margin:0;font:600 12px var(--body);color:#e0584b}
.rwhy.big{font-size:15px;margin-bottom:10px;text-align:center}
.rlink{width:2px;height:14px;margin:0 0 0 37px;background:linear-gradient(#c9a24a,#5a4a3a)}
@media (max-width:700px){ .research .rtrees{grid-template-columns:1fr} .rnode{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:10px 12px} .rnode>i{width:40px;height:40px;font-size:22px} .rnode .pill{grid-column:3;grid-row:1;min-width:0;min-height:44px;flex-direction:row;justify-content:center;gap:6px;padding:6px 8px;font-size:12px} .rnode .pill .cost{padding:0;font-size:12px}.rnode .pill small,.rlv{font-size:12px} }

/* ============ Überfall ============ */
.raidtimer{position:absolute;left:38%;transform:translateX(-50%);top:calc(8px + var(--sat));display:flex;align-items:center;gap:8px;height:30px;box-sizing:border-box;padding:0 14px 0 6px;border-radius:15px;background:rgba(14,10,8,.85);border:1px solid rgba(179,38,27,.6);font:600 13px var(--body);color:var(--parch2);pointer-events:none}
@media (max-width:1100px){.raidtimer{left:50%;top:calc(56px + var(--sat))}} /* mittlere Breiten: unter Bauarbeiter, sonst Kollision mit Profilplatte */
.raidtimer span{font:800 14px var(--mincho);color:#fff;background:#8e1b14;border-radius:10px;padding:1px 6px}
.raidtimer b{font:700 14px var(--display);color:#e0584b}
.raidtimer.blood{border-color:#e0584b;box-shadow:0 0 14px rgba(200,30,20,.55)}
.raidtimer.soon{animation:abilityGlow 1s ease-in-out infinite;border-color:#e0584b}
.raidbar{position:absolute;left:0;right:0;bottom:calc(12px + var(--sab));display:flex;justify-content:center;gap:14px}
.raidbar .tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a1e16,#0e0a08 72%);border:2px solid var(--gold2);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.raidbar .tool b{font:800 32px/1 var(--mincho);color:#f3d58a}
.raidbar .tool span{font:600 11px var(--display);color:var(--parch2)}
.raidbar .tool small{position:absolute;top:-2px;right:-2px;display:grid;place-items:center;min-width:24px;height:24px;box-sizing:border-box;padding:0 5px;border-radius:12px;border:1px solid var(--gold2);background:rgba(14,10,8,.92);font:700 13px var(--display);color:var(--parch)}   /* Restanzahl als lesbares Abzeichen wie bei Truppenkarten (11.10.) */
.raidbar .tool.on{border-color:#e0584b;box-shadow:0 0 0 3px rgba(224,88,75,.4),0 0 24px rgba(224,88,75,.6)}
.raidbar .tool:disabled{filter:grayscale(1);opacity:.5}
#bhud.raid .ename{color:#e0584b}
@media (max-width:899px){ .raidtimer{top:calc(62px + var(--sat));font-size:11px} .raidbar .tool{width:78px;height:78px} }
#bhud.raid .lootrow{display:none}
.wm-lock{padding:12px;text-align:center;border:1px dashed #8e1b14;background:rgba(142,27,20,.15);font:600 15px var(--display);color:#e0584b}

/* ============ Saison-Pfad ============ */
.sw-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.sw-head>b{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;font:800 40px/1 var(--mincho);color:#f3d58a;background:radial-gradient(circle,#3a1e16,#0e0a08);border:2px solid #8e1b14}
.sw-head h3{margin:0;font:700 22px var(--display);color:#e0584b}
.sw-head p{margin:2px 0;font:600 14px var(--body);color:var(--parch2)}
.sw-pts b{color:var(--shine);font-size:16px}
.stiers{display:flex;flex-direction:column;gap:6px}
.stier{display:grid;grid-template-columns:34px 1fr auto 90px;gap:10px;align-items:center;padding:6px 10px;border:1px solid rgba(201,162,74,.2);background:rgba(8,5,4,.5)}
.stier>i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 13px var(--display);font-style:normal;color:var(--parch2);border:1px solid var(--gold2)}
.stier.ready{border-color:var(--gold)}.stier.ready>i{background:var(--gold);color:var(--ink)}
.stier.got{opacity:.55}
.sbar small{font:600 11px var(--body);color:var(--parch2)}
.stier em{font-style:normal;text-align:center;color:var(--gold)}
@media (max-width:600px){ .stier{position:relative;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;padding:8px 10px}.stier>i{width:32px;height:32px}.srew{grid-column:3;grid-row:1;align-self:center}.stier>em{position:absolute;top:2px;right:4px;width:auto;font-size:10px;line-height:1}.stier.ready{grid-template-columns:32px minmax(0,1fr) auto auto}.stier .pill{grid-column:4;grid-row:1;min-height:44px;padding:6px 8px;font-size:12px;white-space:nowrap} }
.stier .cost{background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.35);color:var(--shine);font:700 14px var(--display)}
.stier .cost svg{width:20px;height:20px}
.sbar .xp{width:100%;max-width:260px}
/* Handy: vier Rohstoffe in 2×2 rechts neben dem Profil, ohne Überlappen */
@media (max-width:899px){
  .res{max-width:calc(100vw - 196px);display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .bar{height:24px;padding:0 6px 0 3px;min-width:0}.bar .plus{display:none}.bar span{font-size:12px}
  .hud .profile{left:6px;max-width:180px}.xp{width:70px}
  .raidtimer{left:50%;top:calc(70px + var(--sat))}
}
@media (max-width:600px){
  .hud .profile{top:calc(8px + var(--sat));left:8px;padding-block:0}
  .res{top:calc(8px + var(--sat));right:8px}
  .raidtimer{top:calc(68px + var(--sat))}
  .bbtns{top:calc(104px + var(--sat));right:calc(8px + var(--sar))}
}

/* Kampf-Wirkung: Schadenszahlen + Stern-Einblendung */
.dmgnum{position:absolute;transform:translate(-50%,-50%);font:700 15px var(--display);color:#ffe08a;text-shadow:0 2px 0 #5a1a10,0 0 6px rgba(0,0,0,.6);pointer-events:none;animation:dmgUp .9s ease-out forwards}
@keyframes dmgUp{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -34px}}
.starpop{position:fixed;left:50%;top:40%;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;z-index:50;animation:starPop 1.3s cubic-bezier(.2,1.6,.4,1) forwards}
.starpop svg{width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,210,90,.9))}
@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0}25%{transform:scale(1.15) rotate(0);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(.6) translateY(-200px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dmgnum,.starpop{animation-duration:.01s}}
.tuthand{position:fixed;z-index:40;transform:translate(-50%,-100%);pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:tutBob .9s ease-in-out infinite}
.tuthand[hidden]{display:none}
.tuthand b{font:700 12px var(--display);letter-spacing:.08em;color:#2a1a10;background:linear-gradient(var(--gold),var(--gold2));border:1px solid var(--shine);border-radius:10px;padding:2px 8px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.tuthand i{font-style:normal;font-size:22px;line-height:1;color:var(--gold);text-shadow:0 2px 4px rgba(0,0,0,.6)}
@keyframes tutBob{50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.tuthand{animation:none}}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
html.calm .pop,html.calm .dmgnum,html.calm .starpop{animation:none!important;opacity:1}
.bonus{display:flex;flex-direction:column;align-items:center;gap:14px}
.bdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;width:100%}
.bday{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--gold2);border-radius:6px;background:rgba(12,8,6,.55);color:var(--parch)}
.bday small{font:600 12px var(--display);letter-spacing:.06em;color:var(--parch2)}
.bday.got{opacity:.5}
.bday.now{border-color:var(--shine);box-shadow:0 0 0 2px rgba(240,192,74,.35),0 0 14px rgba(240,192,74,.35)}
.bnext{color:var(--parch2);text-align:center;margin:0}
.stat .up{color:#7fd06a;font-weight:700}
.stat .num{font:700 14px var(--display)}   /* Fließschrift hat Mediävalziffern: 0 sah aus wie o (Kriegschronik) */
.bday .cost{color:var(--parch);font:700 14px var(--body)}
.opt.col{flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px}
.opt.col small{font:500 13px var(--body);color:var(--parch2)}
.opt textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:64px;font:12px ui-monospace,monospace;color:var(--parch);background:rgba(0,0,0,.35);border:1px solid var(--gold2);border-radius:4px;padding:8px}
.orow{display:flex;gap:8px;flex-wrap:wrap}
.mr-btns{position:sticky;bottom:-16px;z-index:2;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;margin-top:12px;padding:14px 0 16px;background:linear-gradient(180deg,transparent,var(--ink) 18px)}
@media (max-height:820px){ .mr-kanji{font-size:clamp(32px,6vh,46px)} .mresult{gap:2px;padding-top:0} .mr-card{margin-top:4px;padding-block:12px}.mr-row{padding:5px 0}.mr-btns{margin-top:10px;padding-top:12px} }   /* niedrige Fenster: Knöpfe bleiben sichtbar */
@media (max-width:600px){.mr-btns{bottom:-10px;padding-bottom:10px}}
.achs{display:flex;flex-direction:column;gap:8px}
.ach{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--gold2);border-radius:6px;background:rgba(12,8,6,.55);color:var(--parch)}
.ach>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ach small{color:var(--parch2)}
.ach.done{opacity:.6}
.ach .pill[disabled]{filter:none;background:rgba(255,255,255,.04);border:1px solid rgba(201,162,74,.25);color:var(--parch2);box-shadow:none;opacity:.8}   /* wie Forschung: dunkel statt grauer Klotz */
/* Handy quer: wenig Höhe → kompakte Bau-Karten, Details daneben */
@media (max-height:500px) and (orientation:landscape){
  .buildview{grid-template-columns:1fr 230px;gap:10px}
  .detail{position:sticky;top:0;padding:10px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
  .card .pic{height:62px}
  .card .pic img{width:62px;height:62px}
  .detail img{height:96px;object-fit:contain}
  .detail p{display:none}
  .detail{display:flex;flex-direction:column}
  .detail .buildbtn{order:-1;margin:0 0 8px}   /* Bauen oben: ohne Scrollen erreichbar */
}
.ach .xp{width:100%;height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;border:0;border-radius:0;background:none;overflow:visible}.ach .xp::before{content:"";grid-column:1;grid-row:1;height:8px;border:1px solid var(--gold2);border-radius:4px;background:#00000066}.ach .xp>i{position:relative;inset:auto;grid-column:1;grid-row:1;height:8px;border-radius:3px}.ach .xp span{position:static;grid-column:2;grid-row:1;line-height:1;text-align:right;white-space:nowrap;color:var(--parch2);font:700 12px var(--display);text-shadow:none}   /* Balken nutzt die Infobreite; Zahl bleibt als eigenes Label lesbar */
.card .pic .neu{position:absolute;left:6px;bottom:5px;padding:1px 7px;border-radius:9px;background:#b3261b;border:1px solid var(--gold);font:700 11px var(--display);color:#fff;letter-spacing:.05em;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:bump .6s}
.neudot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0402a;vertical-align:top;box-shadow:0 0 4px #e0402a}
.lootrow .got{font:700 11px var(--display);color:#9be07a;margin-left:3px}
/* im Kampf unter Rückzug-/Nächster-Knopf */
body:has(#bhud:not([hidden])) .toast{top:calc(205px + var(--sat))}
.tuthand.low b{display:none}
.more .idot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:var(--lacquer2);border:1.5px solid var(--shine)}
:focus-visible{outline:2px solid var(--shine);outline-offset:2px}   /* Tastatur-Fokus sichtbar auf dunklem Grund */
/* Heer-Fenster im Stil der Vorlage 03 (Inventar): links Liste, rechts Detail mit Wertebalken, unten Lager + Warteschlange */
.army2{display:grid;grid-template-columns:minmax(210px,.8fr) 1.2fr;gap:14px}
.a2-list{display:flex;flex-direction:column;gap:8px}
.a2-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:6px 10px 6px 6px;border:1px solid rgba(201,162,74,.35);border-radius:4px;background:linear-gradient(90deg,rgba(20,12,8,.92),rgba(12,8,6,.75));color:var(--parch);text-align:left;transition:border-color .15s,box-shadow .15s}
.a2-row img{width:52px;height:52px;object-fit:cover;border-radius:3px;border:1px solid rgba(201,162,74,.3);background:var(--ink2)}
.a2-row b{display:block;font:600 16px var(--display);color:var(--parch)} .a2-row small{font:500 12px var(--body);color:var(--parch2)}
.a2-row i{font:700 15px var(--display);font-style:normal;color:var(--shine)}
.a2-row.on{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b,0 0 14px rgba(192,57,43,.45);background:linear-gradient(90deg,rgba(60,14,10,.92),rgba(20,8,6,.8))}
.a2-row.locked{opacity:.75;filter:grayscale(.6)}
.a2-detail{position:relative;align-self:start;padding:14px 16px;border:1px solid rgba(201,162,74,.45);border-radius:4px;background:linear-gradient(180deg,rgba(18,11,8,.95),rgba(10,7,5,.92));color:var(--parch);overflow:hidden}
.a2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.a2-head h3{font:600 24px var(--display);color:var(--parch);margin:0} .a2-head small{font:500 12px var(--body);color:var(--parch2)}
.a2-kanji{font:800 44px/1 var(--mincho);color:#b3261b;opacity:.85;text-shadow:0 0 12px rgba(179,38,27,.35)}
.a2-pic{display:flex;justify-content:center;margin:4px 0}.a2-pic img{height:200px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.a2-detail p{font:500 13px/1.45 var(--body);color:var(--parch2);margin:4px 0 10px;border-bottom:1px solid rgba(201,162,74,.2);padding-bottom:8px}
.a2-stat{display:grid;grid-template-columns:86px 1fr 60px;align-items:center;gap:8px;margin:5px 0;font:500 13px var(--body)}
.a2-stat div{height:6px;background:rgba(255,255,255,.08);border:1px solid rgba(201,162,74,.25)}.a2-stat div i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--shine))}
.a2-stat b{text-align:right;font:700 13px var(--display);color:var(--shine)}
.a2-cost{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 10px}
.a2-btns{display:flex;flex-wrap:wrap;gap:8px}.a2-btns .pill{min-width:64px;justify-content:center}
.a2-lock{padding:8px 10px;border:1px dashed rgba(192,57,43,.6);color:#e4a39b;font:600 13px var(--body);border-radius:4px}
.a2-foot{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.a2-foot .camp .pill{margin-left:8px}.camp.small{font-size:12px}
.a2-comp{display:flex;flex-wrap:wrap;gap:6px}.a2-have{position:relative;width:40px;height:40px;border:1px solid rgba(201,162,74,.35);border-radius:3px;overflow:hidden;background:var(--ink2)}
.a2-have img{width:100%;height:100%;object-fit:cover}.a2-have b{position:absolute;right:2px;bottom:0;font:700 11px var(--display);color:var(--shine);text-shadow:0 1px 2px #000}
.qitem em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;background:rgba(120,20,14,.55);opacity:0;transition:opacity .15s}.qitem:hover em,.qitem:focus-visible em{opacity:1}
.a2-empty{align-self:center;font:500 13px var(--body);color:var(--parch2)}
@media (max-width:700px){.army2{grid-template-columns:1fr}.a2-list{flex-direction:row;overflow-x:auto}.a2-row{min-width:170px}.a2-pic img{height:90px}}
.a2-cost .cost,.a2-cost .time{color:var(--parch);background:rgba(255,255,255,.06);border:1px solid rgba(201,162,74,.35);padding:3px 9px;border-radius:12px;font:600 13px var(--body)}
.a2-foot .camp{flex-wrap:wrap}.a2-foot .camp .xp{min-width:140px}
@media (max-width:700px){.a2-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:visible}.a2-row{min-width:0;min-height:44px;grid-template-columns:32px 1fr auto;padding:3px 6px 3px 5px;gap:6px}.a2-row img{width:32px;height:32px}.a2-row b{font-size:14px;line-height:1.1}.a2-row small{display:none}.a2-foot .camp .pill{margin:6px 0 0}}
.a2-foot .camp .xp span{top:-1px;text-align:center;font:700 11px var(--display);color:var(--parch);text-shadow:0 1px 2px #000}
/* offenes Fenster: Meldung unten, damit sie keinen Fensterinhalt verdeckt */
body:has(#modal:not([hidden])) .toast{top:auto;bottom:calc(22px + env(safe-area-inset-bottom,0px))}
/* CL5: Bauen + Aufgaben im Stil der Vorlagen (dunkel, Goldrand, rote Auswahl) — wie Heer-Fenster */
.card,.detail,.qchapter,.qrow{background:linear-gradient(180deg,rgba(20,12,8,.95),rgba(10,7,5,.92));border:1px solid rgba(201,162,74,.4);border-radius:4px;color:var(--parch)}
.card .pic{background:radial-gradient(ellipse at 50% 90%,rgba(201,162,74,.16),transparent 70%),linear-gradient(180deg,#1c120c,#0e0906);border-bottom:1px solid rgba(201,162,74,.3)}
.card h4,.detail h3,.detail .stat,.qchead{color:var(--parch)}
.card .de,.card .time,.detail .de,.detail p,.qchead span,.qbar small,.qinfo>span{color:var(--parch2)}
.card .jp{color:#e0584b;opacity:1}   /* Kontrast ≥ 4,6:1 auf Kartengrund (a11y 11.10., vorher 2,97–3,82) — gleiches Rot wie Überfall-Titel */
.card.sel:focus-visible{outline:2px solid var(--shine);outline-offset:2px}
.card.sel{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b,0 3px 6px rgba(0,0,0,.4)}
.detail img{border-color:rgba(201,162,74,.3);background:radial-gradient(ellipse at 50% 90%,rgba(201,162,74,.16),transparent 70%),linear-gradient(180deg,#1c120c,#0e0906)}
.card .cost,.detail .cost,.qrow .cost{color:var(--parch);background:rgba(255,255,255,.06);border:1px solid rgba(201,162,74,.3)}
.card .cost.no,.detail .cost.no{color:#ff7a66}
.qbar{background:rgba(255,255,255,.08);border-color:rgba(201,162,74,.25)}
.qchapter{border-color:rgba(192,57,43,.55);background:linear-gradient(180deg,rgba(32,12,9,.95),rgba(14,7,5,.92))}
/* CM1: Kommandanten-Detail im Kit-Stil (dunkel statt Pergament) */
.hdetail{background:linear-gradient(180deg,rgba(20,12,8,.95),rgba(10,7,5,.92));border:1px solid rgba(201,162,74,.4);border-radius:4px;color:var(--parch)}
.hhead h3,.hstats b,.talent b{color:var(--parch)}
.htitle,.hhead small,.hstats span,.hability small,.tbranch h5,.talent small{color:var(--parch2)}
.hstats span{background:rgba(255,255,255,.05);border:1px solid rgba(201,162,74,.2)}
.hxp{background:rgba(255,255,255,.1)}
.hability{background:rgba(192,57,43,.12)} .hability b,.hpoints b,.talent span{color:#e0584b}
.talent{background:rgba(8,5,4,.55);border-color:rgba(201,162,74,.25)} .talent.has{background:rgba(60,14,10,.6);border-color:#c0392b}
.hcard i{top:auto;bottom:2px;right:auto;left:6px;width:56px;text-align:center;box-sizing:border-box;padding:1px 0}   /* Anführer-Marke unter dem Bild: deckte sonst Name bzw. Stufe */
.wm-bau b{color:#e0584b}
/* GA3: Schriftrollen-Karten im Kampf + im Brau-Fenster */
.tcard.scroll{background:linear-gradient(180deg,#3a1410,#140806);border-color:#c0392b}
.tcard .sk,.opts .sk{display:grid;place-items:center;height:52px;font:800 34px/1 var(--mincho);font-style:normal;color:#f3d58a;text-shadow:0 0 10px rgba(224,88,75,.6)}
.opts .sk{display:inline;font-size:22px;height:auto}
.tcard.scroll span{color:var(--parch)}
.opts .pill .cost{color:inherit;background:none;border:0;padding:0 0 0 4px}
.a2-lvl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 0;padding:6px 10px;border:1px solid rgba(201,162,74,.3);border-radius:4px;background:rgba(255,255,255,.04)}.a2-lvl b{color:var(--shine);font:700 16px var(--display)}.a2-lvl .pill .cost{color:inherit;background:none;border:0;padding:0 0 0 4px}
.a2-lvl span.cost{color:var(--shine);background:none;border:0;font:600 13px var(--body)}
.fr-btns{display:flex;gap:6px;align-items:center}

.opt .stat.on{color:var(--shine)}
.ranks>span:first-child{font:600 15px var(--body);color:var(--parch)}
.ranks .stat{padding:9px 12px;align-items:center;margin:0}
.ranks .stat>span:first-child{font:600 16px var(--display);letter-spacing:.02em}
.ranks .stat>span:last-child{font-size:14px}
.ranks .stat.on{background:rgba(201,162,74,.2);box-shadow:inset 0 0 0 1px var(--gold)}
.profile{cursor:pointer}
.qend{margin:8px 0 0;font:500 14px/1.45 var(--body);color:var(--parch2);text-transform:none;letter-spacing:0}
@media (min-width:700px){ .more{display:grid;grid-template-columns:1fr 1fr} .more button{min-height:48px} .more button:nth-last-child(2):nth-child(odd){border-bottom:0} .more button:nth-child(odd){border-right:1px solid rgba(201,162,74,.16)} }   /* PC: zweispaltig, alles ohne Scrollen sichtbar */
.rnode .pill:disabled *{color:var(--parch2)!important;background:none!important}
#modal input[type=checkbox]{color-scheme:dark}   /* ungesetzt dunkel statt grellweiß */
.a2-lvl>span:first-child{white-space:nowrap}
@media (max-width:700px){ .a2-lvl .pill{white-space:nowrap;font-size:12px;padding:8px 12px} }   /* Handy: Stufe + Verbessern ohne Umbruch */
@media (max-width:699px){ .more{display:grid;grid-template-columns:1fr 1fr} .more button{min-height:52px;padding:0 10px;gap:8px;font-size:14px} .more button svg{width:22px;height:22px} .more button:nth-child(odd){border-right:1px solid rgba(201,162,74,.16)} }   /* Handy: zweispaltig, alle Einträge ohne Scrollen */
.preset{display:inline-flex;gap:4px;margin-left:6px}
.a2-foot .camp .pill{margin:6px 6px 0 0}
.dtip{color:#f0c878}
.nextrank{color:#f0c878;font-weight:700}
.opts .orow a{color:var(--shine);font-size:13px;margin-right:16px;text-decoration:underline;text-underline-offset:3px}   /* Rechts-Links in den Einstellungen */

.upd{position:fixed;left:50%;top:calc(150px + var(--sat, 0px));transform:translateX(-50%);z-index:42;padding:10px 18px;border-radius:14px;background:rgba(14,10,8,.94);border:1px solid var(--gold);font:600 14px var(--body);color:var(--parch);cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5)}
#bhud:not([hidden])~.upd{display:none}
@media (orientation:portrait){#title{background-position:center,70% center}}   /* Hochformat: Bildausschnitt Richtung Burg statt linker Hälfte (11.10.) */
.mr-btns #go-watch{min-height:52px;padding:6px 16px;background:linear-gradient(100deg,transparent 0 3%,rgba(58,40,28,.95) 6% 94%,transparent 97%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}.mr-btns #go-watch b{font-size:16px;color:var(--parch)}   /* Ergebnis: „Nochmal ansehen“ ist Nebenaktion, nicht dritter roter Hauptknopf (11.10.) */
.mr-btns:has(#go-next,#go-revenge,#go-retry) #go-home{min-height:52px;padding:6px 16px;background:linear-gradient(100deg,transparent 0 3%,rgba(58,40,28,.95) 6% 94%,transparent 97%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}.mr-btns:has(#go-next,#go-revenge,#go-retry) #go-home b{font-size:16px;color:var(--parch)}.mr-btns:has(#go-next) #go-next,.mr-btns #go-revenge,.mr-btns #go-retry{order:-1;flex-basis:100%;max-width:420px;margin-inline:auto}.mr-btns:has(#go-next,#go-revenge,#go-retry) #go-home,.mr-btns:has(#go-next) #go-watch{flex:0 1 auto;margin-top:0}   /* Sieg mit Restheer: „Nächster Angriff“ ist Hauptaktion oben, Nebenaktionen darunter (11.10.) */
@media (min-width:701px){
  .card .cost,.card .lock,.card .time{font-size:13px;line-height:1.35;color:var(--parch)}
  .stiers{gap:0;border-block:1px solid rgba(201,162,74,.2)}
  .stier{min-height:44px;padding:10px 14px;border:0;border-bottom:1px solid rgba(201,162,74,.2);background:transparent}
  .stier:last-child{border-bottom:0}
  .opt.col.statlist{gap:0}
  .statlist>.stat{min-height:44px;align-items:center;margin:0;padding:10px 14px;border-radius:0;border-bottom:1px solid rgba(201,162,74,.16);background:transparent}
  .statlist>.stat:first-child{border-top:1px solid rgba(201,162,74,.16)}
}
.bday:last-child:nth-child(3n+1){grid-column:1/-1}   /* einzelner letzter Tag (Tag 7) als breite Abschlusskachel statt Loch (11.10.) */
@media (max-width:600px){.enemy{flex-flow:row wrap;column-gap:14px}.ename,.eloot{flex-basis:100%}.enemy{right:8px;padding-right:112px;background:linear-gradient(180deg,rgba(34,17,12,.86),rgba(23,12,9,.66))}.bstatus{background:none}.ename{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}   /* Handy: Gegner + Uhr ein Lackband (krit105 #1), Titel endet vor der Uhr */
.brush:focus-visible{outline:none;filter:brightness(1.3)}.brush:focus-visible b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}   /* Tastatur-Fokus: clip-path schneidet outline ab → Fokus innen sichtbar (11.10.) */
html:not(.i18n-ok) #hud,html:not(.i18n-ok) #title .tap,html:not(.i18n-ok) #title .legal-link{visibility:hidden}   /* bis Sprache gesetzt: kein deutscher Blitz, kein HUD durchs Titelbild (11.10.) */
#title .legal-link{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:500 12px var(--body);color:rgba(243,234,216,.72);text-decoration:none;letter-spacing:.04em}#title .legal-link:hover{color:#f3ead8;text-decoration:underline}   /* Impressum/Datenschutz vom Titel aus erreichbar (§ 5 DDG, 02.11.) */