123

public/styles.css

@@ -21,6 +21,8 @@
   --empire-dark: #8b1530;
   --neutral: #8b7355;
   --neutral-dark: #5c4a38;
+  --defense: #6b46c1;
+  --defense-dark: #4c1d95;
   --font-display: 'Orbitron', sans-serif;
   --font-body: 'Rajdhani', sans-serif;
 }
@@ -621,11 +623,25 @@ html, body {
   transition: all 0.2s;
   flex-shrink: 0;
   margin-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .btn-instructions:hover, .btn-settings:hover {
   background: rgba(212,168,75,0.2);
   transform: scale(1.08);
 }
+/* Иконки внутри кнопок не должны перехватывать клики */
+.btn-instructions svg,
+.btn-instructions i[data-lucide],
+.btn-settings svg,
+.btn-settings i[data-lucide],
+.btn-instructions-lobby svg,
+.btn-instructions-lobby i[data-lucide],
+.btn-settings-lobby svg,
+.btn-settings-lobby i[data-lucide] {
+  pointer-events: none;
+}
 
 /* Board – Star Wars style (trench/hangar, space) */
 .board {
@@ -896,6 +912,11 @@ html, body {
   border-color: #8b6914;
   box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(139,105,20,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
 }
+.card.faction-defense {
+  background: linear-gradient(165deg, #4a2d6a 0%, #2d1a4a 45%, #1a0f2d 100%);
+  border-color: var(--defense);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(107,70,193,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
+}
 
 .card-wrap.playable:not(.disabled) .card {
   border-color: var(--amber-bright);
@@ -938,6 +959,11 @@ html, body {
   color: #d4a84b;
   text-shadow: 0 0 20px rgba(212,168,75,0.6);
 }
+.card.faction-defense .card-art {
+  background: linear-gradient(180deg, rgba(107,70,193,0.3) 0%, rgba(26,15,45,0.95) 100%);
+  color: #8b5cf6;
+  text-shadow: 0 0 20px rgba(139,92,246,0.7);
+}
 .card-art .card-art-swg { font-size: 1.5em; }
 .card-art .card-art-fallback { font-size: 1.1rem; opacity: 0.9; }
 .card-art .card-art-image {