/* Отдельный контейнер боевого экрана. */
.battle-screen {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100% - 18px));
    margin: auto;
    padding: 28px 0 40px;
}

.battle-screen[hidden] {
    display: none;
}

/* Заголовок боя, счётчик раундов и возврат в замок. */
.battle-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.battle-eyebrow {
    color: var(--gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.battle-header h1 {
    margin: 5px 0 0;
    font: 600 clamp(24px, 4vw, 38px) Georgia, serif;
}

.battle-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.round-badge,
.leave-battle {
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #0000004d;
}

.round-badge strong {
    color: var(--text);
}

.leave-battle {
    cursor: pointer;
    color: var(--gold);
    transition: 0.15s;
}

.leave-battle:hover {
    border-color: var(--gold);
    filter: brightness(1.15);
}

/* Арена с карточками героя и монстра. */
.arena {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: stretch;
    gap: 14px;
}

.fighter,
.battle-panel {
    border: 1px solid var(--line);
    background: #161b26eb;
    box-shadow: 0 24px 70px #00000059;
}

.fighter {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 245px;
    overflow: hidden;
    border-radius: 18px;
}

.hero-card {
    border-top: 2px solid #5f91d1;
}

.monster-card {
    border-top: 2px solid #b94b51;
}

.portrait {
    display: grid;
    place-items: center;
    font-size: 80px;
    text-shadow: 0 8px 20px #000000a6;
}

.hero-portrait {
    background: radial-gradient(
        circle,
        #304b67,
        #141a24 68%
    );
}

.hero-portrait {
    position: relative;
    overflow: hidden;
    background: radial-gradient(
        circle,
        #304b67,
        #141a24 68%
    );
}

.hero-portrait-image {
    position: absolute;

    width: 150px;
    height: 150px;

    object-fit: contain;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

/* Мужские портреты героя в бою. */
.hero-portrait-image.portrait-male-paladin {
    width: 110px;
    height: 110px;
    top: 60%;
}

.hero-portrait-image.portrait-male-mage {
    width: 110px;
    height: 110px;
    top: 55%;
}

.hero-portrait-image.portrait-male-rogue {
    width: 110px;
    height: 110px;
    top: 55%;
}

.hero-portrait-image.portrait-male-archer {
    width: 115px;
    height: 115px;
    left: 55%;
    top: 55%;
}

.hero-portrait-image.portrait-male-druid {
    width: 115px;
    height: 115px;
    top: 55%;
}

/* Женские портреты героя в бою: регулируются независимо от мужских. */
.hero-portrait-image.portrait-female-paladin {
    width: 110px;
    height: 110px;
    top: 60%;
}

.hero-portrait-image.portrait-female-mage {
    width: 110px;
    height: 110px;
    top: 55%;
}

.hero-portrait-image.portrait-female-rogue {
    width: 130px;
    height: 130px;
    top: 55%;
}

.hero-portrait-image.portrait-female-archer {
    width: 115px;
    height: 115px;
    left: 55%;
    top: 55%;
}


.hero-portrait-image.portrait-female-druid {
    width: 115px;
    height: 115px;
    top: 55%;
}

.monster-portrait {
    position: relative;
    overflow: hidden;

    background: radial-gradient(
        circle,
        #66373c,
        #21171b 68%
    );
}

/* Росчерк меча и реакция карточки на попадание. */
.hit-effect {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.hit-effect i {
    --slash-angle: -34deg;
    position: absolute;
    top: 48%;
    left: 50%;
    width: 125px;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(
        90deg,
        transparent,
        #ffffff 28%,
        #ffd38a 58%,
        transparent
    );
    box-shadow:
        0 0 9px #ffffff,
        0 0 22px #e4a33e;
    transform:
        translate(-50%, -50%)
        rotate(var(--slash-angle))
        scaleX(0.15);
}

.hit-effect i:last-child {
    --slash-angle: 34deg;
    animation-delay: 0.08s;
}

.fighter.is-hit {
    animation: impact-shake 0.42s ease;
}

.fighter.is-hit .hit-effect {
    opacity: 1;
}

.fighter.is-hit .hit-effect i {
    animation: sword-slash 0.42s ease-out both;
}

.fighter.is-hit .hit-effect i:last-child {
    animation-delay: 0.07s;
}

.fighter.is-attacking .portrait {
    animation: attack-lunge 0.35s ease;
}

@keyframes sword-slash {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--slash-angle))
            scaleX(0.1);
    }

    28% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--slash-angle))
            scaleX(1.25);
    }
}

@keyframes impact-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(-7px);
        filter: brightness(1.45);
    }

    65% {
        transform: translateX(5px);
    }
}

@keyframes attack-lunge {
    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(10px) scale(1.07);
    }
}

/* Информация о бойцах и полоски ресурсов. */
.fighter-info {
    padding: 24px 22px;
}

.name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.name-row h2 {
    margin: 0;
    font: 600 22px Georgia, serif;
}

.level {
    position: absolute;
    z-index: 7;
    top: 9px;
    left: 9px;
    padding: 4px 7px;
    border: 1px solid #4d719a;
    border-radius: 5px;
    color: #8bb9ef;
    font-size: 10px;
    font-weight: 800;
}

.level.danger {
    border-color: #8d4147;
    color: #f28a8f;
}

.role {
    margin: 5px 0 19px;
    color: var(--muted);
    font-size: 13px;
}

.bar-label {
    display: flex;
    justify-content: space-between;
    margin: 10px 1px 5px;
    color: var(--muted);
    font-size: 12px;
}

.bar-label strong {
    color: var(--text);
}

.bar {
    height: 11px;
    padding: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: #07090e;
    box-shadow: inset 0 0 0 1px #ffffff0f;
}

.bar i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #a32935,
        #e15a64
    );
    transition: width 0.35s ease;
}

.energy-bar i {
    background: linear-gradient(
        90deg,
        #316cb8,
        #63a4f4
    );
}

.monster-hp i {
    background: linear-gradient(
        90deg,
        #8e2832,
        #d74d56
    );
}

.stats {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.stats span {
    padding: 7px 9px;
    border-radius: 7px;
    color: #bbc0ca;
    background: #ffffff0a;
    font-size: 12px;
}

.monster-auto-clear {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 2px 6px;
    margin-top: 14px;
    padding: 6px 10px;
    border: 1px solid #77642e;
    border-radius: 8px;
    color: #d9dde5;
    background: #15150ee8;
    font: inherit;
    text-align: left;
}

.monster-auto-clear[hidden] {
    display: none;
}

.monster-auto-clear:not(:disabled) {
    cursor: pointer;
}

.monster-auto-clear span {
    grid-row: 1 / 3;
    font-size: 17px;
}

.monster-auto-clear b {
    color: #f0c77e;
    font-size: 11px;
}

.monster-auto-clear small {
    color: var(--muted);
    font-size: 9px;
}

.versus {
    display: grid;
    place-content: center;
    text-align: center;
}

.versus span {
    color: var(--gold);
    font: 700 25px Georgia, serif;
}

.versus small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

/* Панель действий и журнал боя. */
.battle-panel {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 18px;
}

.action-side,
.log-side {
    padding: 22px;
}

.log-side {
    border-left: 1px solid var(--line);
    background: #05080d47;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-title span {
    font: 600 18px Georgia, serif;
}

.section-title small {
    color: var(--muted);
}

.animation-speed-toggle {
    cursor: pointer;
    min-width: 82px;
    padding: 6px 9px;
    border: 1px solid #796331;
    border-radius: 9px;
    color: #d5c8ab;
    background: #111722;
    font-size: 11px;
    font-weight: 900;
}

.animation-speed-toggle.is-active {
    border-color: #e1ad48;
    color: #ffd477;
    background: #3a2914;
    box-shadow: 0 0 12px #e3a53e33;
}

.animation-speed-toggle.is-locked {
    opacity: 0.48;
}

#battleScreen.fast-battle-animation .fighter.is-attacking .portrait {
    animation-duration: 0.175s;
}

#battleScreen.fast-battle-animation .fighter.is-hit,
#battleScreen.fast-battle-animation .fighter.is-hit .hit-effect i {
    animation-duration: 0.21s;
}

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.battle-skill-actions {
    display: contents;
}

.actions button,
.battle-modal-card button {
    cursor: pointer;
    border: 1px solid #3f4653;
    border-radius: 10px;
    color: var(--text);
    background: linear-gradient(
        #262c37,
        #191e27
    );
    transition:
        transform 0.15s,
        border-color 0.15s,
        filter 0.15s;
}

.actions button {
    position: relative;
    display: grid;
    grid-template-columns: 35px 1fr;
    padding: 12px;
    text-align: left;
}

.actions button:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--gold);
    filter: brightness(1.12);
}

.actions button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.actions button > span {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 25px;
}

.actions button b {
    font-size: 14px;
}

.actions button small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.actions .skill {
    border-color: #784b32;
}

.battle-log {
    height: 294px;
    overflow-y: auto;
    padding-right: 8px;
}

.log-entry {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff0e;
    animation: battle-log-appear 0.25s ease;
}

.log-entry i {
    font-style: normal;
    font-size: 20px;
}

.log-entry p {
    margin: 0;
    color: #c7cbd2;
    font-size: 13px;
    line-height: 1.45;
}

.log-entry strong {
    color: #ffffff;
}

@keyframes battle-log-appear {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
}

/* Окно победы или поражения. */
.battle-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #030508c7;
    backdrop-filter: blur(8px);
}

.battle-modal[hidden] {
    display: none;
}

.battle-modal-card {
    width: min(380px, 100%);
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #171c25;
    box-shadow: 0 30px 100px #000000;
    text-align: center;
}

.result-icon {
    font-size: 55px;
}

.battle-modal-card h2 {
    margin: 10px 0 6px;
    font: 600 30px Georgia, serif;
}

.battle-modal-card p {
    color: var(--muted);
}

.battle-result-summary {
    display: grid;
    gap: 8px;
    margin: 12px 0 16px;
}

.battle-result-summary span {
    display: block;
}

.battle-result-rewards {
    color: #e8c978;
    font-weight: 700;
}

.battle-result-floor {
    color: #c9cbff;
    font-weight: 800;
}

.battle-result-drop {
    padding-top: 8px;
    border-top: 1px solid #ffffff12;
    color: var(--drop-rarity-color, #b4bac3);
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 0 10px var(--drop-rarity-glow, transparent);
}

.battle-result-drop.drop-rarity-gray {
    --drop-rarity-color: #e0e2e5;
    --drop-rarity-glow: #ffffff38;
}

.battle-result-drop.drop-rarity-green {
    --drop-rarity-color: #55bd6b;
    --drop-rarity-glow: #3dbb5b66;
}

.battle-result-drop.drop-rarity-blue {
    --drop-rarity-color: #4b91df;
    --drop-rarity-glow: #378de577;
}

.battle-result-drop.drop-rarity-violet {
    --drop-rarity-color: #a568dc;
    --drop-rarity-glow: #a05ce377;
}

.battle-result-drop.drop-rarity-orange {
    --drop-rarity-color: #df8b3f;
    --drop-rarity-glow: #e9843077;
}

.battle-result-drop.drop-rarity-mythical {
    --drop-rarity-color: #e05757;
    --drop-rarity-glow: #e2494977;
}

.battle-result-level {
    color: #8fc9ff;
    font-size: 12px;
}

.battle-modal-card button {
    margin-top: 10px;
    padding: 12px 24px;
    border-color: #8b6836;
}

.battle-modal-card .modal-leave {
    display: block;
    width: 100%;
    color: var(--muted);
    background: transparent;
}

.battle-modal-card .modal-repeat {
    display: block;
    width: 100%;
    border-color: #9b6d2f;
    color: #ffe1a1;
}

.battle-modal-card .modal-repeat[hidden] {
    display: none;
}

/* Перестраивает арену для планшетов и узких окон. */
@media (max-width: 9999px) {
    .arena {
        grid-template-columns: 1fr;
    }

    .versus {
        min-height: 45px;
    }

    .fighter {
        grid-template-columns: 110px 1fr;
    }

    .battle-panel {
        grid-template-columns: 1fr;
    }

    .log-side {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

/* Компактный боевой интерфейс для телефона. */
@media (max-width: 9999px) {
    .battle-screen {
        width: min(520px, calc(100% - 18px));
        padding: 12px 0 24px;
    }

    .battle-header {
        align-items: start;
        margin-bottom: 12px;
    }

    .battle-eyebrow {
        font-size: 8px;
    }

    .battle-header h1 {
        max-width: 245px;
        font-size: 22px;
        line-height: 1.1;
    }

    .battle-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
    }

    .round-badge,
    .leave-battle,
    .battle-header-actions .animation-speed-toggle {
        padding: 8px 10px;
        font-size: 11px;
    }

    /* На телефоне оба участника всегда находятся рядом. */
    .arena {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .fighter {
        display: block;
        min-height: 0;
        border-radius: 14px;
    }

    .portrait {
        height: 92px;
        font-size: 52px;
    }

    .fighter-info {
        padding: 10px 10px 12px;
    }

    .name-row {
        align-items: start;
    }

    .name-row h2 {
        font-size: 15px;
        line-height: 1.1;
    }

    .level {
        top: 6px;
        left: 6px;
        padding: 3px 4px;
        font-size: 7px;
    }

    .role,
    .stats {
        display: none;
    }

    .bar-label {
        gap: 5px;
        margin-top: 9px;
        font-size: 9px;
    }

    .bar-label strong {
        white-space: nowrap;
    }

    .bar {
        height: 9px;
    }

    .monster-auto-clear {
        margin-top: 9px;
        padding: 5px 8px;
    }

    /* VS остаётся небольшой меткой поверх центра арены. */
    .versus {
        position: absolute;
        top: 74px;
        left: 50%;
        z-index: 6;
        min-height: 0;
        padding: 4px 6px;
        border: 1px solid #ffffff14;
        border-radius: 99px;
        background: #0b0f15e8;
        transform: translateX(-50%);
    }

    .versus span {
        font-size: 13px;
    }

    .versus small {
        display: none;
    }

    /* Действия располагаются одной полосой сразу под ареной. */
    .battle-panel {
        margin-top: 10px;
        border-radius: 14px;
    }

    .action-side,
    .log-side {
        padding: 12px;
    }

    .section-title {
        margin-bottom: 9px;
    }

    .section-title span {
        font-size: 16px;
    }

    .section-title small {
        font-size: 9px;
    }

    .actions {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .actions button {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        min-width: 0;
        padding: 8px 4px;
        text-align: center;
    }

    .actions button > span {
        grid-row: auto;
        font-size: 22px;
    }

    .actions button b {
        margin-top: 3px;
        font-size: 11px;
    }

    .actions button small {
        font-size: 8px;
    }

    /* На виду остаются несколько последних строк журнала. */
    .battle-log {
        height: 252px;
    }

    .log-entry {
        grid-template-columns: 25px 1fr;
        gap: 6px;
        padding: 7px 0;
    }

    .log-entry i {
        font-size: 16px;
    }

    .log-entry p {
        font-size: 11px;
        line-height: 1.35;
    }
}