/* ═══════════════════════════════════════════════════════════════ CSS 1. GRUNDGERÜST & VARIABLEN ═══════════════════════════════════════════════════════════════ */ :root{ --panel: rgba(14,16,28,.92); --panel2: rgba(20,23,40,.94); --border: rgba(240,192,96,.35); --gold: #f0c060; --gold2:#ffd98a; --txt: #e8e6f0; --dim: #9a97b0; /* ── Farbstandards der Ressourcen (verbindlich, nirgends vermischen!) ── */ --mana:#00a2ff; /* Heldenmana — NUR Heldenfähigkeiten Q/F/H */ --gem:#00f0ff; /* Verteidigungsjuwelen — NUR bauen/ausbauen/reparieren */ --coin:#f0c060; /* Gold — Ausrüstung aufwerten & Umskillen */ --du:#ffe600; /* VE-Budget (Verteidigungseinheiten) */ --hp:#28a745; /* Heldenleben */ --xp:#a100ff; /* Erfahrung / Paragon */ --crys:#6ee0e8; /* Eternia-Kristalle (Missionsziel) */ /* ── 7 Raritäten ── */ --rar0:#b8b8c4; --rar1:#7ae08a; --rar2:#5aa0ff; --rar3:#c07af0; --rar4:#ff9a30; --rar5:#ff4a4a; --rar6:#ffd23f; --bad:#ff6a5a; --good:#7ae08a; /* Breite der Übersichtskarte (V0.35, Format 2:1) — Höhe und die Lage des Verteidigungs-Panels rechnen daraus */ --mmW:340px; } *{margin:0;padding:0;box-sizing:border-box} html,body{width:100%;height:100%;overflow:hidden;background:#0a0d18; font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; color:var(--txt);-webkit-user-select:none;user-select:none} button{font-family:inherit} /* V0.27: EIN Spiel-Theme für alle Texteingaben (vorher fielen #charNameIn/#edName/#edNote auf die Browser-Default-Optik zurück). Checkboxen/Slider bleiben unberührt. */ input:not([type]),input[type=text],input[type=password],input[type=number],textarea{ background:#1c2138;color:var(--txt);border:1px solid var(--border);border-radius:7px; padding:6px 10px;font-family:inherit;font-size:13px; -webkit-user-select:text;user-select:text} input:not([type]):focus,input[type=text]:focus,input[type=password]:focus, input[type=number]:focus,textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 8px rgba(240,192,96,.28)} input::placeholder,textarea::placeholder{color:var(--dim)} #game3d{position:fixed;inset:0;z-index:0} #game3d canvas{display:block;touch-action:none} body{touch-action:manipulation} .hidden{display:none !important} /* ── Touch-Steuerung ── */ #joy{position:fixed;left:20px;bottom:20px;width:132px;height:132px;border-radius:50%; background:rgba(14,16,28,.5);border:1px solid var(--border);z-index:12;touch-action:none} #joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%; background:rgba(240,192,96,.30);border:1px solid var(--gold); transform:translate(-50%,-50%);pointer-events:none} #btnAtk{position:fixed;right:18px;bottom:18px;width:86px;height:86px;border-radius:50%; background:var(--panel);border:1px solid var(--border);z-index:12;display:flex; align-items:center;justify-content:center;font-size:34px;touch-action:none; -webkit-user-select:none;user-select:none} #btnAtk:active{border-color:var(--gold);background:#2e3452} /* .btn.touchOnly zusätzlich nötig: die spätere .btn-Regel (display:inline-block) gewinnt sonst bei gleicher Spezifität — der ☰-Knopf stand auf dem Desktop (V0.37) */ .touchOnly,.btn.touchOnly{display:none} body.touch .touchOnly{display:inline-block} body.touch #hudLeft{max-height:calc(100% - 180px)} /* ── V0.37.1: Fähigkeits-Slots auf Touch — GROSS (56 px) und RUND. Die drei wichtigsten (Space/Ausweichen · Q · F) liegen im ENGEN Bogen um den 86-px-Angriffsknopf (Mitte ≈ 61/61 von rechts/unten, Radius 112), von UNTEN nach OBEN; Heilen und Reparatur stapeln sich mit dem ⚒-Bauknopf als Spalte am RECHTEN Bildschirmrand darüber. Der Wellen-Slot bleibt oben neben der Wellenanzeige. Wer Slotgröße oder #btnAtk ändert, rechnet die Koordinaten nach (Kreisbogen, Slots berühren sich sonst). ── */ body.touch #hudSkills{position:static} body.touch #hudSkills .skill{position:fixed;width:56px;height:56px; border-radius:50%;z-index:12} body.touch #hudSkills .skill .ic{font-size:22px} body.touch #hudSkills .skill .cd{border-radius:50%} body.touch #hudSkills .skill .nm{display:none} body.touch .skill kbd,body.touch .twrBtn kbd{display:none} /* Tastenkürzel: auf Touch bedeutungslos */ body.touch #hudSkills .skill:first-child{display:none} /* Angriff = großer Knopf rechts */ /* Bogen um den Angriffsknopf, von unten nach oben: Ausweichen · Q · F · Heilen. Das Bogenende (Heilen) landet AM RECHTEN RAND — darüber setzen Reparatur und der ⚒-Bauknopf die Linie senkrecht fort (Viertelkreis, der in eine Spalte mündet; Winkelschritt 36° auf Radius 112). */ body.touch #hudSkills .skill:nth-child(2){right:calc(143px + var(--sar));bottom:calc(14px + var(--sab))} body.touch #hudSkills .skill:nth-child(3){right:calc(134px + var(--sar));bottom:calc(82px + var(--sab))} body.touch #hudSkills .skill:nth-child(4){right:calc(86px + var(--sar));bottom:calc(132px + var(--sab))} body.touch #hudSkills .skill:nth-child(5){right:calc(18px + var(--sar));bottom:calc(144px + var(--sab))} /* in einer Linie darüber: Reparatur, zuoberst der ⚒-Bauknopf */ body.touch #hudSkills .skill:nth-child(6){right:calc(18px + var(--sar));bottom:calc(208px + var(--sab))} /* V0.37.1: Wellenanzeige auf Touch etwas GRÖSSER und mit FESTER Höhe (56 px = Slotmaß); der Wellen-Slot sitzt eckig-abgerundet wenige px rechts daneben, beide auf gleicher Oberkante. Die feste Breite (statt max-width) macht die rechte Kante berechenbar — der Slot hängt an derselben min()-Formel. */ body.touch #hudWave{top:calc(12px + var(--sat));width:min(40vw,360px); max-width:none;min-width:0;height:56px;box-sizing:border-box;padding:4px 12px; display:flex;flex-direction:column;justify-content:center} body.touch #hudWave .wl{font-size:14px} body.touch #hudWave .crysRow{margin-top:4px} body.touch #hudSkills .skill.wave{right:auto;bottom:auto;top:calc(12px + var(--sat)); left:calc(50% + min(20vw,180px) + 6px);border-radius:14px} body.touch #hudSkills .skill.wave .cd{border-radius:14px} /* Verteidigungs-Panel bei Touch unten MITTIG — rechts wohnen jetzt Angriffsknopf, Fähigkeits-Bogen und Baumenü (V0.37; vorher bottom:118px rechts) */ body.touch #hudTower{left:50%;right:auto;transform:translateX(-50%); bottom:calc(14px + var(--sab));max-height:42vh} /* Touch: die Übersichtskarte wandert unter die (eingeklappte) Knopfleiste nach oben rechts, der Toast-Stapel rückt darunter. Sie bleibt dort schmal, sonst stößt sie an die zentrierte Wellenanzeige. */ body.touch{--mmW:212px} body.touch #minimap{top:calc(64px + var(--sat));bottom:auto} body.touch #toasts{top:calc(76px + var(--mmW)/2 + var(--sat))} /* ── V0.37: #hudRight ist auf Touch EINGEKLAPPT — sichtbar bleibt nur der ☰-Knopf (btnHudTgl), `.open` (28-panels.js) zeigt die Knopfspalte, ein Tipp außerhalb klappt wieder ein. Auf Zeiger-Geräten bleibt alles offen. V0.37.1: Rahmen/Innenabstand sind in BEIDEN Zuständen identisch (transparent im zugeklappten) — sonst springt der ☰ beim Öffnen um die Rahmenbreite. Die Knöpfe sind einheitliche Kacheln, und `.open` stapelt sich über Toasts (z 35) und Übersichtskarte. ── */ body.touch #hudRight{flex-direction:column;align-items:flex-end;gap:6px; padding:6px;border:1px solid transparent;border-radius:12px} body.touch #hudRight .btn{min-width:46px;height:40px;padding:0 10px; display:inline-flex;align-items:center;justify-content:center;font-size:15px} body.touch #hudRight.open{z-index:36;background:rgba(10,13,24,.92); border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,.5)} body.touch #hudRight.open #btnHudTgl{border-color:var(--gold);color:var(--gold2)} body.touch #hudRight:not(.open)>.btn:not(#btnHudTgl){display:none} /* Toasts (z 35) leben AUSSERHALB von #hud (z 10) — der Stacking-Context deckelt jedes z-index im HUD, das Menü kann sie nie überstapeln. Solange es offen ist, treten die Toasts deshalb zurück (transient, sie leben ohnehin nur kurz). */ body.touch:has(#hudRight.open) #toasts{opacity:0;transition:opacity .15s} /* ── V0.37: Baumenü — zugeklappt nur der ⚒-Knopf über dem Angriffsknopf, aufgeklappt erscheint die Bauleiste als Zeile links daneben (28-panels.js). Auf Zeiger-Geräten bleibt #hudBuild die offene Leiste unten Mitte. ── */ #btnBuildTgl{display:none} /* V0.37.1: gleiches Maß und gleiche Optik wie die Fähigkeits-Slots (56 px, rund), OBERSTES Glied der Rand-Spalte (über Heilen und Reparatur) */ body.touch #btnBuildTgl{position:fixed;right:calc(18px + var(--sar)); bottom:calc(272px + var(--sab));width:56px;height:56px;border-radius:50%; background:var(--panel);border:1px solid var(--border);display:flex; align-items:center;justify-content:center;font-size:24px;touch-action:none; -webkit-user-select:none;user-select:none;z-index:12} body.touch #btnBuildTgl.on{border-color:var(--gold);background:#2e3452} body.touch #hudBuild{left:auto;right:calc(84px + var(--sar)); bottom:calc(268px + var(--sab));transform:none;z-index:13; max-width:calc(100vw - 240px);overflow-x:auto} body.touch #hudBuild:not(.open){display:none} #rotateHint{display:none;position:fixed;inset:0;z-index:80;background:rgba(6,8,15,.92); align-items:center;justify-content:center;text-align:center;color:var(--gold2); font-size:20px;line-height:1.6;padding:30px} @media (orientation:portrait){body.touch #rotateHint.show{display:flex}} /* §1.1: unter 568×320 immer zeigen (auch Desktop); Safe-Areas + größere Schrift */ #rotateHint.tiny{display:flex} #rotateHint{padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));font-size:17px;line-height:1.6} /* ── Vignette & Schadensblitz ── */ #vignette{position:fixed;inset:0;z-index:3;pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(4,5,12,.55) 100%)} #redflash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0; background:radial-gradient(ellipse at center, rgba(255,40,20,.12) 40%, rgba(255,30,10,.4) 100%); transition:opacity .35s} #worldLabels{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden} /* ── Fehleranzeige (Three.js Ladefehler) ── */ #err3d{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; background:#0a0d18;text-align:center;padding:30px} #err3d .box{max-width:560px;background:var(--panel);border:1px solid var(--border); border-radius:12px;padding:28px} #err3d h1{color:var(--gold);margin-bottom:12px;font-size:22px} #err3d p{color:var(--dim);line-height:1.5} /* ═══════════════════════════════════════════════════════════════ CSS 2. GEMEINSAME BAUSTEINE (Panels, Buttons, Bars, Kbd) ═══════════════════════════════════════════════════════════════ */ .panel{background:var(--panel);border:1px solid var(--border);border-radius:10px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .btn{display:inline-block;background:linear-gradient(180deg,#2b3150,#1c2138); border:1px solid var(--border);color:var(--txt);border-radius:8px; padding:10px 22px;font-size:15px;cursor:pointer;transition:all .15s;letter-spacing:.4px} .btn:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-1px); box-shadow:0 4px 14px rgba(240,192,96,.15)} .btn:active{transform:translateY(0)} .btn.primary{background:linear-gradient(180deg,#7a5a20,#5a3f14);border-color:var(--gold)} .btn.primary:hover{background:linear-gradient(180deg,#8f6a28,#6a4a18)} .btn.danger{border-color:rgba(255,106,90,.5)} .btn.danger:hover{border-color:var(--bad);color:var(--bad)} .btn.small{padding:5px 12px;font-size:13px} .btn:disabled{opacity:.4;cursor:default;pointer-events:none} /* Inline-SVG-Symbole (svgIcon() aus 01-core.js): erben die Textfarbe, Größe in em. `.big` ist die Karten-/Auswahlgröße; Sonderfälle stehen bei ihrem Bauteil. */ .svgi{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;margin-right:5px} .svgi.big{width:44px;height:44px;vertical-align:middle;margin-right:0} /* `solo` = Symbol OHNE Text daneben. CSS kann das nicht selbst erkennen (Textknoten zählen für :only-child nicht mit), deshalb setzt es die aufrufende Stelle. */ .svgi.solo{margin-right:0} .card .ic .svgi,.skill .ic .svgi,.twrBtn .ic .svgi,.slot .si .svgi,.mutCard .mi .svgi, .portrait .svgi,#dragGhost .svgi,.heroChip .i .svgi,.mvpIcon .svgi,.setTag .svgi{margin-right:0} /* Symbole skalieren über `em` — die vorhandenen `font-size`-Regeln der Symbol-Container (`.twrBtn .ic`, `.skill .ic`, `.slot .si`, `.mutCard .mi`, …) gelten damit weiter. Nur Container ohne sinnvolle Schriftgröße bekommen hier eine feste Größe. */ .card .ic{line-height:0} .mvpBox .mvpIcon .svgi{width:54px;height:54px} #hudHero .portrait .svgi{width:70%;height:70%} .tgtBtn .svgi,.setTag .svgi,.elemChip .svgi{vertical-align:-.15em} kbd{display:inline-block;background:#232842;border:1px solid #4a5177;border-bottom-width:2px; border-radius:4px;padding:1px 6px;font-size:11px;font-family:inherit;color:var(--gold2); min-width:18px;text-align:center} .bar{position:relative;height:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12); border-radius:7px;overflow:hidden} .bar>i{position:absolute;inset:0;transform-origin:left;transition:transform .15s;border-radius:6px} .bar>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:600;text-shadow:0 1px 2px #000;letter-spacing:.3px} .bar.hp>i{background:linear-gradient(180deg,#5ce07a,var(--hp))} .bar.mana>i{background:linear-gradient(180deg,#6ad0ff,var(--mana))} .bar.xp>i{background:linear-gradient(180deg,#c66aff,var(--xp))} .bar.crys>i{background:linear-gradient(180deg,#9af0f5,var(--crys))} .bar.du>i{background:linear-gradient(180deg,#fff59a,var(--du))} .bar.du>span{color:#2a2600} h2.title{color:var(--gold);letter-spacing:1px;font-size:20px;margin-bottom:14px;text-align:center} /* Ressourcen-Textfarben (überall identisch verwenden) */ .cMana{color:var(--mana)} .cGem{color:var(--gem)} .cGold{color:var(--coin)} .cDu{color:var(--du)} .cHp{color:var(--hp)} .cXp{color:var(--xp)} /* ═══════════════════════════════════════════════════════════════ CSS 3. HUD ═══════════════════════════════════════════════════════════════ */ #hud{position:fixed;inset:0;z-index:10;pointer-events:none} #hud .panel{pointer-events:auto} /* Linke Spalte als Fluss-Stapel: Panels dürfen beliebig hoch werden, ohne zu kollidieren */ #hudLeft{position:absolute;top:14px;left:14px;width:250px;display:flex; flex-direction:column;gap:8px;max-height:calc(100% - 96px);pointer-events:none} #hudLeft>*{flex:0 0 auto} #hudHero{width:100%;padding:10px 12px} #hudHero .row1{display:flex;align-items:center;gap:10px;margin-bottom:8px} #hudHero .portrait{width:42px;height:42px;border-radius:8px;border:1px solid var(--border); display:flex;align-items:center;justify-content:center;font-size:24px;background:#1c2138} #hudHero .who{min-width:0;flex:1} #hudHero .who b{display:block;font-size:14px;color:var(--gold2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} #hudHero .who span{font-size:11px;color:var(--dim)} #hudHero .role{font-size:9.5px;color:var(--dim);letter-spacing:.4px;text-transform:uppercase} #hudHero .bar{margin-top:5px} #hudHero .bar.xp{height:12px} /* ── Ressourcenleiste: Juwelen · Gold · VE-Budget ── */ #hudRes{width:100%;padding:8px 10px} #hudRes .rrow{display:flex;gap:7px} #hudRes .chip{flex:1;background:#141830;border:1px solid rgba(255,255,255,.10); border-radius:7px;padding:4px 6px;text-align:center;min-width:0} #hudRes .chip i{display:block;font-style:normal;font-size:9px;color:var(--dim); letter-spacing:.3px;white-space:nowrap} #hudRes .chip b{display:block;font-size:13.5px;font-weight:700;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px} #hudRes .chip.gem{border-color:rgba(0,240,255,.40)} #hudRes .chip.coin{border-color:rgba(240,192,96,.40)} #hudRes .chip.du{border-color:rgba(255,230,0,.40)} #hudRes .chip.du.full{border-color:var(--bad);animation:duPulse .9s infinite} @keyframes duPulse{50%{background:rgba(255,106,90,.18)}} #hudRes .bar.du{height:6px;margin-top:6px} #hudWave{position:absolute;top:14px;left:50%;transform:translateX(-50%); min-width:330px;padding:8px 16px;text-align:center} #hudWave .wl{font-size:15px;color:var(--gold2);letter-spacing:.6px;font-weight:600} #hudWave .crysRow{display:flex;gap:8px;margin-top:6px;justify-content:center} #hudWave .crysRow .bar{flex:1;min-width:90px;height:11px} #hudWave .muts{margin-top:4px;font-size:10.5px;color:var(--rar4);letter-spacing:.2px} /* pointer-events:auto nötig — #hud fängt sonst alle Klicks ab (Buttons waren tot) */ #hudRight{position:absolute;top:14px;right:14px;display:flex;gap:8px;pointer-events:auto} #hudRight .btn{padding:7px 12px;font-size:13px} /* Auto-Start-Schalter (V0.36: aus #hudWave hierher gezogen) — grün = aktiv */ #hudRight .btn.on{border-color:var(--good);color:var(--good); box-shadow:0 0 8px rgba(122,224,138,.35)} #hudSkills{position:absolute;left:14px;bottom:14px;display:flex;gap:8px} .skill{position:relative;width:58px;height:58px;border-radius:10px;background:var(--panel); border:1px solid var(--border);display:flex;flex-direction:column;align-items:center; justify-content:center;pointer-events:auto;cursor:pointer} /* Wellen-Slot (V0.36: der frühere #btnGo): gold abgesetzt, nur in Bau/Roam sichtbar */ .skill.wave{border-color:rgba(240,192,96,.55)} .skill.wave .ic{color:var(--gold2)} .skill.wave:hover{background:#2e3452} .skill .ic{font-size:21px;line-height:1} .skill .nm{font-size:9px;color:var(--dim);margin-top:2px;max-width:54px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .skill kbd{position:absolute;top:-7px;right:-5px} /* Gehaltener Slot (Reparatur-Aura): läuft gerade → grün wie der Aura-Ring */ .skill.on{border-color:var(--good);background:#17301f; box-shadow:0 0 10px rgba(122,224,138,.45)} .skill .cd{position:absolute;inset:0;background:rgba(6,8,16,.78);border-radius:10px; display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700; color:var(--gold2);opacity:0} /* Tod (v0.18): Szene wird grau, Overlay zählt den Respawn herunter */ body.dead #game3d{filter:grayscale(1) brightness(.72);transition:filter .4s} #deathOverlay{position:fixed;top:38%;left:0;right:0;z-index:22;text-align:center; pointer-events:none;text-shadow:0 3px 12px #000} #deathOverlay .ic{font-size:44px} #deathOverlay .tx{font-size:16px;color:#d8dce8;letter-spacing:2px;margin-top:4px} #deathOverlay .cnt{font-size:52px;font-weight:800;color:#fff;line-height:1.1} /* Einstellungen in Tabs (v0.18) */ .setPane{display:none} .setPane.on{display:block} /* Aktive WIRKDAUER (z. B. Gepardengestalt): grün + leichter Rahmen statt des goldenen Abklingzeit-Looks — derselbe Zähler, andere Bedeutung */ .skill .cd.dur{color:var(--good);background:rgba(8,26,14,.5); box-shadow:inset 0 0 0 2px var(--good)} #hudBuild{position:absolute;left:50%;bottom:14px;transform:translateX(-50%); display:flex;gap:8px;padding:8px} .twrBtn{position:relative;width:78px;padding:9px 4px 5px;border-radius:8px;background:#1c2138; border:1px solid rgba(255,255,255,.14);text-align:center;cursor:pointer;transition:all .12s; pointer-events:auto} .twrBtn:hover{border-color:var(--gold)} .twrBtn.sel{border-color:var(--gold);background:#2e3452;box-shadow:0 0 12px rgba(240,192,96,.25)} .twrBtn.noMana{opacity:.45} .twrBtn.blocked{opacity:.3;filter:grayscale(1)} .twrBtn .ic{font-size:20px;line-height:1.1} .twrBtn .nm{font-size:9.5px;color:var(--txt);margin-top:2px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .twrBtn .co{font-size:10px;font-weight:700;display:flex;justify-content:center;gap:5px;margin-top:1px} .twrBtn kbd{position:absolute;top:-8px;left:-4px} /* Übersichtskarte (V0.35): sitzt unten rechts, das Verteidigungs-Panel weicht nach OBEN aus (--mmW/2 + Abstände). Wer --mmW in einer Media-Query ändert, muss nichts weiter anfassen — alle Abstände rechnen damit. */ #minimap{position:absolute;right:14px;bottom:14px;width:var(--mmW); height:calc(var(--mmW)/2);padding:4px;box-sizing:border-box;pointer-events:auto} #minimap canvas{display:block;width:100%;height:100%;border-radius:5px; background:#0a0d18} /* Karteninfo (V0.36: der frühere #hudWaveSub) liegt ÜBER der Unterkante des Canvas — das Panel behält seine --mmW/2-Höhe, #hudTower rechnet damit weiter */ #mmInfo{position:absolute;left:4px;right:4px;bottom:4px;padding:2px 7px; font-size:10px;color:var(--dim);text-align:center;background:rgba(10,13,24,.62); border-radius:0 0 5px 5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;pointer-events:none} #hudTower{position:absolute;right:14px;bottom:calc(22px + var(--mmW)/2);width:240px;padding:10px 12px; /* Karte und Panel teilen sich die rechte Spalte: nie in den Toast-Streifen wachsen */ max-height:calc(100vh - 200px - var(--mmW)/2);overflow-y:auto} #hudTower h4{color:var(--gold2);font-size:13.5px;margin-bottom:4px} #hudTower .st{font-size:11.5px;color:var(--dim);line-height:1.5} #hudTower .acts{display:flex;gap:6px;margin-top:8px} #hudTower .bar{height:9px;margin:5px 0 2px} /* ── Zieltaktik-Menü eines platzierten Verteidigers ── */ #twTargets{margin-top:8px;border-top:1px solid rgba(255,255,255,.10);padding-top:7px} #twTargets .tt{font-size:10.5px;color:var(--dim);margin-bottom:4px;display:flex; justify-content:space-between;align-items:center} #twTargets .tt b{color:var(--gold2);font-weight:600} #twGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px} .tgtBtn{background:#161a2e;border:1px solid rgba(255,255,255,.12);border-radius:6px; padding:3px 5px;font-size:10px;color:var(--dim);cursor:pointer;text-align:left; font-family:inherit;transition:all .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tgtBtn:hover{border-color:var(--gold);color:var(--txt)} .tgtBtn.sel{border-color:var(--gold);background:#2e3452;color:var(--gold2);font-weight:600} #buildFeed{position:absolute;left:50%;bottom:106px;transform:translateX(-50%); padding:6px 16px;border-radius:8px;font-size:13px;background:rgba(10,12,22,.9); border:1px solid var(--border);opacity:0;transition:opacity .2s;white-space:nowrap} #buildFeed.bad{color:var(--bad);border-color:rgba(255,106,90,.5)} #buildFeed.good{color:var(--good);border-color:rgba(122,224,138,.5)} /* Steckt im linken Stapel — rechts kollidierte es mit Toasts & Verteidigungs-Panel */ #hudMp{width:100%;padding:10px 12px;font-size:12px} #hudMp h4{color:var(--gold2);font-size:12.5px;margin-bottom:5px} #hudMp .m{color:var(--dim);line-height:1.55} #hudMp .sab{margin-top:8px} #hudMp .sab .bar{height:10px;margin-bottom:6px} #hudMp .sab>i{display:block;font-size:11px;color:var(--dim);margin-bottom:4px;font-style:normal} #hudMp .sabBtns{display:flex;flex-direction:column;gap:4px} #hudMp .sabBtns .btn{font-size:11px;padding:4px 8px;text-align:left} /* ── Toasts & Banner ── */ #toasts{position:fixed;top:86px;right:14px;z-index:35;display:flex;flex-direction:column; gap:8px;align-items:flex-end;pointer-events:none;max-width:340px} .toast{background:var(--panel);border:1px solid var(--border);border-radius:8px; padding:9px 14px;font-size:13px;animation:toastIn .25s ease-out;max-width:340px;line-height:1.4} .toast.legend{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 18px rgba(240,192,96,.3)} .toast.warn{border-color:rgba(255,106,90,.6);color:#ffb0a5} @keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} .toast.out{opacity:0;transition:opacity .4s} /* Boss-LP-Leiste (§6.4) */ #bossBar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:22; width:min(460px,60vw);text-align:center;pointer-events:none} #bossBar b{color:var(--bad);font-size:14px;letter-spacing:2px;text-shadow:0 2px 6px #000} #bossBar .bar.bossHp{position:relative;height:13px;background:#20101a; border:1px solid #6a2030;border-radius:7px;overflow:hidden;margin-top:3px} #bossBar .bar.bossHp i{position:absolute;inset:0;background:linear-gradient(90deg,#c02040,#ff5060); transform-origin:left;transition:transform .15s} #bossBar .bar.bossHp .ph{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35);display:none} #bossBar.phases .ph{display:block} #bossBar .bar.bossHp span{position:absolute;inset:0;font-size:9.5px;line-height:13px;color:#ffd8e0} #bossBar #bossBarSub{font-size:11px;color:var(--gold2);margin-top:2px;text-shadow:0 1px 4px #000} #banner{position:fixed;top:33%;left:0;right:0;z-index:21;text-align:center;pointer-events:none; opacity:0;transition:opacity .3s} #banner .big{font-size:44px;font-weight:800;letter-spacing:4px;color:var(--gold); text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 34px rgba(240,192,96,.4)} #banner .sm{font-size:16px;color:var(--txt);margin-top:6px;text-shadow:0 1px 6px #000} /* ── Schwebende Weltlabels ── */ .ehp{position:absolute;width:44px;height:6px;background:rgba(0,0,0,.65); border:1px solid rgba(0,0,0,.8);border-radius:3px;margin-left:-22px;display:none} .ehp>i{display:block;height:100%;background:linear-gradient(180deg,#ff8a76,#d84040);border-radius:2px} .ehp.boss{width:70px;margin-left:-35px;height:8px} .ehp.ally>i{background:linear-gradient(180deg,#8ae09a,#3aa050)} .dmgNum{position:absolute;font-weight:800;font-size:15px;color:#fff; text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.6);display:none;white-space:nowrap;margin-left:-20px} .dmgNum.crit{color:var(--gold);font-size:19px} .dmgNum.heal{color:var(--hp)} .dmgNum.manaN{color:var(--mana);font-size:13px} .dmgNum.gemN{color:var(--gem);font-size:13px} .dmgNum.goldN{color:var(--coin);font-size:13px} .dmgNum.xpN{color:var(--xp);font-size:12px} .dmgNum.el{font-size:13px} .dmgNum.block{color:var(--dim);font-size:13px} .nameTag{position:absolute;font-size:11.5px;font-weight:700;text-shadow:0 1px 3px #000; display:none;transform:translateX(-50%);white-space:nowrap} /* V0.28: am Lagerfeuer markiert das Schild den gewählten Charakter */ .nameTag.sel{font-size:13px;padding:1px 8px;border-radius:9px; background:rgba(14,16,28,.72);border:1px solid var(--gold); text-shadow:0 1px 4px #000,0 0 10px rgba(240,192,96,.5)} /* ═══════════════════════════════════════════════════════════════ CSS 4. VOLLBILD-MENÜS ═══════════════════════════════════════════════════════════════ */ .screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center; justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(30,36,64,.55),rgba(6,8,15,.92)); padding:20px;overflow:auto} /* V0.37: margin:auto statt reinem justify-content:center — überragt der Inhalt die Höhe (Telefone!), bleibt so der ANFANG scrollbar erreichbar; zentriertes Flex allein schneidet oben UND unten ab (Titel war gekappt). */ .screen .inner{width:100%;max-width:860px;text-align:center;margin:auto} #scrMain h1{font-size:58px;letter-spacing:10px;color:var(--gold);font-weight:800; text-shadow:0 0 40px rgba(240,192,96,.35),0 3px 0 #5a3f14;margin-bottom:4px} #scrMain .tag{color:var(--dim);letter-spacing:3px;font-size:14px;margin-bottom:38px} #scrMain .stack{display:flex;flex-direction:column;gap:11px;align-items:center} #scrMain .stack .btn{width:300px;font-size:16px;padding:12px} /* V0.37: .saveOps (Export/Import) entfallen — die Knöpfe wohnen in den Einstellungen */ .screen .backRow{margin-top:26px} .cardGrid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px} /* Karten schrumpfen NIE (V0.27): sonst gibt in einer vollen Reihe nur die Karte mit umbruchfähigem Inhalt („Neuer Charakter") nach und wird schmaler als die übrigen */ .cardGrid>.card{flex:0 0 auto} .card{width:186px;background:var(--panel2);border:1px solid var(--border);border-radius:12px; padding:16px 12px;cursor:pointer;transition:all .15s;text-align:center} .card:hover{border-color:var(--gold);transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 16px rgba(240,192,96,.15)} .card.locked{opacity:.38;pointer-events:none} .card.sel{border-color:var(--gold);box-shadow:0 0 16px rgba(240,192,96,.3)} .card .ic{font-size:38px;margin-bottom:8px} .card h3{color:var(--gold2);font-size:16px;margin-bottom:6px} .card p{font-size:11.5px;color:var(--dim);line-height:1.45;min-height:48px} .card .meta{margin-top:8px;font-size:11px;color:var(--txt)} .card .meta b{color:var(--gold)} /* ── V0.27: Karten-Karussell (Story/Kampagne) — eine Reihe, 4 sichtbar, Schritt 1 ── V0.28: gilt jetzt für JEDE Kachelreihe (Modus- und Kartenwahl teilen mkCarousel) ── */ .cardGrid.carousel{flex-wrap:nowrap;align-items:center;gap:8px} .carTrack{display:flex;gap:14px;overflow-x:hidden;scroll-snap-type:x mandatory; max-width:calc(4*186px + 3*14px);padding:8px 2px} /* exakt 4 Kacheln + 3 Lücken */ .carTrack .card{scroll-snap-align:start;flex:0 0 auto} .carBtn{font-size:22px;line-height:1;padding:10px 13px;flex:0 0 auto} /* Höchste geschaffte Schwierigkeit als Badge oben rechts auf der Kachel */ .card{position:relative} .diffBdg{position:absolute;top:7px;right:7px;display:inline-flex;align-items:center;gap:3px; font-size:9.5px;color:var(--gold2);background:rgba(14,16,28,.75); border:1px solid var(--border);border-radius:8px;padding:2px 6px;pointer-events:none} .diffBdg .svgi{width:11px;height:11px;margin:0} /* ── V0.27: Lagerfeuer-Charakterauswahl (scrHero) ── Der Screen ist DURCHSICHTIG (die 3D-Szene liegt dahinter im Canvas) und lässt Klicks durch (pointer-events:none); nur die Panels fangen Eingaben. */ #scrHero{background:none;pointer-events:none;justify-content:flex-start} #scrHero .title{margin-top:28px;text-shadow:0 2px 14px rgba(0,0,0,.85)} /* V0.28: breiter/höher — die Klasseninfo steckt jetzt IM Blatt statt im Tooltip */ #campSheet{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:330px; max-height:calc(100vh - 120px);overflow-y:auto; pointer-events:auto;background:var(--panel);border:1px solid var(--border); border-radius:12px;padding:15px 17px;text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.55)} /* Klassen-Infoblock (derselbe Inhalt wie der frühere Hover-Tooltip) */ #campSheet .campInfo{margin-top:11px;padding-top:10px;border-top:1px solid var(--border); font-size:11.5px;color:var(--dim);line-height:1.5} #campSheet .campInfo h5{color:var(--gold2);font-size:12.5px;margin-bottom:3px; display:flex;align-items:center;gap:5px} #campSheet .campInfo b{color:var(--txt)} #campSheet .campInfo .cmp{margin-top:7px;font-size:11px;line-height:1.7} #campSheet .campInfo .cmp .svgi{vertical-align:-.15em} #campSheet .campInfo .hint{margin-top:7px;font-size:10.5px;color:var(--dim)} #campSheet h3{color:var(--gold2);font-size:17px;margin-bottom:4px} #campSheet .role{font-size:10.5px;color:var(--gold2);letter-spacing:.4px;margin-bottom:7px; display:flex;align-items:center;gap:5px} #campSheet .meta{font-size:12px;color:var(--txt);line-height:1.6} #campSheet .meta b{color:var(--gold)} #campSheet .campBtns{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px} #campSheet .campBtns .btn{font-size:11px;padding:5px 8px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap} #campSheet .campBtns .btn .svgi{margin:0} #campBottom{position:absolute;bottom:26px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:auto} #campStart{font-size:17px;padding:12px 36px} #campBottom .row{display:flex;gap:8px} /* Charakter-Roster (§8.2): Karten mit Aktionsleiste, Verwaltung ohne laufendes Spiel */ .charCard{cursor:default} /* Klassensymbol ist ein SVG → Textmetrik der Emoji-Karten hier abschalten */ .charCard .ic{font-size:0;line-height:0;margin-bottom:10px} .charCard .role{font-size:10px;color:var(--gold2);letter-spacing:.4px;margin-bottom:4px} .charCard .meta .mIc{display:inline-flex;align-items:center;gap:3px;vertical-align:-.2em} .charCard .meta .svgi{width:13px;height:13px;vertical-align:baseline} .charBtns{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:10px} .charBtns .btn{font-size:11px;padding:5px 8px;min-width:0} .charOps{display:flex;gap:5px;justify-content:center;margin-top:6px} .charOps .btn{font-size:10px;padding:3px 7px;opacity:.8} /* Symbol + Beschriftung in EINER Zeile (inline-block würde zwischen beiden umbrechen) */ .charBtns .btn,.charOps .btn{display:inline-flex;align-items:center;justify-content:center; gap:5px;white-space:nowrap} .charBtns .btn .svgi,.charOps .btn .svgi{margin:0;vertical-align:baseline} .charCard.newChar{display:flex;flex-direction:column;justify-content:center; border-style:dashed;cursor:pointer;min-height:180px;color:var(--dim)} /* V0.27: Grid statt Flex — mit 5 Klassen brach die 5. Kachel (Priester) in eine eigene Zeile um und wurde auf volle Breite gestreckt; Grid-Zellen bleiben immer gleich breit. */ .clsPickRow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0} .clsPick{background:var(--panel2);border:1px solid var(--border); border-radius:10px;padding:10px 6px;cursor:pointer;text-align:center;font-size:12px} .clsPick .ci{font-size:0;line-height:0;margin-bottom:6px} .clsPick .ci .svgi.big{width:30px;height:30px} .clsPick.sel{border-color:var(--gold);box-shadow:0 0 10px rgba(240,192,96,.25)} #charNameIn{width:100%;box-sizing:border-box;margin-top:6px} .slot.reqLock{opacity:.65} /* ═══════════════════════════════════════════════════════════════ CSS 5. MODALE ═══════════════════════════════════════════════════════════════ */ .modal{position:fixed;inset:0;z-index:40;background:rgba(4,6,12,.6);display:flex; align-items:center;justify-content:center;padding:18px} /* Echtzeit-Menüs (§2.1): im laufenden Spiel bleibt die Schlacht hinter dem Hub sichtbar */ .modal.ingame{background:rgba(4,6,12,.28)} .modal.ingame .dialog{opacity:.95;max-width:820px} .dialog{background:var(--panel);border:1px solid var(--border);border-radius:14px; max-width:880px;width:100%;max-height:92vh;overflow-y:auto;padding:22px 26px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 18px 60px rgba(0,0,0,.7)} .dialog.narrow{max-width:520px} .dialog h2{color:var(--gold);font-size:21px;letter-spacing:1px;margin-bottom:4px} .dialog .sub{color:var(--dim);font-size:12.5px;margin-bottom:14px} .dialog .foot{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap} .dialog p.story{font-size:14.5px;line-height:1.7;color:var(--txt);margin:10px 0} .dialog .objective{background:rgba(240,192,96,.08);border:1px solid var(--border); border-radius:8px;padding:10px 14px;margin-top:12px;font-size:13.5px} .dialog .objective b{color:var(--gold2)} /* ── Tab-Leiste des Sammelmodals (Inventar/Ausrüstung/Talente/Paragon/…) ── */ #hubTabs,#setTabs{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:10px} .hubTab{position:relative;background:#161a2e;border:1px solid rgba(255,255,255,.12); color:var(--dim);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer; font-family:inherit;transition:all .13s;display:flex;align-items:center;gap:6px} .hubTab:hover{border-color:var(--gold);color:var(--txt)} .hubTab.sel{background:linear-gradient(180deg,#7a5a20,#5a3f14);border-color:var(--gold); color:var(--gold2);font-weight:600} .hubTab .bdg{background:var(--bad);color:#fff;border-radius:9px;font-size:9.5px; padding:0 5px;font-weight:700;min-width:15px;text-align:center} .hubPane{display:none} .hubPane.on{display:block} #hubRes{display:flex;gap:10px;justify-content:flex-end;margin-left:auto;align-items:center; font-size:12.5px;font-weight:700} /* ── Inventar & Ausrüstung ── */ #invGrid{display:grid;grid-template-columns:262px 1fr;gap:18px} #invEquip .slot,#invBag .slot{position:relative;background:#161a2e;border:1px solid rgba(255,255,255,.12); border-radius:8px;min-height:52px;padding:6px 8px;cursor:pointer;transition:border-color .12s} #invEquip .slot:hover,#invBag .slot:hover{border-color:var(--gold)} #invEquip .slot{display:flex;align-items:center;gap:8px;margin-bottom:7px} #invEquip .slot .si{font-size:20px;width:26px;text-align:center} #invEquip .slot .sn{font-size:11.5px;line-height:1.35;min-width:0;flex:1} #invEquip .slot .sn i{display:block;font-style:normal;color:var(--dim);font-size:10px} #invEquip .slot.petSlot{border-style:dashed} #invBag{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:7px; align-content:start} #invBag .slot{min-height:58px;font-size:11px;line-height:1.3;padding-right:38px} #invBag.empty{display:block} .r0{color:var(--rar0)} .r1{color:var(--rar1)} .r2{color:var(--rar2)} .r3{color:var(--rar3)} .r4{color:var(--rar4)} .r5{color:var(--rar5)} .r6{color:var(--rar6)} .slot .better{position:absolute;top:3px;right:6px;color:var(--good);font-size:11px; font-weight:700;text-shadow:0 0 8px rgba(122,224,138,.6)} .slot .worse{position:absolute;top:3px;right:6px;color:var(--bad);font-size:11px;font-weight:700} .slot.br0{border-color:rgba(184,184,196,.35)} .slot.br1{border-color:rgba(122,224,138,.5)} .slot.br2{border-color:rgba(90,160,255,.55)} .slot.br3{border-color:rgba(192,122,240,.6)} .slot.br4{border-color:rgba(255,154,48,.7);box-shadow:0 0 9px rgba(255,154,48,.20)} .slot.br5{border-color:rgba(255,74,74,.75);box-shadow:0 0 11px rgba(255,74,74,.24)} .slot.br6{border-color:rgba(255,210,63,.85);box-shadow:0 0 14px rgba(255,210,63,.30)} .slot .setTag{position:absolute;bottom:3px;right:6px;font-size:9px;color:var(--rar6)} #invStats{grid-column:1/3;background:#12162a;border-radius:8px;padding:10px 14px; font-size:12px;color:var(--dim);line-height:1.7} #invStats b{color:var(--txt)} #invStats .setLine{color:var(--rar6);margin-top:4px;display:block} #invFilterRow{grid-column:1/3;display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:12px;color:var(--dim);background:#12162a;border-radius:8px;padding:9px 14px} #invFilterRow select,#invFilterRow input{background:#1c2138;color:var(--txt); border:1px solid var(--border);border-radius:6px;padding:4px 7px;font-size:12px;font-family:inherit} /* Ausrüstungs-Übersicht (Slots + Begleiter + Set-Fortschritt) */ #eqGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:9px} #eqGrid .slot{position:relative;background:#161a2e;border:1px solid rgba(255,255,255,.12); border-radius:8px;padding:8px 10px;cursor:pointer;transition:border-color .12s; display:flex;align-items:center;gap:9px;min-height:60px} #eqGrid .slot:hover{border-color:var(--gold)} #eqGrid .slot .si{font-size:23px;width:28px;text-align:center} #eqGrid .slot .sn{font-size:11.5px;line-height:1.35;min-width:0;flex:1} #eqGrid .slot .sn i{display:block;font-style:normal;color:var(--dim);font-size:10px} #eqGrid .setBox{grid-column:1/-1;background:#12162a;border:1px solid rgba(255,255,255,.08); border-radius:8px;padding:10px 14px;font-size:12px;color:var(--dim);line-height:1.6} #eqGrid .setBox b{color:var(--rar6)} /* Aufwertungs-Werkbank (Waffe +N für Gold) */ #upgBox{background:#12162a;border:1px solid rgba(255,255,255,.08);border-radius:8px; padding:11px 14px;margin-top:12px;font-size:12.5px} #upgBox h4{color:var(--gold2);font-size:13px;margin-bottom:7px} #upgBox .urow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #upgBox .pl{font-size:11.5px;color:var(--dim)} .elemChip{display:inline-block;border-radius:5px;padding:1px 6px;font-size:10.5px; border:1px solid currentColor;margin-left:5px} #tip{position:fixed;z-index:60;background:var(--panel2);border:1px solid var(--border); border-radius:8px;padding:10px 13px;font-size:12px;pointer-events:none;max-width:300px; line-height:1.55;box-shadow:0 8px 26px rgba(0,0,0,.6)} /* Touch-Inspect (§2.3): angepinnter Tooltip mit Aktionsknöpfen — nur dann klickbar */ #tip.pinned{pointer-events:auto} #tip .tipBtns{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} #tip .tipBtns .btn{font-size:11px;padding:5px 9px} #tip h5{font-size:13px;margin-bottom:3px} #tip .cmp{margin-top:6px;border-top:1px solid rgba(255,255,255,.1);padding-top:6px;color:var(--dim)} #tip .up{color:var(--good)} #tip .dn{color:var(--bad)} #tip .neu{color:var(--dim)} #tip .hint{margin-top:6px;color:var(--dim);font-size:11px} #tip .setB{color:var(--rar6);margin-top:4px;display:block;font-size:11px} /* ── Talente ── */ #talGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:start} .talBranch{background:#141830;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 7px} .talBranch h4{color:var(--gold2);text-align:center;font-size:13.5px;margin-bottom:9px} /* ── V0.28: Talentbaum als echtes Gitter mit Verbindungslinien ──────────────── 5 Spalten × 6 Reihen; Löcher bleiben leer, sodass Rautenformen entstehen. Eine Linie (.talLink) ist ein eigenes Gitterelement, das vom Vorgänger BIS zum Knoten spannt (l = Vorgänger links oben, r = rechts oben, v = senkrecht darüber). `--x`/`--y` schieben ihre Enden auf die Zellmittelpunkte; die Diagonale ist die Kante eines Farbverlaufs und behält dadurch ihre Strichstärke, egal wie breit/hoch das aufgespannte Kästchen ist. ACHTUNG: die Verlaufsrichtung ist die GEGENdiagonale — bei `to top right` verläuft die 50-%-Kante von oben LINKS nach unten rechts. */ /* minmax(0,1fr): ohne die 0-Untergrenze wären die Spalten so breit wie ihr längstes Wort — drei Zweige à 5 Spalten passten dann nicht ins Modal. grid-auto-rows:1fr hält alle Reihen gleich hoch — sonst zielen die Linien (die mit gleichen Reihenhöhen rechnen) an den Knoten vorbei. */ .talTree{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 3px; grid-auto-rows:1fr;align-items:stretch} /* Im Baum sind die Zellen schmal (5 Spalten je Zweig) → kompaktere Typografie */ .talTree .talNode{padding:4px 5px;min-height:34px} .talTree .talNode .tn{font-size:9.5px;line-height:1.2;padding-right:15px; hyphens:auto} /* Umbruch an Leerzeichen, nicht mitten im Wort */ .talTree .talNode .tr{font-size:8.5px;top:3px;right:4px} .talCell{position:relative;display:flex} .talCell .talNode{flex:1} .talLink{position:relative;pointer-events:none;z-index:0; --lc:rgba(255,255,255,.16)} .talLink.on{--lc:rgba(240,192,96,.8)} .talLink::before{content:'';position:absolute;left:var(--x,50%);top:var(--y,50%); width:calc(100% - 2 * var(--x,50%));height:calc(100% - 2 * var(--y,50%))} .talLink.l::before{background:linear-gradient(to top right, transparent calc(50% - 1.1px),var(--lc) calc(50% - .55px), var(--lc) calc(50% + .55px),transparent calc(50% + 1.1px))} .talLink.r::before{background:linear-gradient(to bottom right, transparent calc(50% - 1.1px),var(--lc) calc(50% - .55px), var(--lc) calc(50% + .55px),transparent calc(50% + 1.1px))} .talLink.v::before{width:2px;margin-left:-1px;background:var(--lc)} .talRow{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:5px} .talRow.locked{opacity:.4} .talRowHdr{font-size:9.5px;color:var(--dim);text-align:center;margin:6px 0 3px; letter-spacing:.5px;text-transform:uppercase} .talNode{background:#1c2138;border:1px solid rgba(255,255,255,.12);border-radius:7px; padding:5px 7px;cursor:pointer;transition:all .12s;position:relative;min-height:38px; z-index:1} .talNode:hover{border-color:var(--gold)} .talNode.max{border-color:var(--gold);background:#2a2c48} /* Wählbar = dezent hervorgehoben, damit der offene Pfad sofort ins Auge fällt */ .talNode.open{border-color:rgba(240,192,96,.5);box-shadow:0 0 0 1px rgba(240,192,96,.14)} .talNode.key{border-color:rgba(192,122,240,.55);background:#221a38} .talNode.key.max{border-color:var(--rar3);box-shadow:0 0 10px rgba(192,122,240,.3)} /* Gesperrt: gedämpft, aber DECKEND (und deshalb NACH .key) — mit `opacity` schimmerten die Verbindungslinien mitten durch den Knoten hindurch. */ .talNode.locked,.talNode.locked:hover{background:#171a2b;color:#6a7191; border-color:rgba(255,255,255,.08);box-shadow:none;cursor:default} .talNode.locked .tr{color:#7a7563} .talNode .tn{font-size:11px;font-weight:600;line-height:1.25;padding-right:24px} .talNode .tr{position:absolute;top:5px;right:6px;font-size:9.5px;color:var(--gold)} /* Fähigkeits-Mutatoren (Runen) */ #mutBox{background:#141830;border:1px solid rgba(255,255,255,.1);border-radius:10px; padding:12px;margin-bottom:14px} #mutBox h4{color:var(--gold2);font-size:13.5px;margin-bottom:4px} #mutBox .sub2{font-size:11px;color:var(--dim);margin-bottom:9px} .mutSkill{margin-bottom:11px} .mutSkill .mh{font-size:12px;color:var(--txt);margin-bottom:5px;display:flex; align-items:center;gap:6px} .mutRow{display:grid;grid-template-columns:1fr 1fr;gap:7px} .mutOpt{background:#1c2138;border:1px solid rgba(255,255,255,.12);border-radius:8px; padding:8px 10px;cursor:pointer;transition:all .12s} .mutOpt:hover{border-color:var(--gold)} .mutOpt.sel{border-color:var(--rar3);background:#251d3c;box-shadow:0 0 10px rgba(192,122,240,.25)} .mutOpt .mn{font-size:12px;font-weight:600;color:var(--rar3)} .mutOpt.sel .mn{color:#d9b3ff} .mutOpt .md{font-size:10.5px;color:var(--dim);line-height:1.4;margin-top:2px} /* ── Paragon ── */ #parHead{background:#141830;border:1px solid rgba(255,255,255,.1);border-radius:10px; padding:12px 14px;margin-bottom:13px} #parHead .pl{display:flex;align-items:baseline;gap:10px;margin-bottom:7px} #parHead .pl b{font-size:26px;color:var(--xp);text-shadow:0 0 16px rgba(161,0,255,.45)} #parHead .pl span{font-size:12.5px;color:var(--dim)} #parGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px} .parNode{background:#1c2138;border:1px solid rgba(255,255,255,.12);border-radius:8px; padding:8px 10px;cursor:pointer;transition:all .12s;position:relative} .parNode:hover{border-color:var(--xp)} .parNode .pn{font-size:12px;font-weight:600} .parNode .pd{font-size:10.5px;color:var(--dim);margin-top:2px} .parNode .pr{position:absolute;top:7px;right:9px;font-size:11px;color:var(--xp);font-weight:700} .parNode.off{opacity:.45} /* ── Karten-Mutatoren (Herausforderungen) ── */ #mutCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px; margin-top:6px;text-align:left} .mutCard{position:relative;background:var(--panel2);border:1px solid rgba(255,255,255,.12); border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .13s} .mutCard:hover{border-color:var(--gold);transform:translateY(-2px)} .mutCard.sel{border-color:var(--rar4);background:#2a2038; box-shadow:0 0 14px rgba(255,154,48,.28)} .mutCard.dis{opacity:.35;pointer-events:none} /* V0.27: Sperrhinweis — Herausforderungen erst nach dem ersten Kampagnen-Abschluss */ #mutLock{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px; color:var(--gold2);font-size:13px;padding:9px;border:1px dashed var(--border); border-radius:10px;background:rgba(14,16,28,.55)} .mutCard .mi{font-size:20px} .mutCard h5{color:var(--gold2);font-size:12.5px;margin:3px 0} .mutCard p{font-size:10.5px;color:var(--dim);line-height:1.4} .mutCard .rw{position:absolute;top:8px;right:10px;font-size:11px;color:var(--rar4);font-weight:700} #mutReward{margin-top:16px;font-size:15px} #mutReward b{color:var(--rar4);font-size:19px} /* ── Multiplayer-Lobby ── */ #mpBox textarea{width:100%;height:74px;background:#0e1122;color:var(--txt); border:1px solid var(--border);border-radius:8px;padding:8px;font-size:11px;resize:vertical; font-family:ui-monospace,monospace;-webkit-user-select:text;user-select:text} #mpBox .row{display:flex;gap:10px;margin:8px 0;flex-wrap:wrap;align-items:center} #mpBox label{font-size:12.5px;color:var(--dim)} #mpBox select{background:#1c2138;color:var(--txt);border:1px solid var(--border); border-radius:6px;padding:5px 8px;font-size:13px} #mpBox input{background:#1c2138;color:var(--txt);border:1px solid var(--border); border-radius:6px;padding:5px 8px;font-size:13px;-webkit-user-select:text;user-select:text} #mpBox code{background:#0e1122;padding:2px 6px;border-radius:4px;font-size:11.5px; color:var(--gold2);-webkit-user-select:text;user-select:text} .srvRow{display:flex;justify-content:space-between;align-items:center;background:#141830; border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:6px; margin:5px 0;font-size:12.5px} #srvList{max-height:150px;overflow-y:auto;margin-top:4px} .mpSection{background:#12162a;border:1px solid rgba(255,255,255,.07);border-radius:10px; padding:12px 14px;margin:10px 0} .mpSection h4{color:var(--gold2);font-size:13px;margin-bottom:8px;letter-spacing:.4px} /* Map-Editor: Panels über der 3D-Vorschau, Mitte klickt in die Welt */ #editorUI{position:fixed;inset:0;z-index:30;pointer-events:none} #editorUI .panel{pointer-events:auto} .edPanel{position:absolute;top:14px;left:14px;width:250px;padding:12px 14px;max-height:calc(100vh - 28px);overflow-y:auto} .edPanel h4,.edListPanel h4{color:var(--gold2);font-size:14px;margin-bottom:8px} .edRow{margin:7px 0} .edRow label{display:block;font-size:11px;color:var(--dim);margin-bottom:3px} .edRow input,.edRow select{width:100%} .edPanel .edChk{display:flex;align-items:center;gap:7px;cursor:pointer; color:var(--txt);font-size:12.5px;margin-bottom:0} .edPanel .edChk input{width:auto} /* V0.28: Terrain-Kachelreihe (ersetzt das */ .mpSet .opt .themeRow{grid-template-columns:1fr 1fr} .mpRow2{flex:1;min-width:230px} .srvRow .who{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srvRow .btn.kick{margin-left:8px;padding:2px 8px;line-height:1.4} .seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden} .seg button{background:#161a2e;border:0;color:var(--dim);padding:9px 20px;font-size:13.5px; cursor:pointer;font-family:inherit;transition:all .15s} .seg button.sel{background:linear-gradient(180deg,#7a5a20,#5a3f14);color:var(--gold2)} .heroChip{display:flex;flex-direction:column;align-items:center;gap:2px;width:76px; padding:8px 4px;background:#161a2e;border:1px solid rgba(255,255,255,.12); border-radius:9px;cursor:pointer;font-size:11px;color:var(--dim);transition:all .12s} .heroChip .i{font-size:22px;line-height:1.1} .heroChip:hover{border-color:var(--gold)} .heroChip.sel{border-color:var(--gold);background:#2e3452;color:var(--gold2); box-shadow:0 0 10px rgba(240,192,96,.25)} .codeBig{display:inline-block;background:#0e1122;border:1px dashed var(--border); border-radius:8px;padding:5px 16px;font-size:26px;letter-spacing:7px;color:var(--gold); font-weight:700;-webkit-user-select:text;user-select:text} #chatLog{background:#0e1122;border:1px solid rgba(255,255,255,.08);border-radius:8px; height:110px;overflow-y:auto;padding:6px 9px;font-size:12.5px;line-height:1.55; margin-bottom:6px;-webkit-user-select:text;user-select:text} #chatLog b{color:var(--gold2)} .chatRow{display:flex;gap:6px} .chatRow input{flex:1} #gameChat{width:100%;pointer-events:none;font-size:12.5px;overflow:hidden} #gameChat .cmsg{background:rgba(14,16,28,.78);border-radius:6px;padding:3px 9px; margin-bottom:3px;border:1px solid rgba(240,192,96,.15)} #gameChat b{color:var(--gold2)} #gameChatIn{position:fixed;left:14px;bottom:70px;z-index:12;width:280px; background:#1c2138;color:var(--txt);border:1px solid var(--gold);border-radius:7px; padding:6px 10px;font-size:13px;-webkit-user-select:text;user-select:text} #verTag{position:fixed;right:13px;bottom:9px;z-index:31;color:var(--dim); font-size:11.5px;letter-spacing:.6px;pointer-events:none} /* ── Audio-Mixer ── */ .mixRow{display:flex;align-items:center;gap:12px;margin:10px 0} .mixRow label{width:90px;font-size:13.5px;color:var(--dim)} .mixRow input[type=range]{flex:1;accent-color:var(--gold)} .mixRow span{width:40px;text-align:right;font-size:12px;color:var(--txt)} /* ── Zusammenfassung ── */ #sumStats{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin:12px 0; font-size:13.5px;text-align:left} #sumStats b{color:var(--gold2)} /* Mehrspieler-Zusammenfassung: MVP-Pose + Spieler-Tabelle (überspannen das Grid) */ .mvpBox{grid-column:1/-1;text-align:center;padding:14px 10px 10px;border:1px solid var(--gold); border-radius:12px;background:radial-gradient(ellipse at 50% 0%,rgba(240,192,96,.18),rgba(240,192,96,.04))} .mvpBox .mvpCrown{color:var(--gold);font-size:12px;letter-spacing:2px;font-weight:bold} .mvpBox .mvpIcon{font-size:58px;line-height:1.15;display:inline-block; filter:drop-shadow(0 0 14px rgba(240,192,96,.55));animation:mvpPose 1.5s ease-in-out infinite} .mvpBox .mvpName{font-size:17px;font-weight:bold;color:var(--gold2)} .mvpBox .mvpSub{font-size:12px;color:var(--dim)} @keyframes mvpPose{ 0%,100%{transform:scale(1) rotate(-5deg)} 25%{transform:scale(1.22) rotate(5deg) translateY(-5px)} 50%{transform:scale(1.04) rotate(-3deg)} 75%{transform:scale(1.18) rotate(7deg) translateY(-7px)}} table.mpSum{grid-column:1/-1;width:100%;border-collapse:collapse;font-size:13px} table.mpSum th{color:var(--dim);font-weight:normal;font-size:11.5px;padding:3px 8px;text-align:right} table.mpSum td{padding:4px 8px;text-align:right;border-top:1px solid rgba(255,255,255,.07)} table.mpSum th:first-child,table.mpSum td:first-child{text-align:left} table.mpSum tr.mvp td{color:var(--gold2);font-weight:bold} /* ═══ Responsive V0.16 (§1): zentrale UI-Skala + Safe-Areas + Sheet-Modus ═══ */ :root{ /* --ui: aus der kurzen Viewport-Kante abgeleitet; --uiScale: manuell (Einstellungen) */ --ui:clamp(.72,min(100vw/1280,100vh/720),1.15); --uiScale:1; --uiEff:calc(var(--ui)*var(--uiScale)); --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px); } /* HUD skaliert über die Schrift-Basis (Mindestgröße 11px bleibt gewahrt) */ #hud{font-size:max(11px,calc(13px*var(--uiEff)))} /* V0.27: --uiScale wirklich anwenden — fast alle Maße stehen als feste px in den Panels, eine Schriftbasis allein skaliert daher nichts. `zoom` skaliert Layout samt px-Maßen; bewusst NICHT auf body (Canvas/Viewport-Einheiten blieben sonst nicht deckungsgleich), sondern nur auf die UI-Wurzeln. Standard 1 = unverändert. */ #hud,#touchUI,.screen .inner,.modal .dialog,#toasts,#banner,#bossBar,#deathOverlay, .galAnim,.galNav,.galX{zoom:var(--uiScale)} #hudLeft{top:calc(14px + var(--sat));left:calc(14px + var(--sal))} #hudRight{top:calc(14px + var(--sat));right:calc(14px + var(--sar))} #hudWave{top:calc(14px + var(--sat))} #hudSkills{left:calc(14px + var(--sal));bottom:calc(14px + var(--sab))} #hudBuild{bottom:calc(14px + var(--sab));max-width:calc(100vw - 380px); overflow-x:auto;overscroll-behavior-x:contain} #hudTower{right:calc(14px + var(--sar));bottom:calc(22px + var(--mmW)/2 + var(--sab))} #minimap{right:calc(14px + var(--sar));bottom:calc(14px + var(--sab))} #toasts{right:calc(14px + var(--sar))} #verTag{right:calc(13px + var(--sar));bottom:calc(9px + var(--sab))} #bossBar{top:calc(10px + var(--sat))} #joy{left:calc(20px + var(--sal));bottom:calc(20px + var(--sab))} .modal{padding:calc(14px + var(--sat)) calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal))} /* Animierte Balken: nur transform animiert (kein Layout-Thrash) */ .bar i{will-change:transform} /* Touch: effektive Trefferflächen >= 44px (Optik bleibt klein — Pseudo-Element) */ body.touch .btn,body.touch .twrBtn,body.touch .skill,body.touch .hubTab, body.touch .talNode,body.touch .slot{position:relative} body.touch .btn::after,body.touch .hubTab::after{ content:'';position:absolute;inset:min(0px,calc((100% - 44px)/2)) } body.touch .talNode{min-height:44px} body.touch .skill{min-width:44px;min-height:44px} /* Drag & Drop (§1.5): Geist folgt dem Finger/Zeiger, Ziele leuchten auf */ #dragGhost{position:fixed;z-index:70;pointer-events:none;font-size:22px; transform:translate(-50%,-50%);filter:drop-shadow(0 4px 8px #000)} .slot.dropOk{outline:2px solid var(--good);outline-offset:-2px} /* Schmale Geräte: Hub als Vollbild-Sheet (§1.4), Talente einspaltig */ @media (max-width:980px){ #modalHub .dialog{max-width:none;width:100%;height:100%;max-height:none; border-radius:0;padding:12px 12px calc(12px + var(--sab)); backdrop-filter:none;-webkit-backdrop-filter:none} #hubTabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap; position:sticky;top:0;background:var(--panel);z-index:2; overscroll-behavior-x:contain} #talGrid{grid-template-columns:1fr !important;display:grid} .talBranch{width:auto} #hudRight .btn{padding:6px 8px;font-size:13px} #invGrid,#invWrap{grid-template-columns:1fr} } /* Mobile: teure Effekte aus (§1.4/1.6) */ @media (max-width:980px),(pointer:coarse){ .dialog{backdrop-filter:none;-webkit-backdrop-filter:none} } /* Mittlere Fenster: die 7 Fähigkeits-Slots (V0.36: +Wellen-Slot) müssen VOR der zentrierten Bauleiste enden — unter 1420 px schrumpfen sie eine Stufe */ @media (max-width:1420px){ .skill{width:48px;height:48px} .skill .ic{font-size:19px} .skill .nm{display:none} } /* ── Kompakt-Layout: ab hier darf sich NICHTS mehr überlappen (bis 1100×700) ── */ @media (max-width:1250px), (max-height:760px){ :root{--mmW:280px} #hudLeft{width:212px} #hudHero{padding:8px 10px} #hudRes{padding:6px 8px} #hudRes .chip b{font-size:12.5px} #hudRes .chip i{font-size:8.5px} #hudWave{min-width:270px;padding:6px 12px} .twrBtn{width:66px;padding:8px 3px 4px} .twrBtn .nm{font-size:8.5px} .twrBtn .co{font-size:9px;gap:3px} #hudSkills{gap:5px} .skill{width:44px;height:44px} .skill .ic{font-size:17px} .skill .nm{display:none} #hudTower{width:206px;padding:8px 10px} #hudTower .st{font-size:11px} .tgtBtn{font-size:9px;padding:2px 4px} #scrMain h1{font-size:42px} .card{width:160px} .carTrack{max-width:calc(4*160px + 3*14px)} #banner .big{font-size:34px} #hubTabs{gap:4px;padding-bottom:8px;margin-bottom:10px} .hubTab{padding:6px 10px;font-size:12px} } @media (max-height:720px){ #hudRes{padding:5px 8px} /* Toasts dürfen das Verteidigungs-Panel (rechts unten) nicht erreichen */ #toasts{top:78px;max-width:236px} .toast{font-size:11px;padding:5px 9px;line-height:1.35} #hudRes .bar.du{height:5px;margin-top:4px} #hudHero .bar{height:12px;margin-top:4px} #hudHero .bar.xp{height:11px} #hudHero .portrait{width:34px;height:34px;font-size:19px} #hudWave{padding:5px 12px} #hudWave .crysRow .bar{height:9px} /* Verteidigungs-Panel eng schnüren: es ist das höchste HUD-Element */ #hudTower{bottom:calc(18px + var(--mmW)/2 + var(--sab));width:204px;padding:7px 9px} #minimap{bottom:calc(10px + var(--sab))} #hudTower h4{font-size:12.5px;margin-bottom:3px} #hudTower .st{font-size:10.5px;line-height:1.35} #hudTower .bar{height:8px;margin:4px 0 1px} #hudTower .acts{gap:5px;margin-top:6px} #hudTower .acts .btn{padding:3px 8px;font-size:11.5px} #twTargets{margin-top:6px;padding-top:5px} #twTargets .tt{margin-bottom:3px;font-size:10px} #twGrid{gap:3px} .tgtBtn{padding:2px 4px;font-size:9px} #hudBuild{bottom:10px;padding:6px} #hudSkills{bottom:10px} .skill{width:44px;height:44px} #gameChat{top:238px} } /* Geringe Breite (1100 px): rechte Spalte und Bauleiste zusammenrücken */ @media (max-width:1160px){ #hudMp{width:168px} #hudTower{width:192px} .twrBtn{width:60px} #hudWave{min-width:236px} } /* ── Telefon-Layout ── */ @media (max-width:980px){ #hudLeft{width:168px} #hudHero{padding:6px 8px} #hudHero .portrait{width:30px;height:30px;font-size:17px} #hudHero .who b{font-size:12px} #hudWave{min-width:225px;padding:4px 10px} #hudWave .wl{font-size:12.5px} #hudRight .btn{padding:5px 9px;font-size:12px} .twrBtn{width:50px;padding:5px 2px 4px} .twrBtn .nm{display:none} .twrBtn .ic{font-size:17px} #hudTower{width:165px;font-size:11px} /* V0.37: Hauptmenü kompakt — Titel + 5 Knöpfe passen ohne Scrollen aufs Telefon */ .screen{padding:14px} h2.title{font-size:17px;margin-bottom:10px} .screen .backRow{margin-top:14px} #scrMain h1{font-size:32px;letter-spacing:5px} #scrMain .tag{margin-bottom:18px;font-size:12px;letter-spacing:2px} #scrMain .stack{gap:8px} #scrMain .stack .btn{width:250px;font-size:14px;padding:9px} .card{width:138px;padding:10px 8px} /* V0.37: Karussell auf voller Breite mit 3 sichtbaren Kacheln (statt 4, die rechts abgeschnitten wurden) — der Track flext bis zur 3er-Grenze */ .cardGrid.carousel{width:100%;gap:6px} .carTrack{flex:1 1 auto;max-width:calc(3*138px + 2*14px)} .carBtn{font-size:18px;padding:8px 10px} .card .ic{font-size:28px} .charCard .ic .svgi.big{width:32px;height:32px} .card p{font-size:10px;min-height:38px} #banner .big{font-size:24px;letter-spacing:2px} .dialog{padding:14px 14px;max-height:94vh} .clsPickRow{grid-template-columns:repeat(3,minmax(0,1fr))} /* 3+2, Zellen bleiben gleich breit */ #talGrid{grid-template-columns:1fr;gap:8px} #invGrid{grid-template-columns:1fr} #invStats{grid-column:auto} #toasts{top:70px;max-width:250px} .toast{font-size:11px;padding:6px 10px} /* V0.37: Lagerfeuer — schmaleres Werteblatt; die Kamera rückt zugleich näher heran (27-camp.js, Schwelle 980), damit die Helden groß genug sind */ #scrHero .title{margin-top:8px;font-size:15px} #campSheet{right:8px;width:200px;padding:9px 11px;max-height:calc(100vh - 90px)} #campSheet h3{font-size:14px} #campSheet .meta{font-size:11px;line-height:1.5} #campSheet .campInfo{margin-top:7px;padding-top:6px;font-size:10.5px;line-height:1.4} #campSheet .campInfo .cmp{font-size:10px;line-height:1.55} #campSheet .campBtns .btn{font-size:10px;padding:4px 6px} #campBottom{bottom:10px;gap:5px} #campStart{font-size:14px;padding:8px 24px} /* V0.37: Herausforderungen (#scrMut) kompakt — nichts wird mehr abgeschnitten */ #scrMut .sub{font-size:11px} #mutCards{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:7px} .mutCard{padding:7px 9px} .mutCard p{font-size:9.5px} #mutReward{margin-top:8px;font-size:13px} #mutReward b{font-size:15px} #scrMut .backRow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap} /* V0.37: Story-Modal — Text scrollt selbst, der Weiter-Knopf bleibt erreichbar */ #modalStory .dialog{padding:14px 16px} #modalStory h2{font-size:17px} .dialog p.story{font-size:13px;line-height:1.55;max-height:56vh;overflow-y:auto} } /* ═══ V0.16: Telefon-Kompaktstufe — steht BEWUSST am CSS-Ende, damit sie die älteren Kompakt-Media-Queries überschreibt (gleiche Spezifität → letzte gewinnt) ═══ */ /* ── Kleine Telefone (§1.1): kompakte Reihen — nichts überlappt bis hinab zu 568×320 ── */ @media (max-width:820px){ :root{--mmW:212px} #hudWave{min-width:0;max-width:34vw;padding:3px 8px} #mmInfo{display:none} /* auf Telefonen ist die Karte zu schmal für die Infozeile */ #hudMuts{display:none !important} #hudRight{gap:4px} #hudRight .btn{padding:4px 6px;font-size:11px} #btnSave,#btnKeys{display:none} /* Autosave läuft; Tastenpanel steckt im Pausenmenü */ #hudSkills{gap:5px} .skill{width:42px;height:42px} /* Bauleiste rückt nach links über die Fähigkeitsleiste (statt zentriert) */ #hudBuild{left:calc(14px + var(--sal));transform:none; bottom:calc(68px + var(--sab));max-width:calc(100vw - 200px);padding:4px} .twrBtn{width:46px} #hudTower{width:150px;max-height:min(52vh,calc(100vh - 200px - var(--mmW)/2)); overflow-y:auto;font-size:10.5px;padding:6px 8px} #hudLeft{width:150px} #gameChat{display:none} /* Galerie-Animationswahl: eine Zeile statt drei — sonst deckt sie den Kopf des Modells zu (der Dialog nimmt bereits 54vh). */ .galAnim{gap:3px;padding:4px 6px;max-width:74vw} .galAnim .btn{font-size:10px;padding:3px 6px;gap:3px} .galNav{width:38px;height:38px;font-size:14px} #galPrev{left:calc(8px + var(--sal))} #galNext{right:calc(8px + var(--sar))} .galX{width:32px;height:32px;font-size:13px;right:calc(8px + var(--sar))} } /* Touch + flaches Fenster: oben rechts stapeln sich Karte, Meldungen und das nach oben gewachsene Verteidigungs-Panel — dort weicht die Karte, und der Toast-Stapel rückt wieder unter die Knopfleiste. */ @media (max-height:560px){ body.touch #minimap{display:none !important} body.touch #toasts{top:calc(64px + var(--sat))} /* V0.37: sehr flache Bildschirme — Hauptmenü und Story noch eine Stufe enger */ #scrMain h1{font-size:26px;letter-spacing:4px} #scrMain .tag{margin-bottom:10px;font-size:11px;letter-spacing:2px} #scrMain .stack{gap:6px} #scrMain .stack .btn{width:220px;font-size:12.5px;padding:7px} .screen{padding:10px} h2.title{margin-bottom:8px} .dialog p.story{max-height:44vh} } /* V0.37.1: EXTREM flache Bildschirme (568×320-Klasse) — Slots eine Stufe kleiner, die Rand-Spalte rückt zusammen und der ⚒-Bauknopf knickt schräg nach INNEN ab (senkrecht weiter stieße er oben in die eingeklappte ☰-Leiste). Normale Telefone (≥ ~390 px Höhe) behalten die gerade 56-px-Linie. */ @media (max-height:380px){ body.touch #hudSkills .skill{width:48px;height:48px} body.touch #hudSkills .skill .ic{font-size:19px} body.touch #hudWave{height:48px;padding:2px 10px} /* bleibt slotgleich hoch */ body.touch #hudWave .wl{font-size:12.5px} body.touch #hudSkills .skill:nth-child(6){bottom:calc(196px + var(--sab))} body.touch #btnBuildTgl{width:48px;height:48px;font-size:21px; right:calc(76px + var(--sar));bottom:calc(236px + var(--sab))} body.touch #hudBuild{right:calc(132px + var(--sar));bottom:calc(232px + var(--sab))} } @media (max-height:420px){ /* Unter 420 px Höhe bleibt für die Karte kein Platz mehr (Panel + Bauleiste) */ #minimap{display:none !important} #hudTower{bottom:calc(10px + var(--sab))} #hudLeft{width:148px} #hudHero{padding:4px 6px} #hudRes{padding:3px 6px} #hudRes .chip i{display:none} #hudWave{padding:2px 8px} #toasts{display:none} /* zu wenig Platz — Banner/Feedback übernehmen */ #hudTower{max-height:46vh} #bossBar{width:min(300px,42vw)} }