/* Zippa Heroes – Oberfläche (eigene Klassen mit Präfix z…, style.css bleibt die Zippa-World-Kopie). Vorbild: art/battle_design/*.
   Dunkle Navy-Glas-Paneele, orange Hauptknöpfe (.big aus style.css), goldene Münzen, Seltenheitsrahmen, runde fette Schrift (Fredoka). */
:root { --navy:#1a2140; --navy2:#121831; --line:rgba(160,180,255,.16); --gold:#ffd23f; --orange:#ff9f1c; --fire:#ff7a1a; --ice:#7fd6ff; --topH:56px; }
html, body { font-family:'Fredoka', -apple-system, "SF Pro Rounded", system-ui, sans-serif; }
body { background:#0f1320; }
.zscr { background:radial-gradient(120% 70% at 50% 0%, #2a3566 0%, #161c38 45%, #0e1226 100%); touch-action:pan-y; gap:12px; padding-left:calc(var(--sal) + 16px); padding-right:calc(var(--sar) + 16px); }
body.zbarred .zscr { padding-top:calc(var(--sat) + var(--topH) + 10px); }
body.ztabbed .zscr { padding-bottom:calc(var(--sab) + 84px); }
.zscr > * { width:min(100%, 440px); flex-shrink:0; }
#stage { position:fixed; inset:0; width:100%; height:100%; z-index:1; }
#labels { position:fixed; inset:0; pointer-events:none; z-index:4; }

/* ---------- Grundbausteine ---------- */
.ztitle { font-size:32px; font-weight:700; text-align:center; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.5); letter-spacing:.3px; line-height:1.05; }
.zsub { text-align:center; color:var(--muted); font-size:13px; font-weight:600; margin-top:-6px; }
.zpanel { background:linear-gradient(180deg, rgba(38,48,92,.92), rgba(20,26,54,.94)); border:2px solid var(--line); border-radius:20px; padding:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.35); }
.zpanel h4 { font-size:15px; font-weight:700; color:#dfe5ff; text-align:center; margin-bottom:8px; letter-spacing:.3px; }
.zbtn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:linear-gradient(180deg,#34427c,#232d5c); color:#fff; border:2px solid rgba(160,180,255,.25); border-radius:16px; padding:11px 12px; font:inherit; font-weight:700; font-size:15px; box-shadow:0 4px 0 #0c1026, 0 8px 16px rgba(0,0,0,.3); cursor:pointer; }
.zbtn:active { transform:translateY(2px); box-shadow:0 2px 0 #0c1026; } .zbtn:disabled { opacity:.5; filter:grayscale(.6); }
.zbtn img { width:26px; height:26px; object-fit:contain; } .zbtn small { display:block; color:var(--gold); font-size:12px; }
.zbtn.two { flex-direction:column; gap:0; line-height:1.15; }
.zbtn.green { background:linear-gradient(180deg,#5ad07a,#2e9e4f); border-color:rgba(200,255,210,.35); box-shadow:0 4px 0 #17602c, 0 8px 16px rgba(0,0,0,.3); }
.big { font-family:inherit; font-weight:700; letter-spacing:.8px; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.big.alt { text-shadow:none; }
.zrow { display:flex; gap:10px; } .zrow > * { flex:1; }
.ic { width:18px; height:18px; object-fit:contain; vertical-align:-3px; }
.zchip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; background:rgba(255,255,255,.1); color:#dfe5ff; white-space:nowrap; }
.zchip.fire { background:rgba(255,122,26,.25); color:#ffb27a; } .zchip.ice { background:rgba(127,214,255,.2); color:#aee6ff; }
.zs { display:inline-flex; gap:1px; } .zs i { width:13px; height:13px; background:linear-gradient(180deg,#fff2a0,#ffc21a); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter:drop-shadow(0 1px 0 #8a5a00); }
.ztri { display:inline-block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; vertical-align:1px; margin-right:5px; }
.ztri.up { border-bottom:9px solid var(--gold); } .ztri.down { border-top:9px solid var(--gold); }
.zsp { flex:1; }

/* ---------- obere Leiste ---------- */
#top { gap:8px; min-height:calc(var(--sat) + var(--topH)); background:linear-gradient(180deg, rgba(10,13,28,.97), rgba(14,18,38,.9)); }
#top .tpill { font-size:16px; padding:5px 12px 5px 6px; } #top .tpill img { width:24px; height:24px; }
#top .zgold { color:var(--gold); } #top .zlayer { margin-left:auto; color:#fff; font-weight:700; } #top .zlayer b { color:var(--gold); margin-left:3px; }
.zhearts { display:flex; gap:2px; } .zhearts img { width:26px; height:24px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
#top .gear { margin-left:auto; border:0; }
/* Hauptmenü-Knopf in der Lauf-Leiste (immer erreichbar); lange Weltnamen kürzen statt die Leiste zu sprengen */
#top .zhome { flex:none; width:42px; height:42px; padding:0; border-radius:50%; border:2px solid rgba(160,180,255,.28); background:linear-gradient(180deg,#34427c,#232d5c); box-shadow:0 3px 0 #0c1026; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#top .zhome img { width:28px; height:28px; object-fit:contain; } #top .zhome:active { transform:translateY(2px); box-shadow:0 1px 0 #0c1026; }
#top .zlayer { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #top .zgold, #top .zhearts { flex:none; }
@media (max-width:400px) { #top .zhearts img { width:22px; height:21px; } #top .zhearts { gap:1px; } #top .tpill { font-size:15px; } }

/* ---------- Reiter ---------- */
.ztabs button { font-family:inherit; font-weight:700; font-size:12px; } .ztabs button img { width:32px; height:32px; }

/* ---------- Toast, Blatt ---------- */
#toast { position:fixed; left:50%; bottom:calc(var(--sab) + 110px); transform:translate(-50%, 20px); z-index:60; background:rgba(14,18,38,.95); border:2px solid var(--line); color:#fff; font-weight:700; font-size:15px; padding:10px 16px; border-radius:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.45); }
#toast.show { opacity:1; transform:translate(-50%, 0); } #toast.bad { border-color:rgba(255,107,107,.6); } #toast.good { border-color:rgba(111,220,140,.6); }
#sheet { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
#sheet .zsbg { position:absolute; inset:0; background:rgba(5,7,16,.6); backdrop-filter:blur(3px); animation:screenin .2s ease-out; }
#sheet .zsheet { position:relative; width:min(100%, 440px); max-height:86vh; overflow-y:auto; background:linear-gradient(180deg,#26305c,#161c3a); border:2px solid var(--line); border-bottom:0; border-radius:24px 24px 0 0; padding:18px 18px calc(var(--sab) + 18px); display:flex; flex-direction:column; gap:12px; animation:zsheetin .25s ease-out; touch-action:pan-y; }
@keyframes zsheetin { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.zsh { font-size:22px; font-weight:700; text-align:center; } .zsp2 { color:#c9d0ea; font-size:15px; line-height:1.45; text-align:center; }
.zsbtns { display:flex; gap:10px; } .zsbtns > button { flex:1; width:auto; padding:13px 8px; font-size:16px; }
.zset { width:100%; background:rgba(10,13,30,.5); }

/* ---------- Menü ---------- */
/* Menü: siehe Abschnitt „Titel, Intro, Menü“ weiter unten */
.zmenu { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; min-height:100%; justify-content:space-between; }
.zlogo { text-align:center; margin-top:2vh; } .zlogo .title { font-size:clamp(46px, 15vw, 72px); font-weight:700; letter-spacing:1px; margin:0; }
.zlogo .title.z2 { color:#fff; text-shadow:0 4px 0 #3a4a8a, 0 10px 24px rgba(0,0,0,.6); margin-top:-4px; } .zlogo .sub { margin-top:8px; font-size:14px; }
.zmbtns { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.zmbtns .big { width:100%; }
.zmrow { display:flex; gap:10px; width:100%; } .zmrow .zbtn { flex:1; } .zcnt { color:#c9a8ff; margin-left:2px; }
.zcont { width:100%; display:flex; align-items:center; gap:10px; padding:8px 12px; }
.zcrow { display:flex; } .zcrow .zface { width:44px; height:44px; border-radius:12px; background:#2a3566; border:2px solid rgba(255,255,255,.2); margin-right:-10px; }
.zcinfo { display:flex; flex-direction:column; margin-left:14px; font-size:13px; color:#c9d0ea; font-weight:600; } .zcinfo b { color:#fff; font-size:15px; }
.zstats { display:flex; gap:14px; justify-content:center; color:var(--muted); font-size:13px; font-weight:600; } .zstats b { color:#fff; }
.zset .toggle { font-size:16px; } .zset .toggle img.si { margin-right:4px; }
.zbtn img.face { object-fit:cover; object-position:top; border-radius:8px; background:rgba(255,255,255,.08); }

/* ---------- Kopfzeile mit Zurück ---------- */
.zhead { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; }
.zback { position:absolute; left:0; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:14px; border:2px solid var(--line); background:linear-gradient(180deg,#34427c,#232d5c); box-shadow:0 3px 0 #0c1026; }
.zback::before { content:""; position:absolute; left:15px; top:14px; width:12px; height:12px; border-left:4px solid #fff; border-bottom:4px solid #fff; transform:rotate(45deg); border-radius:2px; }
.zhead .ztitle { font-size:24px; padding:0 48px; }
.zfoot { position:sticky; bottom:0; padding:10px 0 4px; display:flex; justify-content:center; background:linear-gradient(180deg, rgba(14,18,38,0), #0e1226 45%); margin-top:auto; }
.zfoot .big { width:100%; }

/* ---------- Heldenkarten ---------- */
.zhgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zhero { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 8px 10px; border-radius:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--hc) 38%, #1a2140), #151b36 70%); border:3px solid color-mix(in srgb, var(--hc) 70%, #fff 0%); box-shadow:0 6px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15); cursor:pointer; text-align:center; transition:transform .12s; }
.zhero:active { transform:scale(.97); }
.zhero.sel { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.35), 0 0 22px rgba(255,170,40,.7), 0 6px 0 rgba(0,0,0,.35); transform:translateY(-2px); }
.zhimg { position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.25), rgba(255,255,255,0) 65%); }
.zhimg img:first-child { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.zhero.locked .zhimg img:first-child { filter:grayscale(1) brightness(.45); } .zhero.locked { border-color:#3a4260; background:#161b30; }
.zhlock { position:absolute; left:50%; top:50%; width:26%; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.zhlv { position:absolute; left:6px; top:6px; background:rgba(10,13,30,.8); border-radius:8px; padding:1px 7px; font-size:11px; font-weight:700; color:var(--gold); }
.zhname { font-size:19px; font-weight:700; line-height:1; margin-top:2px; }
.zhrole { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#d6ddff; } .zhrole img { width:16px; height:16px; object-fit:contain; }
.zhsup { display:flex; align-items:center; gap:5px; background:rgba(10,13,30,.55); border-radius:10px; padding:3px 8px 3px 3px; font-size:12px; color:var(--accent); } .zhsup img { width:22px; height:22px; border-radius:6px; }
.zhtxt { font-size:11.5px; line-height:1.3; color:#b9c1dd; font-weight:500; }
.zhsheet { display:flex; align-items:center; gap:12px; } .zhbig { width:96px; height:96px; object-fit:contain; background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); border-radius:18px; }
.zstat4 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .zstat4 > div { background:rgba(10,13,30,.55); border-radius:12px; padding:6px 4px; text-align:center; display:flex; flex-direction:column; }
.zstat4 small { font-size:11px; color:var(--muted); font-weight:600; } .zstat4 b { font-size:17px; }
.zinfo { display:flex; gap:10px; align-items:center; background:rgba(10,13,30,.55); border-radius:14px; padding:8px 10px; } .zinfo img { width:44px; height:44px; border-radius:10px; object-fit:contain; flex:0 0 44px; }
.zinfo b { display:block; font-size:15px; } .zinfo span { font-size:13px; color:#c3cae6; line-height:1.35; }
.zgear small { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; } .zgear > div { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Gegenstands-Kachel ---------- */
.ztile { position:relative; width:64px; height:64px; flex:0 0 auto; border-radius:14px; border:3px solid var(--rc); background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 45%, #1a2140), color-mix(in srgb, var(--rc) 18%, #10152c) 75%); box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.ztile .zi { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(0,0,0,.4)); pointer-events:none; }
.ztile .zs { position:absolute; left:50%; top:-8px; transform:translateX(-50%); } .ztile .zs i { width:14px; height:14px; }
.ztile .zel { position:absolute; left:-6px; top:-6px; width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ztile .zlk { position:absolute; right:-5px; top:-6px; width:16px; height:20px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ztile .zcd { position:absolute; right:-4px; bottom:-6px; background:#0d1128; border:1px solid rgba(255,255,255,.25); border-radius:8px; font-size:10px; font-weight:700; padding:0 4px; color:#fff; }
.ztile .zn { position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:5px; font-size:11px; font-weight:700; white-space:nowrap; text-shadow:0 1px 2px #000; }
.zgear .ztile { margin-bottom:18px; }

/* ---------- Freischalt-Baum ---------- */
.zcrybig { display:flex; align-items:center; justify-content:center; gap:8px; font-size:30px; font-weight:700; color:#c9a8ff; } .zcrybig img { width:40px; height:40px; object-fit:contain; } .zcrybig span { font-size:14px; color:var(--muted); }
.ztree { display:flex; flex-direction:column; gap:10px; }
.znode { display:flex; align-items:center; gap:12px; padding:10px 12px; }
.znic { width:52px; height:52px; object-fit:contain; flex:0 0 52px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.zntx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .zntx b { font-size:17px; } .zntx span { font-size:13px; color:#c3cae6; line-height:1.3; } .zntx em { font-style:normal; font-size:12px; color:#ffb4b4; font-weight:600; }
.znode.own { border-color:rgba(111,220,140,.5); background:linear-gradient(180deg, rgba(34,70,58,.9), rgba(20,34,40,.94)); }
.znode.locked .znic { filter:grayscale(1) brightness(.6); }
.zncheck { width:40px; height:40px; object-fit:contain; }
.zbuy { padding:8px 12px; font-size:16px; } .zbuy img { width:22px; height:22px; }

/* ---------- Lauf-Karte ---------- */
#s-map { padding:0; gap:0; background:#2d4a22; }
#s-map > .zmap { width:100%; }
body.zbarred #s-map { padding-top:0; }
.zmap { position:relative; overflow:hidden; }
.zmapbg { position:absolute; inset:0; } .zmapbg > div { position:absolute; left:0; right:0; background:url(../img/map_wiese.jpg) center / cover no-repeat; }
.zmap::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,14,30,.35), rgba(10,14,30,0) 18%, rgba(10,14,30,0) 85%, rgba(10,14,30,.4)); pointer-events:none; }
.zmap svg { position:absolute; left:0; top:0; z-index:1; overflow:visible; }
.zmap line { stroke-linecap:round; }
.zmap line.far { stroke:rgba(235,235,225,.75); stroke-width:6; stroke-dasharray:1 14; }
.zmap line.open { stroke:#ffd27a; stroke-width:7; stroke-dasharray:2 13; filter:drop-shadow(0 0 5px rgba(255,170,40,.9)); animation:zdash 1s linear infinite; }
.zmap line.gone { stroke:#ff9f1c; stroke-width:8; filter:drop-shadow(0 2px 0 #9a4f00); }
@keyframes zdash { to { stroke-dashoffset:-15; } }
.mnode { position:absolute; z-index:2; transform:translate(-50%,-50%); background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center; font:inherit; color:#fff; }
.mplate { width:62px; height:62px; border-radius:50%; background:radial-gradient(circle at 50% 30%, #2f3a66, #141a33 72%); border:3px solid rgba(255,255,255,.18); box-shadow:0 5px 0 #070a18, 0 8px 14px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:transform .15s; }
.mplate img { width:70%; height:70%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.mnode b { margin-top:5px; font-size:14px; font-weight:700; text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.8); white-space:nowrap; }
.mnode.boss .mplate { width:98px; height:98px; border-color:rgba(255,90,90,.6); } .mnode.boss .mplate img { width:88%; height:88%; } .mnode.boss b { font-size:17px; }
.mnode.reach .mplate { border-color:#ffc24a; animation:zreach 1.3s ease-in-out infinite; } .mnode.reach b { color:#ffe19a; }
@keyframes zreach { 0%,100% { box-shadow:0 5px 0 #070a18, 0 0 0 3px rgba(255,180,50,.5), 0 0 14px rgba(255,170,40,.7); transform:scale(1); } 50% { box-shadow:0 5px 0 #070a18, 0 0 0 8px rgba(255,180,50,.2), 0 0 28px rgba(255,170,40,1); transform:scale(1.07); } }
.mnode.done .mplate { border-color:#ff9f1c; } .mnode.past { opacity:.55; } .mnode.past .mplate img { filter:grayscale(.8); }
.mnode.cur .mplate { border-color:#ffd23f; box-shadow:0 5px 0 #070a18, 0 0 0 4px rgba(255,210,63,.45), 0 0 20px rgba(255,200,60,.8); }
.mnode.cur { z-index:4; }
.mteam { position:absolute; left:50%; bottom:58%; transform:translateX(-50%); display:flex; pointer-events:none; }
.mteam img { height:104px; width:auto; margin:0 -22px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.55)); animation:float 3s ease-in-out infinite; }
.mstart .mplate { width:74px; height:74px; } .mstart .mplate img { opacity:.35; }
.zmapfoot { position:fixed; left:0; right:0; bottom:0; z-index:11; display:flex; align-items:center; gap:10px; padding:10px 14px calc(var(--sab) + 12px); background:linear-gradient(180deg, rgba(10,13,28,0), rgba(10,13,28,.92) 40%); }

.zmaphint { flex:1; text-align:center; font-weight:700; font-size:14px; text-shadow:0 2px 4px #000; color:#ffe19a; }
.zmapfoot #mpTeam .zcrow .zface { width:30px; height:30px; margin-right:-8px; border-radius:9px; } .zmapfoot #mpTeam .zcrow { margin-right:10px; }

/* ---------- Aufstellung (Platzhalter bis 3D) ---------- */
.zfoes { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 10px; } .zfoes small { color:var(--muted); font-weight:600; font-size:12px; }
.zfoes > div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.zfoe { display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--accent); } .zfoe img { width:34px; height:34px; object-fit:contain; } .zfoe.boss img { width:44px; height:44px; } .zfoe.boss b { color:#ff8a8a; }
.zgrid3 { display:flex; flex-direction:column; gap:8px; padding:14px 10px 14px 64px; border-radius:22px; background:linear-gradient(180deg,#8a5a34,#6b4526); box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 8px 0 #3e2714, 0 16px 26px rgba(0,0,0,.45); }
.zgrow { position:relative; display:flex; gap:8px; } .zrl { position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); font-weight:700; font-size:13px; color:#ffe6c4; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.zcell { position:relative; flex:1; aspect-ratio:1.1; border:0; background:none; }
.zcell::before { content:""; position:absolute; inset:6%; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:radial-gradient(circle, rgba(255,230,120,.25), rgba(255,210,80,.05)); box-shadow:none; outline:none; }
.zcell::after { content:""; position:absolute; inset:6%; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%, 7% 50%, 29% 90%, 71% 90%, 93% 50%, 71% 10%, 29% 10%, 7% 50%, 0 50%); background:#ffe27a; filter:drop-shadow(0 0 6px #ffcc33); opacity:.9; }
.zcell.sel::after { background:#fff; } .zcell.sel::before { background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,210,80,.15)); }
.zcell img { position:absolute; left:50%; bottom:14%; transform:translateX(-50%); height:150%; z-index:1; filter:drop-shadow(0 5px 4px rgba(0,0,0,.5)); pointer-events:none; }
.zcell .zlv { position:absolute; right:4%; bottom:4%; z-index:2; background:#141a33; border:2px solid #ffd23f; color:#ffd23f; border-radius:10px; font-size:11px; font-weight:700; padding:0 5px; }
.zbench > div { display:flex; gap:8px; overflow-x:auto; } .zbcard { flex:0 0 96px; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(10,13,30,.55); border:2px solid var(--line); border-radius:14px; padding:6px; color:#fff; font:inherit; }
.zbcard img { width:64px; height:64px; object-fit:contain; } .zbcard b { font-size:14px; } .zbcard small { font-size:11px; color:var(--muted); }
.zfoot.zrow { gap:10px; } .zfoot.zrow .zbtn { flex:0 0 auto; } .zfoot.zrow .big { flex:1; width:auto; }
.zlose { color:#ff8a8a; font-size:30px; } .zlheart { display:flex; align-items:center; justify-content:center; gap:8px; font-size:22px; color:#ff8a8a; } .zlheart img { width:44px; height:44px; }

/* ---------- Ziehen ---------- */
[data-drag] { touch-action:none; cursor:grab; }
.zghost { position:fixed; left:0; top:0; z-index:80; pointer-events:none; opacity:.95; filter:drop-shadow(0 12px 16px rgba(0,0,0,.55)); transition:none; margin:0 !important; }
.zdragging { opacity:.3; }
.zover { outline:3px solid #ffd23f; outline-offset:2px; box-shadow:0 0 18px rgba(255,210,63,.7) !important; }
body.zisdrag [data-drop] { transition:outline-color .1s; }

/* ---------- Detail-Blatt Gegenstand ---------- */
.zitop { display:flex; align-items:center; gap:14px; } .ztile.big { width:84px; height:84px; border-radius:18px; } .zrar { font-weight:700; font-size:14px; }
.zlines { display:flex; flex-direction:column; gap:6px; }
.zl { background:rgba(10,13,30,.55); border-radius:12px; padding:8px 12px; font-size:15px; font-weight:600; color:#e8ecff; }
.zl-tags { background:none; padding:0; display:flex; gap:6px; flex-wrap:wrap; } .zl-tags .zchip { font-size:12px; padding:3px 9px; }
.zl-trigger { color:#aee6ff; } .zl-arrow { color:#ffe19a; } .zl-star { color:#ffd23f; border:1px solid rgba(255,210,63,.4); } .zl-next { color:var(--muted); font-size:13px; } .zl-fixed { color:var(--muted); font-size:13px; }

/* ---------- Ausrüstungs-Turm ---------- */
.twtabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.twtab { position:relative; width:56px; height:56px; border-radius:16px; border:3px solid rgba(160,180,255,.25); background:linear-gradient(180deg,#34427c,#1d2550); padding:0; overflow:visible; }
.twtab .zface { width:100%; height:100%; border-radius:12px; }
.twtab .twlv { position:absolute; right:-6px; bottom:-6px; background:#141a33; border:2px solid #ffd23f; color:#ffd23f; border-radius:9px; font-size:11px; font-weight:700; padding:0 5px; }
.twtab.on { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.3), 0 0 16px rgba(255,170,40,.6); } .twtab.bench img { filter:grayscale(.85) brightness(.7); }
.twmain { display:flex; gap:10px; align-items:flex-start; }
.twleft { flex:1 1 42%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.twpic { width:100%; aspect-ratio:1/1.1; border-radius:20px; background:radial-gradient(ellipse at 50% 88%, rgba(255,170,60,.45), rgba(255,170,60,0) 45%), radial-gradient(circle at 50% 40%, rgba(90,120,255,.35), rgba(20,26,54,0) 70%); display:flex; align-items:flex-end; justify-content:center; }
.twpic img { width:110%; max-width:none; height:auto; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55)); animation:float 3s ease-in-out infinite; }
.twname { font-size:24px; font-weight:700; line-height:1; }
.twxp { display:flex; align-items:center; gap:6px; width:100%; font-size:12px; font-weight:700; } .twxp span { color:#7fc4ff; } .twxp .xpbar { flex:1; } .twxp .xpbar i { background:linear-gradient(90deg,#3aa0ff,#7fd6ff); } .twxp small { color:var(--muted); }
.twstats { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; } .twstats > div { background:rgba(10,13,30,.55); border-radius:12px; padding:5px; display:flex; flex-direction:column; align-items:center; } .twstats small { font-size:11px; color:var(--muted); font-weight:600; } .twstats b { font-size:18px; }
.twsup { display:flex; align-items:center; gap:8px; width:100%; background:rgba(10,13,30,.55); border:1px solid var(--line); border-radius:12px; padding:5px 8px; color:#fff; font:inherit; text-align:left; } .twsup img { width:34px; height:34px; border-radius:8px; }
.twsup b { display:block; font-size:14px; color:var(--accent); } .twsup small { font-size:11px; color:var(--muted); }
.twtower { flex:1 1 58%; min-width:0; padding:10px 8px 12px; } .twtower h4 { letter-spacing:1.5px; }
.twcol { position:relative; display:flex; flex-direction:column; gap:24px; padding-right:34px; }
.twcol svg { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:2; }
.twarrow { stroke:#ffd23f; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; fill:none; filter:drop-shadow(0 0 4px rgba(255,190,40,.95)); animation:twglow 1.6s ease-in-out infinite; }
@keyframes twglow { 50% { stroke:#fff3b0; } }
.twlink { position:absolute; z-index:3; transform:translateY(3px); font-size:10.5px; font-weight:700; color:#ffe19a; white-space:nowrap; max-width:calc(100% - 60px); overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000; pointer-events:none; }
.twslot { position:relative; display:flex; align-items:center; gap:8px; min-height:60px; border-radius:14px; }
.twslot .ztile { width:58px; height:58px; }
.twslot.hand::before { content:"Hand"; position:absolute; left:-4px; top:-14px; font-size:10px; font-weight:700; color:var(--accent); letter-spacing:.5px; }
.twempty { width:58px; height:58px; flex:0 0 58px; border-radius:14px; border:2px dashed rgba(160,180,255,.35); background:rgba(10,13,30,.45); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; color:rgba(200,210,255,.4); }
.twslot.locked .twempty { border-style:solid; border-color:rgba(255,255,255,.08); } .twslot.locked .twempty img { width:22px; height:28px; object-fit:contain; opacity:.8; }
.twtx { min-width:0; display:flex; flex-direction:column; } .twtx b { font-size:13px; line-height:1.1; } .twtx small { font-size:11px; color:var(--muted); font-weight:600; }
.twslot.locked .twtx small { color:#9aa3c4; }
.twcombos { display:flex; flex-direction:column; gap:6px; } .twcombo { background:rgba(10,13,30,.55); border-radius:12px; padding:8px 12px; font-size:14px; font-weight:600; text-align:center; }
.el-fire { color:#ff8a3a; font-weight:700; } .el-ice { color:#7fd6ff; font-weight:700; } .zgold { color:var(--gold); }
.twnone { font-size:13px; color:var(--muted); text-align:center; padding:4px; }
.twbag h4 span { background:rgba(255,255,255,.12); border-radius:8px; padding:0 7px; margin-left:4px; }
.twgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:10px; justify-items:center; min-height:70px; padding-top:6px; }
.twcell .ztile { width:60px; height:60px; }
.twhint { display:block; text-align:center; color:var(--muted); font-size:12px; font-weight:600; margin-top:8px; }
.twsell { display:flex; align-items:center; justify-content:center; gap:6px; position:absolute; left:0; right:0; bottom:calc(100% + 4px); margin:0 auto; width:100%; padding:10px; border:2px dashed rgba(255,210,63,.6); border-radius:14px; background:rgba(40,30,8,.85); color:var(--gold); font-weight:700; }
.zfoot { position:sticky; } body.zisdrag .twsell { background:rgba(80,60,10,.95); }

/* ---------- Händler ---------- */
#s-shop { background:linear-gradient(180deg, rgba(14,18,38,.2), rgba(14,18,38,.85) 60%), url(../img/map_wiese.jpg) center / cover no-repeat, #1a2140; }
.shtent { position:fixed; left:0; right:0; top:0; height:calc(var(--sat) + var(--topH) + 70px); z-index:0; pointer-events:none; background:repeating-linear-gradient(90deg, #c9a46a 0 44px, #7d5a35 44px 88px); clip-path:polygon(0 0,100% 0,100% 62%, 94% 100%, 88% 62%, 81% 100%, 75% 62%, 69% 100%, 62% 62%, 56% 100%, 50% 62%, 44% 100%, 38% 62%, 31% 100%, 25% 62%, 19% 100%, 12% 62%, 6% 100%, 0 62%); box-shadow:0 6px 12px rgba(0,0,0,.4); opacity:.95; }
#s-shop > * { position:relative; z-index:1; } #s-shop > .shtent { position:fixed; z-index:0; }
.shgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:10px; background:rgba(14,18,40,.72); }
.shcard { position:relative; aspect-ratio:.78; border-radius:16px; border:3px solid var(--rc); background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 35%, #1e2750), #121834 78%); box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); display:flex; flex-direction:column; align-items:center; padding:5px 4px; cursor:pointer; }
.shcard.sold { filter:grayscale(1) brightness(.5); cursor:default; }
.shcard.combo { border-color:#ffc24a; box-shadow:0 0 0 2px rgba(255,194,74,.4), 0 0 18px rgba(255,170,40,.7), 0 4px 0 rgba(0,0,0,.45); }
.shname { font-size:12.5px; font-weight:700; line-height:1.05; text-align:center; min-height:26px; display:flex; align-items:center; padding:0 18px 0 4px; }
.shprice { position:absolute; right:5px; top:4px; font-size:17px; font-weight:700; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.5); } .shprice.poor { color:#ff8a8a; }
.shel { position:absolute; left:4px; top:24px; width:22px; height:22px; object-fit:contain; }
.shimg { flex:1; min-height:0; width:78%; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(0,0,0,.45)); pointer-events:none; }
.shtag { font-size:11px; font-weight:700; padding:1px 9px; border-radius:9px; background:rgba(255,255,255,.14); color:#e8ecff; }
.shtag.fire { background:#d9531a; color:#fff; } .shtag.ice { background:#5ab7e8; color:#0b2233; }
.shcombo { position:absolute; left:50%; top:-12px; transform:translateX(-50%); z-index:2; white-space:nowrap; background:#ffe19a; color:#3a2200; font-size:10px; font-weight:700; padding:2px 7px; border-radius:8px; box-shadow:0 2px 0 #a86a00; }
.shhint { background:rgba(255,194,74,.15); border:1px solid rgba(255,194,74,.5); color:#ffe19a; border-radius:12px; padding:8px 12px; font-weight:700; text-align:center; }
.shminis { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.shmini { width:74px; display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg,#5a4630,#3b2c1d); border:2px solid #7d5a35; border-radius:14px; padding:4px; box-shadow:0 3px 0 rgba(0,0,0,.4); }
.shmini.bench { filter:saturate(.4); }
.shface { width:44px; height:44px; border-radius:10px; margin-top:-2px; background:#2a3566; }
.shslots { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:3px; width:100%; }
.shslots i { aspect-ratio:1; border-radius:6px; background:rgba(0,0,0,.35); border:1px solid color-mix(in srgb, var(--rc, #555) 80%, transparent); display:flex; align-items:center; justify-content:center; } .shslots img { width:88%; height:88%; object-fit:contain; }
.shbtns .zbtn { padding:9px; }

/* ---------- Taverne ---------- */
.tvhead { display:flex; align-items:center; justify-content:center; gap:10px; } .tvhead img { width:56px; height:56px; }
.tvlist { display:flex; gap:12px; justify-content:center; } .tvslot { flex:0 1 190px; display:flex; flex-direction:column; gap:10px; }
.tvdone { display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700; color:var(--good); padding:10px; } .tvdone img { width:26px; height:26px; }

/* ---------- Schatz, Ereignis, Rast ---------- */
.trchest { background:none; border:0; width:220px; height:200px; align-self:center; animation:shake 1.2s ease-in-out infinite; }
.trchest img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.trchest.open { animation:openpop .5s ease-out; } .trchest.open img { filter:drop-shadow(0 0 30px rgba(255,210,63,.7)); }
.trloot { display:flex; flex-direction:column; gap:10px; animation:rise .4s ease-out; }
.trgold { display:flex; align-items:center; justify-content:center; gap:8px; font-size:26px; color:var(--gold); } .trgold img { width:34px; height:34px; }
.tritem { display:flex; gap:12px; align-items:flex-start; } .tritem > div:last-child { flex:1; display:flex; flex-direction:column; gap:6px; } .tritem b { font-size:18px; }
.evpic { align-self:center; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 50% 30%, #2f3a66, #141a33 72%); border:3px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 0 #070a18, 0 0 30px rgba(120,150,255,.3); }
.evpic img { width:72%; height:72%; object-fit:contain; } .evpic.rast { box-shadow:0 6px 0 #070a18, 0 0 40px rgba(255,150,40,.45); }
.evtext, .evres { font-size:16px; line-height:1.45; text-align:center; color:#e3e8ff; font-weight:500; } .evres { border-color:rgba(255,210,63,.5); color:#ffe19a; font-weight:700; }
.evopts { display:flex; flex-direction:column; gap:10px; } .evopt { font-size:17px; padding:14px; }
.rsgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rscard { display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; font:inherit; cursor:pointer; padding:18px 10px; }
.rscard img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); } .rscard b { font-size:20px; } .rscard span { font-size:13px; color:#c3cae6; }
.rscard:active { transform:scale(.97); } .rscard:disabled { opacity:.5; filter:grayscale(.7); }

/* ---------- Beute ---------- */
.ltsieg { font-size:clamp(52px, 17vw, 78px); font-weight:700; text-align:center; line-height:1; color:#ffd23f; letter-spacing:2px; -webkit-text-stroke:3px #7a3a00; paint-order:stroke fill; text-shadow:0 5px 0 #7a3a00, 0 12px 22px rgba(0,0,0,.5); animation:titlepop .7s ease-out both; }
.ltheroes { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:14px; }
.lthero { position:relative; width:64px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.ltface { position:relative; width:64px; height:64px; border-radius:14px; border:3px solid #3d8bff; background:linear-gradient(180deg,#3a5bb0,#1d2a5c); overflow:hidden; }
.ltface img { width:100%; height:100%; object-fit:contain; transform:scale(1.9); transform-origin:50% 14%; } .ltface span { position:absolute; right:2px; bottom:2px; background:#141a33; color:var(--gold); border-radius:7px; font-size:11px; font-weight:700; padding:0 5px; }
.lthero.bench .ltface { filter:grayscale(.6); }
.lthero.up .ltface { border-color:#ffd23f; box-shadow:0 0 0 3px rgba(255,210,63,.35), 0 0 24px rgba(255,210,63,.9); animation:openpop .6s ease-out; }
.ltup { position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; font-size:10px; font-weight:700; color:#3a2200; background:linear-gradient(180deg,#fff0a0,#ffc21a); border-radius:8px; padding:1px 6px 1px 4px; box-shadow:0 2px 0 #a86a00, 0 0 10px rgba(255,210,63,.7); } .ltup .ztri { border-bottom-color:#3a2200; border-left-width:4px; border-right-width:4px; border-bottom-width:6px; margin-right:3px; }
.ltxp { display:flex; align-items:center; gap:3px; width:100%; height:12px; background:#0a0c12; border-radius:6px; overflow:hidden; position:relative; } .ltxp b { position:absolute; left:3px; font-size:8px; z-index:1; color:#fff; } .ltxp i { display:block; height:100%; background:linear-gradient(90deg,#3aa0ff,#7fd6ff); }
.ltgold { display:flex; align-items:center; justify-content:center; gap:8px; font-size:22px; color:var(--gold); align-self:center; width:auto; background:rgba(10,13,30,.65); border-radius:14px; padding:4px 14px; } .ltgold img { width:28px; height:28px; } .ltgold span { font-size:14px; color:#7fd6ff; }
.lth { text-align:center; font-size:20px; font-weight:700; }
.ltcards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .ltcards.n4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ltcard { position:relative; aspect-ratio:.66; border-radius:16px; border:3px solid var(--rc); background:linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #1a2140), color-mix(in srgb, var(--rc) 25%, #10152c)); box-shadow:0 0 16px color-mix(in srgb, var(--rc) 60%, transparent), 0 4px 0 rgba(0,0,0,.4); display:flex; flex-direction:column; align-items:center; padding:6px 4px; color:#fff; font:inherit; transition:transform .15s; }
.ltcard.sel { transform:translateY(-6px) scale(1.04); border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4), 0 0 28px color-mix(in srgb, var(--rc) 90%, #fff), 0 6px 0 rgba(0,0,0,.4); }
.lttop { font-size:12px; font-weight:700; text-align:center; line-height:1.1; min-height:28px; display:flex; align-items:center; }
.ltpic { flex:1; min-height:0; width:92%; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.ltcard.ishero .ltpic { width:100%; }
.ltbot { font-size:10.5px; font-weight:700; color:#e0e6ff; text-align:center; }
.ltsmith { position:absolute; left:6px; top:32px; display:flex; flex-direction:column; align-items:center; gap:2px; } .ltsmith img { width:24px; height:24px; }
.ltcard .shel { top:30px; left:auto; right:6px; }
.ltinfo { min-height:60px; } .ltdet { font-size:14px; line-height:1.4; } .ltdet b { font-size:16px; } .ltdet span { color:#c3cae6; } .ltdet .zlines { margin-top:6px; } .ltdet .zl { font-size:13px; padding:6px 10px; }
.ltfoot { flex-direction:column; align-items:center; gap:10px; }
.ltroll { gap:8px; } .ltroll img { width:30px; height:30px; } .ltroll small { color:var(--gold); }

/* ---------- Lauf-Ende (schlicht) ---------- */
.relose { color:#ff8a8a; font-size:40px; } .restats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .restats > div { display:flex; flex-direction:column; align-items:center; } .restats small { color:var(--muted); font-size:12px; } .restats b { font-size:17px; }

/* ---------- Verschmelzen ---------- */
#merge { position:fixed; inset:0; z-index:65; background:radial-gradient(circle at 50% 35%, rgba(50,78,180,.92), rgba(8,10,24,.97) 70%); display:flex; align-items:center; justify-content:center; padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); animation:screenin .25s ease-out; }
.mgbox { width:min(100%, 400px); display:flex; flex-direction:column; align-items:center; gap:14px; }
.mgtitle { font-size:clamp(34px, 11vw, 50px); font-weight:700; color:#fff; letter-spacing:1px; text-shadow:0 4px 0 #8a4b00, 0 0 20px rgba(255,190,60,.6); animation:titlepop .6s ease-out both; }
.mgfly { position:relative; width:220px; height:190px; }
.mgswirl { position:absolute; left:50%; top:50%; width:170px; height:170px; margin:-85px 0 0 -85px; border-radius:50%; border:5px solid transparent; border-top-color:#9fe3ff; border-right-color:rgba(159,227,255,.5); animation:mgspin .6s linear 3, mgfade 1.9s ease-out forwards; filter:drop-shadow(0 0 10px #7fd6ff); }
@keyframes mgspin { to { transform:rotate(360deg); } } @keyframes mgfade { 0%,70% { opacity:1; } 100% { opacity:0; transform:scale(.3); } }
.mgpart { position:absolute; left:50%; top:50%; margin:-32px 0 0 -32px; animation:mgin 1.2s cubic-bezier(.5,0,.8,.4) var(--d) forwards; transform:rotate(var(--a)) translateX(80px) rotate(calc(-1 * var(--a))); }
@keyframes mgin { 0% { transform:rotate(var(--a)) translateX(80px) rotate(calc(-1 * var(--a))); opacity:1; } 80% { opacity:1; } 100% { transform:rotate(calc(var(--a) + 540deg)) translateX(0) rotate(calc(-1 * var(--a) - 540deg)) scale(.4); opacity:0; } }
.mgnew { position:absolute; left:50%; top:50%; margin:-42px 0 0 -42px; opacity:0; animation:mgpop .5s ease-out 1.25s forwards; }
.mgnew .ztile { box-shadow:0 0 30px rgba(255,210,63,.9), 0 3px 0 rgba(0,0,0,.4); }
@keyframes mgpop { 0% { opacity:0; transform:scale(.2); } 70% { opacity:1; transform:scale(1.25); } 100% { opacity:1; transform:scale(1); } }
.mgpanel { width:100%; border-color:rgba(255,210,63,.55); animation:rise .4s ease-out 1.3s both; }
.mgname { font-size:22px; font-weight:700; text-align:center; margin-bottom:10px; } .mgname .zs i { width:18px; height:18px; }
.mgcmp { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mgrow { display:flex; align-items:center; gap:8px; background:rgba(10,13,30,.6); border-radius:12px; padding:8px 10px; } .mgrow.wide { grid-column:1 / -1; }
.mgrow img { width:32px; height:32px; object-fit:contain; } .mgrow small { display:block; font-size:12px; color:var(--muted); font-weight:600; } .mgrow b { font-size:17px; } .mgrow em { font-style:normal; color:#7fd6ff; }
.mgto { display:inline-block; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid var(--good); vertical-align:1px; margin:0 3px; }
.mgrow.neu b { color:#ffd23f; font-size:15px; }
.mghint { color:var(--muted); font-size:13px; font-weight:600; animation:rise .4s ease-out 1.4s both; } #mgOk { animation:rise .4s ease-out 1.5s both; }

/* Porträt-Ausschnitt (Bilder zeigen die ganze Figur): Kopf und Oberkörper vergrößert */
.zface { display:block; flex:0 0 auto; overflow:hidden; position:relative; } .zface img { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1.9); transform-origin:50% 14%; pointer-events:none; }
.shcard, .ltcard { min-width:0; } .ltdet .zl-tags { padding:0; }
.zconf { position:fixed; top:-14px; width:10px; height:14px; z-index:70; pointer-events:none; border-radius:2px; animation:zconf linear forwards; }
@keyframes zconf { 0% { transform:translateY(0) rotate(0); opacity:1; } 70% { opacity:1; } 100% { transform:translateY(52vh) rotate(600deg); opacity:0; } }
#merge .zconf { z-index:0; } .mgbox { position:relative; z-index:1; }
.mgrow b { white-space:nowrap; } .mgcmp { grid-template-columns:repeat(2, minmax(0,1fr)); }
.zcell img { height:128%; }
.mgrow.neu b { white-space:normal; }

/* ---------- 3D-Bildschirme: Aufstellung, Kampf (Canvas #stage darunter) ---------- */
#stage { touch-action:none; }
.zscr.z3d { background:none; pointer-events:none; justify-content:space-between; overflow:hidden; padding-bottom:calc(var(--sab) + 12px); }
.zscr.z3d > * { pointer-events:none; }
.z3d .zpanel, .z3d button, .z3d .zbcard { pointer-events:auto; }
.z3top, .z3bot { display:flex; flex-direction:column; gap:8px; }
.z3d .ztitle { font-size:26px; }
.z3d .zfoes { background:rgba(20,26,54,.78); backdrop-filter:blur(6px); }
.z3bot .zsub { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); margin:0; }
.z3bot .zbench { background:rgba(20,26,54,.82); backdrop-filter:blur(6px); padding:8px; transition:box-shadow .15s, border-color .15s; }
.z3d .zbcard { touch-action:none; }
.zbench.zhot { border-color:var(--gold); box-shadow:0 0 18px rgba(255,210,63,.6); }
.zbdrop { min-height:58px; display:flex; align-items:center; justify-content:center; } .zbdrop h4 { margin:0; }
.zbtns3 { display:flex; gap:10px; } .zbtns3 .big { flex:1; width:auto; }
.zghost { position:fixed; left:0; top:0; width:72px; height:72px; object-fit:contain; pointer-events:none; z-index:60; filter:drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.zrowlabels { position:absolute; inset:0; }
.zrowlabels span { position:absolute; left:0; top:0; font-weight:700; font-size:15px; color:#eef1ff; text-shadow:0 2px 4px rgba(0,0,0,.75); white-space:nowrap; }
/* Kampf-HUD */
.zbattle { padding-top:calc(var(--sat) + 10px) !important; }
.zbtop { display:flex; align-items:flex-start; gap:8px; position:relative; }
.zbtitle { pointer-events:none; font-size:15px; padding:6px 14px; background:rgba(15,19,40,.78); border-radius:16px; color:#fff; font-weight:700; margin-right:auto; }
.zbtitle b { color:var(--gold); }
.zbossbar { margin-right:auto; flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.zbossbar b { font-size:18px; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.8); text-align:center; }
.zbseg { display:flex; gap:4px; background:rgba(10,12,28,.85); border:2px solid rgba(255,255,255,.18); border-radius:10px; padding:3px; }
.zbseg i { flex:1; height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; display:flex; flex-direction:row-reverse; }
.zbseg em { display:block; height:100%; background:linear-gradient(180deg,#ffb347,#ff5a2a); border-radius:6px; }
.zbseg i:first-child em { background:linear-gradient(180deg,#ff6a5a,#d42a2a); }
.zbctl { display:flex; gap:8px; }
.zround { width:46px; height:46px; border-radius:14px; border:0; background:linear-gradient(180deg,#ffc76b,#ff9f1c); box-shadow:0 4px 0 #a85d00; color:#2b1600; font:inherit; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; gap:5px; }
.zpause i { width:6px; height:18px; border-radius:2px; background:#2b1600; }
.zfocus { position:absolute; right:0; top:54px; width:46px; height:46px; border-radius:50%; background:rgba(15,19,40,.75); display:flex; align-items:center; justify-content:center; opacity:.6; }
.zfocus.ready { opacity:1; box-shadow:0 0 10px rgba(255,90,90,.6); }
.zfocus img { width:32px; height:32px; }
.zfring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(rgba(10,12,28,.72) var(--c,0%), transparent 0); }
.zfocusmark { position:fixed; left:0; top:0; width:44px; height:44px; pointer-events:none !important; z-index:5; filter:drop-shadow(0 0 6px rgba(255,60,60,.8)); animation:zfpulse .8s ease-in-out infinite; }
@keyframes zfpulse { 50% { width:52px; height:52px; } }
.zbheroes { display:flex; justify-content:center; gap:6px; }
.zbh { flex:0 1 72px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.zbhb { position:relative; width:64px; height:64px; border-radius:50%; border:0; padding:0; background:#141a36; box-shadow:0 4px 10px rgba(0,0,0,.5); }
.zbhb img { position:absolute; inset:5px; width:54px; height:54px; border-radius:50%; object-fit:cover; object-position:top; background:radial-gradient(circle at 50% 30%, #3a4a8a, #1a2046); }
.zring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#ffb020 var(--p,0%), rgba(255,255,255,.12) 0); }
.zbh.full .zbhb { animation:zsup 0.9s ease-in-out infinite; } .zbh.full .zring { background:conic-gradient(#ffe066 100%, #ffe066 0); box-shadow:0 0 16px #ffc83d; }
@keyframes zsup { 50% { transform:scale(1.08); box-shadow:0 0 22px #ffc83d; } }
.zbh.dead { filter:grayscale(1) brightness(.5); }
.zbhp { width:58px; height:7px; border-radius:4px; background:rgba(10,12,20,.85); overflow:hidden; } .zbhp i { display:block; height:100%; background:linear-gradient(180deg,#8ff08a,#3cc24a); }
.zbits { display:flex; gap:2px; }
.zbit { position:relative; width:20px; height:20px; border-radius:6px; background:rgba(10,12,28,.8); overflow:hidden; }
.zbit img { width:100%; height:100%; object-fit:contain; } .zbit i { position:absolute; inset:0; background:conic-gradient(rgba(5,6,16,.7) var(--c,0%), transparent 0); }

/* ---------- Erklärkarten ---------- */
#tip { position:fixed; inset:0; z-index:72; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,7,16,.7); backdrop-filter:blur(3px); animation:screenin .25s ease-out; }
.tipbox { width:min(100%, 360px); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; background:linear-gradient(180deg,#2c3872,#171d3e); border:2px solid rgba(255,210,63,.5); border-radius:24px; padding:20px 18px 18px; box-shadow:0 20px 40px rgba(0,0,0,.5); animation:openpop .35s ease-out; }
.tipimgs { display:flex; gap:10px; justify-content:center; } .tipimgs img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); border-radius:16px; }
.tipbox h3 { font-size:24px; font-weight:700; color:var(--gold); } .tipbox p { font-size:15.5px; line-height:1.45; color:#e3e8ff; font-weight:500; } .tipbox .big { width:100%; }
.twlink.tall { writing-mode:vertical-rl; transform:rotate(180deg); width:13px; max-width:none; display:flex; align-items:center; justify-content:center; font-size:10px; overflow:hidden; white-space:nowrap; }
.zscr > .zconf { z-index:-1; } .zconf { animation-name:zconf2; } @keyframes zconf2 { 0% { transform:translateY(0) rotate(0); opacity:1; } 60% { opacity:.9; } 100% { transform:translateY(40vh) rotate(500deg); opacity:0; } }

.rewin { font-size:clamp(40px, 12vw, 58px); } .rename { font-size:11px; font-weight:700; color:#c3cae6; }
.recry { display:flex; flex-direction:column; gap:8px; align-items:center; } .reparts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.reparts span { background:rgba(10,13,30,.55); border-radius:10px; padding:4px 10px; font-size:13px; font-weight:600; color:#c3cae6; } .reparts b { color:#c9a8ff; margin-left:5px; }
.refresh { display:flex; align-items:center; gap:12px; border-color:rgba(111,220,140,.5); } .refresh img { width:56px; height:56px; object-fit:contain; } .refresh b { display:block; color:var(--good); font-size:16px; } .refresh span { font-size:13px; color:#c3cae6; }
.ltcards { align-items:start; } .ltpic { height:0; } .ltcard.ishero .ltpic { object-fit:contain; }

/* ---------- M2: Element-Chips, Heldenkarte ---------- */
.zelc { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 3px; border-radius:10px; font-size:12px; font-weight:700; color:#fff; background:color-mix(in srgb, var(--ec) 35%, rgba(10,13,30,.7)); border:1px solid color-mix(in srgb, var(--ec) 70%, transparent); }
.zelc img { width:18px; height:18px; object-fit:contain; } .zelc:empty, .wdels .zelc { padding:2px; }
.zhel { position:absolute; right:5px; top:5px; width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.zhero.locked .zhel { filter:grayscale(.6) drop-shadow(0 2px 3px rgba(0,0,0,.6)); opacity:.8; }

/* ---------- M2: Weltwahl ---------- */
.wdgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.wdcard { position:relative; min-height:168px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px; border-radius:18px; border:3px solid rgba(160,180,255,.3); background-size:cover; background-position:center; color:#fff; font:inherit; text-align:left; box-shadow:0 5px 0 rgba(0,0,0,.4); overflow:hidden; }
.wdcard.sel { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.35), 0 0 22px rgba(255,170,40,.7), 0 5px 0 rgba(0,0,0,.4); }
.wdcard.locked { filter:grayscale(.85) brightness(.6); }
.wdbadge { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.wdn { font-size:11px; font-weight:700; color:var(--gold); text-shadow:0 1px 2px #000; } .wdname { font-size:17px; line-height:1.05; text-shadow:0 2px 3px #000; }
.wdboss { position:absolute; right:-6px; bottom:18px; width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.6)); }
.wdbn { margin-top:auto; font-size:11px; font-weight:700; color:#ffd0d0; text-shadow:0 1px 2px #000; max-width:62%; }
.wdels { position:absolute; right:8px; top:8px; display:flex; gap:3px; }
.wdlock { position:absolute; inset:auto 0 0 0; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px; background:rgba(8,10,20,.85); font-size:12px; font-weight:700; } .wdlock img { width:14px; height:18px; object-fit:contain; }

/* ---------- M2: Baum-Gruppen ---------- */
.zgrp { display:flex; justify-content:space-between; align-items:baseline; font-size:16px; font-weight:700; color:#dfe5ff; margin:6px 4px -4px; } .zgrp span { font-size:12px; color:var(--muted); }
.znps { display:inline-block; font-size:11px; font-weight:700; color:#c9a8ff; background:rgba(160,120,255,.18); border-radius:8px; padding:0 6px; }

/* ---------- M2: Synergie-Leiste ---------- */
.zsyn { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.zsy { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 3px; border-radius:12px; background:rgba(14,18,40,.82); border:1.5px solid rgba(160,180,255,.25); color:#aab3d6; font:inherit; }
.zsyh { width:26px; height:26px; display:flex; align-items:center; justify-content:center; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:#2a3360; } .zsyh img { width:18px; height:18px; object-fit:contain; filter:grayscale(.7); }
.zsy b { font-size:12px; margin-right:4px; } .zsy em { font-style:normal; font-size:12px; font-weight:700; }
.zsy.on { color:#fff; border-color:rgba(255,194,74,.7); box-shadow:0 0 10px rgba(255,170,40,.35); } .zsy.on em { color:var(--good); } .zsy.on .zsyh { background:linear-gradient(180deg,#ffc76b,#ff9f1c); } .zsy.on .zsyh img { filter:none; }
.z3top .zsyn { margin-top:6px; } .twsyn { margin-top:-2px; }
.zfoe { position:relative; } .zfoel { width:16px !important; height:16px !important; margin-left:-12px; margin-top:-16px; }

/* ---------- M2: Kampf-Labels (neue Elemente, betäubt, festgeklebt, Reaktionsnamen) ---------- */
.bl-chips { width:auto; min-width:60px; transform:translateX(calc(-50% + 30px)); flex-wrap:nowrap; }
.bl-chip.poison { color:#b8f07a; } .bl-chip.shock { color:#fff07a; } .bl-chip.water { color:#9fd0ff; } .bl-chip.glue { color:#ffb0ea; }
.bl-chip.stun { gap:2px; padding:3px 5px; background:rgba(40,30,0,.8); } .bl-chip.stun i { width:6px; height:6px; background:#ffd23f; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation:blstun .8s linear infinite; } .bl-chip.stun i:nth-child(2) { animation-delay:-.27s; } .bl-chip.stun i:nth-child(3) { animation-delay:-.53s; }
@keyframes blstun { 50% { transform:translateY(-3px) scale(1.3); } }
.bl-chip.fest { font-size:10px; }
.bl-pop.combo em.poison { color:#9fe86a; } .bl-pop.combo em.shock { color:#ffe45a; } .bl-pop.combo em.water { color:#6fb8ff; } .bl-pop.combo em.glue { color:#ff8ae0; }
.wdcard > span, .wdcard > b { position:relative; z-index:1; } .wdboss { width:66px; height:66px; bottom:22px; right:-4px; z-index:0; } .wdname { text-shadow:0 2px 3px #000, 0 0 8px rgba(0,0,0,.8); }

/* =====================================================================================================================
   Feinschliff (Nutzer-Rückmeldung iPhone 28.09.: „schöner“): Titel/Intro/Menü, Bildschirm-Wechsel, Druck-Feedback, gestaffelte
   Auftritte, Paneel-Tiefe, Seltenheits-Glanz, Karten-Knoten, Feiern, Reiter. Nur transform/opacity animiert; prefers-reduced-motion aus.
   ===================================================================================================================== */
:root { --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:140ms; --t-mid:240ms; }

/* ---------- Ladebild ---------- */
#loader { z-index:90; background:#0f1320; justify-content:center; padding:0; transition:opacity .5s var(--ease); }
#loader::before { display:none; }
#loader .ldbg { position:absolute; inset:0; background:url(../img/keyart.jpg) 50% 42% / cover no-repeat; }
#loader .ldbg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,16,34,.35), rgba(12,16,34,0) 30%, rgba(12,16,34,0) 60%, rgba(12,16,34,.85)); }
#loader .ldlogo { position:absolute; top:calc(var(--sat) + 7vh); left:50%; width:min(76vw, 380px); transform:translateX(-50%); filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
#loader .ldbar { position:absolute; left:50%; bottom:calc(var(--sab) + 56px); width:160px; height:6px; margin-left:-80px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }
#loader .ldbar i { position:absolute; inset:0; width:40%; border-radius:3px; background:linear-gradient(90deg, rgba(255,210,63,0), #ffd23f, rgba(255,210,63,0)); animation:ldrun 1.1s var(--ease) infinite; }
@keyframes ldrun { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
#loader.out { opacity:0; pointer-events:none; }

/* ---------- Intro-Video ---------- */
#intro { z-index:95; background:#0f1320; transition:opacity .6s var(--ease); }
#intro::after { display:none; }
#intro video { width:100%; height:100%; object-fit:cover; }
#intro.out { opacity:0; }
#introSkip, #introSound { position:absolute; z-index:2; font:inherit; font-weight:700; color:#fff; border-radius:20px; backdrop-filter:blur(6px); }
#introSkip { right:calc(var(--sar) + 16px); bottom:calc(var(--sab) + 22px); background:rgba(15,19,32,.45); border:1.5px solid rgba(255,255,255,.3); padding:8px 16px; font-size:14px; }
#introSound { left:50%; bottom:calc(var(--sab) + 84px); transform:translateX(-50%); background:rgba(255,159,28,.92); border:0; padding:12px 22px; font-size:16px; color:#2b1600; box-shadow:0 4px 0 #a85d00, 0 10px 24px rgba(0,0,0,.4); animation:snd 1.6s ease-in-out infinite; }
@keyframes snd { 50% { transform:translateX(-50%) scale(1.06); } }

/* ---------- Menü ---------- */
#s-menu { background:#0f1320; justify-content:flex-end; overflow:hidden; }
#s-menu .mbg { position:fixed; inset:0; z-index:0; overflow:hidden; }
/* Titelbild: Helden stehen bei ~45–85 % der Bildhöhe → Anker darunter; breite Fenster (4:3, Desktop) zeigen mehr Himmel weg */
#s-menu .mbg i { position:absolute; inset:-4%; background:url(../img/keyart.jpg) 50% 45% / cover no-repeat; animation:kenburns 38s ease-in-out infinite alternate; will-change:transform; }
@media (min-aspect-ratio: 3/4) { #s-menu .mbg i { background-position:50% 12%; } }
@keyframes kenburns { from { transform:scale(1) translate3d(0, 0, 0); } to { transform:scale(1.08) translate3d(-1.5%, -1.2%, 0); } }
#s-menu .mshade { position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(12,16,34,.45) 0%, rgba(12,16,34,0) 22%, rgba(12,16,34,0) 52%, rgba(12,16,34,.55) 70%, rgba(12,16,34,.94) 88%, #0f1320 100%); }
#s-menu > .zmenu { position:relative; z-index:1; justify-content:space-between; }
.mlogo { width:min(74vw, 360px); margin-top:calc(1vh - 6px); }
.mlogoin { position:relative; animation:logofloat 4.5s ease-in-out infinite; }
.mlogoin img { display:block; width:100%; height:auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
@keyframes logofloat { 50% { transform:translateY(-6px); } }
/* Glanz: heller Streifen, auf die Logo-Form maskiert, fährt alle 6 s darüber */
.mshine { position:absolute; inset:0; overflow:hidden; -webkit-mask:url(../img/logo.png) center / 100% 100% no-repeat; mask:url(../img/logo.png) center / 100% 100% no-repeat; pointer-events:none; }
.mshine i { position:absolute; top:0; bottom:0; left:0; width:35%; background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform:translateX(-120%) skewX(-12deg); animation:shine 6s var(--ease) 1.2s infinite; }
@keyframes shine { 0% { transform:translateX(-120%) skewX(-12deg); } 22%, 100% { transform:translateX(320%) skewX(-12deg); } }
.mlogo.wait { opacity:0; }
.mlogo.popin { animation:logopop .7s var(--ease-out) backwards; }
@keyframes logopop { from { opacity:0; transform:scale(.6) translateY(14px); } 60% { opacity:1; } to { opacity:1; transform:none; } }
.zmbtns { gap:12px; padding-bottom:6px; }
.zmbtns > * { animation:zin .5s var(--ease) backwards; } .zmbtns > :nth-child(2) { animation-delay:.06s; } .zmbtns > :nth-child(3) { animation-delay:.12s; } .zmbtns > :nth-child(4) { animation-delay:.18s; } .zmbtns > :nth-child(5) { animation-delay:.24s; }
.big.mmain { font-size:22px; padding:18px; }
.zmrow .zbtn { background:linear-gradient(180deg, rgba(52,66,124,.88), rgba(28,36,80,.92)); backdrop-filter:blur(6px); }
.zstats { gap:10px; align-items:center; font-size:12px; color:rgba(220,228,255,.62); } .zstats b { color:rgba(255,255,255,.9); font-weight:700; }
.zstats > i { width:3px; height:3px; border-radius:50%; background:rgba(220,228,255,.35); }
#s-menu .zcont { background:linear-gradient(180deg, rgba(38,48,92,.82), rgba(20,26,54,.9)); backdrop-filter:blur(8px); }

/* ---------- Bildschirm-Wechsel ---------- */
.zscr { animation:zscreen var(--t-mid) var(--ease) backwards; }
@keyframes zscreen { from { opacity:0; transform:translate3d(0, 10px, 0); } to { opacity:1; transform:none; } }
#s-menu, #s-battle, #s-formation, #s-map, #s-shop { animation-name:zfade; } /* Bildschirme mit fixierten Kindern: nur Deckkraft (transform würde sie mitverschieben) */ @keyframes zfade { from { opacity:0; } to { opacity:1; } }

/* ---------- Druck-Feedback (scale als eigene Eigenschaft, damit bestehende transforms bleiben) ---------- */
button, .ztile, .shcard, .ltcard, .zhero, .wdcard, .rscard, .zbcard, .twcell, .twtab { transition:scale var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
button:active:not(:disabled), .shcard:active, .ltcard:active, .zhero:active, .wdcard:active, .rscard:active:not(:disabled), .zbcard:active, .twcell:active { scale:.95; }
.big:active:not(:disabled) { scale:.97; } .mnode:active .mplate { scale:.9; }
button:focus-visible { outline:3px solid rgba(255,210,63,.8); outline-offset:3px; }
@media (hover:hover) { .big:hover:not(:disabled), .zbtn:hover:not(:disabled) { filter:brightness(1.08); } .shcard:hover, .ltcard:hover, .zhero:hover, .wdcard:hover { filter:brightness(1.07); } }

/* ---------- gestaffelte Auftritte (nur direkt nach dem Öffnen eines Bildschirms: .zin setzt app.js ~0,7 s) ---------- */
@keyframes zin { from { opacity:0; transform:translate3d(0, 14px, 0) scale(.97); } to { opacity:1; transform:none; } }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > * { animation:zin .42s var(--ease) backwards; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(2) { animation-delay:40ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(3) { animation-delay:80ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(4) { animation-delay:120ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(5) { animation-delay:160ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(6) { animation-delay:200ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(7) { animation-delay:230ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(8) { animation-delay:260ms; }
.zin :is(.zhgrid, .shgrid, .ltcards, .ztree, .wdgrid, .rsgrid, .tvlist, .twgrid, .evopts, .zsyn, .twtabs, .shminis, .ltheroes) > :nth-child(n+9) { animation-delay:290ms; }
.zin .zhead, .zin > .ztitle, .zin > .zsub { animation:zin .36s var(--ease) backwards; }

/* ---------- Typo-Skala (Schritte ≈ 1,25) ---------- */
.ztitle { font-size:28px; letter-spacing:.2px; } .zhead .ztitle { font-size:24px; } .zsub { font-size:13.5px; line-height:1.4; color:rgba(200,210,240,.72); }
.zpanel h4 { font-size:14px; letter-spacing:.6px; text-transform:none; color:#e4e9ff; }

/* ---------- Paneel-Tiefe ---------- */
.zpanel { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%), linear-gradient(180deg, rgba(38,48,92,.94), rgba(18,24,50,.96));
  border:1.5px solid rgba(170,188,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.32); }
.zbtn { box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 0 #0c1026, 0 8px 16px rgba(0,0,0,.3); }
.big { box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 6px 0 #a85d00, 0 12px 24px rgba(0,0,0,.4); }
.big.alt { box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 #0a0c12, 0 10px 20px rgba(0,0,0,.3); }

/* ---------- Seltenheits-Glanz (Kacheln, Laden, Beute) ---------- */
.ztile.r3, .shcard.r3 { box-shadow:0 0 12px color-mix(in srgb, var(--rc) 45%, transparent), 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.ztile.r4, .shcard.r4 { box-shadow:0 0 16px color-mix(in srgb, var(--rc) 60%, transparent), 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.ztile.r5, .shcard.r5 { box-shadow:0 0 20px color-mix(in srgb, var(--rc) 75%, transparent), 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.ztile.r4::after, .ztile.r5::after, .shcard.r4::after, .shcard.r5::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%) no-repeat; background-size:250% 100%; animation:glint 4s var(--ease) infinite; }
@keyframes glint { 0% { background-position:130% 0; } 30%, 100% { background-position:-130% 0; } }

/* ---------- Karten-Knoten: leichtes Schweben der Symbole ---------- */
.mplate img { animation:bob 3.4s ease-in-out infinite; }
.mnode:nth-child(3n) .mplate img { animation-delay:-1.1s; } .mnode:nth-child(3n+1) .mplate img { animation-delay:-2.3s; }
@keyframes bob { 50% { transform:translateY(-3px) rotate(-2deg); } }
.mnode.past .mplate img { animation:none; }
.zmapfoot { animation:zin .4s var(--ease) .1s backwards; }

/* ---------- Feiern: Beute ---------- */
.ltsieg { position:relative; }
.ltsieg::before { content:""; position:absolute; left:50%; top:50%; width:340px; height:340px; margin:-170px 0 0 -170px; z-index:-1; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,210,63,.22) 0 10deg, rgba(255,210,63,0) 10deg 22deg); -webkit-mask:radial-gradient(circle, #000 20%, transparent 68%); mask:radial-gradient(circle, #000 20%, transparent 68%); animation:rays 14s linear infinite; }
@keyframes rays { to { transform:rotate(360deg); } }
.zin .ltcards > .ltcard { animation:cardflip .55s var(--ease-out) backwards; } .ltcards > :nth-child(2) { animation-delay:.12s; } .ltcards > :nth-child(3) { animation-delay:.24s; } .ltcards > :nth-child(4) { animation-delay:.36s; }
@keyframes cardflip { from { opacity:0; transform:perspective(600px) rotateY(80deg) translateY(10px); } to { opacity:1; transform:none; } }
.ltcard.sel { animation:none; }
.ltgold { animation:zin .5s var(--ease) .3s backwards; }
/* Verschmelzen: Strahlen hinter dem neuen Teil */
.mgfly::before { content:""; position:absolute; left:50%; top:50%; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; opacity:0;
  background:repeating-conic-gradient(rgba(159,227,255,.25) 0 9deg, transparent 9deg 20deg); -webkit-mask:radial-gradient(circle, #000 15%, transparent 66%); mask:radial-gradient(circle, #000 15%, transparent 66%); animation:rays 12s linear infinite, raysin .6s var(--ease) 1.2s forwards; }
@keyframes raysin { to { opacity:1; } }

/* ---------- Reiter ---------- */
.ztabs { padding-top:8px; background:linear-gradient(180deg, rgba(14,18,38,.92), rgba(8,10,22,.98)); box-shadow:0 -8px 24px rgba(0,0,0,.35); }
.ztabs button { position:relative; transition:color var(--t-mid) var(--ease); }
.ztabs button::before { content:""; position:absolute; inset:0 10%; border-radius:14px; background:linear-gradient(180deg, rgba(255,179,71,.2), rgba(255,179,71,.06)); box-shadow:inset 0 1px 0 rgba(255,220,160,.25); opacity:0; transform:scale(.8); transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.ztabs button.on { background:none; } .ztabs button.on::before { opacity:1; transform:none; }
.ztabs button img { position:relative; transition:transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease); }
.ztabs button.on img { transform:translateY(-3px) scale(1.12); }

/* ---------- obere Leiste: Zahl hüpft bei Änderung ---------- */
#top .tpill.bump b { display:inline-block; animation:numbump .4s var(--ease); } @keyframes numbump { 30% { transform:scale(1.35); } }

/* ---------- Blatt: Schließen weich ---------- */
#sheet.out .zsheet { animation:sheetout .18s ease-in forwards; } #sheet.out .zsbg { animation:fadeout .18s ease-in forwards; }
@keyframes sheetout { to { transform:translateY(40px); opacity:0; } }
#sheet .zsheet { animation:zsheetin .32s var(--ease-out); }

/* ---------- weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  #s-menu .mbg i, .mlogoin, .mshine i, .mplate img, .ltsieg::before, .mgfly::before { animation:none !important; }
  .zconf { display:none; }
}
#s-menu > .mbg, #s-menu > .mshade { width:auto; max-width:none; }
/* Menü: obere Leiste durchsichtig über dem Titelbild, Logo kompakter im Himmel */
body.zmenuon #top { background:linear-gradient(180deg, rgba(12,16,34,.55), rgba(12,16,34,0)); border-bottom:0; backdrop-filter:none; }
body.zmenuon.zbarred #s-menu { padding-top:calc(var(--sat) + 44px); }
.mlogo { width:min(66vw, 330px); }
@media (max-aspect-ratio: 9/19) { .mlogo { width:min(62vw, 300px); } }
/* Breite Fenster (Seitenverhältnis > 1,1: Desktop, Tablet/Handy quer): eigenes Querformat-Titelbild keyart_wide.jpg vollflächig (Helden bei
   ~45–85 % der Höhe → Anker leicht unter der Mitte), Logo im Himmel oben links, Knöpfe unten mittig über weichem dunklem Verlauf */
@media (min-aspect-ratio: 11/10) {
  #s-menu .mbg i { inset:-3%; background-image:url(../img/keyart_wide.jpg); background-position:50% 62%; }
  #s-menu .mshade { background:linear-gradient(180deg, rgba(12,16,34,.4) 0%, rgba(12,16,34,0) 15%, rgba(12,16,34,0) 52%, rgba(12,16,34,.5) 70%, rgba(12,16,34,.88) 88%, #0f1320 100%); }
  #s-menu > .zmenu { width:100%; max-width:none; }
  #s-menu .mlogo { position:absolute; left:calc(var(--sal) + 3vw); top:calc(var(--sat) + 1vh); width:min(27vw, 42vh, 420px); margin:0; }
  #s-menu .zmbtns { margin-top:auto; width:min(100%, 580px); }
  #loader .ldbg { background-image:url(../img/keyart_wide.jpg); background-position:50% 62%; }
  #loader .ldlogo { left:calc(var(--sal) + 3vw); top:calc(var(--sat) + 3vh); width:min(27vw, 42vh, 420px); transform:none; }
  /* Intro-Video bleibt hochkant: mittig mit Rand, dahinter das Querformat-Bild unscharf und abgedunkelt */
  #intro::before { content:""; position:absolute; inset:-6%; background:url(../img/keyart_wide.jpg) 50% 60% / cover no-repeat; filter:blur(22px) brightness(.45) saturate(1.15); }
  #intro video { position:relative; object-fit:contain; box-shadow:0 0 60px rgba(0,0,0,.6); }
}
/* Niedrige Querformat-Fenster (Handy quer): Menü kompakter, damit Knöpfe und Tab-Leiste passen */
@media (min-aspect-ratio: 11/10) and (max-height: 560px) {
  #s-menu .zmbtns { gap:7px; width:min(100%, 620px); } #s-menu .zstats { display:none; }
  #s-menu .zmbtns .big { padding-top:9px; padding-bottom:9px; font-size:18px; }
  #s-menu .mnavb { flex-direction:row; gap:5px; padding:5px 4px; } #s-menu .mnavb img { width:22px; height:22px; }
  #s-menu .mmodes .msiege { padding:4px 6px; } #s-menu .mmodes .msiege > img:first-child { width:30px; height:30px; }
  #s-menu .mlogo { width:min(24vw, 44vh, 300px); }
}
}

/* =====================================================================================================================
   M2d: Attribute, Punkte verteilen, Runenkreis, Taktik, Sperren
   ===================================================================================================================== */
/* Abzeichen „x Punkte“ */
.ptbadge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 4px; border-radius:12px; background:linear-gradient(180deg,#ffe07a,#ffb21a); color:#3a2200; font-size:12px; font-weight:700; box-shadow:0 2px 0 #a86a00, 0 0 12px rgba(255,200,60,.6); animation:ptpulse 1.6s ease-in-out infinite; }
.ptbadge img { width:18px; height:18px; object-fit:contain; }
@keyframes ptpulse { 50% { box-shadow:0 2px 0 #a86a00, 0 0 20px rgba(255,200,60,.95); } }
/* Beute: Punkte je Held + Sammelknopf */
.ltpts { display:inline-flex; align-items:center; gap:2px; margin-top:2px; padding:2px 8px 2px 3px; border:0; border-radius:10px; font:inherit; font-size:12px; font-weight:700; color:#3a2200; background:linear-gradient(180deg,#ffe07a,#ffb21a); box-shadow:0 2px 0 #a86a00; animation:ptpulse 1.6s ease-in-out infinite; }
.ltpts img { width:16px; height:16px; object-fit:contain; }
.ltptall { align-self:center; width:auto; gap:8px; padding:9px 16px; background:linear-gradient(180deg,#ffd66b,#ff9f1c); color:#2b1600; border-color:rgba(255,230,160,.6); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #a85d00, 0 0 18px rgba(255,180,50,.5); }
.ltptall img { width:24px; height:24px; }
/* Karte: Abzeichen am Trupp-Knopf */
#mpTeam { position:relative; } .mppts { position:absolute; right:-6px; top:-8px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#3a2200; background:linear-gradient(180deg,#ffe07a,#ffb21a); box-shadow:0 2px 0 #a86a00, 0 0 12px rgba(255,200,60,.8); animation:ptpulse 1.6s ease-in-out infinite; }
/* Turm: Punkt am Reiter, Attribut-Leiste, mehr Werte */
.twpt { position:absolute; left:-4px; top:-4px; width:14px; height:14px; border-radius:50%; background:#ffc21a; border:2px solid #141a33; box-shadow:0 0 8px rgba(255,194,26,.9); z-index:2; }
.twstats { grid-template-columns:1fr 1fr; } .twstats > div:nth-child(5) { grid-column:1 / -1; } .twstats b { font-size:16px; }
.twattr { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:6px 4px; border-radius:12px; border:1px solid var(--line); background:rgba(10,13,30,.55); font:inherit; color:#fff; }
.twattr.has { border-color:rgba(255,194,74,.7); box-shadow:0 0 14px rgba(255,170,40,.35); }
.twattrl { font-size:11px; color:var(--muted); font-weight:600; }
.atstrip { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; width:100%; }
.atstrip span { display:flex; flex-direction:column; align-items:center; line-height:1; } .atstrip img { width:18px; height:18px; object-fit:contain; } .atstrip b { font-size:12px; margin-top:1px; } .atstrip small { font-size:7.5px; color:var(--muted); font-weight:700; margin-top:1px; }
.atstrip span.main b { color:var(--gold); }
/* Blatt „Punkte verteilen“ */
.atsh { display:flex; flex-direction:column; gap:10px; }
.attabs { display:flex; gap:6px; justify-content:center; } .attab { position:relative; width:44px; height:44px; padding:0; border-radius:12px; border:2px solid rgba(160,180,255,.25); background:#1d2550; }
.attab .zface { width:100%; height:100%; border-radius:10px; } .attab.on { border-color:#ffc24a; } .attab em { position:absolute; right:-6px; top:-6px; font-style:normal; font-size:10px; font-weight:700; color:#3a2200; background:#ffc21a; border-radius:8px; padding:0 5px; }
.athead { display:flex; align-items:center; gap:10px; } .atface { width:52px; height:52px; border-radius:14px; background:#2a3566; border:2px solid rgba(255,255,255,.2); }
.athead > div { flex:1; min-width:0; display:flex; flex-direction:column; } .athead b { font-size:20px; } .athead small { font-size:12px; color:var(--muted); font-weight:600; }
.atpts { display:flex; flex-direction:column; align-items:center; padding:4px 10px; border-radius:14px; background:linear-gradient(180deg,#ffe07a,#ffb21a); color:#3a2200; box-shadow:0 3px 0 #a86a00, 0 0 16px rgba(255,200,60,.6); line-height:1; }
.atpts img { width:22px; height:22px; } .atpts b { font-size:20px; } .atpts small { font-size:10px; font-weight:700; } .atpts.none { filter:grayscale(1); opacity:.5; box-shadow:none; }
.atlist { display:flex; flex-direction:column; gap:5px; }
.atrow { display:flex; align-items:center; gap:8px; padding:5px 6px 5px 5px; border-radius:12px; background:rgba(10,13,30,.55); border:1.5px solid transparent; cursor:pointer; transition:border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.atrow > img { width:32px; height:32px; object-fit:contain; flex:0 0 32px; }
.atrow.sel { border-color:rgba(255,194,74,.7); background:rgba(60,48,20,.55); } .atrow.main .attx b::after { content:"Haupt"; margin-left:6px; font-size:9.5px; font-weight:700; color:#3a2200; background:var(--gold); border-radius:6px; padding:0 4px; vertical-align:2px; }
.attx { flex:1; min-width:0; display:flex; flex-direction:column; } .attx b { font-size:14px; } .attx small { font-size:10.5px; color:#b9c1dd; line-height:1.25; }
.atval { font-size:20px; font-weight:700; min-width:28px; text-align:right; }
.atplus { position:relative; width:36px; height:36px; flex:0 0 36px; border-radius:12px; border:0; background:linear-gradient(180deg,#5ad07a,#2e9e4f); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #17602c; }
.atplus::before, .atplus::after { content:""; position:absolute; left:50%; top:50%; width:16px; height:4px; margin:-2px 0 0 -8px; border-radius:2px; background:#fff; } .atplus::after { transform:rotate(90deg); }
.atplus:disabled { filter:grayscale(1); opacity:.35; box-shadow:none; }
.atstats { display:grid; grid-template-columns:1fr; gap:3px; padding:8px 10px; border-radius:14px; background:rgba(10,13,30,.55); }
.atstats h4 { grid-column:1 / -1; font-size:13px; color:#dfe5ff; } .atstats h4 small { font-size:11px; color:var(--gold); font-weight:600; margin-left:4px; }
.atst { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; } .atst span { color:var(--muted); font-weight:600; } .atst b { font-size:13px; white-space:nowrap; }
.atst.up b em { font-style:normal; color:var(--good); } .atst.up b { color:#fff; }
/* Runenkreis */
.zseg { width:min(100%, 340px); align-self:center; }
.rcircle { position:relative; width:min(100%, 360px); aspect-ratio:1; align-self:center; margin:4px auto 0; }
.rhalo { position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle, rgba(140,90,255,.35), rgba(80,50,200,.12) 45%, rgba(0,0,0,0) 70%); }
.rhalo::after { content:""; position:absolute; inset:4%; border-radius:50%; border:2px dashed rgba(190,160,255,.35); animation:rays 60s linear infinite; }
.rcircle svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rcircle line { stroke:rgba(170,150,255,.25); stroke-width:.6; } .rcircle line.lit { stroke:rgba(200,170,255,.8); stroke-width:.9; filter:drop-shadow(0 0 1.5px #b58cff); } .rcircle line.sel { stroke:#ffd23f; stroke-width:1; }
.rorbit { fill:none; stroke:rgba(190,160,255,.3); stroke-width:.5; }
.rcore { position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle, rgba(170,120,255,.5), rgba(60,30,140,0) 70%); animation:corepulse 3s ease-in-out infinite; }
.rcore img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(180,130,255,.8)); }
@keyframes corepulse { 50% { transform:translate(-50%,-50%) scale(1.06); } }
.rnode { position:absolute; width:70px; margin:-35px 0 0 -35px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; font:inherit; color:#fff; }
.rnode img { position:relative; width:52px; height:52px; padding:6px; border-radius:50%; object-fit:contain; background:radial-gradient(circle at 50% 35%, #3b2f7a, #151033 75%); border:2px solid rgba(190,160,255,calc(.3 + var(--g) * .7));
  box-shadow:0 0 calc(4px + var(--g) * 22px) rgba(180,130,255,calc(.25 + var(--g) * .7)), 0 4px 0 #0a0820; animation:runeglow 3.2s ease-in-out infinite; animation-delay:var(--d); }
@keyframes runeglow { 50% { filter:brightness(1.18); } }
.rnode .rring { position:absolute; top:-4px; left:50%; width:60px; height:60px; margin-left:-30px; border-radius:50%; border:2px solid transparent; }
.rnode.sel .rring { border-color:#ffd23f; box-shadow:0 0 16px rgba(255,210,63,.8); }
.rnode b { font-size:11px; text-shadow:0 1px 3px #000; } .rnode em { font-style:normal; font-size:10px; font-weight:700; color:#d8c4ff; background:rgba(40,20,90,.85); border-radius:7px; padding:0 5px; }
.rnode.flash img { animation:runeflash .6s var(--ease); } @keyframes runeflash { 0% { transform:scale(1.3); filter:brightness(2); } }
.rdet { display:flex; flex-direction:column; gap:8px; }
.rdhead { display:flex; align-items:center; gap:10px; } .rdhead img { width:44px; height:44px; object-fit:contain; } .rdhead b { display:block; font-size:18px; } .rdhead small { font-size:12px; color:#c3cae6; }
.rbuy { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; background:rgba(10,13,30,.55); } .rbuy > div { flex:1; display:flex; flex-direction:column; } .rbuy b { font-size:14px; } .rbuy small { font-size:11.5px; color:var(--muted); }
.rbtn { padding:7px 12px; font-size:15px; } .rbtn img { width:20px; height:20px; }
.rroles { display:flex; flex-wrap:wrap; gap:5px; }
.rrole { position:relative; display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 3px; border-radius:12px; border:1.5px solid rgba(160,180,255,.25); background:rgba(14,18,40,.8); color:#c9d0ea; font:inherit; font-size:12px; font-weight:700; }
.rrole img { width:20px; height:20px; object-fit:contain; } .rrole.on { color:#fff; border-color:#ffc24a; background:rgba(60,48,20,.7); } .rrole em { font-style:normal; font-size:10px; color:#3a2200; background:var(--gold); border-radius:6px; padding:0 4px; }
/* Taktik */
.zfrow { display:flex; align-items:center; justify-content:space-between; gap:8px; } .zfrow .zsub { margin:0; text-align:left; }
.ztac { flex:0 0 auto; gap:6px; padding:5px 10px 5px 5px; font-size:14px; } .ztac img { width:30px; height:30px; } .ztac span { display:flex; flex-direction:column; line-height:1.05; text-align:left; } .ztac small { color:var(--muted); font-size:10px; }
.tacgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.taccard { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border-radius:16px; border:2px solid rgba(160,180,255,.25); background:linear-gradient(180deg, rgba(38,48,92,.9), rgba(18,24,50,.95)); color:#fff; font:inherit; text-align:center; }
.taccard img { width:54px; height:54px; object-fit:contain; } .taccard b { font-size:15px; } .taccard small { font-size:11px; color:#b9c1dd; line-height:1.3; }
.taccard.on { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.3), 0 0 18px rgba(255,170,40,.55); }
.taccard.locked > img, .taccard.locked > b, .taccard.locked > small { filter:grayscale(1); opacity:.55; }
.taclock { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#ffb4b4; } .taclock img { width:12px; height:15px; object-fit:contain; }
/* Laden: sperren */
.shlock { position:absolute; right:-7px; bottom:-7px; width:30px; height:30px; padding:5px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:#141a33; box-shadow:0 2px 0 rgba(0,0,0,.5); z-index:2; }
.shlock img { width:100%; height:100%; object-fit:contain; filter:grayscale(1) brightness(.9); opacity:.6; }
.shlock.on { background:linear-gradient(180deg,#ffe07a,#ffb21a); border-color:#fff3c0; box-shadow:0 2px 0 #a86a00, 0 0 12px rgba(255,200,60,.8); } .shlock.on img { filter:none; opacity:1; }
.shcard.locked { outline:2px dashed rgba(255,210,63,.85); outline-offset:3px; }
.shlockn { color:var(--gold); }

/* =====================================================================================================================
   Wellenmodus „Belagerung“: Menü-Eintrag, Welt-/Truppwahl, Pause-Zentrale, Rast, Wellen-Ende; neue Taktiken; Gutscheine
   ===================================================================================================================== */
.tacgrid > :last-child:nth-child(odd) { grid-column:1 / -1; }
#top .zlayer img { width:22px; height:22px; margin-right:2px; }
/* Menü */
.msiege { display:flex; align-items:center; gap:10px; width:100%; padding:8px 14px 8px 8px; border-radius:16px; border:2px solid rgba(160,190,255,.35); color:#fff; font:inherit; text-align:left;
  background:linear-gradient(180deg, rgba(58,76,150,.92), rgba(26,34,78,.95)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 5px 0 #0c1026, 0 10px 20px rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.msiege > img:first-child { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.msiege span { flex:1; display:flex; flex-direction:column; } .msiege b { font-size:18px; letter-spacing:.8px; } .msiege small { font-size:12px; color:#c9d4ff; font-weight:600; }
.msiege.locked { filter:grayscale(.8) brightness(.8); } .mslock { width:18px; height:22px; object-fit:contain; }
/* Welt- und Truppwahl */
.sghero { display:flex; align-items:center; gap:12px; } .sghero img { width:70px; height:70px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); } .sghero p { font-size:14px; color:#c9d0ea; line-height:1.4; }
.sglist { display:flex; flex-direction:column; gap:8px; }
.sgworld { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:16px; border:2px solid rgba(160,180,255,.25); background-size:cover; background-position:center; color:#fff; font:inherit; text-align:left; box-shadow:0 4px 0 rgba(0,0,0,.4); }
.sgworld.sel { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.3), 0 0 18px rgba(255,170,40,.55), 0 4px 0 rgba(0,0,0,.4); }
.sgworld.locked { filter:grayscale(.85) brightness(.65); }
.sgbadge { width:50px; height:50px; object-fit:contain; flex:0 0 50px; }
.sgtx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .sgtx b { font-size:17px; text-shadow:0 2px 3px #000; }
.sgbest { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:#c9d4ff; } .sgbest img { width:20px; height:20px; } .sgbest em { font-style:normal; color:var(--gold); font-weight:700; }
.sgms { display:flex; gap:6px; } .sgms i { position:relative; display:flex; align-items:center; gap:1px; font-style:normal; opacity:.35; filter:grayscale(1); } .sgms i.got { opacity:1; filter:none; }
.sgms img { width:24px; height:24px; object-fit:contain; } .sgms small { font-size:10px; font-weight:700; color:#fff; }
.sglock { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#ffb4b4; } .sglock img { width:13px; height:16px; object-fit:contain; }
.sgmsinfo { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; } .sgmsinfo span { display:inline-flex; align-items:center; gap:4px; } .sgmsinfo img { width:18px; height:18px; object-fit:contain; }
.sgcnt { color:var(--gold); }
.sgsquad { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.sgpick { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:16px; border:2px solid rgba(160,180,255,.25); background:linear-gradient(180deg, rgba(38,48,92,.9), rgba(18,24,50,.95)); color:#fff; font:inherit; }
.sgpick .zface { width:64px; height:64px; border-radius:14px; background:#2a3566; } .sgpick b { font-size:14px; } .sgpick small { display:flex; align-items:center; gap:3px; font-size:10.5px; color:var(--muted); font-weight:600; } .sgpick small img { width:14px; height:14px; }
.sgpick.on { border-color:#ffc24a; box-shadow:0 0 0 3px rgba(255,194,74,.3), 0 0 16px rgba(255,170,40,.5); }
.sgno { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; font-weight:700; color:#3a2200; background:var(--gold); box-shadow:0 2px 0 #a86a00; }
/* Pause-Zentrale */
.pshead { display:flex; align-items:center; gap:12px; } .pshead > img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.pshead small { font-size:12px; color:var(--muted); font-weight:600; } .pshead .ztitle { text-align:left; font-size:26px; }
.psrec { font-size:13px; font-weight:600; color:#c9d4ff; } .psrec b { color:var(--gold); margin-left:4px; }
.pshp { display:flex; flex-direction:column; gap:7px; }
.psh { display:flex; align-items:center; gap:10px; } .psh .zface { width:42px; height:42px; border-radius:12px; background:#2a3566; flex:0 0 42px; }
.pshx { flex:1; min-width:0; } .pshx b { font-size:14px; } .pshx b small { font-size:11px; color:var(--muted); font-weight:600; }
.psbar { position:relative; height:16px; margin-top:3px; border-radius:8px; background:#0a0c16; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.psbar i { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); border-radius:8px; transition:width .5s var(--ease); }
.psbar span { position:relative; display:block; text-align:center; font-size:11px; font-weight:700; line-height:16px; text-shadow:0 1px 2px #000; }
.psh.down { opacity:.55; } .psh.down .zface { filter:grayscale(1); } .psh.bench { opacity:.8; }
.psnext { display:flex; align-items:center; gap:12px; } .psk { width:52px; height:52px; object-fit:contain; } .psnext small { font-size:12px; color:var(--muted); font-weight:600; } .psnext b { display:block; font-size:18px; } .psnext span { font-size:12px; color:#c3cae6; }
.psbtns { gap:8px; } .psbtns .zbtn { flex:1; padding:10px 6px; font-size:14px; } .psdanger { color:#ffb4b4; }
/* Rast im Wellenmodus */
.wrest { display:flex; align-items:center; gap:12px; } .wrest img { width:56px; height:56px; object-fit:contain; } .wrest b { display:block; font-size:18px; } .wrest span { font-size:13px; color:#c3cae6; }
/* Wellen-Ende */
.wehead { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; } .wehead > img { width:74px; height:74px; object-fit:contain; } .wehead small { font-size:12px; color:var(--muted); font-weight:600; }
.werec { font-size:clamp(40px, 12vw, 58px); } .wewave { font-size:22px; font-weight:700; color:#dfe5ff; } .wewave b { font-size:40px; color:var(--gold); }
.wesub { font-size:13px; color:var(--muted); font-weight:600; }
.wems { display:flex; align-items:center; gap:12px; border-color:rgba(255,210,63,.5); } .wems img { width:50px; height:50px; object-fit:contain; } .wems b { display:block; font-size:15px; color:var(--gold); } .wems span { font-size:12.5px; color:#c3cae6; }
.ltsieg.ltwave { font-size:clamp(44px, 14vw, 64px); }
.ltpick { color:var(--gold); }
.ltcards.n4 { gap:6px; } .ltcards.n4 .lttop { font-size:10.5px; } .ltcards.n4 .ltbot { font-size:9.5px; }
/* Runen-Gutscheine */
.rvouch { display:inline-flex; align-items:center; gap:4px; margin-left:10px; padding:3px 10px 3px 4px; border-radius:12px; background:linear-gradient(180deg,#ffe07a,#ffb21a); color:#3a2200; font-size:13px; font-weight:700; box-shadow:0 2px 0 #a86a00; } .rvouch img { width:24px; height:24px; }
.rvbtn img { width:22px; height:22px; }

/* =====================================================================================================================
   M3 online: Menü-Modi, Konto, Arena, Freunde, Ranglisten
   ===================================================================================================================== */
/* Menü: Belagerung und Arena nebeneinander, darunter vier Knöpfe */
.mmodes { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.mmodes .msiege { padding:8px 8px 8px 6px; gap:6px; } .mmodes .msiege > img:first-child { width:40px; height:40px; } .mmodes .msiege b { font-size:15px; letter-spacing:.5px; }
.mmodes .msiege small { display:flex; align-items:center; gap:3px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mmodes .msiege small img { width:16px; height:16px; }
.marena { background:linear-gradient(180deg, rgba(150,60,40,.92), rgba(80,26,30,.95)); border-color:rgba(255,190,140,.4); }
.mnav { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; width:100%; }
.mnavb { flex-direction:column; gap:2px; padding:7px 2px; font-size:11.5px; line-height:1.1; } .mnavb img { width:28px; height:28px; } .mnavb .zcnt { display:block; font-size:11px; }
/* Eingabefelder, Gefahr-Knopf, Apple-Knopf */
.zinp { width:100%; padding:12px 14px; border-radius:12px; border:2px solid rgba(160,180,255,.3); background:rgba(8,10,24,.7); color:#fff; font:inherit; font-size:16px; font-weight:600; letter-spacing:.5px; }
.zinp:focus { outline:none; border-color:#ffc24a; } .zerr { min-height:18px; color:#ff9a9a; font-size:13px; font-weight:600; text-align:center; }
.zdanger { background:linear-gradient(180deg,#ff6a6a,#c83a3a) !important; color:#fff !important; box-shadow:0 4px 0 #7a1c1c !important; border-color:rgba(255,180,180,.4) !important; }
.big.zapple { background:#0b0b0f; color:#fff; box-shadow:0 5px 0 #000, 0 10px 20px rgba(0,0,0,.4); text-shadow:none; }
/* Konto-Blatt */
.acc { display:flex; flex-direction:column; gap:10px; } .acclogo { width:64px; height:64px; align-self:center; object-fit:contain; }
.accnote { font-size:12.5px; color:#b9c1dd; text-align:center; line-height:1.4; background:rgba(10,13,30,.5); border-radius:12px; padding:8px 10px; }
.acchead { display:flex; align-items:center; gap:10px; } .accav img { width:52px; height:52px; object-fit:contain; } .acchead > div { flex:1; display:flex; flex-direction:column; } .acchead b { font-size:20px; } .acchead small { font-size:12.5px; color:var(--muted); font-weight:600; }
.accren { padding:6px 12px; font-size:13px; }
.acccode { display:flex; flex-direction:column; align-items:center; padding:8px; border-radius:14px; background:rgba(10,13,30,.55); } .acccode small { font-size:12px; color:var(--muted); font-weight:600; } .acccode b { font-size:30px; letter-spacing:5px; color:var(--gold); }
.acc .zrow .zbtn { padding:10px 6px; font-size:14px; }
/* Liga-Plakette */
.lgb { display:inline-flex; align-items:center; gap:3px; font-weight:700; } .lgb img { width:22px; height:22px; object-fit:contain; } .lgb.sm img { width:16px; height:16px; }
/* Arena-Start */
.arleague { display:flex; align-items:center; gap:12px; } .arleague > img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.arleague > div { flex:1; display:flex; flex-direction:column; gap:3px; } .arleague b { font-size:20px; } .arleague span { display:flex; align-items:center; gap:4px; font-size:13px; color:#ffe19a; font-weight:700; } .arleague span img { width:18px; height:18px; }
.arleague .xpbar i { background:linear-gradient(90deg,#ffc21a,#ffe07a); }
.arwarn { color:#ffb4b4; }
/* Arena-Zentrum (Vorbild 12_arena) */
.arhead .ztitle { font-size:26px; }
.artrack { display:grid; grid-template-columns:1.6fr 1fr; gap:8px; }
.arwins { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; } .arcups { display:grid; grid-template-columns:repeat(10, 1fr); gap:1px; width:100%; }
.arcups img { width:100%; aspect-ratio:1; object-fit:contain; filter:grayscale(1) brightness(.45); } .arcups img.on { filter:drop-shadow(0 0 4px rgba(255,200,60,.8)); }
.arbar { display:grid; grid-template-columns:repeat(10, 1fr); gap:2px; width:100%; } .arbar i { height:6px; border-radius:3px; background:#0a0c16; } .arbar i.on { background:linear-gradient(90deg,#ffc21a,#ffe07a); }
.arwins small { font-size:13px; color:#dfe5ff; font-weight:600; } .arwins small b { color:var(--gold); font-size:15px; }
.arhearts { display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; align-content:center; padding:8px; } .arhearts img { width:100%; aspect-ratio:1.07; object-fit:contain; }
.arfoe { display:flex; flex-direction:column; gap:6px; padding:10px 8px 8px; background:linear-gradient(180deg, rgba(90,40,60,.55), rgba(30,24,54,.94)); }
.arfoeh { display:flex; align-items:center; gap:8px; } .arfoeh > img { width:40px; height:40px; object-fit:contain; } .arfoeh b { font-size:15px; } .arfoeh small { display:flex; align-items:center; gap:4px; font-size:12px; color:#ffe19a; font-weight:700; }
.arfoeh { flex-wrap:wrap; } .arfoeh > b, .arfoeh > small { flex:1 1 60%; } .arpw { font-size:12px; color:var(--muted); font-weight:600; margin-left:auto; } .arpw b { color:#fff; font-size:15px; }
.arload { flex-direction:row; align-items:center; justify-content:center; gap:10px; min-height:120px; color:var(--muted); font-weight:600; } .arload img { width:44px; height:44px; animation:bob 1.2s ease-in-out infinite; }
.arteam { display:flex; justify-content:center; gap:2px; } .arhero { position:relative; flex:0 1 72px; } .arhero img { width:100%; aspect-ratio:.8; object-fit:contain; object-position:bottom; filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.arhero span { position:absolute; right:4px; bottom:2px; background:#141a33; border:2px solid #ffd23f; color:#ffd23f; border-radius:9px; font-size:11px; font-weight:700; padding:0 5px; }
.arteam.ghost .arhero img { filter:drop-shadow(0 0 10px rgba(120,190,255,.8)) saturate(.6) brightness(1.15); opacity:.85; }
.arvs { display:flex; align-items:center; gap:10px; } .arvs i { flex:1; height:3px; border-radius:2px; background:linear-gradient(90deg, transparent, #7fb8ff); } .arvs i:last-child { transform:scaleX(-1); }
.arvs b { font-size:34px; font-weight:700; color:#fff; -webkit-text-stroke:2px #1a2250; paint-order:stroke fill; text-shadow:0 4px 0 #1a2250, 0 0 18px rgba(120,180,255,.6); }
.armine { display:flex; flex-direction:column; align-items:center; gap:4px; padding-bottom:6px; background:radial-gradient(ellipse at 50% 88%, rgba(90,140,255,.45), rgba(90,140,255,0) 60%); }
/* Ergebnis */
.arres { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:4vh; } .arresi { width:84px; height:84px; object-fit:contain; }
.artro { display:flex; align-items:center; gap:12px; width:100%; } .artro > img { width:60px; height:60px; object-fit:contain; } .artro > div { display:flex; flex-direction:column; } .artro small { font-size:12px; color:var(--muted); font-weight:600; }
.artro b.up { font-size:34px; color:var(--good); } .artro b.down { font-size:34px; color:#ff8a8a; } .artro #arDelta { animation:openpop .6s var(--ease-out) .2s backwards; }
.artot { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .artot > b { font-size:26px; color:var(--gold); font-variant-numeric:tabular-nums; }
.artro.off { justify-content:center; } .arlost { display:flex; align-items:center; gap:6px; font-size:18px; font-weight:700; color:#ff8a8a; } .arlost img { width:30px; height:30px; }
/* Freunde */
.frcode { display:flex; flex-direction:column; align-items:center; gap:6px; } .frcode small { font-size:12px; color:var(--muted); font-weight:600; } .frcode > b { font-size:32px; letter-spacing:6px; color:var(--gold); text-shadow:0 3px 0 #7a3a00; }
.frrow { display:flex; gap:8px; width:100%; } .frrow .zinp { flex:1; min-width:0; text-transform:uppercase; letter-spacing:3px; text-align:center; } .frrow .zbtn { flex:0 0 auto; padding:10px 14px; }
.frlist { display:flex; flex-direction:column; gap:6px; }
.fritem { display:flex; align-items:center; gap:10px; padding:8px 10px; } .frdot { width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:#4a5270; } .frdot.on { background:#5ad07a; box-shadow:0 0 10px #5ad07a; }
.frx { flex:1; min-width:0; display:flex; flex-direction:column; } .frx b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .frx small { display:flex; align-items:center; gap:3px; font-size:11.5px; color:var(--muted); font-weight:600; } .frx small img { width:15px; height:15px; }
.frduel { padding:7px 10px; font-size:12.5px; gap:4px; } .frduel img { width:22px; height:22px; }
.frdel { position:relative; width:28px; height:28px; flex:0 0 28px; border-radius:50%; border:0; background:rgba(255,255,255,.08); }
.frdel::before, .frdel::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2.5px; margin:-1px 0 0 -6px; border-radius:2px; background:#c9d0ea; transform:rotate(45deg); } .frdel::after { transform:rotate(-45deg); }
.frduels { display:flex; flex-direction:column; gap:4px; } .frd { display:flex; align-items:center; gap:8px; font-size:13px; color:#c9d0ea; padding:6px 8px; border-radius:10px; background:rgba(10,13,30,.5); } .frd img { width:24px; height:24px; } .frd.won b { color:var(--good); } .frd.lost b { color:#ff9a9a; }
.soempty { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .soempty img { width:60px; height:60px; object-fit:contain; } .soempty b { font-size:18px; } .soempty span { font-size:13px; color:#c3cae6; line-height:1.4; } .soempty .big { width:100%; }
/* Ranglisten */
.lbtab button img { width:22px; height:22px; } .lbworlds { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; } .lbworlds button { flex:0 0 auto; display:flex; align-items:center; gap:4px; padding:4px 10px 4px 4px; border-radius:12px; border:1.5px solid rgba(160,180,255,.25); background:rgba(14,18,40,.8); color:#c9d0ea; font:inherit; font-size:12px; font-weight:700; }
.lbworlds button img { width:24px; height:24px; } .lbworlds button.on { color:#fff; border-color:#ffc24a; }
.lbscope { display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(10,13,30,.6); align-self:center; width:min(100%, 260px); } .lbscope button { flex:1; border:0; border-radius:9px; padding:7px; font:inherit; font-size:13px; font-weight:700; color:var(--muted); background:none; } .lbscope button.on { color:#2b1600; background:linear-gradient(180deg,#ffc76b,#ff9f1c); }
.lblist { display:flex; flex-direction:column; padding:6px 8px; gap:2px; }
.lbr { display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:10px; font-size:14px; } .lbr b { width:28px; text-align:center; } .lbr span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .lbr img { width:20px; height:20px; object-fit:contain; } .lbr em { font-style:normal; font-weight:700; color:#dfe5ff; font-variant-numeric:tabular-nums; }
.lbr.lbh { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; } .lbr.lbh em { color:var(--muted); }
.lbr.top1 b { color:#ffd23f; } .lbr.top2 b { color:#d8e0f0; } .lbr.top3 b { color:#e0a070; }
.lbr.me { background:linear-gradient(90deg, rgba(255,194,74,.28), rgba(255,194,74,.08)); box-shadow:inset 0 0 0 1.5px rgba(255,194,74,.7); } .lbr.me span, .lbr.me em { color:var(--gold); }
.lbmine { display:flex; justify-content:space-between; align-items:center; border-color:rgba(255,194,74,.6); } .lbmine b { color:var(--gold); } .lbmine span { font-weight:700; }
.artro b.zero { font-size:34px; color:#c9d0ea; }

/* ---------- Turm: Waffen-Details, Element/s, Macht, Vorschau vorher → nachher (Nutzer-Rückmeldung 28.09.) ---------- */
.twel { display:flex; align-items:center; gap:2px; } .twel img { width:16px; height:16px; object-fit:contain; }
.twstats > div:nth-child(5) { grid-column:auto; } .twpow b { color:var(--gold); }
.twweap { display:flex; flex-direction:column; gap:3px; width:100%; }
.twwl { display:flex; align-items:center; gap:5px; padding:3px 6px 3px 3px; border-radius:10px; background:rgba(10,13,30,.55); font-size:11px; color:#c9d0ea; font-weight:600; flex-wrap:wrap; }
.twwl > img { width:22px; height:22px; object-fit:contain; } .twwl b { color:#fff; font-size:12.5px; } .twwl > span { flex:1; min-width:0; }
.twfist { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #ffd9b0, #c98a5a); }
.twst { display:inline-flex; align-items:center; gap:1px; font-size:10.5px; color:#fff; } .twst img { width:14px; height:14px; }
.cmp { display:flex; flex-direction:column; gap:3px; padding:8px 10px; border-radius:14px; background:rgba(10,13,30,.6); border:1px solid rgba(160,180,255,.18); }
.cmp h5 { font-size:13px; color:#dfe5ff; margin-bottom:2px; }
.cmr { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; } .cmr span { color:var(--muted); font-weight:600; } .cmr b { font-variant-numeric:tabular-nums; }
.cmr.up b { color:var(--good); } .cmr.down b { color:#ff8a8a; } .cmr.down .mgto { border-left-color:#ff8a8a; }
.twprev { position:fixed; left:50%; top:calc(var(--sat) + 70px); transform:translateX(-50%); width:min(92vw, 360px); z-index:85; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.55); border-radius:14px; background:#141a36; animation:zin .18s var(--ease) backwards; }
.twprev .cmp { background:none; border-color:rgba(255,194,74,.6); }
.twstats { gap:4px; } .twstats > div { padding:4px 2px; min-width:0; } .twstats small { font-size:10px; } .twstats b { font-size:15px; } .twstats > div:last-child { grid-column:1 / -1; }

/* ---------- Querformat (niedrige Fenster, z. B. Handy quer): Aufstellung mit Panels links/rechts, Brett in der Mitte (formation.js camera) ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #s-formation.z3d { flex-direction:row; align-items:stretch; justify-content:space-between; gap:10px; padding-bottom:calc(var(--sab) + 8px); }
  #s-formation.z3d > * { width:min(33vw, 300px); max-height:100%; overflow-y:auto; }
  #s-formation .z3top { justify-content:flex-start; } #s-formation .z3bot { justify-content:flex-end; }
  #s-formation .ztitle { font-size:20px; }
}

/* ---------- Trost nach Niederlage ---------- */
#s-trost { gap:10px; }
.trtitle { color:#ffb0a0; font-size:clamp(22px, 6.4vw, 32px); padding-top:4px; }
.trhearts { display:flex; align-items:center; gap:12px; align-self:center; background:rgba(40,8,18,.55); border:2px solid rgba(255,110,110,.35); border-radius:18px; padding:6px 16px; }
.trhrow { display:flex; gap:6px; } .trhrow img { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.trhrow img.trlost { animation:trbreak .9s ease-out both; }
@keyframes trbreak { 0% { transform:scale(1.5); filter:drop-shadow(0 0 14px #ff4d6d) brightness(1.6); } 40% { transform:scale(.8) rotate(-12deg); } 100% { transform:none; } }
.trhearts b { font-size:16px; color:#ff9a9a; }
#s-trost .ltheroes { padding-top:10px; } #s-trost .ltgold { font-size:19px; }
.trcards { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:250px; width:100%; align-self:center; }
.trpt .ltpic { width:70%; }
.trpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; margin:12px 0 4px; }
.trph { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); color:#fff; font:inherit; }
.trph:active { transform:scale(.96); } .trph.bench .ltface { filter:grayscale(.6); } .trph .ltface { display:block; }
.trph b { font-size:14px; } .trph small { font-size:11px; color:#c3cae6; }
.trgot { display:flex; justify-content:center; align-items:center; gap:4px; } .trgot .ltface { width:80px; height:80px; } .trgp { width:54px; height:54px; margin-left:-18px; margin-top:36px; animation:openpop .6s ease-out; }

/* ---------- Feste Stufen: Karte, Gegner-Vorschau ---------- */
.zmap path { fill:none; stroke-linecap:round; }
.zmap path.far { stroke:rgba(235,235,225,.75); stroke-width:6; stroke-dasharray:1 14; }
.zmap path.open { stroke:#ffd27a; stroke-width:7; stroke-dasharray:2 13; filter:drop-shadow(0 0 5px rgba(255,170,40,.9)); animation:zdash 1s linear infinite; }
.zmap path.gone { stroke:#ff9f1c; stroke-width:8; filter:drop-shadow(0 2px 0 #9a4f00); }
.mnode.svc .mplate { width:52px; height:52px; } .mnode.svc b { font-size:13px; }
.mplate { position:relative; }
.mstn { position:absolute; right:-6px; bottom:-4px; min-width:24px; height:24px; padding:0 5px; border-radius:12px; background:linear-gradient(180deg,#ffe07a,#f0a81e); color:#4a2a00; font-style:normal; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 #9a5a00, 0 0 0 2px #141a33; }
.msub { font-size:11px; font-weight:700; margin-top:1px; padding:0 7px; border-radius:8px; background:rgba(10,13,30,.7); color:#dfe5ff; text-shadow:none; }
.msub.elite { color:#ffd27a; } .msub.belagerung { color:#9fe3ff; } .msub.boss { color:#ff9a9a; }
.mnode.done .mstn { background:linear-gradient(180deg,#ffb35a,#e0761a); }
.mprev { display:flex; gap:3px; margin-top:4px; padding:3px 6px; border-radius:10px; background:rgba(10,13,30,.78); border:1px solid rgba(255,210,122,.45); }
.mprev span { position:relative; } .mprev img { width:22px; height:22px; object-fit:contain; display:block; }
.mprev i { position:absolute; right:-3px; bottom:-3px; font-style:normal; font-size:9px; font-weight:800; background:#141a33; color:#ffe19a; border-radius:5px; padding:0 3px; }
.mrec { position:absolute; left:calc(50% + 30px); top:-12px; display:flex; flex-direction:column; align-items:center; font-size:10px; font-weight:800; color:#ffe19a; text-shadow:0 1px 2px #000; pointer-events:none; animation:bob 2.6s ease-in-out infinite; }
.mrec img { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.zmaphint b { color:#fff; }
.mpvhead { display:flex; align-items:center; gap:12px; } .mpvhead .mplate { width:58px; height:58px; flex:0 0 58px; box-shadow:0 3px 0 #070a18; }
.mpvhead .zsh { text-align:left; } .mpvhead small { color:var(--muted); font-size:13px; font-weight:600; }
.mpvtxt { text-align:left; margin:10px 0 8px; font-size:14px; }
.mpvlist { display:flex; flex-direction:column; gap:6px; max-height:44vh; overflow:auto; }
.mpv { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.06); }
.mpv img { width:40px; height:40px; object-fit:contain; } .mpv b { flex:1; font-size:15px; } .mpv em { font-style:normal; font-size:20px; font-weight:800; color:#ffe19a; }
.mpv.boss { background:rgba(255,80,80,.14); border:1px solid rgba(255,110,110,.4); } .mpv.boss img { width:60px; height:60px; }
.mpvst { font-size:13px; color:var(--muted); margin-top:8px; }

/* ---------- Talente ---------- */
.z3seg { width:min(100%, 400px); } .z3seg button { font-size:14px; padding-left:4px; padding-right:4px; }
.ztalbig { color:#ffd86a; } .ztalbig b { color:#ffd86a; }
.ztalearn { display:block; font-size:12px; color:var(--muted); font-weight:600; }
.ztal { display:flex; align-items:center; gap:12px; padding:10px 12px; }
.ztal.full { border-color:rgba(255,210,100,.5); background:linear-gradient(180deg, rgba(70,58,24,.85), rgba(34,28,20,.94)); }
.tpips { display:flex; align-items:center; gap:4px; margin-top:3px; } .tpips i { width:16px; height:8px; border-radius:4px; background:rgba(255,255,255,.15); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.tpips i.on { background:linear-gradient(180deg,#ffe07a,#f0a81e); box-shadow:0 0 6px rgba(255,200,60,.7); } .tpips small { margin-left:4px; font-size:11px; color:var(--muted); font-weight:700; }
.tfull { font-weight:800; color:#ffd86a; font-size:14px; padding:0 6px; }
.ztal.flash { animation:openpop .6s ease-out; }
.ztorunes { align-self:center; gap:8px; margin-top:4px; } .ztorunes img { width:28px; height:28px; }
.tpill.ztalp { color:#ffd86a; } .tpill.ztalp img { width:22px; height:22px; }
.ztaldot { position:absolute; top:-6px; right:-4px; display:flex; align-items:center; gap:2px; font-style:normal; font-size:11px; font-weight:800; background:#2a1d00; color:#ffd86a; border:1px solid #ffd86a; border-radius:9px; padding:0 5px 0 2px; } .ztaldot img { width:14px !important; height:14px !important; }
.mnavb { position:relative; }

/* ---------- Weltwahl: Rekord je Welt ---------- */
.wdprog { align-self:stretch; display:flex; flex-direction:column; gap:3px; margin-top:4px; } .wdprog small { font-size:11px; font-weight:700; color:#e6ebff; text-shadow:0 1px 2px #000; } .wdprog small b { color:#ffe19a; }
.wdbar { height:7px; border-radius:4px; background:rgba(8,10,20,.7); overflow:hidden; } .wdbar i { display:block; height:100%; background:linear-gradient(90deg,#ffb33a,#ffe07a); border-radius:4px; }
.wdprog.full .wdbar i { background:linear-gradient(90deg,#6fdc8c,#b8ff9a); }

/* ---------- Laufende: Talente, Bestmarke ---------- */
.retal { display:flex; flex-direction:column; gap:8px; align-items:center; } .retalbtn { gap:8px; } .retalbtn img { width:26px; height:26px; }
.retal .reparts b { color:#ffd86a; }
.srec { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.srglow { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, rgba(255,210,90,.55), rgba(255,210,90,0) 70%); animation:openpop .6s ease-out; } .srglow img { width:78px; height:78px; object-fit:contain; animation:bob 2.4s ease-in-out infinite; }
.srt { font-size:30px; font-weight:800; color:#ffd23f; -webkit-text-stroke:2px #7a3a00; paint-order:stroke fill; text-shadow:0 4px 0 #7a3a00; animation:titlepop .6s ease-out both; }
.srs { font-size:20px; font-weight:700; } .srs b { font-size:30px; color:#fff; }
.srp { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:800; color:#ffd86a; background:rgba(10,13,30,.6); border-radius:14px; padding:4px 14px; } .srp img { width:32px; height:32px; }

/* „Nicht mehr anzeigen“ unter Hinweis-Einblendungen */
.zhide { align-self:center; display:block; margin:10px auto 0; background:none; border:0; padding:6px 10px; font:inherit; font-size:13px; font-weight:600; color:rgba(200,210,240,.7); text-decoration:underline; text-underline-offset:3px; }
.zhide:active { color:#fff; } #merge .zhide { margin-top:2px; } .tipbox .zhide { margin-top:-4px; }

/* ---------- Dauerhafte Helden ---------- */
.zhpts { position:absolute; right:6px; top:6px; display:flex; align-items:center; gap:2px; background:linear-gradient(180deg,#fff0a0,#ffc21a); color:#3a2200; border-radius:9px; padding:1px 6px 1px 3px; font-size:12px; font-weight:800; box-shadow:0 2px 0 #a86a00; animation:bob 2.2s ease-in-out infinite; z-index:2; } .zhimg .zhpts img { width:16px; height:16px; filter:none; }
.zhxp { width:100%; height:6px; border-radius:3px; background:rgba(8,10,20,.7); overflow:hidden; } .zhxp i { display:block; height:100%; background:linear-gradient(90deg,#3aa0ff,#7fd6ff); }
.zhxp.zxl { height:10px; border-radius:5px; }
.zhperm { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.zhplv { display:flex; align-items:baseline; gap:8px; } .zhplv b { font-size:20px; color:var(--gold); } .zhplv span { font-size:13px; color:#c3cae6; font-weight:600; } .zhplv small { margin-left:auto; font-size:11px; font-weight:700; color:#8fe0a8; }
.zhpst { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .zhpst span { display:flex; flex-direction:column; align-items:center; background:rgba(10,13,30,.45); border-radius:10px; padding:4px 2px; } .zhpst small { font-size:10.5px; color:var(--muted); } .zhpst b { font-size:14px; }
.zperm { font-size:11px; font-weight:700; color:#8fe0a8; text-align:center; } .ltperm { margin-top:-4px; }
.zptdot { top:-6px; right:-4px; background:#2a1d00; }
#tabs button.ztabpts { position:relative; } #tabs button.ztabpts:not([data-pts=""])::after { content:attr(data-pts); position:absolute; top:2px; right:calc(50% - 30px); min-width:18px; height:18px; border-radius:9px; background:linear-gradient(180deg,#fff0a0,#ffc21a); color:#3a2200; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 #a86a00; }

/* ---------- Weltenlauf: Welt geschafft, Trupp-Wahl, Laufende je Welt ---------- */
#s-weltende { gap:10px; }
.weltsieg { font-size:clamp(32px, 9.6vw, 58px); white-space:nowrap; } .weltsieg.finale { font-size:clamp(24px, 7.4vw, 48px); }
.webossw { position:relative; align-self:center; width:150px; height:116px; display:flex; align-items:center; justify-content:center; }
.webossw > img { width:124px; height:124px; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)) grayscale(.25); animation:openpop .7s ease-out; }
.weglow { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(255,210,90,.55), rgba(255,210,90,0) 68%); animation:bob 2.6s ease-in-out infinite; }
.webadge { position:absolute; right:0; bottom:4px; } .webadge img { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.werew { display:flex; flex-direction:column; gap:10px; }
.werow { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .werow > span { display:flex; flex-direction:column; align-items:center; gap:1px; background:rgba(10,13,30,.45); border-radius:12px; padding:6px 2px; }
.werow img { width:30px; height:30px; object-fit:contain; } .werow b { font-size:20px; color:#fff; } .werow small { font-size:11px; color:var(--muted); font-weight:600; }
.weunl { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:rgba(111,220,140,.14); border:1px solid rgba(111,220,140,.45); }
.weunl img { width:44px; height:44px; } .weunl b { display:block; font-size:14px; } .weunl small { font-size:12px; color:#b8f0c8; }
.wehearts { display:flex; justify-content:center; gap:6px; } .wehearts img { width:34px; height:34px; }
.wenext { position:relative; display:flex; align-items:center; gap:10px; padding:12px; border-radius:18px; border:3px solid #ffc24a; background-size:cover; background-position:center; box-shadow:0 0 18px rgba(255,170,40,.45); overflow:hidden; min-height:110px; }
.wenb { width:56px; height:56px; flex:0 0 56px; } .wenext > div { flex:1; display:flex; flex-direction:column; gap:2px; z-index:1; }
.wenext small { font-size:11px; color:#ffe19a; font-weight:700; } .wenext b { font-size:22px; } .wenext span { font-size:13.5px; font-weight:700; color:#fff; } .wenext .wenp { font-size:12px; color:#c9d0ea; font-weight:600; }
.wenboss { width:78px; height:78px; object-fit:contain; margin-right:-6px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.wefin { text-align:center; display:flex; flex-direction:column; gap:4px; } .wefin b { font-size:22px; color:var(--gold); } .wefin span { font-size:14px; color:#c9d0ea; }
.zhpick { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:40px; height:40px; border-radius:50%; background:linear-gradient(180deg,#ffe07a,#f0a81e); color:#4a2a00; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 #9a5a00, 0 0 14px rgba(255,200,60,.8); opacity:.92; }
.reworlds { display:flex; flex-direction:column; gap:6px; } .reworlds h4 { font-size:15px; margin-bottom:2px; }
.rewrow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:12px; background:rgba(10,13,30,.45); } .rewrow > img { width:34px; height:34px; }
.rewrow > div { flex:1; min-width:0; } .rewrow b { display:block; font-size:14px; } .rewrow small { font-size:11.5px; color:var(--muted); }
.rewrow > span { display:flex; align-items:center; gap:3px; font-weight:800; font-size:14px; } .rewrow > span img { width:20px; height:20px; }

/* ---------- Welt-Elemente: Resistenz, Schwäche, Panzer, Boss-Schutz ---------- */
.zelinfo { display:flex; flex-direction:column; gap:5px; margin:8px 0 4px; text-align:left; }
.zelr { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; font-weight:700; padding:4px 8px; border-radius:10px; background:rgba(10,13,30,.5); }
.zelrl { color:var(--muted); font-size:11.5px; min-width:84px; } .zelr em { font-style:normal; font-weight:800; } .zelr small { color:var(--muted); font-size:11px; }
.zelr.weak { background:rgba(111,220,140,.14); border:1px solid rgba(111,220,140,.45); } .zelr.weak em { color:#8fe0a8; font-size:14px; }
.zelr.res em { color:#ff9a9a; } .zelr.arm { color:#ffd0a0; } .zelri { width:18px; height:18px; object-fit:contain; }
.zelr.ward { color:#bfe4ff; } .zwardi { width:16px; height:16px; border-radius:50%; border:2px solid #9fd8ff; box-shadow:0 0 8px #6fb8ff; flex:0 0 16px; }
.zelx { position:relative; display:inline-flex; align-items:center; gap:3px; } .zelx img { width:22px; height:22px; object-fit:contain; }
.zelx.res img { filter:grayscale(.85) brightness(.75); } .zelx.res::after { content:""; position:absolute; left:0; top:50%; width:22px; height:2.5px; background:#ff6a6a; transform:rotate(-40deg); border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.zelx.weak img { filter:drop-shadow(0 0 6px rgba(160,255,140,.9)); animation:bob 2.2s ease-in-out infinite; }
.zfoes .zelinfo { margin-top:6px; }
.zweakc { display:inline-flex; align-items:center; padding-right:3px; margin-right:2px; border-right:1px solid rgba(255,255,255,.2); } .zweakc img { width:20px !important; height:20px !important; filter:drop-shadow(0 0 4px rgba(160,255,140,.9)); }
.wdweak { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:#b8f0c8; text-shadow:0 1px 2px #000; margin-top:2px; } .wdweak img { width:18px; height:18px; }
.wdweak.need { color:#ffd27a; } .wdcap { font-size:10.5px; font-weight:700; color:#dfe5ff; text-shadow:0 1px 2px #000; opacity:.85; }
.zhcap { font-size:12px; color:#c3cae6; font-weight:600; } .zhcap b { color:var(--gold); }
.ltxp .ltmax, .twxp .ltmax { position:absolute; right:3px; font-style:normal; font-size:8px; font-weight:800; color:#ffe19a; z-index:1; }

/* „stark hier“: Teile mit dem Schwäche-Element der Welt */
.shcard.strong, .ltcard.strong { box-shadow:0 0 0 2px rgba(143,224,168,.9), 0 0 18px rgba(111,220,140,.65), 0 4px 0 rgba(0,0,0,.4); }
.shcombo.strong { background:linear-gradient(180deg,#8fe0a8,#3fbf63); color:#083018; }
.zstrong { position:absolute; left:50%; top:-10px; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:800; color:#083018; background:linear-gradient(180deg,#b8f0c8,#3fbf63); border-radius:8px; padding:1px 7px; box-shadow:0 2px 0 #1d6e36; z-index:2; }

/* Sterne ab ★4 kompakt, ★5 golden leuchtend; legendäre Seltenheit mit Gold-/Regenbogen-Rahmen */
.zs.zsn { align-items:center; gap:1px; background:rgba(20,16,4,.85); border-radius:8px; padding:0 4px 0 2px; } .zs.zsn b { font-size:11px; font-weight:800; color:#ffe07a; line-height:1; }
.zs.zsn.z5 { background:linear-gradient(90deg,#ff7a1a,#ffd23f,#7fd6ff,#c77dff); } .zs.zsn.z5 b { color:#2a1400; } .zs.zsn.z5 i { filter:drop-shadow(0 0 2px #fff); }
.ztile.st5 { box-shadow:0 0 0 2px rgba(255,230,120,.9), 0 0 16px rgba(255,200,60,.9), 0 0 28px rgba(160,120,255,.5); animation:zleg 2.4s ease-in-out infinite; }
@keyframes zleg { 50% { box-shadow:0 0 0 2px rgba(255,255,200,1), 0 0 22px rgba(255,210,80,1), 0 0 34px rgba(120,200,255,.6); } }
.ztile.r5, .shcard.r5, .ltcard.r5 { border-color:transparent; background-clip:padding-box; position:relative; }
.ztile.r5::before, .shcard.r5::before { content:""; position:absolute; inset:-3px; border-radius:inherit; padding:3px; background:conic-gradient(from var(--la, 0deg), #ffd23f, #ff7a1a, #ff5aa8, #c77dff, #7fd6ff, #6fdc8c, #ffd23f); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:zlegspin 4s linear infinite; pointer-events:none; }
@property --la { syntax:'<angle>'; inherits:false; initial-value:0deg; } @keyframes zlegspin { to { --la:360deg; } }
.ltcard.r5 { border:3px solid #ffd23f; box-shadow:0 0 0 2px rgba(199,125,255,.6), 0 0 24px rgba(255,200,60,.9), 0 4px 0 rgba(0,0,0,.4); }
.wegift { display:flex; align-items:center; gap:12px; border:2px solid #ffd23f; box-shadow:0 0 22px rgba(255,200,60,.55); background:linear-gradient(135deg, rgba(90,60,10,.9), rgba(40,20,70,.92)); }
.wegift small { display:block; font-size:11px; font-weight:800; color:#ffe07a; letter-spacing:1px; text-transform:uppercase; } .wegift b { font-size:18px; } .wegift > div > span { display:block; font-size:12px; color:#c9d0ea; }
.wegift .zlines { margin-top:4px; } .wegift .zl { font-size:12px; padding:4px 8px; }

/* Kampf: Schwäche-Treffer groß in Elementfarbe, gedämpfte klein grau, Boss-Schutz-Blase, Phönix */
.bl-pop.weak { font-size:26px; -webkit-text-stroke:2px #0b2a10; paint-order:stroke fill; } .bl-pop.weak small { display:block; font-size:12px; letter-spacing:1px; color:#fff; }
.bl-pop.weak.poison { color:#9fe86a; } .bl-pop.weak.shock { color:#ffe45a; } .bl-pop.weak.water { color:#6fb8ff; } .bl-pop.weak.glue { color:#ff8ae0; } .bl-pop.weak.fire { color:#ffb070; } .bl-pop.weak.ice { color:#bff4ff; }
.bl-pop.weak.crit { font-size:32px; }
.bl-pop.resist { font-size:13px; color:#aab0c0; opacity:.85; }
.bl-ward { position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 10px; border-radius:16px; background:radial-gradient(circle at 50% 30%, rgba(160,220,255,.45), rgba(40,90,160,.55)); border:2px solid rgba(190,235,255,.9); box-shadow:0 0 16px rgba(120,200,255,.8), inset 0 0 10px rgba(255,255,255,.5); pointer-events:none; }
.bl-ward b { font-size:10px; letter-spacing:2px; color:#fff; text-shadow:0 1px 2px #0a2a4a; } .bl-ward span { display:flex; gap:5px; }
.bl-ward i { width:12px; height:12px; border-radius:50%; } .bl-ward i.on { background:radial-gradient(circle at 35% 30%, #fff, #7fd6ff 60%, #2a6fb0); box-shadow:0 0 6px #9fe3ff; } .bl-ward i.off { background:rgba(20,30,50,.6); border:1px dashed rgba(255,255,255,.5); animation:zwardpop .35s ease-out; }
@keyframes zwardpop { 0% { transform:scale(1.8); background:#fff; } 100% { transform:scale(1); } }
.bl-pop.wardbreak b { color:#bfe4ff; } .bl-pop.revive b { color:#ffb040; font-size:26px; } .bl-pop.revive span { display:block; font-size:12px; color:#ffe0b0; }
.wegl { display:flex; flex-direction:column; gap:2px; margin-top:4px; } .wegl i { font-style:normal; font-size:12px; color:#ffe9b0; font-weight:600; }

/* ---------- Element-Schild: Balken, Bruch, Vorschau-Zeile ---------- */
.bl-es { position:absolute; left:-20px; top:-2px; width:40px; height:3px; border-radius:2px; background:rgba(12,14,26,.6); overflow:hidden; }
.bl-es i { display:block; height:100%; border-radius:2px; background:#fff; box-shadow:0 0 4px currentColor; }
.bl-es.poison i { background:#7ad63a; color:#7ad63a; } .bl-es.shock i { background:#ffe23a; color:#ffe23a; } .bl-es.water i { background:#3aa0ff; color:#3aa0ff; } .bl-es.glue i { background:#ff6ad5; color:#ff6ad5; }
.bl-es.react i { background:linear-gradient(90deg,#ff7a1a,#ffe23a,#7ad63a,#3aa0ff,#ff6ad5); }
.bl-pop.shbreak b { display:block; font-size:14px; letter-spacing:1px; color:#fff; -webkit-text-stroke:1.5px #10203a; }
.bl-pop.shbreak.poison b { color:#b8f07a; } .bl-pop.shbreak.shock b { color:#fff07a; } .bl-pop.shbreak.water b { color:#9fd0ff; } .bl-pop.shbreak.glue b { color:#ffb0ea; }
.zelr.esh { color:#e6ebff; } .zeshi { width:18px; height:18px; flex:0 0 18px; border-radius:50%; border:2px solid rgba(255,255,255,.8); background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,.08) 60%); }
.zelr.esh.poison .zeshi { border-color:#7ad63a; box-shadow:0 0 8px #7ad63a; } .zelr.esh.shock .zeshi { border-color:#ffe23a; box-shadow:0 0 8px #ffe23a; } .zelr.esh.water .zeshi { border-color:#3aa0ff; box-shadow:0 0 8px #3aa0ff; } .zelr.esh.glue .zeshi { border-color:#ff6ad5; box-shadow:0 0 8px #ff6ad5; }
.zelr.esh.react .zeshi { border-color:#fff; box-shadow:0 0 8px #ff9aff; }

/* ---------- Welt-Übersicht ---------- */
#s-overview { gap:10px; }
.ovtabs { display:flex; gap:6px; justify-content:center; } .ovtab { padding:4px; border-radius:12px; background:rgba(255,255,255,.06); border:2px solid transparent; } .ovtab img { width:38px; height:38px; display:block; } .ovtab.on { border-color:#ffc24a; background:rgba(255,194,74,.15); }
.ovhead { position:relative; display:flex; align-items:center; gap:10px; background-size:cover; background-position:center; min-height:110px; overflow:hidden; }
.ovbadge { width:58px; height:58px; flex:0 0 58px; } .ovhead > div { flex:1; min-width:0; z-index:1; } .ovhead small { font-size:11px; color:#ffe19a; font-weight:700; } .ovhead b { display:block; font-size:22px; }
.ovboss { width:84px; height:84px; object-fit:contain; margin-right:-8px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.ovchips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .ovchip { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; padding:2px 7px; border-radius:9px; background:rgba(10,13,30,.7); color:#e6ebff; }
.ovchip img { width:16px; height:16px; } .ovchip.ok { color:#b8f0c8; border:1px solid rgba(111,220,140,.6); } .ovchip.need { color:#ffd27a; border:1px solid rgba(255,194,74,.7); } .ovchip.res img { filter:grayscale(.8); }
.ovlock { display:flex; align-items:center; gap:10px; border:2px solid rgba(255,194,74,.6); background:rgba(70,50,10,.6); } .ovlock > img { width:40px; height:40px; } .ovlock > div { flex:1; } .ovlock b { display:block; font-size:14px; } .ovlock span { font-size:12px; color:#ffe19a; display:flex; align-items:center; gap:3px; } .ovlock span img { width:16px; height:16px; }
.ovrec p { font-size:13px; line-height:1.4; color:#dfe5ff; margin:3px 0; padding-left:12px; position:relative; } .ovrec p::before { content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.ovh { margin-top:4px; } .ovlist { display:flex; flex-direction:column; gap:4px; }
.ovrow { display:grid; grid-template-columns:30px 1fr auto 86px; align-items:center; gap:6px; padding:5px 8px; border-radius:12px; background:rgba(255,255,255,.05); }
.ovrow.ovhd { background:none; font-size:10.5px; color:var(--muted); font-weight:700; padding-top:0; padding-bottom:0; grid-template-columns:30px 1fr 86px; } .ovshh { text-align:right; }
.ovrow.boss { background:rgba(255,80,80,.12); border:1px solid rgba(255,110,110,.4); }
.ovst { width:26px; height:26px; border-radius:13px; background:linear-gradient(180deg,#ffe07a,#f0a81e); color:#4a2a00; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; }
.ovfoes { display:flex; flex-wrap:wrap; gap:3px; } .ovfoe { position:relative; } .ovfoe img { width:26px; height:26px; object-fit:contain; display:block; } .ovfoe.boss img { width:40px; height:40px; }
.ovfoe i { position:absolute; right:-3px; bottom:-3px; font-style:normal; font-size:9px; font-weight:800; background:#141a33; color:#ffe19a; border-radius:5px; padding:0 3px; }
.ovrow .ovk:empty { padding:0; background:none; } .ovk { font-size:10px; font-weight:800; padding:1px 6px; border-radius:7px; background:rgba(10,13,30,.7); } .ovk.elite { color:#ffd27a; } .ovk.belagerung { color:#9fe3ff; } .ovk.boss { color:#ff9a9a; }
.ovsh { position:relative; height:16px; border-radius:8px; background:rgba(10,13,30,.6); overflow:hidden; display:flex; align-items:center; justify-content:flex-end; } .ovsh i { position:absolute; left:0; top:0; bottom:0; background:#fff; opacity:.8; }
.ovsh.poison i { background:#7ad63a; } .ovsh.shock i { background:#ffd23a; } .ovsh.water i { background:#3aa0ff; } .ovsh.glue i { background:#ff6ad5; } .ovsh.react i { background:linear-gradient(90deg,#ff7a1a,#ffe23a,#7ad63a,#3aa0ff,#ff6ad5); }
.ovsh b { position:relative; font-size:10.5px; padding-right:6px; text-shadow:0 1px 2px #000; }
.zmapfoot .mpov { gap:4px; padding:6px 10px; font-size:12px; } .zmapfoot .mpov img { width:24px; height:24px; }
.wdov, .movw { gap:6px; align-self:center; font-size:13px; } .wdov img, .movw img { width:24px; height:24px; } .movw { margin-top:2px; padding:6px 12px; }
.shprep { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:-6px; } .shprep .zbtn { gap:5px; padding:5px 10px; font-size:12.5px; } .shprep .zbtn img { width:22px; height:22px; }
.shweak { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:800; color:#b8f0c8; background:rgba(10,13,30,.75); border:1px solid rgba(111,220,140,.6); border-radius:10px; padding:3px 9px; } .shweak img { width:20px; height:20px; }

/* ---------- Elementstein: Umschmieden ---------- */
.fgh { display:flex; align-items:center; gap:12px; } .fgh > img { width:56px; height:56px; object-fit:contain; } .fgh small { color:var(--muted); font-size:12.5px; font-weight:600; }
.fgw { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:12px 0 4px; max-height:46vh; overflow:auto; padding-top:10px; }
.fgwb { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.1); color:#fff; font:inherit; } .fgwb b { font-size:12.5px; } .fgwb small { font-size:10.5px; color:var(--muted); }
.fgels { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0; }
.fgel { display:flex; flex-direction:column; align-items:center; gap:2px; width:64px; padding:8px 4px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); color:#fff; font:inherit; font-size:12px; }
.fgel img { width:32px; height:32px; } .fgel.on { border-color:#ffc24a; background:rgba(255,194,74,.18); box-shadow:0 0 12px rgba(255,194,74,.5); }
.fgel.cur { opacity:.5; position:relative; } .fgel.cur::after { content:""; position:absolute; left:14px; right:14px; top:24px; height:3px; background:#ff6a6a; transform:rotate(-35deg); border-radius:2px; }
.fgcmp { display:flex; flex-direction:column; gap:6px; } .fgrow { display:grid; grid-template-columns:1fr auto 18px auto; align-items:center; gap:6px; font-size:13px; } .fgrow span { color:var(--muted); font-weight:600; }
.fgrow b, .fgrow em { display:inline-flex; align-items:center; gap:3px; font-style:normal; font-weight:800; } .fgrow em { color:#8fe0a8; } .fgrow img { width:18px; height:18px; } .fgnote { color:var(--muted); font-size:11.5px; }
.ztile .zel.forged { border-radius:50%; box-shadow:0 0 0 2px #fff, 0 0 8px #ffc24a; background:rgba(20,16,4,.8); }
.zforged { display:flex; align-items:center; gap:6px; margin:8px 0 2px; padding:6px 10px; border-radius:10px; background:rgba(255,194,74,.12); border:1px solid rgba(255,194,74,.45); font-size:12.5px; font-weight:700; color:#ffe9b0; } .zforged img { width:22px; height:22px; }

/* ---------- Einzelbefehle ---------- */
.odh { display:flex; align-items:center; gap:12px; } .odh > img { width:52px; height:52px; object-fit:contain; } .odh .zface { width:52px; height:52px; } .odh small { color:var(--muted); font-size:12.5px; font-weight:600; }
.odgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 6px; max-height:52vh; overflow:auto; }
.odc { display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left; padding:8px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.1); color:#fff; font:inherit; }
.odc img { grid-row:1 / 3; width:40px; height:40px; object-fit:contain; } .odc b { font-size:14px; } .odc small { font-size:11px; line-height:1.3; color:#c3cae6; }
.odc.on { border-color:#ffc24a; background:rgba(255,194,74,.16); box-shadow:0 0 12px rgba(255,194,74,.45); } .odc.off { opacity:.45; }
.odtg { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin:12px 0 4px; }
.odt { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); color:#fff; font:inherit; } .odt .zface { width:56px; height:56px; } .odt b { font-size:13px; } .odt small { font-size:10.5px; color:var(--muted); }
.oddef { display:flex; align-items:center; gap:8px; font-size:13px; color:#dfe5ff; margin:4px 2px; } .oddef input { width:18px; height:18px; accent-color:#ffc24a; }
#s-battle .zbord { position:absolute; left:4px; top:-4px; width:28px; height:28px; object-fit:contain; z-index:3; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); border-radius:50%; } #s-battle .zbord.none { display:none; }
#s-battle .zbord.zbcd { animation:zbcd 2s linear; } @keyframes zbcd { 0% { filter:grayscale(1) brightness(.6); transform:scale(1.3); } 10% { transform:scale(1); } 100% { filter:none; } }
#s-battle .zbh { position:relative; }
.zbesh { height:5px; margin-top:3px; border-radius:3px; background:rgba(10,13,30,.6); overflow:hidden; } .zbesh i { display:block; height:100%; transition:width .25s; }
.zbesh.poison i { background:#7ad63a; } .zbesh.shock i { background:#ffe23a; } .zbesh.water i { background:#3aa0ff; } .zbesh.glue i { background:#ff6ad5; } .zbesh.react i { background:linear-gradient(90deg,#ff7a1a,#ffe23a,#7ad63a,#3aa0ff,#ff6ad5); } .zbesh.gone { opacity:0; }
.bl-ord { position:absolute; left:50%; top:-52px; width:24px; height:24px; transform:translateX(-50%); object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.fordb { position:absolute; inset:0; pointer-events:none; z-index:4; } .fordb > span { position:absolute; left:0; top:0; display:flex; align-items:center; gap:2px; padding:2px 4px; border-radius:14px; background:rgba(10,13,30,.7); border:1px solid rgba(255,194,74,.5); }
.fordb img { width:22px; height:22px; object-fit:contain; } .fordb img.fordt { width:20px; height:20px; border-radius:50%; object-fit:cover; object-position:50% 10%; background:#1d2a5c; }
.zbcard { position:relative; } .zbcord { position:absolute; right:2px; top:2px; width:22px !important; height:22px !important; object-fit:contain; }

/* ---------- Gewänder ---------- */
.skgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0 6px; }
.skc { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px 8px; border-radius:14px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); color:#fff; font:inherit; }
.skc > img { width:100%; aspect-ratio:1; object-fit:contain; } .skc b { font-size:12.5px; text-align:center; } .skc small { font-size:10px; color:var(--muted); }
.skc.on { border-color:#ffc24a; background:rgba(255,194,74,.16); box-shadow:0 0 12px rgba(255,194,74,.45); } .skc.cur { opacity:.55; } .skc.shop > img { filter:saturate(.7); }
.skchip { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:8px; background:rgba(10,13,30,.7); } .skchip img { width:14px; height:14px; } .skchip.off { opacity:.6; } .skchip.off img { filter:grayscale(.8); }
.skprev { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .skprev > b { width:100%; font-size:13px; color:#8fe0a8; } .skprev > span { display:flex; flex-direction:column; align-items:center; gap:2px; } .skprev small { font-size:10.5px; color:var(--muted); }
.skfist { font-style:normal; font-size:11px; font-weight:800; width:56px; height:56px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.skwarn { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#ffd27a; } .skwarn img { width:24px; height:24px; filter:grayscale(.6); }
.skb { width:100%; justify-content:center; padding:5px 4px; font-size:12px; margin-top:2px; } .skb img { width:16px; height:16px; } .skoff { align-self:center; font-size:12px; padding:5px 10px; }
.zhskins h4 { font-size:15px; } .zhskins h4 small { display:block; font-size:11px; color:var(--muted); font-weight:600; }
.twwl.skin { box-shadow:inset 0 0 0 1px rgba(255,194,74,.45); } .twskel { width:16px !important; height:16px !important; margin-left:-10px; margin-top:14px; } .twsk { font-style:normal; color:#ffd27a; font-size:10.5px; }
.twskin { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; color:#dfe5ff; font-weight:600; flex-wrap:wrap; }
.fgh .zface, .odh .zface, .odt .zface { display:block; flex:0 0 auto; width:52px; height:52px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#3a5bb0,#1d2a5c); }
.odt .zface { width:56px; height:56px; } .fgh .zface img, .odh .zface img, .odt .zface img { width:100%; height:100%; object-fit:contain; transform:scale(1.9); transform-origin:50% 14%; }

/* ---------- Heimat: Reaktions-Schilde ---------- */
:root { --el-fire:#ff8a2a; --el-ice:#9fe4ff; --el-poison:#7ad63a; --el-shock:#ffe23a; --el-water:#3aa0ff; --el-glue:#ff6ad5; }
.bl-es.rx i { background:linear-gradient(90deg, var(--c1), var(--c2)); }
.bl-rx { position:absolute; left:50%; top:-40px; width:22px; height:22px; transform:translateX(-50%); object-fit:contain; filter:drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation:bob 2s ease-in-out infinite; }
.bl-rx.swap { animation:rxswap .7s ease-out; } @keyframes rxswap { 0% { transform:translateX(-50%) scale(.2) rotate(-180deg); } 60% { transform:translateX(-50%) scale(1.6) rotate(10deg); } 100% { transform:translateX(-50%) scale(1); } }
.bl-pop.wrongrx b { display:block; font-size:13px; color:#ff9a9a; -webkit-text-stroke:1.5px #2a0a0a; } .bl-pop.wrongrx span { display:block; font-size:10px; color:#ffe0e0; }
.rxchip { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:9px; background:rgba(10,13,30,.7); border:1px solid rgba(255,255,255,.2); margin:2px 3px 2px 0; white-space:nowrap; }
.rxchip img { width:16px; height:16px; object-fit:contain; } .rxchip b { color:#fff; } .rxchip.ok { border-color:rgba(111,220,140,.7); } .rxchip.no { border-color:rgba(255,110,110,.7); opacity:.85; }
.rxok, .rxno { width:12px; height:12px; margin-left:2px; } .rxok { background:#6fdc8c; clip-path:polygon(14% 52%, 38% 76%, 88% 22%, 100% 36%, 38% 100%, 0 64%); } .rxno { background:#ff6a6a; clip-path:polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.rxrow { flex-wrap:wrap; } .rxlist { display:flex; flex-wrap:wrap; align-items:center; } .rxlist em { font-size:11px; margin-right:6px; }
.rxseq { display:flex; flex-wrap:wrap; align-items:center; gap:4px; } .rxseq > span { display:flex; flex-direction:column; align-items:flex-start; } .rxseq small { font-size:9.5px; color:var(--muted); font-weight:700; }
.mpv .rxchip { margin-left:auto; } .mpv .rxchip + em { margin-left:6px; }
.ovrx h4 { font-size:15px; margin-bottom:6px; } .ovrxr { display:flex; align-items:center; gap:8px; padding:4px 0; border-top:1px solid rgba(255,255,255,.06); } .ovrxr > div { flex:1; display:flex; flex-wrap:wrap; }
.ovrxr.boss .ovst { background:linear-gradient(180deg,#ff9a8a,#d0402a); color:#fff; }
.ovmiss { font-size:12.5px; color:#ffd27a; margin-top:6px; line-height:1.5; } .ovmiss img { width:16px; height:16px; vertical-align:-3px; margin:0 2px; } .ovok { font-size:12.5px; color:#8fe0a8; margin-top:6px; }

/* ---------- Rivalen: rundes Porträt statt Käfer-Symbol ---------- */
img.zriv { border-radius:50%; object-fit:cover !important; object-position:50% 22%; background:#2a1d3a; box-shadow:0 0 0 2px #ffb04a, 0 2px 4px rgba(0,0,0,.5); }
.mpv.rival img.zriv { width:40px; height:40px; } .mpv.rival b { font-size:13.5px; }
.ovfoe .zrivel { position:absolute; left:-3px; bottom:-3px; width:13px !important; height:13px !important; border-radius:50%; background:#141a33; }
.zfoe.rival img.zriv { width:32px; height:32px; }
.tipimgs img[src*="rivals/"] { border-radius:50%; object-fit:cover; object-position:50% 22%; box-shadow:0 0 0 3px #ffb04a; }
/* Belohnungsvideo-Knopf (nur iOS-App, ui/ads.js): Zweit-Knopf mit Video-Symbol, darunter „noch n heute“ */
.zad { align-self:center; text-align:left; margin:6px auto 0; } .zad span { display:flex; flex-direction:column; line-height:1.15; } .zad small { font-weight:600; }
/* ---------- Kompakt-Layout Handy (passt ohne Scrollen auf 390×844): Ausrüstung ---------- */
#s-tower { gap:8px; } #s-tower .zhead { min-height:40px; } #s-tower .zhead .ztitle { font-size:22px; } #s-tower .zback { width:42px; height:42px; }
#s-tower .twtabs { gap:7px; } #s-tower .twtab { width:48px; height:48px; border-radius:14px; } #s-tower .twtab .zface { border-radius:11px; }
.zsyn.twsyn { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px; width:calc(100% + 32px); max-width:none; } .zsyn.twsyn::-webkit-scrollbar { display:none; }
.zsyn.twsyn .zsy { flex:none; white-space:nowrap; } .twsyn:has(.zsy:nth-child(-n+3):last-child) { justify-content:center; }
#s-tower .twmain { gap:8px; align-items:stretch; } #s-tower .twleft { flex:1 1 44%; gap:4px; }
#s-tower .twpic { position:relative; height:104px; aspect-ratio:auto; border-radius:16px; overflow:hidden; }
#s-tower .twpic img { width:auto; height:118px; margin-bottom:-14px; }
.twpic .twpow { position:absolute; right:4px; top:4px; display:flex; flex-direction:column; align-items:center; line-height:1; padding:3px 6px 4px; border-radius:10px; background:rgba(10,13,30,.78); border:1px solid rgba(255,194,74,.5); }
.twpic .twpow small { font-size:9.5px; color:var(--muted); font-weight:700; } .twpic .twpow b { font-size:15px; color:var(--gold); }
#s-tower .twname { font-size:20px; } #s-tower .zhrole { font-size:11.5px; } #s-tower .zperm { margin-top:-2px; }
#s-tower .twstats { gap:3px; } #s-tower .twstats > div { padding:3px 2px; border-radius:10px; } #s-tower .twstats > div:last-child { grid-column:auto; } #s-tower .twstats small { font-size:10px; line-height:1.1; } #s-tower .twstats b { font-size:14px; line-height:1.15; }
#s-tower .twattr { padding:5px 4px; gap:2px; } #s-tower .twsup { padding:4px 8px; min-height:42px; } #s-tower .twsup img { width:30px; height:30px; } #s-tower .twsup b { font-size:13px; }
#s-tower .twtower { flex:1 1 56%; padding:8px 6px 10px; } #s-tower .twtower h4 { margin-bottom:12px; }
#s-tower .twcol { gap:18px; padding-right:30px; } #s-tower .twslot { min-height:52px; } #s-tower .twslot .ztile, #s-tower .twempty { width:52px; height:52px; flex-basis:52px; }
#s-tower .twslot.locked { min-height:40px; } #s-tower .twslot.locked .twempty { height:40px; } #s-tower .twslot.hand::before { top:-13px; }
#s-tower .twbag { padding:8px 10px 10px; } .twbt { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.twbt button { min-height:40px; padding:0 12px; border-radius:12px; border:1.5px solid var(--line); background:rgba(10,13,30,.5); color:#c9d0ea; font:inherit; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:5px; }
.twbt button.on { color:#fff; background:linear-gradient(180deg,#3c4c8e,#28336a); border-color:rgba(255,194,74,.65); box-shadow:0 0 10px rgba(255,170,40,.25); }
.twbt button span { background:rgba(255,255,255,.12); border-radius:8px; padding:0 6px; font-size:12px; } .twbt button span.on { background:var(--good); color:#0d2a16; }
.twbt small { margin-left:auto; font-size:11px; color:var(--muted); font-weight:600; text-align:right; line-height:1.15; }
#s-tower .twgrid { grid-template-columns:repeat(auto-fill, minmax(50px, 1fr)); gap:7px; min-height:54px; padding-top:4px; } #s-tower .twcell .ztile { width:50px; height:50px; }
#s-tower .twcombos { gap:4px; min-height:54px; justify-content:center; } #s-tower .twcombo { padding:6px 10px; font-size:13px; } #s-tower .twbag > .twskin { min-height:54px; font-size:13px; }
#s-tower .zfoot { padding-top:6px; } #s-tower .zfoot .big { padding:13px; }
#s-tower .twgrid { grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:5px; } #s-tower .twcell .ztile { width:44px; height:44px; border-radius:12px; }
#s-tower .twpic { height:92px; } #s-tower .twpic img { height:106px; margin-bottom:-12px; }
#s-tower .twgrid { grid-template-columns:repeat(7, minmax(0, 1fr)); } #s-tower .twcell { width:100%; display:flex; justify-content:center; } #s-tower .twcell .ztile { width:min(44px, 100%); height:auto; aspect-ratio:1; }
#s-tower .zhrole .twperm { width:15px; height:15px; margin-left:2px; filter:drop-shadow(0 0 3px rgba(120,230,160,.8)); }
#s-tower .twattr { position:relative; } #s-tower .twattr .ptbadge { position:absolute; right:-4px; top:-10px; z-index:2; font-size:11px; padding:1px 7px 1px 3px; } #s-tower .twattr .ptbadge img { width:14px; height:14px; }
#s-tower .twsup { min-height:40px; padding:3px 8px; }
#s-tower { gap:7px; } #s-tower .twcol { gap:16px; } #s-tower .twtower h4 { margin-bottom:9px; } #s-tower .twtower { padding-top:6px; }
/* Händler kompakt: flachere Karten, Mini-Türme in einer Reihe, Würfeln/Verkaufen neben WEITER */
#s-shop { gap:10px; } #s-shop .shgrid { gap:8px; padding:8px; } #s-shop .shcard { aspect-ratio:.92; }
#s-shop .shname { min-height:24px; font-size:12px; } #s-shop .shimg { width:66%; }
#s-shop > .zsub { font-size:12px; line-height:1.35; text-align:center; }
#s-shop .shminis { flex-wrap:wrap; gap:6px; } #s-shop .shmini { flex:1 1 0; min-width:54px; max-width:74px; width:auto; padding:3px; }
#s-shop .shface { width:38px; height:38px; } #s-shop .shslots { grid-template-columns:repeat(3, 1fr); gap:2px; }
#s-shop .shbtns .zbtn { padding:8px 10px; font-size:14px; flex:0 0 auto; } #s-shop .shbtns .zbtn.two small { font-size:11.5px; } #s-shop .shbtns .big { font-size:18px; padding:14px 8px; }
/* Weltwahl kompakt: Plakette neben dem Namen, flachere Karten, Übersicht neben WEITER */
#s-worlds { gap:10px; } #s-worlds .zsub { text-align:center; margin-top:-4px; }
#s-worlds .wdgrid { gap:8px; } #s-worlds .wdcard { min-height:150px; padding:8px 9px; gap:1px; border-radius:16px; }
.wdtop { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; } .wdtop > span { display:flex; flex-direction:column; min-width:0; }
#s-worlds .wdbadge { width:38px; height:38px; flex:none; } #s-worlds .wdname { font-size:16px; overflow-wrap:anywhere; }
#s-worlds .wdbn { margin-top:auto; } #s-worlds .wdboss { width:56px; height:56px; bottom:26px; right:-4px; } #s-worlds .wdprog { margin-top:2px; gap:2px; } #s-worlds .wdweak { margin-top:0; }
#s-worlds .wdels { margin-top:2px; }
.wdfoot .wdov { flex:0 0 auto; padding:6px 12px; gap:2px; font-size:12.5px; } .wdfoot .wdov img { width:28px; height:28px; } .wdfoot .big { flex:1; }
/* Welt-Übersicht kompakt: Reiter Stufen · Tipps · Reaktionen statt alles untereinander, flacherer Kopf und Stufen-Zeilen */
#s-overview { gap:8px; } #s-overview .ovtab img { width:34px; height:34px; } #s-overview .ovhead { min-height:0; padding:8px 10px; } #s-overview .ovboss { width:70px; height:70px; }
#s-overview .ovbadge { width:48px; height:48px; flex-basis:48px; } #s-overview .ovhead b { font-size:20px; }
.ovbt { display:flex; gap:6px; } .ovbt button { flex:1; min-height:40px; padding:0 8px; border-radius:12px; border:1.5px solid var(--line); background:rgba(10,13,30,.5); color:#c9d0ea; font:inherit; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.ovbt button.on { color:#fff; background:linear-gradient(180deg,#3c4c8e,#28336a); border-color:rgba(255,194,74,.65); box-shadow:0 0 10px rgba(255,170,40,.25); } .ovbt button span { background:rgba(255,255,255,.12); border-radius:8px; padding:0 6px; font-size:12px; }
#s-overview .ovlist { gap:3px; } #s-overview .ovrow { padding:3px 8px; min-height:34px; } #s-overview .ovrow.ovhd { min-height:0; } #s-overview .ovfoe img { width:24px; height:24px; } #s-overview .ovfoe.boss img { width:32px; height:32px; }
#s-overview .ovrow { grid-template-columns:28px 1fr 74px; gap:5px; min-height:32px; } #s-overview .ovrow.ovhd { grid-template-columns:28px 1fr 74px; } #s-overview .ovlist { gap:2px; }
.ovright { display:flex; flex-direction:column; align-items:stretch; gap:1px; } .ovright .ovk { align-self:flex-end; padding:0 5px; line-height:1.35; }
#s-overview .ovtabs { gap:5px; } #s-overview .ovtab { padding:3px; } #s-overview .ovtab img { width:32px; height:32px; }
/* ---------- Kompakt-Layout 2 (ohne Scrollen auf 375×812 bis 402×874, mit Notch und Home-Leiste; Prüfung: tools/fitcheck.mjs): Laufende ---------- */
#s-runend { gap:9px; } #s-runend .rewin { font-size:clamp(34px, 10.5vw, 46px); } #s-runend .relose { font-size:34px; } #s-runend > .zsub { margin-top:-4px; }
.reheroes { padding-top:2px; gap:6px; } .reheroes .lthero { width:58px; gap:2px; } .reheroes .rename { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reheroes .ltface { width:54px; height:54px; border-width:2.5px; }
#s-runend .restats { padding:6px 8px; border-radius:16px; } #s-runend .restats b { font-size:16px; line-height:1.15; } #s-runend .restats small { font-size:11px; }
.rerew { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:10px; }
.rerow { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .rerow.one { grid-template-columns:1fr; }
.rehalf { display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 4px 7px; border-radius:14px; background:rgba(10,13,30,.45); min-width:0; }
.rehalf .zcrybig { font-size:28px; gap:6px; line-height:1.1; } .rehalf .zcrybig img { width:32px; height:32px; } .rehalf > small { font-size:12px; color:var(--muted); font-weight:700; }
.rept { font-size:11px; font-weight:600; color:#c3cae6; text-align:center; line-height:1.3; } .rept b { color:#c9a8ff; } .rept.tal b { color:#ffd86a; }
.rerew .rewlist { display:flex; flex-direction:column; gap:4px; } .rerew .rewrow { padding:3px 8px; } .rerew .rewrow > img { width:28px; height:28px; } .rerew .rewrow b { font-size:13px; } .rerew .rewrow small { font-size:11px; }
.rerew .zad { width:100%; margin:0; padding:6px 12px; min-height:44px; } .rerew .zad span { flex-direction:row; align-items:baseline; gap:8px; font-size:14px; white-space:nowrap; } .rerew .zad small { display:inline; font-size:11.5px; } .rerew .zad img { width:26px; height:26px; }
.rerew .twnone { padding:0; font-size:12px; line-height:1.3; }
.renews { display:flex; gap:8px; } .renew { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:14px; background:rgba(20,60,40,.45); border:1.5px solid rgba(111,220,140,.45); }
.renew img { width:36px; height:36px; object-fit:contain; flex:none; } .renew img.face { object-fit:cover; object-position:top; border-radius:10px; }
.renew div { min-width:0; } .renew b { display:block; font-size:13px; color:var(--good); line-height:1.2; } .renew span { font-size:11px; color:#c3cae6; }
.refoot { flex-direction:column; gap:8px; padding-top:6px; } .refoot .big { padding:13px; } .refoot .zrow { width:100%; gap:8px; } .refoot .zbtn { padding:9px 6px; font-size:14px; gap:5px; min-height:44px; } .refoot .zbtn img { width:22px; height:22px; }
/* Beute und Trost kompakt: Helden-Reihe flacher (Punkte als Plakette am Gesicht, Tippfläche größer als sie aussieht), Gold neben „Punkte verteilen“, Details als Chips, Würfeln neben NEHMEN */
:is(#s-loot, #s-trost) { gap:9px; } #s-loot .ltsieg { font-size:clamp(44px, 13vw, 56px); } :is(#s-loot, #s-trost) .ltperm { margin-top:-5px; }
:is(#s-loot, #s-trost) .ltheroes { padding-top:10px; gap:6px; flex-wrap:nowrap; } :is(#s-loot, #s-trost) .lthero { width:58px; gap:3px; flex:0 1 58px; min-width:0; }
:is(#s-loot, #s-trost) .ltface { width:100%; height:auto; aspect-ratio:1; border-width:2.5px; } :is(#s-loot, #s-trost) .ltxp { height:7px; } :is(#s-loot, #s-trost) .ltxp b { display:none; }
:is(#s-loot, #s-trost) .ltpts { position:absolute; left:-4px; top:36px; z-index:2; margin:0; padding:1px 6px 1px 2px; font-size:11.5px; } :is(#s-loot, #s-trost) .ltpts img { width:15px; height:15px; }
.ltpts::before { content:""; position:absolute; inset:-10px -6px; }
.ltmid { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .ltmid .ltgold { font-size:19px; padding:4px 12px; min-height:42px; } .ltmid .ltgold img { width:24px; height:24px; }
.ltmid .ltptall { padding:7px 12px; font-size:14px; min-height:42px; } .ltmid .ltptall img { width:22px; height:22px; }
:is(#s-loot, #s-trost) .lth { font-size:17px; margin-bottom:-2px; } :is(#s-loot, #s-trost) .ltcards { gap:8px; } :is(#s-loot, #s-trost) .ltcard { aspect-ratio:.76; border-radius:14px; }
:is(#s-loot, #s-trost) .ltinfo { min-height:52px; padding:8px 10px; } :is(#s-loot, #s-trost) .ltdet { font-size:13px; line-height:1.35; } :is(#s-loot, #s-trost) .ltdet b { font-size:15px; }
:is(#s-loot, #s-trost) .ltdet .zlines { flex-direction:row; flex-wrap:wrap; gap:4px; margin-top:4px; } :is(#s-loot, #s-trost) .ltdet .zl { font-size:12px; padding:3px 8px; border-radius:9px; } :is(#s-loot, #s-trost) .ltdet .zl-tags .zchip { font-size:11px; padding:2px 7px; }
:is(#s-loot, #s-trost) .ltfoot { flex-direction:row; align-items:stretch; gap:8px; padding-top:6px; } :is(#s-loot, #s-trost) .ltfoot .big { flex:1; width:auto; padding:14px 8px; }
#s-loot .ltroll { flex:0 0 auto; padding:6px 10px; font-size:13.5px; text-align:left; } #s-loot .ltroll span { display:flex; flex-direction:column; line-height:1.15; } #s-loot .ltroll img { width:26px; height:26px; }
#s-trost .trtitle { font-size:24px; } #s-trost > .zsub { margin-top:-6px; } #s-trost .trhearts { padding:3px 14px; gap:10px; } #s-trost .trhrow img { width:30px; height:30px; } #s-trost .trhearts b { font-size:15px; }
#s-trost .zad { margin:0 auto; padding:6px 14px; min-height:42px; } #s-trost .zad span { flex-direction:row; align-items:baseline; gap:8px; white-space:nowrap; } #s-trost .zad small { display:inline; font-size:11.5px; }
#s-trost .trcards { max-width:220px; }
.ltmid .ltgold { font-size:17px; padding:4px 10px; gap:6px; } .ltmid .ltgold span { font-size:13px; } .ltmid .ltptall { padding:7px 10px; gap:6px; }
#s-trost { gap:8px; } #s-trost .trhearts { width:auto; } #s-trost > .zsub { font-size:12px; line-height:1.3; } #s-trost .ltcard { aspect-ratio:.86; } #s-trost .lttop { min-height:22px; }
.ltmid { flex-wrap:nowrap; } .ltmid > * { flex:0 1 auto; min-width:0; white-space:nowrap; }
/* Detail-Feld unter den Karten füllt den Rest und scrollt nur in sich (lange Stern-Stufen), der Bildschirm selbst nicht */
:is(#s-loot, #s-trost) .ltinfo { flex:0 1 auto; min-height:56px; overflow-y:auto; overscroll-behavior:contain; }
#s-loot .ltcard { aspect-ratio:.7; }
/* „Welt geschafft!“ kompakt: Boss klein neben den Belohnungen, Trupp und Herzen in einer Zeile, Geschenk und nächste Welt flacher, Knöpfe enger */
#s-weltende { gap:8px; } #s-weltende > .zsub { margin-top:-4px; }
.wetop { display:flex; align-items:center; gap:8px; } .wetop .webossw { flex:0 0 96px; width:96px; height:96px; } .wetop .webossw > img { width:92px; height:92px; } .wetop .webadge img { width:36px; height:36px; } .wetop .webadge { right:-4px; bottom:0; }
.wetop .werew { flex:1; min-width:0; gap:6px; padding:8px; } .wetop .werow { gap:4px; } .wetop .werow > span { padding:4px 2px; } .wetop .werow img { width:24px; height:24px; } .wetop .werow b { font-size:17px; line-height:1.1; } .wetop .werow small { font-size:11px; }
.wetop .weunl { padding:5px 8px; gap:8px; } .wetop .weunl img { width:32px; height:32px; } .wetop .weunl b { font-size:12.5px; line-height:1.2; } .wetop .weunl small { font-size:11px; }
#s-weltende .wegift { padding:8px 10px; gap:10px; } #s-weltende .wegt .ztile.big { width:60px; height:60px; border-radius:14px; } #s-weltende .wegift b { font-size:16px; }
#s-weltende .wegl { flex-direction:row; flex-wrap:wrap; gap:2px 8px; margin-top:2px; } #s-weltende .wegl i { font-size:11.5px; }
.wetrupp { display:flex; align-items:center; justify-content:center; gap:8px; } .wetrupp .ltheroes { padding-top:0; gap:5px; flex-wrap:nowrap; min-width:0; }
.wetrupp .lthero { width:46px; gap:2px; } .wetrupp .ltface { width:46px; height:46px; border-width:2px; border-radius:12px; } .wetrupp .rename { font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wetrupp .wehearts { flex-direction:column; gap:1px; flex:none; } .wetrupp .wehearts img { width:20px; height:20px; } .wetrupp .wehearts:has(img:nth-child(4)) { display:grid; grid-template-columns:repeat(2, 20px); }
#s-weltende .wenext { min-height:0; padding:8px 10px; gap:8px; } #s-weltende .wenb { width:44px; height:44px; flex-basis:44px; } #s-weltende .wenboss { width:62px; height:62px; } #s-weltende .wenext b { font-size:19px; line-height:1.1; } #s-weltende .wenext span { font-size:12.5px; }
#s-weltende .zfoot { gap:8px !important; padding-top:6px; } #s-weltende .zfoot .big { padding:13px; font-size:18px; } #s-weltende .zfoot .zbtn { width:100%; padding:8px; min-height:42px; }
/* Belagerungs-Ende und Arena-Ende kompakt: Kopf als Zeile (Symbol links), Meilensteine flacher, NOCHMAL + Zweitknöpfe enger */
:is(#s-waveend, #s-arenaend) { gap:9px; } :is(#s-waveend, #s-arenaend) .wehead { display:grid; grid-template-columns:60px 1fr; column-gap:10px; align-items:center; text-align:left; justify-items:start; }
:is(#s-waveend, #s-arenaend) .wehead > img { grid-row:1 / span 4; width:60px; height:60px; } :is(#s-waveend, #s-arenaend) .wehead .werec, :is(#s-waveend, #s-arenaend) .wehead .ltsieg { font-size:clamp(30px, 9vw, 40px); text-align:left; }
:is(#s-waveend, #s-arenaend) .wehead .ztitle { font-size:26px; text-align:left; } :is(#s-waveend, #s-arenaend) .wewave { font-size:18px; line-height:1.2; } :is(#s-waveend, #s-arenaend) .wewave b { font-size:28px; }
:is(#s-waveend, #s-arenaend) .ltheroes { padding-top:0; gap:6px; } :is(#s-waveend, #s-arenaend) .lthero { width:58px; gap:2px; } :is(#s-waveend, #s-arenaend) .ltface { width:56px; height:56px; border-width:2.5px; }
#s-waveend .recry { padding:8px 10px; gap:5px; } #s-waveend .zcrybig { font-size:26px; } #s-waveend .zcrybig img { width:32px; height:32px; } #s-waveend .reparts span { font-size:12px; padding:3px 8px; }
#s-waveend .wems { padding:7px 10px; gap:10px; } #s-waveend .wems img { width:38px; height:38px; } #s-waveend .wems b { font-size:14px; } #s-waveend .wems span { font-size:12px; line-height:1.25; }
:is(#s-waveend, #s-arenaend) .zfoot { gap:8px !important; padding-top:6px; } :is(#s-waveend, #s-arenaend) .zfoot .big { padding:13px; } :is(#s-waveend, #s-arenaend) .zfoot .zbtn { padding:9px 6px; min-height:44px; } :is(#s-waveend, #s-arenaend) .zfoot .zbtn img { width:22px; height:22px; }
#s-arenaend .arleague { padding:8px 12px; } #s-arenaend .arleague > img { width:52px; height:52px; }
/* Schatz geöffnet: Truhe kleiner, damit Teil und Werte darunter Platz haben */
.trchest.open { width:150px; height:130px; } #s-treasure .tritem { padding:10px; } #s-treasure .tritem .zlines { flex-direction:row; flex-wrap:wrap; gap:4px; } #s-treasure .tritem .zl { font-size:12.5px; padding:4px 9px; border-radius:9px; }
/* Nur für Vorleser sichtbar (Bildschirm-Titel, wo die Kopfzeile eingespart ist) */
.zvh { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Ausrüstung mit vollem Turm (6 Plätze): Zurück neben den Helden-Reitern statt Titelzeile, kleinere Turm-Felder, Bild flacher, Rucksack schrumpft und scrollt in sich */
.twtop { display:flex; align-items:center; gap:8px; } .twtop .zback { position:relative; left:auto; top:auto; transform:none; flex:none; width:42px; height:42px; } .twtop .twtabs { flex:1; min-width:0; flex-wrap:nowrap; gap:6px; }
#s-tower .twpic { height:74px; } #s-tower .twpic img { height:90px; margin-bottom:-12px; } #s-tower .twname { font-size:18px; } #s-tower .twleft { gap:3px; }
#s-tower .twstats small { font-size:11px; } #s-tower .twstats b { font-size:14px; line-height:1.1; } #s-tower .twstats > div { padding:2px; }
#s-tower .twtower h4 { font-size:12px; margin-bottom:8px; } #s-tower .twcol { gap:14px; } #s-tower .twslot { min-height:46px; } #s-tower .twslot .ztile, #s-tower .twempty { width:46px; height:46px; flex-basis:46px; } #s-tower .twslot.locked { min-height:36px; } #s-tower .twslot.locked .twempty { height:36px; }
#s-tower .twbag { flex:0 1 auto; min-height:106px; display:flex; flex-direction:column; overflow:hidden; } #s-tower .twbag > :last-child { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#s-tower { gap:6px; } #s-tower .twcol { gap:12px; } #s-tower .zfoot { padding-top:4px; } #s-tower .zfoot .big { padding:12px; } #s-tower .twbag { min-height:100px; padding-bottom:8px; } #s-tower .twbt { margin-bottom:4px; }
/* Punkte-Blatt kompakt: Werte zweispaltig, Attribut-Zeilen flacher (Plus-Knopf bleibt groß) */
.atsh { gap:8px; } .atlist { gap:4px; } .atrow { padding:2px 6px 2px 5px; min-height:42px; } .atrow > img { width:28px; height:28px; flex-basis:28px; } .attx small { font-size:11px; line-height:1.2; }
.atstats { grid-template-columns:1fr 1fr; column-gap:14px; padding:6px 10px; } .atstats h4 { grid-column:1 / -1; margin-bottom:2px; } .atst { font-size:12px; min-width:0; } .atst span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .atst b { font-size:12.5px; }
#sheet .atsh + .zsbtns .big { padding:12px; }
/* Weltwahl mit Notch/Home-Leiste: Kopf und Karten flacher, lange Namen trennen statt umbrechen */
#s-worlds { gap:8px; } #s-worlds .zhead { min-height:40px; } #s-worlds .zback { width:42px; height:42px; } #s-worlds .zsub { font-size:12px; margin-top:-6px; }
#s-worlds .wdgrid { gap:7px; } #s-worlds .wdcard { min-height:0; padding:6px 8px 7px; gap:0; } #s-worlds .wdbadge { width:32px; height:32px; } #s-worlds .wdname { font-size:15px; overflow-wrap:normal; hyphens:auto; -webkit-hyphens:auto; }
#s-worlds .wdbn { margin-top:2px; } #s-worlds .wdcap { font-size:11px; } #s-worlds .wdboss { width:52px; height:52px; bottom:24px; } #s-worlds .wdweak { margin-top:0; } #s-worlds .wdweak img { width:16px; height:16px; }
#s-worlds .zfoot { padding-top:6px; } #s-worlds .zfoot .big { padding:13px 8px; }
/* Freischalten (Talente, Runenkreis) ohne Scrollen: Titel nur für Vorleser (der untere Reiter zeigt ihn), Zähler kleiner, Talent-Karten flacher, Runenkreis kleiner, Kauf-Zeilen nebeneinander */
#s-tree { gap:8px; } #s-tree > .ztitle { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #s-tree > .zsub { font-size:12px; line-height:1.3; margin-top:-2px; }
#s-tree .zcrybig { font-size:24px; gap:6px; } #s-tree .zcrybig img { width:30px; height:30px; } #s-tree .zcrybig span { font-size:13px; } #s-tree .ztalearn { font-size:11.5px; }
#s-tree .ztals { gap:6px; } #s-tree .ztal { padding:6px 10px; gap:10px; } #s-tree .ztal .znic { width:40px; height:40px; flex-basis:40px; } #s-tree .ztal .zntx b { font-size:15px; } #s-tree .ztal .zntx span { font-size:12px; line-height:1.25; }
#s-tree .ztal .tpips { margin-top:1px; } #s-tree .ztal .zbuy { min-height:40px; padding:6px 10px; font-size:15px; } #s-tree .ztorunes { margin-top:0; padding:8px 12px; }
#runeHost { display:flex; flex-direction:column; gap:8px; } #s-tree .rcircle { width:min(100%, 282px); margin-top:0; } #s-tree .rnode img { width:46px; height:46px; } #s-tree .rnode .rring { width:54px; height:54px; margin-left:-27px; }
#s-tree .rdet { gap:6px; padding:8px 10px; } #s-tree .rdhead img { width:36px; height:36px; } #s-tree .rdhead b { font-size:16px; }
.rdet .rbuy { padding:4px 6px 4px 8px; gap:6px; } .rbuys { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .rbuy .rbtn { min-height:40px; padding:6px 8px; font-size:14px; } .rbuy b { line-height:1.2; }
#s-tree .rroles { flex-wrap:nowrap; justify-content:space-between; } #s-tree .rrole { min-height:40px; flex:1 1 0; min-width:0; justify-content:center; padding:3px 4px; font-size:11.5px; }
#s-tree .ztal .zntx { display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:1px; align-items:center; } #s-tree .ztal .zntx span:not(.tpips) { grid-column:1 / -1; } #s-tree .ztal .tpips { grid-row:1; grid-column:2; margin:0; } #s-tree .ztal .tpips i { width:12px; height:7px; }
#s-tree .rcircle { width:min(100%, 256px); } #s-tree .rroles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; } #s-tree .rrole { min-height:40px; padding:2px 4px 2px 2px; gap:3px; justify-content:flex-start; white-space:nowrap; overflow:hidden; }
#s-tree .rrole img { flex:none; } #s-tree .rrole em { position:absolute; right:2px; top:2px; }
#s-tree .rdhead img { width:30px; height:30px; } #s-tree .rdhead > div { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } #s-tree .rrole { text-overflow:ellipsis; } #s-tree .rrole img { width:18px; height:18px; }
@media (max-height:830px) { #s-tree .rcircle { width:min(100%, 236px); } }
/* Belagerung Weltwahl: Welten als 2er-Raster (Plakette neben dem Namen), Einleitung kürzer, Kopf flacher */
#s-siege { gap:8px; } #s-siege .zhead { min-height:40px; } #s-siege .zback { width:42px; height:42px; }
#s-siege .sghero { gap:10px; } #s-siege .sghero img { width:44px; height:44px; } #s-siege .sghero p { font-size:12.5px; line-height:1.3; }
#s-siege .sglist { display:grid; grid-template-columns:1fr 1fr; gap:7px; } #s-siege .sgworld { display:grid; grid-template-columns:30px 1fr; column-gap:6px; align-items:center; padding:6px 8px; min-height:44px; border-radius:14px; }
#s-siege .sgbadge { width:30px; height:30px; } #s-siege .sgtx { display:contents; } #s-siege .sgtx b { font-size:14.5px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#s-siege .sgbest, #s-siege .sgms, #s-siege .sglock { grid-column:1 / -1; } #s-siege .sgbest { font-size:12px; margin-top:3px; } #s-siege .sgbest img { width:16px; height:16px; } #s-siege .sgms img { width:20px; height:20px; } #s-siege .sgms small { font-size:11px; } #s-siege .sglock { font-size:11.5px; margin-top:3px; }
#s-siege .sgmsinfo { font-size:12px; } #s-siege .zfoot { padding-top:6px; } #s-siege .zfoot .big { padding:13px; }
/* Welt-Übersicht: Zurück neben den Welt-Reitern statt Titelzeile, Kopf-Karte flacher, Stufen-Liste schrumpft und scrollt notfalls in sich */
.ovtop { display:flex; align-items:center; gap:8px; } .ovtop .zback { position:relative; left:auto; top:auto; transform:none; flex:none; width:42px; height:42px; } .ovtop .ovtabs { flex:1; min-width:0; flex-wrap:nowrap; justify-content:center; }
#s-overview .ovtab { flex:0 1 46px; min-width:0; } #s-overview .ovtab img { width:100%; max-width:34px; height:auto; aspect-ratio:1; }
#s-overview .ovhead { padding:6px 10px; } #s-overview .ovbadge { width:42px; height:42px; flex-basis:42px; } #s-overview .ovboss { width:62px; height:62px; } #s-overview .ovhead b { font-size:19px; }
#s-overview .ovlist { flex:0 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain; } #s-overview .zfoot { padding-top:6px; } #s-overview .zfoot .big { padding:13px; }
#s-overview .ovlist > *, #s-tower .twbag > :last-child > *, :is(#s-loot, #s-trost) .ltinfo > * { flex-shrink:0; }
#s-tower .twgrid { padding-top:2px; } #s-tower .twbag { min-height:104px; }
#s-overview .ovrow { min-height:30px; padding:2px 8px; } #s-overview .ovfoe img { width:22px; height:22px; } #s-overview .ovfoe.boss img { width:30px; height:30px; }
#s-tower .twbag { min-height:100px; padding-top:6px; padding-bottom:6px; } #s-tower .twgrid { padding-top:0; }
/* Händler mit Notch/Home-Leiste: Karten etwas flacher, Video-Knopf einzeilig */
#s-shop { gap:8px; } #s-shop > .ztitle { font-size:24px; } #s-shop .shcard { aspect-ratio:1; } #s-shop > .zsub { font-size:11.5px; line-height:1.3; margin-top:-4px; }
#s-shop .zad { margin:0 auto; padding:5px 14px; min-height:42px; } #s-shop .zad span { flex-direction:row; align-items:baseline; gap:8px; white-space:nowrap; } #s-shop .zad small { display:inline; font-size:11.5px; }
#s-shop:has(.shprep) .shcard { aspect-ratio:1.08; } #s-shop:has(.shprep) > .ztitle { font-size:22px; }
/* Taktik-Blatt als Liste (Symbol links, Text rechts) statt hoher 2er-Karten */
.tacgrid { grid-template-columns:1fr; gap:6px; } .taccard { display:grid; grid-template-columns:42px 1fr; column-gap:10px; row-gap:1px; align-items:center; text-align:left; padding:6px 10px; min-height:44px; border-radius:14px; }
.taccard img { grid-row:1 / span 3; width:42px; height:42px; } .taccard b { font-size:14.5px; line-height:1.2; } .taccard small { font-size:11.5px; line-height:1.3; } .taccard .taclock { grid-column:2; }
#sheet .tacgrid ~ .zsbtns .big, #sheet .zsheet:has(.tacgrid) .zsbtns .big { padding:12px; }
/* Helden-Blatt: Kopf kleiner, Super/Passive flacher, Gewänder als waagrechte Reihe */
.zhsheet .zhbig { width:76px; height:76px; } #sheet .zinfo { padding:6px 10px; } #sheet .zinfo img { width:36px; height:36px; flex-basis:36px; } #sheet .zinfo b { font-size:14px; } #sheet .zinfo span { font-size:12.5px; line-height:1.3; }
.zhskins .skgrid { display:flex; overflow-x:auto; gap:6px; margin:6px -4px 4px; padding:2px 4px; scrollbar-width:none; overscroll-behavior-x:contain; } .zhskins .skgrid::-webkit-scrollbar { display:none; }
.zhskins .skc { flex:0 0 96px; padding:4px 3px 6px; } .zhskins .skc > img { width:70px; } .zhskins .skb { min-height:36px; }
.zhtabs button { min-height:40px; font-size:13.5px; }
#sheet .zsheet:has(.tacgrid) { gap:9px; } #sheet .zsheet:has(.tacgrid) .zsp2 { font-size:13px; line-height:1.35; } .taccard { padding:4px 10px; } .taccard img { width:36px; height:36px; } .taccard { grid-template-columns:36px 1fr; }
.ltpts { position:relative; } :is(#s-loot, #s-trost) .ltpts { position:absolute; }
@media (max-height:830px) { #s-runend { gap:7px; } #s-runend .reheroes .rename { display:none; } #s-runend .reheroes .ltface { width:50px; height:50px; } }