/* ============================================
   WIDE DESKTOP COMBAT LAYOUT (1920px+)
   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).
   `position: relative` here is harmless and lets future absolute-positioned
   children (e.g., in-battlefield modals) anchor to this container.
   ============================================ */

.combat-layout-wide {
    position: relative;
    display: grid;
    /* Phase 12: log column width is dynamic — 380px when pinned, 0 when
       collapsed. The drawer handle floats over the board's right edge in
       collapsed mode. */
    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: 12px;
    flex: 1;
    min-height: 0;
    padding: 10px 16px;
}

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

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

/* Ultrawide max-width on the top strip so the initiative tracker doesn't
   sprawl across 2.5 metres of screen on 2560+ monitors.
   Phase 12 ultrawide+pinned: when the log is pinned, the game column already
   shrinks by ~380px and the user's intent is to keep playing while reading
   the log — drop the 1600px cap so the action panel and board use whatever
   width is left in the column rather than centering as a 1600px island with
   awkward dead space between them and the log. */
@media (min-width: 2200px) {
    .combat-layout-wide:not(.log-pinned) > .combat-topstrip {
        max-width: 1600px;
        justify-self: center;
        width: 100%;
    }
}

/* Initiative tracker now lives inline in the header row, not its own grid area.
   This selector intentionally avoids the legacy `.combat-header` class so it is
   not hidden by the `display: none !important` rule in combat-responsive.css. */
/* Step 2: grid-area binding removed; this becomes a `position: fixed`
   overlay in Step 3 (combat-header-overlay wrapper). */
.combat-header--wide {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
}

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

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

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

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

.combat-header--wide .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: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

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

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

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

/* Hex battlefield now owns the entire middle row of the left column.
   justify-content: center vertically centers the dynamically-sized board
   (boardSizing.js fits it to this cell's W x H projected through tilt).
   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 the floating overlays so hexes don't
     render visually behind the header/initiative chrome (top) or the
     action dock (bottom). */
.combat-zone-col--wide {
    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: full padding reservation removed — top strip + bottom dock
       are both in the layout grid now. The hex board owns the entire middle
       row of the column. */
    padding: 0;
}

/* Phase 12: .combat-bottom-row--wide deleted (dock is now a direct child of
   .combat-layout-wide with grid-area: dock). */

.combat-sidebar--wide {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-md);
    min-height: 0;
    min-width: 0;
}

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

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

.combat-actions-col--wide {
    min-width: 0;
    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);
}

.combat-monster-info-col--wide {
    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--wide.battle-result-mode {
    grid-column: 1 / -1;
}

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

/* Legacy compact log panel (kept for non-wide layouts). */
.combat-recent-events--wide {
    flex: 1;
    min-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(255, 215, 0, 0.08);
}

.combat-recent-events--wide .recent-events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    flex-shrink: 0;
}

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

.combat-recent-events--wide .recent-event-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 3px 0;
}

/* ============================================================================
   PHASE 9 OVERLAY REDESIGN — WIDE TIER (>=1920px)
   ============================================================================
   Persistent chrome (header strip, initiative band, player HUD, action dock,
   MP party stack, enemy inspector) is lifted out of the grid into floating
   overlays anchored to the viewport. The battlefield + log column remain the
   only grid children. Z-tiers per the discipline doc at the top of
   combat-responsive.css.

   Click-through note: each overlay wrapper sits tight to its content; empty
   space outside the wrapper passes clicks naturally. The
   `.combat-overlay-wrap { pointer-events: none; } > * { auto; }` defensive
   pattern is reserved for cases where padding around content creates dead
   zones — none of the Phase 9 overlays need it today.
   ============================================================================ */

/* Shared overlay-wrap defensive — applies only when the wrapper has padding
   beyond its content; today no overlay uses this, but kept as safety net. */
.combat-overlay-wrap {
    /* No layout side effects; positioning is per-overlay below. */
}

/* Art-direction pass — applied to remaining floating overlays (action dock,
   party stack). Header + initiative overlays were removed in Phase 12 (the
   in-flow .combat-topstrip in combat-responsive.css owns that chrome now). */
.combat-action-dock--wide,
.combat-party-stack--wide {
    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: combat-hud-overlay--wide and combat-action-dock--wide were
   removed. Both are now part of the in-flow .combat-bottom-dock that lives
   in the layout grid (defined in combat-responsive.css). */

/* --- MP party strip (bottom-left vertical, MP only) — Phase 12 reposition. --- */
.combat-party-stack--wide {
    position: fixed;
    bottom: 160px;  /* above the new in-flow bottom dock */
    left: 16px;
    z-index: 115;
    width: 300px;
    max-height: calc(100vh - 410px);  /* leave room for HUD at bottom */
    overflow-y: auto;
    padding: 8px;
}

/* ============================================================================
   ACTION DOCK DENSITY TIERS (Step 3a)
   ----------------------------------------------------------------------------
   Compact tier triggers at viewport height <= 949 (covers 1920x720, 1920x780,
   1920x900 ultrawides, etc — anywhere height is below 1080p). Specificity-
   bumped via `.combat-action-dock.combat-action-dock--wide` (compound class
   selector) to overcome the existing `.ability-card-row .ability-card` rule
   in combat-shared.css which has equal-tier specificity (0,2,0). Compound
   bumps us to 0,3,0 so we win the cascade regardless of load order.
   ============================================================================ */

/* Compact tier on Wide layout — !important to brute-force win over
   `.ability-card-row .ability-card` (and any scoped CSS that might tie
   on specificity). The cascade was unreliable here. */
/* Phase 12 — wide-layout density tiers retarget to the new in-flow dock. */
@media (max-height: 949px) {
    .combat-layout-wide .combat-bottom-dock .ability-card {
        width: 60px !important;
        min-height: 58px !important;
        padding: 3px 2px !important;
    }
    .combat-layout-wide .combat-bottom-dock .ability-card-effect {
        display: none !important;
    }
    .combat-layout-wide .combat-bottom-dock .ability-card-name {
        font-size: 0.6rem !important;
    }
    .combat-layout-wide .combat-bottom-dock .ability-card-icon {
        margin-top: 6px !important;
    }
}

/* Expanded tier on Wide layout — Phase 11 trim: keep slightly larger than the
   compact tier, but well below the pre-Phase-11 110x112. Effect text still
   hidden on desktop; full description lives in the rich hover popup. */
@media (min-width: 1920px) and (min-height: 1080px) {
    .combat-layout-wide .combat-bottom-dock .ability-card {
        width: 72px !important;
        min-height: 64px !important;
    }
    .combat-layout-wide .combat-bottom-dock .ability-card-effect {
        display: none !important;
    }
    .combat-layout-wide .combat-bottom-dock .ability-card-name {
        font-size: 0.66rem !important;
    }
}