/* 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: #fbbf24; }
.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: #fbbf24; }

.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: #fbbf24;
    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: #fbbf24;
    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: #fbbf24; }
.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;
}

@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: #fbbf24;
}

.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: #fbbf24;
}

.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: #fbbf24;
}

.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: #fbbf24;
    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;
    }
}