/* ==========================================================================
   Robot Wars Aesthetics
   ========================================================================== */

.portal-card--robotwars {
  background: var(--robotwars-bg);
  border-color: var(--robotwars-glow);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.portal-card--robotwars:hover {
  border-color: var(--robotwars-secondary);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.9), 
    inset 0 0 30px rgba(184, 115, 51, 0.15);
}

.portal-title--robotwars {
  font-family: var(--font-robotwars);
  color: var(--robotwars-primary);
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 15px var(--robotwars-glow);
}

/* Steampunk/Mechanicus styling for the button */
.portal-btn--robotwars {
  font-family: var(--font-robotwars);
  color: var(--robotwars-secondary);
  border-color: var(--robotwars-secondary);
  background-color: rgba(184, 115, 51, 0.05);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm); /* More angular/industrial than pill */
}

.portal-btn--robotwars:hover,
.portal-btn--robotwars:focus-visible {
  background-color: rgba(184, 115, 51, 0.15);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 15px var(--robotwars-glow-intense);
  color: var(--robotwars-primary);
  text-shadow: 0 0 8px var(--robotwars-primary);
}

/* Early Development Badge (Industrial Style) */
.portal-badge--earlydev {
  display: inline-block;
  padding: 0.35rem 1.15rem;
  font-family: var(--font-robotwars);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--robotwars-secondary);
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed var(--robotwars-secondary);
  border-radius: var(--border-radius-sm);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}