/* ============================================================================ * WORLD · css/cyberlook.css * Zweites, zusätzliches UI-Theme (User-Vorgabe 2026-08-24). "Classic" bleibt * exakt das bisherige world.css — diese Datei fügt NICHTS an neuen Elementen * hinzu und ändert KEINE bestehende Klasse in world.css, sie überschreibt nur * gescoped über [data-ui-theme="cyberlook"] auf . * * ⚠⚠ JEDE REGEL HIER BEGINNT MIT [data-ui-theme="cyberlook"]. Eine Regel ohne * diesen Scope würde Classic mitverändern — das ist die eine Erfindung, die * dieses Theme nicht machen darf. Die einzige Ausnahme im ganzen Projekt ist * .wld-gfx-options--theme in world.css selbst (dort begründet: die beiden * Theme-Karten müssen in BEIDEN Themes sichtbar/anklickbar sein). * * Reihenfolge: Tokens → Scrollbars → Foundation (Buttons/Inputs/Toggle/Tabs/ * Popup-Basis/Notifications) → Game-UI (HUD/Hotbar/Panels) → Motion → * "Skill Editor 2.0" (Admin, siehe unten). * * Absichtlich NICHT angefasst (siehe Plan): native Tooltips (kein bestehendes * System zum Andocken), Buffs/Debuffs (existieren in Classic nicht), Admin- * Oberflächen allgemein (.wld-qadmin bekommt höchstens beiläufig etwas von * der Foundation ab, kein dedizierter Durchgang) - EINZIGE Ausnahme seit * 2026-09-09: #wld-skill-admin ("Skill Editor 2.0", User-Vorgabe, ganz am * Ende dieser Datei), bewusst NUR dieser eine Editor, nicht .wld-qadmin * generell. * ========================================================================== */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ [data-ui-theme="cyberlook"]{ --cyber-bg-0:#07080d; --cyber-bg-1:#0c0e16; --cyber-bg-2:#12141f; --cyber-bg-3:#1a1d2c; --cyber-line:#232840; --cyber-line-bright:rgba(171,39,232,.45); --cyber-text:#e8ebf7; --cyber-muted:#8890b0; --cyber-purple:#AB27E8; --cyber-purple-bright:#c85cff; --cyber-purple-dim:#6d1b96; --cyber-cyan:#22e0ff; --cyber-cyan-dim:#0f7f96; /* HP bleibt rot-lastig, EXP bleibt warm-gold: die Bedeutung ("Gefahr", "Fortschritt/Belohnung") darf sich mit dem Theme nicht ändern, sonst verliert das HUD seine über Jahre gelernte Farbsprache. */ --cyber-danger:#ff3b5c; --cyber-danger-dim:#7a0a1e; --cyber-gold:#ffcf4d; --cyber-radius-sm:2px; --cyber-radius-md:4px; --cyber-radius-lg:6px; --cyber-cut-sm:7px; --cyber-cut-md:13px; --cyber-cut-lg:19px; --cyber-surface:linear-gradient(145deg,rgba(20,24,39,.9),rgba(7,8,13,.82)); --cyber-surface-strong:linear-gradient(145deg,rgba(22,25,42,.97),rgba(6,7,12,.94)); --cyber-shadow-panel:0 28px 80px rgba(0,0,0,.78),0 0 0 1px rgba(34,224,255,.06) inset,0 0 42px rgba(171,39,232,.12); --cyber-glow-purple:0 0 16px rgba(171,39,232,.55); --cyber-glow-cyan:0 0 14px rgba(34,224,255,.5); --ui-font-display:'Rajdhani',var(--wld-font); --ui-motion-fast:150ms; --ui-motion-med:250ms; } /* ── Scrollbars (global, ein Rule-Block reicht) ────────────────────────── */ [data-ui-theme="cyberlook"]{scrollbar-color:var(--cyber-purple-dim) rgba(0,0,0,.3)} [data-ui-theme="cyberlook"] *::-webkit-scrollbar-track{background:rgba(0,0,0,.3)} [data-ui-theme="cyberlook"] *::-webkit-scrollbar-thumb{background:var(--cyber-purple-dim);border-color:rgba(0,0,0,.4)} [data-ui-theme="cyberlook"] *::-webkit-scrollbar-thumb:hover{background:var(--cyber-purple)} /* ══════════════════════════════════════════════════════════════════════════ * FOUNDATION * ══════════════════════════════════════════════════════════════════════════ */ /* Buttons — .wld-btn ist die einzige wirklich breit genutzte gemeinsame Komponente (61× Template, 258× über 28 JS-Dateien) — der größte Hebel. */ [data-ui-theme="cyberlook"] .wld-btn{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01)); border-color:var(--cyber-line);color:var(--cyber-text); box-shadow:0 1px 0 rgba(255,255,255,.04) inset; transition:transform var(--ui-motion-fast) ease,box-shadow var(--ui-motion-fast) ease, border-color var(--ui-motion-fast) ease,background var(--ui-motion-fast) ease; } [data-ui-theme="cyberlook"] .wld-btn:hover{ transform:translateY(-2px);border-color:var(--cyber-line-bright); box-shadow:0 8px 20px rgba(0,0,0,.4),var(--cyber-glow-purple); } [data-ui-theme="cyberlook"] .wld-btn:active{transform:translateY(-2px) scale(.97)} [data-ui-theme="cyberlook"] .wld-btn--primary{ background:linear-gradient(135deg,var(--cyber-purple),var(--cyber-purple-dim));border-color:var(--cyber-purple)} [data-ui-theme="cyberlook"] .wld-btn--primary:hover{box-shadow:0 12px 30px rgba(171,39,232,.4),var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-btn--install{border-color:var(--cyber-cyan);color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-btn--install:hover{box-shadow:0 12px 30px rgba(34,224,255,.28),var(--cyber-glow-cyan)} [data-ui-theme="cyberlook"] .wld-btn--danger{border-color:rgba(255,59,92,.6);color:#ff9fb2} [data-ui-theme="cyberlook"] .wld-btn--danger:hover{border-color:var(--cyber-danger);box-shadow:0 12px 30px rgba(255,59,92,.25)} [data-ui-theme="cyberlook"] .wld-gfx-opt.is-active{ border-color:var(--cyber-purple);background:rgba(171,39,232,.16);box-shadow:var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-gfx-opt.is-active small{color:rgba(255,255,255,.75)} /* Inputs/Select/Textarea — KEINE gemeinsame Klasse existiert in world.css (`.wld-input` wird zwar in JS referenziert, ist aber nirgends definiert). Ein generischer, NUR hier gescopter Typ-Selektor trifft automatisch alle 8+ fragmentierten Panel-eigenen Input-Familien auf einen Schlag, ohne dass Classic davon je etwas mitbekommt (dort existiert keine solche Regel). */ [data-ui-theme="cyberlook"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [data-ui-theme="cyberlook"] select, [data-ui-theme="cyberlook"] textarea{ background:var(--cyber-bg-2);color:var(--cyber-text); border:1px solid var(--cyber-line);border-radius:var(--cyber-radius-sm); transition:border-color var(--ui-motion-fast) ease,box-shadow var(--ui-motion-fast) ease; } [data-ui-theme="cyberlook"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus, [data-ui-theme="cyberlook"] select:focus, [data-ui-theme="cyberlook"] textarea:focus{ outline:none;border-color:var(--cyber-purple);box-shadow:0 0 0 3px rgba(171,39,232,.18); } [data-ui-theme="cyberlook"] input[type="range"]{accent-color:var(--cyber-purple)} [data-ui-theme="cyberlook"] .wld-toggle{border-color:var(--cyber-line);background:rgba(255,255,255,.02)} [data-ui-theme="cyberlook"] .wld-toggle:hover{border-color:var(--cyber-line-bright);background:rgba(171,39,232,.06)} [data-ui-theme="cyberlook"] .wld-toggle__track{background:rgba(255,255,255,.1)} [data-ui-theme="cyberlook"] .wld-toggle__input:checked + .wld-toggle__track{ background:var(--cyber-purple);box-shadow:var(--cyber-glow-purple)} /* Tabs — 9+ parallele Implementierungen ohne gemeinsame Basisklasse; hier nur die Player-relevanten gruppiert (Admin-only-Tabs bleiben Classic-Look, Priorität Player-UI laut Vorgabe). */ [data-ui-theme="cyberlook"] .wld-world-chat__tab, [data-ui-theme="cyberlook"] .wld-lorebook__tab, [data-ui-theme="cyberlook"] .wld-stats-board__tab{ border-radius:var(--cyber-radius-sm);transition:all var(--ui-motion-fast) ease; } [data-ui-theme="cyberlook"] .wld-world-chat__tab.is-active, [data-ui-theme="cyberlook"] .wld-lorebook__tab.is-active, [data-ui-theme="cyberlook"] .wld-stats-board__tab.is-active{ border-color:var(--cyber-purple);color:#fff; background:linear-gradient(135deg,var(--cyber-purple),var(--cyber-cyan-dim)); box-shadow:var(--cyber-glow-purple);font-weight:800; } /* .wld-popup-Basis — deckt automatisch 6 Panels ab: Console, Questlog, Archivist, Madron-Crafting, World-Chat, Settings. Der größte Einzelhebel nach den Buttons. */ [data-ui-theme="cyberlook"] .wld-popup{ background:var(--cyber-bg-1);border-color:var(--cyber-line); box-shadow:var(--cyber-shadow-panel);border-radius:var(--cyber-radius-lg); } [data-ui-theme="cyberlook"] .wld-popup__header{ background:linear-gradient(90deg,rgba(171,39,232,.22),rgba(34,224,255,.12)); border-bottom-color:var(--cyber-line-bright); font-family:var(--ui-font-display);letter-spacing:.09em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-popup__close{background:rgba(255,255,255,.08)} [data-ui-theme="cyberlook"] .wld-popup__close:hover{background:rgba(255,59,92,.28);box-shadow:0 0 12px rgba(255,59,92,.4)} /* Notifications — 7 Klassen, nur Farbe/Glow, bestehende @keyframes-Timing bleibt unangetastet (kein neues Motion-Vokabular nötig). */ /* Bewusst NICHT hier drin: die Klassen fuer die allgemeine Text-/Wort- Meldung (Quest/Item-benutzt/Fehler, User-Vorgabe 2026-09-10). Die sieht in JEDEM Theme identisch aus (weiss/schwarze Kontur, oberes Drittel, siehe world.css) — kein Cyberlook-Einfaerben, keine eigene Karte/Clip-Path (siehe auch weiter unten, aus der Karten-Selektorliste entfernt). */ [data-ui-theme="cyberlook"] .wld-spirit-reward{color:var(--cyber-cyan);text-shadow:0 2px 4px #000,0 0 20px rgba(34,224,255,.85)} [data-ui-theme="cyberlook"] .wld-item-reward{color:var(--cyber-purple-bright);text-shadow:0 2px 4px #000,0 0 20px rgba(200,92,255,.85)} [data-ui-theme="cyberlook"] .wld-damage-loss{color:var(--cyber-danger);text-shadow:0 2px 4px #000,0 0 10px var(--cyber-danger),0 0 26px rgba(255,59,92,.9)} [data-ui-theme="cyberlook"] .wld-stability-warning{ background:rgba(10,8,16,.9);border-color:var(--cyber-purple);color:#e9c6ff} [data-ui-theme="cyberlook"] .wld-combat-float{ color:var(--cyber-cyan);text-shadow:0 2px 4px #000,0 0 10px var(--cyber-cyan-dim),0 0 22px rgba(34,224,255,.8)} [data-ui-theme="cyberlook"] .wld-combat-float.is-crit{ color:#fff;text-shadow:0 2px 5px #000,0 0 14px var(--cyber-purple),0 0 34px rgba(171,39,232,.95)} /* ══════════════════════════════════════════════════════════════════════════ * GAME-UI * ══════════════════════════════════════════════════════════════════════════ */ /* HUD-Karten (Stats/Target/Party/Objectives/Clock) teilen einen ähnlichen Aufbau (dunkle Karte, dünner Rahmen, blur) — ein gemeinsamer Anstrich. */ [data-ui-theme="cyberlook"] .wld-stats, [data-ui-theme="cyberlook"] .wld-target-stats, [data-ui-theme="cyberlook"] .wld-party-frame, [data-ui-theme="cyberlook"] .wld-objectives, [data-ui-theme="cyberlook"] .wld-clock{ background:var(--cyber-bg-1);border-color:var(--cyber-line); box-shadow:0 10px 32px rgba(0,0,0,.5); } [data-ui-theme="cyberlook"] .wld-target-stats.is-auto-attack{ border-color:var(--cyber-purple);box-shadow:var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-target-stats.is-auto-attack .wld-target-stats__name::after{color:var(--cyber-purple-bright)} [data-ui-theme="cyberlook"] .wld-player-card__avatar{border-color:var(--cyber-purple);box-shadow:var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-level__text, [data-ui-theme="cyberlook"] .wld-stat__text{font-family:var(--ui-font-display);font-weight:700} [data-ui-theme="cyberlook"] .wld-level__text strong{color:var(--cyber-cyan)} /* HP/MP/EXP-Balken — nutzen die bereits vorhandene `transition:width .18s linear` (world.css .wld-stat__bar>div) unveraendert, nur die Farbe wird moderner (Gradient + Glow). HP bleibt bewusst rot (Gefahr), MP wird Cyan→Purple statt Blau→Violett, EXP bleibt warm-gold. */ [data-ui-theme="cyberlook"] .wld-stat__bar{background:var(--cyber-bg-0);border-color:var(--cyber-line)} [data-ui-theme="cyberlook"] .wld-stat--hp .wld-stat__bar>div{ background:linear-gradient(90deg,var(--cyber-danger-dim),var(--cyber-danger));box-shadow:0 0 10px rgba(255,59,92,.55)} [data-ui-theme="cyberlook"] .wld-stat--mp .wld-stat__bar>div{ background:linear-gradient(90deg,var(--cyber-cyan-dim),var(--cyber-cyan),var(--cyber-purple));box-shadow:var(--cyber-glow-cyan)} [data-ui-theme="cyberlook"] .wld-stat--hp .wld-stat__icon{color:var(--cyber-danger)} [data-ui-theme="cyberlook"] .wld-stat--mp .wld-stat__icon{color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-level{ background:var(--cyber-bg-0);border-bottom-color:var(--cyber-line-bright);box-shadow:0 4px 18px rgba(0,0,0,.6)} [data-ui-theme="cyberlook"] .wld-level__track{background:rgba(255,255,255,.06)} [data-ui-theme="cyberlook"] .wld-level__fill{ background:linear-gradient(90deg,#8a4a00,var(--cyber-gold),#fff2c9);box-shadow:0 0 10px rgba(255,207,77,.75)} /* Minimap — Rahmen/Glow, das runde Layout selbst bleibt unangetastet. */ [data-ui-theme="cyberlook"] .wld-minimap{ background:var(--cyber-bg-0);border-color:var(--cyber-purple); box-shadow:0 10px 32px rgba(0,0,0,.6),var(--cyber-glow-purple)} /* Bottombar-Buttons + Hotbar */ [data-ui-theme="cyberlook"] .wld-bar-btn{ background:var(--cyber-bg-1);border-color:var(--cyber-line); transition:transform var(--ui-motion-fast) ease,background var(--ui-motion-fast) ease,box-shadow var(--ui-motion-fast) ease; } [data-ui-theme="cyberlook"] .wld-bar-btn:hover, [data-ui-theme="cyberlook"] .wld-bar-btn.is-open{ background:var(--cyber-bg-3);border-color:var(--cyber-line-bright); transform:translateY(-2px);box-shadow:var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-hotbar-skill{ background:var(--cyber-bg-1);border-color:var(--cyber-line); transition:transform var(--ui-motion-fast) ease,background var(--ui-motion-fast) ease,box-shadow var(--ui-motion-fast) ease; } [data-ui-theme="cyberlook"] .wld-hotbar-skill:hover{background:var(--cyber-bg-3);transform:translateY(-2px)} [data-ui-theme="cyberlook"] .wld-hotbar-skill.is-active{ border-color:var(--cyber-purple);box-shadow:var(--cyber-glow-purple)} /* NUR die Farbe des Abklingzeit-Overlays — das bestehende transform:scaleY() (JS-gesteuert, pro Frame) bleibt zwingend unangetastet. */ [data-ui-theme="cyberlook"] .wld-hotbar-skill__cooldown{background:rgba(80,10,110,.62)} /* CSS kennt keine gescopten @keyframes — ein neuer, gleichwertiger Name statt den Classic-Keyframe zu überschreiben (der bliebe sonst für Classic auch verändert, da @keyframes global sind). */ @keyframes wld-cyber-skill-ready{ 0%{box-shadow:0 0 0 0 rgba(171,39,232,.65)} 100%{box-shadow:0 0 0 10px rgba(171,39,232,0)} } [data-ui-theme="cyberlook"] .wld-hotbar-skill.is-ready-pulse{animation-name:wld-cyber-skill-ready} /* Panels ohne .wld-popup-Basis — jede eigene Klassenfamilie. */ [data-ui-theme="cyberlook"] .wld-inventory, [data-ui-theme="cyberlook"] .wld-trade, [data-ui-theme="cyberlook"] .wld-merchant, [data-ui-theme="cyberlook"] .wld-questoffer, [data-ui-theme="cyberlook"] .wld-skills, [data-ui-theme="cyberlook"] .wld-map{ background:var(--cyber-bg-1);border-color:var(--cyber-line);box-shadow:var(--cyber-shadow-panel); } [data-ui-theme="cyberlook"] .wld-inventory__header, [data-ui-theme="cyberlook"] .wld-trade__header, [data-ui-theme="cyberlook"] .wld-merchant__header, [data-ui-theme="cyberlook"] .wld-questoffer__header, [data-ui-theme="cyberlook"] .wld-map__header{ background:linear-gradient(90deg,rgba(171,39,232,.22),rgba(34,224,255,.12)); border-bottom-color:var(--cyber-line-bright); font-family:var(--ui-font-display);letter-spacing:.09em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-dialogue{ background:var(--cyber-bg-1);border-color:var(--cyber-line);box-shadow:var(--cyber-shadow-panel)} [data-ui-theme="cyberlook"] .wld-dialogue__speaker{color:var(--cyber-purple-bright)} /* Rarity-Farbcodierung (User-Vorgabe Punkt 15) — nutzt die bereits vorhandene item.rarity, jetzt ueber ui.js als data-rarity greifbar. NUR Rahmen/Glow, keine neuen Werte erfunden — fehlt die Stufe (common), bleibt der normale .wld-inventory-item-Rahmen stehen. */ [data-ui-theme="cyberlook"] .wld-inventory-item[data-rarity="uncommon"]{border-color:#3ddc70;box-shadow:0 0 8px rgba(61,220,112,.4)} [data-ui-theme="cyberlook"] .wld-inventory-item[data-rarity="rare"]{border-color:var(--cyber-cyan);box-shadow:0 0 10px rgba(34,224,255,.5)} [data-ui-theme="cyberlook"] .wld-inventory-item[data-rarity="epic"]{border-color:var(--cyber-purple);box-shadow:0 0 12px rgba(171,39,232,.6)} [data-ui-theme="cyberlook"] .wld-inventory-item[data-rarity="legendary"]{ border-color:var(--cyber-gold);box-shadow:0 0 16px rgba(255,207,77,.7);animation:wld-cyber-legendary-glow 2.4s ease-in-out infinite} @keyframes wld-cyber-legendary-glow{ 0%,100%{box-shadow:0 0 12px rgba(255,207,77,.55)} 50%{box-shadow:0 0 20px rgba(255,207,77,.85)} } /* ══════════════════════════════════════════════════════════════════════════ * COMPETITIVE HUD REDESIGN * * Diese Schicht macht Cyberlook zu einer eigenen Formensprache statt zu einem * Farbfilter: geschnittene Ecken, plakative Typografie, transparente * Schichtungen, Richtungsbewegung und sofort sichtbares Interaktionsfeedback. * Der rechte untere Rand resizbarer Fenster bleibt absichtlich ungeschnitten, * damit der native Resize-Griff vollständig benutzbar bleibt. * ══════════════════════════════════════════════════════════════════════════ */ /* Grundrhythmus und Typografie. */ [data-ui-theme="cyberlook"] body{ --cyber-panel-clip:polygon(0 var(--cyber-cut-lg),var(--cyber-cut-lg) 0,calc(100% - 34px) 0,100% 34px,100% 100%,var(--cyber-cut-md) 100%,0 calc(100% - var(--cyber-cut-md))); --cyber-card-clip:polygon(0 var(--cyber-cut-sm),var(--cyber-cut-sm) 0,calc(100% - var(--cyber-cut-md)) 0,100% var(--cyber-cut-md),100% calc(100% - var(--cyber-cut-sm)),calc(100% - var(--cyber-cut-sm)) 100%,var(--cyber-cut-sm) 100%,0 calc(100% - var(--cyber-cut-sm))); color-scheme:dark; font-family:var(--ui-font-display); } [data-ui-theme="cyberlook"] .wld-popup, [data-ui-theme="cyberlook"] .wld-inventory, [data-ui-theme="cyberlook"] .wld-trade, [data-ui-theme="cyberlook"] .wld-merchant, [data-ui-theme="cyberlook"] .wld-questoffer, [data-ui-theme="cyberlook"] .wld-skills, [data-ui-theme="cyberlook"] .wld-attributes, [data-ui-theme="cyberlook"] .wld-map, [data-ui-theme="cyberlook"] .wld-dialogue, [data-ui-theme="cyberlook"] .wld-stats-board__panel, [data-ui-theme="cyberlook"] .wld-shard-shrine__panel{ isolation:isolate; border-radius:0; border:1px solid rgba(34,224,255,.28); border-top-color:rgba(200,92,255,.75); background:var(--cyber-surface-strong); clip-path:var(--cyber-panel-clip); backdrop-filter:blur(18px) saturate(1.22); box-shadow:var(--cyber-shadow-panel); } [data-ui-theme="cyberlook"] .wld-popup::before, [data-ui-theme="cyberlook"] .wld-inventory::before, [data-ui-theme="cyberlook"] .wld-trade::before, [data-ui-theme="cyberlook"] .wld-merchant::before, [data-ui-theme="cyberlook"] .wld-questoffer::before, [data-ui-theme="cyberlook"] .wld-skills::before, [data-ui-theme="cyberlook"] .wld-attributes::before, [data-ui-theme="cyberlook"] .wld-map::before, [data-ui-theme="cyberlook"] .wld-dialogue::before, [data-ui-theme="cyberlook"] .wld-stats-board__panel::before, [data-ui-theme="cyberlook"] .wld-shard-shrine__panel::before{ content:"";position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(90deg,var(--cyber-cyan) 0 38px,transparent 38px calc(100% - 70px),var(--cyber-purple) calc(100% - 70px) 100%) top/100% 2px no-repeat, repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 1px,transparent 1px 5px); opacity:.72; } /* Plakative, geschnittene Controls mit einem schnellen Lichtlauf. */ [data-ui-theme="cyberlook"] .wld-btn{ position:relative;isolation:isolate;overflow:hidden;border-radius:0; clip-path:polygon(0 var(--cyber-cut-sm),var(--cyber-cut-sm) 0,100% 0,100% calc(100% - var(--cyber-cut-sm)),calc(100% - var(--cyber-cut-sm)) 100%,0 100%); min-height:38px;padding-inline:18px;font-family:var(--ui-font-display); font-weight:800;letter-spacing:.075em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-btn::before{ content:"";position:absolute;inset:-2px auto -2px -45%;z-index:-1;width:38%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent); transform:skewX(-18deg);transition:left var(--ui-motion-med) cubic-bezier(.2,.75,.2,1); } [data-ui-theme="cyberlook"] .wld-btn:hover::before{left:112%} [data-ui-theme="cyberlook"] .wld-btn:hover{transform:translate(-2px,-3px);filter:brightness(1.12)} [data-ui-theme="cyberlook"] .wld-btn:active{transform:translate(1px,0) scale(.98);filter:brightness(.92)} [data-ui-theme="cyberlook"] .wld-btn:focus-visible, [data-ui-theme="cyberlook"] button:focus-visible{ outline:2px solid var(--cyber-cyan);outline-offset:3px;box-shadow:0 0 0 5px rgba(34,224,255,.14),var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [data-ui-theme="cyberlook"] select, [data-ui-theme="cyberlook"] textarea{ border-radius:0;clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); background:linear-gradient(90deg,rgba(34,224,255,.055),transparent 28%),rgba(5,7,13,.88); } [data-ui-theme="cyberlook"] .wld-setting--toggle, [data-ui-theme="cyberlook"] .wld-hotbar-keybind-group{ border-radius:0;clip-path:var(--cyber-card-clip);background:rgba(11,14,24,.72); border-color:rgba(34,224,255,.18); } /* Header funktionieren wie kräftige Navigationsbalken, nicht wie Classic- Fenstertitel. Die linke Lichtkante zeigt zugleich den Drag-Bereich. */ [data-ui-theme="cyberlook"] .wld-popup__header, [data-ui-theme="cyberlook"] .wld-inventory__header, [data-ui-theme="cyberlook"] .wld-trade__header, [data-ui-theme="cyberlook"] .wld-merchant__header, [data-ui-theme="cyberlook"] .wld-questoffer__header, [data-ui-theme="cyberlook"] .wld-map__header, [data-ui-theme="cyberlook"] .wld-skills__handle, [data-ui-theme="cyberlook"] .wld-attributes__handle{ position:relative;z-index:2;min-height:48px;padding-left:22px; border-bottom:1px solid rgba(34,224,255,.35); background:linear-gradient(105deg,rgba(171,39,232,.52) 0 7px,rgba(171,39,232,.25) 7px 34%,rgba(34,224,255,.1) 70%,transparent); box-shadow:0 -1px 0 rgba(255,255,255,.07) inset,0 -14px 30px rgba(171,39,232,.08) inset; color:#fff;font:900 1rem/1 var(--ui-font-display);letter-spacing:.13em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-popup__header::after, [data-ui-theme="cyberlook"] .wld-inventory__header::after, [data-ui-theme="cyberlook"] .wld-trade__header::after, [data-ui-theme="cyberlook"] .wld-merchant__header::after, [data-ui-theme="cyberlook"] .wld-questoffer__header::after, [data-ui-theme="cyberlook"] .wld-map__header::after, [data-ui-theme="cyberlook"] .wld-skills__handle::after, [data-ui-theme="cyberlook"] .wld-attributes__handle::after{ content:"// ONLINE";order:2;margin-left:auto;margin-right:10px;color:var(--cyber-cyan); font:800 .54rem/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;opacity:.72;pointer-events:none; } [data-ui-theme="cyberlook"] .wld-world-chat__header::after{content:"// LIVE";position:absolute;right:52px;top:15px;margin:0} [data-ui-theme="cyberlook"] .wld-popup__close, [data-ui-theme="cyberlook"] .wld-inventory__close, [data-ui-theme="cyberlook"] .wld-merchant__close, [data-ui-theme="cyberlook"] .wld-questoffer__close, [data-ui-theme="cyberlook"] .wld-skills__close, [data-ui-theme="cyberlook"] .wld-attributes__close{ position:relative;z-index:3;order:3;flex:0 0 30px;border-radius:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); border:1px solid rgba(255,59,92,.45);background:rgba(255,59,92,.11);color:#fff; transition:transform var(--ui-motion-fast),background var(--ui-motion-fast),box-shadow var(--ui-motion-fast); } [data-ui-theme="cyberlook"] .wld-popup__close:hover, [data-ui-theme="cyberlook"] .wld-inventory__close:hover, [data-ui-theme="cyberlook"] .wld-merchant__close:hover, [data-ui-theme="cyberlook"] .wld-questoffer__close:hover, [data-ui-theme="cyberlook"] .wld-skills__close:hover, [data-ui-theme="cyberlook"] .wld-attributes__close:hover{ transform:rotate(5deg) scale(1.08);background:rgba(255,59,92,.36);box-shadow:0 0 18px rgba(255,59,92,.55); } /* HUD: asymmetrische Silhouetten, kantige Balken und klarere Hierarchie. */ [data-ui-theme="cyberlook"] .wld-level{ min-height:38px;border:0;border-bottom:2px solid rgba(34,224,255,.35); background:linear-gradient(90deg,rgba(171,39,232,.38),rgba(7,8,13,.9) 28%,rgba(7,8,13,.74) 72%,rgba(34,224,255,.22)); clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),75% calc(100% - 8px),calc(75% - 8px) 100%,25% 100%,calc(25% - 8px) calc(100% - 8px),0 calc(100% - 8px)); backdrop-filter:blur(12px);text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-level__text{letter-spacing:.12em} [data-ui-theme="cyberlook"] .wld-level__track{height:4px;border-radius:0} [data-ui-theme="cyberlook"] .wld-level__fill{border-radius:0;position:relative} [data-ui-theme="cyberlook"] .wld-level__fill::after{ content:"";position:absolute;top:0;right:0;width:22px;height:100%;background:#fff;box-shadow:0 0 13px var(--cyber-gold); } [data-ui-theme="cyberlook"] .wld-stats, [data-ui-theme="cyberlook"] .wld-target-stats, [data-ui-theme="cyberlook"] .wld-party-frame, [data-ui-theme="cyberlook"] .wld-objectives, [data-ui-theme="cyberlook"] .wld-clock{ border-radius:0;border-color:rgba(34,224,255,.25);border-left:3px solid var(--cyber-purple); background:var(--cyber-surface);backdrop-filter:blur(13px) saturate(1.18); clip-path:var(--cyber-card-clip);box-shadow:0 14px 38px rgba(0,0,0,.52),8px 0 24px rgba(171,39,232,.08); } [data-ui-theme="cyberlook"] .wld-stats{min-width:270px;padding:12px 17px 13px} [data-ui-theme="cyberlook"] .wld-player-card{border-bottom-color:rgba(34,224,255,.25);text-transform:uppercase} [data-ui-theme="cyberlook"] .wld-player-card__name, [data-ui-theme="cyberlook"] .wld-target-stats__name, [data-ui-theme="cyberlook"] .wld-party-frame__name, [data-ui-theme="cyberlook"] .wld-obj-head{ font-family:var(--ui-font-display);font-weight:900;letter-spacing:.1em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-player-card__avatar{ width:58px;height:58px;flex-basis:58px;border-radius:0; clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); border:2px solid var(--cyber-purple);box-shadow:0 0 0 3px rgba(171,39,232,.12),var(--cyber-glow-purple); } [data-ui-theme="cyberlook"] .wld-stat{gap:7px} [data-ui-theme="cyberlook"] .wld-stat__bar{height:17px;border-radius:0;clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)} [data-ui-theme="cyberlook"] .wld-stat__bar>div{border-radius:0;background-size:180% 100%;animation:wld-cyber-energy-flow 3.2s linear infinite} [data-ui-theme="cyberlook"] .wld-stat__text{font-size:.7rem;letter-spacing:.09em} [data-ui-theme="cyberlook"] .wld-objectives{width:220px;padding:12px 14px} [data-ui-theme="cyberlook"] .wld-obj-quest + .wld-obj-quest{border-top-color:rgba(34,224,255,.2)} [data-ui-theme="cyberlook"] .wld-obj-head{color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-obj-row__val{color:var(--cyber-purple-bright);font-weight:900} [data-ui-theme="cyberlook"] .wld-clock{border-left-color:var(--cyber-cyan);color:var(--cyber-cyan)} /* Die runde Classic-Minimap wird im Cyberlook zu einem technischen Oktagon. */ [data-ui-theme="cyberlook"] .wld-minimap{ width:138px;height:138px;padding:3px;border-radius:0;border:2px solid var(--cyber-cyan); clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px); background:rgba(5,8,15,.9);box-shadow:0 0 0 4px rgba(34,224,255,.08),0 16px 38px rgba(0,0,0,.58),var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] .wld-minimap canvas{ width:132px;height:132px;border-radius:0; clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px),0 17px); filter:saturate(1.2) contrast(1.08); } [data-ui-theme="cyberlook"] .wld-minimap__north{ top:7px;padding:1px 7px;background:var(--cyber-purple);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%); font-weight:900;letter-spacing:.14em;box-shadow:var(--cyber-glow-purple); } /* Aktionsleiste: kantige Chips mit aufklappenden Beschriftungen. */ [data-ui-theme="cyberlook"] .wld-hotbar{ gap:5px;padding:7px 9px;border-radius:0;border:1px solid rgba(34,224,255,.22);border-bottom:2px solid var(--cyber-purple); clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px); background:linear-gradient(180deg,rgba(20,23,38,.74),rgba(5,7,12,.58));backdrop-filter:blur(14px) saturate(1.25); box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 24px rgba(171,39,232,.09); } [data-ui-theme="cyberlook"] .wld-hotbar__handle{border-radius:0;background:linear-gradient(180deg,rgba(34,224,255,.28),rgba(171,39,232,.25));color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-hotbar__slot{ border-radius:0;clip-path:polygon(0 7px,7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%); border-color:rgba(34,224,255,.2);background:rgba(4,6,11,.58);transition:transform var(--ui-motion-fast),border-color var(--ui-motion-fast),background var(--ui-motion-fast),box-shadow var(--ui-motion-fast); } [data-ui-theme="cyberlook"] .wld-hotbar__slot::after{border-radius:0;border-color:rgba(34,224,255,.16)} [data-ui-theme="cyberlook"] .wld-hotbar__slot:hover{ z-index:2;transform:translateY(-5px) scale(1.08);border-color:var(--cyber-cyan);background:rgba(34,224,255,.12);box-shadow:0 10px 22px rgba(0,0,0,.5),var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] .wld-hotbar-item, [data-ui-theme="cyberlook"] .wld-hotbar-skill{border-radius:0;clip-path:inherit;background:transparent;border-color:transparent} [data-ui-theme="cyberlook"] .wld-hotbar-item__count{border-radius:0;background:var(--cyber-purple);border-color:#fff;font-weight:900} [data-ui-theme="cyberlook"] .wld-bottombar.is-position-locked .wld-hotbar{ padding:5px;border-color:rgba(34,224,255,.14);border-bottom-color:rgba(171,39,232,.55);background:rgba(7,9,15,.24);backdrop-filter:blur(8px); } [data-ui-theme="cyberlook"] .wld-bottombar.is-position-locked .wld-hotbar__slot{border-color:rgba(34,224,255,.1);background:rgba(5,7,12,.22)} [data-ui-theme="cyberlook"] .wld-bar-btn{ position:relative;width:48px;height:48px;border-radius:0;overflow:visible; clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); background:linear-gradient(145deg,rgba(24,28,45,.9),rgba(6,8,14,.84));border-color:rgba(34,224,255,.24); box-shadow:0 8px 18px rgba(0,0,0,.45),inset 3px 0 0 rgba(171,39,232,.62); } [data-ui-theme="cyberlook"] .wld-bar-btn::before{ content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid rgba(255,255,255,.07); clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); } [data-ui-theme="cyberlook"] .wld-bar-btn:hover, [data-ui-theme="cyberlook"] .wld-bar-btn.is-open{ transform:translateY(-7px) rotate(-1deg);background:linear-gradient(145deg,rgba(34,224,255,.18),rgba(171,39,232,.22)); border-color:var(--cyber-cyan);box-shadow:0 13px 28px rgba(0,0,0,.58),var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] .wld-bar-btn__label{ display:block;position:absolute;left:50%;bottom:calc(100% + 9px);z-index:8;min-width:max-content;padding:6px 10px; opacity:0;pointer-events:none;transform:translate(-50%,8px) scale(.9); clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:rgba(8,10,18,.96);border-left:3px solid var(--cyber-cyan); color:#fff;font:900 .64rem/1 var(--ui-font-display);letter-spacing:.1em;text-transform:uppercase; transition:opacity var(--ui-motion-fast),transform var(--ui-motion-fast); } [data-ui-theme="cyberlook"] .wld-bar-btn:hover .wld-bar-btn__label, [data-ui-theme="cyberlook"] .wld-bar-btn:focus-visible .wld-bar-btn__label{opacity:1;transform:translate(-50%,0) scale(1)} /* Inhalte und Karten erhalten dieselbe eckige Grammatik wie die Außenhülle. */ [data-ui-theme="cyberlook"] .wld-inventory-slot, [data-ui-theme="cyberlook"] .wld-inventory-item, [data-ui-theme="cyberlook"] .wld-trade-item, [data-ui-theme="cyberlook"] .wld-merchant-item, [data-ui-theme="cyberlook"] .wld-skill, [data-ui-theme="cyberlook"] .wld-attributes__slot, [data-ui-theme="cyberlook"] .wld-attributes__row, [data-ui-theme="cyberlook"] .wld-attributes__summary, [data-ui-theme="cyberlook"] .wld-attributes__stat, [data-ui-theme="cyberlook"] .wld-questlog__panel, [data-ui-theme="cyberlook"] .wld-quest-row, [data-ui-theme="cyberlook"] .wld-stats-board__row, [data-ui-theme="cyberlook"] .wld-shard-shrine__stat, [data-ui-theme="cyberlook"] .wld-shard-shrine__milestone{ border-radius:0;clip-path:var(--cyber-card-clip);border-color:rgba(34,224,255,.16);background:rgba(8,11,19,.62); transition:transform var(--ui-motion-fast),border-color var(--ui-motion-fast),background var(--ui-motion-fast),box-shadow var(--ui-motion-fast); } [data-ui-theme="cyberlook"] .wld-inventory-slot:hover, [data-ui-theme="cyberlook"] .wld-inventory-item:hover, [data-ui-theme="cyberlook"] .wld-merchant-item:hover, [data-ui-theme="cyberlook"] .wld-skill:hover, [data-ui-theme="cyberlook"] .wld-attributes__slot:hover, [data-ui-theme="cyberlook"] .wld-attributes__row:hover, [data-ui-theme="cyberlook"] .wld-attributes__stat:hover, [data-ui-theme="cyberlook"] .wld-quest-row:hover, [data-ui-theme="cyberlook"] .wld-stats-board__row:hover{ transform:translateX(5px);border-color:rgba(34,224,255,.58);background:linear-gradient(90deg,rgba(34,224,255,.12),rgba(171,39,232,.07)); box-shadow:-4px 0 0 var(--cyber-purple),0 10px 24px rgba(0,0,0,.28); } [data-ui-theme="cyberlook"] .wld-questlog__toggle{border-radius:0;clip-path:var(--cyber-card-clip);background:rgba(4,6,12,.66)} [data-ui-theme="cyberlook"] .wld-qtoggle{ position:relative;border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); font-family:var(--ui-font-display);font-weight:800;letter-spacing:.08em;text-transform:uppercase; } [data-ui-theme="cyberlook"] .wld-qtoggle.is-active{background:linear-gradient(105deg,var(--cyber-purple),var(--cyber-cyan-dim));color:#fff;box-shadow:var(--cyber-glow-purple)} [data-ui-theme="cyberlook"] .wld-dialogue__choice{ border-radius:0;clip-path:var(--cyber-card-clip);border-left:3px solid var(--cyber-purple);background:rgba(6,9,16,.74); } [data-ui-theme="cyberlook"] .wld-dialogue__choice:hover{ transform:translateX(8px);border-color:var(--cyber-cyan);background:linear-gradient(90deg,rgba(34,224,255,.17),rgba(171,39,232,.09));box-shadow:0 10px 25px rgba(0,0,0,.35); } [data-ui-theme="cyberlook"] .wld-dialogue__choice-key{border-radius:0;background:var(--cyber-purple);color:#fff;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)} /* Kontext, Fortschritt und Hinweise nutzen dieselbe Richtungssprache. */ [data-ui-theme="cyberlook"] .wld-context-menu, [data-ui-theme="cyberlook"] .wld-group-invite-prompt, [data-ui-theme="cyberlook"] .wld-prompt, [data-ui-theme="cyberlook"] .wld-world-voice, [data-ui-theme="cyberlook"] .wld-stability-warning{ border-radius:0;clip-path:var(--cyber-card-clip);border:1px solid rgba(34,224,255,.34); border-left:4px solid var(--cyber-purple);background:var(--cyber-surface-strong);backdrop-filter:blur(14px); box-shadow:0 16px 40px rgba(0,0,0,.55),var(--cyber-glow-purple); } [data-ui-theme="cyberlook"] .wld-context-menu button{border-radius:0;font-family:var(--ui-font-display);font-weight:800;letter-spacing:.06em;text-transform:uppercase} [data-ui-theme="cyberlook"] .wld-context-menu button:hover{padding-left:18px;background:linear-gradient(90deg,rgba(34,224,255,.19),transparent);color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-charge, [data-ui-theme="cyberlook"] .wld-harvest__track{ border-radius:0;clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);border-color:rgba(34,224,255,.34); background:rgba(4,6,12,.86);box-shadow:0 8px 24px rgba(0,0,0,.46); } [data-ui-theme="cyberlook"] .wld-charge__fill, [data-ui-theme="cyberlook"] .wld-harvest__fill{border-radius:0;background-size:180% 100%;animation:wld-cyber-energy-flow 2s linear infinite} [data-ui-theme="cyberlook"] .wld-world-chat__msg, [data-ui-theme="cyberlook"] .wld-world-chat__tab, [data-ui-theme="cyberlook"] .wld-stats-board__tab, [data-ui-theme="cyberlook"] .wld-lorebook__tab{ border-radius:0;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); } [data-ui-theme="cyberlook"] .wld-world-chat__msg{border-left-width:3px;background:rgba(34,224,255,.045)} [data-ui-theme="cyberlook"] .wld-world-chat__msg.is-me{border-left-color:var(--cyber-purple);background:rgba(171,39,232,.09)} [data-ui-theme="cyberlook"] .wld-world-chat__send, [data-ui-theme="cyberlook"] .wld-world-chat__mic{border-radius:0;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)} @keyframes wld-cyber-energy-flow{ 0%{background-position:100% 0} 100%{background-position:-80% 0} } /* ══════════════════════════════════════════════════════════════════════════ * MOTION * ══════════════════════════════════════════════════════════════════════════ */ /* Panel-Open — spielt jedes Mal, wenn eines der Panels aus [hidden] heraus sichtbar wird (Browser starten CSS-Animationen neu, sobald ein Element wieder gerendert wird). Kurz gehalten (User-Vorgabe: 150-300ms), damit die Oberflaeche schnell bleibt. */ @keyframes wld-cyber-panel-in{ from{opacity:0;filter:blur(4px) brightness(1.6)} to{opacity:1;filter:blur(0) brightness(1)} } @keyframes wld-cyber-center-in{ from{opacity:0;transform:translate(-50%,-47%) scale(.94);filter:blur(4px) brightness(1.5)} to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) brightness(1)} } @keyframes wld-cyber-side-in{ from{opacity:0;transform:translateX(28px) scale(.97);filter:blur(3px)} to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} } @keyframes wld-cyber-dialogue-in{ from{opacity:0;transform:translate(-50%,18px) scale(.97);filter:blur(3px)} to{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)} } [data-ui-theme="cyberlook"] .wld-popup:not(.wld-questlog):not(.wld-world-chat), [data-ui-theme="cyberlook"] .wld-trade, [data-ui-theme="cyberlook"] .wld-merchant, [data-ui-theme="cyberlook"] .wld-map{ animation:wld-cyber-center-in var(--ui-motion-med) cubic-bezier(.16,.82,.22,1); } [data-ui-theme="cyberlook"] .wld-inventory, [data-ui-theme="cyberlook"] .wld-questoffer, [data-ui-theme="cyberlook"] .wld-skills, [data-ui-theme="cyberlook"] .wld-attributes, [data-ui-theme="cyberlook"] .wld-world-chat{ animation:wld-cyber-side-in var(--ui-motion-med) cubic-bezier(.16,.82,.22,1); } [data-ui-theme="cyberlook"] .wld-dialogue{animation:wld-cyber-dialogue-in var(--ui-motion-med) cubic-bezier(.16,.82,.22,1)} [data-ui-theme="cyberlook"] .wld-questlog, [data-ui-theme="cyberlook"] .wld-stats-board__panel, [data-ui-theme="cyberlook"] .wld-shard-shrine__panel{animation:wld-cyber-panel-in var(--ui-motion-med) ease-out} /* Sehr dezente Hintergrundbewegung, NUR für die zwei größten Menüs (Karte, Skills) — bewusst kein Canvas/Partikel-Overlay (Performance, User-Vorgabe Punkt 28: eine 3D-Welt läuft parallel). Reines CSS-Gradient-Shimmer. */ [data-ui-theme="cyberlook"] .wld-map{ background-image:linear-gradient(120deg,transparent 0%,rgba(171,39,232,.05) 45%,transparent 60%), linear-gradient(var(--cyber-bg-1),var(--cyber-bg-1)); background-size:220% 220%,100% 100%; animation:wld-cyber-center-in var(--ui-motion-med) cubic-bezier(.16,.82,.22,1),wld-cyber-shimmer 14s ease-in-out infinite; } [data-ui-theme="cyberlook"] .wld-skills, [data-ui-theme="cyberlook"] .wld-attributes{ background-image:linear-gradient(120deg,transparent 0%,rgba(171,39,232,.05) 45%,transparent 60%), linear-gradient(var(--cyber-bg-1),var(--cyber-bg-1)); background-size:220% 220%,100% 100%; animation:wld-cyber-side-in var(--ui-motion-med) cubic-bezier(.16,.82,.22,1),wld-cyber-shimmer 14s ease-in-out infinite; } @keyframes wld-cyber-shimmer{ 0%,100%{background-position:0% 0%,0 0} 50%{background-position:100% 100%,0 0} } @media (hover:none){ [data-ui-theme="cyberlook"] .wld-bar-btn__label{display:none} [data-ui-theme="cyberlook"] .wld-hotbar__slot:hover{transform:none} } /* Offenes Spiel-HUD: Nur die Inhalte und farbigen Fuellungen bleiben sichtbar. */ [data-ui-theme="cyberlook"] .wld-stats, [data-ui-theme="cyberlook"] .wld-minimap{ background:transparent;border:0;box-shadow:none;backdrop-filter:none; } [data-ui-theme="cyberlook"] .wld-player-card, [data-ui-theme="cyberlook"] .wld-stat__bar{ background:transparent;border:0;box-shadow:none; } /* Alle fuenf Aktionsleisten verlieren ihr aeusseres Gehaeuse. Slots, Cooldowns und Drag-Griffe bleiben als bedienbare Einzelteile sichtbar. */ [data-ui-theme="cyberlook"] .wld-hotbar, [data-ui-theme="cyberlook"] .wld-bottombar.is-position-locked .wld-hotbar{ background:transparent;border:0;box-shadow:none;backdrop-filter:none; } /* Floating Chat ersetzt im Cyberlook das klassische Chatfenster vollstaendig. */ [data-ui-theme="cyberlook"] .wld-world-chat.is-floating-replaced{display:none!important} [data-ui-theme="cyberlook"] .wld-floating-chat{ position:fixed;left:20px;bottom:156px;z-index:34;width:min(440px,calc(100vw - 40px)); max-height:min(42vh,410px);overflow:visible;pointer-events:auto;background:transparent;border:0;box-shadow:none; color:var(--wld-floating-chat-text,#fff);font-family:var(--ui-font-display);font-size:var(--wld-floating-chat-font-size,14px);text-align:left;outline:none; } [data-ui-theme="cyberlook"] .wld-floating-chat__motion{will-change:transform} [data-ui-theme="cyberlook"] .wld-floating-chat__log{display:flex;flex-direction:column;justify-content:flex-end;gap:8px} [data-ui-theme="cyberlook"] .wld-floating-chat__msg{ display:block;padding:0;background:transparent;border:0;color:var(--wld-floating-message-color,var(--wld-floating-chat-other,#f4f7ff)); text-shadow:0 2px 5px rgba(0,0,0,.96),0 0 10px rgba(0,0,0,.74); transform-origin:left center;transition:font-size 180ms ease,opacity 180ms ease; animation:wld-floating-chat-arrive 220ms ease-out both; } [data-ui-theme="cyberlook"] .wld-floating-chat__meta{ display:block;margin-bottom:1px;color:inherit;font-size:.7em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.72; } [data-ui-theme="cyberlook"] .wld-floating-chat__body{display:block;color:inherit;font-size:1em;font-weight:600;line-height:1.24} /* Sieben Stufen: neueste Nachricht +20 %, aelteste -20 %, dazwischen gleichmaessig abgestuft. Die oberen Zeilen werden zugleich dezenter. */ [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(1){font-size:1.2em;opacity:1} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(2){font-size:1.133em;opacity:.93} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(3){font-size:1.067em;opacity:.86} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(4){font-size:1em;opacity:.78} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(5){font-size:.933em;opacity:.68} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(6){font-size:.867em;opacity:.56} [data-ui-theme="cyberlook"] .wld-floating-chat__msg:nth-last-child(7){font-size:.8em;opacity:.44} [data-ui-theme="cyberlook"] .wld-floating-chat__form{ display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:7px; max-height:0;margin-top:0;opacity:0;visibility:hidden;overflow:hidden;pointer-events:none; transform:translateY(8px);transition:max-height 200ms ease,margin-top 200ms ease,opacity 160ms ease,transform 200ms ease,visibility 0s linear 200ms; } [data-ui-theme="cyberlook"] .wld-floating-chat:hover .wld-floating-chat__form, [data-ui-theme="cyberlook"] .wld-floating-chat:hover:focus-within .wld-floating-chat__form{ max-height:54px;margin-top:11px;opacity:1;visibility:visible;overflow:visible;pointer-events:auto;transform:translateY(0); transition:max-height 200ms ease,margin-top 200ms ease,opacity 160ms ease,transform 200ms ease,visibility 0s; } [data-ui-theme="cyberlook"] .wld-floating-chat__input{ width:100%;min-width:0;height:38px;padding:0 12px;border:1px solid rgba(34,224,255,.46);border-radius:0; clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);background:var(--wld-floating-chat-bg,rgba(5,8,15,.86));backdrop-filter:blur(12px); color:var(--wld-floating-chat-text,#fff);font:700 .9rem/1 var(--ui-font-display);letter-spacing:.025em;outline:none;box-shadow:0 8px 22px rgba(0,0,0,.42); } [data-ui-theme="cyberlook"] .wld-floating-chat__input:focus{border-color:var(--cyber-cyan);box-shadow:0 0 0 2px rgba(34,224,255,.14),var(--cyber-glow-cyan)} [data-ui-theme="cyberlook"] .wld-floating-chat__input::placeholder{color:rgba(255,255,255,.5)} [data-ui-theme="cyberlook"] .wld-floating-chat__mic, [data-ui-theme="cyberlook"] .wld-floating-chat__send{ width:38px;height:38px;padding:0;border:1px solid rgba(34,224,255,.42);border-radius:0; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); background:var(--wld-floating-chat-bg,rgba(5,8,15,.88));color:var(--wld-floating-chat-text,var(--cyber-cyan));font:900 .66rem/1 var(--ui-font-display);cursor:pointer; } [data-ui-theme="cyberlook"] .wld-floating-chat__send{font-size:1.15rem;color:var(--wld-floating-chat-text,#fff)} [data-ui-theme="cyberlook"] .wld-floating-chat__mic:hover, [data-ui-theme="cyberlook"] .wld-floating-chat__send:hover{border-color:var(--cyber-cyan);box-shadow:var(--cyber-glow-cyan);transform:translateY(-2px)} [data-ui-theme="cyberlook"] .wld-floating-chat__mic.is-active{border-color:#41f5a0;background:rgba(20,126,78,.72);color:#fff;box-shadow:0 0 18px rgba(65,245,160,.48)} [data-ui-theme="cyberlook"] .wld-floating-chat__mic.is-error{border-color:var(--cyber-danger);color:var(--cyber-danger)} [data-ui-theme="cyberlook"] .wld-floating-chat__mic:disabled, [data-ui-theme="cyberlook"] .wld-floating-chat__send:disabled{opacity:.45;cursor:wait} @keyframes wld-floating-chat-arrive{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} } @media (max-width:720px){ [data-ui-theme="cyberlook"] .wld-floating-chat{left:12px;bottom:128px;width:min(88vw,420px);max-height:36vh} } /* Cyber-Ereignisfeed: positive Werte links, negative Werte rechts. Die alten grossen Zahlen-Anzeigen in der Bildschirmmitte sind in diesem Theme abgeschaltet — .wld-exp-reward NICHT mehr mit dabei (User-Vorgabe 2026-09-10): das ist keine Wert-Anzeige mehr, sondern die allgemeine Text-/Wort-Meldung (Quest/Item-benutzt/Fehler usw., siehe ui.js showStatusReward) und muss in JEDEM Theme sichtbar bleiben. */ html:not([data-ui-theme="cyberlook"]) .wld-cyber-events{display:none} [data-ui-theme="cyberlook"] .wld-spirit-reward, [data-ui-theme="cyberlook"] .wld-item-reward, [data-ui-theme="cyberlook"] .wld-damage-loss, [data-ui-theme="cyberlook"] .wld-combat-floats{display:none} [data-ui-theme="cyberlook"] .wld-cyber-events{ position:fixed;top:42%;z-index:59;width:min(360px,40vw);display:flex;flex-direction:column;gap:3px; pointer-events:none;font-family:var(--ui-font-display);perspective:800px; } /* ⚠ Position 2026-08-25 (User-Screenshot): vorher am Bildschirmrand (left/right:clamp(16px,...)) statt am Spieler — die Zahlen muessen direkt links/rechts NEBEN der Spielfigur erscheinen. Der Feed haengt sich jetzt an die Bildschirmmitte (wo die Figur steht) statt an den Rand; Design, Farben, Ausrichtung und Formatierung bleiben unangetastet. */ [data-ui-theme="cyberlook"] .wld-cyber-events.is-positive{right:calc(50% + 24px);left:auto;align-items:flex-start;text-align:left} [data-ui-theme="cyberlook"] .wld-cyber-events.is-negative{left:calc(50% + 24px);right:auto;align-items:flex-end;text-align:right} [data-ui-theme="cyberlook"] .wld-cyber-event{ --event-accent:var(--cyber-cyan);--event-enter-x:-42px;position:relative;isolation:isolate;display:flex;align-items:center; width:100%;min-height:42px;padding:4px 8px;overflow:visible;color:#fff;font-size:1rem; border:0;background:transparent;box-shadow:none;backdrop-filter:none;clip-path:none; filter:drop-shadow(0 5px 9px rgba(0,0,0,.94)); animation:wld-cyber-event-in 420ms cubic-bezier(.12,.9,.2,1.18) both; } [data-ui-theme="cyberlook"] .wld-cyber-events.is-negative .wld-cyber-event{--event-enter-x:42px;justify-content:flex-end} [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(2){font-size:.88rem;opacity:.88} [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(3){font-size:.76rem;opacity:.76} [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(4){font-size:.64rem;opacity:.64} [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(5){font-size:.53rem;opacity:.52} [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(6){font-size:.42rem;opacity:.4} [data-ui-theme="cyberlook"] .wld-cyber-event::before{ content:"";position:absolute;z-index:-1;left:0;top:50%;width:min(270px,100%);height:2px; background:linear-gradient(90deg,var(--event-accent),transparent);box-shadow:0 0 12px var(--event-accent); transform:translateY(-50%) scaleX(0);transform-origin:left;opacity:0;animation:wld-cyber-event-streak 720ms ease-out both; } [data-ui-theme="cyberlook"] .wld-cyber-events.is-negative .wld-cyber-event::before{ left:auto;right:0;transform-origin:right;background:linear-gradient(270deg,var(--event-accent),transparent) } [data-ui-theme="cyberlook"] .wld-cyber-event.is-damage{--event-accent:var(--cyber-cyan)} [data-ui-theme="cyberlook"] .wld-cyber-event.is-taken{--event-accent:var(--cyber-danger)} [data-ui-theme="cyberlook"] .wld-cyber-event.is-crit{--event-accent:var(--cyber-purple-bright)} [data-ui-theme="cyberlook"] .wld-cyber-event.is-exp{--event-accent:var(--cyber-gold)} [data-ui-theme="cyberlook"] .wld-cyber-event.is-loot{--event-accent:#41f5a0} [data-ui-theme="cyberlook"] .wld-cyber-event.is-system{--event-accent:var(--cyber-purple-bright)} [data-ui-theme="cyberlook"] .wld-cyber-event.is-leaving{animation:wld-cyber-event-out 480ms cubic-bezier(.65,0,.9,.3) both} /* Im Cyber-HUD bleibt bewusst nur der kompakte Wert sichtbar: +10 EXP usw. */ [data-ui-theme="cyberlook"] .wld-cyber-event__badge, [data-ui-theme="cyberlook"] .wld-cyber-event__label, [data-ui-theme="cyberlook"] .wld-cyber-event__detail, [data-ui-theme="cyberlook"] .wld-cyber-event__timer{display:none} [data-ui-theme="cyberlook"] .wld-cyber-event__copy{ min-width:0;display:block;animation:wld-cyber-event-float 2.8s ease-in-out 420ms infinite alternate } [data-ui-theme="cyberlook"] .wld-cyber-event:nth-child(even) .wld-cyber-event__copy{animation-delay:720ms} [data-ui-theme="cyberlook"] .wld-cyber-event__value{ display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff; font-size:2em;font-weight:900;line-height:1;letter-spacing:.045em;text-transform:uppercase; text-shadow:0 3px 6px #000,0 0 6px #fff,0 0 16px var(--event-accent),0 0 34px var(--event-accent); } @keyframes wld-cyber-event-in{ 0%{opacity:0;transform:translate3d(var(--event-enter-x),22px,0) skewX(-8deg) scale(.55);filter:blur(8px) brightness(2.5)} 65%{opacity:1;transform:translate3d(5px,-3px,0) skewX(2deg) scale(1.06);filter:blur(0) brightness(1.7)} 100%{transform:translate3d(0,0,0) skewX(0) scale(1);filter:blur(0) brightness(1)} } @keyframes wld-cyber-event-out{ 0%{filter:blur(0) brightness(1)} 100%{opacity:0;transform:translate3d(var(--event-enter-x),-28px,0) scale(.65);filter:blur(7px) brightness(2.2)} } @keyframes wld-cyber-event-streak{ 0%{opacity:0;transform:translateY(-50%) scaleX(0)} 35%{opacity:.9;transform:translateY(-50%) scaleX(1)} 100%{opacity:0;transform:translateY(-50%) scaleX(.18)} } @keyframes wld-cyber-event-float{ from{transform:translate3d(0,-2px,0) rotate(-.25deg)} to{transform:translate3d(8px,4px,0) rotate(.35deg)} } [data-ui-theme="cyberlook"] .wld-cyber-events.is-negative .wld-cyber-event__copy{ animation-name:wld-cyber-event-float-negative } @keyframes wld-cyber-event-float-negative{ from{transform:translate3d(0,-2px,0) rotate(.25deg)} to{transform:translate3d(-8px,4px,0) rotate(-.35deg)} } @media (max-width:720px){ [data-ui-theme="cyberlook"] .wld-cyber-events{top:40%;width:45vw} [data-ui-theme="cyberlook"] .wld-cyber-events.is-positive{right:calc(50% + 10px);left:auto} [data-ui-theme="cyberlook"] .wld-cyber-events.is-negative{left:calc(50% + 10px);right:auto} [data-ui-theme="cyberlook"] .wld-cyber-event{min-height:34px;padding:3px 4px;font-size:.78rem} } /* ── "Skill Editor 2.0" (User-Vorgabe 2026-09-09) ────────────────────────── Der EINZIGE dedizierte Cyberlook-Durchgang für eine Admin-Oberfläche im ganzen Projekt (siehe Kopfkommentar dieser Datei, "Absichtlich NICHT angefasst... Admin-Oberflächen (.wld-qadmin bekommt höchstens beiläufig etwas von der Foundation ab)") - bewusst nur für #wld-skill-admin, NICHT für .wld-qadmin allgemein, damit quest-admin.js & Co. wie zuvor unverändert bleiben. Der Skill-Editor soll "wie Teil des Spiels wirken, nicht wie ein separates Tool" (User-Vorgabe), deshalb dieselben Cut-Corner- Formen/Glüh-Farben wie Hotbar/HUD weiter oben, nicht bloß eingefärbt. */ [data-ui-theme="cyberlook"] #wld-skill-admin{background:var(--cyber-bg-0)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__bar{ background:linear-gradient(180deg,var(--cyber-bg-1),var(--cyber-bg-0)); border-bottom:1px solid var(--cyber-line-bright); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__title{ color:var(--cyber-cyan);text-shadow:0 0 10px rgba(34,224,255,.4);letter-spacing:.02em; } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__tab{ border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); border-color:var(--cyber-line); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__tab.is-active{ border-color:var(--cyber-cyan);color:var(--cyber-cyan);box-shadow:var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__list{ background:var(--cyber-bg-1);border-right-color:var(--cyber-line); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__item{ border-radius:0;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); border-color:var(--cyber-line);background:var(--cyber-bg-2); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__item.is-active{ border-color:var(--cyber-purple);border-left-color:var(--cyber-cyan); background:rgba(171,39,232,.12);box-shadow:var(--cyber-glow-purple); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__edit{background:var(--cyber-bg-0)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qa-section{ background:var(--cyber-bg-1);border-color:var(--cyber-line);border-radius:0; clip-path:polygon(0 0,calc(100% - var(--cyber-cut-md)) 0,100% var(--cyber-cut-md),100% 100%,var(--cyber-cut-md) 100%,0 calc(100% - var(--cyber-cut-md))); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qa-section__title{color:var(--cyber-cyan)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__h{ color:var(--cyber-purple-bright);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem; } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-tpadmin__input{ background:var(--cyber-bg-2);border-color:var(--cyber-line);color:var(--cyber-text);border-radius:0; } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-tpadmin__input:focus{ border-color:var(--cyber-cyan);box-shadow:var(--cyber-glow-cyan);outline:none; } /* Vorschauspalte: eigener Akzent statt Formularfeld-Optik - soll wie ein "Fenster in die Welt" wirken. */ [data-ui-theme="cyberlook"] #wld-skill-admin .wld-qadmin__preview{ background:var(--cyber-bg-1);border-left-color:var(--cyber-line-bright); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skpreview__title{ color:var(--cyber-cyan);text-transform:uppercase;letter-spacing:.06em;font-size:12px; } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skpreview__viewport{ border-color:var(--cyber-purple);box-shadow:var(--cyber-glow-purple),inset 0 0 40px rgba(34,224,255,.06); } /* "Freischaltungen"-Tab (User-Vorgabe 2026-09-10): fehlte bisher komplett in diesem Durchgang - die Liste sah neben dem aufgehuebschten Skills-Tab noch nach dem alten qadmin-Look aus (siehe .wld-qadmin__item weiter oben). Gleiche Cut-Corner-Karten-Sprache; die Buttons (wld-btn--primary/--danger) sind bereits global gestylt (siehe weiter oben in dieser Datei), hier nur die Liste/Karten/Badges drumherum. */ [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlocks{background:var(--cyber-bg-0)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlock{ background:var(--cyber-bg-1);border-color:var(--cyber-line);border-radius:0; clip-path:polygon(0 0,calc(100% - var(--cyber-cut-md)) 0,100% var(--cyber-cut-md),100% 100%,var(--cyber-cut-md) 100%,0 calc(100% - var(--cyber-cut-md))); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlock.is-pending{ border-color:var(--cyber-cyan);box-shadow:var(--cyber-glow-cyan); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlockhead strong{color:var(--cyber-text)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__muted{color:var(--cyber-muted)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__badge{ border-radius:0;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); background:rgba(255,255,255,.06);color:var(--cyber-muted);text-transform:uppercase;letter-spacing:.04em; } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__badge[data-status="pending"]{ background:rgba(34,224,255,.14);color:var(--cyber-cyan);box-shadow:0 0 8px rgba(34,224,255,.35); } [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlockmeta{color:var(--cyber-muted)} [data-ui-theme="cyberlook"] #wld-skill-admin .wld-skadmin__unlockactions .wld-btn{border-radius:0} /* User-Vorgabe Punkt 29: reduzierte Bewegung fast vollstaendig abschalten. */ @media (prefers-reduced-motion:reduce){ [data-ui-theme="cyberlook"] *{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } /* AUSNAHME (Fund 2026-09-10): die kurzen Einblend-Meldungen (Quest/Item- benutzt/Fehler, Spirit/Crystal/EXP-Belohnung, Schaden/HP-Verlust) laufen alle ueber eine 0%→100%→0%-Opazitaets-Animation (erst rein-, dann wieder ausblenden). Bei .01ms Dauer ist die Animation VORBEI, bevor der Browser ueberhaupt ein Bild zeichnet — der Browser springt direkt zum LETZTEN Frame (`100%{opacity:0}`) und die Meldung wird nie sichtbar, statt nur "ohne Bewegung" zu erscheinen ("Item benutzt"-Text komplett unsichtbar, User-Meldung). Eine kuerzere, aber nicht-Null Dauer haelt "kaum Bewegung" ein UND bleibt lesbar. Hoehere Spezifitaet als `*` oben gewinnt trotz beiderseitigem `!important`. */ [data-ui-theme="cyberlook"] .wld-exp-reward.is-on, [data-ui-theme="cyberlook"] .wld-toast.is-on, [data-ui-theme="cyberlook"] .wld-spirit-reward.is-on, [data-ui-theme="cyberlook"] .wld-item-reward.is-on, [data-ui-theme="cyberlook"] .wld-damage-loss.is-on, [data-ui-theme="cyberlook"] .wld-combat-float{ animation-duration:700ms !important; } } /* Fragmentarium keeps its illustrated background in every theme. The shared panel shorthand above must not replace this artwork with a flat surface. */ [data-ui-theme="cyberlook"] .wld-shard-shrine__panel{ background-color:#100a19; background-image:var(--wld-fragmentarium-background); background-position:center; background-size:100% 100%; background-repeat:no-repeat; clip-path:none; }