/* Chat Tower Companion — Neon-Outline Style passend zum Game.
 * Palette identisch mit index.html / game.js:
 *   BG       #06080f
 *   Cyan     #38e1ff
 *   Magenta  #ff45b5
 *   Yellow   #ffd84a
 *   Green    #5eff8a
 *   Red      #ff4d6e
 *   Text     #cbd5e1
 *   Muted    #5c6479
 */

:root {
  --bg:      #06080f;
  --bg-2:    #0d1322;
  --panel:   #11162a;
  --line:    #1c2742;
  --line-2:  #2a334e;
  --text:    #d8e0f0;
  --muted:   #6b7a96;
  --cyan:    #38e1ff;
  --magenta: #ff45b5;
  --magenta-light: #ff7ccb;
  --yellow:  #ffd84a;
  --green:   #5eff8a;
  --red:     #ff4d6e;
  --red-light: #ff7c92;
  /* ui-057: Sekundär-Blaugrau — synchron mit viewer.html --text-dim */
  --text-dim: #8aa0c0;
  /* ui-058: Podium-Farben — synchron mit viewer.html --rank-* (für .ct-rank-1/2/3) */
  --rank-1: #5eb8ff;
  --rank-2: #c0c8d4;
  --rank-3: #cd7f32;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #0a0f24 0%, #06080f 60%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, "Courier New", monospace;
  background: rgba(56, 225, 255, 0.08);
  color: var(--cyan);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-size: 0.92em;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.5em 1em;
  border-radius: 4px;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
button:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.3);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Layout ===== */

/* BETA-Warn-Banner (gelockt 2026-05-25): permanent sichtbar, nicht dismissable,
   Top-of-Page (greift schon beim Login). Wording identisch zum Game-HUD
   (#hud-beta-warn in index.html); Gelb/Orange-Tint gewollt symmetrisch — gleiches
   Hex-Set (#ffa033 Border, #ffc266 Text), nur als horizontaler Banner statt Pill,
   weil hier die volle Page-Breite zur Verfügung steht. */
.beta-warn-banner {
  background: rgba(255, 160, 51, 0.14);
  color: #ffc266;
  border-bottom: 1px solid #ffa033;
  padding: 0.5em 1.5em;
  text-align: center;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* PTR-Banner (ops-007): Umgebungs-Kennzeichnung fuer die Public-Test-Realm-Instanz.
   Vollbreit, ganz oben — UEBER dem .beta-warn-banner (Umgebungs-Identitaet zuerst).
   Muster gespiegelt von .beta-warn-banner, aber rot (var(--red) = Gefahr/"nicht Prod").
   Tokens statt Hex-Hardcode. Permanent, nicht dismissbar. Gerendert iff config.ptrMode. */
.ptr-banner {
  background: rgba(255, 77, 110, 0.14);
  color: var(--red-light);
  border-bottom: 1px solid var(--red);
  padding: 0.5em 1.5em;
  text-align: center;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  flex-wrap: wrap;
}
/* Dev-Login-Affordance: Utility-Link in der Leiste → /dev/ (Mock-Login-Index).
   Neutral-hell (var(--text), kein Game-Farb-Rollen-Konflikt), Tap-Hoehe ≥ 44px via Padding. */
.ptr-banner .ptr-devlink {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}
.ptr-banner .ptr-devlink:hover {
  color: #fff;
  text-decoration: underline;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1.5em;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 15, 0.7);
  backdrop-filter: blur(4px);
}
.site-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.5);
}
.site-nav { display: flex; align-items: center; gap: 1em; }
.nav-link { color: var(--text); }
.nav-user { color: var(--muted); font-size: 0.9em; }
.logout-form { margin: 0; }
.nav-logout {
  padding: 0.3em 0.7em; font-size: 0.85em;
  border: 1px solid var(--line);
  color: var(--muted);
}
.nav-logout:hover { color: var(--magenta); border-color: var(--magenta); }

.site-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5em;
}

.site-footer {
  margin-top: 3em;
  padding: 1em;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85em;
  text-align: center;
}

/* ===== Landing ===== */

.landing { text-align: center; padding: 3em 1em; }
.hero-title {
  font-size: 3em;
  margin: 0 0 0.3em;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 0 20px rgba(56, 225, 255, 0.3);
}
.hero-accent {
  color: var(--magenta);
  text-shadow: 0 0 20px rgba(255, 69, 181, 0.6);
}
.hero-tagline {
  font-size: 1.1em;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 2em;
  line-height: 1.5;
}
.hero-cta {
  display: inline-block;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.8em 2em;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hero-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(56, 225, 255, 0.6);
}
.hero-info {
  max-width: 600px;
  margin: 3em auto 0;
  text-align: left;
  padding: 1.5em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.hero-info { margin-top: 2em; }
.hero-info h2 { color: var(--cyan); margin-top: 0; }
.hero-info ul { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info li { color: var(--text); }
.hero-info .info-lead { line-height: 1.6; margin: 0 0 1em; color: var(--text); }
.hero-info .info-lead strong { color: var(--magenta); }
.hero-info .info-bullets { margin: 0; padding-left: 1.3em; line-height: 1.7; }
.hero-info .info-bullets em { color: var(--yellow); font-style: normal; }
.hero-info .info-foot {
  margin: 1.2em 0 0;
  padding-top: 1em;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.9em;
}

/* ===== Help-Seite ===== */

.help-page { padding: 1em 0 3em; }
.help-header { margin-bottom: 2em; }
.help-header h1 {
  font-size: 2em;
  margin: 0 0 0.3em;
  color: var(--text);
  text-shadow: 0 0 12px rgba(56, 225, 255, 0.25);
}
.help-header h1::before {
  content: '⚙ ';
  color: var(--cyan);
}
.help-lead { color: var(--muted); line-height: 1.5; max-width: 720px; margin: 0; }

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 1em;
  margin-bottom: 2em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.help-toc a {
  font-size: 0.9em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  color: var(--muted);
}
.help-toc a:hover {
  text-decoration: none;
  color: var(--cyan);
  border-color: var(--cyan);
}

.help-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.4em 1.6em;
  margin-bottom: 1.2em;
  scroll-margin-top: 1em;
}
.help-section h2 {
  color: var(--cyan);
  font-size: 1.25em;
  margin: 0 0 0.7em;
  letter-spacing: 0.01em;
}
.help-section p {
  line-height: 1.6;
  margin: 0 0 0.8em;
  color: var(--text);
}
.help-section p:last-child { margin-bottom: 0; }
.help-section strong { color: var(--magenta); }
.help-section em { color: var(--yellow); font-style: normal; }
.help-section ul { line-height: 1.7; padding-left: 1.3em; margin: 0 0 0.8em; }
.help-section ul li { color: var(--text); }

.help-hint {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0 0 1em !important;
}

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.help-table th, .help-table td {
  text-align: left;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--line);
}
.help-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.help-table td:first-child { width: 8em; }
.help-table tr:last-child td { border-bottom: none; }

/* Catalog (Effekt-/Waffen-Karten) */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7em;
}
.catalog-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.7em 0.9em;
}
.catalog-card.weapon-catalog-card {
  border-color: rgba(255, 216, 74, 0.25);
}
.catalog-card.weapon-catalog-card.is-default {
  border-color: rgba(94, 255, 138, 0.35);
  background: rgba(94, 255, 138, 0.04);
}
.catalog-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
}
.catalog-symbol {
  color: var(--yellow);
  font-size: 1.25em;
  min-width: 1.4em;
  text-align: center;
}
.catalog-symbol.weapon-symbol { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 216, 74, 0.4); }

/* Credits-Icon — Inline-SVG-Coin als Ersatz fürs textuelle Ⓒ. Wird via
   effectSymbolHTML() (catalog.js) bzw. renderSymbolHTML() (public/app.js)
   überall eingesetzt, wo der Income-Effekt symbolisch dargestellt wird.
   Identisches Design wie game-seitig in index.html — cyan Glow-Ring + dunkler
   Coin-Body + golden C-Bogen. */
.credit-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='none' stroke='%2338e1ff' stroke-opacity='0.4' stroke-width='1.5'/><circle cx='12' cy='12' r='8.5' fill='%230d1322' stroke='%2338e1ff' stroke-width='1.4'/><path d='M16.4 8.6 A5.2 5.2 0 1 0 16.4 15.4' fill='none' stroke='%23ffd84a' stroke-width='2.3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 2px rgba(56, 225, 255, 0.55));
}
/* In der Catalog-Card-Symbol-Zelle ist die Schriftgröße 1.25em — Icon soll
   das gleiche optische Gewicht haben wie die anderen Glyphen ⚔ ⏱ ✦ … */
.catalog-symbol .credit-icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
/* Im Reveal-Modal (Draw-Animation) ist die Glyph-Größe 2.5em — Icon entsprechend
   größer rendern; der Glow darf hier kräftiger sein. */
.draw-result .reveal-symbol .credit-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  filter: drop-shadow(0 0 6px rgba(56, 225, 255, 0.7));
}
.catalog-label { font-weight: 600; color: var(--text); flex: 1; }
.catalog-tag {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green);
  background: rgba(94, 255, 138, 0.08);
  padding: 0.15em 0.5em;
  border-radius: 10px;
}
.catalog-desc {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88em;
  line-height: 1.45;
}

/* Build-Karten */
.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8em;
}
.build-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9em 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.build-name {
  color: var(--magenta);
  font-weight: 600;
  font-size: 1.05em;
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.25);
}
.build-meta { font-size: 0.85em; color: var(--muted); }
.build-weapon { color: var(--yellow); }
.build-sockets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.build-sockets li {
  background: rgba(56, 225, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0.2em 0.6em;
  font-size: 0.85em;
  color: var(--text);
}
.build-sym { color: var(--yellow); margin-right: 0.2em; }
.build-note {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88em !important;
  line-height: 1.45;
}

/* FAQ */
.faq-list { margin: 0; }
.faq-list dt {
  color: var(--cyan);
  font-weight: 600;
  margin: 0 0 0.3em;
}
.faq-list dt::before {
  content: '› ';
  color: var(--magenta);
}
.faq-list dd {
  margin: 0 0 1.2em;
  padding-left: 1em;
  color: var(--text);
  line-height: 1.5;
  border-left: 2px solid var(--line);
}
.faq-list dd:last-child { margin-bottom: 0; }

.help-foot {
  text-align: center;
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
  .help-toc { flex-direction: column; }
  .help-toc a { text-align: center; }
  .help-table { font-size: 0.85em; }
  .help-table th, .help-table td { padding: 0.4em 0.5em; }
  .help-table td:first-child { width: auto; }
}

/* ===== Dashboard ===== */

.dashboard { padding: 0.5em 0; }
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--line);
}
.dash-id { display: flex; flex-direction: column; }
.dash-name { font-size: 1.4em; font-weight: 600; color: var(--text); }
.dash-handle { color: var(--muted); font-size: 0.9em; }

.dash-stats { display: flex; gap: 0.8em; flex-wrap: wrap; }
.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5em 1em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 5em;
}
.stat-num { font-size: 1.4em; font-weight: 600; color: var(--cyan); }
.stat-num.weapon-glyph {
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
}
/* ui-040: Glyph-<img> (Canvas-Render, hydriert via app.js). Fallback-Symbol bleibt via
   CSS color; nach Hydration ersetzt das <img> den Text (textContent = ''). */
.stat-num.weapon-glyph img.wg-img {
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 216, 74, 0.5));
}
.stat-label { font-size: 0.75em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.dash-tabs {
  display: flex;
  gap: 0;
  margin: 1.5em 0 1em;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.dash-tab {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.3em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.dash-tab:hover { color: var(--text); text-decoration: none; }
.dash-tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.3);
}
.tab-icon { font-size: 1.1em; }
.tab-label { font-weight: 500; }

/* ===== Panels ===== */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.2em 1.4em;
  margin-bottom: 1em;
}
.panel-title {
  margin: 0 0 0.4em;
  color: var(--cyan);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.panel-hint {
  margin: 0 0 1em;
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
}
.panel-empty {
  color: var(--muted);
  font-style: italic;
  padding: 1em 0;
}

/* ===== Cards / Pills ===== */

.card-groups { display: flex; flex-direction: column; gap: 0.8em; }
.card-group {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.6em 0.8em;
}
.card-group-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.card-group-symbol {
  color: var(--yellow);
  font-size: 1.1em;
  min-width: 1.4em;
  text-align: center;
}
.card-group-label { color: var(--text); font-weight: 500; flex: 1; }
.card-group-count {
  color: var(--muted);
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.1em 0.5em;
  border-radius: 3px;
}

.card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(56, 225, 255, 0.04);
  font-size: 0.9em;
  position: relative;
}
.card-pill.equipped {
  border-color: var(--green);
  background: rgba(94, 255, 138, 0.08);
  box-shadow: 0 0 8px rgba(94, 255, 138, 0.3);
}
.pill-symbol { color: var(--yellow); }
.pill-tier { color: var(--cyan); font-weight: 500; }
.pill-bonus { color: var(--muted); font-size: 0.85em; }
.pill-eq { color: var(--green); font-weight: 700; }

.card-pill.weapon-pill {
  background: rgba(255, 216, 74, 0.06);
  border-color: rgba(255, 216, 74, 0.3);
}
.card-pill.weapon-pill .pill-tier { color: var(--yellow); }

/* ===== Merge ===== */

.merge-hints { margin-top: 0.6em; display: flex; flex-wrap: wrap; gap: 0.4em; }
.merge-btn {
  background: rgba(255, 69, 181, 0.08);
  border-color: var(--magenta);
  color: var(--magenta);
  font-size: 0.85em;
  padding: 0.3em 0.7em;
}
.merge-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 69, 181, 0.2);
  box-shadow: 0 0 12px rgba(255, 69, 181, 0.4);
  border-color: var(--magenta);
}

/* ===== Sockel ===== */

.socket-list { display: flex; flex-direction: column; gap: 0.5em; }
.socket-row {
  display: grid;
  grid-template-columns: 2em 3em 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.8em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.socket-icon { color: var(--cyan); font-size: 1.2em; }
.socket-slot-index { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.9em; }
.socket-select {
  font-family: inherit;
  font-size: 0.9em;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 0.3em 0.5em;
  width: 100%;
}
.socket-select:focus { outline: none; border-color: var(--cyan); }
.socket-status {
  font-size: 0.85em;
  color: var(--green);
  min-width: 8em;
  text-align: right;
}
.socket-status.muted { color: var(--muted); font-style: italic; }
.socket-preview {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dashed var(--line);
}
.socket-preview h3 { color: var(--magenta); font-size: 0.95em; margin: 0 0 0.4em; }
.preview-list { margin: 0; padding-left: 1.3em; color: var(--text); }
.preview-list li { padding: 0.15em 0; }

/* ===== Waffenslot ===== */

.weapon-current {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  margin-bottom: 1em;
  background: var(--bg-2);
  border: 1px solid var(--yellow);
  border-radius: 5px;
  box-shadow: 0 0 16px rgba(255, 216, 74, 0.15);
}
.weapon-current-glyph {
  font-size: 2em;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.6);
  min-width: 1.4em;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
/* ui-040: Glyph-<img> für aktuelle Waffe — Gold-Glow via filter (DL-3). */
.weapon-current-glyph img.wg-img {
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 216, 74, 0.6));
}
.weapon-current-text { display: flex; flex-direction: column; }
.weapon-current-label { font-size: 0.8em; color: var(--muted); text-transform: uppercase; }
.weapon-current-name { font-size: 1.2em; font-weight: 600; color: var(--text); }

.weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6em;
}
.weapon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.8em 0.6em;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  text-align: center;
}
.weapon-card.equipped {
  border-color: var(--yellow);
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.3);
}
.weapon-card.locked { opacity: 0.35; cursor: not-allowed; }
.weapon-card:hover:not(:disabled):not(.equipped) {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.3);
}
.wc-glyph { font-size: 1.5em; color: var(--yellow); display: flex; align-items: center; justify-content: center; }
/* ui-040: Glyph-<img> für Waffenslot-Karten — Gold-Glow (DL-3). */
.wc-glyph img.wg-img {
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 216, 74, 0.45));
}
.wc-label { font-weight: 500; }
.wc-status { font-size: 0.75em; color: var(--muted); }
.weapon-card.equipped .wc-status { color: var(--yellow); }

/* ===== Draws ===== */

.draws-panel { text-align: center; padding: 2em 1em; }
.draw-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}
.draw-counter { display: flex; flex-direction: column; align-items: center; }
.draw-counter #draws-remaining-big,
.draw-counter span:first-child {
  font-size: 3em;
  font-weight: 700;
  color: var(--magenta);
  text-shadow: 0 0 20px rgba(255, 69, 181, 0.4);
  line-height: 1;
}
.draw-counter-label { color: var(--muted); text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; }

.draw-btn {
  font-size: 1.2em;
  padding: 0.7em 2em;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(56, 225, 255, 0.4);
  transition: transform 0.1s, box-shadow 0.15s;
}
.draw-btn:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 0 32px rgba(56, 225, 255, 0.6);
  color: var(--bg);
}
.draw-btn:disabled { background: var(--line-2); color: var(--muted); box-shadow: none; }

.draw-result {
  min-height: 5em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

/* ===== Draw-Karte Flip-Wrapper (web-043, 2026-06-07) ===== */
/* Dreistufige Hierarchie: perspective-Container → preserve-3d-Inner → Vor-/Rückseite.
   Flip via CSS-transition (nicht @keyframes): Cross-Browser-robust (Chrome + Firefox).
   Der frühere @keyframes-Restart (animation:none → rAF → animation) lief in Chrome,
   blieb aber in Firefox aus (Karte sprang sofort auf die Vorderseite). */

.draw-flip-wrapper {
  perspective: 600px;
  width: 120px;
  height: 180px;
  flex-shrink: 0;
}

.draw-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* KEIN overflow:hidden auf den Faces! Firefox behandelt ein backface-visibility:hidden-
   Face mit overflow!=visible als geflättet (eigener Flattening-Context) → Backface-
   Culling bricht, Vorderseite rendert durch, Rückseite unsichtbar (DL-2 Cross-Browser). */
.draw-flip-front,
.draw-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
}

/* Explizites rotateY(0deg) auf Vorderseite ist PFLICHT für Firefox-Culling.
   Firefox cullt ein backface-visibility:hidden-Face nur zuverlässig, wenn es ein
   eigenes rotateY-Transform hat. Mit transform:none cullt FF die Vorderseite beim
   Flip-Start nicht — sie überdeckt die Rückseite (DL-1). */
.draw-flip-front {
  transform: rotateY(0deg);
}

.draw-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(155deg, #131a44 0%, #0c1230 100%);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

/* Hexagon-Rücken-Motiv: inline-SVG (robuster als clip-path bei preserve-3d,
   bekannter Safari-Bug: clip-path erzeugt eigenen Stacking-Context) — DL-3. */
.draw-flip-back-hexagon {
  width: 64px;
  height: 72px;
  opacity: 0.18;
  flex-shrink: 0;
}
.draw-flip-back-hexagon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px var(--cyan));
}

.draw-flip-back-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}

/* Glow-Shadow erscheint nach Flip-Ende (DL-7): .flipped via transitionend-Event in JS */
.draw-flip-inner.flipped .cs-card {
  box-shadow:
    0 0 0 1px var(--card-color, var(--cyan)),
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 32px var(--card-glow, rgba(56, 225, 255, 0.4));
}

/* Waffen-Karte: Yellow-Override via .is-weapon-Klasse (additiv, kein .cs-card-Override) — DL-6, DL-9 */
.cs-card.is-weapon {
  --card-color: var(--yellow);
  --card-glow: rgba(255, 216, 74, 0.55);
}

/* Waffen-Badge ("WAFFE") und Waffen-Bonus-Label für Draw-Karte */
.cs-card-tier-badge.weapon-badge {
  background: var(--yellow);
  color: #07091a;
  letter-spacing: 0.06em;
}
.cs-card-bonus.is-weapon-label {
  font-size: 12px;
  font-weight: 600;
}

.panel-title-sub {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.7em;
  letter-spacing: 0.05em;
  text-transform: none;
  margin-left: 0.6em;
}
.hexa-totals {
  display: flex;
  gap: 1em;
  margin: 1em 0 1.5em;
  flex-wrap: wrap;
}
.hexa-totals .stat-pill.big .stat-num {
  color: var(--magenta);
  text-shadow: 0 0 16px rgba(255, 69, 181, 0.5);
  font-size: 2.2em;
}

.hexa-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
.hexa-table th {
  color: var(--muted);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: left;
  padding: 0.4em 0.8em;
  border-bottom: 1px solid var(--line);
}
.hexa-table th.num { text-align: right; }
.hexa-table td {
  padding: 0.55em 0.8em;
  border-bottom: 1px solid var(--line);
}
.hexa-table td.num { text-align: right; }

/* ===== Mobile ===== */
@media (max-width: 600px) {
  .site-main { padding: 1em; }
  .hero-title { font-size: 2em; }
  .dash-header { flex-direction: column; align-items: flex-start; }
  .socket-row {
    grid-template-columns: 2em 1fr;
    grid-template-rows: auto auto;
  }
  .socket-icon, .socket-slot-index { grid-row: 1; }
  .socket-select { grid-column: 1 / -1; grid-row: 2; }
  .socket-status { grid-column: 1 / -1; text-align: left; }
  /* Achievement-Tab — Mobile (Design-Lock D10) */
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-weapon-tabs { gap: 0.35em; }
  .achievement-weapon-tab { padding: 0.4em 0.65em; font-size: 0.82em; }
  .achievement-card { padding: 0.85em 0.9em; }
}

/* =====================================================================
   Highscore / Runs (web/highscore-rankings, 2026-05-26)
   ===================================================================== */
/* Public /highscore + Dashboard-Runs-Tab teilen .hs-table — strukturell
   identisch zu .hexa-table aber visuell separat damit Tweaks an einer Seite
   die andere nicht versehentlich mit-bewegen. */
.highscore {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* ui-058: .ct-rank* — geteiltes Ranking/Table Utility-Set (Companion-Kopie, DL-2)
   Zwei Definitions-Orte: viewer.html-inline (Game) + hier (Companion).
   Rollen, nicht Struktur: Font + tabular-nums + Akzent-Rollen + Podium.
   Keine Größen/Paddings — die bleiben pro Surface.
   .hs-table ist Co-Selektor → kein Markup-Change in highscore.js nötig. */
.ct-rank,
.hs-table,
.hs-participant-table { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.ct-rank-head,
.hs-table th,
.hs-participant-table th { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line); }
.ct-rank-num,
.hs-table td.num,
.hs-table th.num,
.hs-participant-table td.num,
.hs-participant-table th.num { text-align: right; }
.ct-rank-name { color: var(--cyan); font-weight: 600; }
.ct-rank-pos  { color: var(--yellow); font-weight: 700; }
.ct-rank-1 { color: var(--rank-1); font-weight: 700; text-shadow: 0 0 10px rgba(94, 184, 255, 0.7); }
.ct-rank-2 { color: var(--rank-2); font-weight: 700; text-shadow: 0 0 8px rgba(192, 200, 212, 0.6); }
.ct-rank-3 { color: var(--rank-3); font-weight: 700; text-shadow: 0 0 8px rgba(205, 127, 50, 0.6); }

.hs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5em;
  font-size: 0.92em;
}
.hs-table th {
  /* ui-058: color/uppercase/border-bottom kommen aus .ct-rank-head co-selector */
  /* DL-4: Companion-Original-Wert; ueberschreibt .ct-rank-head's .1em zurueck */
  letter-spacing: 0.08em;
  font-size: 0.75em;
  font-weight: 500;
  text-align: left;
  padding: 0.4em 0.8em;
}
.hs-table th.hs-th-expand { text-align: center; }
.hs-table td {
  padding: 0.55em 0.8em;
  border-bottom: 1px solid var(--line);
}

.hs-row { transition: background 0.12s; }
.hs-row:hover { background: rgba(56, 225, 255, 0.04); }
.hs-row--top td {
  /* Platz 1 leicht hervorgehoben — magenta-Tinge wie Boss-Glow, ohne den
     restlichen Cyan-Akzent zu uebertoenen. */
  color: var(--text);
}
.hs-row--top .hs-rank {
  color: var(--magenta);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 69, 181, 0.4);
}
.hs-row--expanded {
  background: rgba(56, 225, 255, 0.06);
}
.hs-row--expanded td { border-bottom-color: transparent; }

.hs-expand-link {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.85em;
  letter-spacing: 0.03em;
  transition: border-color 0.12s, color 0.12s;
}
.hs-expand-link:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Details-Row mit colspan: keine eigenen Borders, inner-padding nur am
   .hs-details-cell-Container damit's nicht doppelt aussieht. */
.hs-details-row td { border-bottom: 1px solid var(--line); }
.hs-details-cell {
  padding: 0.8em 1.2em 1.2em 1.2em;
  background: rgba(31, 39, 64, 0.35);
}

.hs-participant-table {
  /* ui-058: font-family/tabular-nums kommen aus .ct-rank-head co-selector */
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}
.hs-participant-table th {
  /* ui-058: color/uppercase/border-bottom kommen aus .ct-rank-head co-selector */
  /* DL-4: Companion-Original-Wert; ueberschreibt .ct-rank-head's .1em zurueck */
  letter-spacing: 0.08em;
  font-size: 0.7em;
  font-weight: 500;
  text-align: left;
  padding: 0.3em 0.7em;
}
.hs-participant-table td {
  padding: 0.4em 0.7em;
  border-bottom: 1px solid rgba(31, 39, 64, 0.5);
}
/* ui-058: td.num + th.num text-align: right kommt aus .ct-rank-num co-selector */
.hs-participant-table tr:last-child td { border-bottom: none; }
.hs-participant-table .hs-dmg-pct-inline { color: var(--text-dim); }

/* web-077: Versions-Tag-Pill — dezenter Neutral-Chip (DL-3/DL-4).
   Genutzt von /highscore und Dashboard-Runs-Tab.
   Neutral-Farbrolle (muted + line-2): bewusst NICHT Cyan (= interaktiv/primär),
   NICHT Magenta (= Hexa). Kein Glow, kein Hover-Akzent (nicht interaktiv). */
.hs-version {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Baseline-Variante: Alt-Runs ohne Versions-Tag (app_version = NULL).
   Gedämpft + kursiv + gestrichelt → liest als "keine echte Version",
   nicht als echte v0.1.0. Deckt sich mit Architektur-Lock "kein Default-Stempel". */
.hs-version--baseline {
  opacity: 0.65;
  font-style: italic;
  border-style: dashed;
}
/* web-079 DL-7: verlinkter Version-Pill (Muster wie .hs-expand-link).
   Default bleibt dezent/muted — kein dauerhaftes Cyan (sonst schreit jede Pille).
   Hover → cyan; Reihenfolge hier direkt nach .hs-version-Block (DL-9). */
a.hs-version {
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  text-decoration: none;
}
a.hs-version:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* =================================================================
   Changelog / Patch-Notes (web-079)
   Content-Surface analog /glossar. Eigene .cl-*-Klassen (DL-2/DL-9).
   Tokens via var(--*), kein Hex-Hardcode (DL-8).
   ================================================================= */

/* Index-Seite: vertikale Release-Liste (DL-3) */
.cl-index-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.6em;
}
.cl-index-row {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  transition: border-color 0.12s;
}
.cl-index-row:hover {
  border-color: var(--line-2);
}
.cl-index-row .hs-version {
  font-size: 0.9em;
}
.cl-index-date {
  color: var(--muted);
  font-size: 0.85em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-width: 6.5em;
}
.cl-index-teaser {
  color: var(--muted-2);
  font-size: 0.9em;
  flex: 1;
}
.cl-index-counts {
  display: flex;
  gap: 0.5em;
  font-size: 0.72em;
}
.cl-count {
  padding: 0.05em 0.45em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}

/* Per-Version-Seite: Breadcrumb / Titel / Meta (DL-4) */
.cl-breadcrumb {
  color: var(--muted);
  font-size: 0.85em;
  margin-bottom: 0.6em;
}
.cl-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.cl-breadcrumb a:hover {
  color: var(--cyan);
}
.cl-title {
  font-size: 1.6em;
  color: var(--cyan);
  margin: 0 0 0.15em;
}
.cl-meta {
  color: var(--muted);
  font-size: 0.85em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-bottom: 1.6em;
}

/* Sektionen (DL-4/5) */
.cl-body .cl-section {
  margin: 1.6em 0;
}
.cl-body .cl-section h2 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.02em;
  margin: 0 0 0.5em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
}
.cl-body .cl-section ul {
  margin: 0.3em 0;
  padding-left: 1.2em;
}
.cl-body .cl-section li {
  margin: 0.35em 0;
  color: var(--text);
}
.cl-body .cl-section li code {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-size: 0.9em;
}

/* Kategorie-Label-Chips (DL-5) — kleine Cues, kein Voll-Anstrich.
   Bewusst: Neu=grün (neu=positiv), Fix=cyan (Primär), Balance=gelb (Tuning),
   Haube=muted (neutral). Wort steht im Chip → nicht nur Farbe für A11y. */
.cl-cat {
  font-size: 0.62em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
  white-space: nowrap;
}
.cl-cat--neu {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.cl-cat--fix {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}
.cl-cat--balance {
  color: var(--yellow);
  border-color: color-mix(in srgb, var(--yellow) 40%, transparent);
}
.cl-cat--haube {
  color: var(--muted);
  border-color: var(--line-2);
}

/* Prev/Index/Next-Navigation (DL-6) */
.cl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: 0.9em;
}
.cl-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.cl-nav a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.cl-nav .disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  opacity: 0.3;
  pointer-events: none;
}

/* =================================================================
   Templates-Tab (Branch templates/web-frontend, 2026-05-26)
   Pattern: Sub-Tab-Strip pro Waffe (parallele Struktur zum Hexa-Tab),
   pro Sub-Tab ein Editor mit Order-Liste, Live-Preview, Save/Delete.
   ================================================================= */
.templates-panel { padding: 1.5em; }
.templates-panel .panel-title { display: flex; align-items: baseline; gap: 0.6em; }

/* Sub-Tab-Strip — Layout/Look gespiegelt von .hexa-weapon-tabs.
   Eigene Klasse damit künftige Anpassungen an Hexa nicht Templates
   versehentlich mitbiegen. */
.templates-weapon-tabs {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin: 1em 0 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}
.templates-weapon-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  border-radius: 2px;
}
.templates-weapon-tab:hover:not(.templates-weapon-tab--locked) {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(56, 225, 255, 0.08);
}
.templates-weapon-tab--active {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(255, 69, 181, 0.10);
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.35);
}
.templates-weapon-tab--active:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(255, 69, 181, 0.14);
}
.templates-weapon-tab--locked {
  opacity: 0.55;
  border-color: var(--line);
  color: var(--line-2);
}
.templates-weapon-tab--locked:hover { opacity: 0.75; }
.templates-weapon-tab-glyph { font-size: 1.1em; line-height: 1; display: inline-flex; align-items: center; }
/* ui-040: Glyph-<img> für Templates-Sub-Tab. Kein Glow (Tab = dezent, DL-3). */
.templates-weapon-tab-glyph img.wg-img { display: block; }
.templates-weapon-tab-label { font-size: 0.9em; }
.templates-weapon-tab-lock  { font-size: 0.8em; opacity: 0.7; }
.templates-weapon-tab-marker {
  font-size: 0.85em;
  color: var(--green);
  text-shadow: 0 0 6px rgba(94, 255, 138, 0.4);
}

/* Panels-Container — display-toggle wie bei Hexa. */
.templates-weapon-panels { display: block; }
.templates-weapon-panel  { display: none; }
.templates-weapon-panel.is-active { display: block; }

.templates-weapon-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8em;
  margin: 0.2em 0 0.9em;
  flex-wrap: wrap;
}
.templates-weapon-panel-title {
  margin: 0;
  font-size: 1.05em;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.templates-weapon-panel-title .templates-weapon-tab-glyph {
  color: var(--magenta);
  margin-right: 0.3em;
}
.templates-weapon-panel-actions { display: flex; gap: 0.5em; }
.templates-delete-btn {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--line-2);
  padding: 0.35em 0.8em;
  font-size: 0.85em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, border-color 0.12s;
}
.templates-delete-btn:hover:not(:disabled) {
  border-color: var(--red);
  background: rgba(255, 77, 110, 0.10);
}
.templates-delete-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Locked-Panel — Hinweis-Box, gleiches Pattern wie .hexa-weapon-panel--locked. */
.templates-weapon-panel--locked .templates-locked-box {
  padding: 2em 1.5em;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.templates-locked-glyph {
  font-size: 2.4em;
  color: var(--line-2);
  margin-bottom: 0.3em;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* ui-040: Glyph-<img> für locked Templates-Panel (--line-2, kein Glow, DL-3). */
.templates-locked-glyph img.wg-img { display: block; }
.templates-locked-title {
  margin: 0.2em 0 0.6em;
  font-size: 1.1em;
  color: var(--muted);
  font-weight: 600;
}
.templates-locked-text {
  margin: 0.2em 0;
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.55;
}
.templates-locked-text strong { color: var(--text); }
.templates-locked-text a { color: var(--cyan); }

/* Order-Liste — vertikale Cards, Drag-Handle, Stat-Select, Level-Input, Preview-Line.
   Sortable-Drag-State wird via .sortable-ghost / .sortable-chosen markiert
   (SortableJS-Default-Klassen). */
.templates-orders {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: 1em;
}
.templates-empty-hint {
  margin: 0.3em 0 0.8em;
  padding: 1em;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.92em;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.templates-orders-ssr {
  list-style: decimal inside;
  color: var(--text);
  font-size: 0.92em;
  padding: 0 0 0 0.3em;
}
.templates-orders-ssr li { padding: 0.2em 0; }
.templates-orders-ssr-hint {
  margin-top: 0.6em;
  color: var(--red);
  font-size: 0.85em;
}

/* Pro Order: Flex-Row mit handle | stat-select | level-input | preview | delete.
   Mobile: wrap auf 2 Zeilen (preview unterhalb). */
.templates-order-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.7fr) 88px minmax(0, 2.4fr) 28px;
  gap: 0.5em;
  align-items: center;
  padding: 0.5em 0.7em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color 0.1s;
}
.templates-order-row.is-invalid {
  border-color: var(--red);
  background: rgba(255, 77, 110, 0.06);
}
.templates-order-row.is-fulfilled {
  border-color: rgba(94, 255, 138, 0.35);
  background: rgba(94, 255, 138, 0.04);
}
.templates-order-row.is-disabled-stat {
  border-color: rgba(255, 160, 51, 0.4);
  background: rgba(255, 160, 51, 0.04);
}

.templates-order-handle {
  cursor: grab;
  color: var(--line-2);
  font-size: 1.1em;
  text-align: center;
  user-select: none;
  line-height: 1;
}
.templates-order-handle:hover { color: var(--cyan); }
.templates-order-row.sortable-chosen .templates-order-handle { cursor: grabbing; }

.templates-order-stat {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.35em 0.5em;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92em;
  border-radius: 2px;
}
.templates-order-stat:focus { outline: none; border-color: var(--cyan); }

.templates-order-level {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 0.35em 0.5em;
  font-family: ui-monospace, monospace;
  font-size: 0.92em;
  text-align: right;
  border-radius: 2px;
  width: 100%;
}
.templates-order-level:focus { outline: none; border-color: var(--cyan); }
.templates-order-level.is-invalid { border-color: var(--red); }

.templates-order-preview {
  font-size: 0.85em;
  color: var(--muted);
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.templates-order-preview .preview-cost {
  color: var(--cyan);
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.templates-order-preview .preview-stat-before {
  color: var(--muted);
  text-decoration: line-through;
  margin-right: 0.3em;
}
.templates-order-preview .preview-stat-after {
  color: var(--magenta);
  font-weight: 600;
}
/* D10 (web-008, 2026-05-29): Income-Stats zeigen nur Delta, kein "vorher=0". */
.templates-order-preview .preview-stat-delta {
  color: var(--cyan);
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.templates-order-preview .preview-pill {
  display: inline-block;
  padding: 0.05em 0.45em;
  margin-right: 0.3em;
  font-size: 0.85em;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  font-family: ui-monospace, monospace;
}
.templates-order-preview .preview-pill--fulfilled {
  color: var(--green);
  border-color: rgba(94, 255, 138, 0.4);
}
.templates-order-preview .preview-pill--disabled {
  color: #ffa033;
  border-color: rgba(255, 160, 51, 0.4);
}
.templates-order-preview .preview-pill--invalid {
  color: var(--red);
  border-color: rgba(255, 77, 110, 0.4);
}

.templates-order-delete {
  /* D6 (web-008, 2026-05-29): Touch-Target 28×28 px, zentriert */
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--line-2);
  font-size: 1.15em;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.templates-order-delete:hover { color: var(--red); }

/* SortableJS-Default-States — Ghost = der semi-transparente Platzhalter, Chosen
   = die Karte, die der User gerade hält. */
.templates-order-row.sortable-ghost {
  opacity: 0.35;
  background: rgba(56, 225, 255, 0.08);
}
.templates-order-row.sortable-chosen {
  border-color: var(--magenta);
  box-shadow: 0 0 12px rgba(255, 69, 181, 0.25);
}

/* AllMode-Footer-Hint (web-010, 2026-05-30): statische Info-Zeile nach den
   Order-Rows, erklaert was passiert wenn das Template fertig durchlaeuft.
   Liegt AUSSERHALB des SortableJS-Containers (.templates-orders) — kein
   sortable-Item, keine Drag-Faehigkeit. cursor: default verhindert pointer-
   Visuals selbst wenn ein Browser den Block versehentlich als hoverable
   interpretiert. */
.tpl-footer-hint {
  cursor: default;
  opacity: 0.55;
  font-size: 0.85em;
  padding: 6px 8px;
  margin-top: 0.4em;
  color: var(--fg2);
  font-style: italic;
}

.templates-orders-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px solid var(--line);
}
.templates-add-order-btn {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--line-2);
  padding: 0.4em 0.9em;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 600;
}
.templates-add-order-btn:hover {
  border-color: var(--cyan);
  background: rgba(56, 225, 255, 0.08);
}
.templates-total {
  flex: 0 0 auto;
  font-size: 0.95em;
  color: var(--text);
}
.templates-total-cost {
  color: var(--cyan);
  font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-left: 0.3em;
}
.templates-save-row { display: flex; gap: 0.5em; }
.templates-discard-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 0.4em 0.9em;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 2px;
}
.templates-discard-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}
.templates-save-btn {
  background: var(--magenta);
  color: #fff;
  border: 1px solid var(--magenta);
  padding: 0.4em 1.1em;
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 69, 181, 0.25);
}
.templates-save-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}
.templates-save-btn:disabled {
  background: var(--line-2);
  border-color: var(--line-2);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* D3 (web-008, 2026-05-29): Saved-State-Chip im Footer */
.templates-save-status { display: flex; align-items: center; }
.save-chip {
  padding: 0.2em 0.6em;
  border-radius: 2px;
  font-size: 0.8em;
  font-family: ui-monospace, monospace;
}
.save-chip--saved {
  color: var(--green);
  border: 1px solid rgba(94, 255, 138, 0.4);
  background: rgba(94, 255, 138, 0.06);
}
.save-chip--unsaved {
  color: var(--yellow);
  border: 1px solid rgba(255, 216, 74, 0.4);
  background: rgba(255, 216, 74, 0.06);
}

/* D5 (web-008, 2026-05-29): Footer-Spacer schiebt Save-Row nach rechts */
.templates-footer-spacer { flex: 1 1 auto; }

/* D8 (web-008, 2026-05-29): Cascade-Flash-Animation für kaskadierte Inputs */
@keyframes cascade-flash {
  0%   { outline: 2px solid var(--yellow); outline-offset: 1px; }
  60%  { outline: 2px solid var(--yellow); outline-offset: 1px; }
  100% { outline: 2px solid transparent;   outline-offset: 1px; }
}
.cascade-flash { animation: cascade-flash 700ms ease-out forwards; }

@media (max-width: 720px) {
  /* Mobile: Order-Row klappt um — Preview unter den Inputs.
     Grid-Columns wechseln zu 2 Reihen: handle/stat/level/delete oben,
     preview unten über volle Breite. */
  .templates-order-row {
    grid-template-columns: 28px 1fr 88px 28px;
    grid-template-rows: auto auto;
  }
  .templates-order-preview {
    grid-column: 1 / -1;
    font-size: 0.82em;
  }
}

/* =====================================================================
   Admin · System-Health Panel (feat/admin-token-status, 2026-05-28)
   ===================================================================== */
.admin-health-grid {
  /* Etwas breitere Pillen als die KPI-Karten weiter unten — wir packen
     hier 2-3 Zeilen Detail-Text rein, nicht nur Zahlen. */
  align-items: stretch;
}
.admin-health-pill {
  /* Linksbündig statt zentriert, damit der lange Detail-Text gut lesbar bleibt. */
  align-items: flex-start;
  text-align: left;
  min-width: 14em;
  max-width: 22em;
  gap: 0.25em;
  padding: 0.7em 1em;
}
.admin-health-state {
  font-size: 1.1em;
  letter-spacing: 0.02em;
}
.admin-health-state--mini {
  font-size: 0.95em;
  font-weight: 500;
}
.admin-health-detail {
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.35;
}
.health-state--ok .admin-health-state {
  color: var(--green, #5eff8a);
}
.health-state--warn .admin-health-state {
  color: var(--yellow, #ffd84a);
}
.health-state--error .admin-health-state {
  color: var(--red, #ff4d6e);
}
.health-state--ok    { border-left: 3px solid var(--green, #5eff8a); }
.health-state--warn  { border-left: 3px solid var(--yellow, #ffd84a); }
.health-state--error { border-left: 3px solid var(--red, #ff4d6e); }

/* =====================================================================
 * Glossar (/glossar) — lebt von Glossar.md im Repo-Root, server-rendered
 * via web/src/views/glossar.js. Eigene .glossar-* Klassen, weil das
 * Layout enger und text-zentriert ist als Dashboard/Help.
 * ===================================================================== */
.glossar-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.glossar-header h1 {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 28px;
  letter-spacing: 0.5px;
}
.glossar-lead {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.glossar-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.glossar-search-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
#glossar-search {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
#glossar-search:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 225, 255, 0.25);
}
.glossar-search-count {
  color: var(--muted);
  font-size: 12px;
  min-width: 80px;
  text-align: right;
}
.glossar-content {
  line-height: 1.55;
}
.glossar-heading {
  position: relative;
  scroll-margin-top: 80px;
}
.glossar-h1 { color: var(--cyan); font-size: 26px; margin: 40px 0 12px; }
.glossar-h2 { color: var(--magenta); font-size: 22px; margin: 36px 0 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.glossar-h3 { color: var(--yellow); font-size: 18px; margin: 28px 0 8px; }
.glossar-h4 { color: var(--cyan); font-size: 15px; margin: 20px 0 6px; opacity: 0.85; }
.glossar-anchor {
  color: var(--muted);
  opacity: 0;
  margin-right: 6px;
  text-decoration: none;
  font-weight: normal;
  transition: opacity 0.15s;
}
.glossar-heading:hover .glossar-anchor { opacity: 1; }
.glossar-content p { margin: 8px 0 12px; }
.glossar-content strong { color: var(--text); }
.glossar-content em { color: var(--muted); font-style: italic; }
.glossar-list, .glossar-questions {
  padding-left: 22px;
  margin: 8px 0 16px;
}
.glossar-entry {
  margin: 6px 0;
  scroll-margin-top: 80px;
}
.glossar-entry strong:first-child {
  color: var(--cyan);
}
.glossar-entry-soft {
  margin: 4px 0;
  color: var(--text);
}
.glossar-question {
  margin: 10px 0;
  padding-left: 4px;
}
.glossar-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 13px;
}
.glossar-table th, .glossar-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.glossar-table th {
  background: var(--panel);
  color: var(--cyan);
  font-weight: 600;
}
.glossar-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.glossar-blockquote {
  border-left: 3px solid var(--magenta);
  padding: 6px 12px;
  margin: 12px 0;
  background: rgba(255, 69, 181, 0.04);
  color: var(--text);
  border-radius: 0 4px 4px 0;
}
.glossar-content hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 32px 0;
}
.glossar-error {
  color: var(--red);
  padding: 12px;
  border: 1px solid var(--red);
  border-radius: 4px;
}

/* ===== Karten & Sockel Tab (ui-007, 2026-05-29) ===== */
/* Tier-Farb-Variablen: gesetzt via data-tier am .cs-card Element.          */
/* T1 cyan → T2 magenta → T3 gold → T4 green → T5 white (alle ≥T5 = white) */

@property --pulse-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.cs-layout {
  display: grid;
  /* Fifty-Decision 2026-05-29: Sockel waren mit 460px-Fixwert zu breit.
     Neu: 5fr/2fr proportional — Inventar 5/8, Sockel 2/8, gap+padding ≈ 1/8.
     Damit sind Inventar-Cards (5 cols) und Sockel-Cards (2 cols) exakt gleich
     breit, da beide bei 1fr/col landen. */
  grid-template-columns: 5fr 2fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cs-layout { grid-template-columns: 1fr; }
}

.cs-panel {
  background: rgba(17, 22, 42, 0.6);
  border: 1px solid rgba(120, 180, 255, 0.18);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(8px);
}
.cs-panel.cs-drop-zone-active {
  border-color: var(--magenta);
  box-shadow: 0 0 12px rgba(255, 69, 181, 0.4);
}

.cs-panel-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 4px;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.45);
}
.cs-panel-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 16px;
}

/* --- Inventory Grid --- */
.cs-inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.cs-inv-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.cs-slot-empty {
  border: 1px dashed rgba(120, 180, 255, 0.15);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(142, 162, 200, 0.25);
  font-size: 22px;
  transition: all 0.15s ease;
}
.cs-slot-empty:hover,
.cs-slot-empty.cs-drag-over {
  border-color: var(--cyan);
  background: rgba(56, 225, 255, 0.08);
  color: var(--cyan);
}
.cs-inv-slot.cs-drag-over {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.5);
}

/* --- Card Tile --- */
.cs-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #131a44 0%, #0c1230 100%);
  border: 1px solid var(--card-color, var(--cyan));
  border-radius: 10px;
  cursor: grab;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.25s ease;
  user-select: none;
  overflow: hidden;
}
.cs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--card-color, var(--cyan)) 0%, transparent 60%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.cs-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--card-color, var(--cyan)),
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 30px var(--card-glow, rgba(56, 225, 255, 0.3));
}
.cs-card:active { cursor: grabbing; }
.cs-card.cs-dragging { opacity: 0.4; transform: scale(0.95); }

/* Tier-Farben */
.cs-card[data-tier="1"] {
  --card-color: var(--cyan);
  --card-glow: rgba(56, 225, 255, 0.5);
  --upgrade-color: var(--magenta);
  --upgrade-glow: rgba(255, 69, 181, 0.55);
}
.cs-card[data-tier="2"] {
  --card-color: var(--magenta);
  --card-glow: rgba(255, 69, 181, 0.5);
  --upgrade-color: var(--yellow);
  --upgrade-glow: rgba(255, 216, 74, 0.55);
}
.cs-card[data-tier="3"] {
  --card-color: var(--yellow);
  --card-glow: rgba(255, 216, 74, 0.55);
  --upgrade-color: var(--green);
  --upgrade-glow: rgba(94, 255, 138, 0.55);
}
.cs-card[data-tier="4"] {
  --card-color: var(--green);
  --card-glow: rgba(94, 255, 138, 0.5);
  --upgrade-color: #f4f7ff;
  --upgrade-glow: rgba(244, 247, 255, 0.6);
}
.cs-card[data-tier="5"],
.cs-card[data-tier="6"],
.cs-card[data-tier="7"],
.cs-card[data-tier="8"],
.cs-card[data-tier="9"] {
  --card-color: #f4f7ff;
  --card-glow: rgba(244, 247, 255, 0.6);
}

/* Pulse-Border via @property --pulse-angle (upgrade-ready) */
.cs-card.cs-can-upgrade {
  border: 2px solid transparent;
  background:
    linear-gradient(155deg, #131a44 0%, #0c1230 100%) padding-box,
    conic-gradient(from var(--pulse-angle),
      var(--card-color)     0deg,
      var(--upgrade-color) 90deg,
      var(--card-color)   180deg,
      var(--upgrade-color) 270deg,
      var(--card-color)   360deg
    ) border-box;
  animation: cs-pulse-rotate 3.2s linear infinite;
}
@keyframes cs-pulse-rotate {
  to { --pulse-angle: 360deg; }
}
.cs-card.cs-can-upgrade:hover {
  animation: cs-pulse-rotate 1.4s linear infinite;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 24px var(--card-glow, rgba(56, 225, 255, 0.5)),
    0 0 40px var(--upgrade-glow, rgba(255, 69, 181, 0.6));
}

/* Card surfaces: rest + preview (Crossfade) */
.cs-card-surface {
  position: absolute;
  inset: 0;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 1;
}
.cs-card-surface-preview {
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 69, 181, 0.12) 0%, transparent 70%);
}
.cs-card.cs-can-upgrade:hover .cs-card-surface-rest {
  opacity: 0;
  transform: scale(0.96);
}
.cs-card.cs-can-upgrade:hover .cs-card-surface-preview {
  opacity: 1;
  transform: scale(1);
}

/* Card icon */
.cs-card-icon-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.cs-card-icon {
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 0 14px var(--card-color, var(--cyan)));
}

/* Card body */
.cs-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  padding-right: 30px; /* web-065: 32→30px — Sublabel braucht weniger Freiraum (Badge bottom-right) */
}
.cs-card-name {
  font-size: 11px;
  font-weight: 600;
  color: #f4f7ff;
  line-height: 1.2;
}
.cs-card-bonus {
  font-size: 16px;
  font-weight: 700;
  color: var(--card-color, var(--cyan));
  text-shadow: 0 0 8px var(--card-glow, rgba(56, 225, 255, 0.5));
  line-height: 1;
}
.cs-card-surface-preview .cs-card-bonus {
  color: var(--upgrade-color, var(--magenta));
  text-shadow: 0 0 10px var(--upgrade-glow, rgba(255, 69, 181, 0.6));
}

/* Tier-Badge bottom-right */
.cs-card-tier-badge {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--card-color, var(--cyan));
  color: #07091a;
  letter-spacing: 0.08em;
  white-space: nowrap;
  z-index: 3;
}
.cs-card-surface-preview .cs-card-tier-badge {
  background: var(--upgrade-color, var(--magenta));
}

/* Count-Badge top-right */
.cs-card-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #07091a;
  border: 1px solid var(--card-color, var(--cyan));
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--card-color, var(--cyan));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 8px var(--card-glow, rgba(56, 225, 255, 0.5));
}
.cs-card.cs-can-upgrade .cs-card-count {
  border-color: var(--upgrade-color, var(--magenta));
  color: var(--upgrade-color, var(--magenta));
}

/* Upgrade-Chevron top-left */
.cs-upgrade-chevron {
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: 22px;
  line-height: 1;
  color: var(--upgrade-color, var(--magenta));
  text-shadow: 0 0 14px var(--upgrade-glow, rgba(255, 69, 181, 0.85));
  animation: cs-chev-pulse 1.6s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes cs-chev-pulse {
  0%, 100% { opacity: 0.55; transform: translateY(0) scale(1); }
  50%       { opacity: 1;    transform: translateY(-3px) scale(1.1); }
}
.cs-card:not(.cs-can-upgrade) .cs-upgrade-chevron { display: none; }

/* Upgrade-CTA in Preview */
.cs-upgrade-cta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #f4f7ff;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 8px var(--upgrade-glow, rgba(255, 69, 181, 0.8));
  padding: 4px 6px;
  border: 1px solid var(--upgrade-color, var(--magenta));
  border-radius: 4px;
  background: rgba(255, 69, 181, 0.15);
  margin-top: auto;
  margin-right: 36px;
}

/* Click-Hint on hover (for clickable non-upgrade cards) */
.cs-click-hint {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cyan);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  pointer-events: none;
}
.cs-card.cs-clickable:hover .cs-click-hint { opacity: 0.7; }

/* --- Socket Grid --- */
.cs-socket-info {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-left: 3px solid var(--cyan);
}
.cs-socket-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(56, 225, 255, 0.7);
}
.cs-socket-label {
  font-size: 12px;
  color: var(--muted);
}

.cs-socket-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.cs-socket {
  position: relative;
  /* Fifty-Decision 2026-05-29: gleich wie .cs-inv-slot (3/4), damit Karten
     im Sockel und im Inventar identisch aussehen. Vorher 1/1 (quadratisch). */
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.35);
  border: 2px dashed rgba(56, 225, 255, 0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
}
.cs-socket::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(56, 225, 255, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cs-socket.cs-socket-empty:hover::before { opacity: 1; }
.cs-socket.cs-socket-empty {
  animation: cs-socket-pulse 2.4s ease-in-out infinite;
}
@keyframes cs-socket-pulse {
  0%, 100% { border-color: rgba(56, 225, 255, 0.3); }
  50%       { border-color: rgba(56, 225, 255, 0.7); box-shadow: inset 0 0 20px rgba(56, 225, 255, 0.15); }
}
.cs-socket.cs-drag-over {
  border-color: var(--cyan);
  border-style: solid;
  background: rgba(56, 225, 255, 0.08);
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.7), 0 0 32px rgba(56, 225, 255, 0.25);
  transform: scale(1.04);
}
.cs-socket.cs-socket-locked {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 200, 50, 0.06) 8px,
    rgba(255, 200, 50, 0.06) 16px
  );
  border-color: rgba(255, 200, 50, 0.3);
  animation: none;
  cursor: not-allowed;
}
.cs-socket.cs-socket-next-unlock {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(255, 69, 181, 0.06) 8px, rgba(255, 69, 181, 0.06) 16px
  );
  border-color: rgba(255, 69, 181, 0.5);
  animation: cs-next-pulse 2.2s ease-in-out infinite;
}
@keyframes cs-next-pulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(255, 69, 181, 0.1); }
  50%       { box-shadow: inset 0 0 24px rgba(255, 69, 181, 0.3); border-color: rgba(255, 69, 181, 0.8); }
}

.cs-socket-number {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  font-weight: 600;
  z-index: 3;
}
.cs-socket-empty-hint {
  font-size: 24px;
  color: rgba(56, 225, 255, 0.4);
  pointer-events: none;
}
.cs-socket-locked-hint {
  font-size: 10px;
  text-align: center;
  color: rgba(255, 124, 203, 0.9);
  padding: 8px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cs-socket-locked-badge { font-size: 16px; margin-bottom: 4px; }
.cs-socket-locked-hint strong {
  font-size: 13px;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 69, 181, 0.5);
}
.cs-socket-locked-hint small {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ui-038: Herkunfts-Chip-Reihe (DL-2) */
.cs-socket-origin {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-origin-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  font-size: 12px;
}
.cs-origin-chip.is-zero { opacity: 0.45; }
.cs-origin-chip .cs-origin-num  { font-weight: 700; font-size: 13px; }
.cs-origin-chip .cs-origin-lbl  { color: var(--muted); font-size: 11px; }
.cs-origin-sub  .cs-origin-glyph,
.cs-origin-sub  .cs-origin-num  { color: var(--cyan); }
.cs-origin-ach  .cs-origin-glyph,
.cs-origin-ach  .cs-origin-num  { color: var(--yellow); }
.cs-origin-hexa .cs-origin-glyph,
.cs-origin-hexa .cs-origin-num  { color: var(--magenta); }

/* ui-038: Hexa-Schwellen-Fortschritts-Meter (DL-4) */
.cs-hexa-progress {
  margin-bottom: 16px;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.cs-hexa-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  flex-wrap: wrap;
}
.cs-hexa-lbl  { font-size: 0.8em; color: var(--text); font-weight: 600; }
.cs-hexa-nums { font-size: 0.82em; color: var(--muted); }
.cs-hexa-nums b { color: var(--magenta); }
.cs-hexa-meter {
  position: relative;
  height: 9px;
  margin-top: 0.55em;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}
.cs-hexa-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--magenta), var(--magenta-light));
  border-radius: 5px;
  transition: width 0.25s ease;
  box-shadow: 0 0 10px rgba(255, 69, 181, 0.5);
}
.cs-hexa-hint { font-size: 0.72em; color: var(--muted); margin-top: 0.5em; line-height: 1.4; }
.cs-hexa-hint b { color: var(--magenta); }

/* prefers-reduced-motion: Hexa-Fill-Transition deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .cs-hexa-fill { transition: none; }
}

/* Socketed card variant: inset 4px, smaller icon */
.cs-socket-filled .cs-card {
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
}
.cs-socket-filled .cs-card-surface { padding: 8px 8px 6px; }
.cs-socket-filled .cs-card-icon { font-size: 40px; }
.cs-socket-filled .cs-card-body { padding-right: 28px; gap: 1px; }
.cs-socket-filled .cs-card-name { font-size: 10px; }
.cs-socket-filled .cs-card-bonus { font-size: 13px; }
.cs-socket-filled .cs-card-tier-badge { font-size: 8px; padding: 2px 5px; bottom: 5px; right: 5px; }
.cs-socket-filled .cs-card-count { width: 16px; height: 16px; font-size: 9px; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; }
.cs-socket-filled .cs-upgrade-chevron { font-size: 16px; top: 3px; left: 5px; }
.cs-socket-filled .cs-upgrade-cta { font-size: 7px; padding: 2px 4px; letter-spacing: 0.1em; }

/* Remove button in socket (✕, appears on hover) */
.cs-card-remove {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 77, 110, 0.2);
  color: var(--red);
  border: 1px solid rgba(255, 77, 110, 0.4);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  padding: 0;
}
.cs-socket:hover .cs-card-remove { opacity: 1; }
.cs-card-remove:hover { background: var(--red); color: #07091a; border-color: var(--red); }

/* === web-065: Gruppen-Karten (.is-group) — additiver Layer, tier-farb-kompatibel ===
   Identität OHNE Text-Badge (DL-2): Herz-Wasserzeichen (DL-3) + Außen-Halo (DL-4)
   + weiß-strahlender Glyph (DL-5) + weißes Scope-Sublabel (DL-6).
   Pattern identisch zu .is-weapon: liegt additiv auf der Tier-Farbe.
   Draw-Flip-Karte (.draw-flip-inner .cs-card) erbt das Treatment via Klasse. */

/* Scope-Sublabel (.cs-card-sub) auf jeder Effekt-Karte (DL-6).
   Solo = muted, Gruppe = weiß (override unten).
   Auf Waffen-Karten wird .cs-card-sub nicht gerendert (DL-7). */
.cs-card-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.1;
  margin-top: 1px;
}

/* DL-5: Glyph weiß + Glow auf Gruppen-Karten */
.cs-card.is-group .cs-card-icon {
  color: var(--white);
  text-shadow: 0 0 12px rgba(244, 247, 255, 0.55);
}

/* DL-6: Sublabel weiß auf Gruppen-Karten */
.cs-card.is-group .cs-card-sub {
  color: var(--white);
  opacity: 0.72;
}

/* DL-4: Außen-Halo (liegt additiv zum Tier-Glow) */
.cs-card.is-group {
  box-shadow: 0 0 0 1px var(--card-color), 0 0 22px rgba(244, 247, 255, 0.18);
}
.cs-card.is-group:hover {
  box-shadow:
    0 0 0 1px var(--card-color),
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 30px var(--card-glow),
    0 0 26px rgba(244, 247, 255, 0.28);
}

/* DL-3: Herz-Wasserzeichen oben links — hinter Content (z-index 0), angeschnitten
   von overflow:hidden der Karte. Untere Spitze ragt ins Tile, rechter Bogen
   sitzt halb über der Oberkante, linke Hälfte abgeschnitten.
   Finale Werte (mit Fifty getunt): top:-4px; left:-16px; width:52px; height:52px; opacity:.24
   Fill #f4f7ff (= --white). Pfad: Material-"favorite"-Herz. */
.cs-card.is-group::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -16px;
  width: 52px;
  height: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4f7ff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.24;
  z-index: 0;
  pointer-events: none;
}

/* prefers-reduced-motion: alle CS-Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .cs-card.cs-can-upgrade { animation: none; }
  .cs-upgrade-chevron { animation: none; }
  .cs-socket.cs-socket-empty { animation: none; }
  .cs-socket.cs-socket-next-unlock { animation: none; }
  .cs-card-surface { transition: none; }
  .cs-card { transition: none; }
}

/* ===== Achievement-Tab (web-021, 2026-06-01) =====
   Eigene Klassen (achievement-*) — bewusst getrennt von hexa-/templates-Klassen
   (Isolierungs-Lock). Active-State in var(--yellow) statt var(--magenta) (Design-Lock D2).
   Privacy-Notice-Klasse ENTFÄLLT (Fifty-Feedback 2026-06-01).
   ================================================== */

.achievement-panel { padding: 1.5em; }
.achievement-panel .panel-title { display: flex; align-items: baseline; gap: 0.6em; }

/* Sub-Tab-Strip */
.achievement-weapon-tabs {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin: 1em 0 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}
.achievement-weapon-tab {
  position: relative; /* ui-041: Anker für den Claimable-Dot-Marker */
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.achievement-weapon-tab:hover:not(.achievement-weapon-tab--locked) {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(56, 225, 255, 0.08);
}
/* Active-State: var(--cyan) — ui-045 (Kanon: Cyan = aktiv, Gold = Kategorie/Wert) */
.achievement-weapon-tab--active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(56, 225, 255, 0.10);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.3);
}
.achievement-weapon-tab--active:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(56, 225, 255, 0.14);
}
.achievement-weapon-tab--locked {
  opacity: 0.55;
  border-color: var(--line);
  color: var(--line-2);
  cursor: pointer;
}
.achievement-weapon-tab--locked:hover { opacity: 0.75; border-color: var(--line-2); }
.achievement-weapon-tab-glyph { font-size: 1.1em; line-height: 1; display: inline-flex; align-items: center; }
/* ui-040: Glyph-<img> für Achievement-Sub-Tab. */
.achievement-weapon-tab-glyph img.wg-img { display: block; }
.achievement-weapon-tab-label { font-size: 0.9em; }
.achievement-weapon-tab-lock  { font-size: 0.8em; opacity: 0.7; }
/* ui-041: Claimable-Highlight — Cyan-Außen-Glow + Corner-Dot (Design-Locks DL-1..DL-7) */
.achievement-weapon-tab--has-claimable {
  box-shadow: 0 0 14px rgba(56, 225, 255, 0.28);
}
.achievement-weapon-tab--has-claimable::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  border: 1.5px solid var(--panel);
  box-shadow: 0 0 7px rgba(56, 225, 255, 0.55);
  animation: subtle-pulse 2.4s ease-in-out infinite;
}
/* DL-6: Locked-Tabs nie markiert — defensiv hart aus */
.achievement-weapon-tab--locked.achievement-weapon-tab--has-claimable {
  box-shadow: none;
}
.achievement-weapon-tab--locked.achievement-weapon-tab--has-claimable::after {
  content: none;
}
@keyframes subtle-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 6px rgba(56, 225, 255, 0.45); }
  50%       { transform: scale(1.18); box-shadow: 0 0 10px rgba(56, 225, 255, 0.85); }
}
/* DL-4: Reduced-Motion — Puls abschalten, Dot + Glow bleiben statisch */
@media (prefers-reduced-motion: reduce) {
  .achievement-weapon-tab--has-claimable::after {
    animation: none;
  }
}

/* Panel-Container (CSS-Toggle wie Hexa/Templates) */
.achievement-weapon-panels { display: block; }
.achievement-weapon-panel  { display: none; }
.achievement-weapon-panel.is-active { display: block; }

/* Card-Grid (Design-Lock D3) */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.8em;
  margin-top: 0.8em;
}

/* Einzelne Achievement-Card */
.achievement-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  transition: border-color 0.15s;
}

/* State: claimable — Cyan-Rand + Glow (Design-Lock D4) */
.achievement-card--claimable {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(56, 225, 255, 0.18);
}

/* State: done — abgedunkelt (Design-Lock D4) */
.achievement-card--done {
  opacity: 0.5;
  border-color: var(--line);
}

/* Card-Header: Name + Tier-Badge */
.achievement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5em;
}
.achievement-card-name {
  font-weight: 600;
  font-size: 1em;
  color: var(--text);
  line-height: 1.3;
}
.achievement-card--claimable .achievement-card-name {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(56, 225, 255, 0.25);
}
.achievement-tier-badge {
  flex-shrink: 0;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}
.achievement-card--claimable .achievement-tier-badge {
  background: rgba(56, 225, 255, 0.10);
  border-color: var(--cyan);
  color: var(--cyan);
}
.achievement-card--done .achievement-tier-badge {
  background: rgba(94, 255, 138, 0.08);
  border-color: rgba(94, 255, 138, 0.3);
  color: var(--green);
}

/* Beschreibung */
.achievement-card-desc {
  font-size: 0.87em;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* Progress-Bar-Bereich (Design-Lock D5) */
.achievement-progress-area {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.achievement-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8em;
  color: var(--muted);
}
.achievement-progress-pct {
  font-weight: 600;
  color: var(--text);
}
.achievement-card--done .achievement-progress-pct     { color: var(--green); }
.achievement-card--claimable .achievement-progress-pct { color: var(--cyan); }

/* Progress-Track + Fill (Design-Lock D5: 6px, border-radius 3px) */
.achievement-progress-bar-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.achievement-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--line-2);
  transition: width 0.3s ease;
}
.achievement-card--claimable .achievement-progress-bar-fill {
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(56, 225, 255, 0.5);
}
.achievement-card--done .achievement-progress-bar-fill {
  background: var(--green);
}

/* Reward-Zeile */
.achievement-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  flex-wrap: wrap;
}
.achievement-reward-hint {
  font-size: 0.82em;
  color: var(--muted);
}
.achievement-reward-hint strong { color: var(--yellow); }

/* Claim-Button (Design-Lock D6) */
.achievement-claim-btn {
  padding: 0.38em 1em;
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, transform 0.08s;
  white-space: nowrap;
  min-height: 36px;
  font-family: inherit;
}
.achievement-claim-btn:hover:not(:disabled) {
  background: rgba(56, 225, 255, 0.12);
  transform: scale(1.02);
}
.achievement-claim-btn:disabled {
  border-color: var(--line);
  color: var(--line-2);
  cursor: not-allowed;
  opacity: 1;
  background: transparent;
}
/* Geclaimed-State: grüner disabled Button (Design-Lock D6) */
.achievement-claim-btn--claimed {
  border-color: var(--green);
  color: var(--green);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Login-Prompt (Design-Lock D9) */
.achievement-login-prompt {
  padding: 2.5em 1.5em;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  margin-top: 0.5em;
}
.achievement-login-prompt-icon {
  font-size: 2.2em;
  margin-bottom: 0.3em;
  line-height: 1;
}
.achievement-login-prompt h3 {
  margin: 0.2em 0 0.6em;
  font-size: 1.1em;
  color: var(--muted);
  font-weight: 600;
}
.achievement-login-prompt p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
}
.achievement-login-prompt a { color: var(--cyan); font-weight: 600; }

/* Locked-Panel (analog hexa-/templates-locked-box) */
.achievement-locked-box {
  padding: 2em 1.5em;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.achievement-locked-glyph {
  font-size: 2.4em;
  color: var(--line-2);
  margin-bottom: 0.3em;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* ui-040: Glyph-<img> für locked Achievement-Panel (--line-2, kein Glow, DL-3). */
.achievement-locked-glyph img.wg-img { display: block; }
.achievement-locked-title {
  margin: 0.2em 0 0.6em;
  font-size: 1.1em;
  color: var(--muted);
  font-weight: 600;
}
.achievement-locked-text {
  margin: 0.2em 0;
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.55;
}
.achievement-locked-text strong { color: var(--text); }
.achievement-locked-text a { color: var(--cyan); }

/* Account-Löschung (web-027, DSGVO) — dezenter Danger-Footer im Dashboard. */
.dash-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border, #2a3550); }
.account-danger > summary { cursor: pointer; color: var(--muted, #8aa0c0); font-size: 13px; list-style: none; user-select: none; }
.account-danger > summary::-webkit-details-marker { display: none; }
.account-danger > summary::before { content: '⚠ '; opacity: 0.7; }
.account-danger[open] > summary { color: var(--text); }
.account-danger-hint { color: var(--muted, #8aa0c0); font-size: 12px; line-height: 1.5; max-width: 52ch; margin: 10px 0; }
.account-delete-btn {
  background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b;
  border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.account-delete-btn:hover:not(:disabled) { background: #ff6b6b; color: #1a1f2e; }
.account-delete-btn:disabled { opacity: 0.5; cursor: default; }

/* =====================================================================
   Audio-SFX Admin-Panel (web-053, 2026-06-04)
   DL-6: alle Farben über var(--*), neue Klassen audio-Prefix.
   ===================================================================== */

/* Panel-Title-Row: Titel + Saved-Chip nebeneinander */
.audio-panel-title-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.8em;
}
.audio-panel-title-row .panel-title { margin: 0; }

/* Master-Steuerung-Zeile */
.audio-master-row {
  display: flex;
  align-items: center;
  gap: 1.2em;
  flex-wrap: wrap;
}

/* Mute-Button */
.audio-mute-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.audio-mute-btn.muted {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 77, 110, 0.08);
  box-shadow: 0 0 10px rgba(255, 77, 110, 0.3);
}
.audio-mute-btn:not(.muted):hover {
  border-color: var(--red);
  color: var(--red);
}

/* Volume-Control (Master) */
.audio-volume-control {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex: 1;
  min-width: 180px;
}
.audio-volume-label {
  color: var(--muted);
  font-size: 0.85em;
  white-space: nowrap;
}
.audio-volume-control input[type="range"] {
  flex: 1;
  accent-color: var(--cyan);
  height: 4px;
  cursor: pointer;
}
.audio-volume-value {
  min-width: 3.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  font-weight: 600;
  font-size: 1em;
}

/* Tier-Gruppe (collapsible Sektion) */
.audio-tier-group {
  margin-bottom: 0.8em;
}
.audio-tier-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.8em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  cursor: pointer;
  user-select: none;
}
.audio-tier-head.collapsed { border-radius: 5px; border-bottom: 1px solid var(--line); }
.audio-tier-collapse-icon {
  color: var(--muted);
  font-size: 0.85em;
  transition: transform 0.2s;
  margin-left: auto;
}
.audio-tier-head.collapsed .audio-tier-collapse-icon { transform: rotate(-90deg); }

/* Tier-Badge */
.audio-tier-badge {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 3px;
}
.audio-tier-badge.tier-1 {
  background: rgba(255, 216, 74, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(255, 216, 74, 0.3);
}
.audio-tier-badge.tier-2 {
  background: rgba(56, 225, 255, 0.08);
  color: var(--cyan);
  border: 1px solid rgba(56, 225, 255, 0.2);
}
.audio-tier-badge.tier-3 {
  background: rgba(92, 100, 121, 0.3);
  color: var(--muted);
  border: 1px solid var(--line);
}
.audio-tier-name {
  font-weight: 600;
  color: var(--text);
}
.audio-tier-hint {
  font-size: 0.82em;
  color: var(--muted);
}

/* Events-Container */
.audio-tier-events {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}
.audio-tier-events.hidden { display: none; }

/* Event-Zeile: Grid 4-spaltig (DL-7) */
.audio-event-row {
  display: grid;
  grid-template-columns: 2.4em 1fr 80px 2.8em;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.audio-event-row:last-child { border-bottom: none; }
.audio-event-row:hover { background: rgba(56, 225, 255, 0.03); }

/* Disabled-State (DL-10) */
.audio-event-row.disabled .audio-event-label { color: var(--muted); }
.audio-event-row.disabled .audio-vol-ctrl {
  opacity: 0.4;
  pointer-events: none;
}

/* Toggle-Switch (DL-5): Custom CSS, kein JS-Library */
.audio-toggle-label {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
/* Touch-Area via Padding (DL-7: 44×44 min-target) */
.audio-toggle-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.audio-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.audio-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--line-2);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.audio-toggle-track::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.audio-toggle-label input:checked + .audio-toggle-track {
  background: rgba(56, 225, 255, 0.25);
  border: 1px solid var(--cyan);
}
.audio-toggle-label input:checked + .audio-toggle-track::before {
  transform: translateX(16px);
  background: var(--cyan);
}
.audio-toggle-label input:focus-visible + .audio-toggle-track {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Event-Label */
.audio-event-label {
  font-size: 0.92em;
  color: var(--text);
  line-height: 1.3;
}
.audio-event-label small {
  display: block;
  font-size: 0.8em;
  color: var(--muted);
  margin-top: 0.1em;
}

/* Volume-Control pro Event (DL-3) */
.audio-vol-ctrl {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.audio-vol-ctrl input[type="range"] {
  width: 80px;
  accent-color: var(--cyan);
}
.audio-vol-val {
  font-size: 0.82em;
  color: var(--muted);
  min-width: 2.8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Saved-Chip / Fehler-Chip (DL-1) */
.audio-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.65em;
  background: rgba(94, 255, 138, 0.12);
  border: 1px solid rgba(94, 255, 138, 0.35);
  border-radius: 4px;
  color: var(--green);
  font-size: 0.82em;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.audio-saved-chip.visible { opacity: 1; }
.audio-saved-chip.error {
  background: rgba(255, 77, 110, 0.12);
  border-color: rgba(255, 77, 110, 0.35);
  color: var(--red);
}

/* Mobile (DL-7): Vol-Ctrl ausblenden, Grid vereinfachen (< 560px) */
@media (max-width: 560px) {
  .audio-master-row { flex-direction: column; align-items: stretch; }
  .audio-event-row  { grid-template-columns: 2.4em 1fr; }
  .audio-vol-ctrl   { display: none; }
}

/* =====================================================================
 * Build-Tab (ui-027, 2026-06-07)
 * Waffen-zentrierter Build-Pfad-Stepper: Hexa-Basis → Template-Steps → Endzustand.
 * Farb-Semantik: Magenta = Hexa-Basis, Cyan = Lift, Gelb = skip/Kosten, Muted = Off.
 * ===================================================================== */

/* ---- Farb-Schlüssel ---- */
.k-meta { color: var(--magenta); }
.k-lift { color: var(--cyan); }
.k-skip { color: var(--yellow); }
.k-off  { color: var(--muted); }

/* ---- Header: Waffen-Strip + Hexa-Pill ---- */
.build-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  flex-wrap: wrap;
  margin-bottom: 0.8em;
}
.build-weapon-strip {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}
.build-weapon-tab {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.38em 0.75em;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  font-size: 0.9em;
  color: var(--text);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.build-weapon-tab:hover:not([data-locked="true"]) {
  border-color: var(--cyan);
  color: var(--cyan);
}
.build-weapon-tab--active {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(56, 225, 255, 0.2);
}
.build-weapon-tab--locked {
  opacity: 0.45;
  cursor: default;
}
.build-weapon-tab-glyph { color: inherit; font-size: 1.05em; display: inline-flex; align-items: center; }
/* ui-040: Glyph-<img> für Build-Sub-Tab. */
.build-weapon-tab-glyph img.wg-img { display: block; }
.build-weapon-badge {
  font-size: 0.7em;
  line-height: 1;
}
.build-weapon-badge--meta { color: var(--magenta); }
.build-weapon-badge--tpl  { color: var(--cyan); }
.build-weapon-tab-lock { font-size: 0.75em; }
.build-hexa-pill {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--magenta);
  border-radius: 20px;
  color: var(--magenta);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.9em;
  cursor: help; /* web-066: Tooltip via title-Attr */
}
.build-hexa-pill-lbl {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.88em;
}

/* ---- Intro-Zeile ---- */
.build-intro {
  font-size: 0.88em;
  color: var(--muted);
  margin: 0 0 1em;
  line-height: 1.5;
}
.build-intro b { color: var(--text); font-weight: 600; }

/* ---- Weapon-Panels (CSS-toggle wie Hexas/Templates) ---- */
.build-weapon-panels { position: relative; }
.build-weapon-panel { display: none; }
.build-weapon-panel.is-active { display: block; }

/* ---- Locked-Panel ---- */
.build-locked-box {
  padding: 2em 1.5em;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.build-locked-glyph { font-size: 2em; color: var(--muted); margin-bottom: 0.3em; display: flex; align-items: center; justify-content: center; }
/* ui-040: Glyph-<img> für locked Build-Panel (--muted, kein Glow, DL-3). */
.build-locked-glyph img.wg-img { display: block; }
.build-locked-title { font-size: 1em; color: var(--muted); margin: 0 0 0.5em; }
.build-locked-text  { font-size: 0.88em; color: var(--muted); margin: 0.3em 0; }

/* ---- Progress-Header ---- */
.build-progress {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  padding: 0.65em 1em;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, rgba(255,69,181,.07), rgba(56,225,255,.05));
  margin-bottom: 0;
}
.bp-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95em;
  margin-right: auto;
}
.bp-chip {
  font-size: 0.74em;
  padding: 0.2em 0.6em;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.bp-chip b { color: var(--text); }
.bp-chip--lift { border-color: rgba(56,225,255,.45); color: var(--cyan); }
.bp-chip--skip { border-color: rgba(255,216,74,.45); color: var(--yellow); }
.bp-chip--cost { border-color: rgba(255,216,74,.4);  color: var(--yellow); }

/* ---- Stepper ---- */
.build-stepper {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--panel);
  overflow: hidden;
}
.build-stage {
  display: flex;
  gap: 0.9em;
  padding: 1em 1.1em;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.build-stage:last-child { border-bottom: none; }
.build-spine {
  flex: 0 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.build-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 800;
  position: relative;
  z-index: 1;
  transition: transform 0.15s, box-shadow 0.15s;
}
.build-spine-line {
  position: absolute;
  top: 30px;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: var(--line-2);
  border-radius: 0;
  z-index: 0;
}
.build-stage-body { flex: 1; min-width: 0; }

/* Stage 0 — Hexa-Basis */
.build-stage--base {
  background: linear-gradient(180deg, rgba(255,69,181,.06), transparent);
}
.build-stage--base .build-dot {
  width: 34px;
  height: 34px;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border-radius: 0;
  background: rgba(255,69,181,.22) !important;
  outline: 2px solid var(--magenta);
  outline-offset: -2px;
  color: var(--magenta);
  box-shadow: none;
}
.build-stage--base .build-spine-line {
  background: linear-gradient(180deg, var(--magenta), var(--cyan));
  opacity: 0.55;
}
.build-stage--base.solo .build-spine-line { display: none; }

/* Step-Stages */
.build-stage--step.lift .build-dot {
  background: rgba(56,225,255,.12);
  color: var(--cyan);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 10px rgba(56,225,255,.35);
}
.build-stage--step.skip .build-dot {
  background: rgba(255,216,74,.12);
  color: var(--yellow);
  border: 1px solid var(--yellow);
}
.build-stage--step.off .build-dot {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line-2);
}
.build-stage--step.lift .build-spine-line {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(56,225,255,.4);
  opacity: 0.9;
}
.build-stage--step.skip .build-spine-line {
  background: repeating-linear-gradient(
    180deg, var(--yellow) 0 6px, transparent 6px 12px);
  opacity: 0.7;
}
.build-stage--step.off .build-spine-line {
  background: repeating-linear-gradient(
    180deg, var(--muted) 0 4px, transparent 4px 10px);
  opacity: 0.5;
}
.build-stage--laststep .build-spine-line { display: none; }
.build-stage--step.lift:hover .build-dot { transform: scale(1.1); }

/* Hexa-Basis-Inhalt */
.build-base-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  flex-wrap: wrap;
}
.build-base-title  { font-weight: 600; color: var(--magenta); font-size: 0.95em; }
.build-base-invested { font-size: 0.8em; color: var(--muted); }
.build-base-invested b { color: var(--magenta); }
.build-base-skips { margin-top: 0.5em; font-size: 0.8em; color: var(--muted); line-height: 1.5; }
.build-base-skips b { color: var(--yellow); }

/* web-066: Pro-Waffe-Budget-Meter */
.build-budget {
  margin-top: 0.7em;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.build-budget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  flex-wrap: wrap;
}
.build-budget-lbl { font-size: 0.8em; color: var(--text); font-weight: 600; }
.build-budget-lbl .wn { color: var(--cyan); }
.build-budget-nums { font-size: 0.78em; color: var(--muted); }
.build-budget-nums b { color: var(--magenta); }
.build-budget-free { color: var(--green) !important; }
.build-budget-meter {
  position: relative;
  height: 9px;
  margin-top: 0.5em;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}
.build-budget-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--magenta), var(--magenta-light));
  border-radius: 5px;
  transition: width 0.22s ease;
}
.build-budget.is-full .build-budget-fill {
  background: linear-gradient(90deg, var(--red), var(--red-light));
}
.build-budget-hint { font-size: 0.72em; color: var(--muted); margin-top: 0.45em; }
.build-budget.is-full .build-budget-hint { color: var(--red); }

/* Invest-Grid (Hexa-Basis) */
.build-invest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 0.45em;
  margin-top: 0.7em;
}
.build-invest-cell {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.5em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
}
.build-invest-cell.off { opacity: 0.4; }
.build-invest-cell-glyph { color: var(--magenta); font-size: 1.05em; width: 1.2em; text-align: center; }
.build-invest-cell-main { flex: 1; min-width: 0; }
.build-invest-cell-lbl  { font-size: 0.8em; color: var(--text); }
.build-invest-cell-lvl  { font-size: 0.74em; color: var(--magenta); font-weight: 600; white-space: nowrap; }
.build-invest-cell-eff  { color: var(--cyan); font-weight: 700; }
.build-invest-cell-buy  { font-size: 0.68em; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.build-invest-cell-pm   { display: flex; gap: 0.2em; }
.build-invest-cell-pm button {
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 1em;
  line-height: 1;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, transform 0.1s;
}
.build-invest-cell-pm button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.build-invest-cell-pm button:active:not(:disabled) { transform: scale(0.85); }
.build-invest-cell-pm button:disabled { opacity: 0.35; cursor: not-allowed; }

/* Collapse-Toggle */
.build-base-collapse {
  font-size: 0.76em;
  color: var(--cyan);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.25em 0;
  margin-top: 0.4em;
  display: block;
}
.build-base-collapse:hover { text-decoration: underline; }

/* Reset-Sektion */
.build-reset-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: 0.8em;
  flex-wrap: wrap;
}
.build-reset-btn {
  font-size: 0.82em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.build-reset-btn:hover:not(:disabled) {
  box-shadow: 0 0 10px rgba(255, 77, 110, 0.3);
}
.build-reset-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.build-refund-txt { font-size: 0.78em; color: var(--muted); }
.build-refund-txt b { color: var(--magenta); }

/* ---- Step-Karte ---- */
.build-step-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
}
.build-step-drag {
  cursor: grab;
  color: var(--muted);
  font-size: 1em;
  user-select: none;
  padding: 0 0.1em;
  flex-shrink: 0;
}
.build-step-head { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; flex: 1; min-width: 0; }
.build-step-no {
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0.08em 0.5em;
  white-space: nowrap;
}
.build-stage--step.lift .build-step-no { color: var(--cyan);   border-color: rgba(56,225,255,.4); }
.build-stage--step.skip .build-step-no { color: var(--yellow); border-color: rgba(255,216,74,.4); }

/* Step-Stat-Select */
.build-step-select {
  appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2338e1ff' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0.55em center;
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 6px;
  padding: 0.3em 1.7em 0.3em 0.55em;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
}
.build-step-select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(56,225,255,.18);
}
.build-stage--step.skip .build-step-select { color: var(--yellow); }
.build-stage--step.off  .build-step-select { color: var(--muted); }

/* Step-Sub-Zeile */
.build-step-sub { font-size: 0.8em; color: var(--muted); margin-top: 2px; }
.build-step-sub .from { color: var(--muted); }
.build-step-sub .to   { color: var(--cyan); font-weight: 600; }
.build-stage--step.skip .build-step-sub .to { color: var(--yellow); }

/* Ziel-Level */
.build-step-target {
  display: flex;
  align-items: center;
  gap: 0.35em;
  flex-shrink: 0;
}
.build-step-target label { font-size: 0.72em; color: var(--muted); }
.build-step-target-pm { display: flex; align-items: center; gap: 0.25em; }
.build-step-target-pm button {
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 1em;
  line-height: 1;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, transform 0.1s;
}
.build-step-target-pm button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.build-step-target-pm button:active:not(:disabled) { transform: scale(0.85); }
.build-step-target-pm button:disabled { opacity: 0.35; cursor: not-allowed; }
.build-step-target input {
  width: 56px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: 5px;
  padding: 0.28em 0.4em;
  font-size: 0.9em;
  text-align: center;
  font-family: inherit;
}
.build-step-target input:focus {
  outline: none;
  border-color: var(--cyan);
}

/* Kosten + Delete */
.build-step-cost {
  font-size: 0.82em;
  color: var(--yellow);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
}
.build-step-del {
  padding: 0;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: transparent;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.build-step-del:hover { color: var(--red); border-color: var(--red); }

/* Step-Pills */
.build-step-pill {
  display: inline-block;
  font-size: 0.68em;
  padding: 0.12em 0.5em;
  border-radius: 10px;
  margin-top: 0.3em;
}
.build-pill-skip { color: var(--yellow); border: 1px solid rgba(255,216,74,.4);  background: rgba(255,216,74,.06); }
.build-pill-off  { color: var(--muted);  border: 1px solid var(--line-2); }

/* Add-Step-Zeile */
.build-stage--add { padding: 0.65em 1.1em; }
.build-add-btn {
  border: 1px dashed var(--line-2);
  color: var(--muted);
  width: 100%;
  padding: 0.5em;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.build-add-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* Empty-Hint */
.build-empty-hint {
  padding: 1.4em 1.1em;
  color: var(--muted);
  font-size: 0.9em;
  text-align: center;
  line-height: 1.6;
}

/* Drag-over Indicator */
.build-dragover { box-shadow: 0 -2px 0 var(--cyan) inset, 0 -7px 11px -7px rgba(56,225,255,.55); }

/* ---- End-Zustand ---- */
.build-endstate {
  margin-top: 1.2em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 1em 1.1em;
}
.build-endstate h3 { margin: 0 0 0.15em; font-size: 0.95em; color: var(--green); }
.build-endstate-sub { font-size: 0.82em; color: var(--muted); margin-bottom: 0.7em; }
.build-es-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.45em;
}
.build-es-cell {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.6em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.build-es-cell.off { opacity: 0.35; }
.build-es-g { color: var(--muted); width: 1.2em; text-align: center; flex-shrink: 0; }
.build-es-l { flex: 1; font-size: 0.82em; color: var(--text); }
.build-es-bar {
  flex: 0 0 64px;
  height: 6px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
  display: flex;
}
.build-es-bar .seg-meta { background: var(--magenta); }
.build-es-bar .seg-lift { background: var(--cyan); }
.build-es-v { font-size: 0.8em; color: var(--text); font-weight: 600; min-width: 52px; text-align: right; flex-shrink: 0; }

/* ---- Legende ---- */
.build-legend {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  font-size: 0.78em;
  color: var(--muted);
  margin-top: 0.9em;
}
.build-legend span { display: inline-flex; align-items: center; gap: 0.4em; }
.sw { width: 18px; height: 7px; border-radius: 3px; display: inline-block; }
.sw-meta { background: var(--magenta); }
.sw-lift { background: var(--cyan); }
.sw-skip { background: repeating-linear-gradient(90deg, var(--yellow) 0 4px, transparent 4px 8px); }
.sw-off  { background: repeating-linear-gradient(90deg, var(--muted)  0 3px, transparent 3px 7px); }

/* Pulse-Animation (Lift-Dot beim Re-Render) */
@keyframes buildPulseDot {
  0%   { box-shadow: 0 0 0 0   rgba(56,225,255,.55); }
  100% { box-shadow: 0 0 0 14px rgba(56,225,255,0); }
}
.build-dot.justlift { animation: buildPulseDot 0.6s ease-out; }

/* noscript-Hinweis */
.build-noscript-hint {
  padding: 1.2em;
  color: var(--muted);
  font-size: 0.88em;
  text-align: center;
}