@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  --bg:            #02050b;
  --panel:         rgba(3, 8, 18, 0.92);
  --cyan:          #34f5ff;
  --cyan-dim:      rgba(52, 245, 255, 0.15);
  --cyan-glow:     rgba(52, 245, 255, 0.40);
  --cyan-bright:    #5affff;
  --cyan-gradient-1: #34f5ff;
  --cyan-gradient-2: #5affff;
  --cyan-gradient-3: #8affff;
  --orange:        #ff9d35;
  --orange-dim:    rgba(255, 157, 53, 0.15);
  --orange-glow:   rgba(255, 157, 53, 0.40);
  --orange-bright:   #ffb35a;
  --orange-gradient-1: #ff9d35;
  --orange-gradient-2: #ffb35a;
  --orange-gradient-3: #ffcc80;
  --pink:          #c65cff;
  --pink-glow:     rgba(198, 92, 255, 0.40);
  --pink-bright:    #d16dff;
  --pink-gradient-1: #c65cff;
  --pink-gradient-2: #d16dff;
  --pink-gradient-3: #e080ff;
  --green:         #65e68a;
  --green-dim:     rgba(101, 230, 138, 0.15);
  --green-glow:    rgba(101, 230, 138, 0.40);
  --green-bright:   #7ae698;
  --text:          #eaf8ff;
  --text-bright:   #ffffff;
  --text-muted:    #7ba2b8;
  --text-muted-bright: #9bc0d0;
  --danger:        #ff5f76;
  --danger-glow:   rgba(255, 95, 118, 0.40);
  --danger-bright:  #ff7a8a;
  --shadow:        rgba(0, 0, 0, 0.6);
  --shadow-light:   rgba(0, 0, 0, 0.3);
  --border:        rgba(52, 245, 255, 0.25);
  --border-bright:  rgba(52, 245, 255, 0.5);
  --glass:         rgba(255, 255, 255, 0.03);
  --glass-hover:   rgba(255, 255, 255, 0.08);
  --muted:         var(--text-muted);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* CRT scanlines overlay on entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.025), rgba(0,255,0,0.012), rgba(0,0,255,0.025));
  background-size: 100% 4px, 8px 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ═══════════════════════════════════════════════════
   HIDDEN UTILITY
═══════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════
   ORIENTATION WARNING
═══════════════════════════════════════════════════ */
.orientation-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  place-items: center;
}
.orientation-content {
  text-align: center;
  padding: 2rem;
  border: 1px solid var(--cyan-glow);
  border-radius: 12px;
  background: rgba(3,8,18,0.9);
}

/* ═══════════════════════════════════════════════════
   VOLUME SLIDERS
═══════════════════════════════════════════════════ */
.volume-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}
.volume-icon { font-size: 1.1rem; }
.volume-icon-sm { font-size: 0.85rem; }
.volume-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--cyan);
  min-width: 2.5rem;
  text-align: right;
}
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(52,245,255,0.15);
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  cursor: pointer;
}
.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  border: none;
  cursor: pointer;
}
.volume-slider-sm {
  height: 4px;
}
.volume-slider-sm::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
}
.hud-volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid rgba(52,245,255,0.15);
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   INTRO VIDEO OVERLAY
═══════════════════════════════════════════════════ */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.intro-overlay.hidden {
  display: none;
}
.intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.skip-intro-btn {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  padding: 0.6rem 1.4rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: rgba(3,8,18,0.85);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s;
  z-index: 10000;
}
.skip-intro-btn:hover {
  background: rgba(52,245,255,0.15);
  transform: scale(1.05);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.orientation-icon { font-size: 3rem; margin-bottom: 1rem; }
@media (orientation: portrait) and (max-width: 820px) {
  .orientation-warning { display: grid; }
}

/* ═══════════════════════════════════════════════════
   MENU WRAPPER – fullscreen immersive lobby
═══════════════════════════════════════════════════ */
.menu-wrapper {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Widescreen blurred background wallpaper */
.menu-widescreen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.widescreen-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.28) saturate(0.65);
  transform: scale(1.05);
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.widescreen-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 40%, rgba(2, 5, 11, 0.8) 100%);
}

/* Centered Responsive 1:1 Aspect-Ratio Canvas Container */
.lobby-container {
  position: absolute;
  aspect-ratio: 16 / 9;
  width: 100vw;
  height: calc(100vw * 9 / 16);
  max-width: 177.78vh;
  max-height: 100vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95);
  background: #000;
  display: block;
  z-index: 1;
}

.lobby-container .menu-bg-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  transform: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── LOGO HEADER OVERLAY (Aligned over the shield graphics) ─── */
.lobby-logo-overlay {
  position: absolute;
  top: 4.8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
  width: 100%;
}

.logo-block {
  display: inline-block;
  text-align: center;
}

.logo-hyper {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(
    180deg,
    #ffffff   0%,
    #c8c0ff  20%,
    #9d6fff  40%,
    #c65cff  60%,
    #7b3fcc  80%,
    #3a1f66 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(198,92,255,0.7));
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(198,92,255,0.7)); }
  50%       { filter: drop-shadow(0 0 20px rgba(198,92,255,0.9)) drop-shadow(0 0 35px rgba(52,245,255,0.25)); }
}

.logo-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.7rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #eaf8ff;
  text-shadow: 0 0 10px rgba(52,245,255,0.6);
  margin-top: 0.1em;
}

.logo-mode {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.45rem, 0.9vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-shadow: 0 0 5px var(--cyan-glow);
  margin-top: 0.3em;
  padding: 0.15em 0.8em;
  border: 1px solid rgba(52,245,255,0.25);
  border-radius: 2px;
  background: rgba(52,245,255,0.06);
  display: inline-block;
}

/* ─── TERMINAL SCREEN OVERLAYS (3D Perspective) ─── */
.terminal-screen-overlay {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 5;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Player 1 Console (Left Screen) */
.p1-screen-overlay {
  left: 8.5%;
  top: 54.0%;
  width: 24.5%;
  height: 22.0%;
  transform: perspective(700px) rotateX(19deg) rotateY(31deg) rotateZ(-10.5deg);
  transform-origin: center center;
  color: var(--cyan);
  padding: clamp(0.3rem, 0.7vw, 0.55rem) clamp(0.8rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(1, 15, 28, 0.82);
  border: 1.5px solid rgba(52, 245, 255, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 16px rgba(52, 245, 255, 0.18), 0 0 20px rgba(52, 245, 255, 0.15);
  backdrop-filter: blur(8px);
}

/* P1 header (indicator + label + status) is also tight to the top. */
.p1-screen-overlay .terminal-header-mini {
  padding-bottom: clamp(0.1rem, 0.25vw, 0.2rem);
  margin-bottom: 0;
}

.p1-screen-overlay .terminal-info-mini {
  margin-top: clamp(0.1rem, 0.25vw, 0.2rem);
}

/* Player 2 Console (Right Screen) — re-purposed as the Account panel.
   Same dimensions as the P1 terminal so both halves of the lobby look
   balanced. The Account block here is just a small set of buttons
   (Reset, Achievements, Stats); the modals behind them do the real
   work. */
.p2-screen-overlay {
  left: 65.5%;
  top: 54.0%;
  width: 24.5%;
  height: 22.0%;
  transform: perspective(700px) rotateX(19deg) rotateY(-31deg) rotateZ(10.5deg);
  transform-origin: center center;
  color: var(--orange);
  padding: clamp(0.3rem, 0.7vw, 0.55rem) clamp(0.8rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(20, 8, 1, 0.82);
  border: 1.5px solid rgba(255, 157, 53, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 16px rgba(255, 157, 53, 0.18), 0 0 20px rgba(255, 157, 53, 0.15);
  backdrop-filter: blur(8px);
}

.p2-status-online {
  color: rgba(101, 230, 138, 0.95) !important;
  text-shadow: 0 0 6px rgba(101, 230, 138, 0.55);
}

/* Compact Account-block layout for the right-side P2 panel. The
   header is anchored to the top (no avatar gap), the section header sits
   close to the username line, the action buttons stack tightly, and
   the destructive "Reset" button is pushed to the bottom. */
.p2-screen-overlay .account-stats-terminal {
  gap: 0; /* spacing handled by the section's own padding */
  flex-grow: 1;
}

/* Header (indicator + username label + status pill) is compact and
   sits right at the top of the panel. */
.p2-screen-overlay .terminal-header-mini {
  padding-bottom: clamp(0.1rem, 0.25vw, 0.2rem);
  margin-bottom: 0;
}

.p2-screen-overlay .account-stats-terminal .account-section-mini {
  margin-top: 0;
  padding-top: clamp(0.15rem, 0.3vw, 0.25rem);
  gap: clamp(0.12rem, 0.22vw, 0.2rem);
  flex-grow: 1;
  justify-content: flex-start;
}

.p2-screen-overlay .account-stats-terminal .account-section-header {
  font-size: clamp(0.5rem, 0.78vw, 0.62rem);
  margin-bottom: 0;
}

.p2-screen-overlay .account-stats-terminal .btn-account-reset {
  padding: clamp(0.25rem, 0.45vw, 0.35rem) 0.5rem;
  font-size: clamp(0.45rem, 0.65vw, 0.55rem);
  /* Push the destructive action to the very bottom of the panel so
     the user has to scan past the read-only views first. */
  margin-top: auto;
}

.p2-screen-overlay .account-stats-terminal .btn-account-action {
  padding: clamp(0.22rem, 0.4vw, 0.32rem) 0.5rem;
  font-size: clamp(0.45rem, 0.65vw, 0.55rem);
}

.p2-screen-overlay .account-stats-terminal .account-section-hint {
  display: none; /* hide the hint in the compact panel */
}

/* Access Denied / Shake warning for locked elements */
.shake-highlight {
  animation: shakeWarning 0.5s ease-in-out;
  filter: brightness(1.5) drop-shadow(0 0 10px var(--danger));
}

@keyframes shakeWarning {
  0%, 100% { transform: perspective(700px) rotateX(19deg) rotateY(31deg) rotateZ(-10.5deg) translateX(0); }
  20%, 60% { transform: perspective(700px) rotateX(19deg) rotateY(31deg) rotateZ(-10.5deg) translateX(-4px); }
  40%, 80% { transform: perspective(700px) rotateX(19deg) rotateY(31deg) rotateZ(-10.5deg) translateX(4px); }
}

/* ─── TERMINAL LOGIN & REGISTER MASKS ─── */
.p1-screen-overlay .auth-tabs {
  display: flex;
  border: 1px solid rgba(52, 245, 255, 0.35);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: clamp(0.2rem, 0.6vw, 0.45rem);
  background: rgba(0, 0, 0, 0.5);
}

.p1-screen-overlay .auth-tab {
  flex: 1;
  padding: clamp(0.2rem, 0.4vw, 0.4rem);
  background: transparent;
  border: none;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.5rem, 0.8vw, 0.65rem);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
}

.p1-screen-overlay .auth-tab:hover {
  color: var(--cyan);
  background: rgba(52, 245, 255, 0.05);
}

.p1-screen-overlay .auth-tab.active-tab-btn {
  background: rgba(52, 245, 255, 0.2);
  color: var(--cyan);
  box-shadow: inset 0 0 8px rgba(52, 245, 255, 0.25);
  text-shadow: 0 0 4px var(--cyan);
}

.auth-form-terminal {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.5vw, 0.4rem);
}

.auth-form-terminal input {
  width: 100%;
  background: rgba(1, 10, 20, 0.8);
  border: 1px solid rgba(52, 245, 255, 0.35);
  border-left: 3px solid var(--cyan);
  border-radius: 3px;
  padding: clamp(0.3rem, 0.6vw, 0.5rem) clamp(0.4rem, 0.8vw, 0.65rem);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.6rem, 0.9vw, 0.78rem);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  outline: none;
  transition: all 0.2s;
}

.auth-form-terminal input:focus {
  border-color: var(--orange);
  border-left-color: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow), inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.auth-buttons-row {
  display: flex;
  gap: 0.3rem;
}

.btn-terminal-action {
  flex: 1;
  padding: clamp(0.35rem, 0.6vw, 0.5rem);
  background: rgba(52, 245, 255, 0.08);
  border: 1.5px solid var(--cyan);
  border-radius: 4px;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.55rem, 0.8vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-terminal-action:hover {
  background: rgba(52, 245, 255, 0.18);
  box-shadow: 0 0 10px rgba(52, 245, 255, 0.35);
}

.btn-terminal-action.btn-guest {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 157, 53, 0.08);
}

.btn-terminal-action.btn-guest:hover {
  background: rgba(255, 157, 53, 0.18);
  box-shadow: 0 0 10px rgba(255, 157, 53, 0.35);
}

/* Offline banner shown when the server is unreachable. */
.offline-banner {
  font-size: clamp(0.5rem, 0.8vw, 0.65rem);
  color: var(--orange);
  text-align: center;
  margin: 0.3rem 0 0.5rem 0;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 157, 53, 0.1);
  border: 1px solid rgba(255, 157, 53, 0.35);
  border-radius: 6px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 4px rgba(255, 157, 53, 0.3);
}
.offline-banner strong {
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}

.auth-message-terminal {
  font-size: clamp(0.5rem, 0.8vw, 0.6rem);
  color: var(--orange);
  text-align: center;
  min-height: 1.2em;
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

/* ─── TERMINAL PROFILE & STATS (P1 & P2 inside screens) ─── */
.player-stats-terminal {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  box-sizing: border-box;
}

.terminal-header-mini {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(52, 245, 255, 0.25);
  padding-bottom: clamp(0.15rem, 0.4vw, 0.3rem);
}

.p2-screen-overlay .terminal-header-mini {
  border-bottom-color: rgba(255, 157, 53, 0.25);
}

.terminal-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: blink 1.8s ease-in-out infinite;
}

.terminal-label {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.55rem, 0.8vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p1-screen-overlay .terminal-label { 
  color: var(--cyan); 
  text-shadow: 0 0 8px var(--cyan-glow);
}
.p2-screen-overlay .terminal-label { 
  color: var(--orange); 
  text-shadow: 0 0 8px var(--orange-glow);
}

.terminal-status {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.45rem, 0.7vw, 0.58rem);
  margin-left: auto;
  font-weight: bold;
}

.p1-screen-overlay .terminal-status { 
  color: var(--green); 
  text-shadow: 0 0 6px rgba(101, 230, 138, 0.5);
}
.p2-screen-overlay .terminal-status { 
  color: var(--orange); 
  text-shadow: 0 0 6px rgba(255, 157, 53, 0.5);
}

.terminal-avatar-mini {
  display: flex;
  justify-content: center;
  margin: clamp(0.15rem, 0.4vw, 0.3rem) 0;
}

.terminal-avatar-mini .player-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 15px var(--cyan-glow), 0 0 25px var(--cyan-glow);
}

.terminal-avatar-mini .p2-tag {
  color: var(--orange);
  text-shadow: 0 0 15px var(--orange-glow), 0 0 25px var(--orange-glow);
}

.terminal-info-mini {
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.3vw, 0.22rem);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.58rem, 0.85vw, 0.72rem);
}

.info-label {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.48rem, 0.7vw, 0.58rem);
  color: var(--muted);
}

.info-val {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  color: var(--text);
}

.xp-section-mini {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.xp-bar-wrap-mini {
  height: 3px;
  background: rgba(52, 245, 255, 0.1);
  border-radius: 1.5px;
  overflow: hidden;
  border: 1px solid rgba(52, 245, 255, 0.2);
}

.xp-bar-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 5px var(--cyan-glow);
  border-radius: 1.5px;
}

.xp-label-mini {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.45rem, 0.7vw, 0.55rem);
  color: var(--muted);
}

.terminal-conn-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.48rem, 0.7vw, 0.58rem);
  color: var(--muted);
  border-top: 1px solid rgba(52, 245, 255, 0.15);
  padding-top: clamp(0.15rem, 0.35vw, 0.25rem);
}

.p2-screen-overlay .terminal-conn-mini {
  border-top-color: rgba(255, 157, 53, 0.15);
}

/* ─── ACCOUNT SECTION (in P1 terminal, visible after login) ────────── */
.account-section-mini {
  margin-top: clamp(0.3rem, 0.6vw, 0.5rem);
  padding-top: clamp(0.2rem, 0.4vw, 0.35rem);
  border-top: 1px solid rgba(52, 245, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.3vw, 0.25rem);
}

.account-section-header {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.5rem, 0.78vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}

.btn-account-reset {
  width: 100%;
  padding: clamp(0.3rem, 0.55vw, 0.45rem) 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.5rem, 0.78vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--danger);
  background: rgba(255, 95, 118, 0.08);
  border: 1px solid rgba(255, 95, 118, 0.4);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-account-reset:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 95, 118, 0.25);
  border-color: rgba(255, 95, 118, 0.85);
  box-shadow: 0 0 12px rgba(255, 95, 118, 0.45);
}

.btn-account-reset:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-account-reset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Generic action button used in the Account panel (Achievements, Stats).
   Inherits the same sci-fi look as the reset button but stays neutral
   (cyan glow) to signal "opens something" rather than "destroys data". */
.btn-account-action {
  width: 100%;
  margin-top: clamp(0.18rem, 0.3vw, 0.25rem);
  padding: clamp(0.25rem, 0.45vw, 0.35rem) 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.45rem, 0.65vw, 0.55rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(52, 245, 255, 0.06);
  border: 1px solid rgba(52, 245, 255, 0.4);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-account-action:hover:not(:disabled) {
  color: #fff;
  background: rgba(52, 245, 255, 0.2);
  border-color: rgba(52, 245, 255, 0.85);
  box-shadow: 0 0 12px rgba(52, 245, 255, 0.45);
}

.btn-account-action:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-account-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Coming-soon placeholder text for skeleton modals. */
.coming-soon {
  text-align: center;
  color: var(--text-muted-bright);
  font-style: italic;
  margin: 1rem 0;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.achievement-summary {
  grid-column: 1 / -1;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(52, 245, 255, 0.22);
  border-radius: 6px;
  background: rgba(2, 10, 20, 0.5);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-card {
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid rgba(132, 153, 170, 0.28);
  border-radius: 7px;
  background: rgba(5, 10, 18, 0.78);
  color: var(--text-muted-bright);
  overflow: hidden;
}

.achievement-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid rgba(132, 153, 170, 0.35);
  pointer-events: none;
}

.achievement-card.unlocked {
  border-color: rgba(52, 245, 255, 0.55);
  background: linear-gradient(135deg, rgba(4, 24, 34, 0.92), rgba(18, 8, 30, 0.86));
  box-shadow: inset 0 0 18px rgba(52, 245, 255, 0.08), 0 0 14px rgba(52, 245, 255, 0.12);
  color: var(--text-bright);
}

.achievement-card.unlocked::before {
  border-left-color: var(--orange);
  box-shadow: 0 0 14px rgba(255, 157, 53, 0.35);
}

.achievement-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 245, 255, 0.28);
  border-radius: 6px;
  background: rgba(52, 245, 255, 0.07);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(52, 245, 255, 0.45);
}

.achievement-copy h4 {
  margin: 0 0 0.25rem 0;
  color: var(--text-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.achievement-copy p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.achievement-state {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  color: rgba(132, 153, 170, 0.65);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

.achievement-card.unlocked .achievement-state {
  color: var(--orange);
}

.achievement-toast-stack {
  position: fixed;
  top: 4.25rem;
  left: 50%;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(420px, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.achievement-toast {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(52, 245, 255, 0.55);
  border-left: 4px solid var(--orange);
  border-radius: 7px;
  background: rgba(2, 8, 18, 0.94);
  box-shadow: 0 0 22px rgba(52, 245, 255, 0.18), inset 0 0 18px rgba(52, 245, 255, 0.07);
  transform: translateY(-130%) scale(0.98);
  opacity: 0;
  transition: transform 0.26s ease, opacity 0.26s ease;
}

.achievement-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.achievement-toast-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255, 157, 53, 0.55);
  background: rgba(255, 157, 53, 0.1);
  color: var(--orange);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
}

.achievement-toast-kicker {
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.achievement-toast-title {
  color: var(--text-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.82rem;
  margin-top: 0.12rem;
}

.achievement-toast-desc {
  color: var(--text-muted-bright);
  font-size: 0.72rem;
  line-height: 1.25;
  margin-top: 0.12rem;
}

#statsModal .coming-soon {
  display: none;
}

#statsModal .lobby-modal-content {
  width: min(920px, calc(100vw - 2rem));
  max-width: 920px;
  max-height: min(82vh, 720px);
  overflow-y: auto;
}

.stats-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.stats-summary {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.stats-summary span {
  flex: 1 1 150px;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(52, 245, 255, 0.28);
  border-radius: 7px;
  background: rgba(2, 10, 20, 0.56);
  color: var(--text-muted-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stats-summary strong {
  display: block;
  color: var(--cyan);
  font-size: 1rem;
  margin-bottom: 0.15rem;
  text-shadow: 0 0 8px rgba(52, 245, 255, 0.45);
}

.stats-card {
  border: 1px solid rgba(52, 245, 255, 0.24);
  border-radius: 7px;
  background: rgba(5, 10, 18, 0.78);
  padding: 0.75rem;
  box-shadow: inset 0 0 14px rgba(52, 245, 255, 0.05);
}

.stats-card h4 {
  margin: 0 0 0.55rem 0;
  color: var(--orange);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.38rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-muted-bright);
  font-size: 0.74rem;
}

.stats-row strong {
  color: var(--text-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stats-list {
    grid-template-columns: 1fr;
  }
}

/* ─── GENERIC IN-GAME CONFIRMATION MODAL ───────────────────────────
   Replaces window.confirm() with a sci-fi-styled dialog that fits
   the lobby. Used by destructive actions like "Spielstand
   zurücksetzen". The dialog is intentionally small and centered so
   it does not visually compete with the surrounding terminals. */
.confirm-modal-content {
  max-width: 460px;
  text-align: left;
}

.confirm-modal-body {
  margin: 0.5rem 0;
  color: var(--text-bright);
  font-size: clamp(0.7rem, 1.05vw, 0.9rem);
  line-height: 1.4;
}

.confirm-modal-warning {
  margin: 0.4rem 0 0.6rem 0;
  padding: 0.5rem 0.7rem;
  font-size: clamp(0.65rem, 0.95vw, 0.78rem);
  color: var(--orange);
  background: rgba(255, 157, 53, 0.08);
  border: 1px solid rgba(255, 157, 53, 0.35);
  border-radius: 6px;
  text-shadow: 0 0 4px rgba(255, 157, 53, 0.3);
}

.confirm-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

.btn-modal-primary,
.btn-modal-secondary {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.65rem, 0.95vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-secondary {
  color: var(--text-bright);
  background: rgba(52, 245, 255, 0.06);
  border: 1px solid rgba(52, 245, 255, 0.35);
}

.btn-modal-secondary:hover {
  background: rgba(52, 245, 255, 0.18);
  border-color: rgba(52, 245, 255, 0.7);
  box-shadow: 0 0 10px rgba(52, 245, 255, 0.35);
}

.btn-modal-primary {
  color: #fff;
  background: linear-gradient(180deg, rgba(52, 245, 255, 0.25), rgba(52, 245, 255, 0.08));
  border: 1px solid rgba(52, 245, 255, 0.7);
}

.btn-modal-primary:hover {
  background: linear-gradient(180deg, rgba(52, 245, 255, 0.4), rgba(52, 245, 255, 0.15));
  box-shadow: 0 0 14px rgba(52, 245, 255, 0.5);
}

/* Destructive variant of the primary action: red glow, signals "this
   cannot be undone easily". */
.btn-modal-primary.btn-modal-danger {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 95, 118, 0.28), rgba(255, 95, 118, 0.08));
  border-color: rgba(255, 95, 118, 0.7);
}

.btn-modal-primary.btn-modal-danger:hover {
  background: linear-gradient(180deg, rgba(255, 95, 118, 0.45), rgba(255, 95, 118, 0.15));
  box-shadow: 0 0 14px rgba(255, 95, 118, 0.55);
}

/* ─── CHANGE-PASSWORD MODAL ──────────────────────────────────────
   Same sci-fi look as the confirm modal but slightly wider so the
   three input fields fit comfortably. */
.password-modal-content {
  max-width: 520px;
  text-align: left;
}

.password-modal-hint {
  margin: 0.4rem 0 1rem 0;
  font-size: clamp(0.65rem, 0.95vw, 0.78rem);
  color: var(--text-muted-bright);
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.password-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 4px var(--cyan-glow);
}

.password-field input {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.75rem, 1.05vw, 0.88rem);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-bright);
  background: rgba(3, 8, 18, 0.85);
  border: 1px solid rgba(52, 245, 255, 0.35);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.password-field input:focus {
  border-color: rgba(52, 245, 255, 0.85);
  box-shadow: 0 0 8px rgba(52, 245, 255, 0.4);
}

.password-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 95, 118, 0.65);
}

.password-error {
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.65rem, 0.95vw, 0.78rem);
  letter-spacing: normal;
  text-transform: none;
  color: var(--danger);
  background: rgba(255, 95, 118, 0.1);
  border: 1px solid rgba(255, 95, 118, 0.4);
  border-radius: 5px;
  text-shadow: 0 0 4px rgba(255, 95, 118, 0.3);
}

.password-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.account-section-hint {
  margin: 0;
  font-size: clamp(0.4rem, 0.6vw, 0.5rem);
  color: var(--text-muted-bright);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.conn-status-mini {
  color: var(--green);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.45rem, 0.7vw, 0.55rem);
}

.p2-invite-area-mini {
  text-align: center;
  margin-top: clamp(0.2rem, 0.5vw, 0.4rem);
}

.p2-prompt-mini {
  font-size: clamp(0.5rem, 0.75vw, 0.6rem);
  color: rgba(255, 157, 53, 0.55);
  line-height: 1.3;
  font-style: italic;
}

/* Menu buttons sit as readable hologram labels on the clean background art. */
.button-console-overlay {
  position: absolute;
  left: 34.6%;
  top: 57.2%;
  width: 30.8%;
  height: 34.2%;
  z-index: 12;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 3.2%;
  pointer-events: auto;
}

.console-btn {
  width: 100%;
  min-width: 0;
  border: 1.5px solid rgba(52, 245, 255, 0.45);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(2, 12, 24, 0.85) 0%, rgba(10, 36, 58, 0.75) 50%, rgba(2, 12, 24, 0.85) 100%);
  color: var(--text-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 5px var(--shadow), 0 0 12px var(--cyan), 0 0 22px var(--cyan-glow);
  box-shadow: inset 0 0 15px rgba(52, 245, 255, 0.15), 0 0 15px rgba(52, 245, 255, 0.12);
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.console-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.console-btn:hover::before,
.console-btn:focus-visible::before {
  left: 100%;
}

.console-btn:hover,
.console-btn:focus-visible {
  color: var(--text-bright);
  border-color: var(--cyan-bright);
  background: linear-gradient(135deg, rgba(2, 12, 24, 0.9) 0%, rgba(52, 245, 255, 0.25) 50%, rgba(2, 12, 24, 0.9) 100%);
  text-shadow: 0 0 6px var(--shadow), 0 0 18px var(--cyan-bright), 0 0 35px var(--cyan-glow), 0 0 45px var(--cyan-glow);
  box-shadow: inset 0 0 22px rgba(52, 245, 255, 0.25), 0 0 28px var(--cyan-glow), 0 0 45px rgba(52, 245, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
}

.console-btn:active {
  transform: translateY(1px) scale(0.98);
}

#btnExit {
  border-color: rgba(255, 95, 118, 0.45);
  background: linear-gradient(135deg, rgba(25, 5, 10, 0.85) 0%, rgba(55, 15, 28, 0.75) 50%, rgba(25, 5, 10, 0.85) 100%);
  color: var(--danger-bright);
  text-shadow: 0 0 5px var(--shadow), 0 0 12px var(--danger), 0 0 22px var(--danger-glow);
}

#btnExit:hover,
#btnExit:focus-visible {
  border-color: var(--danger-bright);
  background: linear-gradient(135deg, rgba(18, 4, 8, 0.3) 0%, rgba(255, 95, 118, 0.15) 50%, rgba(18, 4, 8, 0.3) 100%);
  text-shadow: 0 0 5px var(--shadow), 0 0 15px var(--danger-bright), 0 0 30px var(--danger-glow), 0 0 40px var(--danger-glow);
  box-shadow: inset 0 0 20px rgba(255, 95, 118, 0.15), 0 0 25px var(--danger-glow), 0 0 40px rgba(255, 95, 118, 0.2);
  border-color: var(--danger-glow);
}

#menuWrapper:not(.logged-in) .console-btn {
  opacity: 0.72;
  filter: brightness(0.7);
}

/* ─── GLASSMORPHIC DIALOG MODALS ─── */
.lobby-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 3, 8, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Auto-show modal wrapper if it has a non-hidden active tab-content */
.lobby-modal:has(.tab-content:not(.hidden)) {
  display: flex !important;
}

.lobby-modal-content {
  width: 90%;
  max-width: 580px;
  max-height: 85vh;
  position: relative;
  /* overflow: visible so absolutely-positioned tooltips/popovers in tabs
     (e.g. talent tree hover menus) are not clipped. The inner .panel
     element keeps its own overflow-y: auto for scroll. */
  overflow: visible;
  animation: modalScaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalScaleUp {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

.lobby-modal-content.panel {
  border: 1.5px solid rgba(52, 245, 255, 0.28);
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.94) 0%, rgba(3, 8, 18, 0.98) 100%);
  box-shadow: 0 0 50px rgba(52, 245, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(52, 245, 255, 0.03);
  border-radius: 16px;
  padding: 1.75rem;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}

.close-modal-btn {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1;
  padding: 0.1rem;
  box-shadow: none;
  border-radius: 4px;
}

.close-modal-btn:hover {
  color: var(--danger);
  background: rgba(255, 95, 118, 0.1);
  box-shadow: 0 0 10px var(--danger-glow);
}

.modal-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-shadow: 0 0 15px var(--cyan-glow), 0 0 25px var(--cyan-glow);
  border-bottom: 1px solid rgba(52, 245, 255, 0.2);
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  position: relative;
}

.modal-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.modal-desc {
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.45;
  text-shadow: 0 0 4px rgba(52, 245, 255, 0.2);
}

/* Modals sub-contents mapping */
.match-buttons-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.match-buttons-modal .match-btn {
  padding: 1.75rem 1rem;
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

/* System Options Dialog Layout */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.options-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%);
  border: 1px solid rgba(52, 245, 255, 0.15);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  backdrop-filter: blur(2px);
}

.options-item h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  color: var(--cyan);
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px var(--cyan-glow);
}

/* ─── MATCH BUTTONS ─── */
.match-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  border: 1.5px solid rgba(52, 245, 255, 0.25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.8) 0%, rgba(52, 245, 255, 0.05) 100%);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.match-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(52, 245, 255, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.match-btn:hover::before { opacity: 1; }
.match-btn:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 25px var(--cyan-glow), inset 0 0 15px rgba(52, 245, 255, 0.1);
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.9) 0%, rgba(52, 245, 255, 0.12) 100%);
  color: var(--text-bright);
  text-shadow: 0 0 10px var(--cyan-glow);
}
.match-btn:active { transform: translateY(1px) scale(0.98); }
.match-icon { font-size: 2rem; }
.match-label {
  font-size: clamp(0.6rem, 1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.4;
}
.match-label small { font-weight: 400; opacity: 0.7; }
.match-coop { 
  border-color: rgba(198, 92, 255, 0.3); 
  color: var(--pink); 
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.8) 0%, rgba(198, 92, 255, 0.05) 100%);
}
.match-coop:hover {
  border-color: var(--pink-bright);
  box-shadow: 0 0 25px var(--pink-glow), inset 0 0 15px rgba(198, 92, 255, 0.1);
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.9) 0%, rgba(198, 92, 255, 0.12) 100%);
  color: var(--text-bright);
  text-shadow: 0 0 10px var(--pink-glow);
}
.match-solo { 
  border-color: rgba(52, 245, 255, 0.3); 
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.8) 0%, rgba(52, 245, 255, 0.05) 100%);
}

.match-tip {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ─── ADMIN TABLE ─── */
.admin-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
}
.admin-table th {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(52, 245, 255, 0.2);
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--cyan-glow);
}
.admin-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(52, 245, 255, 0.08);
  color: var(--text);
  vertical-align: middle;
}
.admin-table tr:hover td {
  background: linear-gradient(90deg, rgba(52, 245, 255, 0.04), transparent);
}
.admin-table button {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(52, 245, 255, 0.3);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.8) 0%, rgba(3, 8, 18, 0.9) 100%);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 0.35rem;
  backdrop-filter: blur(2px);
}
.admin-table button:hover {
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.12) 0%, rgba(52, 245, 255, 0.08) 100%);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow), inset 0 0 10px rgba(52, 245, 255, 0.1);
  transform: translateY(-1px) scale(1.02);
}

/* Destructive "Spielstand zurücksetzen" action: orange to signal
   "destructive but reversible" — distinct from the red Delete. */
.admin-table button.btn-admin-reset {
  color: #ff9d35;
  border-color: rgba(255, 157, 53, 0.45);
}
.admin-table button.btn-admin-reset:hover {
  background: linear-gradient(135deg, rgba(255, 157, 53, 0.18) 0%, rgba(255, 157, 53, 0.1) 100%);
  border-color: #ff9d35;
  box-shadow: 0 0 10px rgba(255, 157, 53, 0.45), inset 0 0 10px rgba(255, 157, 53, 0.1);
}

/* ─── FRIENDS LIST ─── */
.friends-header { margin-bottom: 0.75rem; }
.add-friend-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.add-friend-row input {
  flex: 1;
  background: linear-gradient(135deg, rgba(4, 12, 24, 0.85) 0%, rgba(4, 12, 24, 0.92) 100%);
  border: 1px solid rgba(52, 245, 255, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  outline: none;
  transition: all 0.25s ease;
}
.add-friend-row input:focus { 
  border-color: var(--cyan); 
  box-shadow: 0 0 15px rgba(52, 245, 255, 0.2);
  background: linear-gradient(135deg, rgba(4, 12, 24, 0.92) 0%, rgba(4, 12, 24, 0.85) 100%);
}
.add-friend-row button {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.1) 0%, rgba(52, 245, 255, 0.05) 100%);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(2px);
}
.add-friend-row button:hover {
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.2) 0%, rgba(52, 245, 255, 0.1) 100%);
  box-shadow: 0 0 15px var(--cyan-glow), inset 0 0 10px rgba(52, 245, 255, 0.1);
  transform: translateY(-1px) scale(1.02);
  border-color: var(--cyan-bright);
}
.friends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 245, 255, 0.3) transparent;
}
.friends-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(52, 245, 255, 0.08);
  transition: all 0.2s;
}
.friends-list li:hover { 
  background: linear-gradient(90deg, rgba(52, 245, 255, 0.04), transparent); 
}
.friend-info { display: flex; flex-direction: column; gap: 0.15rem; }
.friend-name { font-weight: 600; font-size: 0.85rem; }
.friend-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.friend-badge.online { 
  background: rgba(101, 230, 138, 0.15); 
  color: var(--green);
  box-shadow: 0 0 8px rgba(101, 230, 138, 0.2);
}
.friend-badge.offline { 
  background: rgba(123, 162, 184, 0.15); 
  color: var(--muted);
  text-shadow: 0 0 4px rgba(123, 162, 184, 0.2);
}
.friend-badge.ingame { 
  background: rgba(255, 157, 53, 0.15); 
  color: var(--orange);
  box-shadow: 0 0 8px rgba(255, 157, 53, 0.2);
}
.friend-actions button {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(52, 245, 255, 0.3);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.8) 0%, rgba(3, 8, 18, 0.9) 100%);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 0.35rem;
  backdrop-filter: blur(2px);
}
.friend-actions button:hover {
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.12) 0%, rgba(52, 245, 255, 0.08) 100%);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow), inset 0 0 10px rgba(52, 245, 255, 0.1);
  transform: translateY(-1px) scale(1.02);
}
.friend-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.small { 
  font-size: 0.7rem; 
  color: var(--muted);
  text-shadow: 0 0 4px rgba(52, 245, 255, 0.2);
}

/* ─── HOST INVITE PANEL ─── */
.host-invite-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(198, 92, 255, 0.25);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(198, 92, 255, 0.04) 0%, rgba(198, 92, 255, 0.02) 100%);
  animation: modalFadeIn 0.3s ease;
  box-shadow: 0 0 20px rgba(198, 92, 255, 0.05);
}
.host-invite-panel.hidden { display: none; }
.host-invite-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.host-invite-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 6px var(--pink-glow));
  animation: pulse 2s ease-in-out infinite;
}
.host-invite-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.08em;
  margin: 0;
  text-shadow: 0 0 10px var(--pink-glow);
}
.host-invite-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0.15rem 0 0;
}
.host-friends-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 92, 255, 0.3) transparent;
}
.host-friends-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(52, 245, 255, 0.06);
  transition: all 0.15s;
}
.host-friends-list li:hover { 
  background: linear-gradient(90deg, rgba(198, 92, 255, 0.04), transparent); 
}
.host-friends-empty {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem;
}
.host-friend-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.host-friend-name {
  font-weight: 600;
  font-size: 0.8rem;
}
.host-friend-level {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--muted);
}
.host-friend-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.host-friend-badge.online {
  background: rgba(101, 230, 138, 0.15);
  color: var(--green);
  box-shadow: 0 0 8px rgba(101, 230, 138, 0.2);
}
.host-friend-badge.ingame {
  background: rgba(255, 157, 53, 0.15);
  color: var(--orange);
  box-shadow: 0 0 8px rgba(255, 157, 53, 0.2);
}
.host-invite-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--pink);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(198, 92, 255, 0.1) 0%, rgba(198, 92, 255, 0.05) 100%);
  color: var(--pink);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(2px);
}

.host-invite-btn:hover {
  background: linear-gradient(135deg, rgba(198, 92, 255, 0.25) 0%, rgba(198, 92, 255, 0.15) 100%);
  box-shadow: 0 0 15px var(--pink-glow), inset 0 0 10px rgba(198, 92, 255, 0.1);
  transform: scale(1.03);
  border-color: var(--pink-bright);
}

.host-invite-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.host-invite-btn.sent {
  border-color: var(--green);
  color: var(--green);
  background: linear-gradient(135deg, rgba(101, 230, 138, 0.1) 0%, rgba(101, 230, 138, 0.05) 100%);
  cursor: default;
}

.host-invite-hint {
  font-size: 0.6rem;
  color: var(--muted);
  text-align: center;
  margin: 0.6rem 0 0;
  opacity: 0.7;
}

@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 6px var(--pink-glow)); }
  50% { filter: drop-shadow(0 0 12px var(--pink-glow)); }
}

/* ═══════════════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════════════ */
.game-screen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #02050b;
}

/* Glassmorphism panels */
.panel {
  border: 1px solid rgba(52,245,255,0.25);
  border-radius: 16px;
  background: rgba(3,8,18,0.94);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), inset 0 0 20px rgba(52,245,255,0.03);
  transition: border-color 0.4s ease;
  position: relative;
}

.hud {
  width: 100%;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 1.8rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(52,245,255,0.3) transparent;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.94) 0%, rgba(3, 8, 18, 0.98) 100%);
  border: 1px solid rgba(52, 245, 255, 0.25);
  box-shadow: 0 0 30px rgba(52, 245, 255, 0.1), inset 0 0 20px rgba(52, 245, 255, 0.05);
}
.hud h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 15px var(--cyan-glow), 0 0 25px var(--cyan-glow);
  border-bottom: 1px solid rgba(52,245,255,0.2);
  padding-bottom: 0.6rem;
  position: relative;
}
.hud h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.hud dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; font-size: 1rem; }
.hud dt { 
  color: var(--muted); 
  font-family: 'Orbitron', sans-serif; 
  font-size: 0.85rem; 
  letter-spacing: 0.1em; 
  align-self: center;
  text-transform: uppercase;
  font-weight: 600;
}
.hud dd { 
  color: var(--text); 
  font-weight: 600; 
  text-align: right;
  font-family: 'Orbitron', sans-serif;
}

.controls { display: flex; flex-direction: column; gap: 0.6rem; }
.controls label { 
  font-family: 'Orbitron', sans-serif; 
  font-size: 0.75rem; 
  color: var(--muted); 
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
}
select {
  width: 100%;
  background: linear-gradient(135deg, rgba(4,12,24,0.85) 0%, rgba(4,12,24,0.92) 100%);
  border: 1px solid rgba(52,245,255,0.25);
  border-left: 4px solid var(--cyan);
  border-radius: 6px;
  padding: 0.7rem 2.4rem 0.7rem 0.85rem;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: all 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:focus { 
  border-color: var(--orange); 
  box-shadow: 0 0 15px rgba(255, 157, 53, 0.2);
  background: linear-gradient(135deg, rgba(4,12,24,0.92) 0%, rgba(4,12,24,0.85) 100%);
}
select:hover {
  border-color: var(--cyan-bright);
  box-shadow: 0 0 16px rgba(52, 245, 255, 0.16);
}
select option {
  background: #06101d;
  color: var(--text);
}
select option:disabled {
  color: rgba(123, 162, 184, 0.75);
}
select::-ms-expand {
  display: none;
}

button {
  position: relative;
  border: 1px solid var(--cyan);
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  color: var(--cyan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  background: linear-gradient(135deg, rgba(52,245,255,0.06) 0%, rgba(52,245,255,0.03) 100%);
  box-shadow: 0 0 10px rgba(52,245,255,0.15);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(2px);
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

button:hover::before,
button:focus-visible::before {
  left: 100%;
}

button:hover,
button:focus-visible {
  color: var(--cyan-bright);
  background: linear-gradient(135deg, rgba(52,245,255,0.15) 0%, rgba(52,245,255,0.08) 100%);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 10px rgba(52,245,255,0.15);
  transform: translateY(-1px) scale(1.02);
}

button:active { 
  transform: scale(0.98); 
  box-shadow: 0 0 5px var(--cyan-glow);
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: rgba(52,245,255,0.03);
}

.btn-danger { 
  border-color: var(--danger); 
  color: var(--danger); 
  background: linear-gradient(135deg, rgba(255,95,118,0.06) 0%, rgba(255,95,118,0.03) 100%);
}

.btn-danger:hover { 
  background: linear-gradient(135deg, rgba(255,95,118,0.15) 0%, rgba(255,95,118,0.08) 100%); 
  border-color: var(--danger-bright); 
  box-shadow: 0 0 20px var(--danger-glow), inset 0 0 10px rgba(255,95,118,0.15); 
  color: #fff; 
}

.tower-desc-box {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 2px solid var(--orange);
  padding-left: 0.5rem;
  line-height: 1.4;
  text-shadow: 0 0 4px rgba(255, 157, 53, 0.2);
  font-family: 'Outfit', sans-serif;
}

.message {
  font-size: 0.78rem;
  color: var(--orange);
  line-height: 1.4;
  min-height: 1.2em;
  text-shadow: 0 0 8px rgba(255, 157, 53, 0.3);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
}

.crew-card { 
  padding: 0.75rem; 
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.03) 0%, rgba(52, 245, 255, 0.01) 100%);
  border: 1px solid rgba(52, 245, 255, 0.15);
  border-radius: 8px;
}
.crew-card h4 { 
  font-family: 'Orbitron', sans-serif; 
  font-size: 0.65rem; 
  color: var(--cyan); 
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px var(--cyan-glow);
}

.canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.75rem;
  position: relative;
}
canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1280 / 720;
  border: 1px solid rgba(52,245,255,0.2);
  border-radius: 14px;
  box-shadow:
    0 0 40px rgba(52,245,255,0.06),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 1px rgba(52,245,255,0.3),
    inset 0 0 20px rgba(52,245,255,0.02);
  background: linear-gradient(135deg, rgba(2, 5, 11, 0.8) 0%, rgba(2, 5, 11, 0.9) 100%);
}
canvas:hover {
  box-shadow:
    0 0 60px rgba(52,245,255,0.12),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 1px rgba(52,245,255,0.4),
    inset 0 0 30px rgba(52,245,255,0.03);
}

/* ─── MOBILE HUD TOGGLE ─── */
.hud-toggle-btn {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.7rem;
  background: linear-gradient(135deg, rgba(2,9,20,0.9) 0%, rgba(2,9,20,0.95) 100%);
  border: 1.5px solid var(--cyan);
  border-radius: 6px;
  color: var(--cyan);
  box-shadow: 0 0 15px var(--cyan-glow), inset 0 0 10px rgba(52,245,255,0.05);
  backdrop-filter: blur(2px);
  transition: all 0.25s ease;
}

.hud-toggle-btn:hover,
.hud-toggle-btn:focus-visible {
  background: linear-gradient(135deg, rgba(2,9,20,0.95) 0%, rgba(2,9,20,0.9) 100%);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 20px var(--cyan-glow), inset 0 0 15px rgba(52,245,255,0.1);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.modal-content {
  max-width: 400px;
  width: 90%;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.94) 0%, rgba(3, 8, 18, 0.98) 100%);
  border: 1.5px solid rgba(52, 245, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(52, 245, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.modal-content h3 { 
  font-family: 'Orbitron', sans-serif; 
  color: var(--cyan); 
  margin-bottom: 0.75rem;
  text-shadow: 0 0 15px var(--cyan-glow);
}
.modal-buttons { 
  display: flex; 
  gap: 1rem; 
  margin-top: 1.25rem; 
  justify-content: center; 
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .player-terminal { width: 160px; }
  .logo-hyper { font-size: 3.5rem; }
}

@media (max-width: 820px) {
  .menu-content { flex-direction: column; padding: 0.5rem 1rem; gap: 0.5rem; }
  .player-terminal { width: 100%; flex-direction: row; padding: 0.6rem; }
  .p2-terminal { display: none; }
  .game-screen { flex-direction: column; }
  .hud { width: 100%; margin: 0; border-radius: 0; max-height: 45vh; }
  .hud.open { display: flex; }
  .canvas-wrap { padding: 0.25rem; }
  .hud-toggle-btn { display: flex !important; }
}

/* ═══════════════════════════════════════════════════
   MULTIPLAYER RESPONSIVE LAYOUT (2-4 Players)
   ═══════════════════════════════════════════════════ */
@media (min-width: 821px) and (max-width: 1024px) {
  /* Adjust for 2-3 players on medium screens */
  .terminal-screen-overlay {
    width: 45%;
    height: 25%;
  }
  .p1-screen-overlay {
    left: 5%;
    width: 40%;
  }
  .p2-screen-overlay {
    left: 55%;
    width: 40%;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  /* Adjust for 2-3 players on large screens */
  .terminal-screen-overlay {
    width: 35%;
    height: 20%;
  }
  .p1-screen-overlay {
    left: 3%;
    width: 35%;
  }
  .p2-screen-overlay {
    left: 62%;
    width: 35%;
  }
}

/* ─── HUD XP BAR ─────────────────────────────────────────────────────── */
.hud-xp-wrap {
  margin-top: 0.4rem;
}
.hud-xp-bar {
  height: 6px;
  background: linear-gradient(90deg, rgba(52, 245, 255, 0.05), rgba(52, 245, 255, 0.15));
  border: 1px solid rgba(52, 245, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(52, 245, 255, 0.05);
}
.hud-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--pink));
  box-shadow: 0 0 15px var(--cyan-glow), 0 0 10px var(--pink-glow);
  border-radius: 3px;
  transition: width 0.4s ease;
  position: relative;
}

.hud-xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: xpShine 2s ease-in-out infinite;
}

@keyframes xpShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hud-xp-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--muted);
  text-shadow: 0 0 4px rgba(52, 245, 255, 0.2);
}

/* ─── TALENT TREE MODAL ──────────────────────────────────────────────── */
.talent-modal-full {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 10, 18, 0.92);
  backdrop-filter: blur(10px);
  animation: modalFadeIn 0.3s ease;
}
.talent-modal-full.hidden { display: none; }

.talent-modal-panel {
  width: 98vw;
  max-width: 1200px;
  height: 90vh;
  background: rgba(3, 8, 20, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(52, 245, 255, 0.2) !important;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(52, 245, 255, 0.08), 0 0 80px rgba(198, 92, 255, 0.05), inset 0 0 20px rgba(52, 245, 255, 0.03);
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
}
.talent-modal-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52, 245, 255, 0.6), transparent);
  box-shadow: 0 0 15px rgba(52, 245, 255, 0.5);
}

.talent-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  flex-shrink: 0;
}
.talent-tree-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px var(--cyan-glow), 0 0 25px var(--cyan-glow);
  position: relative;
}

.talent-tree-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 8px var(--cyan-glow);
}

.tt-title-icon {
  margin-right: 0.5rem;
  font-size: 1.2em;
  filter: drop-shadow(0 0 8px var(--cyan-glow));
  animation: titlePulse 3s ease-in-out infinite;
}

.talent-tree-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(135deg, rgba(198, 92, 255, 0.1) 0%, rgba(198, 92, 255, 0.05) 100%);
  border: 1px solid rgba(198, 92, 255, 0.3);
  border-radius: 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: var(--pink);
  box-shadow: 0 0 15px rgba(198, 92, 255, 0.1);
  backdrop-filter: blur(2px);
}

.tt-pts-icon { 
  font-size: 1.1em; 
  filter: drop-shadow(0 0 6px var(--pink-glow));
}

@keyframes titlePulse {
  0%, 100% { filter: drop-shadow(0 0 8px var(--cyan-glow)); }
  50% { filter: drop-shadow(0 0 15px var(--cyan-glow)); }
}

.talent-tree-canvas {
  flex: 1.6;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52, 245, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
  min-height: 300px;
  box-shadow: inset 0 0 20px rgba(52, 245, 255, 0.05);
}

.talent-message {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: var(--cyan);
  text-align: center;
  margin: 0.4rem 0;
  min-height: 1.2em;
  transition: opacity 0.3s;
  text-shadow: 0 0 12px var(--cyan-glow), 0 0 18px var(--cyan-glow);
}

.talent-message.flash {
  animation: talentFlash 0.6s ease;
}

@keyframes talentFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; color: var(--pink); text-shadow: 0 0 18px var(--pink-glow), 0 0 25px var(--pink-glow); }
}

.talent-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.talent-buy-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.talent-buy-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(52, 245, 255, 0.2);
}

.btn-talent-reset {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 95, 118, 0.3);
  background: linear-gradient(135deg, rgba(255, 95, 118, 0.08) 0%, rgba(255, 95, 118, 0.03) 100%);
  color: var(--danger);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(2px);
}

.btn-talent-reset:hover {
  background: linear-gradient(135deg, rgba(255, 95, 118, 0.15) 0%, rgba(255, 95, 118, 0.08) 100%);
  border-color: var(--danger-bright);
  box-shadow: 0 0 15px var(--danger-glow), inset 0 0 10px rgba(255, 95, 118, 0.1);
  transform: translateY(-1px) scale(1.02);
}

.btn-talent-buy {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid rgba(52, 245, 255, 0.3);
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.08) 0%, rgba(52, 245, 255, 0.03) 100%);
  color: var(--cyan);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(2px);
}

.btn-talent-buy:hover {
  background: linear-gradient(135deg, rgba(52, 245, 255, 0.15) 0%, rgba(52, 245, 255, 0.08) 100%);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 15px var(--cyan-glow), inset 0 0 10px rgba(52, 245, 255, 0.1);
  transform: translateY(-1px) scale(1.02);
}

.talent-bonus-summary {
  margin-left: auto;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--muted);
  max-width: 300px;
  text-align: right;
  text-shadow: 0 0 6px rgba(52, 245, 255, 0.2);
  font-weight: 600;
}

/* ─── TALENT TREE NODES (sci-fi diamonds) ─────────────────────────────── */
.tt-node {
  position: absolute;
  border-radius: 8px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  border: 2px solid var(--node-dim, rgba(255,255,255,0.1));
  background: rgba(6, 18, 36, 0.85);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.tt-node:not(.tt-node--active) .tt-node-icon {
  filter: grayscale(1) opacity(0.35);
  transition: filter 0.25s;
}

.tt-node:not(.tt-node--active):hover .tt-node-icon {
  filter: none;
}

.tt-node--path-highlight {
  border-color: var(--node-color) !important;
  box-shadow: 0 0 25px var(--node-glow), inset 0 0 10px var(--node-dim) !important;
}

.tt-node-content {
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.tt-node:hover {
  transform: scale(1.15) rotate(45deg);
  z-index: 5;
  border-color: var(--node-color);
  box-shadow: 0 0 25px var(--node-glow), inset 0 0 10px var(--node-dim);
  background: rgba(6, 18, 36, 0.95);
}

.tt-node--active {
  border-color: var(--node-color);
  background: rgba(6, 18, 36, 0.95);
  box-shadow: 0 0 15px var(--node-glow), inset 0 0 8px var(--node-dim);
}

.tt-node--maxed {
  border-color: var(--node-color);
  background: var(--node-dim);
  box-shadow: 0 0 22px var(--node-glow), inset 0 0 12px rgba(255,255,255,0.1);
}

.tt-node--maxed .tt-node-icon { 
  filter: brightness(1.3); 
  text-shadow: 0 0 8px var(--node-color);
}

.tt-node--unlockable {
  animation: ttPulse 2s ease-in-out infinite;
  border-color: var(--node-color);
  box-shadow: 0 0 18px var(--node-glow);
}

.tt-node--selected {
  border-color: #ffffff !important;
  box-shadow: 0 0 30px #ffffff, 0 0 15px var(--node-glow) !important;
  transform: scale(1.15) rotate(45deg) !important;
  z-index: 6;
}

@keyframes ttPulse {
  0%, 100% { box-shadow: 0 0 8px var(--node-dim); }
  50% { box-shadow: 0 0 20px var(--node-glow); border-color: var(--node-color); }
}

.tt-node-icon {
  font-size: clamp(0.7rem, 1.5vw, 1.2rem);
  line-height: 1;
}
.tt-node-level {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.35rem, 0.6vw, 0.5rem);
  color: var(--muted);
  margin-top: 2px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.tt-node--active .tt-node-level,
.tt-node--maxed .tt-node-level {
  color: var(--node-color);
}

.tt-branch-label {
  position: absolute;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  text-shadow: 0 0 8px rgba(52, 245, 255, 0.3);
}

/* ─── TALENT TOOLTIPS ────────────────────────────────────────────────── */
.tt-tooltip {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: max-content;
  max-width: 280px;
  padding: 0.75rem 1rem;
  background: rgba(3, 8, 20, 0.85);
  border: 1.5px solid var(--cyan);
  border-radius: 8px;
  box-shadow: 0 0 15px var(--cyan-glow), 0 8px 32px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  /* Must sit above sibling nodes and out-rank any modal scroll container */
  z-index: 9999;
  transition: opacity 0.2s, transform 0.2s;
  backdrop-filter: blur(12px);
  text-align: left;
  white-space: normal;
  overflow: visible;
}

.tt-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Ensure talent nodes (and their absolutely-positioned tooltips) are not
   clipped by ancestor containers that use overflow:hidden. The talent tree
   is a free-form canvas where tooltips pop above each hex node. */
.talent-tree-canvas,
.talent-tree-layout,
#talentTreeContainer {
  overflow: visible !important;
}

.talent-tree-canvas {
  position: relative;
  isolation: isolate;
}

.tt-tooltip--fire { border-color: #ff6b35; box-shadow: 0 0 15px rgba(255,107,53,0.35), 0 8px 32px rgba(0, 0, 0, 0.7); }
.tt-tooltip--water { border-color: #34f5ff; box-shadow: 0 0 15px rgba(52,245,255,0.35), 0 8px 32px rgba(0, 0, 0, 0.7); }
.tt-tooltip--earth { border-color: #65e68a; box-shadow: 0 0 15px rgba(101,230,138,0.35), 0 8px 32px rgba(0, 0, 0, 0.7); }
.tt-tooltip--lightning { border-color: #ffd93d; box-shadow: 0 0 15px rgba(255,217,61,0.35), 0 8px 32px rgba(0, 0, 0, 0.7); }

.tt-tip-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.2rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.tt-tip-branch {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.tt-tip-desc {
  font-size: 0.72rem;
  color: #c8d8e8;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.tt-tip-effect {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  color: var(--pink);
  margin-bottom: 0.4rem;
  text-shadow: 0 0 8px var(--pink-glow);
}

.tt-tip-cost,
.tt-tip-lvl {
  font-size: 0.68rem;
  color: var(--text-muted-bright);
}

.tt-tip-lvl { margin-top: 0.15rem; }
.tt-tip-req {
  font-size: 0.65rem;
  color: var(--danger-bright);
  margin-top: 0.3rem;
  font-style: italic;
  text-shadow: 0 0 4px var(--danger-glow);
}

#talentTab {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ─── NEW SPLIT LAYOUT FOR TALENT TREE ────────────────────────────────── */
.talent-subnav {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  padding: 0.4rem;
  background: rgba(3, 8, 18, 0.55);
  border: 1px solid rgba(52, 245, 255, 0.22);
  border-radius: 10px;
}

.talent-subnav-btn {
  position: relative;
  flex: 1;
  padding: 0.5rem 0.9rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-bright);
  background: transparent;
  border: 1px solid rgba(100, 120, 140, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  opacity: 0.5;
}
.talent-subnav-btn .bracket-l,
.talent-subnav-btn .bracket-r {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: rgba(100, 120, 140, 0.4);
  transition: all 0.25s ease;
}
.talent-subnav-btn .tab-label {
  transition: all 0.25s ease;
}

.talent-subnav-btn:hover {
  opacity: 0.8;
  border-color: rgba(52, 245, 255, 0.3);
  color: var(--cyan);
  background: rgba(52, 245, 255, 0.04);
}
.talent-subnav-btn:hover .bracket-l,
.talent-subnav-btn:hover .bracket-r {
  color: rgba(52, 245, 255, 0.3);
}

.talent-subnav-btn.active {
  color: #fff;
  border-color: rgba(0, 240, 255, 0.6);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.18), rgba(0, 119, 255, 0.04));
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.18), inset 0 0 8px rgba(0, 240, 255, 0.05);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}
.talent-subnav-btn.active .bracket-l,
.talent-subnav-btn.active .bracket-r {
  color: #00F0FF;
  text-shadow: 0 0 10px #00F0FF, 0 0 20px #0077FF;
}
.talent-subnav-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00F0FF, transparent);
  box-shadow: 0 0 8px #00F0FF;
  animation: tabUnderlinePulse 2s ease-in-out infinite;
}
@keyframes tabUnderlinePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ─── SHOP REDESIGN ──────────────────────────────────────────────── */

/* ===== Account Tab Layout ===== */
#accountTab {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.6rem;
}

/* ===== Credits Display ===== */
.shop-credits-display {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 138, 0, 0.2);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(255, 138, 0, 0.05), inset 0 0 10px rgba(255, 138, 0, 0.02);
}
.credits-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted-bright);
  text-transform: uppercase;
}
.credits-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FF8A00;
  text-shadow: 0 0 6px rgba(255, 138, 0, 0.35);
  letter-spacing: 0.05em;
}

/* ===== Talent Points Buy Section ===== */
.shop-talent-section {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  background: rgba(3, 8, 20, 0.4);
  border: 1px solid rgba(52, 245, 255, 0.12);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.shop-talent-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.talent-section-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 6px var(--pink-glow));
}
.talent-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted-bright);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.shop-talent-info {
  font-size: 0.65rem;
  color: var(--text);
  white-space: nowrap;
}
.shop-talent-info strong {
  color: var(--pink);
  font-family: 'Orbitron', sans-serif;
}
.shop-talent-buttons {
  display: flex;
  gap: 0.4rem;
}
.shop-talent-hint {
  font-size: 0.55rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: auto;
}

/* ===== Sci-Fi Buttons (Diagonal Cut) ===== */
.btn-sci-fi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.3rem 1rem;
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  border: none;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 90px;
}
.btn-sci-fi .btn-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.btn-sci-fi .btn-cost {
  font-size: 0.5rem;
  opacity: 0.85;
}
.btn-sci-fi .btn-lock {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Active / purchasable button */
.btn-buy-active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 119, 255, 0.1) 100%);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00F0FF;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.15), inset 0 0 6px rgba(0, 240, 255, 0.05);
  animation: btnPulseGlow 2.5s ease-in-out infinite;
}
.btn-buy-active:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 119, 255, 0.15) 100%);
  border-color: #00F0FF;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.08);
  transform: translateY(-1px) scale(1.02);
}
@keyframes btnPulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 240, 255, 0.15), inset 0 0 6px rgba(0, 240, 255, 0.05); }
  50% { box-shadow: 0 0 16px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.08); }
}

/* Disabled button */
.btn-buy-disabled {
  background: linear-gradient(135deg, rgba(60, 60, 70, 0.15) 0%, rgba(40, 40, 50, 0.08) 100%);
  border: 1px solid rgba(100, 100, 120, 0.25);
  color: rgba(150, 150, 170, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}
.btn-buy-disabled:hover {
  border-color: rgba(255, 0, 85, 0.4);
  box-shadow: 0 0 12px rgba(255, 0, 85, 0.15), inset 0 0 6px rgba(255, 0, 85, 0.05);
  color: rgba(255, 100, 130, 0.6);
  transform: none;
}
.btn-buy-disabled .btn-lock {
  opacity: 0.5;
}

/* ===== Card Shop Section ===== */
.card-shop-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0.6rem;
  background: rgba(3, 8, 20, 0.3);
  border: 1px solid rgba(52, 245, 255, 0.1);
  border-radius: 8px;
}
.card-shop-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}
.card-section-icon {
  font-size: 0.9rem;
}
.card-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== Horizontal Filter Bar ===== */
.shop-filter-bar {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(52, 245, 255, 0.08);
  border-radius: 6px;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: 1rem;
  border-right: 1px solid rgba(52, 245, 255, 0.08);
}
.filter-group:last-child {
  border-right: none;
  padding-right: 0;
}
.filter-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Element filter buttons - round icons */
.filter-elements {
  display: flex;
  gap: 0.2rem;
}
.filter-elem-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}
.filter-elem-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(52, 245, 255, 0.3);
  color: var(--cyan);
  transform: scale(1.1);
}
.filter-elem-btn.active {
  background: rgba(0, 240, 255, 0.2);
  border-color: rgba(0, 240, 255, 0.5);
  color: #00F0FF;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

/* Rarity filter buttons - colored dots */
.filter-rarities {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.filter-rarity-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}
.filter-rarity-btn:not([data-rarity="all"]) {
  border-color: var(--rarity-color, var(--cyan));
  background: transparent;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.filter-rarity-btn:not([data-rarity="all"]):hover {
  background: var(--rarity-color, var(--cyan));
  box-shadow: 0 0 10px var(--rarity-color, var(--cyan));
  transform: scale(1.15);
}
.filter-rarity-btn:not([data-rarity="all"]).active {
  background: var(--rarity-color, var(--cyan));
  box-shadow: 0 0 12px var(--rarity-color, var(--cyan));
  transform: scale(1.1);
}
.filter-rarity-btn[data-rarity="all"]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(52, 245, 255, 0.3);
  color: var(--cyan);
  transform: scale(1.1);
}
.filter-rarity-btn[data-rarity="all"].active {
  background: rgba(0, 240, 255, 0.2);
  border-color: rgba(0, 240, 255, 0.5);
  color: #00F0FF;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

/* Status filter buttons */
.filter-status {
  display: flex;
  gap: 0.25rem;
}
.filter-status-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}
.filter-status-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(52, 245, 255, 0.3);
  color: var(--cyan);
}
.filter-status-btn.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: #00F0FF;
}

/* ===== Shop Cards Grid ===== */
.shop-cards-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.75rem;
  padding: 0.6rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(52, 245, 255, 0.06);
  border-radius: 6px;
  align-content: start;
}

/* No cards found */
.shop-no-cards {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: 'Orbitron', sans-serif;
}

.talent-tree-layout {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
  margin-bottom: 0.8rem;
}

.talent-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: rgba(3, 8, 20, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(52, 245, 255, 0.2) !important;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(52, 245, 255, 0.02);
  max-width: 380px;
  min-width: 300px;
  position: relative;
  overflow: hidden;
}

/* ─── DYNAMIC PARTICLES AND GLOW FOR DETAIL PANEL ─────────────────────── */
.tt-detail-bg-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, var(--theme-color-glow, rgba(52,245,255,0.15)), transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.15); opacity: 0.20; }
}

.tt-detail-particle {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--theme-color, var(--cyan));
  box-shadow: 0 0 8px var(--theme-color-glow, var(--cyan-glow));
  animation: floatParticle 6s infinite linear;
  opacity: 0;
  pointer-events: none;
}
@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-300px) translateX(20px) scale(0.5); opacity: 0; }
}

.tt-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  gap: 1rem;
}

.tt-detail-empty-icon {
  font-size: 2.5rem;
  color: rgba(52, 245, 255, 0.2);
  text-shadow: 0 0 20px rgba(52, 245, 255, 0.05);
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.tt-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.tt-detail-icon-wrap {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 18, 36, 0.9);
  border-radius: 8px;
  font-size: 1.6rem;
}

.tt-detail-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tt-detail-branch {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.tt-detail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.tt-detail-desc {
  font-size: 0.75rem;
  color: #c8d8e8;
  line-height: 1.4;
  margin: 0;
}

.tt-detail-effect-section,
.tt-detail-level-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.effect-title,
.level-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.effect-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink-glow);
  background: rgba(198, 92, 255, 0.04);
  border: 1px dashed rgba(198, 92, 255, 0.2);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.level-num {
  color: var(--text-bright);
  font-weight: 700;
  margin-left: 0.3rem;
}

.level-pips {
  display: flex;
  gap: 0.3rem;
}

.tt-pip {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: background 0.3s;
}

.tt-pip.filled {
  background: var(--node-color, var(--cyan));
  box-shadow: 0 0 8px var(--node-glow, var(--cyan-glow));
}

.tt-detail-req {
  font-size: 0.65rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-style: italic;
}

.tt-detail-req.met {
  background: rgba(101, 230, 138, 0.05);
  border: 1px solid rgba(101, 230, 138, 0.2);
  color: var(--green);
}

.tt-detail-req.unmet {
  background: rgba(255, 95, 118, 0.05);
  border: 1px solid rgba(255, 95, 118, 0.2);
  color: var(--danger);
}

.tt-detail-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tt-detail-cost-info {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
}

.tt-detail-upgrade-btn {
  width: 100%;
  padding: 0.6rem !important;
  font-size: 0.72rem !important;
}

/* ─── SLEEK TOP HUD STYLING ──────────────────────────────────────────── */
.top-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 1.5rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(3, 8, 18, 0.96) 0%, rgba(3, 8, 18, 0.99) 100%);
  border-bottom: 1.5px solid rgba(52, 245, 255, 0.25);
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(52, 245, 255, 0.03);
  z-index: 100;
  flex-shrink: 0;
}

.top-hud-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-hud-meta {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.meta-label {
  color: var(--muted);
}

.meta-value {
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  margin-left: 0.2rem;
}

.top-hud-center {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 360px;
  margin: 0 1.5rem;
}

.xp-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}

.top-hud-center .hud-xp-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(52, 245, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(52, 245, 255, 0.1);
}

.top-hud-center .hud-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 10px var(--cyan-glow);
  border-radius: 4px;
}

.top-hud-center .hud-xp-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  color: var(--text);
  min-width: 80px;
  text-align: right;
}

.top-hud-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hud-stat-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(6, 18, 36, 0.8);
  border: 1.5px solid rgba(52, 245, 255, 0.2);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.3s;
  position: relative;
}
.hud-stat-box:hover {
  border-color: rgba(52, 245, 255, 0.4);
  box-shadow: 0 0 12px rgba(52, 245, 255, 0.15);
}

.hud-stat-icon {
  font-size: 1.4rem;
}

.hud-stat-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.hud-stat-label::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(52,245,255,0.1);
  margin-top: 1px;
}

.hud-stat-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-bright);
}

/* Stat-specific highlights */
.gold-glow {
  border-color: rgba(255, 157, 53, 0.25);
  box-shadow: inset 0 0 8px rgba(255, 157, 53, 0.05);
}
.gold-glow .hud-stat-val { color: var(--orange); text-shadow: 0 0 8px rgba(255, 157, 53, 0.3); }

.lives-glow {
  border-color: rgba(255, 95, 118, 0.25);
  box-shadow: inset 0 0 8px rgba(255, 95, 118, 0.05);
}
.lives-glow .hud-stat-val { color: var(--danger-bright); text-shadow: 0 0 8px rgba(255, 95, 118, 0.3); }

.wave-glow {
  border-color: rgba(198, 92, 255, 0.25);
  box-shadow: inset 0 0 8px rgba(198, 92, 255, 0.05);
}
.wave-glow .hud-stat-val { color: var(--pink); text-shadow: 0 0 8px rgba(198, 92, 255, 0.3); }

.kills-glow {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ─── COLLAPSIBLE CREW STATUS PANEL ─────────────────────────────────── */
.collapsible-panel {
  border: 1px solid rgba(52, 245, 255, 0.2) !important;
  background: rgba(3, 8, 18, 0.6) !important;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.collapsible-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  background: rgba(6, 18, 36, 0.95);
  border: none;
  border-bottom: 1px solid rgba(52, 245, 255, 0.15);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: none;
  text-shadow: 0 0 6px var(--cyan-glow);
  transform: none !important;
  border-radius: 0;
  backdrop-filter: none;
}
.collapsible-header:hover {
  background: rgba(6, 18, 36, 0.8);
  box-shadow: none !important;
}

.collapsible-content {
  padding: 0.6rem;
  transition: all 0.3s ease;
}

.collapsible-content.hidden {
  display: none !important;
}

.toggle-icon {
  font-size: 0.5rem;
  color: var(--muted);
  transition: transform 0.3s;
}

.in-game-invite-btn {
  border: 1px dashed var(--cyan) !important;
  background: rgba(52, 245, 255, 0.04) !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 5px var(--cyan-glow);
}
.in-game-invite-btn:hover {
  background: rgba(52, 245, 255, 0.12) !important;
  border-style: solid !important;
  box-shadow: 0 0 15px var(--cyan-glow) !important;
}

/* ─── ELEMENT MATRIX TABLE ───────────────────────────────────────────── */
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
}

.matrix-table th {
  font-family: 'Orbitron', sans-serif;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  text-align: left;
  padding: 0.3rem;
  border-bottom: 1.5px solid rgba(52, 245, 255, 0.25);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

.matrix-table td {
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.el-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.58rem;
  border: 1px solid transparent;
}

/* Element color schemes */
.el-fire {
  background: rgba(255, 107, 53, 0.08);
  border-color: rgba(255, 107, 53, 0.3);
  color: #ff8b54;
}
.el-water {
  background: rgba(52, 245, 255, 0.08);
  border-color: rgba(52, 245, 255, 0.3);
  color: var(--cyan);
}
.el-earth {
  background: rgba(101, 230, 138, 0.08);
  border-color: rgba(101, 230, 138, 0.3);
  color: #65e68a;
}
.el-air {
  background: rgba(234, 248, 255, 0.08);
  border-color: rgba(234, 248, 255, 0.25);
  color: #eaf8ff;
}

/* Highlight matrices on row hover */
.matrix-table tbody tr {
  transition: background 0.2s;
}
.matrix-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ─── SPLIT MAIN GAME SCREEN LAYOUT ─────────────────────────────────── */
/* ─── SPLIT MAIN GAME SCREEN LAYOUT ─────────────────────────────────── */
.game-main-layout {
  display: flex;
  flex: none;
  min-height: 0;
  overflow: hidden;
  position: relative;
  gap: 1rem;
  padding: 1rem;
  margin-top: 60px;  /* Platz f�r die fixed Top-Bar */
  height: calc(100vh - 60px);
  box-sizing: border-box;
}

/* Sidebar-Breiten responsiv: clamp(min, vw, max) statt fixem px.
   So passen sich die Sidebars der Viewport-Breite an, OHNE dass
   auf kleinen Monitoren der Center-Stage zu klein wird (clamp min)
   und OHNE dass auf 4K die Sidebars absurd breit werden (clamp max).
   Der "KOMMANDOZENTRALE"-Titel auf dem Screenshot des Users lief
   raus, weil der fixe 260px-Wert auf einem 1080p-Monitor mit
   Browser-Zoom != 100% nicht reichte. */
.left-panel, .right-panel {
  width: clamp(220px, 18vw, 320px);
  min-width: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.center-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.game-main-layout .canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
}

/* ─── TCG UI COMPONENTS ─────────────────────────────────── */
.deck-btn {
  width: 100%;
  padding: 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  background: rgba(2,10,18,0.8);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}
.common-glow { border-color: var(--cyan); box-shadow: inset 0 0 8px rgba(52,245,255,0.1); }
.common-glow:hover { background: rgba(52,245,255,0.1); box-shadow: 0 0 10px var(--cyan-glow); color: var(--cyan-bright); }

.rare-glow { border-color: var(--pink); color: var(--pink); box-shadow: inset 0 0 8px rgba(198,92,255,0.1); }
.rare-glow:hover { background: rgba(198,92,255,0.1); box-shadow: 0 0 10px var(--pink-glow); color: var(--pink-bright); }

.legendary-glow { border-color: var(--orange); color: var(--orange); box-shadow: inset 0 0 8px rgba(255,157,53,0.1); }
.legendary-glow:hover { background: rgba(255,157,53,0.1); box-shadow: 0 0 10px var(--orange-glow); color: var(--orange-bright); }

.bottom-bar {
  height: auto;
  min-height: 120px;
  flex-shrink: 0;             /* nicht zusammenschrumpfen � .canvas-wrap braucht Platz */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(3, 8, 18, 0.88) 0%, rgba(3, 8, 18, 0.96) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  /* Phase-Schalter: TOWER-QUICKBAU (Tower-Dock) ist nur in der
     Bauphase sichtbar (state.waveActive=false). Wenn body die
     Klasse 'wave-active' traegt, wird der Dock ausgeblendet und
     die TCG-Karten-Hand erscheint stattdessen. */
  transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}

.btn-fast-forward {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 182, 39, 0.45);
  border-radius: 6px;
  background: rgba(255, 182, 39, 0.08);
  color: var(--orange);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-fast-forward:hover,
.btn-fast-forward:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 0 10px rgba(255, 182, 39, 0.25);
}

.btn-fast-forward.active {
  background: rgba(255, 182, 39, 0.22);
  border-color: var(--orange);
  color: var(--orange-bright);
  box-shadow: 0 0 14px rgba(255, 182, 39, 0.35);
}

/* In Kampf-Phase: Tower-Dock ausblenden. Zwei Selektor-Pfade:
   1) data-wave-active="true" auf #gameScreen (per JS in script.js
      gesetzt) � neue, robustere Variante.
   2) body.wave-active � alte Variante, bleibt fuer Backward-Compat. */
.game-screen[data-wave-active="true"] .bottom-bar.panel,
body.wave-active .bottom-bar.panel {
  opacity: 0;
  pointer-events: none;
  max-height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  visibility: hidden;          /* nimmt garantiert keinen Platz + keinen Klick-Fokus */
  transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease, visibility 0s linear 0.25s;
}

/* Alte Karten-Hand (#cardsHand, innerhalb canvas-wrap) ist
   deprecated. renderHand() ist deaktiviert, das Element wird
   nicht mehr befuellt. Trotzdem ausblenden, falls eine alte
   JS-Bibliothek es doch noch anfasst. */
#cardsHand,
.cards-hand { display: none !important; }

/* TCG-Karten-Hand + Tower-Dock: Phase-Schalter per JS (siehe
   script.js:2358). CSS hier dient nur als visueller Smooth-Transition.
   .tcg-hand: default versteckt. body.wave-active .tcg-hand: sichtbar.
   .bottom-bar: default sichtbar. body.wave-active .bottom-bar: versteckt. */
.tcg-hand {
  display: none !important;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.game-screen[data-wave-active="true"] .tcg-hand,
body.wave-active .tcg-hand {
  display: flex !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quick-build-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  color: var(--cyan);
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px var(--cyan-glow);
}
.quick-build-slots {
  display: flex;
  gap: 1.2rem;
}
.qb-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
  min-width: 95px;
  gap: 0.15rem;
}

.qb-icon {
  width: 44px;
  height: 44px;
  display: block;
  margin-bottom: 0.1rem;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(52,245,255,0.3));
  transition: filter 0.2s;
}
.qb-slot:hover .qb-icon {
  filter: drop-shadow(0 0 8px rgba(52,245,255,0.6));
}
.qb-slot.qb-active .qb-icon {
  filter: drop-shadow(0 0 12px rgba(52,245,255,0.8));
}

.qb-slot.qb-active {
  background: rgba(52,245,255,0.2);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 20px rgba(52,245,255,0.4), inset 0 0 20px rgba(52,245,255,0.15);
}
.qb-slot.qb-locked {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}
.qb-slot.qb-locked .qb-hotkey { color: var(--text-muted); }
.qb-slot.qb-locked .qb-label { color: var(--text-dim); }
.qb-slot.qb-locked .qb-price { color: var(--text-muted); }
.qb-slot:hover { transform: translateY(-3px); }
.qb-hotkey { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: #fff; font-weight: bold; }
.qb-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; letter-spacing: 0.05em; }
.qb-price { font-size: 0.65rem; color: var(--orange); font-weight: 700; margin-top: 0.05rem; text-shadow: 0 0 4px rgba(255,157,53,0.3); }

.earth-glow:hover { border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); }
.fire-glow:hover { border-color: var(--orange); box-shadow: 0 0 10px var(--orange-glow); }
.air-glow:hover { border-color: #eaf8ff; box-shadow: 0 0 10px rgba(234, 248, 255, 0.4); }
.water-glow:hover { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
.qb-slot:active { transform: translateY(0px) scale(0.95); }

.element-wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}
.element-wheel-svg {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 0 20px rgba(52,245,255,0.2));
  object-fit: contain;
}


.element-matrix-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
  font-family: 'Orbitron', sans-serif;
}
.element-matrix-table th {
  padding: 0.35rem 0.5rem;
  color: var(--text-muted-bright);
  text-align: left;
  border-bottom: 1px solid rgba(52,245,255,0.15);
  font-size: 0.8rem;
}
.element-matrix-table td {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}
.element-matrix-table tr:hover td {
  background: rgba(52,245,255,0.06);
}

.right-panel h2 {
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}

.right-panel h4 {
  font-size: 0.85rem !important;
  margin-top: 0.8rem !important;
  margin-bottom: 0.4rem !important;
}

.element-legend {
  font-size: 0.85rem !important;
  color: var(--text-muted-bright) !important;
  margin-top: 0.5rem !important;
}

.round-log-panel {
  margin-top: 0.6rem !important;
  min-height: 180px !important;
}

.round-log-panel h4 {
  font-size: 0.85rem !important;
}

#roundLog {
  font-size: 0.75rem !important;
}

/* ─── MAIN MENU CONSOLE PANEL STYLING ────────────────────────────────── */
.button-console-overlay {
  position: absolute;
  left: 33% !important;
  top: 52% !important;
  width: 34% !important;
  height: 42% !important;
  z-index: 12;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 4.5% !important;
  pointer-events: auto;
  
  /* Semi-transparent Holographic Sci-Fi Dashboard styling */
  padding: 1.25rem !important;
  background: rgba(2, 8, 18, 0.65) !important;
  backdrop-filter: blur(8px) saturate(180%) !important;
  border: 1.5px solid rgba(52, 245, 255, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.65), 
    0 0 25px rgba(52, 245, 255, 0.15),
    inset 0 0 15px rgba(52, 245, 255, 0.05) !important;
}

/* De-escalate default state of Exit button to match general cyan console look, red is hover-only */
#btnExit {
  border-color: rgba(52, 245, 255, 0.22) !important;
  background: linear-gradient(135deg, rgba(2, 10, 20, 0.18) 0%, rgba(52, 245, 255, 0.06) 50%, rgba(2, 10, 20, 0.18) 100%) !important;
  color: var(--text) !important;
  text-shadow: 0 0 4px var(--shadow), 0 0 8px var(--cyan), 0 0 16px var(--cyan-glow) !important;
  box-shadow: inset 0 0 14px rgba(52, 245, 255, 0.08), 0 0 14px rgba(52, 245, 255, 0.08) !important;
}

#btnExit:hover,
#btnExit:focus-visible {
  border-color: var(--danger-bright) !important;
  background: linear-gradient(135deg, rgba(18, 4, 8, 0.3) 0%, rgba(255, 95, 118, 0.15) 50%, rgba(18, 4, 8, 0.3) 100%) !important;
  color: var(--danger-bright) !important;
  text-shadow: 0 0 5px var(--shadow), 0 0 15px var(--danger-bright), 0 0 30px var(--danger-glow) !important;
  box-shadow: inset 0 0 20px rgba(255, 95, 118, 0.15), 0 0 25px var(--danger-glow), 0 0 40px rgba(255, 95, 118, 0.2) !important;
}

/* ─── TCG CARDS & MODALS ─────────────────────────────────── */
@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0px) rotateY(0deg) rotateX(0.5deg);
  }
  20% {
    transform: translateY(-3px) rotateY(1.2deg) rotateX(0.2deg);
  }
  40% {
    transform: translateY(-1px) rotateY(-0.5deg) rotateX(0.8deg);
  }
  60% {
    transform: translateY(-4px) rotateY(0.8deg) rotateX(0.3deg);
  }
  80% {
    transform: translateY(-2px) rotateY(-1deg) rotateX(0.6deg);
  }
}

.cards-hand {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  pointer-events: none;
  z-index: 20;
  perspective: 800px;
}

.tcg-card {
  width: 120px;
  height: 170px;
  background: rgba(2, 10, 18, 0.95);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.02);
  margin: 0 -8px;
  animation: cardFloat 3s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

.tcg-card:hover {
  transform: translateY(-40px) scale(1.6) rotateX(2deg) !important;
  z-index: 100;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(52,245,255,0.3),
    0 0 60px rgba(52,245,255,0.15),
    inset 0 0 30px rgba(255,255,255,0.05);
  border-color: var(--cyan-bright);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4), box-shadow 0.2s;
  animation: none !important;
}

/* Hearthstone-style rarity glow on hover */
.card-common:hover {
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(52,245,255,0.4),
    0 0 80px rgba(52,245,255,0.2),
    inset 0 0 30px rgba(52,245,255,0.08);
}
.card-rare:hover {
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(198,92,255,0.4),
    0 0 80px rgba(198,92,255,0.2),
    inset 0 0 30px rgba(198,92,255,0.08);
  border-color: var(--pink-bright);
}
.card-epic:hover {
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(101,230,138,0.4),
    0 0 80px rgba(101,230,138,0.2),
    inset 0 0 30px rgba(101,230,138,0.08);
  border-color: var(--green-bright);
}
.card-legendary:hover {
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(255,157,53,0.5),
    0 0 80px rgba(255,157,53,0.25),
    0 0 120px rgba(255,157,53,0.1),
    inset 0 0 30px rgba(255,157,53,0.08);
  border-color: var(--orange-bright);
}

.card-common {
  border-color: var(--cyan);
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(52,245,255,0.1);
  position: relative;
}
.card-common:hover { box-shadow: 0 15px 30px rgba(52,245,255,0.2), 0 0 15px var(--cyan-glow), inset 0 0 20px rgba(52,245,255,0.2); }
.card-common::after {
  content: '●';
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.5rem;
  color: var(--cyan);
  opacity: 0.6;
}

@keyframes cardShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.card-rare {
  border-color: var(--pink);
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(198,92,255,0.1);
  position: relative;
}
.card-rare:hover { box-shadow: 0 15px 30px rgba(198,92,255,0.2), 0 0 15px var(--pink-glow), inset 0 0 20px rgba(198,92,255,0.2); }
.card-rare::after {
  content: '●';
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.5rem;
  color: var(--pink);
  opacity: 0.6;
}
.card-rare::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: cardShimmer 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 8px;
}

.card-epic {
  border-color: var(--green);
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(101,230,138,0.1);
  position: relative;
}
.card-epic:hover { box-shadow: 0 15px 30px rgba(101,230,138,0.2), 0 0 15px var(--green-glow), inset 0 0 20px rgba(101,230,138,0.2); }
.card-epic::after {
  content: '●';
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.5rem;
  color: var(--green);
  opacity: 0.6;
}
.card-epic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: cardShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: 8px;
}

.card-legendary {
  border-color: var(--orange);
  box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(255,157,53,0.1), 0 0 8px rgba(255,157,53,0.2);
  position: relative;
}
.card-legendary:hover { box-shadow: 0 15px 30px rgba(255,157,53,0.2), 0 0 15px var(--orange-glow), inset 0 0 20px rgba(255,157,53,0.2); }
.card-legendary::after {
  content: '◆';
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.7rem;
  color: var(--orange);
  opacity: 0.8;
  text-shadow: 0 0 6px var(--orange-glow);
}
.card-legendary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: cardShimmer 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 8px;
}

/* ===== Unified TCG-Card Fields (BEM) ===== */
/* Geteilte Innenstruktur für Shop, Draft und Hand. Die Variante
   (--shop / --draft / --hand) bestimmt Größe und Layout. */
.tcg-cost {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  background: radial-gradient(circle, var(--cyan-bright) 0%, var(--cyan) 70%);
  color: #000814;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 0 10px rgba(52,245,255,0.6);
  z-index: 2;
}
.tcg-header {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  z-index: 2;
}
.tcg-id {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tcg-image {
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.6rem 0.2rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(52,245,255,0.08) 0%, transparent 70%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.tcg-image-icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 8px rgba(52,245,255,0.6));
  animation: holoPulse 3s ease-in-out infinite;
}
@keyframes holoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(52,245,255,0.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(52,245,255,0.8)); }
}
.tcg-type {
  font-size: 0.5rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.25rem;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 4px rgba(52,245,255,0.3);
}
.tcg-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
  margin-bottom: 0.2rem;
  letter-spacing: 0.05em;
}
.tcg-desc {
  font-size: 0.5rem;
  color: #c5e8f5;
  line-height: 1.3;
  text-align: center;
  flex: 1 1 auto;
  padding: 0 0.2rem;
  overflow: hidden;
}
.tcg-charges {
  font-size: 0.55rem;
  opacity: 0.85;
  margin-top: auto;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  color: var(--cyan);
  letter-spacing: 0.06em;
  padding: 0.2rem 0;
  border-top: 1px solid rgba(52,245,255,0.15);
}
.tcg-footer {
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(52,245,255,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tcg-buy-btn {
  background: linear-gradient(135deg, rgba(52,245,255,0.2) 0%, rgba(198,92,255,0.2) 100%);
  border: 1.5px solid var(--cyan);
  color: var(--cyan-bright);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s;
  text-shadow: 0 0 4px rgba(52,245,255,0.4);
}
.tcg-buy-btn:hover {
  background: linear-gradient(135deg, rgba(52,245,255,0.4) 0%, rgba(198,92,255,0.4) 100%);
  box-shadow: 0 0 16px rgba(52,245,255,0.4);
  transform: scale(1.04);
}
.tcg-owned-badge {
  font-size: 0.6rem;
  color: var(--cyan-bright);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(52,245,255,0.6);
}

/* Element-Farbkodierung (via data-element-Attribut) */
.tcg-image[data-element="fire"] .tcg-image-icon,
.tcg-type[data-element="fire"] { color: #ff5f5f; text-shadow: 0 0 6px rgba(255,95,95,0.5); }
.tcg-image[data-element="water"] .tcg-image-icon,
.tcg-type[data-element="water"] { color: #38d8ff; text-shadow: 0 0 6px rgba(56,216,255,0.5); }
.tcg-image[data-element="air"] .tcg-image-icon,
.tcg-type[data-element="air"] { color: #b0e8ff; text-shadow: 0 0 6px rgba(176,232,255,0.5); }
.tcg-image[data-element="earth"] .tcg-image-icon,
.tcg-type[data-element="earth"] { color: #8dbf6a; text-shadow: 0 0 6px rgba(141,191,106,0.5); }
.tcg-image[data-element="plasma"] .tcg-image-icon,
.tcg-type[data-element="plasma"] { color: #d16dff; text-shadow: 0 0 6px rgba(209,109,255,0.5); }
.tcg-image[data-element="neutral"] .tcg-image-icon,
.tcg-type[data-element="neutral"] { color: #aaa; }

/* === Variants === */
.tcg-card--shop {
  aspect-ratio: 3 / 4;
  min-height: 220px;
  width: 100%;
  border: 1.5px solid transparent;
  padding: 0.25rem 0.3rem 0.4rem;
}
.tcg-card--shop:hover {
  transform: translateY(-5px) scale(1.05);
  z-index: 10;
}
.tcg-card--shop .tcg-desc { font-size: 0.55rem; }

.tcg-card--draft {
  width: 150px;
  height: 215px;
  margin: 0;
  padding: 0.5rem 0.4rem;
}
.tcg-card--draft .tcg-desc { font-size: 0.55rem; }

.tcg-card--hand {
  width: clamp(74px, 8vw, 100px);
  height: auto;
  aspect-ratio: 0.72 / 1;
  margin: 0 -4px;
  padding: 0.3rem;
  animation: none;
  flex-shrink: 0;
  flex-grow: 0;
}
.tcg-card--hand:hover {
  transform: translateY(-8px) scale(1.08) !important;
  z-index: 10;
}
.tcg-card--hand .tcg-image { min-height: 24px; margin: 0.2rem 0.1rem 0.15rem; }
.tcg-card--hand .tcg-image-icon { font-size: 1.1rem; }
.tcg-card--hand .tcg-name { font-size: 0.5rem; }
.tcg-card--hand .tcg-desc { font-size: 0.38rem; line-height: 1.15; }
.tcg-card--hand .tcg-type { font-size: 0.38rem; }
.tcg-card--hand .tcg-cost { width: 18px; height: 18px; font-size: 0.5rem; }
.tcg-card--hand .tcg-cost::before { font-size: 0.4rem; }
.tcg-card--hand .tcg-charges { font-size: 0.4rem; padding: 0.08rem 0; }

/* === Drag-Preview (flying clone during pointer-drag) === */
/* Eigener Modifier, damit die Basis-.tcg-card:hover-Regel mit
   transform: scale(1.6) !important NICHT zuschl�gt. */
.tcg-card--drag-preview {
  width: 150px;
  height: 210px;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border-color: var(--cyan-bright);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(52, 245, 255, 0.5),
    0 0 60px rgba(52, 245, 255, 0.2);
  animation: none;
  /* Card-Inhalt gestapelt, oberer Bereich (Cost+Type) fix,
     mittlerer Bereich (Name+Desc) flexibel, Charges am Boden. */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
  /* bewusst KEIN transform-scale, nur leichter Tilt. */
  transform: rotateX(4deg);
  transform-origin: center center;
}
/* Hover-Effekt der Basisklasse f�r den Drag-Preview deaktivieren. */
.tcg-card--drag-preview:hover {
  transform: rotateX(4deg) !important;
  animation: none !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(52, 245, 255, 0.5),
    0 0 60px rgba(52, 245, 255, 0.2) !important;
}
/* Drag-Preview nutzt ABSOLUT-positionierten Cost-Kreis,
   daher Cost hier relativ zu Drag-Preview positionieren. */
.tcg-card--drag-preview .tcg-cost {
  position: relative;
  top: auto;
  left: auto;
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  align-self: flex-start;
  margin-bottom: 0.1rem;
  box-shadow: 0 0 8px rgba(52, 245, 255, 0.6);
  z-index: 2;
}
.tcg-card--drag-preview .tcg-type {
  font-size: 0.5rem;
  margin: 0;
  padding: 0;
  text-align: left;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.tcg-card--drag-preview .tcg-name {
  font-size: 0.75rem;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.tcg-card--drag-preview .tcg-desc {
  /* Sichtbarer Effekttext in der Mitte.
     margin-top: auto drueckt die Charges-Zeile an den unteren Rand. */
  display: block;
  font-size: 0.5rem;
  line-height: 1.3;
  color: #c5e8f5;
  text-align: left;
  flex: 1 1 auto;
  margin: 0;
  padding: 0.2rem 0;
  overflow: hidden;
  /* Sauberer Zeilenumbruch bei 150px Breite. */
  word-wrap: break-word;
  white-space: normal;
}
.tcg-card--drag-preview .tcg-charges {
  font-size: 0.6rem;
  margin: 0;
  padding: 0.3rem 0 0.1rem;
  text-align: center;
  border-top: 1px solid rgba(52, 245, 255, 0.2);
  width: 100%;
  flex: 0 0 auto;
}

/* === State Classes === */
.tcg-card--selected {
  box-shadow: 0 0 25px var(--cyan-glow, rgba(52,245,255,0.6)), 0 0 60px rgba(52,245,255,0.2) !important;
  border-color: var(--cyan-bright, #34f5ff) !important;
  transform: translateY(-8px) scale(1.04) !important;
}
.tcg-card--exhausted {
  opacity: 0.4;
  filter: grayscale(0.6);
  pointer-events: none;
}
.tcg-card--owned {
  opacity: 0.7;
  border-color: var(--cyan) !important;
}
.tcg-card--owned > *:not(.tcg-footer) {
  opacity: 0.5;
}
.tcg-card--owned .tcg-owned-badge {
  color: var(--cyan-bright);
  text-shadow: 0 0 8px rgba(52,245,255,0.6);
}

/* Modals Absolute Positioning over Canvas */
.milestone-modal, .draft-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(3, 8, 18, 0.96);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  text-align: center;
  z-index: 50;
  box-shadow: 0 0 50px rgba(52,245,255,0.1), 0 20px 60px rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  overflow: visible;
}

.milestone-modal {
  width: 450px;
  background-image: radial-gradient(rgba(52,245,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.milestone-title {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}
.milestone-subtitle {
  font-family: 'Orbitron', sans-serif;
  color: var(--cyan);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.milestone-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.draft-modal {
  /* Modal soll 5 Karten + Padding fassen, ohne dass etwas
     rausragt. 5 Karten � 130px + 4 Gaps � 12px + 2*24px Padding
     = 698px. Auf 4K clamp(700px, 70vw, 920px). */
  width: clamp(700px, 70vw, 920px);
  max-width: 96vw;
  border-color: var(--pink);
  box-shadow: 0 0 50px rgba(198,92,255,0.15), 0 20px 40px rgba(0,0,0,0.8);
}

#startDraftModal {
  border-color: var(--cyan);
  box-shadow: 0 0 50px rgba(52,245,255,0.15), 0 20px 40px rgba(0,0,0,0.8);
}
.draft-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}
.draft-subtitle {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.draft-cards-grid {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* Drafting-Karten-Wrap: aeusserer Container pro Karte, der die
   Klick-Logik traegt. Die innere .tcg-card hat die Styles. */
.tcg-card--draft-wrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  cursor: pointer;
  pointer-events: auto;
}
/* Drafting-Karten: kompakt, responsive, NICHT so gross wie die
   alten tcg-card--draft-Karten. Spezifitaet (0,3,0) gewinnt gegen
   .tcg-card (0,1,0) aus ui-style.css. */
.draft-cards-grid .tcg-card.tcg-card--draft {
  width: clamp(120px, 13vw, 165px);
  height: clamp(180px, 19vh, 220px);
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.draft-cards-grid .tcg-card.tcg-card--draft:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--card-color, #00e5ff) 50%, transparent),
    0 12px 30px rgba(0,0,0,0.7);
  z-index: 5;
}

.draft-selected {
  box-shadow: 0 0 25px var(--cyan-glow, rgba(52,245,255,0.6)), 0 0 60px rgba(52,245,255,0.2) !important;
  border-color: var(--cyan-bright, #34f5ff) !important;
  transform: translateY(-8px) scale(1.04) !important;
}

#startDraftModal .draft-cards-grid .tcg-card {
  cursor: pointer;
}

#startDraftModal .draft-cards-grid .tcg-card:hover {
  transform: translateY(-20px) scale(1.15);
  z-index: 100;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8),
    0 0 30px rgba(52,245,255,0.3),
    0 0 60px rgba(52,245,255,0.15),
    inset 0 0 20px rgba(255,255,255,0.05);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4), box-shadow 0.2s;
}

/* ─── CARD PLAYED ANIMATION ──────────────────────────────── */
.card-played {
  animation: cardPlayFlash 0.3s ease-out forwards !important;
  pointer-events: none !important;
}
@keyframes cardPlayFlash {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 rgba(52,245,255,0); }
  50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 50px rgba(52,245,255,0.6), 0 0 100px rgba(52,245,255,0.3); }
  100% { transform: scale(1.4) translateY(-30px); opacity: 0; box-shadow: 0 0 80px rgba(52,245,255,0.8), 0 0 150px rgba(52,245,255,0.4); }
}

/* ─── LEFT PANEL WAVE CONTROLS ────────────────────────────────── */
.wave-controls {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wave-start-btn {
  width: 100%;
  padding: 1rem 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, rgba(52,245,255,0.15) 0%, rgba(52,245,255,0.05) 100%);
  border: 1.5px solid var(--cyan);
  border-radius: 10px;
  color: var(--cyan-bright);
  cursor: pointer;
  text-shadow: 0 0 8px var(--cyan-glow);
  box-shadow: 0 0 15px rgba(52,245,255,0.1), inset 0 0 15px rgba(52,245,255,0.05);
  transition: all 0.2s;
}
.wave-start-btn:hover {
  background: linear-gradient(135deg, rgba(52,245,255,0.3) 0%, rgba(52,245,255,0.12) 100%);
  box-shadow: 0 0 35px var(--cyan-glow), inset 0 0 25px rgba(52,245,255,0.12);
  transform: translateY(-2px);
}
.wave-start-btn:active {
  transform: translateY(0);
}
.wave-controls-row {
  display: flex;
  gap: 0.4rem;
}
.btn-restart, .btn-leave {
  flex: 1;
  padding: 0.6rem 0.3rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.btn-restart {
  background: rgba(101,230,138,0.08);
  border: 1px solid rgba(101,230,138,0.3);
  color: var(--green);
}
.btn-restart:hover {
  background: rgba(101,230,138,0.2);
  box-shadow: 0 0 12px var(--green-glow);
}
.btn-leave {
  background: rgba(255,95,118,0.08);
  border: 1px solid rgba(255,95,118,0.3);
  color: var(--danger);
}
.btn-leave:hover {
  background: rgba(255,95,118,0.2);
  box-shadow: 0 0 12px var(--danger-glow);
}

/* ─── TOWER INFO CARD (LEFT PANEL) ────────────────────────────── */
.tower-info-card {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background: linear-gradient(135deg, rgba(52,245,255,0.06) 0%, rgba(2,10,18,0.9) 100%);
  border: 1px solid rgba(52,245,255,0.25);
  border-radius: 12px;
  transition: all 0.3s;
}
.tower-info-card.hidden {
  display: none;
}
.tower-info-header {
  margin-bottom: 0.4rem;
}
.tower-info-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan-bright);
  text-shadow: 0 0 8px var(--cyan-glow);
}
.tower-info-stats {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}
.tower-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(52,245,255,0.08);
}
.stat-label {
  color: var(--text-muted);
}
.stat-value {
  color: var(--text);
  font-weight: 700;
}
.tower-info-actions {
  display: flex;
  gap: 0.4rem;
}
.btn-tower-action {
  flex: 1;
  padding: 0.5rem 0.3rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.upgrade-btn {
  background: rgba(255,157,53,0.1);
  border: 1px solid rgba(255,157,53,0.3);
  color: var(--orange);
}
.upgrade-btn:hover {
  background: rgba(255,157,53,0.2);
  box-shadow: 0 0 10px var(--orange-glow);
}
.move-btn {
  background: rgba(52,245,255,0.08);
  border: 1px solid rgba(52,245,255,0.2);
  color: var(--cyan);
}
.move-btn:hover {
  background: rgba(52,245,255,0.15);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.game-message {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  min-height: 1rem;
  text-shadow: 0 0 6px rgba(255,157,53,0.3);
}

/* ─── SHOP ELEGANCE IMPROVEMENTS ──────────────────────────────── */
.card-shop-section {
  scrollbar-width: thin;
  scrollbar-color: rgba(52,245,255,0.2) transparent;
}
.card-shop-section::-webkit-scrollbar {
  width: 4px;
}
.card-shop-section::-webkit-scrollbar-thumb {
  background: rgba(52,245,255,0.3);
  border-radius: 2px;
}
.shop-filter-bar {
  gap: 1rem;
  padding: 0.45rem 0.6rem;
}
.shop-filter-bar .filter-elem-btn {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}
.filter-group .filter-label {
  font-size: 0.55rem;
}
.filter-group select {
  padding: 0.25rem 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  background: rgba(2,10,18,0.85);
  border: 1px solid rgba(52,245,255,0.15);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-group select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}
.shop-cards-grid {
  gap: 0.6rem;
  padding: 0.5rem;
}
.shop-credits-display {
  background: linear-gradient(135deg, rgba(255,138,0,0.08), rgba(255,138,0,0.02));
  border-color: rgba(255,138,0,0.3);
  box-shadow: 0 0 25px rgba(255,138,0,0.1), inset 0 0 20px rgba(255,138,0,0.03);
}
.shop-talent-section {
  background: rgba(3,8,20,0.5);
  border-color: rgba(198,92,255,0.15);
  box-shadow: 0 0 15px rgba(198,92,255,0.04);
}

/* ─── PLAYER HUD LIST STYLING ──────────────────────────────────── */
.player-hud-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(52,245,255,0.08);
  border-radius: 6px;
  font-size: 0.65rem;
  transition: all 0.2s;
}
.player-hud-entry:hover {
  background: rgba(52,245,255,0.06);
  border-color: rgba(52,245,255,0.2);
}
.player-hud-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.player-hud-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.player-hud-name {
  font-weight: 600;
  color: var(--text);
}
.player-hud-detail {
  font-size: 0.5rem;
  color: var(--text-muted);
}
.player-hud-level {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  color: var(--cyan);
  text-shadow: 0 0 4px var(--cyan-glow);
}
.player-hud-self .player-hud-avatar {
  border-color: var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}
.player-hud-self .player-hud-name {
  color: var(--green);
}