/* Cinematic tactical battlefield */
#screen-combat {
    --combat-gold: #d9b76e;
    --combat-ink: #090d12;
    --combat-glass: rgba(8, 12, 17, 0.78);
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(4, 8, 14, 0.12) 0%, rgba(3, 6, 10, 0.04) 48%, rgba(2, 4, 7, 0.72) 100%),
        url('../../images/battle/Arena.png') center / cover no-repeat;
}

#screen-combat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 54%, transparent 28%, rgba(1, 4, 8, 0.18) 66%, rgba(0, 0, 0, 0.62) 100%),
        linear-gradient(90deg, rgba(5, 8, 12, 0.2), transparent 25%, transparent 75%, rgba(5, 8, 12, 0.2));
}

.combat-header {
    position: relative;
    z-index: 120;
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 11px 72px 16px;
    background: linear-gradient(180deg, rgba(3, 6, 10, 0.9), rgba(3, 6, 10, 0));
    pointer-events: none;
}

.combat-header::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 183, 110, 0.55), transparent);
}

#combat-mission-name {
    justify-self: start;
    margin: 0;
    color: #f4ead1;
    font-family: 'Press Start 2P', serif;
    font-size: clamp(0.6rem, 1.15vw, 0.82rem);
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px #000;
}

#combat-round {
    justify-self: center;
    padding: 7px 14px;
    border: 1px solid rgba(217, 183, 110, 0.35);
    border-radius: 999px;
    color: #d8cfba;
    background: rgba(5, 8, 12, 0.66);
    backdrop-filter: blur(8px);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#btn-settings-combat {
    pointer-events: auto;
}

.battlefield {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    min-height: 0;
    padding: 0 22px 126px;
    overflow: hidden;
}

.battlefield::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.58) 100%);
    transition: opacity 220ms ease;
}

.battlefield.combat-focus-active::after {
    opacity: 1;
}

.tactical-grid-wrapper {
    position: absolute;
    inset: 0 20px 112px;
}

.tactical-grid {
    position: relative;
    width: min(100%, 1240px);
    height: 100%;
    margin: 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

.formation-guides {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.placement-mode .formation-guides {
    opacity: 0.56;
}

.formation-guide {
    fill: none;
    stroke-width: 0.12;
    stroke-linecap: round;
    stroke-dasharray: 0.8 1.2;
    vector-effect: non-scaling-stroke;
}

.formation-guide.player-guide {
    stroke: rgba(122, 197, 139, 0.72);
    filter: drop-shadow(0 0 3px rgba(67, 150, 91, 0.55));
}

.formation-guide.enemy-guide {
    stroke: rgba(181, 90, 84, 0.42);
}

.grid-cell {
    position: absolute;
    left: var(--cell-left);
    top: var(--cell-top);
    width: 22%;
    height: 20%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    transform: translate(-50%, -50%) scale(var(--depth-scale));
    transform-origin: 50% 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.grid-cell::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2%;
    width: 78%;
    height: 34%;
    z-index: -1;
    transform: translateX(-50%);
    border: 1px solid transparent;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(105, 157, 115, 0.18), transparent 68%);
    transition: opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.placement-mode .grid-cell.player-zone::after {
    opacity: 1;
    border-color: rgba(122, 197, 139, 0.5);
    box-shadow: 0 0 18px rgba(67, 150, 91, 0.18), inset 0 0 16px rgba(67, 150, 91, 0.12);
}

.placement-mode .grid-cell.enemy-zone::after {
    opacity: 0.28;
    border-color: rgba(163, 70, 70, 0.4);
    background: radial-gradient(ellipse, rgba(163, 70, 70, 0.12), transparent 68%);
}

.grid-cell.drag-over::after {
    opacity: 1 !important;
    border-color: #9ae0a8 !important;
    background: rgba(70, 158, 91, 0.28) !important;
    box-shadow: 0 0 28px rgba(92, 202, 117, 0.55), inset 0 0 22px rgba(92, 202, 117, 0.25) !important;
}

.combat-unit {
    --combat-advance-x: 0px;
    --combat-advance-y: 0px;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(96px, 12vw, 166px);
    height: clamp(210px, 29vw, 344px);
    transform: translateX(-50%);
    transform-origin: 50% 88%;
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    opacity: 1;
    isolation: isolate;
    transition:
        transform 260ms cubic-bezier(0.2, 0.75, 0.2, 1),
        filter 220ms ease,
        opacity 220ms ease;
}

.combat-unit.draggable {
    cursor: grab;
}

.combat-unit.draggable:active {
    cursor: grabbing;
}

.unit-portrait {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    filter: drop-shadow(0 12px 9px rgba(0, 0, 0, 0.72));
    transition: filter 180ms ease, transform 180ms ease;
}

.unit-portrait-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    pointer-events: none;
}

/* Assets are authored facing right. Mirroring belongs to the combat side, not
   to the character species, so allied monsters and opposing heroes work too. */
.unit-facing {
    position: absolute;
    inset: 0;
    transform-origin: center bottom;
}

.combat-unit[data-facing="left"][data-canonical-facing="right"] .unit-facing,
.combat-unit[data-facing="right"][data-canonical-facing="left"] .unit-facing {
    transform: scaleX(-1);
}

/* State frames use a wider transparent canvas for weapons and effects. Keep
   their height tied to the canonical idle portrait; fitting by width would
   make the character visibly shrink in extended poses. */
.combat-unit.has-state-art[data-visual-type="hero"] .unit-portrait-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    height: 100%;
    max-width: none;
    translate: -50% 0;
}

/* Authored monster frames share one 1024x800 transparent canvas. Render by
   height so extended weapons and spell effects never shrink the creature. */
.combat-unit.has-state-art[data-visual-type="monster"] .unit-portrait-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    height: 100%;
    max-width: none;
    translate: -50% 0;
}

/* Non-idle assets are 1280×800 while idle is 408×658. Rendering the extended
   canvas at this proportional height keeps one raster pixel at the same visual
   scale and lets raised weapons extend above the idle frame. */
.combat-unit.has-state-art[data-visual-type="hero"]:not(.combat-state-idle) .unit-portrait-image {
    height: calc(100% * 800 / 658);
}

/* Character art contains a little transparent space below the feet. Sink the
   full figure into its placement marker while keeping the marker itself fixed. */
.combat-unit.full-figure .unit-portrait {
    transform: translateY(var(--combat-ground-offset, 6%));
    transform-origin: center bottom;
    scale: var(--combat-visual-scale, 1);
}

/* Monster canvases have only 28px of transparent space below the feet,
   versus roughly 49px in hero idle art. Lift their portrait so both species
   plant their feet on the same formation-slot baseline. */
.combat-unit.full-figure[data-visual-type="monster"] .unit-portrait {
    --combat-ground-offset: 0.5%;
}

.combat-unit.full-figure .unit-ground-shadow {
    transform: translateX(-50%) scaleX(var(--combat-visual-scale, 1));
}

.combat-unit.enemy-bust {
    width: clamp(88px, 9vw, 124px);
    height: clamp(148px, 18vw, 220px);
}

.combat-unit.enemy-bust .unit-portrait {
    inset: auto 3% 13%;
    width: 94%;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid rgba(139, 54, 49, 0.8);
    border-radius: 48% 48% 42% 42%;
    background: radial-gradient(circle at 50% 35%, #352729, #0b0d11 76%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8), 0 8px 20px rgba(0, 0, 0, 0.6);
}

.combat-unit.enemy-bust .unit-portrait-image {
    object-fit: cover;
}

.unit-ground-shadow {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: 86%;
    height: 10%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.68);
    filter: blur(7px);
}

.unit-focus-ring {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -1%;
    width: 82%;
    height: 10%;
    transform: translateX(-50%);
    border: 2px solid rgba(217, 183, 110, 0);
    border-radius: 50%;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.combat-unit.acting .unit-focus-ring,
.combat-unit.combat-focus-participant .unit-focus-ring {
    border-color: rgba(236, 213, 158, 0.92);
    background: rgba(255, 241, 194, 0.16);
    box-shadow: 0 0 22px rgba(225, 191, 112, 0.7), inset 0 0 18px rgba(255, 244, 205, 0.2);
}

.combat-unit.hero:hover .unit-portrait,
.combat-unit.draggable:focus-visible .unit-portrait {
    filter: drop-shadow(0 12px 9px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 10px rgba(205, 230, 210, 0.45));
}

.combat-unit:focus-visible {
    outline: 2px solid #ead69d;
    outline-offset: 5px;
}

.unit-info {
    position: absolute;
    z-index: 5;
    top: -39px;
    left: 50%;
    width: clamp(96px, 9.5vw, 130px);
    padding: 4px 6px 5px;
    transform: translateX(-50%);
    border: 1px solid rgba(213, 193, 154, 0.35);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(13, 17, 22, 0.9), rgba(4, 7, 10, 0.78));
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(5px);
}

.combat-unit.full-figure .unit-info {
    top: 22%;
}

.combat-unit.enemy-bust .unit-info {
    top: 4%;
}

/* Formation HUD: player layout and its exact horizontal mirror for the enemy. */
.combat-unit.formation-player.formation-backline .unit-info {
    top: 17%;
    right: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}

.combat-unit.formation-player.formation-frontline .unit-info {
    top: auto;
    right: -38%;
    bottom: 12%;
    left: auto;
    transform: none;
}

.combat-unit.formation-enemy.formation-backline .unit-info {
    top: 17%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateY(-50%);
}

.combat-unit.formation-enemy.formation-frontline .unit-info {
    top: auto;
    right: auto;
    bottom: 12%;
    left: -38%;
    transform: none;
}

.combat-unit.formation-player.formation-backline .unit-identity,
.combat-unit.formation-enemy.formation-frontline .unit-identity {
    flex-direction: row-reverse;
}

.unit-identity {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 3px;
}

.unit-name {
    min-width: 0;
    overflow: hidden;
    color: #f3eee2;
    font-size: clamp(0.55rem, 0.78vw, 0.68rem);
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unit-class {
    color: #9f967f;
    font-size: 0.48rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.unit-status-list {
    display: flex;
    min-height: 9px;
    margin-top: 3px;
    gap: 2px;
    overflow: hidden;
}

.unit-status {
    padding: 1px 3px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    background: rgba(35, 45, 58, 0.92);
    color: #d9e5f2;
    font-size: 0.36rem;
    line-height: 1.15;
    white-space: nowrap;
}

.unit-status.status-stun,
.unit-status.status-dot {
    border-color: rgba(255, 126, 74, 0.65);
    background: rgba(91, 31, 18, 0.94);
    color: #ffc09e;
}

.unit-status.status-debuff {
    border-color: rgba(181, 108, 231, 0.7);
    background: rgba(61, 24, 77, 0.94);
    color: #edc5ff;
}

.unit-status.status-shield,
.unit-status.status-damageReduction,
.unit-status.status-block {
    border-color: rgba(99, 185, 255, 0.65);
    background: rgba(18, 48, 78, 0.94);
    color: #a9ddff;
}

.unit-status.status-stealth,
.unit-status.status-nextAttack {
    border-color: rgba(194, 132, 255, 0.65);
    background: rgba(54, 26, 77, 0.94);
    color: #e5c2ff;
}

.hp-bar-wrap,
.mp-bar-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
}

.hp-bar-wrap {
    height: 12px;
}

.mp-bar-wrap {
    height: 7px;
    margin-top: 2px;
}

.hp-fill,
.mp-fill {
    height: 100%;
    transition: width 260ms ease;
}

.hp-fill {
    background: linear-gradient(90deg, #871e22, #e3483e 62%, #ff7760);
    box-shadow: 0 0 7px rgba(231, 66, 58, 0.45);
}

.mp-fill {
    background: linear-gradient(90deg, #295a9d, #55a8e5);
}

.bar-value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.47rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
}

.combat-unit.stone {
    width: clamp(78px, 8vw, 112px);
    height: clamp(88px, 10vw, 145px);
}

.obstacle-image {
    position: absolute;
    z-index: 2;
    inset: 0 0 8%;
    width: 100%;
    height: 92%;
    object-fit: contain;
    filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.8));
}

.obstacle-bar {
    position: absolute;
    z-index: 3;
    left: 10%;
    right: 10%;
    bottom: 1%;
    width: auto;
    height: 5px;
}

.obstacle-bar .hp-fill {
    background: linear-gradient(90deg, #625b50, #b0a68f);
}

.combat-unit.down {
    opacity: 0.42;
    filter: grayscale(1) brightness(0.48);
}

.battlefield.combat-focus-active .combat-unit:not(.combat-focus-participant) {
    opacity: 0.46;
    filter: blur(4px) brightness(0.42) saturate(0.45);
}

.battlefield.combat-focus-active .combat-unit.combat-focus-participant {
    z-index: 95 !important;
    filter: none;
}

.combat-unit.cinematic-actor {
    z-index: 110 !important;
    transform:
        translateX(-50%)
        translate(var(--combat-advance-x), var(--combat-advance-y))
        scale(1.12);
}

.combat-unit.combat-focus-target .unit-portrait {
    filter: drop-shadow(0 12px 9px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 10px rgba(190, 59, 52, 0.62));
}

#combat-damage-overlay,
#combat-popups {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#combat-damage-overlay {
    z-index: 140;
}

#combat-popups {
    z-index: 145;
}

.combat-footer {
    position: absolute;
    z-index: 125;
    left: 50%;
    bottom: 12px;
    width: min(840px, calc(100% - 32px));
    margin: 0;
    padding: 9px;
    transform: translateX(-50%);
    border: 1px solid rgba(217, 183, 110, 0.26);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(8, 12, 17, 0.88), rgba(3, 6, 9, 0.94));
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
}

.combat-footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(230px, 0.75fr);
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.combat-log {
    width: 100%;
    height: 76px;
    padding: 8px 10px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.48);
    color: #9ebca1;
    font-family: 'Courier New', monospace;
    font-size: 0.67rem;
    text-align: left;
}

.log-line {
    margin-bottom: 2px;
    line-height: 1.25;
}

.action-panel {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-panel .btn {
    min-height: 44px;
    border-radius: 7px;
    letter-spacing: 0.07em;
}


@keyframes combat-strike {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    44% { transform: rotate(-2deg) translateY(-5px) scale(1.04); }
    62% { transform: rotate(1deg) translateY(1px) scale(1.02); }
}

.anim-melee-strike .unit-portrait {
    animation: combat-strike 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 900px), (max-height: 620px) {
    .combat-header {
        min-height: 50px;
        padding: 8px 58px 12px;
    }

    .battlefield {
        padding-bottom: 108px;
    }

    .tactical-grid-wrapper {
        bottom: 96px;
    }

    .combat-unit {
        width: clamp(68px, 9vw, 102px);
        height: clamp(148px, 23vw, 238px);
    }

    .combat-unit.enemy-bust {
        width: clamp(70px, 8vw, 96px);
        height: clamp(120px, 16vw, 174px);
    }

    .unit-info {
        top: -32px;
        width: 98px;
    }

    .unit-class {
        display: none;
    }

    .combat-footer {
        bottom: 7px;
    }

    .combat-log {
        height: 64px;
    }
}

@media (max-width: 680px) {
    .combat-footer-main {
        grid-template-columns: 1fr;
    }

    .combat-log {
        display: none;
    }

    .combat-footer {
        width: calc(100% - 20px);
    }

}

@media (prefers-reduced-motion: reduce) {
    .combat-unit,
    .battlefield::after,
    .grid-cell,
    .unit-portrait {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}