/* ======================================================================
 * GIVCTF — Huevos de Pascua (panel de administración)
 *
 * Fichero propio a propósito: `givctf-overrides.css` y `givctf-missions.css`
 * los está tocando otro trabajo en paralelo, y esta pantalla no necesita nada
 * de allí salvo las variables del theme.
 *
 * Densidad alta y filas de una línea, como el resto de paneles del CLASSIC.
 * Los tipos van en vertical y cada uno crece hacia abajo.
 * ====================================================================== */

.givctf-eggs { padding-top: 0.9rem; }

/* Pestañas: Configuración / Seguimiento. */
.givctf-eggs-tabs { display: flex; gap: 0.3rem; }
.givctf-eggs-tabs button {
  padding: 0.35rem 0.9rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.givctf-eggs-tabs button:hover { color: var(--text-primary); }
.givctf-eggs-tabs button.is-activa {
  color: var(--accent-cyan);
  border-color: rgba(0, 217, 255, 0.5);
  background: rgba(0, 217, 255, 0.08);
}

/* ------------------------------------------------------------ un tipo ---- */
.givctf-eggs-tipo { margin-bottom: 1.1rem; }
.givctf-eggs-tipo-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}
.givctf-eggs-tipo-head h2 {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.givctf-eggs-cuenta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 0 0.35rem;
}
.givctf-eggs-tipo-head button { margin-left: auto; }

/* El color es solo ACENTO del título y del borde izquierdo de sus filas: nada
   de fondos grandes de color, que convierten un panel en un semáforo. */
.givctf-eggs-tipo-head.is-resta   h2 { color: var(--accent-red); }
.givctf-eggs-tipo-head.is-robo    h2 { color: var(--accent-lime, #b7f52a); }
.givctf-eggs-tipo-head.is-bloqueo h2 { color: var(--accent-amber); }
.givctf-eggs-tipo-head.is-contra  h2 { color: #c07cff; }
.givctf-eggs-tipo[data-tipo="subtract"]     .givctf-eggs-fila { border-left: 2px solid rgba(255, 51, 102, 0.5); }
.givctf-eggs-tipo[data-tipo="steal"]        .givctf-eggs-fila { border-left: 2px solid rgba(183, 245, 42, 0.5); }
.givctf-eggs-tipo[data-tipo="block"]        .givctf-eggs-fila { border-left: 2px solid rgba(255, 184, 0, 0.5); }
.givctf-eggs-tipo[data-tipo="counterintel"] .givctf-eggs-fila { border-left: 2px solid rgba(192, 124, 255, 0.5); }

/* ----------------------------------------------------------- una fila ---- */
.givctf-eggs-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
}
.givctf-eggs-fila:hover { border-color: #2c3a49; }
.givctf-eggs-id {
  flex: 0 0 2rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.givctf-eggs-modo {
  flex: 0 0 5.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.givctf-eggs-origen {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent-cyan);
}
.givctf-eggs-valor {
  flex: 0 0 6rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--accent-amber);
}
.givctf-eggs-owner {
  flex: 0 1 9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.givctf-eggs-cuando {
  flex: 0 0 3rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.givctf-eggs-estado {
  flex: 0 0 auto;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.givctf-eggs-estado[data-estado="available"] { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.35); }
.givctf-eggs-estado[data-estado="armed"]     { color: var(--accent-cyan);  border-color: rgba(0, 217, 255, 0.35); }
.givctf-eggs-estado[data-estado="reserved"]  { color: var(--accent-amber); border-color: rgba(255, 184, 0, 0.35); }
.givctf-eggs-estado[data-estado="used"]      { color: #7c8894; }
.givctf-eggs-estado[data-estado="cancelled"],
.givctf-eggs-estado[data-estado="inactive"]  { color: #55636f; border-style: dashed; }
.givctf-eggs-acciones { display: flex; gap: 0.25rem; margin-left: auto; }
.givctf-eggs-extra {
  flex: 1 1 100%;
  font-size: 0.7rem;
  color: #c07cff;
}

/* ------------------------------------------------- formulario inline ----- */
/* Se despliega justo debajo de su fila, en una o dos líneas. Ni modal ni
   página nueva: la configuración se ve en el sitio donde vive. */
.givctf-eggs-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(0, 217, 255, 0.4);
  background: rgba(0, 217, 255, 0.04);
  font-size: 0.74rem;
}
.givctf-eggs-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.givctf-eggs-form select,
.givctf-eggs-form input[type="text"] {
  padding: 0.2rem 0.4rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  text-transform: none;
}
.givctf-eggs-form select:focus,
.givctf-eggs-form input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}
.givctf-eggs-form span[hidden] { display: none; }
.givctf-eggs-form-acciones { display: flex; gap: 0.3rem; margin-left: auto; }
.givctf-eggs-nota { color: #c07cff; font-size: 0.7rem; }
.givctf-eggs-vacio {
  margin: 0 0 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.74rem;
  color: #55636f;
  font-style: italic;
}

/* ----------------------------------------------------------- filtros ----- */
.givctf-eggs-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.givctf-eggs-filtros button {
  padding: 0.2rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.givctf-eggs-filtros button.is-activa {
  color: var(--accent-cyan);
  border-color: rgba(0, 217, 255, 0.5);
}
.givctf-eggs-filtros select {
  padding: 0.2rem 0.4rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.65rem;
}

/* --------------------------------------------------------- responsive ---- */
/* En pantalla estrecha la fila se parte en varias líneas en vez de provocar
   scroll horizontal. */
@media (max-width: 900px) {
  .givctf-eggs-origen { flex: 1 1 100%; }
  .givctf-eggs-owner  { flex: 0 1 7rem; }
  .givctf-eggs-acciones { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .givctf-eggs-fila { font-size: 0.72rem; }
  .givctf-eggs-modo, .givctf-eggs-valor { flex: 0 0 auto; }
  .givctf-eggs-form label { flex: 1 1 100%; }
  .givctf-eggs-form-acciones { margin-left: 0; }
}

/* ======================================================================
 * Inventario del participante (flotante)
 *
 * Discreto y fuera del flujo: no ocupa hueco en ninguna plantilla y está a
 * mano desde cualquier pantalla. Si el participante no tiene huevos ni está
 * bloqueado, su contenedor va `hidden` y no se ve absolutamente nada.
 * ====================================================================== */

#givctf-eggs-widget {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
}
#givctf-eggs-widget[hidden] { display: none; }

#givctf-eggs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid rgba(0, 217, 255, 0.5);
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
#givctf-eggs-toggle:hover { background: rgba(0, 217, 255, 0.12); }

#givctf-eggs-panel {
  width: 22rem;
  max-width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.7rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
#givctf-eggs-panel h3 {
  margin: 0 0 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.givctf-eggs-item {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
}
.givctf-eggs-item:first-of-type { border-top: 0; }
.givctf-eggs-item strong { color: var(--text-primary); }
.givctf-eggs-usar { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.givctf-eggs-usar select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.35rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.74rem;
}
#givctf-eggs-panel button {
  padding: 0.2rem 0.55rem;
  background: transparent;
  border: 1px solid rgba(0, 217, 255, 0.5);
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
#givctf-eggs-panel button:hover { background: rgba(0, 217, 255, 0.15); }
.givctf-eggs-sin { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--text-secondary); }
.givctf-eggs-agresion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(192, 124, 255, 0.4);
  background: rgba(192, 124, 255, 0.06);
  font-size: 0.74rem;
}
.givctf-eggs-agresion button { margin-left: auto; border-color: rgba(192, 124, 255, 0.6); color: #c07cff; }

/* Aviso de bloqueo. Rojo y con el reloj a la vista: el afectado tiene que
   entender por qué no puede responder y cuánto le queda. */
#givctf-eggs-bloqueo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--accent-red);
  border-left: 3px solid var(--accent-red);
  background: rgba(255, 51, 102, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-size: 0.78rem;
}
#givctf-eggs-bloqueo[hidden] { display: none; }
#givctf-eggs-bloqueo strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red);
}
.givctf-eggs-reloj {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
}

/* El tope permitido, al lado del campo. Sale del servidor (`limits` de la API),
   no de un número escrito en el JS: así el panel no puede prometer un máximo
   distinto del que la API acepta. */
.givctf-eggs-tope {
  margin-left: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: #55636f;
  text-transform: none;
}

/* ======================================================================
 * TARJETA DE HUEVO (components/easter_egg_card.html)
 *
 * Un solo componente para admin_preview, participant y used_history. El
 * fondo PNG (1576×998, el huevo a la izquierda y la zona libre a la
 * derecha) es identidad y color; todo lo que se lee es HTML en la columna
 * derecha. Rejilla de dos columnas —arte | interfaz—, nada posicionado por
 * coordenadas: si cambia el texto o el ancho, la interfaz se reacomoda.
 * Cada tipo pone su imagen y su color de acento (el del propio fondo):
 *   subtract → egg-points-subtract.png (cian)   block → egg-block.png (ámbar)
 *   steal    → egg-points-steal.png (rojo)      counterintel → egg-counterintel.png (violeta)
 * Las imágenes solo se descargan donde hay una tarjeta pintada.
 * ====================================================================== */

.givctf-egg-card {
  --egg-color: var(--accent-cyan);
  --egg-rgb: 0, 217, 255;
  position: relative;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  /* La altura la marca el contenido de la derecha (mínimo 13 rem): así los
     controles nunca se recortan aunque el ancho baje. El fondo se ajusta con
     `cover` anclado a la izquierda, y el huevo queda siempre entero. */
  min-height: 10.5rem;
  overflow: hidden;
  background: #060d15 var(--egg-bg) left center / cover no-repeat;
  border: 1px solid rgba(var(--egg-rgb), 0.35);
  color: var(--text-primary);
  font-family: 'Rajdhani', system-ui, sans-serif;
}
/* OJO CON LOS DOS PRIMEROS: los ficheros están cruzados respecto a su nombre.
   `egg-points-subtract.png` es el huevo CIAN con las flechas de intercambio
   (lenguaje de TRANSFERENCIA, es decir, robo) y `egg-points-steal.png` es el
   huevo ROJO con la calavera (lenguaje de DAÑO, es decir, resta). El mapping
   canónico es por COLOR y significado —resta roja, robo cian—, y los PNG no se
   pueden editar ni renombrar, así que cada tipo apunta al fichero cuyo ARTE le
   corresponde, no al que lleva su nombre. Si algún día se renombran los
   ficheros, estas dos líneas se cruzan de vuelta. */
.givctf-egg-card.is-subtract     { --egg-color: #ff4d5e; --egg-rgb: 255, 77, 94;   --egg-bg: url("/themes/givctf/static/img/easter-eggs/egg-points-steal.png"); }
.givctf-egg-card.is-steal        { --egg-color: #2fd8ff; --egg-rgb: 47, 216, 255;  --egg-bg: url("/themes/givctf/static/img/easter-eggs/egg-points-subtract.png"); }
.givctf-egg-card.is-block        { --egg-color: #ffc93c; --egg-rgb: 255, 201, 60;  --egg-bg: url("/themes/givctf/static/img/easter-eggs/egg-block.png"); }
.givctf-egg-card.is-counterintel { --egg-color: #c07cff; --egg-rgb: 192, 124, 255; --egg-bg: url("/themes/givctf/static/img/easter-eggs/egg-counterintel.png"); }

.givctf-egg-art { min-width: 0; }
/* La interfaz va sobre un velo oscuro que empieza donde acaba el huevo, para
   que el texto se lea sin tapar el arte. */
.givctf-egg-ui {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.55rem 0.75rem 0.55rem 0.35rem;
  background: linear-gradient(90deg, rgba(6, 13, 21, 0) 0%, rgba(6, 13, 21, 0.72) 14%, rgba(6, 13, 21, 0.82) 100%);
}
.givctf-egg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}
.givctf-egg-state,
.givctf-egg-preview-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.givctf-egg-state {
  color: var(--egg-color);
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(var(--egg-rgb), 0.5);
  background: rgba(var(--egg-rgb), 0.08);
}
.givctf-egg-card.is-used_history .givctf-egg-state { color: #7c8894; border-color: #2c3a49; background: none; }
.givctf-egg-preview-tag {
  color: #93a2b0;
  padding: 0.12rem 0.4rem;
  border: 1px dashed #3a4856;
}
.givctf-egg-title {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f2f5f8;
  text-shadow: 0 0 12px rgba(var(--egg-rgb), 0.35);
}
.givctf-egg-effect {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: #d3dde6;
}
.givctf-egg-effect strong { color: var(--egg-color); font-weight: 700; }

/* Campo (etiqueta + select): fondo oscuro, borde fino, flecha propia. */
.givctf-egg-field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.05rem 0 0;
  min-width: 0;
}
.givctf-egg-field > span,
.givctf-egg-retaliation > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93a2b0;
}
.givctf-egg-select {
  width: 100%;
  min-width: 0;
  padding: 0.22rem 1.5rem 0.22rem 0.45rem;
  background: rgba(6, 13, 21, 0.75) !important;
  border: 1px solid rgba(var(--egg-rgb), 0.35) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  font-size: 0.8rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--egg-color) 50%), linear-gradient(135deg, var(--egg-color) 50%, transparent 50%) !important;
  background-position: calc(100% - 0.95rem) 55%, calc(100% - 0.65rem) 55% !important;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
.givctf-egg-select:focus {
  outline: none;
  border-color: var(--egg-color) !important;
  box-shadow: 0 0 0 1px rgba(var(--egg-rgb), 0.35) !important;
}
.givctf-egg-select:disabled { cursor: default; opacity: 0.85; }
.givctf-egg-retaliation {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
}
.givctf-egg-retaliation strong { color: var(--egg-color); }
.givctf-egg-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.3rem 0.75rem;
  background: rgba(var(--egg-rgb), 0.12);
  border: 1px solid rgba(var(--egg-rgb), 0.7);
  color: var(--egg-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.givctf-egg-btn:hover:not(:disabled) { background: rgba(var(--egg-rgb), 0.28); }
.givctf-egg-btn:disabled { cursor: default; opacity: 0.55; }
/* Confirmación dentro de la tarjeta (§41). Sustituye al diálogo del
   navegador: se superpone a la zona de controles del propio panel derecho,
   nunca a la página entera, y hereda el color del tipo de huevo. */
.givctf-egg-btn.is-ghost {
  background: transparent;
  border-color: rgba(147, 162, 176, 0.5);
  color: #93a2b0;
}
.givctf-egg-btn.is-ghost:hover:not(:disabled) { background: rgba(147, 162, 176, 0.16); }

.givctf-egg-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: rgba(8, 12, 17, 0.94);
  border-left: 2px solid var(--egg-color);
}
.givctf-egg-confirm p {
  margin: 0;
  color: #d3dde6;
  font-size: 0.84rem;
  line-height: 1.35;
}
.givctf-egg-confirm-acciones { display: flex; gap: 0.45rem; }
.givctf-egg-confirm-acciones .givctf-egg-btn { align-self: auto; margin-top: 0; }

/* La interfaz es el ancla de la confirmación: se tapa el panel derecho y el
   arte de la izquierda se sigue viendo, así no se pierde de vista qué huevo
   se está usando. */
.givctf-egg-ui { position: relative; }

/* used_history: sin controles, resultado en dos líneas. */
.givctf-egg-result { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; margin: 0.2rem 0 0; font-size: 0.86rem; }
.givctf-egg-result dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: #93a2b0; align-self: baseline; }
.givctf-egg-result dd { margin: 0; color: #d3dde6; }
/* USADO: la misma tarjeta, apagada. Menos brillo y saturación, opacidad
   contenida para que el resumen siga leyéndose, borde neutro, sin halo, y
   una etiqueta USADO maciza que se distingue de un vistazo de las
   disponibles. No hay controles en este modo (los quita la plantilla). */
.givctf-egg-card.is-used_history {
  opacity: 0.68;
  filter: grayscale(0.6) saturate(0.5);
  border-color: #2c3a49;
  box-shadow: none;
}
.givctf-egg-card.is-used_history .givctf-egg-state {
  color: #060d15;
  background: #93a2b0;
  border-color: #93a2b0;
  font-weight: 700;
}
.givctf-egg-card.is-used_history .givctf-egg-title { color: #c7d0d8; text-shadow: none; }
.givctf-egg-card.is-used_history .givctf-egg-effect { color: #93a2b0; }
.givctf-egg-card.is-used_history .givctf-egg-effect strong { color: #c7d0d8; }
.givctf-egg-card.is-used_history .givctf-egg-result {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.55rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(147, 162, 176, 0.25);
}
.givctf-egg-card.is-used_history .givctf-egg-result dd { color: #dfe6ec; font-weight: 600; }

/* Estrecha: el arte se queda en una franja y la interfaz ocupa el resto. */
/* Cuatro columnas en 1366-1500: la interfaz se compacta un punto. */
@media (max-width: 1500px) {
  .givctf-egg-card { grid-template-columns: 35% minmax(0, 1fr); }
  .givctf-egg-ui { padding: 0.5rem 0.6rem 0.5rem 0.3rem; gap: 0.22rem; }
  .givctf-egg-title { font-size: 0.72rem; }
  .givctf-egg-effect, .givctf-egg-select, .givctf-egg-retaliation { font-size: 0.76rem; }
}
@media (max-width: 575.98px) {
  .givctf-egg-card { grid-template-columns: 32% minmax(0, 1fr); background-position: -6% center; }
}

/* ======================================================================
 * PANEL: vista previa arriba, configuración debajo
 * ====================================================================== */
.givctf-eggs-preview { margin: 0.2rem 0 1rem; }
.givctf-eggs-preview-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin: 0 0 0.45rem;
}
.givctf-eggs-preview-label span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.givctf-eggs-preview-label em { font-style: normal; font-size: 0.78rem; color: var(--text-secondary); }
.givctf-eggs-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
/* Separación clara: lo de arriba es cómo se ve; lo de abajo, cómo se configura. */
.givctf-eggs-config-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin: 0 0 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
}
.givctf-eggs-config-head h2 {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.givctf-eggs-config-head span { font-size: 0.78rem; color: var(--text-secondary); }
/* Los colores de la configuración son los de los fondos de cada tipo. */
.givctf-eggs-tipo-head.is-resta h2 { color: #2fd8ff; }
.givctf-eggs-tipo-head.is-robo  h2 { color: #ff4d5e; }
.givctf-eggs-tipo[data-tipo="subtract"] .givctf-eggs-fila { border-left-color: rgba(47, 216, 255, 0.5); }
.givctf-eggs-tipo[data-tipo="steal"]    .givctf-eggs-fila { border-left-color: rgba(255, 77, 94, 0.5); }

@media (max-width: 1365.98px) {
  .givctf-eggs-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .givctf-eggs-preview-grid { grid-template-columns: minmax(0, 1fr); }
}