/* Tiny Tyrants – Visual Upgrade Theme (v0.2 – deutlich sichtbar) */

:root {
  --bg: #0b1020;
  --bg-elevated: #141a30;
  --fg: #f4f6ff;
  --muted: #9aa3c0;
  --panel: #161d36;
  --panel-2: #1e2748;
  --border: #3d4a7a;
  --border-soft: #2a3560;
  --accent: #b794ff;
  --accent-2: #5dff9a;
  --good: #4dff88;
  --bad: #ff5d6c;
  --warn: #ffd15a;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  --radius-sm: 8px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;

  --p1: #ff6b7a;
  --p2: #3dffb0;
  --p3: #d4a4ff;
  --p4: #ffd45a;
  --p5: #5ae8ff;
  --p6: #ff8fd0;
  --p7: #c8ff6a;
  --p8: #8a96ff;
  --neutral: #8a93b0;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(183, 148, 255, 0.28), transparent 55%),
    radial-gradient(800px 420px at 95% 5%, rgba(93, 255, 154, 0.14), transparent 50%),
    radial-gradient(700px 500px at 50% 100%, rgba(90, 232, 255, 0.08), transparent 55%),
    linear-gradient(180deg, #0b1020 0%, #10182e 50%, #0a0e1a 100%);
  color: var(--fg);
  margin: 0;
  padding: 0.85rem 1rem 1.4rem;
  min-height: 100vh;
}

/* Sichtbarer Upgrade-Streifen unter dem Titel */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #ffffff 0%, #d4b8ff 40%, #7dffb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(183, 148, 255, 0.35));
}

.meta {
  color: var(--muted);
  font-size: 0.88em;
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.2rem;
}

.pill {
  display: inline-block;
  padding: 0.25em 0.85em;
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: 700;
  background: linear-gradient(135deg, #1f9a4a, #4dff88);
  color: #04140a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 12px rgba(77, 255, 136, 0.35);
}
.pill.disconnected {
  background: linear-gradient(135deg, #a02030, #ff5d6c);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 93, 108, 0.35);
}

/* Buttons – klarer „Game UI“ Look */
.btn,
button.btn {
  background: linear-gradient(180deg, #3a4678 0%, #252f58 100%) !important;
  color: var(--fg) !important;
  border: 1px solid #6a7ac0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.45em 1.05em !important;
  cursor: pointer;
  font-weight: 700 !important;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 3px 0 #151a30, var(--shadow-soft) !important;
}
.btn:hover,
button.btn:hover {
  border-color: #b794ff !important;
  filter: brightness(1.12);
}
.btn:active,
button.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #151a30 !important;
}

.help-trigger {
  background: linear-gradient(180deg, #2a3358, #1a2240) !important;
  color: var(--fg) !important;
  border: 1px solid #5a6aaa !important;
  border-radius: 999px !important;
  padding: 0.4em 0.95em !important;
  cursor: pointer;
  font-size: 0.9em !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.help-trigger:hover {
  border-color: #b794ff !important;
  background: linear-gradient(180deg, #3a4470, #252e55) !important;
}

/* Server-Browser Hero – stark sichtbar */
.sb-hero {
  background:
    linear-gradient(135deg, rgba(183, 148, 255, 0.35) 0%, transparent 45%),
    linear-gradient(180deg, #2a2050 0%, #14182e 100%) !important;
  border: 2px solid #8a6ad4 !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 0 40px rgba(155, 100, 255, 0.25), var(--shadow) !important;
  padding: 1.35rem 1.5rem 1.15rem !important;
}

.sb-hero h2 {
  font-size: 1.8rem !important;
  background: linear-gradient(90deg, #fff, #d4b8ff, #7dffb8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.sb-body {
  background: linear-gradient(180deg, #1a2240 0%, #12182c 100%) !important;
  border: 2px solid #5a4a8a !important;
  border-top: none !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.sb-panel {
  background: linear-gradient(180deg, rgba(30, 36, 68, 0.95), rgba(18, 22, 42, 0.98)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
}

.sb-stat {
  background: rgba(20, 16, 40, 0.55) !important;
  border-color: rgba(183, 148, 255, 0.35) !important;
  color: #d4c8ff !important;
}
.sb-stat b { color: #7dffb8 !important; }

.sb-btn,
#createMatchBtn {
  background: linear-gradient(135deg, #6a3fd4, #b794ff) !important;
  border: 1px solid #d4b8ff !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(140, 90, 255, 0.4) !important;
}
.sb-btn:hover,
#createMatchBtn:hover {
  filter: brightness(1.1);
}

.sb-link-btn {
  background: linear-gradient(180deg, rgba(80, 70, 140, 0.35), rgba(40, 36, 70, 0.5)) !important;
  border-color: #6a5aaa !important;
  color: #e0d4ff !important;
}
.sb-link-btn:hover {
  border-color: #b794ff !important;
  color: #fff !important;
}

.sb-leader {
  background: rgba(16, 20, 40, 0.7) !important;
  border-color: var(--border-soft) !important;
}
.sb-leader:hover {
  border-color: #b794ff !important;
  box-shadow: 0 0 16px rgba(183, 148, 255, 0.28) !important;
}
.sb-leader .leader-portrait {
  border-color: #7a6ab0 !important;
}

.sb-epoch {
  background: rgba(16, 20, 40, 0.55) !important;
  border-color: var(--border-soft) !important;
}

.sb-list li.match-card {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
.sb-list li.match-card:hover {
  border-color: #b794ff !important;
  box-shadow: 0 0 16px rgba(183, 148, 255, 0.25) !important;
}

/* Lobby */
#lobbyPanel {
  background:
    linear-gradient(145deg, rgba(120, 70, 220, 0.4) 0%, transparent 48%),
    linear-gradient(180deg, #2a2248 0%, #16122a 100%) !important;
  border: 2px solid #7a5ac8 !important;
  border-radius: 16px !important;
  padding: 1.2rem 1.5rem !important;
  margin-bottom: 0.9rem !important;
  box-shadow: 0 0 32px rgba(120, 80, 220, 0.3), var(--shadow) !important;
}

#lobbyPanel .lobby-title h3 {
  color: #f0e0ff !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  text-shadow: 0 0 20px rgba(183, 148, 255, 0.55) !important;
}

#startMatchBtn {
  background: linear-gradient(135deg, #2f9a3a, #6dff7a) !important;
  border: 2px solid #a8ffb0 !important;
  color: #06200a !important;
  font-weight: 900 !important;
  font-size: 1.05em !important;
  box-shadow: 0 4px 20px rgba(80, 220, 100, 0.45) !important;
  border-radius: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#startMatchBtn:hover {
  filter: brightness(1.1);
}

.lobby-row select,
.slot-config-table select {
  background: #10162c !important;
  border: 1px solid #5a6aaa !important;
  border-radius: 8px !important;
  color: var(--fg) !important;
}

/* Layout panels */
.map-panel {
  background: #0e1428 !important;
  border: 2px solid #3d4a7a !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(183, 148, 255, 0.15), var(--shadow) !important;
}

.side-panel {
  background: linear-gradient(180deg, #1a2240 0%, #12182c 100%) !important;
  border: 2px solid #3d4a7a !important;
  border-radius: 16px !important;
  padding: 0.85rem !important;
  box-shadow: var(--shadow) !important;
}

.side-panel h2 {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #d4c8ff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0.45rem 0 0.6rem !important;
  border-bottom: 2px solid #4a58a0 !important;
  padding-bottom: 0.4rem !important;
}

.sector-card {
  background: #1e2748 !important;
  border: 1px solid #4a58a0 !important;
  border-radius: 10px !important;
}
.sector-card.selected {
  border-color: #b794ff !important;
  box-shadow: 0 0 0 2px rgba(183, 148, 255, 0.45), 0 0 18px rgba(183, 148, 255, 0.25) !important;
}

.sector-panel {
  background: #1e2748 !important;
  border-color: #4a58a0 !important;
  border-radius: 10px !important;
}

/* Map */
svg.map {
  display: block;
  width: 100%;
  height: auto;
}

.sector-circle {
  stroke-width: 2.6 !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.sector-circle.selected {
  stroke: #ffffff !important;
  stroke-width: 6 !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85));
}

.sector-circle.target-hint {
  stroke: #ffd15a !important;
  stroke-width: 3.2 !important;
  filter: drop-shadow(0 0 8px rgba(255, 209, 90, 0.6));
}

.sector-circle.battle {
  stroke: #ff5d6c !important;
  filter: drop-shadow(0 0 12px rgba(255, 80, 90, 0.75));
}

.sector-name {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.85) !important;
  stroke-width: 3.5px !important;
  stroke-linejoin: round;
}

.sector-pop,
.sector-owner,
.sector-strength,
.sector-epoch {
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.8) !important;
  stroke-width: 2.8px !important;
  stroke-linejoin: round;
}

.building-sprite {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
}

.epoch-banner {
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.pause-banner {
  border-radius: 12px !important;
  letter-spacing: 0.05em;
  border: 2px solid #ffd15a !important;
}

.attack-taunt {
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  border: 2px solid #b794ff !important;
}

.controls {
  background: rgba(22, 30, 60, 0.85) !important;
  border: 2px solid #3d4a7a !important;
  border-radius: 14px !important;
  padding: 0.65rem 0.85rem !important;
  margin-bottom: 0.75rem !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}

.controls input[type="text"] {
  background: #0c1224 !important;
  border: 1px solid #5a6aaa !important;
  border-radius: 8px !important;
  color: var(--fg) !important;
}

.property-legend {
  background: rgba(14, 20, 40, 0.95) !important;
  border: 2px solid #4a58a0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
}

.pill:not(.disconnected) {
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 255, 136, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(77, 255, 136, 0); }
}

/* Scrollbars */
.side-panel::-webkit-scrollbar,
.events::-webkit-scrollbar {
  width: 8px;
}
.side-panel::-webkit-scrollbar-thumb,
.events::-webkit-scrollbar-thumb {
  background: #4a58a0;
  border-radius: 8px;
}

/* ── VU 0.3: Portraits, Icons, Map-Blobs, Juice ─────────────────── */

.tt-icon {
  display: inline-block;
  vertical-align: -0.25em;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  image-rendering: auto;
}

.prop-icon { margin: 0 1px; }

.leader-portrait {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(10, 14, 26, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
  background: #1a2240;
  flex-shrink: 0;
}

.leader-portrait-fallback {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #4a58a0, #2a3358);
}

.leader-cell {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
}

.leader-cell .leader-portrait {
  width: 48px !important;
  height: 48px !important;
}

.player-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.player-card-meta {
  flex: 1;
  min-width: 0;
}

.player-score {
  float: right;
  color: #ffd97a;
  font-size: 0.85em;
  font-weight: 700;
}

.hud-name {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}

.hud-name .leader-portrait {
  width: 36px !important;
  height: 36px !important;
}

.hud-epoch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.epoch-banner .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}

.epoch-banner .glyph img {
  width: 28px;
  height: 28px;
}

.property-legend .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.property-legend .glyph img {
  width: 22px;
  height: 22px;
}

/* Sektor: weicher Insel-Blob-Look */
.sector-circle {
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 10px rgba(183, 148, 255, 0.12)) !important;
}

.sector-pattern {
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.sector-epoch-icon,
.prop-map-icon {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

/* Capture / battle juice */
.sector-circle.flash-good {
  animation: sectorFlashGood 1.1s ease-out 1, capturePulse 0.7s ease-out 1 !important;
}
.sector-circle.flash-bad {
  animation: sectorFlashBad 1.1s ease-out 1, hitShake 0.35s ease-in-out 1 !important;
}

@keyframes capturePulse {
  0%   { filter: drop-shadow(0 0 0 rgba(77, 255, 136, 0)); }
  40%  { filter: drop-shadow(0 0 18px rgba(77, 255, 136, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(77, 255, 136, 0)); }
}

@keyframes hitShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1.5px, -1px); }
  75% { transform: translate(-1px, -0.5px); }
}

/* Movement arrows slightly punchier */
.movement-arrow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.movement-arrow.arrow-glow {
  filter: drop-shadow(0 0 6px rgba(160, 200, 255, 0.8));
}

/* Ocean subtle motion via CSS if waves rect exists */
.map-waves {
  animation: waveDrift 18s linear infinite;
  opacity: 0.55;
}
@keyframes waveDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-8px, 4px); }
  100% { transform: translate(0, 0); }
}

.res-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── VU 0.4: Terrain + Movement-Lerp + Battle juice ───────────── */

.sector-terrain {
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: soft-light;
}

.sector-circle.battle {
  animation: battlePulse 0.7s ease-in-out infinite !important;
}

@keyframes battlePulse {
  0%, 100% {
    stroke: #ff5d6c;
    filter: drop-shadow(0 0 6px rgba(255, 80, 90, 0.45));
  }
  50% {
    stroke: #ffb0a0;
    filter: drop-shadow(0 0 16px rgba(255, 100, 80, 0.95));
  }
}

.connection {
  transition: stroke 0.25s ease, stroke-width 0.2s ease;
}

.movement-label {
  font-weight: 800 !important;
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 3px;
  fill: #fff !important;
  font-size: 12px !important;
}

.event-row {
  border-left: 3px solid #4a58a0;
  padding-left: 0.45rem !important;
  margin-bottom: 0.25rem;
  border-radius: 0 6px 6px 0;
  background: rgba(30, 39, 72, 0.35);
}

.event-row .tick {
  color: #8a96ff !important;
  font-weight: 700;
}

/* ── VU 0.5: Connections, Fog, Sector-Cards, Events ───────────── */

/* Connection dual-layer */
.connection-glow {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 6px;
  stroke-linecap: round;
  opacity: 0.45;
  pointer-events: none;
}
.connection-glow.conn-Future {
  stroke: rgba(120, 180, 255, 0.55);
  opacity: 0.55;
  filter: blur(1.5px);
}
.connection.conn-Future {
  animation: beamPulse 1.6s ease-in-out infinite;
}
@keyframes beamPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Fog of war */
.sector-circle.fogged {
  filter: grayscale(0.55) brightness(0.75) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}
.sector-fog {
  fill: rgba(20, 28, 50, 0.42);
  stroke: none;
  pointer-events: none;
  animation: fogDrift 6s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  0% { opacity: 0.55; }
  100% { opacity: 0.85; }
}

/* Sector cards */
.sector-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
}
.sector-card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 8px rgba(183,148,255,0.25);
}
.sector-card-title {
  flex: 1;
  font-weight: 700 !important;
}
.sector-card-title .sec-pop {
  opacity: 0.65;
  font-weight: 500;
  font-size: 0.9em;
}
.sector-card-props {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-height: 18px;
  margin-bottom: 0.35rem;
}
.sector-card-props .sec-props-empty {
  color: #667;
  font-size: 0.8em;
}
.sector-card.selected {
  border-color: #b794ff !important;
  box-shadow: 0 0 0 2px rgba(183, 148, 255, 0.4), 0 0 16px rgba(183, 148, 255, 0.2) !important;
  background: linear-gradient(135deg, rgba(80, 60, 140, 0.35), #1e2748) !important;
}

/* Role rows polish */
.role-row {
  border-radius: 6px;
  padding: 0.15rem 0.2rem;
}
.role-row.focused {
  background: rgba(183, 148, 255, 0.12);
  outline: 1px solid rgba(183, 148, 255, 0.35);
}
.role-btn {
  border-radius: 6px !important;
  font-weight: 800 !important;
  min-width: 1.8em;
}

/* Event kinds */
.event-row.ev-good {
  border-left-color: #4dff88 !important;
  background: rgba(40, 100, 60, 0.25) !important;
}
.event-row.ev-bad {
  border-left-color: #ff5d6c !important;
  background: rgba(100, 30, 40, 0.28) !important;
}
.event-row.ev-tech {
  border-left-color: #5ae8ff !important;
  background: rgba(30, 70, 100, 0.28) !important;
}
.event-row.ev-diplo {
  border-left-color: #d4a4ff !important;
  background: rgba(70, 40, 110, 0.28) !important;
}
.event-row.ev-info {
  border-left-color: #4a58a0 !important;
}

/* Selected path highlight: connections to selected sector */
.connection.conn-active-path {
  stroke: #ffd15a !important;
  stroke-width: 3.5px !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 4px rgba(255, 209, 90, 0.6));
}

/* ── VU 0.6: Island landmass, capture FX, taunt portraits ─────── */

/* Land — eine zusammenhängende Insel-Silhouette + Landschaftsbild */
.land-mass-shadow {
  fill: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  filter: blur(8px);
}
.land-photo-group {
  pointer-events: none;
}
.land-photo {
  pointer-events: none;
  opacity: 0.96;
}
.land-photo-overlay {
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.35 !important;
}
.land-mass-shade {
  pointer-events: none;
  opacity: 0.85;
}
.land-mass-coast {
  pointer-events: none;
  opacity: 0.95;
  fill: none !important;
  filter: drop-shadow(0 0 2px rgba(180, 220, 200, 0.25));
}

.land-theme-desert .land-mass-shadow { fill: rgba(50, 30, 8, 0.48); }
.land-theme-volcanic .land-mass-shadow { fill: rgba(40, 8, 8, 0.52); }
.land-theme-arctic .land-mass-shadow { fill: rgba(8, 24, 48, 0.45); }
.land-theme-coast .land-mass-coast { stroke: rgba(160, 230, 210, 0.35) !important; }
.land-theme-arctic .land-mass-coast { stroke: rgba(210, 235, 255, 0.38) !important; }
.land-theme-desert .land-mass-coast { stroke: rgba(230, 200, 130, 0.32) !important; }
.land-theme-volcanic .land-mass-coast { stroke: rgba(180, 80, 50, 0.25) !important; }

/* Capture / hit particle FX */
.fx-burst { pointer-events: none; }
.fx-particle {
  animation: fxPop 0.75s ease-out forwards;
}
@keyframes fxPop {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.fx-ring-good, .fx-ring-bad {
  animation: fxRing 0.7s ease-out forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fxRing {
  0%   { opacity: 0.95; r: 8; }
  100% { opacity: 0; r: 48; }
}

/* Attack taunt with portrait */
.attack-taunt {
  display: none !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.55rem 0.85rem !important;
  min-width: 220px;
  max-width: 340px;
}
.attack-taunt.visible {
  display: flex !important;
}
.attack-taunt .taunt-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid currentColor;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  background: #1a2240;
}
.attack-taunt .taunt-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.attack-taunt .who {
  font-weight: 800 !important;
  font-size: 0.9em !important;
}
.attack-taunt .what {
  font-size: 0.95em !important;
  line-height: 1.25;
}

/* Own HUD polish */
#ownHud {
  background: linear-gradient(180deg, rgba(30, 39, 72, 0.95), rgba(18, 24, 44, 0.92)) !important;
  border: 2px solid #3d4a7a !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(8px);
}
#ownHud .hud-bar {
  background: #0c1224 !important;
  border: 1px solid #2a3560 !important;
  border-radius: 999px !important;
  overflow: hidden;
}
#ownHud .hud-pill {
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* g-fx above map content */
#g-fx { pointer-events: none; }

/* ── VU 0.7: Select rings, match cards, end modal ─────────────── */

body.match-end-flash .map-panel {
  animation: mapEndFlash 0.65s ease-out 1;
}
@keyframes mapEndFlash {
  0%   { filter: brightness(1); box-shadow: 0 0 0 rgba(255,209,90,0); }
  35%  { filter: brightness(1.25); box-shadow: 0 0 40px rgba(183,148,255,0.55); }
  100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255,209,90,0); }
}

/* Selection / target rings on map */
.sector-select-ring {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5.5;
  stroke-dasharray: 10 7;
  pointer-events: none;
  opacity: 0.98;
  animation: selectSpin 2.8s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.75));
}
@keyframes selectSpin {
  to { stroke-dashoffset: -44; }
}
.sector-target-ring {
  fill: none;
  stroke: #ffd15a;
  stroke-width: 2.2;
  pointer-events: none;
  opacity: 0.9;
  animation: targetPulse 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255,209,90,0.55));
}
.sector-target-ring.far {
  stroke: #c8b070;
  stroke-dasharray: 4 4;
  opacity: 0.65;
  animation-duration: 1.6s;
}
@keyframes targetPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Server browser match cards */
.sb-list li.match-card {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  padding: 0.75rem 0.9rem !important;
  background: linear-gradient(135deg, #1e2748 0%, #161d36 100%) !important;
  border: 1px solid #3d4a7a !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.sb-list li.match-card:hover {
  border-color: #b794ff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(120, 80, 220, 0.25);
}
.sb-list li.match-card .match-card-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #b794ff, #5dff9a);
}
.sb-list li.match-card.live .match-card-accent {
  background: linear-gradient(180deg, #4dff88, #2a9a50);
}
.sb-list li.match-card.lobby .match-card-accent {
  background: linear-gradient(180deg, #d4a4ff, #7a50c0);
}
.match-info { flex: 1; min-width: 0; }
.match-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.match-name {
  font-weight: 800 !important;
  font-size: 1.05em !important;
  color: #f0eef8 !important;
}
.match-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: #9aa3c0 !important;
  font-size: 0.88em !important;
}
.sb-join-btn {
  background: linear-gradient(135deg, #5a3fd4, #b794ff) !important;
  border: 1px solid #d4b8ff !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  padding: 0.55em 1em !important;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(120, 80, 220, 0.35);
}
.sb-join-btn:hover { filter: brightness(1.1); }

/* Match end modal polish */
#matchEndModal {
  border: 2px solid #b794ff !important;
  box-shadow: 0 20px 80px rgba(0,0,0,0.85), 0 0 50px rgba(183,148,255,0.28) !important;
  position: relative;
  overflow: hidden;
}
.me-header {
  position: relative;
  overflow: hidden;
}
.me-winner-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid #ffd15a;
  box-shadow: 0 0 0 4px rgba(255,209,90,0.25), 0 8px 24px rgba(0,0,0,0.5);
  object-fit: cover;
  display: block;
  margin: 0 auto 0.4rem;
  background: #1a2240;
}
.me-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.me-confetti-bit {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(140px) rotate(280deg); opacity: 0; }
}
.me-row {
  grid-template-columns: 36px 40px 1fr auto !important;
}
.me-row .me-row-portrait,
.me-row .leader-portrait {
  width: 36px !important;
  height: 36px !important;
}
.me-row.winner {
  background: linear-gradient(135deg, rgba(255,209,90,0.22), rgba(183,148,255,0.12)) !important;
  border-left-color: #ffd15a !important;
}
.me-player-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.me-actions .sb-btn {
  background: linear-gradient(135deg, #3f8f35, #6dff7a) !important;
  border: 1px solid #a8ffb0 !important;
  color: #06200a !important;
  font-weight: 900 !important;
}

/* Lobby panel start button already strong — slight extra */
#lobbyPanel {
  position: relative;
}
#lobbyPanel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(183, 148, 255, 0.08);
}

/* ── VU 0.8: Elimination, lobby slots, tooltips ───────────────── */

/* Elimination banner with portrait */
.elimination-banner {
  border: 3px solid #ff5d6c !important;
  background: linear-gradient(145deg, rgba(50,8,18,0.96), rgba(30,8,20,0.98)) !important;
  box-shadow: 0 12px 48px rgba(200,30,50,0.55), 0 0 40px rgba(255,60,80,0.25) !important;
  min-width: 280px;
}
.elimination-banner.is-me {
  border-color: #ffd15a !important;
  box-shadow: 0 12px 48px rgba(255,180,40,0.4), 0 0 40px rgba(255,209,90,0.2) !important;
}
.elimination-banner .elim-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.elimination-banner .elim-portrait,
.elimination-banner .leader-portrait {
  width: 72px !important;
  height: 72px !important;
  border: 3px solid #ff5d6c !important;
  filter: grayscale(0.35);
}
.elimination-banner.is-me .elim-portrait,
.elimination-banner.is-me .leader-portrait {
  border-color: #ffd15a !important;
}
.elimination-banner .glyph {
  font-size: 2.6em !important;
}

.map-panel.elim-shake {
  animation: elimShake 0.45s ease-in-out 1;
}
@keyframes elimShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* Player card eliminated */
.player-card.eliminated {
  opacity: 0.55;
  filter: grayscale(0.5);
  position: relative;
}
.player-card.eliminated .leader-portrait {
  filter: grayscale(0.7);
}
.elim-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #5a1820;
  color: #ff8a8a;
  border: 1px solid #ff5d6c;
  vertical-align: middle;
}

/* Lobby slot rows */
.slot-config-table tr.slot-row {
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.slot-config-table tr.slot-row.p1 { border-left-color: var(--p1); }
.slot-config-table tr.slot-row.p2 { border-left-color: var(--p2); }
.slot-config-table tr.slot-row.p3 { border-left-color: var(--p3); }
.slot-config-table tr.slot-row.p4 { border-left-color: var(--p4); }
.slot-config-table tr.slot-row.p5 { border-left-color: var(--p5); }
.slot-config-table tr.slot-row.p6 { border-left-color: var(--p6); }
.slot-config-table tr.slot-row.p7 { border-left-color: var(--p7); }
.slot-config-table tr.slot-row.p8 { border-left-color: var(--p8); }
.slot-config-table tr.slot-row.is-me {
  background: linear-gradient(90deg, rgba(183,148,255,0.18), transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(183,148,255,0.25);
}
.slot-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}
.slot-color-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.slot-color-ring.p1 { border-color: var(--p1); }
.slot-color-ring.p2 { border-color: var(--p2); }
.slot-color-ring.p3 { border-color: var(--p3); }
.slot-color-ring.p4 { border-color: var(--p4); }
.slot-color-ring.p5 { border-color: var(--p5); }
.slot-color-ring.p6 { border-color: var(--p6); }
.slot-color-ring.p7 { border-color: var(--p7); }
.slot-color-ring.p8 { border-color: var(--p8); }
.slot-type {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08em 0.4em;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.slot-type.human {
  background: rgba(93,255,154,0.15);
  color: #7dffb0;
  border: 1px solid rgba(93,255,154,0.4);
}
.slot-type.ai {
  background: rgba(150,160,200,0.12);
  color: #a0a8c8;
  border: 1px solid rgba(150,160,200,0.3);
}
.slot-perk {
  color: #b0b8d0 !important;
  font-size: 0.9em !important;
}
.you-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08em 0.4em;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 900;
  background: linear-gradient(90deg, #b794ff, #ffd15a);
  color: #1a1028;
  vertical-align: middle;
}

/* Cursor tooltip polish */
.cursor-tooltip {
  background: rgba(12, 16, 32, 0.94) !important;
  border: 2px solid #5a6aaa !important;
  border-radius: 10px !important;
  padding: 0.45em 0.75em !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(6px);
  font-weight: 600;
  max-width: 280px;
}
.cursor-tooltip.reinforce {
  border-color: #4dff88 !important;
  box-shadow: 0 0 16px rgba(77,255,136,0.25) !important;
}
.cursor-tooltip.attack {
  border-color: #ff5d6c !important;
  box-shadow: 0 0 16px rgba(255,93,108,0.25) !important;
}
.cursor-tooltip.invalid {
  border-color: #667 !important;
}
.cursor-tooltip .ct-main {
  font-weight: 700;
}
.cursor-tooltip .ct-icon {
  margin-right: 0.3em;
  font-weight: 900;
}
.cursor-tooltip .ct-line2 {
  display: block;
  margin-top: 0.2em;
  font-size: 0.92em;
  opacity: 0.95;
}

/* Pause banner */
.pause-banner {
  background: linear-gradient(135deg, rgba(30,24,50,0.95), rgba(20,16,36,0.98)) !important;
  border: 2px solid #b794ff !important;
  color: #f0e8ff !important;
  box-shadow: 0 8px 32px rgba(120,80,220,0.35) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* ── VU 0.9: Ack, highscores, pop-orbs, modals ────────────────── */

/* Ack status line */
#ackMsg {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.7em !important;
  padding: 0.25em 0.55em !important;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#ackMsg.ok {
  color: #7dffb0 !important;
  background: rgba(40, 100, 60, 0.28);
  border: 1px solid rgba(77, 255, 136, 0.35);
}
#ackMsg.err {
  color: #ff9a9a !important;
  background: rgba(100, 30, 40, 0.3);
  border: 1px solid rgba(255, 93, 108, 0.4);
}
#ackMsg.ack-flash {
  animation: ackPop 0.45s ease-out 1;
}
@keyframes ackPop {
  0%   { transform: translateY(4px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}
#ackMsg .ack-icon {
  font-weight: 900;
  flex-shrink: 0;
}
#ackMsg .ack-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pop orbs including warriors */
.pop-orb {
  stroke: rgba(0,0,0,0.45);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  pointer-events: none;
}
.pop-orb-w { fill: #e09a4a !important; }
.pop-orb-r { fill: #58c8e0 !important; }
.pop-orb-k { fill: #e07070 !important; }
.pop-orb-label {
  fill: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,0.7);
  stroke-width: 2px;
}

/* Highscore table */
#scoreModal, #helpModal {
  border: 2px solid #5a4d78 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.7), 0 0 40px rgba(183,148,255,0.15) !important;
  background: linear-gradient(180deg, #1e2238 0%, #12162a 100%) !important;
}
#scoreModal .help-header, #helpModal .help-header {
  background: linear-gradient(90deg, rgba(183,148,255,0.2), transparent) !important;
  border-bottom: 1px solid #3d4a7a !important;
}
.score-table {
  width: 100%;
  border-collapse: collapse;
}
.score-table th {
  background: #1a2040 !important;
  color: #c8c4e0 !important;
  font-size: 0.78em !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.score-table tr.podium-1 {
  background: linear-gradient(90deg, rgba(255,215,0,0.14), transparent) !important;
}
.score-table tr.podium-2 {
  background: linear-gradient(90deg, rgba(192,192,192,0.1), transparent) !important;
}
.score-table tr.podium-3 {
  background: linear-gradient(90deg, rgba(205,127,50,0.1), transparent) !important;
}
.score-table tr.podium-1 .rank { color: #ffd700 !important; font-size: 1.15em !important; }
.score-table .score-leader {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.score-table .score-portrait,
.score-table .leader-portrait {
  width: 28px !important;
  height: 28px !important;
  border-width: 1.5px !important;
}
.score-table .score-col {
  color: #ffd97a !important;
  font-weight: 800 !important;
}

/* Connection pill stronger */
.pill {
  letter-spacing: 0.02em;
}
.pill.disconnected {
  animation: discPulse 1.4s ease-in-out infinite;
}
@keyframes discPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Strength rings slightly punchier */
.strength-ring {
  fill: none;
  opacity: 0.75;
  pointer-events: none;
}
.strength-ring.strong {
  opacity: 0.95;
  filter: drop-shadow(0 0 3px currentColor);
}

/* ── VU 1.0: Fog of War als weisse Wolke ───────────────────────── */

/* Sektor unter Nebel: entsättigt, Form bleibt */
.sector-circle.fogged {
  filter: grayscale(0.65) brightness(0.85) drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
}

/* Wolken-Gruppe */
g.sector-fog {
  pointer-events: none;
}

g.sector-fog .fog-base {
  pointer-events: none;
  opacity: 0.95;
}

g.sector-fog .fog-puff {
  pointer-events: none;
  opacity: 0.9;
}

/* Leichte Drift pro Puff — wirkt wie ziehende Wolken */
g.sector-fog .fog-puff-1 {
  animation: fogDrift1 7s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
g.sector-fog .fog-puff-2 {
  animation: fogDrift2 9s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
g.sector-fog .fog-puff-3 {
  animation: fogDrift3 8s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
g.sector-fog .fog-puff-4 {
  animation: fogDrift4 6.5s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes fogDrift1 {
  0%   { opacity: 0.75; transform: translate(-1px, 0) scale(1); }
  100% { opacity: 0.95; transform: translate(3px, -2px) scale(1.06); }
}
@keyframes fogDrift2 {
  0%   { opacity: 0.7;  transform: translate(2px, 1px) scale(1.02); }
  100% { opacity: 0.95; transform: translate(-2px, -1px) scale(1.08); }
}
@keyframes fogDrift3 {
  0%   { opacity: 0.8;  transform: translate(0, 2px) scale(0.98); }
  100% { opacity: 0.95; transform: translate(2px, -2px) scale(1.05); }
}
@keyframes fogDrift4 {
  0%   { opacity: 0.72; transform: translate(-2px, -1px) scale(1); }
  100% { opacity: 0.92; transform: translate(1px, 2px) scale(1.07); }
}

/* Fragezeichen in der Wolke */
g.sector-fog .fog-question {
  fill: rgba(40, 50, 80, 0.55);
  font-size: 22px;
  font-weight: 900;
  font-family: "Segoe UI", system-ui, sans-serif;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 3px;
  opacity: 0.9;
  animation: fogQPulse 2.4s ease-in-out infinite;
}
@keyframes fogQPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* Alte dunkle Fog-Ellipse (falls noch im CSS) überschreiben */
.sector-fog:not(g) {
  fill: url(#fogBase) !important;
  opacity: 0.85 !important;
  animation: none !important;
}

/* AI leader portraits */
.leader-portrait {
  object-fit: cover !important;
  object-position: center 20% !important;
  background: #1a2240 !important;
}
.me-winner-portrait {
  object-fit: cover !important;
  object-position: center 20% !important;
}
.attack-taunt .taunt-portrait {
  object-fit: cover !important;
  object-position: center 20% !important;
}
.score-table .score-portrait,
.score-table .leader-portrait {
  object-fit: cover !important;
  object-position: center 20% !important;
}

/* AI building sprites on map */
.building-sprite {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.65)) !important;
  pointer-events: none;
}

/* Large buildings with transparent BG */
.building-sprite {
  pointer-events: none !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)) !important;
  opacity: 0.98;
}
.sector-building {
  pointer-events: none;
}
/* Labels above building */
.sector-name, .sector-owner, .sector-strength, .sector-pop {
  /* keep paint-order from theme */
}

/* ── Owner clarity: halo + badge, smaller buildings ───────────── */

.owner-halo {
  fill: none !important;
  stroke-width: 7 !important;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 0 6px currentColor);
}

.sector-circle {
  stroke-width: 3.6 !important;
  filter:
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.25)) !important;
}

.sector-owner {
  font-size: 11px !important;
  font-weight: 800 !important;
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.9) !important;
  stroke-width: 3.2px !important;
}

.owner-badge {
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.owner-badge-num {
  pointer-events: none;
}

.building-sprite {
  opacity: 0.95;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) !important;
}

/* Owner portrait badge on map */
.owner-badge { pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.owner-badge-img { pointer-events: none; }
.owner-badge-bg, .owner-badge-ring, .owner-badge-ring-hi { pointer-events: none; }

/* ── Movement march polish ───────────────────────────────────── */
.movement-path {
  fill: none;
  stroke-width: 2.2;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  opacity: 0.55;
  pointer-events: none;
  animation: marchDash 0.7s linear infinite;
}
@keyframes marchDash {
  to { stroke-dashoffset: -26; }
}
.movement-convoy {
  pointer-events: none;
}
.movement-arrow {
  stroke-width: 1.2px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.65)) !important;
  /* Kein opacity-pulse mehr — Position wird per rAF geglättet */
  animation: none !important;
}
.movement-label {
  font-size: 12px !important;
  font-weight: 900 !important;
  fill: #fff !important;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,0.85) !important;
  stroke-width: 3px !important;
  pointer-events: none;
}
.movement-trail {
  pointer-events: none;
}
@media (max-width: 768px), (pointer: coarse) {
  .movement-path { animation: none; opacity: 0.45; }
}

/* ── Marching warriors (epoch figures) ───────────────────────── */
.movement-warrior {
  pointer-events: none;
}
.movement-warrior .w-leg-l,
.movement-warrior .w-leg-r {
  transform-box: fill-box;
  transform-origin: top center;
}
.movement-warrior.warrior-glow .w-body {
  filter: drop-shadow(0 0 4px #7dd3ff);
}
.movement-warrior.warrior-ep-Future .w-hover {
  animation: hoverPulse 0.9s ease-in-out infinite alternate;
}
@keyframes hoverPulse {
  from { opacity: 0.25; }
  to   { opacity: 0.55; }
}
@media (max-width: 768px), (pointer: coarse) {
  .movement-warrior.warrior-ep-Future .w-hover { animation: none; opacity: 0.4; }
}

/* ── First-2-minutes Coach ───────────────────────────────────── */
.coach-panel {
  position: absolute;
  left: 50%;
  top: 0.85rem;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-width: min(440px, 92%);
  padding: 0.7rem 0.85rem 0.75rem;
  background: linear-gradient(135deg, rgba(28, 22, 48, 0.96), rgba(18, 24, 44, 0.96));
  border: 2px solid #b794ff;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5), 0 0 24px rgba(183,148,255,0.25);
  pointer-events: auto;
  animation: coachIn 0.35s ease-out;
}
@keyframes coachIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.coach-step {
  flex-shrink: 0;
  min-width: 2.4em;
  padding: 0.2em 0.45em;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd15a, #b794ff);
  color: #1a1028;
  font-weight: 900;
  font-size: 0.78rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.coach-body { flex: 1; min-width: 0; }
.coach-title {
  font-weight: 800;
  font-size: 1.02rem;
  color: #f0e8ff;
  margin-bottom: 0.15rem;
}
.coach-text {
  font-size: 0.9rem;
  line-height: 1.35;
  color: #c8c4e0;
}
.coach-skip {
  flex-shrink: 0;
  border: 1px solid #5a4d78;
  background: transparent;
  color: #b0a8c8;
  border-radius: 8px;
  width: 1.8em;
  height: 1.8em;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.coach-skip:hover {
  border-color: #b794ff;
  color: #fff;
}

/* Puls auf eigener Start-Insel */
g.coach-pulse-home .sector-circle {
  animation: coachHomePulse 1.1s ease-in-out infinite !important;
  stroke: #fff !important;
  stroke-width: 5px !important;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.85)) !important;
}
g.coach-pulse-home .owner-halo {
  stroke-width: 7px !important;
  opacity: 1 !important;
  animation: coachHaloPulse 1.1s ease-in-out infinite;
}
@keyframes coachHomePulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }
  50% { filter: drop-shadow(0 0 18px rgba(255,255,255,0.95)); }
}
@keyframes coachHaloPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Puls auf erreichbaren Zielen */
g.coach-pulse-target .sector-circle {
  animation: coachTargetPulse 0.9s ease-in-out infinite !important;
  stroke: #ffd15a !important;
  stroke-width: 4.5px !important;
  filter: drop-shadow(0 0 12px rgba(255,209,90,0.8)) !important;
}
@keyframes coachTargetPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,209,90,0.4)); }
  50% { filter: drop-shadow(0 0 16px rgba(255,209,90,0.95)); }
}

/* Coach-Schritte: Send-Slider kurz hervorheben bei Schritt 2 */
body.coach-step-2 #sendPctSlider {
  outline: 2px solid #ffd15a;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(255,209,90,0.45);
}
body.coach-step-3 .side-panel {
  box-shadow: 0 0 0 2px rgba(183,148,255,0.55), 0 8px 28px rgba(0,0,0,0.4) !important;
}

@media (max-width: 768px) {
  .coach-panel {
    top: auto;
    bottom: 0.6rem;
    max-width: 96%;
    font-size: 0.95em;
  }
}

/* Send slider bar directly above the map */
.send-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, rgba(30, 36, 58, 0.98), rgba(18, 22, 40, 0.96));
  border-bottom: 1px solid #3d4a7a;
  z-index: 5;
}
.send-bar-label {
  font-weight: 800;
  font-size: 0.9rem;
  color: #f0e8ff;
  letter-spacing: 0.02em;
}
.send-bar #sendPctSlider {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  cursor: pointer;
  accent-color: #b794ff;
}
.send-bar-value {
  font-family: Consolas, monospace;
  font-weight: 800;
  min-width: 3.2em;
  text-align: right;
  color: #ffd15a;
  font-size: 0.95rem;
}
.send-bar-hint {
  margin-left: auto;
  font-size: 0.8rem;
  color: #8b90a5;
}
body.coach-step-2 .send-bar {
  box-shadow: inset 0 0 0 2px rgba(255, 209, 90, 0.55);
}
body.coach-step-2 #sendPctSlider {
  outline: none;
  box-shadow: none;
}

/* Leader picker: always show all 8 characters */
.play-as-label {
  color: #ccc;
  font-size: 0.9em;
  margin-right: 0.15rem;
}
.leader-pick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  max-width: 100%;
}
.leader-pick-btn {
  font-size: 0.82rem !important;
  padding: 0.28em 0.55em !important;
  min-width: auto;
}
.leader-pick-btn.taken:not(.active) {
  opacity: 0.45;
  text-decoration: line-through;
}
.leader-pick-btn.active {
  box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(183,148,255,0.45) !important;
  font-weight: 800 !important;
}

/* Modern lightweight ocean look */
.map-bg {
  /* base gradient only — no filters */
}
.map-depth,
.map-sheen,
.map-waves,
.map-waves-fine {
  pointer-events: none;
}
/* sehr sanfte Vertikal-Drift der Wellen (CSS transform, GPU-freundlich) */
.map-waves {
  opacity: 0.95;
  animation: waveDriftY 18s ease-in-out infinite alternate;
}
.map-waves-fine {
  opacity: 0.85;
  animation: waveDriftY 26s ease-in-out infinite alternate-reverse;
}
@keyframes waveDriftY {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}
/* Mobile: keine CSS-Drift, SVG-Pattern-Animate reicht */
@media (max-width: 768px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .map-waves,
  .map-waves-fine {
    animation: none !important;
  }
}

/* Mobile: side panel under map, compact */
@media (max-width: 768px), (pointer: coarse) {
  .layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(42vh, 1fr) auto !important;
    gap: 0.45rem !important;
    height: auto !important;
    min-height: calc(100dvh - 8rem);
  }
  .map-panel {
    min-height: 42vh;
    max-height: 58vh;
  }
  .side-panel {
    padding: 0.45rem 0.5rem 0.75rem !important;
    font-size: 0.82em !important;
  }
  .side-panel h2 {
    font-size: 0.72rem !important;
    margin: 0.4rem 0 0.25rem !important;
  }
  .send-bar {
    padding: 0.35rem 0.55rem;
    gap: 0.4rem;
  }
  .send-bar-hint { display: none; }
  .send-bar #sendPctSlider { max-width: none; }
  .leader-pick-btn {
    font-size: 0.72rem !important;
    padding: 0.22em 0.4em !important;
  }
  .controls {
    font-size: 0.85em;
    gap: 0.35rem;
  }
}
/* Landscape phone: keep side-by-side so map stays wide */
@media (max-width: 1024px) and (orientation: landscape) {
  .layout {
    grid-template-columns: 1fr minmax(150px, 26vw) !important;
    grid-template-rows: 1fr !important;
    height: calc(100dvh - 5rem) !important;
    min-height: 0 !important;
  }
  .map-panel {
    min-height: 0 !important;
    max-height: none !important;
  }
  .side-panel {
    overflow-y: auto !important;
    max-height: 100% !important;
    font-size: 0.78em !important;
  }
}

/* Mobile: own sectors grid — up to 4 cards side by side */
@media (max-width: 768px), (pointer: coarse) {
  #ownSectors {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.35rem;
  }
  #ownSectors .sector-card {
    margin-bottom: 0 !important;
    padding: 0.35em 0.35em !important;
    font-size: 0.78em;
    min-width: 0;
  }
  #ownSectors .sector-card-head {
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  #ownSectors .sector-card-title {
    font-size: 0.85em;
    line-height: 1.15;
    word-break: break-word;
  }
  #ownSectors .sector-card-props {
    min-height: 14px;
    margin-bottom: 0.2rem;
  }
  #ownSectors .sector-card-props img,
  #ownSectors .sector-card-props .tt-icon {
    width: 12px !important;
    height: 12px !important;
  }
  #ownSectors .role-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.9em;
  }
  #ownSectors .role-label {
    font-size: 0.72em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #ownSectors .role-btn {
    min-width: 1.35em;
    padding: 0.1em 0.25em;
    font-size: 0.85em;
  }
  #ownSectors .role-count {
    min-width: 1.1em;
    text-align: center;
    font-size: 0.85em;
  }
}
/* Very narrow phones: 2 columns if 4 is too tight */
@media (max-width: 380px) {
  #ownSectors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Landscape phone: keep side panel narrow — 2 columns for sectors is enough */
@media (max-width: 1024px) and (orientation: landscape) {
  #ownSectors {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.25rem;
  }
}

/* Lobby mobile: ready status always visible */
.ready-inline {
  display: none;
  margin-top: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.ready-inline .ready-tag {
  margin-left: 0 !important;
}
.ready-inline .ready-toggle {
  margin-left: 0 !important;
  margin-top: 0.15rem;
}

@media (max-width: 768px), (pointer: coarse) {
  #lobbyPanel {
    padding: 0.75rem 0.7rem !important;
    overflow-x: hidden;
  }
  #lobbyPanel .lobby-title h3 {
    font-size: 1.05rem !important;
  }
  #lobbyPanel .lobby-sub {
    font-size: 0.82em;
  }
  .lobby-row {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .lobby-row select {
    max-width: 100%;
    flex: 1 1 160px;
  }
  #startMatchBtn {
    width: 100%;
    margin-top: 0.25rem;
  }

  /* Table: hide less critical columns so Status fits; show ready in leader cell */
  .slot-config-table {
    font-size: 0.82em !important;
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .slot-config-table thead,
  .slot-config-table tbody,
  .slot-config-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .slot-config-table th,
  .slot-config-table td {
    padding: 0.4em 0.35em !important;
    vertical-align: top;
  }
  /* Hide Bonus + Difficulty on mobile — AI style stays, Status via ready-inline */
  .slot-config-table .col-perk,
  .slot-config-table .col-difficulty,
  .slot-config-table .col-status {
    display: none !important;
  }
  .slot-config-table .col-leader {
    width: 58%;
  }
  .slot-config-table .col-behavior {
    width: 42%;
  }
  .slot-config-table .leader-cell {
    align-items: flex-start;
    gap: 0.4rem;
  }
  .slot-config-table .slot-portrait-wrap .leader-portrait,
  .slot-config-table .leader-portrait {
    width: 40px !important;
    height: 40px !important;
  }
  .slot-config-table .leader-select {
    max-width: 100%;
    width: 100%;
    font-size: 0.85em;
  }
  .slot-config-table .col-behavior select {
    width: 100%;
    max-width: 100%;
    font-size: 0.85em;
  }
  /* Ready status always visible in leader column on mobile */
  .ready-inline {
    display: flex !important;
  }
  .ready-inline .ready-tag {
    font-size: 0.8em !important;
    padding: 3px 8px !important;
  }
  .ready-inline .ready-toggle {
    font-size: 0.8em !important;
    padding: 5px 10px !important;
    border-width: 1.5px;
  }
  .lobby-help {
    font-size: 0.72em !important;
    line-height: 1.4;
  }
  .ready-status {
    font-size: 0.85em !important;
  }
}

/* Epoch marchers: clearer silhouettes */
.movement-warrior {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}
.movement-warrior .w-torso,
.movement-warrior .w-head,
.movement-warrior .w-shield,
.movement-warrior .w-weapon {
  /* fixed epoch colors in markup */
}
.movement-warrior .w-body {
  /* player color accent only */
}
.movement-warrior.warrior-ep-Future .w-torso {
  filter: drop-shadow(0 0 3px rgba(125,211,255,0.7));
}
.movement-warrior.warrior-ep-StoneAge .w-torso {
  /* furry look via slightly softer edge */
}
.movement-label {
  font-size: 13px !important;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,0.9) !important;
  stroke-width: 3.5px !important;
}