/* ==========================================================================
   PIEL DE JUEGO — paneles de metal, no cajas de página web

   Por qué existe este archivo aparte de style.css: es una CAPA. Se puede sacar
   el <link> y el juego vuelve al aspecto anterior intacto — la misma regla de
   "interruptor para apagarla" que rige cada fase del proyecto.

   Nada de esto usa una sola imagen. El metal, los remaches, las esquinas
   biseladas, el grano y el viñeteado son degradados y `clip-path`. El único
   archivo nuevo son dos tipografías con licencia OFL (65 KB en total), que es
   lo que más aleja del aspecto "página web" por menos peso.
   ========================================================================== */

/* Oswald y Barlow Condensed · SIL Open Font License 1.1.
   Servidas desde el propio proyecto y no desde Google: así el juego funciona
   sin internet y no se le filtra la IP del jugador a un tercero. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --mil-steel-1: #2a3038;
  --mil-steel-2: #171c23;
  --mil-steel-3: #10141a;
  --mil-edge: #59636f;
  --mil-edge-hi: #8b97a4;
  --font-title: "Oswald", "Segoe UI", system-ui, sans-serif;
  --font-label: "Barlow Condensed", "Segoe UI", system-ui, sans-serif;
  /* Bisel de las esquinas. Un solo número gobierna todo el lenguaje visual. */
  --bevel: 20px;
  --bevel-sm: 10px;
}

/* ==========================================================================
   1 · El fondo: que se vea DÓNDE estás, no un vidrio esmerilado gris
   ========================================================================== */
.overlay {
  /* El velo plano tapaba el mundo por completo y por eso todo parecía un
     formulario. Ahora es un viñeteado: el centro deja ver el escenario donde
     acabás de pelear y los bordes se cierran en negro. */
  background:
    radial-gradient(ellipse 78% 62% at 50% 45%, rgba(6, 10, 14, 0.55) 0%, rgba(4, 7, 10, 0.86) 58%, rgba(2, 4, 6, 0.97) 100%);
  backdrop-filter: blur(3px) saturate(0.7);
}

/* Grano y barrido horizontal. Dos pseudoelementos del propio overlay: no hay
   un solo nodo extra en el HTML ni un solo byte de imagen. */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
}
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.35) 3px, rgba(0, 0, 0, 0) 4px);
}

/* ==========================================================================
   2 · El panel: chapa con bisel, remaches y escuadras

   El borde no es `border`: con `clip-path` un borde normal se corta feo. El
   truco es una caja recortada que hace de filo y un ::before recortado igual,
   2 px adentro, que hace de chapa. Dos capas, un solo elemento.
   ========================================================================== */
.panel.mil {
  position: relative;
  /* `width`, no `max-width`: el panel es un hijo flex centrado, así que con
     solo max-width se encogía al ancho del texto (428 px medidos) y seguía
     pareciendo una tarjetita. Ahora ocupa pantalla de verdad. */
  width: min(620px, 92vw);
  max-width: none;
  padding: 44px 48px 34px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(150deg, var(--mil-edge-hi) 0%, var(--mil-edge) 22%, #39424d 50%, var(--mil-edge) 78%, #6f7b88 100%);
  clip-path: polygon(
    var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel),
    100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%,
    var(--bevel) 100%, 0 calc(100% - var(--bevel)), 0 var(--bevel));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.panel.mil > * { position: relative; z-index: 2; }

.panel.mil::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  clip-path: inherit;
  background:
    /* remaches en las cuatro esquinas */
    radial-gradient(circle 3px at 22px 22px, #7d8894 40%, rgba(0,0,0,0.55) 60%, transparent 62%),
    radial-gradient(circle 3px at calc(100% - 22px) 22px, #7d8894 40%, rgba(0,0,0,0.55) 60%, transparent 62%),
    radial-gradient(circle 3px at 22px calc(100% - 22px), #7d8894 40%, rgba(0,0,0,0.55) 60%, transparent 62%),
    radial-gradient(circle 3px at calc(100% - 22px) calc(100% - 22px), #7d8894 40%, rgba(0,0,0,0.55) 60%, transparent 62%),
    /* brillo cenital y vetas de chapa cepillada */
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(150, 170, 190, 0.16) 0%, transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    linear-gradient(160deg, var(--mil-steel-1) 0%, var(--mil-steel-2) 46%, var(--mil-steel-3) 100%);
}

/* Escuadras de las esquinas: cuatro ángulos verdes dibujados con degradados */
.panel.mil::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 2px 26px no-repeat;
  opacity: 0.55;
}

/* ==========================================================================
   3 · Emblema, título y filete
   ========================================================================== */
.mil-emblem {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(126, 231, 135, 0.35));
}
.mil-emblem svg { width: 100%; height: 100%; display: block; }

.panel.mil h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.94;
  letter-spacing: 1.5px;
  margin: 6px 0 0;
  /* Letra de metal: degradado recortado al texto, con un filo oscuro debajo
     para que no se pierda contra la chapa. */
  background: linear-gradient(180deg, #ffffff 0%, #cfd8e2 42%, #8f9aa7 62%, #e8eef4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.9));
}
.panel.mil h1 span,
.panel.mil h1 .num {
  background: linear-gradient(180deg, #d8ffdd 0%, var(--accent) 55%, #3f9a52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.panel.mil h1.dead {
  background: linear-gradient(180deg, #ffd7d7 0%, var(--danger) 55%, #7d1f1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Filete con galón al medio: separa el título del cuerpo sin meter una caja */
.mil-rule {
  position: relative;
  height: 14px;
  margin: 14px auto 16px;
  max-width: 78%;
}
.mil-rule::before {
  content: "";
  position: absolute;
  top: 4px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 231, 135, 0.55), transparent);
}
.mil-rule::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  opacity: 0.85;
}

.panel.mil .tagline,
.panel.mil .sub {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.6px;
  opacity: 0.78;
  margin-bottom: 22px;
}
.panel.mil .hint {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 4px 0 16px;
}

/* ==========================================================================
   4 · Marcadores: cifras con icono, en cajas biseladas
   ========================================================================== */
.panel.mil .results {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.panel.mil .results > div {
  position: relative;
  min-width: 132px;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, rgba(10, 16, 20, 0.92), rgba(6, 10, 13, 0.92));
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.28), inset 0 2px 14px rgba(0, 0, 0, 0.8);
  clip-path: polygon(
    var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)),
    calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
}
.panel.mil .results span {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(126, 231, 135, 0.55);
}
.panel.mil .results small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
}
.panel.mil .results .big span { font-size: 52px; }

.stat-ico {
  width: 22px;
  height: 22px;
  margin: 0 auto 6px;
  display: block;
  fill: var(--accent);
  opacity: 0.85;
}

/* ==========================================================================
   5 · Botones: placas biseladas, no píldoras
   ========================================================================== */
.panel.mil .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 0;
  padding: 13px 24px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%,
    14px 100%, 0 50%);
  transition: transform 0.12s, filter 0.15s, box-shadow 0.15s;
  /* El botón principal es una placa de metal ILUMINADA; los otros son chapa
     apagada con filo verde. La jerarquía la da la luz, no el tamaño. */
  background: linear-gradient(180deg, #1d242c 0%, #131920 100%);
  color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(126, 231, 135, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 10px rgba(126, 231, 135, 0.4);
}
.panel.mil .btn:not(.ghost) {
  background: linear-gradient(180deg, #bdf5c4 0%, var(--accent) 34%, #56b96a 72%, #2f7b41 100%);
  color: #06210c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 0 26px rgba(126, 231, 135, 0.45);
}
.panel.mil .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 2px rgba(126, 231, 135, 0.85), 0 0 30px rgba(126, 231, 135, 0.5);
}
.panel.mil .btn:not(.ghost):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 42px rgba(126, 231, 135, 0.7);
}
.panel.mil .btn:active { transform: translateY(0); filter: brightness(0.95); }
.panel.mil .btn.hidden { display: none; }

.btn-ico {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: currentColor;
  opacity: 0.9;
}

/* ==========================================================================
   6 · Pantallas chicas: el bisel se achica antes que la letra
   ========================================================================== */
@media (max-width: 720px) {
  :root { --bevel: 14px; }
  .panel.mil { padding: 44px 26px 34px; max-width: 94vw; }
  .panel.mil h1 { font-size: 46px; }
  .panel.mil .results > div { min-width: 116px; }
  .panel.mil .results span { font-size: 34px; }
  .mil-emblem { width: 54px; height: 54px; top: -27px; }
}
/* Pantallas altas: el panel respira. La base está calculada para que ENTRE en
   un portátil de 720 px de alto —que es la altura más común y donde el diseño
   se rompe— y de ahí para arriba crece. Al revés, con la base grande, el panel
   medía 758 px y se comía el borde inferior en cualquier laptop. */
@media (min-height: 880px) and (min-width: 760px) {
  .panel.mil { padding: 56px 56px 44px; }
  .panel.mil h1 { font-size: 68px; }
  .panel.mil .results span { font-size: 44px; }
  .panel.mil .results > div { min-width: 148px; padding: 16px 20px 14px; }
  .panel.mil .btn { padding: 15px 26px; font-size: 20px; margin-top: 10px; }
  .mil-emblem { width: 76px; height: 76px; top: -38px; }
}

@media (max-height: 620px) {
  .panel.mil { padding: 34px 34px 26px; }
  .panel.mil h1 { font-size: 42px; }
  .mil-rule { margin: 8px auto 10px; }
  .panel.mil .results > div { padding: 8px 14px 7px; }
  .panel.mil .results span { font-size: 32px; }
  .panel.mil .btn { padding: 11px 22px; font-size: 17px; margin-top: 7px; }
}

/* ==========================================================================
   7 · Variante en rojo (game over) y ajustes por pantalla

   El mismo panel, otro color de peligro. Se cambia con una clase, no con un
   bloque de estilos aparte: si mañana hay una pantalla de "misión fallida",
   ya está resuelta.
   ========================================================================== */
.mil-emblem.dead {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(255, 91, 91, 0.45));
}
.mil-rule.dead::before {
  background: linear-gradient(90deg, transparent, rgba(255, 91, 91, 0.55), transparent);
}
.mil-rule.dead::after { border-color: var(--danger); }

/* El game over tiene cinco marcadores: se reparten en dos filas y el de
   puntos ocupa el ancho entero, que es la cifra que importa. */
#screen-over .results { max-width: 100%; }
#screen-over .results > div { min-width: 108px; }
#screen-over .results .big { flex-basis: 100%; }
#screen-over .panel.mil::after { opacity: 0.4; }

.panel.mil .record {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--warn);
  text-shadow: 0 0 16px rgba(255, 206, 74, 0.6);
  margin: 6px 0 2px;
}

/* Paneles con lista adentro (armería, mapas, controles): pueden crecer más que
   la pantalla. Se les pone tope y barra propia — sin esto el botón de cerrar
   quedaba abajo de todo, fuera de la vista, que es la peor forma de romper una
   interfaz porque no se ve que está rota. */
.panel.mil.shop,
.panel.mil.wide,
#screen-help .panel.mil,
#screen-character .panel.mil {
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 231, 135, 0.4) transparent;
}
.panel.mil.wide { width: min(880px, 94vw); }
.panel.mil.shop { width: min(560px, 94vw); }

/* Los títulos de los paneles secundarios no necesitan el tamaño de un remate */
#screen-settings .panel.mil h1,
#screen-help .panel.mil h1,
#screen-character .panel.mil h1,
#screen-campaign-levels .panel.mil h1,
#screen-maps .panel.mil h1,
#screen-shop .panel.mil h1,
#screen-pause .panel.mil h1 { font-size: 40px; }

/* La tarjeta de mapa hereda el mismo lenguaje: bisel y filo, no esquinas
   redondeadas de formulario. */
.panel.mil .map-card {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 16, 20, 0.9), rgba(6, 10, 13, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 3px 0 0 rgba(126, 231, 135, 0.35);
  clip-path: polygon(
    var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)),
    calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
}
.panel.mil .map-card:hover {
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.5), inset 3px 0 0 var(--accent);
}
.panel.mil .mc-name { font-family: var(--font-title); font-weight: 700; font-size: 22px; letter-spacing: 1px; }
.panel.mil .mc-tag { font-family: var(--font-label); font-weight: 600; letter-spacing: 1.4px; }

/* ==========================================================================
   8 · Menú principal — la puerta de entrada

   Es la primera pantalla que se ve, así que si queda con la tipografía del
   sistema mientras el resto es metal, el juego parece dos juegos. Acá NO se
   pone el panel de chapa: el fondo del menú es una escena viva del propio
   juego y taparla con una placa sería desperdiciarla. Se le pasa el lenguaje:
   tipografía, biseles y filo verde.
   ========================================================================== */
.menu-box h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(54px, 7vw, 86px);
  letter-spacing: 3px;
  line-height: 0.95;
  background: linear-gradient(180deg, #ffffff 0%, #cfd8e2 45%, #7f8b98 62%, #eef3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95));
}
.menu-box h1 span {
  background: linear-gradient(180deg, #d8ffdd 0%, var(--accent) 55%, #3f9a52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu-box .tagline {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 1.4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.menu-box .credits {
  font-family: var(--font-label);
  letter-spacing: 0.6px;
}

.menu-item {
  border: 0;
  border-radius: 0;
  padding: 14px 20px;
  background: linear-gradient(100deg, rgba(12, 18, 22, 0.9) 0%, rgba(10, 14, 18, 0.62) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 4px 0 0 rgba(255, 255, 255, 0.18);
  clip-path: polygon(
    var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)),
    calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
}
.menu-item:hover, .menu-item:focus-visible {
  background: linear-gradient(100deg, rgba(22, 34, 26, 0.95) 0%, rgba(12, 20, 16, 0.7) 100%);
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.4), inset 4px 0 0 var(--accent);
}
.menu-item.primary {
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.35), inset 4px 0 0 var(--accent);
  background: linear-gradient(100deg, rgba(20, 40, 26, 0.92) 0%, rgba(12, 22, 16, 0.66) 100%);
}
.mi-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
}
.mi-sub {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.6px;
}

/* ==========================================================================
   9 · Pantalla PERSONAJE — el retrato del elegido
   ========================================================================== */
.char-stage {
  position: relative;
  margin: 2px auto 6px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 6 / 5;
  /* Nicho hundido en la chapa: el personaje está DENTRO del panel, no pegado
     encima. El degradado radial hace de foco de exposición. */
  background:
    radial-gradient(ellipse 62% 52% at 50% 62%, rgba(126, 231, 135, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(4, 8, 11, 0.94), rgba(8, 13, 17, 0.94));
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.22), inset 0 6px 26px rgba(0, 0, 0, 0.9);
  clip-path: polygon(
    var(--bevel-sm) 0, calc(100% - var(--bevel-sm)) 0, 100% var(--bevel-sm),
    100% calc(100% - var(--bevel-sm)), calc(100% - var(--bevel-sm)) 100%,
    var(--bevel-sm) 100%, 0 calc(100% - var(--bevel-sm)), 0 var(--bevel-sm));
}
#char-preview { width: 100%; height: 100%; display: block; }

.char-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(126, 231, 135, 0.45);
  margin-top: 2px;
}
.char-desc {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin: 2px 0 14px;
  min-height: 22px;
}

/* Las fichas de personaje: chapa con filo, no botones redondeados */
.panel.mil .avatar-card {
  border: 0;
  border-radius: 0;
  padding: 9px 14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(12, 18, 22, 0.92), rgba(7, 11, 15, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.panel.mil .avatar-card.selected {
  background: linear-gradient(180deg, rgba(24, 46, 30, 0.95), rgba(12, 24, 16, 0.95));
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px rgba(126, 231, 135, 0.3);
}