/* ===================================================================
 * HypeR Tower Defense — UI Stylesheet v2.0
 * Vergrößerte, klar lesbare Sci-Fi-Oberfläche im CCG-Stil.
 * Layout:  Top-Bar 60px | Links 360px | Mitte flex | Rechts 340px
 *
 * 4K-/HiDPI-Skalierung: alle Größenangaben für Aktionskarten und
 * Sidebar-Inhalte nutzen rem (basierend auf der 16px-Root-Fontsize)
 * und vh/vmin für die vertikale Skalierung. Kein transform: scale()
 * — das würde die UI verzerren und die Hit-Targets verschieben.
 * =================================================================== */

/* ============== RESET ============== */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
body{font-family:'Rajdhani',sans-serif;background:#020714;color:#cfeaf5;-webkit-font-smoothing:antialiased}
html,body{width:100%;height:100%;overflow:hidden;background:#020714;color:#cfeaf5;font-family:'Rajdhani',sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
i{display:inline-block}

/* ============== ROOT TOKENS ============== */
:root{
  --bg-0:#020714;
  --bg-1:#06122a;
  --bg-2:#0a1832;
  --line:#0e2a4a;
  --line-bright:#0d3a66;
  --cyan:#00e5ff;
  --cyan-soft:#7dd3fc;
  --amber:#ffb627;
  --amber-2:#ff8800;
  --red:#ff4d6d;
  --green:#22c55e;
  --violet:#a855f7;
  --text:#cfeaf5;
  --text-dim:#6f8fa8;

  /* Elementar-Farben (für Karten) */
  --el-air:   #7dd3fc;
  --el-frost: #bae6fd;
  --el-fire:  #f97316;
  --el-wind:  #6ee7b7;
  --el-light: #fde047;
  --el-dark:  #1e1b4b;

  /* Typografie */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-xxl: 24px;
}

/* ============== TOP BAR (vergrößert) ============== */
.top-bar{
  position:fixed;top:0;left:0;right:0;height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  background:linear-gradient(180deg,#0a1832 0%,#020714 100%);
  border-bottom:2px solid #0d3a66;
  z-index:50;
  font-family:'Share Tech Mono',monospace;
  font-size:14px;letter-spacing:1px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.top-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent 0%,#00e5ff 50%,transparent 100%);
  opacity:0.6;
}
.top-left,.top-right{display:flex;align-items:center;gap:20px}
.top-stat{display:flex;align-items:center;gap:8px;font-weight:700}
.top-stat .lbl{color:#7dd3fc;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.top-stat .val{color:#cfeaf5;font-size:15px;font-weight:700;text-shadow:0 0 4px rgba(0,229,255,0.3)}
.top-stat .val.cyan{color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,0.6)}

.xp-wrap{display:flex;align-items:center;gap:10px;margin-left:18px}
.xp-wrap .lbl{color:#7dd3fc;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.xp-bar{width:260px;height:10px;background:#0a1832;border:1px solid #0d3a66;border-radius:5px;overflow:hidden;position:relative;box-shadow:inset 0 0 4px rgba(0,0,0,0.5)}
.xp-fill{height:100%;background:linear-gradient(90deg,#0ea5e9,#a855f7);box-shadow:0 0 10px rgba(168,85,247,0.5)}
.xp-val{color:#7dd3fc;font-size:12px;font-weight:700}

.top-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid #0d3a66;border-radius:6px;
  background:rgba(10,24,50,0.5);
  font-size:13px;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
}
.top-pill .lbl{color:#7dd3fc;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.top-pill .val{color:#cfeaf5;font-size:14px;font-weight:700}
.top-pill .val b{font-size:16px}
.top-pill .val b.amber{color:#ffb627;text-shadow:0 0 8px rgba(255,182,39,0.6)}
.top-pill .val b.cyan{color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,0.6)}
.top-pill .val b.violet{color:#a855f7;text-shadow:0 0 8px rgba(168,85,247,0.6)}
.top-pill .val b.red{color:#ff4d6d;text-shadow:0 0 8px rgba(255,77,109,0.6)}
.top-pill .val b.green{color:#22c55e;text-shadow:0 0 8px rgba(34,197,94,0.6)}

.ic{width:20px;height:20px;border-radius:3px;display:inline-block;position:relative;flex-shrink:0}
.ic-bolt{background:linear-gradient(135deg,#fde047,#f59e0b);clip-path:polygon(50% 0,20% 50%,45% 50%,30% 100%,80% 45%,55% 45%,70% 0);filter:drop-shadow(0 0 4px rgba(255,215,0,0.6))}
.ic-coin{background:radial-gradient(circle at 35% 30%,#fef3c7,#b45309);border-radius:50%;box-shadow:inset 0 0 3px rgba(255,255,255,0.3),0 0 4px rgba(255,215,0,0.4)}
.ic-wave{background:radial-gradient(circle,#0ea5e9,#1e3a8a);border-radius:50%;box-shadow:0 0 6px #00e5ff}
.ic-heart{background:linear-gradient(135deg,#fca5a5,#dc2626);clip-path:polygon(50% 100%,0 35%,25% 0,50% 25%,75% 0,100% 35%);filter:drop-shadow(0 0 4px rgba(255,77,109,0.6))}
.ic-skull{background:linear-gradient(135deg,#cbd5e1,#475569);border-radius:50% 50% 30% 30%;box-shadow:inset 0 0 3px rgba(0,0,0,0.4)}
.ic-xp{background:linear-gradient(135deg,#a78bfa,#7c3aed);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 4px rgba(168,85,247,0.6))}
.ic-tower{background:linear-gradient(180deg,#00e5ff,#0c4a6e);clip-path:polygon(50% 0,80% 30%,80% 100%,20% 100%,20% 30%)}
.ic-lobby{background:radial-gradient(circle,#0ea5e9,#1e3a8a);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ic-player{background:linear-gradient(135deg,#a78bfa,#7c3aed);border-radius:50%}
.ic-lv{background:linear-gradient(135deg,#fde047,#f59e0b);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ============== MAIN LAYOUT ============== */
.layout{
  position:fixed;top:60px;left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:360px 1fr 340px;
  gap:10px;padding:10px;
}

/* ============== SIDEBARS ============== */
.sidebar{
  background:linear-gradient(180deg,rgba(10,24,50,0.6) 0%,rgba(2,7,20,0.9) 100%);
  border:1px solid #0e2a4a;border-radius:8px;
  padding:18px;overflow-y:auto;
  position:relative;
  box-shadow:inset 0 0 30px rgba(0,229,255,0.05);
}
.sidebar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);opacity:0.5;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:#0e2a4a;border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#0d3a66}

.panel-head{margin-bottom:18px}
.panel-title{
  font-family:'Orbitron',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:3px;
  color:#00e5ff;text-shadow:0 0 10px rgba(0,229,255,0.5);
  display:block;padding-bottom:8px;
  border-bottom:1px solid #0e2a4a;
  text-transform:uppercase;
}
.panel-title.orange{color:#ff8800;text-shadow:0 0 10px rgba(255,136,0,0.5)}
.panel-title.violet{color:#a855f7;text-shadow:0 0 10px rgba(168,85,247,0.5)}
.panel-title.small{font-size:14px;letter-spacing:2px}
.panel-head.sub{margin-top:22px}

/* ============== HOST CARD ============== */
.host-card{
  background:linear-gradient(180deg,rgba(6,18,42,0.85),rgba(2,7,20,0.95));
  border:1px solid #0e2a4a;border-radius:6px;
  padding:12px;margin-bottom:14px;
  box-shadow:inset 0 0 12px rgba(0,229,255,0.06);
}
.host-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.host-row+.host-row{border-top:1px dashed #0e2a4a;margin-top:4px;padding-top:12px}
.avatar-circle{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#0ea5e9,#0c4a6e);
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-weight:800;color:#fff;font-size:18px;
  border:2px solid #00e5ff;box-shadow:0 0 12px rgba(0,229,255,0.5);
  flex-shrink:0;
}
.avatar-circle.small{width:30px;height:30px;font-size:13px;background:linear-gradient(135deg,#0a1832,#020714);border-color:#0e2a4a;box-shadow:none;color:#7dd3fc}
.host-meta{flex:1;min-width:0}
.host-name{font-size:15px;font-weight:700;color:#cfeaf5}
.host-name.small{font-size:13px;color:#7dd3fc}
.host-sub{font-size:11px;color:#6f8fa8;font-family:'Share Tech Mono',monospace;margin-top:2px}
.host-sub.small{font-size:10px}
.lvl-badge{
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;
  color:#0a1832;background:linear-gradient(135deg,#fde047,#f59e0b);
  padding:4px 10px;border-radius:4px;letter-spacing:1.5px;
  box-shadow:0 0 8px rgba(253,224,71,0.5);
}

/* ============== BUTTONS (vergrößert) ============== */
.big-btn{
  position:relative;width:100%;
  padding:18px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(14,42,74,0.7),rgba(6,18,42,0.7));
  border:1px solid #0e2a4a;border-radius:6px;
  font-family:'Orbitron',sans-serif;font-size:16px;font-weight:800;letter-spacing:3px;
  color:#7dd3fc;
  transition:all 0.2s ease;overflow:hidden;
  text-transform:uppercase;
}
.big-btn .btn-frame{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(0,229,255,0.15) 50%,transparent 100%);
  transform:translateX(-100%);transition:transform 0.5s ease;
}
.big-btn:hover .btn-frame{transform:translateX(100%)}
.big-btn:hover{border-color:#00e5ff;color:#00e5ff;box-shadow:0 0 18px rgba(0,229,255,0.4);transform:translateY(-1px)}
.big-btn:active{transform:translateY(0);box-shadow:0 0 12px rgba(0,229,255,0.6)}
.big-btn.primary{
  background:linear-gradient(180deg,#0c2a4a,#061a30);
  border-color:#0d3a66;
  font-size:17px;
}
.big-btn.primary:hover{
  background:linear-gradient(180deg,#0e3a5e,#08203a);
  box-shadow:0 0 24px rgba(0,229,255,0.5);
}
.btn-row{display:flex;gap:10px;margin-bottom:14px}
.btn-row .big-btn{padding:12px 8px;font-size:13px;letter-spacing:2px;flex:1}
.btn-text.green{color:#22c55e}
.btn-text.red{color:#ff4d6d}
.btn-text.cyan{color:#00e5ff}
.btn-text.amber{color:#ffb627}

.host-text{
  font-size:13px;color:#ff8800;
  margin:8px 0 18px;line-height:1.5;
  font-family:'Share Tech Mono',monospace;
  letter-spacing:0.5px;
  padding:8px 10px;
  background:rgba(255,136,0,0.08);
  border-left:3px solid #ff8800;
}

/* ============== PLAYER INFO CARD ============== */
.player-info-card{
  background:linear-gradient(180deg,rgba(6,18,42,0.95),rgba(2,7,20,0.95));
  border:1px solid #0e2a4a;border-radius:8px;
  padding:18px;position:relative;margin-top:8px;
  box-shadow:inset 0 0 20px rgba(0,229,255,0.04);
}
.player-info-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#0d3a66,transparent);
}
.pi-portrait{
  width:110px;height:110px;margin:0 auto 14px;position:relative;
}
.portrait-ring{
  position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from 0deg,#0ea5e9,#a855f7,#22c55e,#0ea5e9);
  padding:2px;animation:portraitSpin 6s linear infinite;
}
@keyframes portraitSpin{to{transform:rotate(360deg)}}
.portrait-img{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#475569 0%,#1e293b 50%,#020714 100%);
  border:2px solid #0a1832;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.5);
}
.portrait-img::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 70%,rgba(0,0,0,0.3) 30%,transparent 60%);
}
.pi-name{text-align:center;margin-bottom:12px}
.pi-name-main{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;color:#cfeaf5;letter-spacing:1.5px}
.pi-name-sub{font-size:11px;color:#6f8fa8;font-family:'Share Tech Mono',monospace;margin-top:2px}
.pi-stats{display:flex;flex-direction:column;gap:5px}
.pi-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;padding:5px 8px;
  background:rgba(10,24,50,0.5);border-radius:3px;
}
.pi-row span{color:#6f8fa8;font-weight:500}
.pi-row b{color:#00e5ff;font-weight:700;font-family:'Orbitron',sans-serif;font-size:12px}

/* ============== GAME AREA (verkleinert) ============== */
.game-area{
  display:flex;flex-direction:column;gap:10px;
  position:relative;min-width:0;
}
/* Legacy Pixi wrapper styles. The active Canvas2D map uses .canvas-wrap
   and keeps its contained 16:9 sizing in style.css. */
.game-canvas-wrap{
  position:relative;flex:1;min-height:0;
  display:block;            /* überschreibt style.css display:flex */
  padding:0;                /* überschreibt style.css padding:0.75rem */
  background:radial-gradient(ellipse at center,#0a1832 0%,#020714 80%);
  border:1px solid #0e2a4a;border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,229,255,0.04);
}
.game-canvas-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,229,255,0.06) 1px, transparent 0);
  background-size:24px 24px;
  z-index:2;
  opacity:0.7;
}
.game-canvas-wrap #game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
/* Pixi ersetzt das #game-canvas Element durch state.app.view.
   Beide brauchen identische Layout-Eigenschaften UND müssen
   das 16:9-aspect-ratio aus style.css Z. 2169 überschreiben,
   sonst wuerde der Pixi-View bei nicht-16:9 Viewport gestreckt
   oder gestaucht. */
.game-canvas-wrap canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;aspect-ratio:auto;border:none;border-radius:0;
  box-shadow:none;
}
.hud-overlay{position:absolute;inset:0;pointer-events:none;z-index:3;font-family:'Share Tech Mono',monospace}
.hud-tag{position:absolute;top:10px;left:10px;display:flex;gap:8px;align-items:center;font-size:12px}
.hud-tag .hud-player{color:#00e5ff;font-weight:700}
.hud-tag .hud-dot{color:#6f8fa8}
.hud-tag .hud-id{color:#7dd3fc}
.hud-tag.top-left-2{top:36px;left:16px}
.hud-tag .hud-cmd{
  display:inline-block;padding:5px 12px;
  background:rgba(10,24,50,0.85);border:1px solid #00e5ff;
  color:#00e5ff;font-weight:800;letter-spacing:2.5px;
  font-family:'Orbitron',sans-serif;font-size:12px;
  box-shadow:0 0 12px rgba(0,229,255,0.4);
}
.hud-debug{
  position:absolute;top:10px;right:10px;
  font-size:11px;color:#7dd3fc;
  background:rgba(2,7,20,0.7);padding:4px 8px;border-radius:3px;
  border:1px solid #0e2a4a;
}
.vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(2,7,20,0.7) 100%);
}

/* ============== BOTTOM HUD ============== */
/* Wird im Original-#gameScreen als <div class="bottom-hud"> innerhalb
   des Center-Stages platziert. Kompakte horizontale Anordnung von
   Wave-Info-Panel (links) und Action-Cards (rechts, fächerförmig).
   Beide nebeneinander, damit das Canvas im Center-Stage noch Platz
   hat und die Modals nicht überlagert werden. */
.bottom-hud{
  display:flex;
  flex-direction:row;
  gap:clamp(8px, 1vw, 16px);
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  min-height:0;
  flex-wrap:wrap;
  padding:0;
  margin:0;
}
.game-screen[data-wave-active="true"] .bottom-hud,
body.wave-active .bottom-hud{
  min-height:clamp(80px, 12vh, 160px);
}
.wave-info-panel{
  background:linear-gradient(180deg,rgba(10,24,50,0.6),rgba(2,7,20,0.85));
  border:1px solid #0e2a4a;border-radius:8px;
  padding:10px 16px;
  display:flex;flex-direction:row;gap:18px;align-items:center;flex-wrap:wrap;
  box-shadow:inset 0 0 20px rgba(0,229,255,0.04);
  flex-shrink:0;
  max-width:600px;
  font-size:12px;
}
.wip-header{padding-bottom:6px;border-bottom:1px solid #0e2a4a;min-width:140px}
.wip-title{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;letter-spacing:2.5px;color:#00e5ff;text-transform:uppercase}
.wip-body{display:flex;flex-direction:row;gap:18px;align-items:center;flex:1;flex-wrap:wrap}
.wip-line{font-size:13px;color:#7dd3fc;display:flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace}
.wip-line b.cyan{color:#00e5ff;font-size:16px;font-weight:700}
.enemy-pips{display:flex;gap:5px}
.pip{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,0.2)}
.pip.p-green{background:radial-gradient(circle,#86efac,#16a34a);box-shadow:0 0 6px #22c55e}
.pip.p-blue{background:radial-gradient(circle,#7dd3fc,#0284c7);box-shadow:0 0 6px #0ea5e9}
.pip.p-red{background:radial-gradient(circle,#fca5a5,#dc2626);box-shadow:0 0 6px #ef4444}
.pip.p-purple{background:radial-gradient(circle,#d8b4fe,#7c3aed);box-shadow:0 0 6px #a855f7}
.boss-pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,136,0,0.12);padding:5px 10px;border-radius:4px;
  border:1px solid #ff8800;
}
.boss-avatar{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fde047,#b91c1c);border:1px solid #ff8800;box-shadow:0 0 6px rgba(255,136,0,0.5)}
.boss-pill b.amber{color:#ffb627;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800}

/* ============== ACTION CARDS (Handkarten-Fächer) ============== */
/* Container: fächerförmig rotierender Karten-Stapel,
   im Center-Flow positioniert. Die Karten sind absolute Children
    mit translate/rotate relativ zum Container. Kompakte Größe,
    damit das Canvas im Center-Stage noch Platz hat.

     Pixi-Integration: position:fixed am unteren Bildschirmrand,
     damit die Karten weder das Pixi-Canvas noch die TCG-Hand
     (#cardsHand) überdecken. Sie schweben über dem Spielfeld.

     Responsive: Breite/Höhe mit clamp(min, vw-basiert, max) statt
     fixem Pixelwert, damit die Karten auf 1080p (= 380px breit)
     und auf 4K (= ca. 540px breit) gleich gut aussehen, ohne
     transform: scale() zu nutzen (das die UI verzerren würde). */
.action-cards{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:clamp(4px, 0.6vw, 10px);
  width:min(100%, clamp(360px, 60vw, 900px));
  height:clamp(160px, 20vh, 230px);
  margin:0;
  padding:0;
  pointer-events:none;
  z-index:35;
  background:transparent;
  border:none;
  flex-shrink:0;
  flex-wrap:wrap;
  overflow:visible;
}

/* Karte: Karten-Stapel-Fächer.
   Responsive: Breite/Höhe relativ zum Container .action-cards
   (clamp auf min/max), damit sie proportional mitwachsen, wenn
   der User den Viewport ändert oder auf 4K spielt. */
.action-card{
  position:relative;            /* TCG-Hand: nicht mehr absolute (Fächer-Layout nur bei 3 Karten) */
  width:clamp(56px, 7vw, 96px);  /* TCG-Hand: kleinere Karten als Fächer-Layout */
  aspect-ratio: 0.72 / 1;
  flex-shrink:0;
  cursor:pointer;
  pointer-events:auto;
  background:linear-gradient(180deg,
                color-mix(in srgb, var(--card-color, #00e5ff) 18%, #020714) 0%,
                #020714 100%);
  border:1px solid color-mix(in srgb, var(--card-color, #00e5ff) 50%, #0e2a4a);
  border-radius:6px;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.6),
    inset 0 0 12px color-mix(in srgb, var(--card-color, #00e5ff) 12%, transparent),
    0 0 0 1px rgba(255,255,255,0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.2s ease;
  user-select:none;
}
/* TCG-Karten in der Hand haben kein Fächer-Layout — sie sind in
   einer horizontalen flex-Reihe. Drag-to-Field: kleine Skalierung
   + Glow waehrend des Drags. */
.action-card{ will-change: transform, box-shadow; }
.action-card.dragging{
  transform:scale(0.92) translateY(-3px);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--card-color, #00e5ff) 60%, transparent),
    0 12px 30px rgba(0,0,0,0.7);
  opacity:0.6;
}
.action-card.exhausted{ opacity:0.4; filter:grayscale(0.6); pointer-events:none; }
.action-card:hover{
  transform:translateY(-6px) scale(1.05);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--card-color, #00e5ff) 50%, transparent),
    0 8px 24px rgba(0,0,0,0.6);
  z-index:10;
}

/* Fächer-Layout: nur aktiv, wenn der Container .fan hat UND genau
   3 Karten darin sind. Karten werden dann absolut positioniert,
   ueberlappen leicht und sind rotiert. Im Fächer sind sie groesser
   (clamp 110-160px) als in der horizontalen Hand-Reihe.
   WICHTIG: left:50% + transform:translateX(-50% ± offset) zentriert
   jede Karte um ihre eigene Mitte. Karte 1 ist 30% der Kartenbreite
   links vom Container-Mittelpunkt, Karte 3 entsprechend rechts.
   Bei einer 160px-Karte sind das ±48px Spread — sichtbar und lesbar,
   aber mit Hueft-Bewegung. Hover hebt die Karte (transform-Override). */
.action-cards.fan .action-card,
.action-cards.fan .tcg-card--hand{
  width:clamp(110px, 12vw, 160px);
  height:clamp(150px, 18vh, 200px);
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:50% 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
  will-change:transform;
}
.action-cards.fan .action-card:nth-child(1),
.action-cards.fan .tcg-card--hand:nth-child(1){
  transform:translate(-78%, -10%) rotate(-10deg);
  z-index:1;
}
.action-cards.fan .action-card:nth-child(2),
.action-cards.fan .tcg-card--hand:nth-child(2){
  transform:translate(-50%, -28%) rotate(0deg);
  z-index:3;
}
.action-cards.fan .action-card:nth-child(3),
.action-cards.fan .tcg-card--hand:nth-child(3){
  transform:translate(-22%, -10%) rotate(10deg);
  z-index:1;
}
.action-cards.fan .action-card:hover,
.action-cards.fan .tcg-card--hand:hover{
  transform:translate(-50%, -60%) scale(1.12) rotate(0deg) !important;
  z-index:10;
}

/* Hover: Karte richtet sich auf, hebt sich ab, springt nach vorn */
.action-card:hover{
  z-index:999;                 /* sofort nach vorn */
  transform:scale(1.15) translateY(-35px) rotate(0deg);
  box-shadow:
    0 0 25px color-mix(in srgb, var(--card-color, #00e5ff) 60%, transparent),
    0 12px 40px rgba(0,0,0,0.8),
    inset 0 0 24px color-mix(in srgb, var(--card-color, #00e5ff) 20%, transparent);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    box-shadow 0.3s ease,
    z-index 0s linear 0s;        /* z-index SOFORT beim Hover */
}

/* Cooldown-Zustand: Karte bleibt interaktiv, aber gedämpft */
.action-card.cooldown{cursor:not-allowed;opacity:0.7}
.action-card.cooldown:hover{
  /* Hover-Effekt bleibt (User-Feedback), Karte springt trotzdem nach vorn */
  z-index:999;
  transform:scale(1.15) translateY(-35px) rotate(0deg);
  opacity:0.7;
  box-shadow:0 0 20px color-mix(in srgb, var(--card-color, #00e5ff) 30%, transparent);
}
.action-card.cooldown .ac-name,
.action-card.cooldown .ac-sub,
.action-card.cooldown .ac-art{filter:grayscale(0.7) brightness(0.7)}

@keyframes acPulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.6}
}

/* Karten-Header (Name) */
.ac-name{
  position:absolute;top:0;left:0;right:0;height:20px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(180deg,var(--card-color,#00e5ff),color-mix(in srgb,var(--card-color,#00e5ff) 60%,#000));
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;letter-spacing:1px;
  color:#020714;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
  z-index:5;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%);
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.ac-name .ac-key{
  position:absolute;top:4px;right:5px;
  font-size:9px;font-weight:800;color:#020714;
  background:rgba(0,0,0,0.25);
  padding:1px 5px;border-radius:2px;
  text-shadow:none;
}
.ac-name .ac-cost{
  position:absolute;top:2px;right:4px;
  font-size:9px;font-weight:900;color:#020714;
  background:rgba(255,255,255,0.35);
  padding:1px 6px;border-radius:2px;
  text-shadow:none;
  letter-spacing:0;
}

/* Karten-Art-Container (kompakter, an 140x210 angepasst) */
.ac-art{
  position:absolute;top:22px;left:5px;right:5px;height:36px;
  border-radius:4px;
  background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--card-color,#00e5ff) 25%,#020714) 0%,#020714 80%);
  border:1px solid color-mix(in srgb,var(--card-color,#00e5ff) 50%,#000);
  overflow:hidden;
  box-shadow:inset 0 0 8px rgba(0,0,0,0.5);
  z-index:2;
}
/* Illustrationen (CSS-only) — an kleinere Karten angepasst */
.ac-art .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}

/* AUFWIND — Wind/Wirbel */
.ac-art .art.wind{
  background:
    radial-gradient(ellipse at 50% 50%,transparent 22%,color-mix(in srgb,#6ee7b7 35%,transparent) 23%,transparent 28%),
    radial-gradient(ellipse at 50% 50%,transparent 30%,color-mix(in srgb,#6ee7b7 50%,transparent) 31%,transparent 36%);
  animation:windSpin 3s linear infinite;
}
.ac-art .art.wind::before{
  content:"";position:absolute;width:75%;height:75%;border-radius:50%;
  border:2px dashed rgba(110,231,183,0.6);
  border-top-color:transparent;border-bottom-color:transparent;
  animation:windSpin 2s linear infinite reverse;
  box-shadow:0 0 20px rgba(110,231,183,0.5),inset 0 0 20px rgba(110,231,183,0.3);
}
.ac-art .art.wind::after{
  content:"";position:absolute;width:45%;height:45%;border-radius:50%;
  background:radial-gradient(circle,#bae6fd 0%,#6ee7b7 40%,transparent 70%);
  box-shadow:0 0 14px #6ee7b7;
  animation:windSpin 1.5s linear infinite;
}
@keyframes windSpin{to{transform:rotate(360deg)}}

/* FROSTHAUCH — Eiskristall */
.ac-art .art.frost{
  background:radial-gradient(ellipse at 50% 50%,rgba(186,230,253,0.2) 0%,transparent 60%);
}
.ac-art .art.frost::before{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%);
  border-left:18px solid transparent;border-right:18px solid transparent;
  border-bottom:36px solid #bae6fd;
  filter:drop-shadow(0 0 8px #bae6fd);
  animation:frostGlow 2.5s ease-in-out infinite;
}
.ac-art .art.frost::after{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%) rotate(180deg);
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-bottom:22px solid #7dd3fc;
  filter:drop-shadow(0 0 6px #7dd3fc);
}
@keyframes frostGlow{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
  50%{transform:translate(-50%,-50%) scale(1.1);opacity:0.85}
}

/* FIEBERHAGEL — Feuerball */
.ac-art .art.fire{
  background:radial-gradient(ellipse at 50% 60%,rgba(249,115,22,0.3) 0%,transparent 60%);
}
.ac-art .art.fire::before{
  content:"";position:absolute;left:50%;top:55%;width:38px;height:38px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fde047 0%,#f97316 35%,#b91c1c 70%,transparent 100%);
  box-shadow:0 0 18px #f97316,0 0 36px #f97316;
  animation:firePulse 1.2s ease-in-out infinite;
}
.ac-art .art.fire::after{
  content:"";position:absolute;left:50%;top:55%;width:58px;height:58px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 60%,transparent 30%,rgba(253,224,71,0.4) 50%,transparent 70%),
    conic-gradient(from 0deg,transparent 0deg,rgba(249,115,22,0.5) 30deg,transparent 60deg);
  border-radius:50%;
  animation:fireSpin 3s linear infinite;
}
@keyframes firePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.15)}
}
@keyframes fireSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Karten-Element-Glyph (grosses Symbol oben links, z.B. ⚡ fuer Plasma) */
.ac-element{
  position:absolute;
  top:0.15em;left:0.35em;
  font-size:1.3em;
  color:color-mix(in srgb, var(--card-color, #00e5ff) 80%, white);
  text-shadow:0 0 8px var(--card-color, #00e5ff);
  font-weight:700;
  z-index:6;
  pointer-events:none;
}
/* Karten-Tier (z.B. TACTICAL, FIRE, ICE) oben rechts */
.ac-tier{
  position:absolute;
  top:0.15em;right:0.35em;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(0.5rem, 0.8vw, 0.7rem);
  font-weight:700;
  color:color-mix(in srgb, var(--card-color, #00e5ff) 70%, white);
  letter-spacing:0.08em;
  text-shadow:0 0 4px var(--card-color, #00e5ff);
  z-index:6;
  pointer-events:none;
}
/* Karten-Body-Desc (zusaetzliche Beschreibung, klein) */
.ac-desc{
  font-size:0.7em;
  font-style:italic;
  color:var(--text-dim, #b8d4f0);
  opacity:0.7;
  line-height:1.2;
  margin-top:0.2em;
}
/* Selected-State fuer Drafting-Karten */
.tcg-card--selected{
  outline:2px solid color-mix(in srgb, var(--card-color, #00e5ff) 80%, white);
  outline-offset:2px;
  box-shadow:
    0 0 25px color-mix(in srgb, var(--card-color, #00e5ff) 60%, transparent),
    0 0 60px color-mix(in srgb, var(--card-color, #00e5ff) 30%, transparent);
}

/* Karten-Body (Beschreibung) — relative Position zur Kartenhöhe,
   damit der Text auf kleinen UND grossen Karten korrekt sitzt
   (vorher war top:60px fix, was auf grossen Karten den Header
   überdeckt). */
.ac-body{
  position:absolute;
  top:46%;
  left:4%;
  right:4%;
  z-index:3;
}
.ac-sub{
  font-size:9px;color:#cfeaf5;line-height:1.25;
  font-family:'Rajdhani',sans-serif;font-weight:500;
  text-align:center;
  padding:3px 0;
  border-top:1px solid color-mix(in srgb,var(--card-color,#00e5ff) 30%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--card-color,#00e5ff) 30%,transparent);
  background:rgba(0,0,0,0.25);
  border-radius:2px;
  letter-spacing:0.2px;
}
.ac-stats{
  display:flex;justify-content:space-around;margin-top:3px;font-size:8px;
  font-family:'Share Tech Mono',monospace;color:#7dd3fc;
}
.ac-stat{display:flex;flex-direction:column;align-items:center;gap:0}
.ac-stat .lbl{font-size:7px;text-transform:uppercase;letter-spacing:0.5px;color:#6f8fa8}
.ac-stat .v{font-size:9px;font-weight:700;color:var(--card-color,#00e5ff)}

/* Karten-Footer (Charges) */
.ac-charges{
  position:absolute;bottom:5px;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Orbitron',sans-serif;
  z-index:5;
}
.charges-text{font-size:11px;font-weight:800;color:#cfeaf5;letter-spacing:0.5px}
.charges-text b{color:var(--card-color,#00e5ff);text-shadow:0 0 6px currentColor;font-size:13px}
.charges-dots{display:flex;gap:2px}
.charges-dots .d{
  width:7px;height:7px;border-radius:50%;
  background:rgba(125,211,252,0.15);
  border:1px solid rgba(125,211,252,0.4);
}
.charges-dots .d.active{
  background:var(--card-color,#00e5ff);
  box-shadow:0 0 6px var(--card-color,#00e5ff);
  border-color:var(--card-color,#00e5ff);
}

/* Cooldown-Overlay (an kleinere Karten angepasst) */
.ac-cooldown{
  position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(2,7,20,0.88) var(--cd,0deg),transparent var(--cd,0deg));
  opacity:0;transition:opacity 0.1s;z-index:6;
}
.action-card.cooldown .ac-cooldown{opacity:1}
.action-card.cooldown .ac-name,
.action-card.cooldown .ac-sub,
.action-card.cooldown .ac-art{filter:grayscale(0.7) brightness(0.65)}

/* Pulse-Hintergrund für ready (an kleinere Karten angepasst) */
.ac-pulse{
  position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:8px;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--card-color,#00e5ff) 28%,transparent) 0%,transparent 55%);
  opacity:0;transition:opacity 0.4s;
}
.action-card.ready .ac-pulse{opacity:1;animation:acPulse 2.4s ease-in-out infinite}
@keyframes acPulse{
  0%,100%{opacity:0.35}
  50%{opacity:0.85}
}

/* Element-Indikator oben links (kleinere Karte) */
.ac-element{
  position:absolute;top:4px;left:5px;
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,var(--card-color,#00e5ff) 0%,color-mix(in srgb,var(--card-color,#00e5ff) 50%,#000) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;color:#020714;font-weight:800;
  z-index:6;box-shadow:0 0 6px var(--card-color,#00e5ff);
  border:1px solid rgba(255,255,255,0.3);
}
.ac-element.el-frost{font-size:9px;line-height:18px}
.ac-element.el-plasma{font-size:9px;line-height:18px}
.ac-element.el-fire{font-size:9px;line-height:18px}

/* ============== QUICKBAR (vergrößert) ============== */
.quickbar{
  background:linear-gradient(180deg,rgba(10,24,50,0.6),rgba(2,7,20,0.85));
  border:1px solid #0e2a4a;border-radius:8px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 0 20px rgba(0,229,255,0.04);
}
.qb-header{display:flex;justify-content:space-between;align-items:center}
.qb-title{
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;letter-spacing:3px;
  color:#00e5ff;text-align:center;text-transform:uppercase;
  text-shadow:0 0 8px rgba(0,229,255,0.5);
  flex:1;
}
.qb-hint{font-size:11px;color:#7dd3fc;font-family:'Share Tech Mono',monospace}
.qb-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.qb-slot{
  position:relative;
  background:linear-gradient(180deg,rgba(14,42,74,0.7),rgba(6,18,42,0.9));
  border:1px solid #0e2a4a;border-radius:6px;
  padding:10px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;overflow:hidden;
  transition:all 0.2s ease;
  min-height:90px;
}
.qb-slot::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,229,255,0.1) 0%,transparent 50%);
  opacity:0;transition:opacity 0.2s;
}
.qb-slot:hover{
  transform:translateY(-3px) scale(1.04);
  border-color:#00e5ff;
  box-shadow:0 6px 20px rgba(0,229,255,0.4),0 0 0 1px rgba(0,229,255,0.6);
}
.qb-slot:hover::before{opacity:1}
.qb-slot.selected{
  border-color:#00e5ff;
  box-shadow:0 0 24px rgba(0,229,255,0.6),inset 0 0 16px rgba(0,229,255,0.2);
  background:linear-gradient(180deg,rgba(14,42,74,0.95),rgba(6,18,42,1));
}
.qb-slot.selected::before{opacity:1}
.qb-slot.placing{
  border-color:#22c55e;
  box-shadow:0 0 24px rgba(34,197,94,0.7),inset 0 0 16px rgba(34,197,94,0.2);
  animation:qbPlace 1.5s ease-in-out infinite;
}
@keyframes qbPlace{
  0%,100%{box-shadow:0 0 16px rgba(34,197,94,0.5),inset 0 0 12px rgba(34,197,94,0.15)}
  50%{box-shadow:0 0 32px rgba(34,197,94,0.9),inset 0 0 24px rgba(34,197,94,0.3)}
}
.qb-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:2px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
  opacity:0.5;
}
.qb-icon{font-size:30px;line-height:1;filter:drop-shadow(0 0 6px rgba(0,229,255,0.6))}
.qb-key{
  position:absolute;top:4px;left:6px;
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:800;
  color:#7dd3fc;
  background:rgba(2,7,20,0.7);
  border:1px solid #0d3a66;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
}
.qb-name{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:1.2px;color:#cfeaf5;text-transform:uppercase}
.qb-cost{font-family:'Share Tech Mono',monospace;font-size:12px;color:#ffb627;font-weight:700}
.qb-tip{
  font-size:11px;color:#7dd3fc;font-family:'Share Tech Mono',monospace;
  text-align:center;letter-spacing:0.3px;padding-top:4px;
  border-top:1px dashed #0e2a4a;
}

/* ============== RIGHT SIDEBAR (vergrößert) ============== */
.element-rad-wrap{
  display:flex;justify-content:center;align-items:center;
  margin:8px 0 14px;
  position:relative;
  padding:6px;
  background:radial-gradient(ellipse at center,rgba(14,42,74,0.35) 0%,transparent 70%);
  border-radius:8px;
}
.element-rad{
  width:100%;max-width:260px;height:auto;
  display:block;
  filter:drop-shadow(0 0 10px rgba(0,229,255,0.4));
  transition:transform 0.3s ease,filter 0.3s ease;
}
.element-rad-wrap:hover .element-rad{
  transform:scale(1.03);
  filter:drop-shadow(0 0 16px rgba(0,229,255,0.7));
}
.rad-seq{font-size:11px;color:#7dd3fc;text-align:center;font-family:'Share Tech Mono',monospace;margin-bottom:14px;letter-spacing:0.5px}

.logbox{
  background:rgba(2,7,20,0.7);border:1px solid #0e2a4a;border-radius:6px;
  padding:12px 12px;min-height:180px;
  font-size:12px;
  line-height:1.4;
}
.log-empty{color:#7dd3fc;font-style:italic;text-align:center;padding:20px 0;font-size:12px}

.matrix{
  background:rgba(2,7,20,0.7);border:1px solid #0e2a4a;border-radius:6px;
  padding:10px;font-size:12px;margin-bottom:12px;
  font-family:'Share Tech Mono',monospace;
}
.matrix-head,.matrix-row{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;
  gap:4px;align-items:center;padding:4px 0;
}
.matrix-head{color:#7dd3fc;border-bottom:1px solid #0e2a4a;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.matrix-row{border-bottom:1px dashed rgba(14,42,74,0.5)}
.matrix-row:last-child{border-bottom:0}
.el-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;padding:2px 6px;border-radius:3px;font-weight:600;
}
.el-tag.e-erde{color:#86efac;background:rgba(34,197,94,0.15)}
.el-tag.e-wasser{color:#7dd3fc;background:rgba(56,189,248,0.15)}
.el-tag.e-feuer{color:#fdba74;background:rgba(249,115,22,0.15)}
.el-tag.e-luft{color:#e0f7ff;background:rgba(224,247,255,0.15)}
.el-tag.e-plasma{color:#d8b4fe;background:rgba(168,85,247,0.15)}
.dot{text-align:center;color:#7dd3fc;font-weight:700}
.dot.g{color:#22c55e;text-shadow:0 0 4px #22c55e}
.dot.r{color:#ff4d6d;text-shadow:0 0 4px #ff4d6d}
.dot.o{color:#ff8800}

.matrix-legend{
  background:rgba(2,7,20,0.7);border:1px solid #0e2a4a;border-radius:6px;
  padding:10px;font-size:12px;font-family:'Share Tech Mono',monospace;
}
.lg-title{font-family:'Orbitron',sans-serif;color:#a855f7;font-size:13px;font-weight:800;letter-spacing:2.5px;margin-bottom:8px}
.lg-row{display:grid;grid-template-columns:1fr 1fr 1fr;color:#7dd3fc;font-size:10px;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.lg-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.lg-d-row{padding:3px 0;color:#cfeaf5;font-size:12px}
.lg-d-row b.g{color:#22c55e}
.lg-d-row b.o{color:#ff8800}
.lg-d-row b.v{color:#a855f7}
.lg-d-row b.c{color:#00e5ff}

/* ============== UI-BRIDGE STATUS (oben links in Sidebar) ============== */
.td-ui-status{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:14px;
  background:rgba(6,18,42,0.85);
  border:1px solid #0e2a4a;border-radius:6px;
  font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:1px;color:#cfeaf5;
}
.td-ui-status > *{display:inline-flex;align-items:center;gap:5px}
.td-ui-conn{padding:3px 8px;border-radius:4px;font-weight:800;font-size:10px;letter-spacing:1.5px}
.td-ui-conn.connected{background:rgba(34,197,94,0.18);color:#22c55e;border:1px solid #22c55e;box-shadow:0 0 8px rgba(34,197,94,0.3)}
.td-ui-conn.connecting{background:rgba(255,182,39,0.18);color:#ffb627;border:1px solid #ffb627;box-shadow:0 0 8px rgba(255,182,39,0.3)}
.td-ui-conn.disconnected{background:rgba(255,77,109,0.18);color:#ff4d6d;border:1px solid #ff4d6d;box-shadow:0 0 8px rgba(255,77,109,0.3)}
.td-ui-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.td-ui-conn.connecting .td-ui-dot{animation:td-ui-pulse 1.2s ease-in-out infinite}
@keyframes td-ui-pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.td-ui-role.host{color:#ffb627;font-weight:800;font-size:12px}
.td-ui-role.client{color:#7dd3fc;font-weight:800;font-size:12px}
.td-ui-ping{color:#7dd3fc;font-weight:700}
.td-ui-ping.gray{color:#6f8fa8}
.td-ui-lobby{color:#6f8fa8;font-size:10px}

.action-card.pending, .qb-slot.pending{
  opacity:0.6 !important;
  filter:grayscale(0.5) !important;
  cursor:wait !important;
  position:relative;
}
.action-card.pending::before{content:'⏳';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px;opacity:0.9;z-index:10}
.action-card.rejected, .qb-slot.rejected{
  animation:td-ui-shake 0.4s ease;
  border-color:#ff4d6d !important;
}
@keyframes td-ui-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.td-log-entry{
  padding:5px 8px;font-size:12px;
  font-family:'Share Tech Mono',monospace;
  color:#cfeaf5;
  border-bottom:1px dashed rgba(14,42,74,0.5);
  word-break:break-word;
  line-height:1.4;
}
.td-log-entry .ts{color:#6f8fa8;font-size:10px;margin-right:6px}
.td-log-entry.system{color:#7dd3fc}
.td-log-entry.match{color:#ffb627;font-weight:700;background:rgba(255,182,39,0.08)}
.td-log-entry.error{color:#ff4d6d}
.td-log-entry .badge{
  display:inline-block;padding:0 5px;border-radius:2px;
  font-size:9px;letter-spacing:1px;margin-right:6px;
  background:rgba(0,229,255,0.15);color:#00e5ff;font-weight:700;
}

/* ============== RESPONSIVE ============== */
@media (max-width:1400px){
  .layout{grid-template-columns:320px 1fr 300px}
  .ac-art{height:120px}
  .action-card{height:260px}
  .ac-body{top:174px}
}
@media (max-width:1200px){
  .layout{grid-template-columns:300px 1fr 280px}
  .top-bar{font-size:12px;padding:0 14px}
  .top-pill{padding:6px 10px;font-size:11px}
}

/* ============== AUTH-MODAL (Login / Register / Gast) ============== */
.auth-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(2,7,20,0.92) 0%, rgba(2,7,20,0.98) 100%);
  backdrop-filter:blur(4px);
}
.auth-modal.hidden{display:none}
.auth-card{
  width:min(420px,92vw);
  background:linear-gradient(180deg,rgba(10,24,50,0.96),rgba(2,7,20,0.98));
  border:1px solid #0e2a4a;
  border-radius:6px;
  padding:24px 22px 18px;
  box-shadow:0 0 40px rgba(0,229,255,0.15), 0 0 0 1px rgba(0,229,255,0.05) inset;
  position:relative;
}
.auth-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
}
.auth-head{margin-bottom:14px;text-align:center}
.auth-title{
  font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;
  color:#00e5ff;letter-spacing:3px;
  text-shadow:0 0 10px rgba(0,229,255,0.4);
}
.auth-sub{
  font-family:'Share Tech Mono',monospace;font-size:10px;
  color:#6f8fa8;letter-spacing:2px;margin-top:4px;
}
.auth-tabs{display:flex;gap:0;margin:14px 0 16px;border-bottom:1px solid #0e2a4a}
.auth-tab{
  flex:1;padding:8px 0;background:transparent;border:0;
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;
  color:#6f8fa8;cursor:pointer;
  border-bottom:2px solid transparent;transition:all 0.2s;
}
.auth-tab:hover{color:#cfeaf5}
.auth-tab.active{color:#00e5ff;border-bottom-color:#00e5ff}
.auth-panel{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.auth-panel.hidden{display:none}
.auth-label{
  font-family:'Share Tech Mono',monospace;font-size:9px;
  color:#6f8fa8;letter-spacing:1.5px;text-transform:uppercase;
  margin-top:6px;
}
.auth-input{
  background:#020714;border:1px solid #0e2a4a;border-radius:3px;
  color:#cfeaf5;padding:8px 10px;
  font-family:'Share Tech Mono',monospace;font-size:13px;
  outline:none;transition:all 0.2s;
}
.auth-input:focus{border-color:#00e5ff;box-shadow:0 0 8px rgba(0,229,255,0.2)}
.auth-submit{margin-top:12px;width:100%}
.auth-submit .btn-text{font-size:13px;letter-spacing:2px}
.auth-submit:disabled{opacity:0.4;cursor:not-allowed}
.auth-divider{
  display:flex;align-items:center;gap:10px;margin:18px 0 12px;
  font-family:'Share Tech Mono',monospace;font-size:9px;
  color:#6f8fa8;letter-spacing:3px;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:#0e2a4a;
}
.auth-message{
  min-height:18px;margin-top:10px;
  font-family:'Share Tech Mono',monospace;font-size:11px;
  text-align:center;letter-spacing:1px;
}
.auth-message.error{color:#ff4d6d}
.auth-message.success{color:#22c55e}
.auth-message.info{color:#7dd3fc}

/* ============== TOP-BAR AUTH-FELDER ============== */
.auth-logout-btn{
  background:transparent;border:1px solid #0e2a4a;border-radius:3px;
  color:#ff4d6d;padding:3px 8px;margin-left:8px;
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  cursor:pointer;transition:all 0.2s;
}
.auth-logout-btn:hover{
  background:rgba(255,77,109,0.1);border-color:#ff4d6d;
  box-shadow:0 0 8px rgba(255,77,109,0.3);
}

/* ═══ LOADING OVERLAY ═══
   Wird eingeblendet, sobald Pixi-Init startet (init() in ui-game.js
   setzt das data-loading Attribut auf #gameScreen), und wieder
   ausgeblendet, sobald Pixi ready ist. Deckt den Canvas-Bereich ab,
   damit der User keine leere/schwarze Map sieht waehrend der
   50-100ms Init-Zeit. */
.pixi-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: radial-gradient(ellipse at center, #0a1832 0%, #020714 80%);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
}
.game-screen[data-loading="true"] .pixi-loading-overlay {
  opacity: 1;
}
.game-screen[data-loading="false"] .pixi-loading-overlay,
.game-screen:not([data-loading]) .pixi-loading-overlay {
  opacity: 0;
  pointer-events: none;
}
.loading-spinner {
  width: 64px;
  height: 64px;
  border: 3px solid rgba(0, 229, 255, 0.15);
  border-top-color: #00e5ff;
  border-right-color: #00e5ff;
  border-radius: 50%;
  animation: pixi-spin 0.8s linear infinite;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}
@keyframes pixi-spin { to { transform: rotate(360deg); } }
.loading-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  text-transform: uppercase;
}
.loading-subtext {
  font-size: 0.8rem;
  color: #6f8fa8;
  letter-spacing: 0.05em;
}