/* Combat page specific styles — keep minimal and complementary to base.css */
.hero { padding: var(--space-16) 0 var(--space-10); background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 6%, transparent), transparent 48%), var(--color-background); }
.hero-grid { align-items: center; gap: var(--space-8); }
.section { padding: var(--space-12) 0; }

/* Interactive map */
.map-grid { align-items: start; }
.map-wrap { position: relative; }
.hotspot { position: absolute; width: 28px; height: 28px; border-radius: var(--radius-1); border: 2px solid var(--gray-900); background: var(--color-warning); color: #1a1a1a; font-family: var(--font-display); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 var(--gray-900); transition: transform var(--duration-fast) var(--ease-out), background var(--duration-base) var(--ease-out); }
.hotspot:hover { background: var(--color-warning-700); transform: translateY(-1px); }
.hotspot:active { transform: translateY(1px); box-shadow: 0 0 0 var(--gray-900); }
.hotspot[aria-pressed="true"] { outline: 2px dashed var(--focus-color); outline-offset: 2px; }

/* Details spacing */
#bosses details { padding: var(--space-3) 0; }

/* Small helpers */
#events-list li[hidden] { display: none !important; }

@media (max-width: 720px) {
  .hero { padding-top: var(--space-12); }
}