/* Combat popup (v1 prototype) */

.combat-popup-overlay {
    position: fixed;
    inset: 0;
    /* When combined with .story-popup-overlay, Story CSS provides the backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    color: #E6EEF7;
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.combat-popup-overlay.hidden {
    display: none;
}

.combat-popup-content {
    /* sizing is inherited from .story-popup-content, keep combat overrides minimal */
    overflow: hidden;
    /* Story popup defaults to 50vh; combat needs more vertical space for bars + log + actions */
    height: 82vh;
    /* Account for overlay padding so it always fits */
    max-height: calc(100vh - 40px);
}

/* Force the combat sizing to win over generic .story-popup-content rules, even if CSS order changes */
#combatPopup .combat-popup-content.story-popup-content {
    height: 82vh;
    max-height: calc(100vh - 40px);
}

.combat-popup-content.compact-header .combat-popup-header {
    /* story header is fairly tall; compact variant saves vertical space */
    padding: 10px 12px;
    margin-bottom: 12px;
}

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

.combat-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
    opacity: 0.85;
    user-select: none;
    color: rgba(230, 238, 247, 0.85);
}

.combat-popup-close.disabled {
    opacity: 0.35;
    cursor: default;
}

.combat-popup-header {
    flex-shrink: 0;
}

.combat-popup-header h2 {
    margin: 0;
    color: #F3F7FF;
    font-weight: 700;
}

.combat-subtitle {
    margin-top: 6px;
    opacity: 0.85;
    font-size: 0.95em;
    color: rgba(230, 238, 247, 0.78);
}

.combat-popup-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    align-content: start;
    flex: 1 1 0;
    min-height: 0;
    /* Critical: if the popup is short, don't let the log/bars overflow and paint over the footer buttons */
    overflow: auto;
    overscroll-behavior: contain;
}

.combat-bars {
    padding: 0 2px;
    display: grid;
    /* 3-column layout: left sheet, middle float lane, right sheet */
    grid-template-columns: 1fr 64px 1fr;
    gap: 14px;
}

.combat-float-lane {
    position: relative;
    pointer-events: none;
    align-self: stretch;
    min-width: 0;
}

.combat-speed-toggle {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: grid;
    place-items: center;
    min-width: 54px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(230, 238, 247, 0.22);
    background: rgba(0,0,0,0.34);
    box-shadow: 0 10px 22px rgba(0,0,0,0.45);
    cursor: pointer;
    z-index: 6;
    opacity: 0.32;
    color: rgba(230, 238, 247, 0.9);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.combat-log-toggle {
    position: absolute;
    left: 50%;
    top: 82%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: none;
    place-items: center;
    min-width: 54px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(230, 238, 247, 0.22);
    background: rgba(0,0,0,0.34);
    box-shadow: 0 10px 22px rgba(0,0,0,0.45);
    cursor: pointer;
    z-index: 6;
    opacity: 0.32;
    color: rgba(230, 238, 247, 0.9);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.combat-log-toggle:hover {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.55);
    opacity: 0.95;
}

.combat-log-toggle:focus-visible {
    outline: 2px solid rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.85);
    outline-offset: 2px;
}

.combat-log-toggle.active {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.75);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.55),
        0 0 22px rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.14);
    opacity: 1;
}

.combat-speed-toggle:hover {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.55);
    opacity: 0.95;
}

.combat-speed-toggle:focus-visible {
    outline: 2px solid rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.85);
    outline-offset: 2px;
}

#combatPopup.combat-fast .combat-speed-toggle {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.75);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.55),
        0 0 22px rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.18);
    opacity: 1;
}

.combat-pause-toggle {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(230, 238, 247, 0.22);
    background: rgba(0,0,0,0.38);
    box-shadow: 0 10px 22px rgba(0,0,0,0.5);
    cursor: pointer;
    z-index: 6;
    opacity: 0.32;
}

.combat-pause-toggle:hover {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.55);
    opacity: 0.95;
}

.combat-pause-toggle:focus-visible {
    outline: 2px solid rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.85);
    outline-offset: 2px;
}

.combat-pause-icon {
    position: relative;
    width: 22px;
    height: 22px;
    opacity: 0.75;
}

.combat-pause-icon::before,
.combat-pause-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 7px;
    border-radius: 2px;
    background: rgba(230, 238, 247, 0.78);
}

.combat-pause-icon::before { left: 1px; }
.combat-pause-icon::after { right: 1px; }

.combat-pause-text {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 216, 74, 0.92);
    text-shadow: 0 2px 10px rgba(0,0,0,0.85);
    opacity: 0;
    pointer-events: none;
}

#combatPopup.combat-paused .combat-pause-toggle {
    border-color: rgba(255, 216, 74, 0.55);
    background: rgba(0,0,0,0.48);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.55),
        0 0 22px rgba(255, 216, 74, 0.12);
    opacity: 1;
}

#combatPopup.combat-paused .combat-pause-icon {
    opacity: 1;
}

#combatPopup.combat-paused .combat-pause-text {
    opacity: 1;
}

.combat-float-text {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(calc(-50% + var(--x, 0px)), 10px) rotate(var(--rot, 0deg));
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.2px;
    text-shadow:
        0 2px 8px rgba(0,0,0,0.75),
        0 0 14px rgba(0,0,0,0.45);
    opacity: 0;
    animation: combat-float-up 950ms cubic-bezier(0.18, 0.9, 0.2, 1) forwards;
    will-change: transform, opacity;
    user-select: none;
    z-index: 7;
}

@keyframes combat-float-up {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), 14px) rotate(var(--rot, 0deg)) scale(0.98);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x, 0px)), -92px) rotate(var(--rot, 0deg)) scale(1.06);
    }
}

/* Float colors mirror log colors */
.combat-float-text.kind-player-hit { color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.98); }
.combat-float-text.kind-player-crit { color: rgba(255, 241, 168, 0.99); }
.combat-float-text.kind-player-miss { color: rgba(230, 238, 247, 0.68); font-size: 18px; letter-spacing: 0.8px; }
.combat-float-text.kind-enemy-hit { color: rgba(239, 68, 68, 0.98); }
.combat-float-text.kind-enemy-crit { color: rgba(255, 209, 209, 0.98); }
.combat-float-text.kind-enemy-miss { color: rgba(230, 238, 247, 0.68); font-size: 18px; letter-spacing: 0.8px; }
.combat-float-text.kind-item { color: rgba(251, 191, 36, 0.98); }

@media (max-width: 720px) {
    .combat-bars {
        grid-template-columns: 1fr;
    }
    .combat-float-lane {
        display: none;
    }
}

.combat-bar-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.combat-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    /* Keep both sides aligned even if one side has extra controls (e.g., stim button). */
    min-height: 28px;
}

.combat-bar-top-spacer {
    /* Present on the enemy side to match the player's two-item header row.
       No fixed width needed; we only care about equal row height/spacing. */
    display: inline-block;
    height: 1px;
}

.combat-bar-top .combat-bar-label {
    margin-bottom: 0;
}

.combat-stim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.45);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    line-height: 1;
}

.combat-stim-icon .svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.combat-stim-icon .combat-stim-count {
    min-width: 10px;
    font-size: 11px;
    opacity: 0.95;
}

.combat-stim-icon:hover {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.75);
}

.combat-stim-icon:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.combat-bar-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(230, 238, 247, 0.9);
}

.combat-bar {
    position: relative;
    height: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
}

.combat-bar.combat-bar-secondary {
    height: 10px;
    margin-top: 6px;
    opacity: 0.98;
}

.combat-bar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 1px rgba(0,0,0,0.65);
    pointer-events: none;
}

.combat-bar-fill {
    height: 100%;
    width: 50%;
    /* Both bars red for consistent combat danger */
    background: rgba(239, 68, 68, 0.85);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.combat-bar-fill.stamina {
    background: rgba(245, 198, 66, 0.85);
    box-shadow: 0 0 10px rgba(245, 198, 66, 0.25);
}

.combat-bar-fill.enemy {
    background: rgba(239, 68, 68, 0.85);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.combat-bar-text {
    margin-top: 6px;
    font-size: 0.9em;
    opacity: 0.85;
    color: rgba(230, 238, 247, 0.85);
}

.combat-mini-inline {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
    display: block;
}

.combat-ability-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.combat-ability-btn {
    height: 34px;
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.26);
    color: rgba(230, 238, 247, 0.92);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

/* Cooldown progress fill (used by Heavy Strike). Dark overlay shrinks to 0 as cooldown completes. */
.combat-ability-btn[data-cooldown="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(var(--cooldown-fill, 0));
    background:
        linear-gradient(90deg,
            rgba(0,0,0,0.46),
            rgba(0,0,0,0.32) 55%,
            rgba(0,0,0,0.18)
        );
    pointer-events: none;
    z-index: 2;
}

.combat-ability-btn:hover {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.45);
    background: rgba(0,0,0,0.34);
}

.combat-ability-btn[disabled],
.combat-ability-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Keep stim button visually consistent inside the ability row */
.combat-ability-row .combat-stim-icon {
    border-radius: 10px;
    padding: 6px 10px;
}

.combat-orbit {
    position: relative;
    /* Taller so left/right icon stacks don't overlap */
    height: 176px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 30%, rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.08), rgba(0,0,0,0) 62%),
                rgba(0,0,0,0.18);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    overflow: hidden;
}

.combat-portrait {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    will-change: transform;
    height: 164px;
    width: auto;
    opacity: 0.82;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)) contrast(1.05);
}

.combat-portrait.hidden {
    display: none;
}

/* Reuse the Character paperdoll visual treatment for the player portrait */
.combat-portrait.player {
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 82%);
    mask-image: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 82%);
}

.combat-portrait.enemy {
    opacity: 0.9;
    /* Remove black box backgrounds from enemy PNGs */
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 86%);
    mask-image: radial-gradient(ellipse at 50% 52%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 86%);
}

/* Enemy defeated FX: red ring pop + fade */
.combat-orbit[data-orbit="enemy"].enemy-defeated::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 142px;
    height: 142px;
    transform: translate(-50%, -50%) scale(0.25);
    border-radius: 999px;
    border: 3px solid rgba(239, 68, 68, 0.88);
    box-shadow:
        0 0 0 0 rgba(239, 68, 68, 0.25),
        0 0 28px rgba(239, 68, 68, 0.28);
    opacity: 0;
    pointer-events: none;
    animation: combat-enemy-defeated-pop 640ms cubic-bezier(0.18, 0.9, 0.2, 1) forwards;
    z-index: 6;
}

.combat-orbit[data-orbit="enemy"].enemy-defeated .combat-portrait.enemy {
    animation: combat-enemy-defeated-fade 620ms ease-out forwards;
}

@keyframes combat-enemy-defeated-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
        box-shadow:
            0 0 0 0 rgba(239, 68, 68, 0.25),
            0 0 18px rgba(239, 68, 68, 0.22);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.35);
        box-shadow:
            0 0 0 14px rgba(239, 68, 68, 0.0),
            0 0 40px rgba(239, 68, 68, 0.0);
    }
}

@keyframes combat-enemy-defeated-fade {
    0% {
        opacity: 0.9;
        filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)) contrast(1.05);
    }
    100% {
        opacity: 0.18;
        filter: grayscale(0.65) drop-shadow(0 10px 18px rgba(0,0,0,0.55));
    }
}

.combat-portrait.attack {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
    animation-fill-mode: both;
}

.combat-portrait.player.attack {
    animation: combat-lunge-right 220ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.combat-portrait.enemy.attack {
    animation: combat-lunge-left 220ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.combat-orbit.is-attacking {
    will-change: transform;
}

.combat-orbit[data-orbit="player"].is-attacking {
    animation: combat-orbit-lunge-right 220ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.combat-orbit[data-orbit="enemy"].is-attacking {
    animation: combat-orbit-lunge-left 220ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes combat-orbit-lunge-right {
    0% {
        transform: translateX(0);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    55% {
        transform: translateX(6px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }
    100% {
        transform: translateX(0);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
}

@keyframes combat-orbit-lunge-left {
    0% {
        transform: translateX(0);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    55% {
        transform: translateX(-6px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }
    100% {
        transform: translateX(0);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
}

@keyframes combat-lunge-right {
    0% { transform: translate(-50%, -50%) translateX(0); }
    55% { transform: translate(-50%, -50%) translateX(10px); }
    100% { transform: translate(-50%, -50%) translateX(0); }
}

@keyframes combat-lunge-left {
    0% { transform: translate(-50%, -50%) translateX(0); }
    55% { transform: translate(-50%, -50%) translateX(-10px); }
    100% { transform: translate(-50%, -50%) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-portrait.attack {
        animation: none;
    }
}

.combat-stat-icon {
    position: absolute;
    width: 48px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    color: rgba(230, 238, 247, 0.92);
}

.combat-stat-icon .svg {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    opacity: 0.95;
}

.combat-stat-icon .val {
    font-size: 11px;
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.combat-stat-icon.pos-tl { top: 14px; left: 14px; }
.combat-stat-icon.pos-tr { top: 14px; right: 14px; }
.combat-stat-icon.pos-ml { top: 50%; left: 14px; transform: translateY(-50%); }
.combat-stat-icon.pos-mr { top: 50%; right: 14px; transform: translateY(-50%); }
.combat-stat-icon.pos-bl { bottom: 14px; left: 14px; }
.combat-stat-icon.pos-br { bottom: 14px; right: 14px; }

.combat-log {
    display: block;
    position: relative;
    margin: 0 2px;
    /* Flex inside .combat-popup-body so it shrinks on small screens instead of overlapping the footer buttons */
    flex: 1 1 150px;
    min-height: 110px;
    height: auto;
    max-height: none;
    overflow: auto;
    background: rgba(0,0,0,0.52);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 10px 12px;
    color: rgba(230, 238, 247, 0.92);
    font-size: 0.92em;
    line-height: 1.35;
    z-index: 4;
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

/* Use the same scrollbar styling as the in-game log */
.combat-log::-webkit-scrollbar {
    width: 12px;
}

.combat-log::-webkit-scrollbar-track {
    background: #111;
}

.combat-log::-webkit-scrollbar-thumb {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5);
    border-radius: 6px;
    border: 3px solid #111;
}

.combat-log::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8);
}

.combat-log {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.6) #111;
}

.combat-log-line {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}

.combat-log-line:last-child {
    border-bottom: none;
}

.combat-log-time {
    color: rgba(230, 238, 247, 0.6);
    margin-right: 8px;
}

/* Color-coded combat log */
.combat-log-line.kind-player-hit span:last-child {
    color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.95);
}

.combat-log-line.kind-player-miss span:last-child {
    color: rgba(230, 238, 247, 0.65);
}

.combat-log-line.kind-enemy-hit span:last-child {
    color: rgba(239, 68, 68, 0.95);
}

.combat-log-line.kind-enemy-miss span:last-child {
    color: rgba(230, 238, 247, 0.65);
}

.combat-log-line.kind-item span:last-child {
    color: rgba(251, 191, 36, 0.95);
}

.combat-log-line.kind-player-crit span:last-child {
    color: rgba(255, 241, 168, 0.98);
}

.combat-log-line.kind-system span:last-child {
    color: rgba(147, 197, 253, 0.95);
}

.combat-log-line.kind-win span:last-child {
    color: rgba(52, 211, 153, 0.98);
}

.combat-log-line.kind-lose span:last-child {
    color: rgba(248, 113, 113, 0.98);
}

.combat-log-line.kind-enemy-crit span:last-child {
    color: rgba(255, 209, 209, 0.98);
}

.combat-popup-actions {
    padding: 0;
    margin-top: 12px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-shrink: 0;
    /* Match story popup footer treatment */
    border-top: 2px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.4);
    padding-top: 10px;
    background: transparent;
}

/* Combat uses .menu-button (large by default); override to match Story popup nav button sizing */
.combat-popup-actions .combat-btn {
    /* Mirror .story-nav-button sizing rules */
    flex: 0 0 20%;
    max-width: 20%;
    width: 20%;
    min-width: 110px;
    height: 36px;
    margin: 0;
    padding: 7px 14px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    box-sizing: border-box;
    transform: none;
}

.combat-popup-actions .combat-btn:hover {
    transform: none;
}

.combat-btn.hidden {
    display: none;
}

/* Log toggle is a bottom action button on mobile/compact only. */
.combat-popup-actions .combat-btn-log {
    display: none;
}

.combat-btn-primary {
    border-color: rgba(var(--active-glow-r, 105), var(--active-glow-g, 240), var(--active-glow-b, 174), 0.7);
}

.combat-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive comfort tweaks (short viewports / small screens)
   Goal: keep Retreat/Close always visible and reduce scrolling pressure. */

@media (max-width: 720px) {
    /* Use more of the viewport on narrow screens while keeping padding via overlay */
    .combat-popup-content {
        width: 94vw;
        max-width: 900px;
        height: 86vh;
        max-height: calc(100vh - 40px);
    }

    .combat-popup-body {
        gap: 10px;
    }

    .combat-popup-actions {
        margin-top: 12px;
    }

    .combat-popup-actions .combat-btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-height: 760px) {
    /* Short screens: compact the tall orbit+portrait area and tighten spacing */
    .combat-popup-content {
        height: 90vh;
        max-height: calc(100vh - 40px);
        padding: 16px;
    }

    .combat-popup-content.compact-header .combat-popup-header {
        margin-bottom: 10px;
    }

    .combat-popup-body {
        gap: 10px;
    }

    .combat-bars {
        gap: 10px;
    }

    .combat-bar-group {
        padding: 8px;
    }

    .combat-orbit {
        height: 148px;
    }

    .combat-portrait {
        height: 136px;
    }

    .combat-ability-row {
        margin-top: 8px;
        gap: 8px;
    }

    .combat-log {
        min-height: 96px;
        padding: 8px 10px;
        font-size: 0.9em;
    }

    .combat-popup-actions {
        margin-top: 12px;
    }
}

/* Phone-landscape (primary target: iPhone 12 Pro landscape 844x390)
   Goal: remove the header bar and compact everything so combat fits cleanly. */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
    .combat-popup-overlay {
        padding: 10px;
    }

    #combatPopup .combat-popup-content.story-popup-content {
        height: 92vh;
        max-height: calc(100vh - 20px);
        padding: 12px;
    }

    /* Remove the large header region entirely on mobile. */
    #combatPopup .combat-popup-header {
        display: none;
    }

    /* Save vertical space: move combatant names into the frame instead of a dedicated top row. */
    #combatPopup .combat-bar-top {
        display: none;
    }

    #combatPopup .combat-orbit::before {
        content: attr(data-name);
        position: absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
        font-size: 12px;
        color: rgba(230, 238, 247, 0.92);
        text-shadow: 0 2px 10px rgba(0,0,0,0.85);
        text-align: center;
        pointer-events: none;
        z-index: 5;
    }

    .combat-popup-body {
        gap: 8px;
    }

    .combat-bars {
        grid-template-columns: 1fr 54px 1fr;
        gap: 10px;
    }

    .combat-bar-group {
        padding: 6px;
        border-radius: 9px;
    }

    .combat-bar-top {
        margin-bottom: 6px;
        min-height: 22px;
    }

    .combat-bar-overlay {
        font-size: 10px;
    }

    .combat-orbit {
        height: 122px;
    }

    .combat-portrait { height: 108px; }
    .combat-portrait.enemy { height: 102px; }

    .combat-stat-icon {
        width: 38px;
        height: 32px;
        gap: 2px;
        border-radius: 7px;
    }

    .combat-stat-icon .svg {
        width: 14px;
        height: 14px;
    }

    .combat-stat-icon .val {
        font-size: 10px;
    }

    .combat-stat-icon.pos-tl { top: 10px; left: 10px; }
    .combat-stat-icon.pos-tr { top: 10px; right: 10px; }
    .combat-stat-icon.pos-ml { left: 10px; }
    .combat-stat-icon.pos-mr { right: 10px; }
    .combat-stat-icon.pos-bl { bottom: 10px; left: 10px; }
    .combat-stat-icon.pos-br { bottom: 10px; right: 10px; }

    .combat-ability-row {
        margin-top: 8px;
        gap: 8px;
    }

    .combat-ability-btn {
        height: 30px;
        min-width: 40px;
        padding: 5px 8px;
        border-radius: 9px;
        font-size: 11px;
    }

    .combat-ability-row .combat-stim-icon {
        padding: 5px 8px;
    }

    .combat-pause-toggle {
        width: 44px;
        height: 44px;
    }

    .combat-pause-icon {
        width: 18px;
        height: 18px;
    }

    .combat-pause-text {
        display: none;
    }

    .combat-speed-toggle {
        min-width: 44px;
        height: 26px;
        padding: 0 8px;
        font-size: 12px;
    }

    .combat-log-toggle {
        display: grid;
        min-width: 44px;
        height: 26px;
        padding: 0 8px;
        font-size: 12px;
    }

    .combat-log {
        flex: 0 0 64px;
        min-height: 56px;
        max-height: 64px;
        padding: 8px 10px;
        font-size: 0.78em;
        line-height: 1.22;
        border-radius: 10px;
    }

    .combat-log-line {
        padding: 2px 0;
    }

    .combat-log-time {
        margin-right: 6px;
    }

    /* Expanded log overlay: show more rows without growing the popup. */
    #combatPopup[data-log-expanded="1"] .combat-popup-body {
        overflow: hidden;
    }

    #combatPopup[data-log-expanded="1"] .combat-bars {
        opacity: 0.20;
    }

    #combatPopup[data-log-expanded="1"] .combat-log {
        position: absolute;
        inset: 0;
        margin: 0;
        flex: 0 0 auto;
        min-height: 0;
        max-height: none;
        padding: 10px 12px;
        font-size: 0.82em;
        line-height: 1.22;
        z-index: 20;
        border-radius: 12px;
        background: rgba(0,0,0,0.72);
        border-color: rgba(255,255,255,0.12);
        box-shadow: 0 16px 32px rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
    }

    .combat-popup-actions {
        margin-top: 10px;
        padding-top: 8px;
        gap: 8px;
        border-top: 0;
        flex-wrap: nowrap;
    }

    .combat-popup-actions .combat-btn {
        height: 32px;
        padding: 6px 10px;
        font-size: 13px;
        min-width: 0;
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }

    .combat-popup-actions .combat-btn-log {
        display: inline-flex;
    }
}

/* Forced compact mode: apply mobile comfort rules on wide landscape devices (e.g., ~915×412). */
html.is-compact #combatPopup .combat-popup-actions {
    flex-wrap: nowrap;
}

html.is-compact #combatPopup .combat-popup-actions .combat-btn {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

html.is-compact #combatPopup .combat-popup-actions .combat-btn-log {
    display: inline-flex;
}

html.is-compact #combatPopup .combat-log {
    font-size: 0.78em;
    line-height: 1.22;
}

html.is-compact #combatPopup .combat-log-line {
    padding: 2px 0;
}

html.is-compact #combatPopup[data-log-expanded="1"] .combat-log {
    font-size: 0.82em;
    line-height: 1.22;
}