/* ===== Phase 8 — CombatHeaderControls cluster ===== */
/* Top-right cluster sitting alongside the existing turn badge.        */

.combat-header-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    padding: 4px 6px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.combat-header-control {
    color: var(--color-text-secondary, #cbd5e1) !important;
    transition: color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

.combat-header-control:hover {
    color: var(--color-warning-bright, #fbbf24) !important;
    background-color: rgba(251, 191, 36, 0.1);
    transform: translateY(-1px);
}

.combat-header-control:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.55);
    outline-offset: 2px;
}

/* Undo button — tertiary tint with a soft pulse to signal "still possible". */
.combat-header-control--undo {
    color: #93c5fd !important;
    animation: undoPulse 2.4s ease-in-out infinite;
}

.combat-header-control--undo:hover {
    color: #bfdbfe !important;
    background-color: rgba(147, 197, 253, 0.12);
}

@keyframes undoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(147, 197, 253, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.15); }
}

/* Mobile/Tablet shrink: tighten the gap and remove the side margin so the cluster
   doesn't push the turn badge off-screen. */
@media (max-width: 1023px) {
    .combat-header-controls {
        gap: 2px;
        padding: 3px 4px;
        margin-left: 6px;
    }
}

/* Phone breakpoint (~360-480px): 8 controls is too crowded. Hide the secondary
   accessibility / utility toggles — they're still reachable via the Settings
   drawer (cog) which routes to the combat-log drawer where these settings live.
   Visible on phones: animation speed, sound mute, settings, help, undo (when active).
   Hidden: threat overlay, font scale, colorblind palette. */
@media (max-width: 480px) {
    .combat-header-controls {
        gap: 0;
        padding: 2px 3px;
        margin-left: 4px;
    }

    .combat-header-controls .combat-header-control--secondary {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-header-control,
    .combat-header-control--undo {
        transition: none;
        animation: none;
    }
    .combat-header-control:hover {
        transform: none;
    }
}