/* Combat Shared Styles - High Fantasy Theme */
/* This file is now deprecated - use components-combat.css from the design system */
/* Kept for backward compatibility but will be removed in future version */

@import url('components-combat.css');

/* ========================================
   MULTIPLAYER SPECIFIC (not yet in design system)
   ======================================== */

.multiplayer-lobby {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.lobby-header {
    background: rgba(255, 215, 0, 0.15);
    padding: var(--space-xl) var(--space-2xl);
    border-bottom: 1px solid var(--color-border-base);
}

.lobby-title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.lobby-code {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.lobby-code-value {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.2em;
}

.player-list {
    padding: var(--space-lg);
}

.player-slot {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-base);
}

.player-slot:hover {
    border-color: var(--color-border-hover);
}

.player-slot.host {
    border-left: 3px solid var(--color-primary);
}

.player-slot.ready {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.player-slot-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.player-slot-name {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.player-slot-class {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.connection-dot.connected {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.connection-dot.disconnected {
    background: var(--color-danger);
}

.ready-badge {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.host-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #0f172a;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* ========================================
   ADVENTURE SELECTION
   ======================================== */

.adventure-card {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-slow);
}

.adventure-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-active);
    box-shadow: var(--shadow-lg), var(--shadow-gold);
}

.adventure-card-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.adventure-card-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.adventure-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* ========================================
   MULTIPLAYER TABS
   ======================================== */

.multiplayer-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.multiplayer-tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-secondary);
}

.multiplayer-tab:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

.multiplayer-tab.active {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--color-border-active);
    color: var(--color-primary);
}

/* ========================================
   JOIN BY CODE
   ======================================== */

.join-code-container {
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
}

.join-code-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

/* ========================================
   CLASS FEATURE BUTTONS
   ======================================== */

.class-feature-btn {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
}

.barbarian-rage-btn {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    animation: rage-pulse 2s ease-in-out infinite;
}

.barbarian-rage-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

.rage-active-alert {
    animation: rage-glow 1.5s ease-in-out infinite;
    font-weight: var(--font-weight-semibold);
}

@keyframes rage-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
    }
}

@keyframes rage-glow {
    0%, 100% {
        border-color: rgba(220, 38, 38, 0.4);
        background: rgba(220, 38, 38, 0.1);
    }
    50% {
        border-color: rgba(220, 38, 38, 0.8);
        background: rgba(220, 38, 38, 0.15);
    }
}

/* =====================================================================
   Phase 2-3: Enemy Intent Badges + Hex Hover Popover + Threat Overlay
   ===================================================================== */

.enemy-intent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 1px solid currentColor;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    user-select: none;
    transition: transform 120ms ease;
}

.enemy-intent-badge:hover {
    transform: scale(1.06);
}

.enemy-intent-badge .material-icons {
    font-size: 12px;
    line-height: 1;
}

.enemy-intent-badge .intent-label {
    line-height: 1;
}

/* Per-kind colors mirror the in-engine MonsterIntentKind enum */
.enemy-intent-badge.intent-attack { color: #fca5a5; border-color: rgba(220, 38, 38, 0.6); }
.enemy-intent-badge.intent-spell  { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.6); }
.enemy-intent-badge.intent-heal   { color: #86efac; border-color: rgba(34, 197, 94, 0.6); }
.enemy-intent-badge.intent-buff   { color: #93c5fd; border-color: rgba(59, 130, 246, 0.6); }
.enemy-intent-badge.intent-move   { color: #fde68a; border-color: rgba(245, 158, 11, 0.5); }
.enemy-intent-badge.intent-defend { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.5); }

.roster-enemy-intent {
    margin-top: 4px;
    display: flex;
    justify-content: center;
}

/* --- Hex Hover Popover (Phase 2) --- */

.hex-hover-popover {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    min-width: 180px;
    max-width: 260px;
    padding: 8px 10px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.35;
    z-index: 50;
    pointer-events: none;
    animation: popover-fade-in 100ms ease-out;
}

.hex-hover-popover.popover-enemy {
    border-color: rgba(248, 113, 113, 0.4);
}

@keyframes popover-fade-in {
    from { opacity: 0; transform: translate(-50%, calc(-100% - 18px)); }
    to   { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); }
}

.hex-hover-popover .popover-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #ffd700;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    padding-bottom: 4px;
}

.hex-hover-popover .popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}

.hex-hover-popover .popover-row .material-icons {
    font-size: 14px;
    color: #94a3b8;
}

.hex-hover-popover .popover-tag {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 0.65rem;
    border-radius: 8px;
    border: 1px solid currentColor;
}

.hex-hover-popover .popover-tag.tag-free  { color: #93c5fd; }
.hex-hover-popover .popover-tag.tag-warn  { color: var(--color-warning-bright); }
.hex-hover-popover .popover-tag.tag-crit  { color: #fde68a; }
.hex-hover-popover .popover-tag.tag-kill  { color: #fca5a5; background: rgba(220, 38, 38, 0.15); }
.hex-hover-popover .popover-tag.tag-kill-maybe { color: var(--color-warning-bright); }

.hex-hover-popover .popover-prediction {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.hex-hover-popover .popover-threat {
    color: #fca5a5;
}

.hex-hover-popover .popover-threat .material-icons {
    color: #fca5a5;
}

/* --- Threat Overlay (Phase 2) --- */

.hex-threatened {
    fill: rgba(220, 38, 38, 0.12);
    stroke: rgba(220, 38, 38, 0.35);
    stroke-width: 1;
    pointer-events: none;
}

/* =====================================================================
   Phase 3 (redesigned, Option A): enemy intent badge as a speech bubble
   stacked ABOVE the existing status-pip rack. Final on-screen hierarchy
   per enemy token (top → bottom):

     ╭ ⚔ 6-9 ╮          ← .token-intent-badge (speech bubble + tail)
     ╰───┬───╯
         ▼
     [🛡][🔥]              ← .token-hud-status-rack (existing, untouched)
     ┌───────┐
     │ card  │             ← .token-card
     ├───────┤
     │ HP    │             ← .token-hud-hp
     └───────┘

   The .hex-token-anchor parent uses transform-style: preserve-3d for the
   card's rotateX(-42deg) tilt. That means z-index alone is not enough to
   lift this badge over the tilted card — we need translateZ to physically
   push it forward in 3D space, plus transform-style: flat so the badge
   itself stays un-skewed by the parent's perspective.
   ===================================================================== */

.token-intent-badge {
    position: absolute;
    bottom: 28px;                                         /* sits just above the card's top edge */
    left: 50%;
    /* Counter-rotate against the board tilt (var sourced from .board-token-layer)
       so the badge faces the camera. rotateX(0deg) was identity — no effect — and
       left the badge skewed with the inherited 3D projection. */
    transform: translateX(-50%) rotateX(var(--board-counter-tilt, -42deg)) translateZ(40px);
    transform-style: flat;
    backface-visibility: visible;
    z-index: 100;
    pointer-events: auto;
    white-space: nowrap;
    animation: token-intent-fade-in 200ms ease-out;
}

/* Bosses have a taller card — push the bubble further up to clear the bigger art. */
.boss-token-anchor .token-intent-badge {
    bottom: 70px;
}

/* Status pip rack (Fortify, Burning, etc.) — moved to the RIGHT side of the
   card and stacked vertically top-down. Lives as a flat sibling of .token-card
   (NOT inside the rotated .token-hud) so it doesn't inherit the 42° card tilt.
   Position is anchored to the right edge of the card region (~21px from anchor
   center for a 42px-wide card). */
.token-side-status-rack {
    position: absolute;
    bottom: 6px;                                          /* aligns with bottom of card */
    left: calc(50% + 26px);                               /* just outside the card's right edge */
    /* Counter-rotate against the board tilt (var sourced from .board-token-layer)
       so the pip icons face the camera. rotateX(0deg) was identity — left the
       icons skewed with the inherited preserve-3d projection. */
    transform: rotateX(var(--board-counter-tilt, -42deg)) translateZ(45px);
    transform-style: flat;
    backface-visibility: visible;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: auto;
    z-index: 60;
    max-height: 80px;                                     /* cap so very long buff lists don't overflow */
}

/* Bosses are larger — push the rack further out from the wider card. */
.boss-token-anchor .token-side-status-rack {
    left: calc(50% + 42px);
    bottom: 10px;
}

/* Speech bubble tail — rendered as a small triangle pointing down at the
   monster, drawn with an inset border trick so it picks up the badge's
   kind-tinted border color via currentColor. */
.token-intent-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(15, 23, 42, 0.92);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

@keyframes token-intent-fade-in {
    from { opacity: 0; transform: translate(-50%, 12px) rotateX(var(--board-counter-tilt, -42deg)) translateZ(40px); }
    to   { opacity: 1; transform: translate(-50%, 0)    rotateX(var(--board-counter-tilt, -42deg)) translateZ(40px); }
}

/* Compact variant of the intent badge — used on space-constrained surfaces
   (hex token overlay, roster cards). Removes the English action label and
   shows just the icon + damage range. */
.enemy-intent-badge.compact {
    padding: 3px 7px;
    font-size: 0.72rem;
    gap: 5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.enemy-intent-badge.compact .material-icons {
    font-size: 14px;
}

.enemy-intent-badge .intent-damage {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}

/* Mobile monster strip intent slot */
.mms-intent {
    margin-top: 4px;
    display: flex;
    align-items: center;
}

/* =====================================================================
   Phase 4: Action Economy Pips + AC Breakdown + Incoming Damage Preview
   ===================================================================== */

.action-economy-pips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.ae-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid;
    transition: opacity 150ms ease, transform 150ms ease;
}

.ae-pip .material-icons {
    font-size: 12px;
    line-height: 1;
}

.ae-pip.spent {
    opacity: 0.28;
    filter: grayscale(0.6);
}

.ae-pip-main.available    { color: #fde68a; border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.18); }
.ae-pip-bonus.available   { color: #93c5fd; border-color: rgba(59, 130, 246, 0.7); background: rgba(59, 130, 246, 0.18); }
.ae-pip-reaction.available { color: #86efac; border-color: rgba(34, 197, 94, 0.7); background: rgba(34, 197, 94, 0.18); }

.ae-pip-main.spent    { border-color: rgba(245, 158, 11, 0.35); }
.ae-pip-bonus.spent   { border-color: rgba(59, 130, 246, 0.35); }
.ae-pip-reaction.spent { border-color: rgba(34, 197, 94, 0.35); }

/* HP bar incoming-damage preview overlay (Phase 4): translucent red sliver
   on the right edge of the HP bar = sum of monster intents targeting this player. */
.stat-bar-incoming-preview {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: repeating-linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.45),
        rgba(239, 68, 68, 0.45) 4px,
        rgba(239, 68, 68, 0.25) 4px,
        rgba(239, 68, 68, 0.25) 8px
    );
    pointer-events: none;
    transition: width 0.35s ease;
    border-left: 1px dashed rgba(255, 255, 255, 0.45);
}

/* Mana cost ticks (Phase 4): small notches along the mana bar at each
   prepared spell's cost so the player sees "I can cast Magic Missile 3 times." */
.stat-bar-cost-tick {
    position: absolute;
    top: -2px;
    width: 1px;
    height: calc(100% + 4px);
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* HP "incoming" tag in the HP bar label */
.hp-incoming-tag {
    margin-left: 6px;
    font-size: 0.65rem;
    color: #fca5a5;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* AC breakdown popover (Phase 4): triggered by hovering the AC value chip. */
.ac-breakdown-popover {
    min-width: 200px;
    padding: 10px 12px;
}

.ac-breakdown-popover .ac-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #cbd5e1;
    margin: 2px 0;
}

.ac-breakdown-popover .ac-line.ac-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 215, 0, 0.25);
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-weight: 600;
}


/* ==========================================================================
   Phase 5: Action Bar — AbilityCard / SpellCard / ActionBar styles.
   ========================================================================== */

.action-bar-row {
    margin-top: 8px;
}

.ability-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

/* Override legacy CombatActionsPanel.razor.css grid stretch.
   The pre-Phase 5 styles use `display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr))`
   on `.combat-actions-panel.desktop .basic-actions .action-buttons`, which forces each child to fill
   one fr-sized cell — blowing the new ability cards up to ~240px wide and stretching them vertically.
   Phase 5 cards are intentionally fixed-width (92px) and content-height; restore that with a
   higher-specificity flex override. Same applies to the spell row. */
.combat-actions-panel .action-section .action-buttons.ability-card-row,
.combat-actions-panel .action-section .action-buttons.spell-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    grid-template-columns: none;
}

/* Belt + suspenders: even if a future selector wins on display, the cards
   themselves should not stretch. */
.combat-actions-panel .ability-card,
.combat-actions-panel .spell-card-mini {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* IMPORTANT: All combat .ability-card rules are scoped to .ability-card-row to
   beat class-pages.css which has its own unrelated `.ability-card` class for
   character class info pages (background, padding-xl, border-left 4px,
   margin-bottom, text-align: left). class-pages.css loads AFTER combat-shared.css
   in App.razor so it would otherwise win the cascade by source order.
   Specificity 0,2,0 (.ability-card-row + .ability-card) beats 0,1,0 regardless
   of source order. */
.ability-card-row .ability-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 64px !important;                              /* Phase 11: tight desktop tile, !important wins ties with combat-{wide,responsive}.css */
    min-height: 56px !important;
    padding: 2px 2px 2px !important;
    margin: 0;                                           /* override class-pages margin-bottom */
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.20);
    border-left: 1px solid rgba(255, 215, 0, 0.20);      /* override class-pages border-left: 4px solid info */
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: center;                                  /* override class-pages text-align: left */
    overflow: hidden;
}

/* Phase 11: desktop trim drops the brief-effect text row. The full description
   lives in the rich hover popup; mobile/tablet keep the inline effect text since
   thumb targets need the larger card anyway. */
.ability-card-row .ability-card .ability-card-effect { display: none !important; }

.ability-card:hover:not(.disabled) {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 215, 0, 0.3);
}

.ability-card.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.45);
}

.ability-card.primed-combo {
    border-color: rgba(250, 204, 21, 0.85);
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35), 0 0 14px rgba(250, 204, 21, 0.45);
    animation: ability-combo-pulse 1.6s ease-in-out infinite;
}

@keyframes ability-combo-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35), 0 0 14px rgba(250, 204, 21, 0.45); }
    50%      { box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.6),  0 0 22px rgba(250, 204, 21, 0.7); }
}

/* Phase 11: pending-target pulse — appears on the source card when the player
   has clicked a spell/ability that needs a board click to resolve. */
.ability-card.pending-target,
.spell-card-mini.pending-target {
    border-color: rgba(56, 189, 248, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55), 0 0 18px rgba(56, 189, 248, 0.65) !important;
    animation: pending-target-pulse 1.2s ease-in-out infinite;
}

@keyframes pending-target-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55), 0 0 18px rgba(56, 189, 248, 0.65); }
    50%      { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85), 0 0 26px rgba(56, 189, 248, 0.9);  }
}

/* When a pending-target flow is active, the cursor on the board surface
   becomes a crosshair so the next click reads as "select target." */
body.combat-pending-target,
body.combat-pending-target .zone-battlefield-hex,
body.combat-pending-target .zone-battlefield-hex * {
    cursor: crosshair !important;
}

.ability-card-action-tag {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 3px;
    color: #0f172a;
    background: rgba(255, 215, 0, 0.85);
}

.ability-card-action-tag.tag-main     { background: rgba(248, 113, 113, 0.85); color: #fff; }
.ability-card-action-tag.tag-bonus    { background: rgba(96, 165, 250, 0.85);  color: #0f172a; }
.ability-card-action-tag.tag-reaction { background: rgba(74, 222, 128, 0.85);  color: #0f172a; }

.ability-card-hotkey {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    color: #ffd700;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 215, 0, 0.35);
}

.ability-card-icon {
    margin-top: 12px;
    color: rgba(255, 215, 0, 0.85);
}

.ability-card-row .ability-card .ability-card-icon {
    font-size: 1rem !important;
    margin-top: 8px !important;
}

.ability-card-name {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.05;
    margin-top: 1px;
    color: #f1f5f9;
}

.ability-card-row .ability-card .ability-card-name {
    font-size: 0.58rem !important;
    line-height: 1 !important;
}

.ability-card-effect {
    font-size: 0.55rem;
    color: rgba(203, 213, 225, 0.7);
    line-height: 1.05;
    padding: 0 2px;
    min-height: 12px;
}

.ability-card-footer {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    min-height: 14px;
}

.ability-card-cost {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
}

.ability-card-cost.cost-mana    { background: rgba(96, 165, 250, 0.85); color: #0f172a; }
.ability-card-cost.cost-ki      { background: rgba(196, 181, 253, 0.85); color: #0f172a; }
.ability-card-cost.cost-swagger { background: rgba(251, 146, 60, 0.85); color: #0f172a; }
.ability-card-cost.cost-default { background: rgba(148, 163, 184, 0.85); color: #0f172a; }

.ability-card-cd {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.7);
    color: #0f172a;
}

.ability-card-ready {
    font-size: 0.7rem;
    font-weight: 800;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.85);
    color: #0f172a;
}

/* Compact variant for tablet/mobile */
.ability-card.compact {
    width: 64px;
    min-height: 72px;
    padding: 4px 2px;
}

.ability-card.compact .ability-card-effect { display: none; }
.ability-card.compact .ability-card-name   { font-size: 0.62rem; }

/* ==========================================================================
   Phase 5: SpellCard — in-combat dense spell card with school theming + hover-zoom.
   School color palette per warm-crafting-crayon plan:
     Evocation red, Abjuration blue, Necromancy green, Illusion purple,
     Conjuration gold, Divination cyan, Enchantment pink, Transmutation orange.
   ========================================================================== */

.spell-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.spell-card-wrapper {
    position: relative;
    display: inline-block;
}

.spell-card-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 64px !important;
    min-height: 64px !important;
    padding: 11px 2px 2px !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(255, 215, 0, 0.20);
    border-radius: 10px;
    color: #e2e8f0;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    text-align: center;
    overflow: hidden;
}

.spell-card-mini:hover:not(.disabled) {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.spell-card-mini.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.spell-card-mini.active {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.7), 0 0 14px rgba(255, 215, 0, 0.45);
}

.spell-card-cost-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.9);
    color: #0f172a;
    z-index: 2;
}

.spell-card-range-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.8);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.spell-card-hotkey {
    position: absolute;
    top: 3px;
    right: 24px;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    color: #ffd700;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 215, 0, 0.35);
    z-index: 2;
}

.spell-card-school-icon {
    margin-top: 2px;
    color: #fff;
}

.spell-card-name {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.05;
    color: #f1f5f9;
    padding: 0 2px;
}

.spell-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 2px;
    min-height: 14px;
}

.spell-card-action-tag {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border-radius: 3px;
    color: #0f172a;
}

.spell-card-action-tag.tag-main     { background: rgba(248, 113, 113, 0.85); color: #fff; }
.spell-card-action-tag.tag-bonus    { background: rgba(96, 165, 250, 0.85); }
.spell-card-action-tag.tag-reaction { background: rgba(74, 222, 128, 0.85); }
.spell-card-action-tag.tag-ritual   { background: rgba(196, 181, 253, 0.85); }

.spell-card-save-tag {
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(251, 191, 36, 0.85);
    color: #0f172a;
}

.spell-card-flag-glyph {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 215, 0, 0.85);
    font-size: 0.6rem;
}

.spell-card-flag-glyph .material-icons {
    font-size: 11px;
}

.spell-card-cd-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.7);
    color: var(--color-warning-bright);
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 10px;
    z-index: 3;
}

.spell-card-fav {
    position: absolute;
    bottom: 3px;
    left: 3px;
    color: var(--color-warning-bright);
    z-index: 2;
}

.spell-card-fav .material-icons {
    font-size: 12px;
}

/* School-themed border + glow */
.spell-card-mini.spell-school-evocation     { border-color: rgba(239, 68, 68, 0.7); box-shadow: 0 0 8px rgba(239, 68, 68, 0.25); }
.spell-card-mini.spell-school-evocation:hover:not(.disabled)     { box-shadow: 0 6px 22px rgba(239, 68, 68, 0.55); }
.spell-card-mini.spell-school-abjuration    { border-color: rgba(59, 130, 246, 0.7); box-shadow: 0 0 8px rgba(59, 130, 246, 0.25); }
.spell-card-mini.spell-school-abjuration:hover:not(.disabled)    { box-shadow: 0 6px 22px rgba(59, 130, 246, 0.55); }
.spell-card-mini.spell-school-necromancy    { border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 0 8px rgba(34, 197, 94, 0.25); }
.spell-card-mini.spell-school-necromancy:hover:not(.disabled)    { box-shadow: 0 6px 22px rgba(34, 197, 94, 0.55); }
.spell-card-mini.spell-school-illusion      { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 8px rgba(168, 85, 247, 0.25); }
.spell-card-mini.spell-school-illusion:hover:not(.disabled)      { box-shadow: 0 6px 22px rgba(168, 85, 247, 0.55); }
.spell-card-mini.spell-school-conjuration   { border-color: rgba(245, 158, 11, 0.7); box-shadow: 0 0 8px rgba(245, 158, 11, 0.25); }
.spell-card-mini.spell-school-conjuration:hover:not(.disabled)   { box-shadow: 0 6px 22px rgba(245, 158, 11, 0.55); }
.spell-card-mini.spell-school-divination    { border-color: rgba(6, 182, 212, 0.7); box-shadow: 0 0 8px rgba(6, 182, 212, 0.25); }
.spell-card-mini.spell-school-divination:hover:not(.disabled)    { box-shadow: 0 6px 22px rgba(6, 182, 212, 0.55); }
.spell-card-mini.spell-school-enchantment   { border-color: rgba(236, 72, 153, 0.7); box-shadow: 0 0 8px rgba(236, 72, 153, 0.25); }
.spell-card-mini.spell-school-enchantment:hover:not(.disabled)   { box-shadow: 0 6px 22px rgba(236, 72, 153, 0.55); }
.spell-card-mini.spell-school-transmutation { border-color: rgba(249, 115, 22, 0.7); box-shadow: 0 0 8px rgba(249, 115, 22, 0.25); }
.spell-card-mini.spell-school-transmutation:hover:not(.disabled) { box-shadow: 0 6px 22px rgba(249, 115, 22, 0.55); }

/* Hover-zoom preview (inside MudTooltip) */
.spell-hover-zoom {
    width: 280px;
    padding: 12px 14px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 13, 28, 1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.spell-hover-zoom.spell-school-evocation     { border-color: rgba(239, 68, 68, 0.85); }
.spell-hover-zoom.spell-school-abjuration    { border-color: rgba(59, 130, 246, 0.85); }
.spell-hover-zoom.spell-school-necromancy    { border-color: rgba(34, 197, 94, 0.85); }
.spell-hover-zoom.spell-school-illusion      { border-color: rgba(168, 85, 247, 0.85); }
.spell-hover-zoom.spell-school-conjuration   { border-color: rgba(245, 158, 11, 0.85); }
.spell-hover-zoom.spell-school-divination    { border-color: rgba(6, 182, 212, 0.85); }
.spell-hover-zoom.spell-school-enchantment   { border-color: rgba(236, 72, 153, 0.85); }
.spell-hover-zoom.spell-school-transmutation { border-color: rgba(249, 115, 22, 0.85); }

.spell-hz-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.spell-hz-meta {
    display: flex;
    gap: 4px;
    font-size: 0.65rem;
    color: rgba(203, 213, 225, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.spell-hz-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.7rem;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.spell-hz-stat strong { color: #ffd700; font-weight: 600; }

.spell-hz-desc {
    font-size: 0.78rem;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.spell-hz-flags {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.65rem;
}

.spell-hz-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
}

.spell-hz-flag.concentration { background: rgba(251, 191, 36, 0.2); color: var(--color-warning-bright); }
.spell-hz-flag.ritual        { background: rgba(196, 181, 253, 0.2); color: #c4b5fd; }
.spell-hz-flag .material-icons { font-size: 12px; }

.spell-hz-prediction {
    font-size: 0.72rem;
    color: #f59e0b;
    font-style: italic;
    padding: 4px 6px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 2px solid #f59e0b;
    border-radius: 3px;
    margin-top: 4px;
}

.spell-hz-disabled-reason {
    font-size: 0.7rem;
    color: #f87171;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid rgba(248, 113, 113, 0.2);
}

/* ==========================================================================
   Phase 11: AbilityCard rich hover-zoom + pin button + Esc hint.
   Mirrors the spell-hover-zoom styling so both card types feel identical when
   hovered. Pin button lives in the top-right; clicking it adds a gold border to
   the popup (signalling sticky/pinned) and surfaces the Esc hint.
   ========================================================================== */
.ability-hover-zoom,
.enemy-hover-zoom {
    position: relative;
    width: 260px;
    padding: 10px 12px 10px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 13, 28, 1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.enemy-hover-zoom.is-boss {
    border-color: rgba(248, 113, 113, 0.85);
}

.hover-zoom-pin-row {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

.hover-zoom-pin-btn {
    color: rgba(203, 213, 225, 0.7) !important;
    transition: color 0.15s ease;
}

.hover-zoom-pin-btn:hover {
    color: #ffd700 !important;
}

/* When pinned, the popup gets a thicker gold border + the Esc hint becomes visible. */
.ability-hover-zoom:has(.hz-esc-hint),
.spell-hover-zoom:has(.hz-esc-hint) {
    border-color: rgba(255, 215, 0, 0.85) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 0, 0.45);
}

.hz-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    padding-right: 24px;                             /* leave room for pin button */
}

.hz-name { line-height: 1.1; }

.hz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.65rem;
    color: rgba(203, 213, 225, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.hz-meta strong { color: #ffd700; font-weight: 600; }

.hz-effect {
    font-size: 0.74rem;
    color: rgba(203, 213, 225, 0.95);
    margin-bottom: 6px;
}

.hz-desc {
    font-size: 0.76rem;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.hz-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.65rem;
}

.hz-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

.hz-flag.cd     { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.hz-flag.ready  { background: rgba(74, 222, 128, 0.18);  color: #4ade80; }
.hz-flag.target { background: rgba(56, 189, 248, 0.18);  color: #38bdf8; }
.hz-flag .material-icons { font-size: 12px; }

.hz-disabled-reason {
    font-size: 0.7rem;
    color: #f87171;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(248, 113, 113, 0.2);
}

.hz-esc-hint {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 215, 0, 0.25);
    font-size: 0.62rem;
    color: rgba(255, 215, 0, 0.7);
    text-align: right;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Hex grid: spell target glow + AOE outline (read by ZoneBattlefieldHex when PendingSpell is set) */
.spell-target-glow {
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.7), 0 0 14px rgba(255, 215, 0, 0.4);
    animation: spell-target-pulse 1.4s ease-in-out infinite;
}

.spell-target-glow.school-evocation     { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba(239, 68, 68, 0.55); }
.spell-target-glow.school-abjuration    { box-shadow: 0 0 0 2px #3b82f6, 0 0 14px rgba(59, 130, 246, 0.55); }
.spell-target-glow.school-necromancy    { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34, 197, 94, 0.55); }
.spell-target-glow.school-illusion      { box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168, 85, 247, 0.55); }
.spell-target-glow.school-conjuration   { box-shadow: 0 0 0 2px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.55); }
.spell-target-glow.school-divination    { box-shadow: 0 0 0 2px #06b6d4, 0 0 14px rgba(6, 182, 212, 0.55); }
.spell-target-glow.school-enchantment   { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236, 72, 153, 0.55); }
.spell-target-glow.school-transmutation { box-shadow: 0 0 0 2px #f97316, 0 0 14px rgba(249, 115, 22, 0.55); }

.spell-aoe-outline {
    outline: 2px dashed rgba(255, 215, 0, 0.85);
    outline-offset: -2px;
    animation: spell-aoe-pulse 1.2s ease-in-out infinite;
}

/* The decision 7A AoE footprint preview (.aoe-footprint-mode, .spell-aoe-footprint) is styled at the end of
   ZoneBattlefieldHex.razor.css: here it would lose to that component's scoped zone tints and biome palettes. */

@keyframes spell-target-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@keyframes spell-aoe-pulse {
    0%, 100% { outline-color: rgba(255, 215, 0, 0.85); }
    50%      { outline-color: rgba(255, 215, 0, 0.45); }
}

/* Phase 5: hotkey help overlay table */
.hotkey-table {
    width: 100%;
    border-collapse: collapse;
}

.hotkey-table tr td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    color: #cbd5e1;
    font-size: 0.85rem;
}

.hotkey-table .hk-keys {
    width: 35%;
    text-align: right;
}

.hotkey-table .hk-action {
    color: #e2e8f0;
}

.hotkey-table kbd {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    color: #ffd700;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* =============================================================
   Phase 6 — Compact Enemy Inspector + Encounter Splash
   ============================================================= */

.compact-enemy-inspector {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    min-height: 160px;
    max-height: 220px;
    overflow: hidden;
}

.compact-enemy-inspector.is-boss {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.compact-enemy-inspector .inspector-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.compact-enemy-inspector .inspector-portrait-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(15, 23, 42, 0.6);
}

.compact-enemy-inspector .inspector-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compact-enemy-inspector .inspector-boss-pip {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1e293b;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
}

.compact-enemy-inspector .inspector-boss-pip .material-icons {
    font-size: 12px;
    color: #fff;
}

.compact-enemy-inspector .inspector-defeated-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
}

.compact-enemy-inspector .inspector-defeated-overlay .material-icons {
    font-size: 32px;
}

.compact-enemy-inspector .inspector-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compact-enemy-inspector .inspector-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.compact-enemy-inspector .inspector-name {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: #ffd700;
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-enemy-inspector .inspector-level {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.compact-enemy-inspector .inspector-classification {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.compact-enemy-inspector .inspector-hp {
    display: flex;
    align-items: center;
    gap: 6px;
}

.compact-enemy-inspector .inspector-hp-track {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.compact-enemy-inspector .inspector-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s ease, background 0.3s ease;
}

.compact-enemy-inspector .inspector-hp-fill.warning {
    background: linear-gradient(90deg, #facc15, #d97706);
}

.compact-enemy-inspector .inspector-hp-fill.danger {
    background: linear-gradient(90deg, #f97316, #c2410c);
}

.compact-enemy-inspector .inspector-hp-fill.critical {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.compact-enemy-inspector .inspector-hp-text {
    font-size: 0.72rem;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.compact-enemy-inspector .inspector-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.compact-enemy-inspector .inspector-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.72rem;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.compact-enemy-inspector .inspector-stat-pill .material-icons,
.compact-enemy-inspector .inspector-stat-pill .mud-icon-root {
    font-size: 13px;
    color: var(--color-warning-bright);
}

.compact-enemy-inspector .inspector-zone-pill {
    border-color: rgba(96, 165, 250, 0.35);
    color: #93c5fd;
}

.compact-enemy-inspector .inspector-intent {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 6px;
}

.compact-enemy-inspector .inspector-intent-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.compact-enemy-inspector .inspector-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.compact-enemy-inspector .inspector-status-pip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    color: #f1f5f9;
}

.compact-enemy-inspector .inspector-status-pip .material-icons,
.compact-enemy-inspector .inspector-status-pip .mud-icon-root {
    font-size: 13px;
}

.compact-enemy-inspector .inspector-status-duration {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.compact-enemy-inspector .inspector-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.compact-enemy-inspector .inspector-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.7), rgba(30, 41, 59, 0.7));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: #f1f5f9;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.compact-enemy-inspector .inspector-action-btn .material-icons {
    font-size: 15px;
    color: var(--color-warning-bright);
}

.compact-enemy-inspector .inspector-action-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(71, 85, 105, 0.85), rgba(51, 65, 85, 0.85));
    border-color: rgba(255, 215, 0, 0.55);
}

.compact-enemy-inspector .inspector-action-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.compact-enemy-inspector .inspector-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compact-enemy-inspector .inspector-target-btn {
    border-color: rgba(239, 68, 68, 0.4);
}

.compact-enemy-inspector .inspector-target-btn:hover:not(:disabled) {
    border-color: rgba(239, 68, 68, 0.7);
}

.compact-enemy-inspector .inspector-target-btn .material-icons {
    color: #f87171;
}

.compact-enemy-inspector .inspector-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #4ade80;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    padding: 20px 8px;
}

.compact-enemy-inspector .inspector-empty .material-icons {
    font-size: 32px;
}

/* Wide tier — slightly more breathing room. */
@media (min-width: 1920px) {
    .compact-enemy-inspector {
        min-height: 180px;
        padding: 14px;
    }
    .compact-enemy-inspector .inspector-portrait-wrap {
        width: 68px;
        height: 68px;
    }
    .compact-enemy-inspector .inspector-name {
        font-size: 1.15rem;
    }
}

/* Mobile — tighter padding. */
@media (max-width: 599px) {
    .compact-enemy-inspector {
        padding: 8px;
        min-height: 140px;
    }
    .compact-enemy-inspector .inspector-portrait-wrap {
        width: 52px;
        height: 52px;
    }
    .compact-enemy-inspector .inspector-name {
        font-size: 0.95rem;
    }
}

/* =============================================================
   Phase 6 — Monster Encounter Splash modal (full-art cinematic)
   ============================================================= */

.monster-encounter-splash-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.92) 100%);
    backdrop-filter: blur(6px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: encounter-fade-in 0.25s ease-out;
}

.monster-encounter-splash {
    position: relative;
    max-width: 760px;
    width: 100%;
    max-height: 92vh;
    background: linear-gradient(155deg, rgba(30, 41, 59, 0.97), rgba(15, 23, 42, 0.99));
    border: 2px solid rgba(255, 215, 0, 0.45);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.18);
    display: flex;
    flex-direction: column;
    animation: encounter-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.monster-encounter-splash.is-boss {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 80px rgba(239, 68, 68, 0.35);
}

.monster-encounter-splash .splash-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 50vh;
    overflow: hidden;
    background: #0a0f1a;
}

.monster-encounter-splash .splash-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: encounter-art-zoom 6s ease-out forwards;
}

.monster-encounter-splash .splash-art-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(15, 23, 42, 0.85) 100%);
    pointer-events: none;
}

.monster-encounter-splash .splash-banner {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.monster-encounter-splash .splash-banner-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 14px;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.monster-encounter-splash .splash-banner-chip.boss {
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
    background: linear-gradient(145deg, rgba(127, 29, 29, 0.85), rgba(15, 23, 42, 0.85));
}

.monster-encounter-splash .splash-banner-chip .material-icons {
    font-size: 14px;
}

.monster-encounter-splash .splash-name {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
    z-index: 2;
}

.monster-encounter-splash .splash-name h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    color: #ffd700;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 215, 0, 0.3);
    line-height: 1.1;
}

.monster-encounter-splash .splash-classification {
    font-size: 0.85rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.monster-encounter-splash .splash-body {
    padding: 14px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.monster-encounter-splash .splash-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.monster-encounter-splash .splash-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.monster-encounter-splash .splash-stat .material-icons,
.monster-encounter-splash .splash-stat .mud-icon-root {
    font-size: 16px;
    color: var(--color-warning-bright);
}

.monster-encounter-splash .splash-hp-bar {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
}

.monster-encounter-splash .splash-hp-track {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
}

.monster-encounter-splash .splash-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.3s ease, background 0.3s ease;
}

.monster-encounter-splash .splash-hp-fill.warning {
    background: linear-gradient(90deg, #facc15, #d97706);
}

.monster-encounter-splash .splash-hp-fill.danger {
    background: linear-gradient(90deg, #f97316, #c2410c);
}

.monster-encounter-splash .splash-hp-fill.critical {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.monster-encounter-splash .splash-hp-text {
    font-size: 0.82rem;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.monster-encounter-splash .splash-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.monster-encounter-splash .splash-status-pip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    color: #f1f5f9;
}

.monster-encounter-splash .splash-status-pip .material-icons,
.monster-encounter-splash .splash-status-pip .mud-icon-root {
    font-size: 14px;
}

.monster-encounter-splash .splash-lore {
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid rgba(255, 215, 0, 0.5);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    color: #cbd5e1;
    font-style: italic;
    line-height: 1.65;
    font-size: 0.92rem;
}

.monster-encounter-splash .splash-lore-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--color-warning-bright);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.monster-encounter-splash .splash-lore-header .material-icons,
.monster-encounter-splash .splash-lore-header .mud-icon-root {
    font-size: 15px;
}

.monster-encounter-splash .splash-footer {
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.monster-encounter-splash .splash-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: linear-gradient(145deg, rgba(180, 83, 9, 0.85), rgba(120, 53, 15, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 8px;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.monster-encounter-splash .splash-continue-btn .material-icons {
    font-size: 18px;
}

.monster-encounter-splash .splash-continue-btn:hover {
    background: linear-gradient(145deg, rgba(217, 119, 6, 0.95), rgba(180, 83, 9, 1));
    border-color: rgba(255, 215, 0, 0.85);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

.monster-encounter-splash .splash-continue-btn:active {
    transform: translateY(1px);
}

.monster-encounter-splash .splash-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s ease, color 0.15s ease;
}

.monster-encounter-splash .splash-close-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    color: #f1f5f9;
}

.monster-encounter-splash .splash-close-btn .material-icons {
    font-size: 18px;
}

@keyframes encounter-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes encounter-rise {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes encounter-art-zoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .monster-encounter-splash,
    .monster-encounter-splash-backdrop,
    .monster-encounter-splash .splash-art-img {
        animation: none;
    }
}

@media (max-width: 599px) {
    .monster-encounter-splash .splash-name h2 {
        font-size: 1.4rem;
    }
    .monster-encounter-splash .splash-body {
        padding: 12px;
    }
    .monster-encounter-splash .splash-footer {
        padding: 10px 12px 12px;
    }
}

/* The Triumph victory screen is a full-screen layer at z-index 9998, above MudBlazor's dialog (1400) and
   snackbar (1500) layers. While it is up, a confirm one of its actions raises (Leave adventure, the host's
   Save and end for everyone) and the toasts they post (equip, copy log) must sit above it and above the
   Try-Your-New-Gear modal (10000), or the dialog is hidden behind the screen that waits on it. */
body:has(.vs-screen) {
    --mud-zindex-dialog: 10010;
    --mud-zindex-snackbar: 10020;
}