/* ============================================
   MOBILE-RESPONSIVE COMBAT LAYOUT
   ============================================
   Desktop: 3-column (Player | Monster | Log)
   Tablet: 2-column (Player+Monster | Log)
   Mobile Portrait: Vertical stack (Player ? Monster ? Log)
   Mobile Landscape: 2-column (Player | Monster) + Log below
   ============================================ */

/* ============================================================================
   COMBAT UI Z-INDEX TIER SYSTEM
   ============================================================================
   Documented as part of the battlefield-first overlay redesign.
   New combat overlays must slot into one of these tiers — do not invent ad-hoc
   z-index values. If a new tier is needed, extend this table first.

     0–49      Battlefield internal stacking (SVG grid, HTML tokens, VFX canvas)
     100–199   Persistent floating chrome (header strip, initiative band,
               player HUD card, action dock, MP party stack)
     200–299   Summoned panels (enemy inspector MudDrawer slide-in,
               future click-anchored popovers)
     300–449   Reserved for in-battlefield modals (e.g., "confirm flee"
               confirmation, mid-turn prompts)
     450–499   Mobile floating controls (combat log FAB)
     500–599   Drawer-like overlays on tablet (TabletMoreActionsDrawer
               + its backdrop)
     1200–1299 Modal drawers on desktop (CombatLogDrawer + backdrop)
     1300–1399 MudDialog system (MudBlazor default — weapon detail, armor
               detail, pet detail dialogs)
     1500      Transient banners (CombatActionBanner)

   Click-through discipline for overlays:
     .combat-overlay-wrap     { pointer-events: none; }   -- outer wrapper
     .combat-overlay-wrap > * { pointer-events: auto; }   -- inner card
   This guarantees empty padding around floating chrome cannot eat hex clicks
   on the battlefield underneath. Mirrors the existing `.board-overlay`
   (none) -> `.zone-overlay` (auto) pattern in ZoneBattlefieldHex.razor.css.
   ============================================================================ */

/* ========== MOBILE-SPECIFIC UTILITIES (MUST BE FIRST) ========== */
.mobile-only {
    display: none !important;
}

.mobile-only-strict {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

.tablet-and-up {
    display: block !important;
}

.tablet-only {
    display: none !important;
}

/* Portrait-tablet-only helpers — hidden by default, shown in portrait media query */
.tablet-portrait-only {
    display: none !important;
}

/* Portrait-tablet zone section — hidden by default, shown in portrait media query */
.tablet-portrait-zone {
    display: none !important;
}

/* Landscape-tablet-only — visible by default, hidden in portrait media query */
.tablet-landscape-only {
    display: block !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-only-strict {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .tablet-and-up {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    .mobile-hidden {
        display: none !important;
    }

    /* Hide class features and quick actions panels on mobile - they're in sticky bar */
    .combat-sidebar .class-features-panel,
    .combat-sidebar .quick-actions-panel,
    .party-column .class-features-panel,
    .party-column .quick-actions-panel {
        display: none !important;
    }
}

/* Mobile portrait only — hidden by default, shown in portrait */
.mobile-portrait-only {
    display: none;
}

@media (max-width: 767px) and (orientation: portrait) {
    .mobile-portrait-only {
        display: block;
    }
}

/* Mobile landscape only — hidden by default, shown in landscape */
.mobile-landscape-only {
    display: none;
}

@media (max-width: 767px) and (orientation: landscape) {
    .mobile-landscape-only {
        display: block;
    }
}

/* Tablet range: show tablet-and-up, hide desktop-only, show tablet-only */
@media (min-width: 768px) and (max-width: 1199px) {
    .mobile-only {
        display: none !important;
    }

    .mobile-only-strict {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    .tablet-and-up {
        display: block !important;
    }

    .tablet-only {
        display: block !important;
    }
}

/* ========== DESKTOP LAYOUT (Default) ========== */

/* Combat Mode: Hide nav sidebar and footer for maximum screen space */
.combat-mode .mud-drawer,
.combat-mode .mud-drawer-content {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
}

/* Hide footer - target the container after the body container */
.combat-mode .mud-main-content > .py-3 {
    display: none !important;
}

/* Hide the adventure banner during combat */
.combat-mode .adventure-banner-container {
    display: none !important;
}

/* Reclaim the drawer space for main content */
.combat-mode .mud-main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 48px !important;
}

/* Make the body container fill all available space */
.combat-mode .mud-main-content > .mud-container {
    padding: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100% !important;
}

/* Compact the AppBar in combat mode */
.combat-mode .mud-appbar {
    min-height: 48px !important;
    height: 48px !important;
}

/* Combat page fills all available space */
.combat-page,
.multiplayer-combat-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 0;
    margin-top: 0;
}

.combat-header,
.multiplayer-combat-header {
    margin-top: 0;
    flex-shrink: 0;
}

/* Hide mobile sticky stats wrapper on desktop and tablet */
@media (min-width: 768px) {
    .mobile-sticky-stats-wrapper {
        display: none !important;
    }
}

/* ============================================
   DESKTOP COMBAT LAYOUT (1280px – 1919px)
   Battlefield-first overlay redesign — two-column grid:
       grid-template-areas:
           "battle  log"
   The hex battlefield owns the entire left column; the combat log is a
   persistent full-height right column. Header chrome, initiative band,
   player HUD, action dock, MP party stack, and enemy inspector are
   floating overlays positioned via `position: fixed` (Step 3).
   The Wide tier (1920px+) overrides this in combat-wide.css.
   The Tablet tier (768–1199px) overrides this in the @media block below
   and is unaffected by this redesign.
   ============================================ */

.combat-layout {
    position: relative;
    display: grid;
    /* Phase 12: log column width is dynamic — 320px when pinned, 0 when
       collapsed. The drawer handle floats over the board's right edge in
       collapsed mode. The CSS variable lets the orchestrator flip it via a
       single class on the layout root. */
    grid-template-columns: minmax(0, 1fr) var(--log-col-width, 0px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "topstrip log"
        "battle   log"
        "dock     log";
    gap: 10px;
    flex: 1;
    min-height: 0;
    padding: 8px 12px;
}

.combat-layout.log-pinned { --log-col-width: 320px; }

.combat-layout > .combat-topstrip { grid-area: topstrip; }

/* Desktop header — bypass the legacy `.combat-header` hide rule by using a
   distinct modifier class on the layout.
   Step 2: grid-area binding removed; this becomes a `position: fixed`
   overlay in Step 3 (combat-header-overlay wrapper). */
.combat-header--desktop {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
}

.combat-header--desktop .combat-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.combat-header--desktop .combat-header-left,
.combat-header--desktop .combat-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.combat-header--desktop .combat-header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.combat-header--desktop .combat-title {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combat-header--desktop .turn-badge {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--color-warning-bright, #fbbf24);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.combat-header--desktop .turn-indicator {
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.combat-header--desktop .combat-initiative-row {
    margin: 0;
    min-width: 0;
}

.combat-header--desktop .combat-initiative-row .initiative-tracker {
    margin-bottom: 0;
}

/* Desktop: hex battlefield owns the entire middle row of the left column.
   Phase 9 polish:
   - background/border removed: chrome overlays float over this area, the
     legacy bordered panel was creating a "frame within a frame" look.
   - padding reserves safe-area for floating overlays (header + initiative
     at top, action dock at bottom). */
.combat-zone-col {
    grid-area: battle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border: none;
    overflow: hidden;
    min-height: 0;
    align-self: stretch;
    /* Phase 12: top + bottom overlays now in-flow grid rows (top strip + bottom
       dock). Hex board reclaims the full 350px of padding the floating overlay
       architecture used to reserve. */
    padding: 0;
}

/* Phase 12: .combat-bottom-row was the legacy 3-col HUD|actions|inspector
   grid. The dock now lives directly in the layout grid as `grid-area: dock`
   so this wrapper class is gone from the markup. Rule deleted. */

.combat-actions-col {
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-md);
    min-width: 0;
}

.combat-monster-info-col {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-md);
}

/* Battle ended: monster-info expands across the full bottom row width. */
.combat-monster-info-col.battle-result-mode {
    grid-column: 1 / -1;
}

.combat-sidebar {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
}

.combat-sidebar--desktop {
    background: rgba(15, 23, 42, 0.6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-md);
    min-width: 0;
}

.combat-sidebar .player-card-wrapper {
    flex-shrink: 0;
}

.combat-sidebar .mud-divider-fullwidth {
    flex-grow: 0;
}

/* Desktop log column (right side, full viewport height). */
.combat-log-col {
    grid-area: log;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.combat-monsters {
    grid-area: monsters;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.zone-battlefield-container {
    grid-area: zones;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(15, 23, 42, 0.6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    overflow-y: auto;
}

/* ===================================================================
   ZONE COMBAT SYSTEM
   Zone markup is spread across ZoneBattlefieldHorizontal.razor,
   ZoneBattlefieldVertical.razor, and ZoneCard.razor, so all zone
   styles live here as global CSS to avoid Blazor scoping issues.
   =================================================================== */

/* ===== TABLET PORTRAIT -- VERTICAL ZONE BATTLEFIELD ===== */
.zone-battlefield-vertical {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.zone-vert-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.zone-vert-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.zone-vert-title.player-side { text-align: left; color: rgba(59, 130, 246, 0.8); }
.zone-vert-title.enemy-side  { text-align: right; color: rgba(239, 68, 68, 0.8); }

.zone-vert-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-warning-light);
    opacity: 0.5;
}

/* 3-column grid: player zones | divider | enemy zones */
.zone-vert-body {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    gap: var(--space-xs);
    align-items: start;
}

.zone-vert-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.zone-vert-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    color: var(--color-warning-light);
    opacity: 0.6;
}

/* Zone movement controls -- compact strip for portrait tablet */
.zone-vert-movement {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-sm);
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
}

.zone-vert-movement-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 100%;
}

/* ===== HORIZONTAL ZONE BATTLEFIELD ===== */

/* Horizontal zone battlefield grid layout */
.zone-battlefield-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
}

/* Desktop: side wrappers are transparent to the grid */
.zone-player-side,
.zone-enemy-side {
    display: contents;
}

.zone-side-title {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: 0 0 var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zone-side-title.player-label {
    grid-column: 1 / 4;
    grid-row: 1;
    color: rgba(59, 130, 246, 0.8);
}

.zone-side-title.enemy-label {
    grid-column: 5 / 8;
    grid-row: 1;
    color: rgba(239, 68, 68, 0.8);
}

.zone-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    grid-row: 2;
}

.zone-slot.player-rear     { grid-column: 1; }
.zone-slot.player-flanks   { grid-column: 2; }
.zone-slot.player-vanguard { grid-column: 3; }

.zone-divider-horizontal {
    grid-column: 4;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-sm);
}

.zone-slot.enemy-vanguard { grid-column: 5; }
.zone-slot.enemy-flanks   { grid-column: 6; }
.zone-slot.enemy-rear     { grid-column: 7; }

/* ===== ZONE CARD STYLES ===== */
.zone-card {
    padding: var(--space-sm);
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    min-width: 80px;
    width: 100%;
    max-width: 160px;
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
}

.zone-card.current-player-zone {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 12px var(--color-border-active);
    animation: pulseBorder 2s ease-in-out infinite;
}

@keyframes pulseBorder {
    0%, 100% { box-shadow: 0 0 12px var(--color-border-active); }
    50%       { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.zone-card.available-move {
    border-color: rgba(59, 130, 246, 0.6);
    cursor: pointer;
}

.zone-card.available-move:hover {
    border-color: rgba(59, 130, 246, 0.9);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.zone-card.pending-move {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
}

.zone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.zone-bonus {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.zone-occupants {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.empty-zone {
    font-style: italic;
    opacity: 0.5;
}

.zone-hazards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

/* Zone Movement Hint — slim contextual bar below the hex board */
.zone-movement-hint {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    flex-wrap: wrap;
}

.movement-hint-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex: 1;
}

.movement-hint-icon {
    font-size: 14px;
    color: var(--color-primary);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Mobile Zone Info (compact zone summary shown when battlefield is hidden) */
.zone-info-mobile {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    background: rgba(30, 41, 59, 0.8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

/* Formation Picker */
.formation-zone-card {
    padding: var(--space-xl);
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    min-width: 160px;
    max-width: 200px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.formation-zone-card:hover {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-4px);
}

.formation-zone-card.selected {
    border-color: rgba(34, 197, 94, 0.8);
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.formation-zone-card.selected:hover {
    border-color: rgba(34, 197, 94, 0.9);
}

/* Inline recent combat events in sidebar */
.combat-recent-events {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    padding-top: 8px;
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.recent-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: var(--font-display, 'Cinzel', serif);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.recent-events-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}

.recent-event-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.3s ease-out;
}

.recent-event-item.player-event {
    border-left: 2px solid #22c55e;
}

.recent-event-item.enemy-event {
    border-left: 2px solid #ef4444;
}

.recent-event-item.info-event {
    border-left: 2px solid #3b82f6;
}

.recent-event-item .event-damage {
    color: #ef4444;
    font-weight: 600;
}

.recent-event-item .event-healing {
    color: #22c55e;
    font-weight: 600;
}

.recent-event-item .event-crit {
    color: #f59e0b;
    font-weight: 700;
}

.recent-event-item .event-miss {
    color: #64748b;
    font-style: italic;
}

.full-log-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    margin-top: 4px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.05);
    color: #ffd700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-display, 'Cinzel', serif);
}

.full-log-button:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.4);
}

/* Multiplayer: Horizontal recent events strip spanning full grid width */
.combat-recent-events-strip {
    grid-area: eventstrip;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    max-height: 120px;
    overflow-y: auto;
}

.combat-recent-events-strip .recent-events-header {
    padding: 2px 4px 4px;
}

.combat-recent-events-strip .recent-events-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px;
    padding: 0;
}

.combat-recent-events-strip .recent-event-item {
    font-size: 0.7rem;
    padding: 3px 6px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Full log drawer overlay */
.combat-log-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1200;
    animation: fadeIn 0.2s ease-out;
}

.combat-log-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: #1e293b;
    border-left: 1px solid rgba(255, 215, 0, 0.15);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.25s ease-out;
}

.combat-log-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.combat-log-drawer-header h3 {
    margin: 0;
    font-family: var(--font-display, 'Cinzel', serif);
    color: #ffd700;
    font-size: 1rem;
}

.combat-log-drawer-body {
    flex: 1;
    overflow-y: auto;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ===================================================================
   TABLET DRAWERS
   Drawer markup lives in TabletMoreActionsDrawer.razor and
   TabletPartyActionsDrawer.razor (child components), so all drawer
   styles must be global CSS to avoid Blazor scoping issues.
   =================================================================== */

@keyframes tabDrawerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tabDrawerSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ===== MORE ACTIONS DRAWER ===== */
.tablet-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 500;
    animation: tabDrawerFadeIn 0.2s ease-out;
}

.tablet-more-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 501;
    background: linear-gradient(180deg, rgba(20, 30, 48, 0.99), rgba(15, 23, 42, 1));
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: tabDrawerSlideUp 0.25s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tablet-drawer-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 10px auto 0;
    flex-shrink: 0;
}

.tablet-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.tablet-drawer-title {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.tablet-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    -webkit-overflow-scrolling: touch;
}

.tablet-drawer-body::-webkit-scrollbar { width: 4px; }
.tablet-drawer-body::-webkit-scrollbar-track { background: transparent; }
.tablet-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 2px; }

/* ===== PARTY ACTIONS DRAWER ===== */
.tablet-party-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 501;
    background: linear-gradient(180deg, rgba(20, 30, 48, 0.99), rgba(15, 23, 42, 1));
    border-top: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: tabDrawerSlideUp 0.25s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.party-health-overview {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.party-member-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.party-member-row.is-turn {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.05);
}

.pm-hp-bar-container {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
}

.pm-hp-fill          { height: 100%; border-radius: 3px; background: #22c55e; transition: width 0.3s ease; }
.pm-hp-fill.warning  { background: #f59e0b; }
.pm-hp-fill.danger   { background: #ef4444; }
.pm-hp-fill.critical { background: #dc2626; }

.pm-hp-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.party-abilities-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.party-abilities-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    padding: 0 var(--space-xs);
}

.party-ability-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    min-height: 56px;
}

.party-ability-btn:active {
    transform: scale(0.98);
    background: rgba(50, 65, 90, 0.9);
}

.party-ability-btn.paladin { border-left: 3px solid rgba(251, 191, 36, 0.6); }
.party-ability-btn.bard    { border-left: 3px solid rgba(168, 85, 247, 0.6); }

.pab-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pab-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.pab-cost {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.party-no-abilities {
    padding: var(--space-md);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
    font-style: italic;
}

/* Multiplayer Combat Layout (Desktop) - With Initiative Tracker Row */
.multiplayer-combat-layout {
    display: grid;
    grid-template-columns: 380px 1fr 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        "initiative initiative log"
        "party monsters log";
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 8px 12px;
}

.initiative-tracker-desktop-row {
    grid-area: initiative;
}

.party-column {
    grid-area: party;
    overflow-y: auto;
}

.monsters-column {
    grid-area: monsters;
    overflow-y: auto;
}

.log-column {
    grid-area: log;
    overflow-y: auto;
}

/* ========== DESKTOP LAYOUT (1200px+) ========== */
@media (min-width: 1200px) {
    /* combat-monsters has grid-area:monsters which is not a named area in the
       new 4-column template — hide it so it does not auto-place into the grid */
    .combat-monsters {
        display: none !important;
    }

    /* Remove the redundant title banner — turn info is in the initiative
       tracker; Your Turn badge is on the player card in the sidebar */
    .combat-header,
    .multiplayer-combat-header {
        display: none !important;
    }

    /* Phase 8b: monster-info col width is set by the parent bottom-row grid
       template; do not force a fixed width here. */
    .combat-monster-info-col {
        min-width: 0;
        max-width: 100%;
    }

    /* Center columns: allow true flex sizing (min-width:0 lets them shrink) */
    .combat-zone-col,
    .combat-actions-col,
    .combat-enemies-col {
        min-width: 0;
        max-width: 100%;
    }

    /* Constrain the MudBlazor main content to viewport height so the combat
       grid fills exactly the available space without scrolling.
       64px = default MudBlazor AppBar height. */
    .combat-mode .mud-main-content,
    .multiplayer-combat-mode .mud-main-content {
        height: calc(100vh - 64px);
        max-height: calc(100vh - 64px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Combat page and layout fill the height fully */
    .combat-page,
    .multiplayer-combat-page {
        flex: 1;
        overflow: hidden;
    }

    .combat-layout,
    .multiplayer-combat-layout {
        flex: 1;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }
}

/* ========== TABLET LAYOUT (768px - 1199px) ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Visibility handled by utility classes above */

    /* Combat mode adjustments for tablet */
    .combat-mode .mud-main-content {
        padding-top: 48px !important;
    }

    .combat-layout {
        display: grid;
        grid-template-columns: 250px 1fr 200px;
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas:
            "initiative initiative initiative"
            "sidebar monsters log"
            "zones zones zones"
            "eventstrip eventstrip eventstrip";
        gap: 10px;
        flex: 1;
        min-height: 0;
        padding: 10px;
    }

    .combat-initiative-row {
        grid-area: initiative;
    }

    .combat-sidebar {
        grid-area: sidebar;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
    }

    .combat-monsters {
        grid-area: monsters;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
    }

    /* Zone battlefield on tablet: full-width row below player+monster */
    .zone-battlefield-container {
        grid-area: zones;
        padding: var(--space-md);
        overflow: visible;
    }

    /* Tablet: Switch from 7-col grid to stacked layout */
    .zone-battlefield-horizontal {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }

    /* Hide the VS divider on tablet */
    .zone-divider-horizontal {
        display: none;
    }

    /* Side wrappers become their own 3-column grid rows on tablet */
    .zone-player-side,
    .zone-enemy-side {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-sm);
        align-items: start;
        background: rgba(15, 23, 42, 0.4);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        padding: var(--space-sm);
    }

    .zone-player-side { border-left: 3px solid rgba(59, 130, 246, 0.5); }
    .zone-enemy-side  { border-left: 3px solid rgba(239, 68, 68, 0.5); }

    /* Section titles span full width */
    .zone-side-title {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 0.75rem;
        text-align: left;
        padding-bottom: var(--space-xs);
        margin: 0;
    }

    /* Slots: reset desktop grid-column/grid-row */
    .zone-slot { grid-row: 2; }
    .zone-slot.player-rear     { grid-column: 1; }
    .zone-slot.player-flanks   { grid-column: 2; }
    .zone-slot.player-vanguard { grid-column: 3; }
    .zone-slot.enemy-vanguard  { grid-column: 1; }
    .zone-slot.enemy-flanks    { grid-column: 2; }
    .zone-slot.enemy-rear      { grid-column: 3; }

    /* Flanks: stack vertically within their column */
    .zone-slot.player-flanks,
    .zone-slot.enemy-flanks {
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Zone cards: full-width within their column, compact text */
    .zone-card {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.7rem;
    }

    .zone-header  { margin-bottom: 2px; }

    .zone-bonus {
        font-size: 0.65rem;
        margin-bottom: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .zone-occupants { margin-top: 2px; gap: 2px; }

    /* Tablet: Recent events in dedicated right column */
    .combat-recent-events-tablet {
        grid-area: log;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
        display: flex;
        flex-direction: column;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid var(--color-border-subtle, rgba(255, 215, 0, 0.1));
        border-radius: 8px;
        padding: 6px;
    }

    .combat-recent-events-tablet .recent-events-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /* Recent events strip for multiplayer on tablet */
    .combat-recent-events-strip {
        grid-area: eventstrip;
    }

    /* Multiplayer layout */
    .multiplayer-combat-layout {
        display: grid;
        grid-template-columns: 250px 1fr 200px;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "initiative initiative initiative"
            "party monsters monsters"
            "eventstrip eventstrip eventstrip";
        gap: 10px;
        flex: 1;
        min-height: 0;
        padding: 10px;
    }

    .initiative-tracker-desktop-row {
        grid-area: initiative;
    }

    .party-column {
        grid-area: party;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
    }

    .monsters-column {
        grid-area: monsters;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
    }

    .log-column {
        display: none; /* Use sidebar recent events instead on tablet */
    }

    /* --- Touch optimization: 48px minimum targets (Material guidelines) --- */
    .zone-card {
        min-height: 48px;
    }

    /* --- Safe-area insets for modern tablets --- */
    .combat-page,
    .multiplayer-combat-page {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* --- Compact initiative tracker for tablet --- */
    .combat-initiative-row {
        padding: 4px 0;
    }

    /* --- Hex battlefield: prevent overflow from desktop clamp sizing --- */
    .board-iso-container {
        max-width: 100% !important;
    }

    .board-zoom-viewport {
        max-width: 100%;
        overflow: hidden;
    }
}

/* ========== TABLET PORTRAIT LAYOUT (768px - 1199px, portrait) ========== */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {

    /* --- Utility class overrides for portrait tablet --- */
    .tablet-portrait-only  { display: block !important; }
    .tablet-landscape-only { display: none  !important; }

    /* Hide mobile sticky stats — not needed on portrait tablet */
    .mobile-sticky-stats-wrapper { display: none !important; }

    /* --- Hide combat header — info already in character strip + initiative --- */
    .combat-header,
    .multiplayer-combat-header {
        display: none !important;
    }

    /* --- Convert main layout to single-column scrollable flex --- */
    .combat-layout,
    .multiplayer-combat-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(100vh - 48px);
        min-height: calc(100dvh - 48px);
        padding: 8px 8px calc(100px + env(safe-area-inset-bottom, 0px)) 8px !important;
        gap: 10px !important;
        overflow-y: auto !important;
        scroll-snap-type: y proximity;
    }

    /* --- Section ordering in the flex column --- */
    .combat-initiative-row {
        order: 0 !important;
        width: 100% !important;
        scroll-snap-align: start;
    }

    .tablet-portrait-char-strip {
        order: -1 !important;
        width: 100% !important;
        position: sticky;
        top: 0;
        z-index: 200;
    }

    .tablet-party-strip-wrapper {
        order: 1 !important;
        width: 100% !important;
        display: block !important;
        scroll-snap-align: start;
    }

    /* Portrait inline roster — full-width strip below initiative */
    .combat-portrait-roster {
        order: 2 !important;
        width: 100% !important;
        scroll-snap-align: start;
    }

    .combat-portrait-roster .roster-header {
        display: none !important;
    }

    .combat-portrait-roster .roster-grid {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto;
    }

    .combat-portrait-roster .roster-enemy {
        width: 60px !important;
        flex-shrink: 0;
    }

    .combat-portrait-roster .roster-enemy-name {
        font-size: 8px !important;
    }

    /* Hex battlefield — show in portrait, takes remaining space */
    .zone-battlefield-container {
        order: 3 !important;
        width: 100% !important;
        scroll-snap-align: start;
        min-height: 50vh;
    }

    /* Hide enemy roster inside hex — shown inline via combat-portrait-roster */
    .zone-battlefield-container .enemy-roster {
        display: none !important;
    }

    /* Hide FocusMonsterPanel — keep victory/defeat panels visible */
    .combat-monsters > .tablet-only,
    .combat-monsters > .combat-adventure-info {
        display: none !important;
    }

    .combat-monsters,
    .monsters-column {
        order: 4 !important;
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        scroll-snap-align: start;
    }

    /* Let battle result panels size naturally in the flex flow */
    .combat-monsters .battle-result-inline {
        max-height: none;
    }

    /* Hide the sidebar on portrait tablet — player info is in the sticky action bar */
    .combat-sidebar,
    .party-column             { display: none !important; }

    /* Hide inline recent events — log is behind the FAB */
    .combat-recent-events-tablet,
    .combat-recent-events-strip  { display: none !important; }

    /* Multiplayer: hide the right-side log column */
    .log-column { display: none !important; }

    /* --- Show the FAB and action bar --- */
    .log-fab {
        display: flex !important;
    }

    .tablet-action-bar {
        display: flex !important;
    }

    /* --- Hide CombatActionsPanel — sticky bar handles all actions --- */
    .combat-actions-panel {
        display: none !important;
    }

    /* Ensure the combat page is a positioning context for fixed children */
    .combat-page,
    .multiplayer-combat-page {
        padding-top: 0;
        position: relative;
    }
}

/* ========== TABLET LANDSCAPE LAYOUT (768px - 1199px, landscape) ========== */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

    /* --- Utility overrides --- */
    .tablet-landscape-only { display: block !important; }
    .mobile-sticky-stats-wrapper { display: none !important; }

    /* --- Hide combat header — info already in character strip + initiative --- */
    .combat-header,
    .multiplayer-combat-header {
        display: none !important;
    }

    /* --- Show character strip in landscape (shared with portrait) --- */
    .tablet-portrait-char-strip {
        width: 100%;
    }

    /* --- Grid layout: initiative + monsters share a row, hex fills remaining space --- */
    .combat-layout,
    .multiplayer-combat-layout {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto 1fr auto;
        gap: 6px;
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
        padding: 6px 6px calc(92px + env(safe-area-inset-bottom, 0px)) 6px;
        overflow: hidden;
        overflow-y: auto;
    }

    /* --- Grid placement --- */
    .tablet-portrait-char-strip {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .combat-initiative-row {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        align-self: center;
    }

    /* Hide FocusMonsterPanel in landscape — roster shown inline via combat-landscape-roster */
    .combat-monsters > .tablet-only,
    .combat-monsters > .combat-adventure-info {
        display: none !important;
    }

    .monsters-column {
        display: none !important;
    }

    /* Combat-monsters: collapse when only hidden children, expand for victory/defeat */
    .combat-monsters {
        grid-column: 1 / -1;
        grid-row: 4;
        min-height: 0;
    }

    .combat-monsters:empty {
        display: none;
    }

    /* Landscape inline roster — sits next to initiative tracker */
    .combat-landscape-roster {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }

    /* Style the inline roster as a compact horizontal strip */
    .combat-landscape-roster .enemy-roster {
        padding: 0 !important;
    }

    .combat-landscape-roster .roster-header {
        display: none !important;
    }

    .combat-landscape-roster .roster-grid {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .combat-landscape-roster .roster-enemy {
        width: 52px !important;
    }

    .combat-landscape-roster .roster-enemy-info {
        padding: 2px 3px !important;
    }

    .combat-landscape-roster .roster-enemy-name {
        font-size: 7px !important;
    }

    /* Hide the enemy roster inside the hex battlefield — it's shown inline above */
    .zone-battlefield-container .enemy-roster {
        display: none !important;
    }

    /* Hide sidebar — player info is in the character strip */
    .combat-sidebar,
    .party-column {
        display: none !important;
    }

    /* Hex battlefield — FULL WIDTH, takes all remaining vertical space */
    .zone-battlefield-container {
        grid-column: 1 / -1;
        grid-row: 3;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }

    /* Hide combat log — accessible via FAB + drawer */
    .combat-recent-events-tablet,
    .combat-log-container,
    .log-column {
        display: none !important;
    }

    /* Multiplayer events strip */
    .combat-recent-events-strip {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    /* --- Show sticky action bar + log FAB --- */
    .tablet-action-bar {
        display: flex !important;
    }

    .log-fab {
        display: flex !important;
    }

    /* --- Hide inline CombatActionsPanel — actions live in the sticky bar --- */
    .combat-actions-panel {
        display: none !important;
    }
}

/* ========== MOBILE PORTRAIT LAYOUT (< 768px, portrait) ========== */
@media (max-width: 767px) and (orientation: portrait) {
    .combat-page {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding-top: 0;
    }

    .multiplayer-combat-page {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding-top: 0;
    }

    /* Hide the combat header on mobile portrait:
       - Player name + YOUR TURN badge: already in sticky stats bar
       - Turn number: already in the initiative row
       Also prevents position:sticky conflict with the fixed sticky stats bar. */
    .combat-header,
    .multiplayer-combat-header {
        display: none !important;
    }

    /* Main layout: flex column, with margin-top to clear the fixed sticky stats bar.
       sticky stats = position:fixed; top:56px; height ~115px base. */
    .combat-layout,
    .multiplayer-combat-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        height: auto !important;
        min-height: auto !important;
        padding: 8px !important;
        gap: 12px !important;
        margin-top: 115px; /* Base sticky bar height: name + HP + quick info */
    }

    /* When action icons are present in the sticky bar */
    .mobile-sticky-stats-wrapper:has(.sticky-action-icons) ~ .combat-layout,
    .mobile-sticky-stats-wrapper:has(.sticky-action-icons) ~ .multiplayer-combat-layout {
        margin-top: 170px;
    }

    /* When status effects are present (no action icons) */
    .mobile-sticky-stats-wrapper:has(.sticky-status-effects):not(:has(.sticky-action-icons)) ~ .combat-layout,
    .mobile-sticky-stats-wrapper:has(.sticky-status-effects):not(:has(.sticky-action-icons)) ~ .multiplayer-combat-layout {
        margin-top: 160px;
    }

    /* When BOTH action icons AND status effects are present */
    .mobile-sticky-stats-wrapper:has(.sticky-action-icons):has(.sticky-status-effects) ~ .combat-layout,
    .mobile-sticky-stats-wrapper:has(.sticky-action-icons):has(.sticky-status-effects) ~ .multiplayer-combat-layout {
        margin-top: 215px;
    }

    .combat-sidebar,
    .combat-monsters,
    .combat-log-container,
    .party-column,
    .monsters-column,
    .log-column {
        width: 100% !important;
        overflow-y: visible !important;
        max-height: none !important;
        grid-area: unset !important;
    }

    /* Player section - compact and first */
    .combat-sidebar,
    .party-column {
        order: 1 !important;
        overflow: visible !important;
    }

    /* Monster section - second; height is now intrinsic (hex grid + strip) */
    .combat-monsters,
    .monsters-column {
        order: 2 !important;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Combat log - last and scrollable with better height */
    .combat-log-container,
    .log-column {
        order: 3 !important;
        min-height: 250px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    /* Hex grid area — full width in portrait, fills combat-monsters column in landscape */
    .mobile-hex-grid-area {
        width: 100%;
        padding: 0 2px;
        margin-top: 8px;
        flex-shrink: 0;
        /* Prevent board overflow from pushing layout; touch-action handled by scoped CSS */
        overflow: hidden;
        border-radius: 10px;
    }

    /* Ensure the hex board viewport doesn't overflow on mobile */
    .mobile-hex-grid-area .board-zoom-viewport {
        max-width: 100%;
        overflow: hidden;
        border-radius: 10px;
    }

    /* Reduce max-width clamp so the board fits phone screens without excess whitespace */
    .mobile-hex-grid-area .board-iso-container {
        max-width: 100% !important;
    }

    /* Mini combat log — below monster strip in portrait */
    .mobile-mini-log-portrait {
        width: 100%;
        flex-shrink: 0;
        max-height: 90px;
        overflow: hidden;
        /* reuse recent-events panel styling */
    }

    /* Hide the zone chip + Move Zones button — replaced by hex grid */
    .zone-info-mobile {
        display: none !important;
    }

    /* Hide desktop player card on mobile */
    .combat-sidebar .player-card-wrapper.tablet-and-up {
        display: none !important;
    }

    /* Hide class features and quick actions panels on mobile - they're in sticky bar */
    .combat-sidebar .class-features-panel,
    .combat-sidebar .quick-actions-panel,
    .party-column .class-features-panel,
    .party-column .quick-actions-panel {
        display: none !important;
    }

    /* Hide CombatActionsPanel — actions live in the sticky bottom bar */
    .combat-actions-panel {
        display: none !important;
    }

    /* Hide tablet-only recent events widget (use log FAB instead) */
    .combat-recent-events-tablet,
    .combat-recent-events-strip {
        display: none !important;
    }

    /* --- Show sticky bottom action bar + log FAB --- */
    .tablet-action-bar {
        display: flex !important;
    }

    .log-fab {
        display: flex !important;
    }

    /* Add bottom padding so scrollable content clears the sticky action bar */
    .combat-layout,
    .multiplayer-combat-layout {
        padding-bottom: 100px !important;
    }

    /* Formation zone card: compact size on mobile */
    .formation-zone-card {
        min-width: 120px;
        max-width: 140px;
        padding: var(--space-lg);
    }
}

/* ========== MOBILE LANDSCAPE LAYOUT (< 768px, landscape) ========== */
@media (max-width: 767px) and (orientation: landscape) {
    .combat-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .combat-header {
        flex-shrink: 0;
        padding: 6px 12px !important;
    }

    .combat-header-left,
    .combat-header-right {
        flex-direction: row !important;
        gap: 8px !important;
    }

    .combat-title {
        font-size: 0.85rem !important;
    }

    .turn-badge {
        font-size: 0.75rem !important;
        padding: 2px 6px !important;
    }

    .combat-layout {
        display: grid !important;
        grid-template-columns: minmax(180px, 35%) minmax(200px, 1fr) !important;
        grid-template-rows: 1fr auto !important;
        grid-template-areas: 
            "sidebar monsters"
            "log log" !important;
        flex: 1;
        gap: 8px !important;
        padding: 6px !important;
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
    }

    .combat-sidebar {
        grid-area: sidebar !important;
        overflow-y: auto !important;
        max-height: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .combat-monsters {
        grid-area: monsters !important;
        overflow-y: auto !important;
        max-height: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .combat-log-container {
        grid-area: log !important;
        min-height: 100px !important;
        max-height: 35vh !important;
        overflow-y: auto !important;
    }

    /* Show mobile components in landscape phones */
    .mobile-only {
        display: block !important;
    }

    .mobile-only-strict {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .tablet-and-up {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    /* Hex grid fills the monsters column in landscape */
    .mobile-hex-grid-area {
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        border-radius: 8px;
    }

    /* Landscape: board fits the available column */
    .mobile-hex-grid-area .board-iso-container {
        max-width: 100% !important;
    }

    /* Landscape sidebar extras: monster strip + mini log below player card */
    .mobile-landscape-sidebar-extras {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /* Mini log inside landscape sidebar */
    .mobile-mini-log-landscape {
        overflow: hidden;
        max-height: 80px;
        flex-shrink: 0;
    }

    /* Hide zone chip + Move Zones button — replaced by hex grid */
    .zone-info-mobile {
        display: none !important;
    }
}

/* ========== MOBILE COMBAT HEADER ========== */
@media (max-width: 767px) {
    .combat-header {
        padding: 12px 8px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .combat-header-left,
    .combat-header-right {
        justify-content: space-between;
        width: 100%;
    }

    .combat-title {
        font-size: 1rem;
    }

    .turn-badge {
        font-size: 0.85rem;
        padding: 4px 8px;
    }
}

/* ========== MOBILE MONSTER CARD ADJUSTMENTS ========== */
@media (max-width: 767px) {
    .monster-card {
        margin-bottom: 12px;
    }

    .monster-card-header {
        padding: 10px;
    }

    .monster-name {
        font-size: 1.1rem;
    }

    .monster-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .monster-actions {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }

    .monster-action-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ========== MOBILE COMBAT LOG ========== */
@media (max-width: 767px) {
    .combat-log-header {
        padding: 10px;
        font-size: 0.9rem;
    }

    .combat-log-entry {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .combat-log-settings {
        flex-direction: column;
        gap: 8px;
    }

    /* Ensure combat log has usable height on mobile */
    .combat-log-container {
        min-height: 200px;
    }

    /* Combat log entries container needs sufficient height */
    .combat-log-entries {
        min-height: 150px;
        max-height: 250px;
        overflow-y: auto;
    }
}

/* ========== MOBILE MULTIPLAYER LAYOUT ========== */
@media (max-width: 767px) and (orientation: portrait) {
    /* Multiplayer combat page container */
    .multiplayer-combat-page {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        width: 100%;
    }

    /* Multiplayer combat header */
    .multiplayer-combat-header {
        flex-shrink: 0;
        padding: 12px 8px;
    }

    .multiplayer-combat-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 8px !important;
        width: 100% !important;
        height: auto !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .party-column,
    .monsters-column,
    .log-column {
        width: 100% !important;
        overflow-y: visible !important;
        max-height: none !important;
        grid-area: unset !important;
    }

    .party-column {
        order: 1 !important;
    }

    .monsters-column {
        order: 2 !important;
        min-height: 350px;
    }

    .log-column {
        order: 3 !important;
        min-height: 200px !important;
        max-height: 350px !important;
        overflow-y: auto !important;
    }

    /* Mobile player party panel */
    .player-party-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .party-player-card {
        padding: 10px;
    }
}

/* ========== MULTIPLAYER LANDSCAPE LAYOUT ========== */
@media (max-width: 900px) and (orientation: landscape) and (max-device-width: 900px) {
    /* Only apply to actual mobile devices in landscape */
    
    .multiplayer-combat-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .multiplayer-combat-header {
        flex-shrink: 0;
        padding: 6px 12px !important;
    }

    .multiplayer-combat-layout {
        display: grid !important;
        grid-template-columns: minmax(150px, 30%) minmax(200px, 1fr) !important;
        grid-template-rows: 1fr auto !important;
        grid-template-areas: 
            "party monsters"
            "log log" !important;
        flex: 1;
        gap: 8px !important;
        padding: 6px !important;
        height: calc(100vh - 50px) !important;
        overflow: hidden !important;
    }

    .party-column {
        grid-area: party !important;
        overflow-y: auto !important;
        max-height: none !important;
    }

    .monsters-column {
        grid-area: monsters !important;
        overflow-y: auto !important;
        max-height: none !important;
    }

    .log-column {
        grid-area: log !important;
        min-height: 80px !important;
        max-height: 30vh !important;
        overflow-y: auto !important;
    }

    /* Compact party cards for landscape */
    .player-party-panel {
        gap: 4px !important;
    }

    .party-player-card {
        padding: 6px 8px !important;
    }
}

/* ========== MOBILE TOUCH INTERACTIONS ========== */
@media (max-width: 767px) {
    /* Larger touch targets */
    .mud-button,
    .mobile-action-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Prevent double-tap zoom on buttons */
    button {
        touch-action: manipulation;
    }

    /* Smooth scrolling */
    .combat-log-container,
    .monsters-column {
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== MOBILE MODAL/OVERLAY FIXES ========== */
@media (max-width: 767px) {
    .battle-result-modal {
        max-width: 95vw;
        margin: 10px;
    }

    .mud-dialog-content {
        padding: 12px;
    }
}

/* ========== MOBILE ANIMATIONS ========== */
@media (max-width: 767px) {
    /* Reduce animation intensity on mobile */
    .taking-damage,
    .healing,
    .dying {
        animation-duration: 0.4s;
    }

    /* Disable particle effects on mobile for performance */
    .damage-flash,
    .heal-effect {
        display: none;
    }
}

/* ========== VERY SMALL SCREENS (< 375px) ========== */
@media (max-width: 374px) {
    .combat-layout,
    .multiplayer-combat-layout {
        padding: 4px;
        gap: 8px;
    }

    .combat-header,
    .multiplayer-combat-header {
        padding: 8px 4px;
    }

    .mobile-action-btn {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .stat-label,
    .stat-value,
    .info-item {
        font-size: 0.75rem;
    }
}

/* ========== IPHONE 15 PRO & SIMILAR (393px portrait) ========== */
@media (max-width: 430px) and (orientation: portrait) {
    /* Force mobile layout for modern iPhones */
    .mobile-only {
        display: block !important;
    }

    .mobile-only-strict {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .tablet-and-up {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    /* Single-player combat */
    .combat-page {
        display: flex;
        flex-direction: column;
    }

    .combat-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Multiplayer combat */
    .multiplayer-combat-page {
        display: flex;
        flex-direction: column;
    }

    .multiplayer-combat-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .party-column,
    .monsters-column,
    .log-column {
        width: 100% !important;
        grid-area: unset !important;
    }
}

/* ========== LANDSCAPE MOBILE - HEIGHT CONSTRAINED ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .combat-layout,
    .multiplayer-combat-layout {
        grid-template-rows: 1fr minmax(60px, 25vh) !important;
    }

    .combat-log-container,
    .log-column {
        min-height: 60px !important;
        max-height: 25vh !important;
    }
}

/* ========== MOBILE OVERRIDE - HIGHEST PRIORITY ========== */
/* This must be last to override tablet styles for high-DPI phones */
@media (max-width: 767px), (max-device-width: 767px) {
    /* Force mobile components visibility */
    .mobile-only {
        display: block !important;
    }

    .mobile-only-strict {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .tablet-and-up {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    /* Ensure multiplayer layout is vertical on mobile */
    .multiplayer-combat-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        gap: 12px !important;
        padding: 8px !important;
    }

    /* Force column widths and order */
    .party-column {
        width: 100% !important;
        order: 1 !important;
        overflow-y: visible !important;
        max-height: none !important;
        grid-area: unset !important;
    }

    .monsters-column {
        width: 100% !important;
        order: 2 !important;
        overflow-y: visible !important;
        max-height: none !important;
        grid-area: unset !important;
        min-height: 350px;
    }

    .log-column {
        width: 100% !important;
        order: 3 !important;
        min-height: 200px !important;
        max-height: 350px !important;
        overflow-y: auto !important;
        grid-area: unset !important;
    }

    /* Single-player combat layout override */
    .combat-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        gap: 12px !important;
        padding: 8px !important;
    }

    .combat-sidebar,
    .combat-monsters,
    .combat-log-container {
        width: 100% !important;
        overflow-y: visible !important;
        max-height: none !important;
        grid-area: unset !important;
    }
}

/* ========== DRAWER OVERRIDE ==========
   The .combat-actions-panel is globally hidden in all non-desktop media queries
   because the sticky tab bar handles actions. However, the panel is intentionally
   rendered inside .tablet-drawer-body (the "More" drawer). The two-class selector
   has higher specificity than the single-class hide rules so it wins.
   ======================================= */
.tablet-drawer-body .combat-actions-panel {
    display: flex !important;
}

/* ============================================================================
   PHASE 9 OVERLAY REDESIGN — DESKTOP TIER (1280-1919px)
   ============================================================================
   Same shape as Wide tier (combat-wide.css) but with tighter dimensions and a
   320px log column instead of 380px.
   ============================================================================ */

/* Phase 12 — top strip (in-flow grid row, no longer position:fixed).
   Replaces the legacy combat-header-overlay + combat-initiative-overlay pair.
   ~48px tall flat row spanning the battle column above the hex board. */
.combat-topstrip {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 4px 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: var(--radius-2xl);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

.combat-topstrip .topstrip-left,
.combat-topstrip .topstrip-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.combat-topstrip .topstrip-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.combat-topstrip .topstrip-turn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
}

.combat-topstrip .topstrip-turn-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.62rem;
    color: rgba(255, 215, 0, 0.75);
}

.combat-topstrip .topstrip-turn-number {
    color: #ffd700;
    font-variant-numeric: tabular-nums;
}

.combat-topstrip .topstrip-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combat-topstrip .topstrip-turn-indicator.active {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.55);
    color: #4ade80;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: topstripTurnPulse 1.6s ease-in-out infinite;
}

@keyframes topstripTurnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

.combat-topstrip .topstrip-log-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.30);
    color: #ffd700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.combat-topstrip .topstrip-log-btn:hover {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.6);
}

.combat-topstrip .topstrip-log-btn.has-unread {
    border-color: rgba(248, 113, 113, 0.65);
}

.combat-topstrip .topstrip-log-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
}

/* The InitiativeTracker inside the top strip needs to drop its outer
   panel chrome — the strip itself is the panel now. */
.combat-topstrip .initiative-tracker {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Phase 12 — Art-direction for the remaining floating overlay (party stack).
   Header + initiative + HUD + action-dock overlays were removed in Phase 12
   (moved into in-flow .combat-topstrip + .combat-bottom-dock). */
.combat-party-stack--desktop {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: var(--radius-2xl);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   Phase 12 — Pinnable combat log drawer
   ----------------------------------------------------------------------------
   Two states share one component:
     - Pinned: drawer panel docks into the layout's `log` grid area (flow).
     - Unpinned: tab handle floats on the right edge; clicking opens the
       panel as an overlay with a backdrop (escape / click-outside closes).
   ============================================================================ */
.combat-log-dock {
    grid-area: log;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.combat-log-dock.pinned {
    /* In flow — the panel takes the full log column. */
    height: 100%;
}

.combat-log-dock.unpinned {
    /* Out of flow — the column is 0px wide but the handle + open panel
       are absolutely positioned over the board. */
    pointer-events: none; /* let board events pass through except on the handle */
}

.combat-log-dock .log-dock-handle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 96px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffd700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130;
    pointer-events: auto;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.45);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.combat-log-dock .log-dock-handle:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.85);
}

.combat-log-dock .log-dock-handle.has-unread {
    border-color: rgba(248, 113, 113, 0.85);
}

.combat-log-dock .log-dock-handle-badge {
    position: absolute;
    top: 6px;
    left: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
}

.combat-log-dock .log-dock-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 140;
    pointer-events: auto;
}

.combat-log-dock .log-dock-panel {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: var(--radius-2xl);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    pointer-events: auto;
}

.combat-log-dock.pinned .log-dock-panel {
    height: 100%;
}

.combat-log-dock.unpinned .log-dock-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 360px;
    z-index: 150;
    animation: logDockSlideIn 0.18s ease-out;
}

@keyframes logDockSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Phase 12 design pass: log-dock-header / log-dock-title / log-dock-controls /
   log-dock-pin-btn / log-dock-body / log-dock-pin-hint rules removed.
   The pin/close affordances now live inside CombatLogHeader (sound + settings
   + pin + close + count chip) so the dock no longer needs a redundant titlebar
   on top of UnifiedCombatLog's existing header. */

/* ============================================================================
   Phase 12 — Bottom dock (in-flow grid row) — DESIGN PASS
   ----------------------------------------------------------------------------
   Single visual surface combining the player HUD (left) and the actions panel
   (center). BG3-inspired: gold rim, backdrop blur, layered translucency.
   The dock owns all the chrome; inner components (HUD card, actions panel)
   shed their own borders/backgrounds when InDock=true.

   Layout:
     ┌────────────────────────────────────────────────────────────────┐
     │ ┌─────────────┐ │ ┌──────────────────────────────────────────┐ │
     │ │   PLAYER    │ │ │         TARGETING STRIP                  │ │
     │ │   HUD       │ │ ├──────────────────────────────────────────┤ │
     │ │  (~280px)   │ │ │  ACTIONS  ▸ [card] [card] [card] →scroll │ │
     │ │             │ │ ├──────────────────────────────────────────┤ │
     │ │             │ │ │  SPELLS   ▸ [card] [card] [card] →scroll │ │
     │ └─────────────┘ │ └──────────────────────────────────────────┘ │
     └────────────────────────────────────────────────────────────────┘

   Cards are 80x80px (back up from the Phase 11 64x56) so icon + name + cost
   + cooldown read cleanly. Horizontal overflow with custom-styled scrollbar
   keeps wide rows scannable without crushing card legibility.
   ============================================================================ */
.combat-bottom-dock {
    grid-area: dock;
    display: grid;
    grid-template-columns: minmax(280px, auto) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    min-height: 0;
    padding: 10px 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background:
        linear-gradient(180deg, rgba(20, 28, 50, 0.78) 0%, rgba(12, 18, 36, 0.88) 100%),
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
    border: 1px solid rgba(255, 215, 0, 0.40);
    border-top: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 215, 0, 0.08),
        inset 0 1px 0 rgba(255, 215, 0, 0.10);
}

.combat-bottom-dock .dock-hud-segment,
.combat-bottom-dock .dock-actions-segment {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Subtle gold-tinted divider between the HUD column and the actions column
   so the segments read as related-but-distinct slots, not one big rectangle. */
.combat-bottom-dock .dock-hud-segment {
    position: relative;
    padding-right: 14px;
}

.combat-bottom-dock.with-hud .dock-hud-segment::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 215, 0, 0.32) 25%,
        rgba(255, 215, 0, 0.32) 75%,
        transparent 100%);
    pointer-events: none;
}

.combat-bottom-dock .dock-actions-segment {
    overflow: hidden;
    gap: 8px;
}

/* Inner action panel with InDock=true sheds its own background, border,
   and section-header chrome — the dock owns the frame. */
.combat-bottom-dock .combat-actions-panel.in-dock {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 8px;
}

/* Inner HUD card sheds its own outer frame in the dock; the portrait + bars
   remain visually grouped via internal layout without a redundant border. */
.combat-bottom-dock .cph-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ----- Action / spell card rows inside the dock -----
   Override the Phase 11 compact-tier rules to give cards more presence.
   Horizontal scroll is the source of truth — wide ability lists overflow
   instead of wrapping or shrinking, so each card stays large + readable. */
.combat-bottom-dock .ability-card-row,
.combat-bottom-dock .spell-card-row {
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;       /* breathing room for the scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.55) rgba(15, 23, 42, 0.4);
}

.combat-bottom-dock .ability-card-row::-webkit-scrollbar,
.combat-bottom-dock .spell-card-row::-webkit-scrollbar { height: 8px; }
.combat-bottom-dock .ability-card-row::-webkit-scrollbar-track,
.combat-bottom-dock .spell-card-row::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}
.combat-bottom-dock .ability-card-row::-webkit-scrollbar-thumb,
.combat-bottom-dock .spell-card-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.55), rgba(245, 158, 11, 0.6));
    border-radius: 4px;
}
.combat-bottom-dock .ability-card-row::-webkit-scrollbar-thumb:hover,
.combat-bottom-dock .spell-card-row::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.85), rgba(245, 158, 11, 0.9));
}

/* Section labels — small text on the left of each row (instead of the old
   "ACTIONS & BARD FEATURES" full-width header that ate vertical space).
   Renders via CSS `::before` on .action-section so we don't need new markup;
   the label-data attribute flows from the `data-tour-id` already in place. */
.combat-bottom-dock .action-section {
    position: relative;
    padding-left: 56px;       /* room for the inline label */
}

.combat-bottom-dock .action-section.basic-actions::before {
    content: "ACTIONS";
}

.combat-bottom-dock .action-section.spell-row::before {
    content: "SPELLS";
}

.combat-bottom-dock .action-section::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: 50% 50%;
    width: 50px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255, 215, 0, 0.55);
    pointer-events: none;
    text-transform: uppercase;
}

/* Action / spell cards inside the new dock — generous 80x80 BG3-feel.
   Win specificity ties against earlier `.ability-card-row .ability-card`
   default (64px) and the Phase 11 ultrawide rules. */
.combat-bottom-dock .ability-card-row .ability-card {
    width: 84px !important;
    min-height: 84px !important;
    padding: 5px 4px !important;
    gap: 2px;
    border-radius: 10px;
    transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.combat-bottom-dock .ability-card-row .ability-card:hover:not(.disabled) {
    transform: translateY(-3px) scale(1.04);
}

.combat-bottom-dock .ability-card-row .ability-card .ability-card-icon {
    font-size: 1.5rem !important;
    margin-top: 14px !important;
}

.combat-bottom-dock .ability-card-row .ability-card .ability-card-name {
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
    font-weight: 600;
}

.combat-bottom-dock .spell-card-row .spell-card-mini {
    width: 84px !important;
    min-height: 92px !important;
    padding: 14px 4px 4px !important;
    border-radius: 10px;
    transition: transform 0.14s ease, box-shadow 0.18s ease;
}

.combat-bottom-dock .spell-card-row .spell-card-mini:hover:not(.disabled) {
    transform: translateY(-3px) scale(1.04);
}

/* Vertical divider between basic actions and class features inside the
   ACTIONS row — was a thin element; restyle as a dim gold gradient. */
.combat-bottom-dock .ability-row-divider {
    align-self: center;
    width: 1px;
    height: 56px;
    margin: 0 6px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 215, 0, 0.35) 50%,
        transparent 100%);
    flex-shrink: 0;
}

/* ----- Targeting strip polish -----
   The strip lives at the top of the action panel content. Restyle for a more
   confident "this is your target" presence — bigger HP bar, gold glow when
   targeted, bigger label typography. */
.combat-bottom-dock .actions-panel-targeting-strip {
    padding: 6px 12px !important;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(60, 30, 10, 0.55) 50%,
        rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    border-radius: 8px !important;
}

.combat-bottom-dock .actions-panel-targeting-strip.no-target {
    background: linear-gradient(
        90deg,
        rgba(60, 60, 60, 0.45) 0%,
        rgba(40, 40, 40, 0.35) 100%) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

.combat-bottom-dock .targeting-strip-name {
    font-size: 0.95rem;
}

.combat-bottom-dock .targeting-strip-hp-track {
    flex: 0 1 240px;
    height: 12px;
    border-radius: 6px;
}

.combat-bottom-dock .targeting-strip-hp-text {
    font-size: 0.78rem;
    font-weight: 600;
}

/* Ultrawide: cap dock width so cards don't sprawl across the screen.
   Phase 12 ultrawide+pinned: when the log is pinned, the game column has
   already shrunk by ~320-380px. Capping the dock at 1600px on top of that
   strands the action cards as a centered island with empty rails. The
   :not(.log-pinned) guard keeps the cap for the unpinned (full-width)
   case but releases it when the log is sharing the layout — the dock
   then flexes to the available column width and the player has elbow
   room to act and read at the same time. */
@media (min-width: 2200px) {
    .combat-layout:not(.log-pinned) > .combat-bottom-dock,
    .combat-layout-wide:not(.log-pinned) > .combat-bottom-dock {
        max-width: 1600px;
        justify-self: center;
        width: 100%;
    }
}

/* --- MP party strip (bottom-left vertical, MP only) — Phase 12.
   Anchored to the left edge between top strip and bottom dock so it doesn't
   compete with the initiative tracker (which now lives in the top strip).
   Width is slimmer than the legacy 260px panel — the new strip is portraits-
   first; the deeper card (focused-player) remains in flow inside. */
.combat-party-stack--desktop {
    position: fixed;
    bottom: 140px;  /* above the new in-flow bottom dock */
    left: 12px;
    z-index: 115;
    width: 220px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding: 6px;
}

/* ============================================================================
   ACTION CARD DENSITY TIERS — DESKTOP (Phase 12 retarget)
   Compact tier triggers at <=1399px wide OR <=949px tall.
   Selector now targets the in-flow .combat-bottom-dock (was: floating
   .combat-action-dock--desktop). !important keeps specificity ties broken in
   our favor against the equal-tier `.ability-card-row .ability-card` rule.
   ============================================================================ */
@media (max-width: 1399px), (max-height: 949px) {
    .combat-bottom-dock .ability-card {
        width: 60px !important;
        min-height: 68px !important;
        padding: 3px 2px !important;
    }
    .combat-bottom-dock .ability-card-effect {
        display: none !important;
    }
    .combat-bottom-dock .ability-card-name {
        font-size: 0.6rem !important;
    }
    .combat-bottom-dock .ability-card-icon {
        margin-top: 8px !important;
    }
}

/* ============================================================================
   CUSTOM INSPECTOR DRAWER (replaces MudDrawer)
   ----------------------------------------------------------------------------
   MudBlazor's MudDrawer kept rendering only its modal backdrop without the
   panel itself, even after moving outside <main> + explicit Width. Switched
   to a custom CSS slide-in matching the CombatLogDrawer pattern (proven in
   this codebase). Z-tier 200/201 per the documented summon-panel band.
   ============================================================================ */

.combat-inspector-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    animation: fadeIn 0.18s ease-out;
}

.combat-inspector-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    background: #1e293b;
    border-left: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.25s ease-out;
}

.combat-inspector-drawer--desktop {
    width: 320px;
}

.combat-inspector-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.combat-inspector-drawer-header h3 {
    margin: 0;
    font-family: var(--font-display, 'Cinzel', serif);
    color: #ffd700;
    font-size: 1rem;
}

.combat-inspector-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

/* Reduced-motion: skip the slide animation, just fade. */
@media (prefers-reduced-motion: reduce) {
    .combat-inspector-backdrop,
    .combat-inspector-drawer {
        animation-name: fadeIn;
        animation-duration: 0.12s;
    }
}

/* ============================================================================
   PHASE 9 DEFEAT TAKEOVER (Step 6)
   ----------------------------------------------------------------------------
   On defeat, the DefeatPanel takes over the full viewport at z-index 1350
   (above MudDialog tier 1300-1399 by intent — a confirmation dialog can
   still render on top if needed in the future). The battlefield dims behind
   a translucent backdrop so the moment carries weight, contrasting the
   in-combat overlays which all feature backdrop blur and gold-rimmed
   surfaces.

   Click-through: the takeover wrapper is pointer-events: none so empty
   space passes clicks (none should reach the battlefield since the backdrop
   covers everything, but defensive). The backdrop and card both opt back
   in to pointer-events: auto.
   ============================================================================ */

.combat-defeat-takeover {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.combat-defeat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    animation: combat-defeat-fadein 0.4s ease-out;
}

.combat-defeat-card {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    max-width: min(640px, calc(100vw - 80px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    animation: combat-defeat-card-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes combat-defeat-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes combat-defeat-card-in {
    from { opacity: 0; transform: scale(0.88) translateY(24px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Reduced motion — fade the card in without scale/transform overshoot. */
@media (prefers-reduced-motion: reduce) {
    .combat-defeat-backdrop,
    .combat-defeat-card {
        animation-duration: 0.15s;
        animation-timing-function: ease-out;
    }
    .combat-defeat-card {
        animation-name: combat-defeat-fadein;
    }
}