:root {
    --battle-panel-max-width: 500px;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background-color: #201711;
    background-image: url('../../img_base/bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    user-select: none;
}

input,
textarea,
[contenteditable="true"] {
    user-select: text;
}

@media (max-width: 700px) {
    body {
        margin: 0 !important;
        background-attachment: scroll;
    }

    html:fullscreen .attack-planning,
    html:-webkit-full-screen .attack-planning {
        padding-top: max(env(safe-area-inset-top, 0px), 28px);
    }
}

.scrollable-content::-webkit-scrollbar {
    display: none !important;
}

.container {
    background-color: rgb(67, 51, 38);
    padding: 5px;
    margin-top: 20px;
    max-width: var(--battle-panel-max-width);
    min-height: 100vh;
    margin: auto;
}

.home-icon-link {
    position: fixed;
    right: 10px;
    bottom: 20px;
    display: none;
    width: 50px;
    height: 50px;
    z-index: 1000;
    text-decoration: none;
}

.home-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f3c24a;
    background-color: rgba(96, 65, 44, 0.62);
    border: 1px solid rgba(243, 194, 74, 0.78);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 3px 10px rgba(0, 0, 0, 0.38);
}

.home-icon-link:hover .home-icon {
    background-color: rgba(113, 76, 49, 0.6);
    border-color: rgba(243, 194, 74, 0.75);
}

@media (min-width: 640px) {
    .home-icon-link {
        display: block;
    }
}

.general-info {
    background-color: rgb(99, 68, 48);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}

.general-side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.general-side-attack {
    justify-content: flex-start;
}

.general-side-defense {
    justify-content: flex-end;
}

.general-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 0 10px;
}

.general-name {
    margin-left: 10px;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

.player-flanks {
    background-color: rgb(145, 98, 65);
    padding: 2px;
    color: #fff;
    font-weight: bold;
    margin-top: 2px;
}

.flanks-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgb(99, 68, 48);
    color: white;
    margin-right: 5px;
    font-weight: bolder;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flanks-button:hover {
    border-radius: 50%;
    background-color: rgba(243, 195, 74, 0.7);
    color: black;
    margin-right: 5px;
    font-weight: bolder;
}

.flanks-button.active {
    background-color: rgb(243, 194, 74);
    color: black;
}

.player-flank {
    background-color: rgb(145, 98, 65);
    padding: 2px;
    color: #fff;
    font-weight: bold;
    margin-top: 1px;
}

.attack-sections {
    margin: 10px 0;
    text-align: center;
}

.section-btn {
    flex-grow: 1;
    margin: 0 5px;
    padding: 5px 0;
    background-color: #b39265;
    color: #fff;
    border-radius: 5px;
}

.section-btn.active {
    background-color: #d7cab5;
    color: #6b5231;
}

.card-body {
    background-color: rgb(234, 208, 178);
    padding: 5px;
}

#wave-container > .card > .collapse > .card-body,
#wave-container > .card > .collapsing > .card-body {
    padding-top: 0;
}

.wave-body-columns {
    position: relative;
}

.wave-body-columns::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -5px;
    left: 50%;
    width: 2px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.8) 0 50%,
        rgba(119, 80, 54, 0.42) 50% 100%
    );
    pointer-events: none;
}

.card-body .row .bugfix .row>* {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.card-header button {
    text-decoration: none;
    color: rgb(68, 51, 38);
    font-size: 13px;
    font-weight: bolder;
}

.card-header button:hover,
.card-header button:active {
    color: rgb(68, 51, 38) !important;
}

.support-wave {
    margin: 20px 0;
    padding: 10px;
    background-color: #a67b4a;
    color: #fff;
    border-radius: 8px;
}

.support-wave h6 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.tool-slot,
.unit-slot {
    width: 40px;
    height: 40px;
    background-color: rgb(248, 238, 211);
    color: rgb(67, 51, 38);
    border: 1px solid rgb(67, 51, 38);
    border-radius: 0px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    font-weight: bolder;
    cursor: pointer;
}

.first-slot {
    margin-left: 15%;
}

.tool-slot:hover,
.unit-slot:hover {
    background-color: rgb(187, 178, 152);
    cursor: pointer;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #b39265;
    color: #fff;
}

.accordion-button:not(.collapsed)::after {
    filter: invert(100%);
}

.card {
    background-color: transparent;
    border: none;
    width: 100%;
}

.question-mark {
    color: white;
    background-color: grey;
    font-weight: bolder;
    margin-left: 10px;
}

.question-mark:hover {
    color: white;
    background-color: grey;
    font-weight: bolder;
    margin-left: 10px;
}

.close-button {
    color: white;
    background-color: rgb(168, 4, 4);
    font-weight: bolder;
    margin-right: 10px;
}

.close-button:hover {
    color: white;
    background-color: rgb(168, 4, 4);
    font-weight: bolder;
    margin-right: 10px;
}

.tools,
.units {
    font-weight: bolder;
    color: rgb(68, 51, 38);
    font-size: 13px;
}

.scrollable-content {
    height: calc(100vh - 198px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 8px solid rgb(68, 51, 38);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    transition: transform 0.2s ease;
    margin-right: 10px;
    transform: rotate(0deg);
}

.card-header button:not(.collapsed)+.arrow {
    transform: rotate(90deg);
}

.arrow.collapsed {
    transform: rotate(90deg);
}

.card-header {
    background-color: rgb(234, 208, 178);
    transition: background-color 0.3s ease;
    padding: 0px;
    margin-top: 3px;
}

#wave-container > .card,
#wave-container > .card > .card-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#wave-container > .card > .card-header > h6,
#wave-container > .card > .card-header > h6 > .btn-link {
    height: 34px;
    min-height: 34px;
}

.card-header.collapsed {
    background-color: rgb(243, 194, 74) !important;
}

.wave-clear-button {
    display: none;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0 20px 0 2px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(67, 51, 38);
    border-radius: 0;
    background-color: rgb(88, 117, 114);
    color: #fff;
    box-shadow:
        inset 1px 1px 0 rgba(184, 211, 207, 0.34),
        inset -1px -1px 0 rgba(37, 61, 61, 0.5);
}

.card-header .wave-clear-button,
.card-header .wave-clear-button:hover,
.card-header .wave-clear-button:active {
    color: #fff !important;
}

.card-header.collapsed .wave-clear-button {
    display: inline-flex;
}

.wave-clear-button:hover {
    border-color: rgb(67, 51, 38);
    background-color: rgb(101, 132, 141);
    filter: brightness(1.08);
}

.wave-clear-button:active {
    box-shadow:
        inset 1px 1px 0 rgba(37, 61, 61, 0.5),
        inset -1px -1px 0 rgba(184, 211, 207, 0.22);
    transform: translateY(1px);
}

.wave-clear-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
}

#wave-container .card-body .units,
#wave-container .card-body .tools {
    font-size: 11px;
}

.general-img,
.enemy-img {
    display: block;
    width: 60px;
    height: 76px;
    object-fit: fill;
}

.attack-planning {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.general-bg1 {
    background: radial-gradient(circle, rgb(179, 109, 109) 0%, rgb(133, 61, 61) 100%);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
}

.general-bg2 {
    background: radial-gradient(circle, rgb(101, 132, 141) 0%, rgb(40, 68, 77) 100%);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
}

.general-bg2.rift-disabled {
    pointer-events: none;
    cursor: not-allowed;
    filter: saturate(0.55) brightness(0.82);
    box-shadow: inset 0 0 0 1px rgba(67, 51, 38, 0.7);
}

.general-bg2.rift-disabled .enemy-img {
    opacity: 0.82;
}

.square2 {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px 0 47px;
    background-position: 9px center;
    background-size: 36px auto;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 0;
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.square2 span {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.square2:hover {
    transform: none;
    filter: brightness(1.08);
}

.square2.commander {
    background-image: url('../../img_base/battle_simulator/icon_commander_0.png');
    background-color: rgb(179, 109, 109);
    border: 2px solid rgb(67, 51, 38);
    box-shadow:
        inset 2px 2px 0 rgba(219, 141, 141, 0.48),
        inset -2px -2px 0 rgba(91, 39, 39, 0.78);
}

.square2.castellan {
    background-image: url('../../img_base/battle_simulator/icon_castellan_0.png');
    background-color: rgb(88, 117, 114);
    border: 2px solid rgb(67, 51, 38);
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.48),
        inset -2px -2px 0 rgba(37, 61, 61, 0.78);
}

@media (max-width: 520px) {
    .general-actions {
        padding: 0 5px;
    }

    .square2 span {
        font-size: clamp(10px, 3.4vw, 14px);
    }
}

@media (max-width: 480px) {
    .square2.commander,
    .square2.castellan {
        padding-right: 4px;
        padding-left: 4px;
        background-image: none;
    }
}

.square2.commander:active {
    box-shadow:
        inset 2px 2px 0 rgba(91, 39, 39, 0.78),
        inset -1px -1px 0 rgba(219, 141, 141, 0.28);
    transform: translateY(1px);
}

.square2.castellan:active {
    box-shadow:
        inset 2px 2px 0 rgba(37, 61, 61, 0.78),
        inset -1px -1px 0 rgba(184, 211, 207, 0.28);
    transform: translateY(1px);
}

.general-bg1,
.general-bg2 {
    width: 60px;
    min-width: 60px;
    height: 76px;
    min-height: 76px;
    padding: 0;
    overflow: hidden;
}

.btn-attack {
    color: white;
    background-color: green;
    min-width: 110px;
}

.btn-attack:hover {
    color: white;
    background-color: rgba(0, 128, 0, 0.8);
}

.vertical-line {
    background-color: rgb(119, 80, 54);
    width: 2px;
    height: 100%;
}

.unit-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.battle-report .unit-slot {
    flex-direction: column;
}

.battle-report .report-attackers .row,
.battle-report .report-defenders .row {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}

.battle-report .report-attackers .unit-slot,
.battle-report .report-defenders .unit-slot,
.battle-report .report-wave .unit-slot {
    width: calc(50% - 4px);
    height: 46px;
    margin-left: 0;
    background-color: rgb(248, 238, 211);
    border: 1px solid rgb(67, 51, 38);
    padding: 2px;
    flex-direction: row;
    gap: 0;
}

.battle-report .unit-icon {
    width: 50%;
    height: 100%;
    object-fit: contain;
}

.battle-report .unit-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 50%;
    background-color: transparent;
    border-left: 1px solid rgb(67, 51, 38);
    gap: 0;
}

.battle-report .unit-info .unit-count {
    position: static;
    background-color: rgb(248, 238, 211);
    color: rgb(67, 51, 38);
    font-size: 11px;
    font-weight: 700;
    height: 50%;
    line-height: 22px;
    text-align: center;
}

.battle-report .unit-info .unit-loss {
    position: static;
    background-color: rgb(248, 238, 211);
    color: #d3222a;
    font-size: 11px;
    font-weight: 700;
    height: 50%;
    line-height: 22px;
    text-align: center;
    border-top: 1px solid rgb(67, 51, 38);
}

.battle-report .unit-info .unit-loss.empty {
    color: transparent;
}

.attack-planning > .scrollable-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    padding-bottom: 8px;
}

.attack-planning > .general-info {
    flex: 0 0 76px;
    height: 76px;
}

.attack-planning > .player-flanks,
.attack-planning > .defense-comparison-bar,
.attack-planning > .battle-action-bar {
    flex-shrink: 0;
}

.defense-comparison-bar {
    display: flex;
    gap: 4px;
    min-height: 48px;
    padding: 4px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    background: #976643;
    cursor: grab;
}

.defense-comparison-bar::-webkit-scrollbar {
    display: none;
}

.defense-comparison-bar.is-dragging {
    cursor: grabbing;
}

.defense-comparison-tile {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(255, 247, 222), rgb(246, 232, 199));
    border: 1px solid rgb(67, 51, 38);
}

.defense-comparison-tile img {
    width: 28px;
    height: 26px;
    object-fit: contain;
}

.defense-comparison-value {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 13px;
    padding: 0 1px;
    overflow: hidden;
    color: #463020;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
    background: rgba(255, 240, 207, 0.91);
}

.defense-comparison-unit img {
    width: 30px;
    height: 32px;
    object-fit: contain;
}

.defense-comparison-tile .item-level-badge {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
    font-size: 8px;
}

@media (max-width: 480px) {
    .defense-comparison-bar {
        gap: 3px;
        min-height: 42px;
        padding: 4px;
    }

    .defense-comparison-tile {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    .defense-comparison-tile img {
        width: 23px;
        height: 22px;
    }

    .defense-comparison-unit img {
        width: 25px;
        height: 27px;
    }

    .defense-comparison-value {
        min-height: 11px;
        font-size: 9px;
        line-height: 11px;
    }

    .defense-comparison-tile .item-level-badge {
        width: 11px;
        height: 11px;
        border-width: 1px;
        font-size: 7px;
    }
}

.battle-action-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    background: rgb(99, 68, 48);
    border-top: 3px solid rgb(119, 80, 54);
}

.current-flank-inline {
    width: 86px;
    padding-right: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.attack-planning > .player-flanks {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px;
    align-items: center;
    height: 30px;
    min-height: 30px;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 2px solid rgb(67, 51, 38);
}

.player-flanks .flanks {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 0 0 auto;
    width: auto;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 0 0 4px !important;
    --bs-gutter-x: 0;
}

.attack-planning > .player-flanks .flanks-button {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
}

.attack-planning > .player-flanks .flanks-button:hover {
    margin: 0;
}

.attack-planning > .player-flanks .flanks-button img {
    width: auto;
    height: 16px;
}

.battle-action-bar .flanks-button {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
    border-radius: 0;
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.48),
        inset -2px -2px 0 rgba(37, 61, 61, 0.78);
}

.battle-action-bar .flanks-button:hover {
    margin: 0;
    border-color: rgb(67, 51, 38);
    border-radius: 0;
    filter: brightness(1.08);
}

.battle-action-bar .flanks-button:active {
    box-shadow:
        inset 2px 2px 0 rgba(37, 61, 61, 0.78),
        inset -1px -1px 0 rgba(184, 211, 207, 0.28);
    transform: translateY(1px);
}

.battle-action-bar .preset-button,
.battle-action-bar .defense-setup-button,
.battle-action-bar .settings-button,
.battle-action-bar .openAllWaves-button {
    background-color: rgb(88, 117, 114);
    border-color: rgb(67, 51, 38);
    color: #fff;
}

.battle-action-bar .preset-button:hover,
.battle-action-bar .defense-setup-button:hover,
.battle-action-bar .settings-button:hover,
.battle-action-bar .openAllWaves-button:hover {
    background-color: rgb(101, 132, 141);
    border: 2px solid rgb(67, 51, 38);
    color: #fff;
}

.battle-action-bar .openAllWaves-button.active,
.battle-action-bar .openAllWaves-button.active:hover,
.battle-action-bar .settings-button.active,
.battle-action-bar .settings-button.active:hover {
    background-color: rgb(243, 194, 74);
}

.battle-action-bar .settings-button.active,
.battle-action-bar .settings-button.active:hover {
    color: rgb(67, 51, 38);
}

.battle-action-bar .settings-icon {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.battle-action-bar .preset-button .icon,
.battle-action-bar .defense-setup-button .icon {
    width: 23px;
    max-height: 23px;
    object-fit: contain;
}

.battle-action-bar .battle-start-button {
    flex: 1 1 auto;
    width: auto;
    background: #3f760b;
    border-color: rgb(67, 51, 38);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.battle-action-bar .battle-start-button:hover {
    background: #3f760b;
    border: 2px solid rgb(67, 51, 38);
    color: #fff;
}

.battle-action-bar .battle-start-button:active {
    background: #3f760b !important;
    border-color: rgb(67, 51, 38) !important;
    color: #fff !important;
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

#battleReportModal .modal-dialog {
    max-width: var(--battle-panel-max-width);
}

#battleReportModal .modal-body {
    display: flex;
    height: calc(68vh - 133px);
    max-height: calc(68vh - 133px);
    min-height: calc(68vh - 133px);
    flex-direction: column;
    overflow: hidden;
}

.report-view-bar,
.report-side-bar {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    color: rgb(67, 51, 38);
    background-color: rgb(234, 208, 178);
    border-top: 2px solid rgb(67, 51, 38);
}

.report-view-bar {
    min-height: 0;
    padding: 3px;
    gap: 3px;
    background: rgb(68, 51, 38);
    border-top: 0;
    border-bottom: 3px solid rgb(119, 80, 54);
}

.report-view-bar .report-view-select {
    width: 50%;
    flex: 1 1 0;
}

.report-side-bar {
    justify-content: space-between;
    min-height: 34px;
    padding: 3px 8px;
}

.report-control-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
}

.report-view-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 2px 34px 2px 10px;
    color: #342317;
    background-color: #d7b083;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23433326' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 9px;
    border: 2px solid #6b472f;
    border-radius: 0;
    font-size: 14px;
    font-weight: 900;
    outline: none;
}

.report-view-select::-ms-expand {
    display: none;
}

.report-view-select option {
    font-weight: 700;
}

.report-side-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.report-side-buttons .flanks-button-report {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: 2px solid rgb(67, 51, 38);
}

.report-side-buttons .flanks-button-report img {
    width: auto;
    height: 16px;
}

.report-side-buttons .flanks-button-report:hover,
.report-side-buttons .flanks-button-report:focus,
.report-side-buttons .flanks-button-report:active {
    margin: 0;
    transform: none;
}

.report-column-heads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 3px solid rgb(67, 51, 38);
    border-bottom: 3px solid rgb(67, 51, 38);
}

.report-column-head {
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
    padding: 2px 8px;
    box-sizing: border-box;
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.report-column-head strong {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.05;
    white-space: nowrap;
}

.report-column-total-value {
    font-size: 12px;
}

.report-column-loss-value {
    min-height: 10px;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 9px;
    letter-spacing: 0.15px;
}

.report-column-head-attack {
    background-color: rgb(183, 52, 52);
    border-right: 2px solid rgb(67, 51, 38);
}

.report-column-head-defense {
    background-color: rgb(44, 115, 141);
}

.report-context-note {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: rgb(67, 51, 38);
    background-color: rgb(243, 194, 74);
    border-bottom: 2px solid rgb(67, 51, 38);
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.report-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow: hidden;
}

.report-detail-column {
    height: 100%;
    min-width: 0;
    padding-bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgb(145, 98, 65);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.report-detail-column::-webkit-scrollbar {
    display: none;
}

.report-detail-attack {
    border-right: 2px solid rgb(67, 51, 38);
}

.report-section {
    margin: 0;
    padding: 0 5px 8px;
}

.report-section h6 {
    margin: 0 -5px 5px;
    padding: 5px 7px;
    color: rgb(248, 238, 211);
    background-color: rgb(119, 80, 54);
    border-top: 1px solid rgb(67, 51, 38);
    border-bottom: 1px solid rgb(67, 51, 38);
    font-size: 11px;
    font-weight: 900;
}

.report-item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.battle-report .report-item-grid .unit-slot,
.report-item {
    width: 100%;
    height: 44px;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgb(67, 51, 38);
    background-color: rgb(234, 208, 178);
    border: 1px solid rgb(67, 51, 38);
}

.battle-report .report-item-grid .unit-slot:hover {
    background-color: rgb(234, 208, 178);
    cursor: default;
}

.battle-report .report-item-grid .report-item-icon-wrap {
    width: 52%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
}

.battle-report .report-item-grid .report-item-icon-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.battle-report .report-item-grid .unit-info,
.report-item-values {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgb(119, 80, 54);
}

.battle-report .report-item-grid .unit-info .unit-count,
.battle-report .report-item-grid .unit-info .unit-loss,
.report-item-values strong,
.report-item-values small {
    min-width: 0;
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(67, 51, 38);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.battle-report .report-item-grid .unit-info .unit-loss,
.report-item-values small {
    color: #a51f1f;
    border-top: 1px solid rgb(119, 80, 54);
}

.report-abilities-section .report-item-grid {
    display: block;
}

.report-ability-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 5px;
    margin-bottom: 4px;
    padding: 4px;
    color: rgb(67, 51, 38);
    background-color: rgb(234, 208, 178);
    border: 1px solid rgb(67, 51, 38);
}

.report-ability-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.report-ability-item span,
.report-ability-item small {
    min-width: 0;
    display: block;
}

.report-ability-item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.15;
}

.report-ability-item small {
    font-size: 9px;
    line-height: 1.2;
}

@media (max-width: 480px) {
    .report-ability-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .report-ability-item img {
        width: 34px;
        height: 34px;
    }
}

.report-empty {
    grid-column: 1 / -1;
    padding: 10px 4px;
    color: rgba(248, 238, 211, 0.82);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}

.modal.fade .modal-dialog {
    transform: none;
}

.modal-backdrop {
    background-color: rgba(24, 16, 11, 0.58);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity 0.15s linear, backdrop-filter 0.15s linear, -webkit-backdrop-filter 0.15s linear;
}

.modal-backdrop.show {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal-dialog {
    width: calc(100% - 16px);
    max-width: var(--battle-panel-max-width);
    margin-right: auto;
    margin-left: auto;
}

.modal-content {
    position: relative;
    background-color: rgb(119, 80, 54);
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-style: solid;
    border-color: rgb(119, 80, 54);
    border-width: 0 4px 4px;
    pointer-events: none;
}

.modal-header {
    background-color: rgb(119, 80, 54);
    color: white;
    text-align: center;
    border-bottom: none;
    padding: 5px;
    min-height: 46px;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0;
}

.modal-body {
    border-radius: 0;
}

.modal-header .modal-title {
    position: absolute;
    left: 50%;
    max-width: calc(100% - 100px);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
}

@media (max-width: 480px) {
    .modal-header .modal-title {
        font-size: 17px;
    }
}

.modal-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.modal-header-action,
.modal-header-actions .btn-confirm {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
    border-radius: 0;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 0;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.modal-header-actions .btn-confirm {
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.modal-header-actions .btn-confirm::before {
    content: "\2713";
    font-size: 24px;
}

.modal-header-close {
    background: #a62e20;
    box-shadow:
        inset 2px 2px 0 rgba(235, 105, 82, 0.52),
        inset -2px -2px 0 rgba(105, 22, 14, 0.82);
}

.modal-header-close::before {
    content: "\00d7";
    font-size: 29px;
}

.modal-header-action:hover,
.modal-header-actions .btn-confirm:hover {
    color: white;
    border-color: rgb(67, 51, 38);
    filter: brightness(1.08);
}

.modal-header-action:active,
.modal-header-actions .btn-confirm:active {
    transform: translateY(1px);
}

.modal-header-actions .btn-confirm:active {
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

.modal-header-close:active {
    box-shadow:
        inset 2px 2px 0 rgba(105, 22, 14, 0.82),
        inset -1px -1px 0 rgba(235, 105, 82, 0.3);
}

.modal-inline-actions {
    padding: 5px;
}

.settings-list {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    background-color: rgb(151, 103, 71);
}

.stats-list {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    background-color: rgb(151, 103, 71);
}

.stats-section-cards {
    background-color: rgb(132, 88, 59);
}

.stats-section-cards > .col-12:first-child > .modal-card-body {
    margin-top: 0 !important;
}

.settings-section {
    overflow: hidden;
    border: 2px solid rgb(67, 51, 38);
    background-color: rgb(132, 88, 59);
    box-shadow:
        inset 1px 1px 0 rgba(220, 170, 123, 0.35),
        0 2px 0 rgba(67, 51, 38, 0.35);
}

.settings-section + .settings-section {
    margin-top: 0;
    border-top: 0;
}

.settings-section-title {
    padding: 4px 8px 3px;
    border-bottom: 2px solid rgb(67, 51, 38);
    background-color: rgb(88, 59, 41);
    color: rgb(243, 194, 74);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 0 rgb(37, 25, 18);
}

.settings-row {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid rgb(67, 51, 38);
    background: rgb(119, 80, 54);
    color: white;
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row-label {
    font-size: 15px;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(37, 25, 18, 0.75);
}

.settings-toggle {
    width: 76px;
    height: 30px;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
    border-radius: 0;
    background: #a62e20;
    color: white;
    font-size: 13px;
    font-weight: 900;
    box-shadow:
        inset 2px 2px 0 rgba(235, 105, 82, 0.52),
        inset -2px -2px 0 rgba(105, 22, 14, 0.82);
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.settings-toggle.active {
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.settings-toggle:active {
    background: #a62e20;
    box-shadow:
        inset 2px 2px 0 rgba(105, 22, 14, 0.82),
        inset -1px -1px 0 rgba(235, 105, 82, 0.3);
    transform: translateY(1px);
}

.settings-toggle.active:active {
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

#settingsHigherCapsToggle:disabled,
#settingsHigherCapsToggle:disabled:hover,
#settingsHigherCapsToggle.active:disabled,
#settingsHigherCapsToggle.active:disabled:hover {
    cursor: default;
    pointer-events: none;
    transform: none;
    opacity: 1;
    border-color: rgb(67, 51, 38);
    background: rgb(72, 88, 52);
    color: rgba(255, 255, 255, 0.72);
    text-shadow: none;
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 160, 0.14),
        inset -2px -2px 0 rgba(37, 49, 27, 0.6);
}

.settings-open-button {
    width: 76px;
    height: 30px;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
    border-radius: 0;
    background: linear-gradient(to bottom, rgb(101, 132, 141), rgb(88, 117, 114));
    color: white;
    font-size: 13px;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(37, 25, 18, 0.75);
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.38),
        inset -2px -2px 0 rgba(37, 61, 61, 0.72);
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.settings-open-button:active {
    background: linear-gradient(to bottom, rgb(101, 132, 141), rgb(88, 117, 114));
    box-shadow:
        inset 2px 2px 0 rgba(37, 61, 61, 0.72),
        inset -1px -1px 0 rgba(184, 211, 207, 0.25);
    transform: translateY(1px);
}

#settingsSwitchTroops:disabled,
#settingsSwitchTroops:disabled:hover,
#settingsSwitchTroops:disabled:active {
    cursor: default;
    pointer-events: none;
    transform: none;
    opacity: 1;
    border-color: rgb(67, 61, 56);
    background: rgb(91, 89, 86);
    color: rgba(255, 255, 255, 0.52);
    text-shadow: none;
    box-shadow:
        inset 2px 2px 0 rgba(210, 207, 201, 0.12),
        inset -2px -2px 0 rgba(45, 43, 41, 0.55);
}

.settings-select {
    width: 190px;
    max-width: 68%;
    min-width: 0;
    height: 38px;
    padding: 2px 34px 2px 10px;
    appearance: none;
    -webkit-appearance: none;
    color: #342317;
    background-color: #d7b083;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23433326' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 9px;
    border: 2px solid #6b472f;
    border-radius: 0;
    font-size: 14px;
    font-weight: 900;
    outline: none;
}

.settings-select::-ms-expand {
    display: none;
}

.settings-select option {
    font-weight: 700;
}

.settings-select:disabled {
    opacity: 0.55;
}

#settingsModal .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: rgb(119, 80, 54);
}

#settingsModal .modal-inline-actions {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 5px 6px 7px;
    padding: 5px;
    border: 0;
    background: rgb(119, 80, 54);
}

#settingsModal .settings-custom-setup-confirm {
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

#settingsModal .settings-custom-setup-confirm:hover,
#settingsModal .settings-custom-setup-confirm:focus {
    background: #4c900e;
    color: #fff;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

#settingsModal .settings-custom-setup-confirm:active {
    background: #3f760b !important;
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

.modal-body {
    background-color: rgb(68, 51, 38);
    padding: 0;
    max-height: 52vh;
    min-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#defenseBasicsModal .modal-body {
    max-height: none;
    min-height: 0;
}

.modal-body::-webkit-scrollbar {
    display: none;
}

.progress {
    height: 20px;
    margin-right: 5px;
}

.unit-image,
.tool-image,
.modal-image {
    padding: 2px;
    background-color: rgb(180, 140, 100);
    border-right: 2px solid rgb(119, 80, 54);
    margin-left: 2px;
    box-sizing: border-box;
    height: 64px;
    width: 65px;
    object-fit: contain;
    object-position: center;
}

.modal-image {
    max-height: 64px;
    min-height: 64px;
    max-width: 65px;
    min-width: 65px;
}

.card-title {
    background-color: rgb(180, 140, 100);
    color: rgb(67, 51, 38);
    padding: 3px 0;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    font-weight: bolder;
    border-bottom: 2px solid rgb(119, 80, 54);
}

.modal-card-body {
    background-color: rgb(180, 140, 100);
}

.modal-input-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    padding: 8px;
}

.modal-input-main .wave-editor-controls {
    width: 100%;
}

#unitModal .modal-body,
#toolModal .modal-body,
#supportToolModal .modal-body,
#unitModalDefense .modal-body,
#toolModalDefense .modal-body {
    max-height: 68vh;
    min-height: 52vh;
}

@media (max-width: 700px) {
    #toolModalDefense .modal-content > .modal-body {
        height: 68vh;
        min-height: 68vh;
        max-height: 68vh;
        height: 68dvh;
        min-height: 68dvh;
        max-height: 68dvh;
    }
}

#attackGeneralModal .modal-body,
#defenseGeneralModal .modal-body,
#settingsModal .modal-body,
#commanderStatsModal .modal-body,
#castellanStatsModal .modal-body,
#waveCopyModal .modal-body {
    height: 68vh;
    max-height: 68vh;
    min-height: 68vh;
}

#waveCopyModal .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#waveCopyModal .preset-modal-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#waveCopyModal .preset-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 5px 5px;
    scrollbar-width: none;
}

#waveCopyModal .preset-list::-webkit-scrollbar {
    display: none;
}

#waveCopyModal .modal-inline-actions {
    flex: 0 0 auto;
}

.wave-editor-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0 8px 5px;
    background: rgb(68, 51, 38);
    border-bottom: 3px solid rgb(119, 80, 54);
    box-shadow: 0 3px 5px rgba(32, 20, 13, 0.35);
}

.wave-editor-limit {
    width: calc(100% + 16px);
    margin: 0 -8px 4px;
    padding: 1px 8px;
    background: rgb(119, 80, 54);
    border-top: 2px solid rgb(45, 33, 25);
    text-align: center;
}

.wave-editor-limit span {
    color: white;
    font-size: 14px;
    font-weight: 800;
    line-height: 16px;
}

.wave-editor-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.wave-editor-slots.courtyard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 63px));
    width: 100%;
}

.wave-editor-slots.courtyard-grid .wave-editor-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.wave-editor-slot {
    position: relative;
    display: flex;
    width: 63px;
    height: 63px;
    align-items: center;
    justify-content: center;
    padding: 3px;
    overflow: hidden;
    border: 3px solid rgb(119, 80, 54);
    border-radius: 0;
    background: rgb(180, 140, 100);
    color: rgb(67, 51, 38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.wave-editor-slot.active {
    border-width: 2px;
    border-color: rgb(243, 194, 74);
    box-shadow: inset 0 0 0 1px rgb(83, 58, 40), 0 0 0 1px rgb(243, 194, 74);
}

.wave-editor-slot img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.wave-editor-slot-count {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 15px;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: rgba(248, 238, 211, 0.8);
    color: #17110d;
    font-family: Arial, sans-serif;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.wave-editor-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 8px;
}

.wave-editor-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 2px solid rgb(119, 80, 54);
    background: rgb(180, 140, 100);
    color: rgb(67, 51, 38);
}

.wave-editor-row.selected {
    border-color: rgb(243, 194, 74);
    box-shadow: 0 0 0 1px rgb(243, 194, 74);
}

.wave-editor-row.unavailable {
    opacity: 0.58;
}

.wave-editor-name {
    grid-column: 1 / -1;
    padding: 3px 8px;
    border-bottom: 2px solid rgb(119, 80, 54);
    background: rgb(180, 140, 100);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.wave-editor-image-wrap {
    align-self: start;
    position: relative;
    width: 78px;
    height: 78px;
}

.wave-editor-image {
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
}

.wave-editor-main {
    min-width: 0;
    align-self: stretch;
    padding: 4px 7px 3px;
    border-left: 2px solid rgb(119, 80, 54);
}

.wave-editor-controls {
    display: grid;
    grid-template-columns: 46px minmax(90px, 1fr) 46px;
    align-items: center;
    gap: 0;
}

.wave-editor-step {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
    border-radius: 0;
    background: rgb(119, 80, 54);
    color: white;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgb(67, 51, 38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.wave-editor-step:disabled {
    opacity: 0.4;
}

.wave-editor-value-wrap {
    display: flex;
    min-width: 0;
    min-height: 46px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: rgba(68, 51, 38, 0.12);
    box-sizing: border-box;
}

.wave-editor-value {
    margin-bottom: -3px;
    color: rgb(67, 51, 38);
    font-size: 18px;
}

.wave-editor-current-value {
    cursor: text;
    outline: none;
    border-bottom: 1px solid transparent;
}

.wave-editor-current-value:hover,
.wave-editor-current-value:focus {
    border-bottom-color: rgba(67, 51, 38, 0.45);
}

.wave-editor-range {
    width: 100%;
    accent-color: rgb(145, 40, 30);
}

.wave-editor-effects {
    display: flex;
    min-height: 24px;
    align-items: stretch;
    gap: 0;
    margin: 3px -7px -3px;
    border-top: 1px solid rgb(119, 80, 54);
}

.wave-editor-effects:empty {
    display: none;
}

.wave-editor-effect {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 4px;
    font-weight: 700;
}

.wave-editor-effect + .wave-editor-effect {
    border-left: 1px solid rgb(119, 80, 54);
}

.wave-editor-effect img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

@media (max-width: 480px) {
    .wave-editor-row {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .wave-editor-image-wrap {
        width: 66px;
        height: 74px;
    }

    .wave-editor-controls {
        grid-template-columns: 40px minmax(70px, 1fr) 40px;
        gap: 0;
    }

    .wave-editor-step {
        width: 40px;
        height: 42px;
    }

    .wave-editor-value-wrap {
        min-height: 42px;
    }

    .wave-editor-value {
        font-size: clamp(13px, 4vw, 15px);
    }

}

.general-loadout-root {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    color: rgb(67, 51, 38);
}

#attackGeneralModal .modal-body,
#defenseGeneralModal .modal-body {
    overflow: hidden;
}

.general-picker {
    position: relative;
    flex: 0 0 auto;
    z-index: 8;
    padding: 3px;
    background: rgb(68, 51, 38);
    border-bottom: 3px solid rgb(119, 80, 54);
}

.general-picker-toggle {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 32px;
    width: 100%;
    min-height: 56px;
    align-items: center;
    gap: 8px;
    padding: 2px 10px 2px 4px;
    border: 2px solid #6b472f;
    border-radius: 0;
    background: #d7b083;
    color: #342317;
    text-align: left;
}

.general-picker-toggle img,
.general-picker-option img {
    display: block;
    width: 46px;
    height: 50px;
    object-fit: contain;
}

.general-picker-toggle strong {
    overflow: hidden;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.general-picker-arrow {
    width: 0;
    height: 0;
    justify-self: end;
    border-top: 12px solid rgb(67, 51, 38);
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
}

.general-picker-toggle[aria-expanded="true"] .general-picker-arrow {
    transform: rotate(180deg);
}

.general-picker-menu {
    position: absolute;
    top: calc(100% - 6px);
    right: 6px;
    left: 6px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 48vh;
    overflow-y: auto;
    border: 3px solid rgb(67, 51, 38);
    background: rgb(68, 51, 38);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
    scrollbar-color: rgb(180, 140, 100) rgb(67, 51, 38);
    scrollbar-width: thin;
}

.general-picker-menu::-webkit-scrollbar {
    width: 9px;
}

.general-picker-menu::-webkit-scrollbar-track {
    background: rgb(67, 51, 38);
}

.general-picker-menu::-webkit-scrollbar-thumb {
    border: 2px solid rgb(67, 51, 38);
    background: rgb(180, 140, 100);
}

.general-picker-menu::-webkit-scrollbar-thumb:hover {
    background: rgb(243, 194, 74);
}

.general-picker-menu[hidden] {
    display: none;
}

.general-picker-option {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid #6b472f;
    border-radius: 0;
    background: #d7b083;
    color: #342317;
    font-weight: 700;
    text-align: left;
}

.general-picker-option img {
    width: 38px;
    height: 42px;
}

.general-picker-option:hover,
.general-picker-option.selected {
    background: rgb(243, 194, 74);
}

.general-loadout-editor {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow: hidden;
}

.general-slot-list {
    position: static;
    display: grid;
    height: 100%;
    min-height: 0;
    align-content: start;
    gap: 3px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgb(68, 51, 38);
    border-right: 3px solid rgb(119, 80, 54);
    scrollbar-color: rgb(180, 140, 100) rgb(67, 51, 38);
    scrollbar-width: thin;
}

.general-slot-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 78px;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 4px 2px;
    border: 2px solid rgb(119, 80, 54);
    border-radius: 0;
    background: rgb(145, 98, 65);
    color: white;
}

.general-slot-card.selected {
    border-color: rgb(243, 194, 74);
    box-shadow: inset 0 0 0 2px rgb(243, 194, 74);
}

.general-slot-visual {
    position: relative;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    overflow: visible;
    border: 2px solid rgb(248, 238, 211);
    border-radius: 50%;
    background: rgba(68, 51, 38, 0.32);
}

.general-slot-visual img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.general-slot-visual.empty {
    border-style: dashed;
}

.general-slot-placeholder {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.general-slot-number {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: 12px;
    font-weight: 900;
}

.general-slot-name {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.general-ability-choice-list {
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 5px 5px 5px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: rgb(180, 140, 100) rgb(67, 51, 38);
    scrollbar-width: thin;
}

.general-slot-list::-webkit-scrollbar,
.general-ability-choice-list::-webkit-scrollbar {
    width: 7px;
}

.general-slot-list::-webkit-scrollbar-track,
.general-ability-choice-list::-webkit-scrollbar-track {
    background: rgb(67, 51, 38);
}

.general-slot-list::-webkit-scrollbar-thumb,
.general-ability-choice-list::-webkit-scrollbar-thumb {
    border: 1px solid rgb(67, 51, 38);
    background: rgb(180, 140, 100);
}

.general-ability-choice {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    width: 100%;
    min-height: 92px;
    align-items: stretch;
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgb(119, 80, 54);
    border-radius: 0;
    background: rgb(180, 140, 100);
    color: rgb(67, 51, 38);
    text-align: left;
}

.general-ability-choice:not(.selected):not(.disabled) {
    border-color: #6b472f;
    background: #d7b083;
    color: #342317;
}

.general-ability-choice.selected {
    border-color: rgb(243, 194, 74);
    background: rgb(243, 194, 74);
}

.general-ability-choice.disabled {
    cursor: not-allowed;
}

.general-ability-choice.disabled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(68, 51, 38, 0.07);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    pointer-events: none;
}

.general-ability-choice.disabled .general-ability-choice-icon,
.general-ability-choice.disabled .general-ability-choice-copy {
    filter: grayscale(0.8);
    opacity: 0.5;
}

.general-ability-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    width: 120px;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    color: rgb(243, 194, 74);
    filter: drop-shadow(0 2px 2px rgba(32, 20, 13, 0.52));
    transform: translate(-50%, -50%);
}

.general-ability-warning svg {
    display: block;
    width: 68px;
    height: 62px;
}

.general-ability-warning .warning-shape {
    fill: rgb(243, 194, 74);
    stroke: rgb(67, 51, 38);
    stroke-width: 5;
    stroke-linejoin: round;
}

.general-ability-warning .warning-mark {
    fill: rgb(67, 51, 38);
}

.general-ability-choice-icon {
    position: relative;
    display: grid;
    place-items: center;
    border-right: 2px solid rgb(119, 80, 54);
    background: rgba(68, 51, 38, 0.18);
}

.general-ability-choice-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.general-ability-choice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
}

.general-ability-choice-copy strong {
    font-size: 16px;
}

.general-ability-choice-copy small {
    font-size: 13px;
    line-height: 1.3;
}

.general-ability-choice-copy em {
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.general-ability-clear {
    min-height: 58px;
}

.general-ability-clear-icon {
    display: grid;
    place-items: center;
    border-right: 2px solid rgb(119, 80, 54);
    font-size: 34px;
    font-weight: 900;
}

.general-ability-clear span:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
}

.general-ability-empty {
    padding: 20px;
    color: white;
    text-align: center;
}

@media (max-width: 480px) {
    .general-loadout-editor {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .general-slot-card {
        min-height: 72px;
    }

    .general-slot-visual {
        width: 46px;
        height: 46px;
    }

    .general-slot-visual img {
        width: 44px;
        height: 44px;
    }

    .general-ability-choice {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .general-ability-choice-icon img {
        width: 54px;
        height: 54px;
    }

    .general-ability-warning {
        width: 105px;
    }

    .general-ability-warning svg {
        width: 58px;
        height: 53px;
    }
}

.form-range {
    width: 80%;
    background: rgb(180, 140, 100);
}

.selector-value {
    font-weight: bolder;
}

.tool-icon-container,
.unit-icon-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    width: 100%;
    height: 38px;
}

.item-level-badge {
    position: absolute;
    z-index: 3;
    top: 1px;
    left: 1px;
    right: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 0;
    height: 18px;
    padding: 0;
    border: 2px solid #3275b9;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-sizing: border-box;
    pointer-events: none;
}

.wave-editor-image-wrap .item-level-badge {
    width: 21px;
    height: 21px;
    font-size: 11px;
}

.wave-editor-slot .item-level-badge {
    right: auto;
    bottom: auto;
    min-width: 0;
    padding: 0;
    background: #fff;
    color: #000;
}

#wave-container .item-level-badge,
.defense-modal-fix .item-level-badge {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
    font-size: 8px;
}

.battle-report .item-level-badge {
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    font-size: 9px;
}

.tool-icon {
    width: 70%;
    height: auto;
    object-fit: contain;
}

.unit-icon {
    width: 30px;
    height: auto;
    object-fit: contain;
}

.tool-count,
.unit-count {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.6);
    color: black;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 0;
    overflow: hidden;
}

#wave-container .tool-count,
#wave-container .unit-count,
.defense-modal-fix .unit-count {
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px;
    background-color: rgba(248, 238, 211, 0.8);
    color: #17110d;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

#wave-container .tool-slot,
#wave-container .unit-slot {
    background: linear-gradient(135deg, rgb(255, 247, 222), rgb(246, 232, 199));
    border-color: rgb(67, 51, 38);
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.58),
        inset -1px -1px 0 rgba(150, 105, 70, 0.28),
        1px 1px 0 rgba(67, 51, 38, 0.36);
}

#wave-container .tool-icon {
    width: 63%;
}

#wave-container .unit-icon {
    width: 23px;
}

#wave-container .empty-wave-slot,
.defense-modal-fix .empty-wave-slot,
.wave-editor-slot.empty-wave-slot {
    position: relative;
    font-size: 0;
}

#wave-container .empty-wave-slot::before,
#wave-container .empty-wave-slot::after,
.defense-modal-fix .empty-wave-slot::before,
.defense-modal-fix .empty-wave-slot::after,
.wave-editor-slot.empty-wave-slot::before,
.wave-editor-slot.empty-wave-slot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgb(67, 51, 38);
    transform: translate(-50%, -50%);
}

#wave-container .empty-wave-slot::before,
.defense-modal-fix .empty-wave-slot::before,
.wave-editor-slot.empty-wave-slot::before {
    width: 21px;
    height: 7px;
}

#wave-container .empty-wave-slot::after,
.defense-modal-fix .empty-wave-slot::after,
.wave-editor-slot.empty-wave-slot::after {
    width: 7px;
    height: 21px;
}

.unit-loss {
    margin-top: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #d3222a;
}

.bonus-summary {
    font-size: 11px;
    color: black;
    font-weight: 400;
}

.bonus-summary img {
    width: 18px;
    height: auto;
    margin-right: 2px;
}

.effect-slot {
    display: flex;
    align-items: center;
    margin: 2px 0;
}

#courtyard-unit-bonuses .courtyard-bonus-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Keep the two combat-strength totals compactly side by side in each wave column. */
#wave-container .bonus-summary .row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    width: auto;
    margin: 0;
    gap: 0;
}

#wave-container .bonus-summary .effect-slot {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    white-space: nowrap;
}

#wave-container .bonus-summary .effect-slot + .effect-slot {
    justify-self: center;
}

#wave-container .bonus-summary img {
    flex: 0 0 auto;
    width: 16px;
}

.form-range::-webkit-slider-thumb {
    background: white;
    border: 2px solid rgb(119, 80, 54);
}

.form-range::-moz-range-thumb {
    background: white;
    border: 2px solid rgb(119, 80, 54);
}

.form-range:disabled {
    opacity: 1;
}

.form-range:disabled::-webkit-slider-thumb {
    opacity: 1;
    filter: none;
    background: rgb(171, 171, 171);
    border-color: rgb(80, 54, 36);
}

.form-range:disabled::-moz-range-thumb {
    opacity: 1;
    filter: none;
    background: rgb(171, 171, 171);
    border-color: rgb(80, 54, 36);
}

.selctor-value {
    color: rgb(68, 51, 38);
}

.modal-title {
    font-weight: bolder;
}

.combat-icon {
    width: 20px;
    height: auto;
}

#troopCombatBonuses,
#toolBonuses {
    display: block;
    width: 100%;
}

.defense-effect-row {
    display: flex;
    width: 100%;
    align-items: stretch;
    border: 1px solid rgb(119, 80, 54);
}

.defense-effect-cell {
    display: flex;
    min-width: 0;
    min-height: 28px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px;
}

.defense-effect-cell + .defense-effect-cell {
    border-left: 1px solid rgb(119, 80, 54);
}

#toolBonuses .defense-effect-cell > span {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
}

input[type="number"] {
    width: 100%;
    min-width: 74px;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    margin-right: 10px;
    background-color: rgb(248, 238, 211);
}

#defenseBasicsModal .form-range {
    margin-right: 2px;
    margin-left: 2px;
}

.unit-distribution-balance {
    margin: 0;
    padding: 0;
    background: transparent;
}

.unit-distributon-modal .card-title {
    margin-bottom: 0;
}

.unit-distribution-bar {
    --melee-share: 0%;
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    overflow: hidden;
    border: 2px solid rgb(89, 61, 43);
    background: rgb(92, 72, 56);
    box-shadow:
        inset 0 1px 0 rgba(255, 239, 194, 0.45),
        0 1px 0 rgba(255, 239, 194, 0.28);
}

.unit-distribution-bar-melee {
    flex: 0 0 var(--melee-share);
    background: rgb(181, 137, 73);
}

.unit-distribution-bar-ranged {
    flex: 1 1 auto;
    min-width: 0;
    background: rgb(124, 87, 63);
}

.unit-distribution-bar-values {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.unit-distribution-bar-value {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    color: rgb(255, 244, 211);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-shadow:
        0 1px 0 rgb(62, 39, 28),
        1px 0 0 rgb(62, 39, 28),
        -1px 0 0 rgb(62, 39, 28);
}

.unit-distribution-bar-value img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
}

.unit-distribution-bar.is-empty {
    background: rgb(72, 52, 38);
    box-shadow: 0 1px 0 rgba(255, 239, 194, 0.28);
}

.unit-distribution-bar.is-empty > .unit-distribution-bar-melee,
.unit-distribution-bar.is-empty > .unit-distribution-bar-ranged {
    visibility: hidden;
}

.unit-distribution-sides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid rgb(119, 80, 54);
}

.unit-distribution-side {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px 3px 10px;
    text-align: center;
}

.unit-distribution-side + .unit-distribution-side {
    border-left: 1px solid rgb(119, 80, 54);
}

.unit-distribution-side.flank-side {
    --distribution-side-accent: rgb(221, 196, 58);
}

.unit-distribution-side.front-side {
    --distribution-side-accent: rgb(183, 52, 52);
}

.unit-distribution-side::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 6px;
    z-index: 2;
    height: 2px;
    background: var(--distribution-side-accent);
    pointer-events: none;
}

.unit-distribution-side-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.unit-distributon-modal-side {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.1;
    color: rgb(67, 51, 38);
}

.unit-distributon-modal-value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(67, 51, 38);
}

.defense-modal-fix .tool-slot,
.defense-modal-fix .unit-slot {
    margin-left: 0 !important;
}

.unit-slot-container.defense-modal-fix {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    justify-content: center;
    gap: 5px 12px;
}

.defense-modal-fix .unit-count {
    overflow: hidden;
    white-space: nowrap;
}

#toolsSlots.cy-defense-tool-slots {
    justify-content: space-between !important;
    padding-right: 12%;
    padding-left: 12%;
    box-sizing: border-box;
}

.flanks-button-defense {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgb(99, 68, 48);
    color: white;
    margin-right: 5px;
    font-weight: bolder;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flanks-button-defense:hover {
    border-radius: 50%;
    background-color: rgba(243, 195, 74, 0.7);
    color: black;
    margin-right: 5px;
    font-weight: bolder;
}

.flanks-button-defense.active {
    background-color: rgb(243, 194, 74);
    color: black;
}

.defense-side-bar {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    border-top: 2px solid rgb(67, 51, 38);
    border-bottom: 2px solid rgb(67, 51, 38);
    background-color: rgb(145, 98, 65);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.defense-side-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.defense-side-buttons .flanks-button-defense {
    box-sizing: border-box;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 2px solid rgb(67, 51, 38);
}

.defense-side-buttons .flanks-button-defense:hover,
.defense-side-buttons .flanks-button-defense:focus,
.defense-side-buttons .flanks-button-defense:active {
    margin: 0;
    transform: none;
}

.defense-side-buttons .flanks-button-defense img {
    width: auto;
    height: 16px;
}

#toolBonuses {
    font-size: 12px;
}

#toolBonuses .combat-icon {
    width: 18px;
    height: auto;
}

.red-button {
    background-color: rgb(172, 39, 14, 255);
    border: 1px solid rgb(58, 77, 75);
    border-radius: 10%;
}

.red-button .icon {
    width: 30px;
    height: auto;
}

.red-button:hover {
    background-color: rgb(172, 39, 14, 255);
    border-radius: 10%;
    border: 1px solid rgb(58, 77, 75);
}

.preset-button,
.defense-setup-button,
.openAllWaves-button {
    background-color: rgb(88, 117, 114);
    border: 1px solid rgb(58, 77, 75);
    border-radius: 10%;
}

.preset-button .icon,
.defense-setup-button .icon,
.openAllWaves-button .icon {
    width: 22px;
    height: auto;
}

.preset-button:hover,
.defense-setup-button:hover,
.openAllWaves-button:hover {
    background-color: rgb(101, 132, 141);
    border-radius: 10%;
}

.openAllWaves-button.active {
    background-color: rgb(243, 194, 74);
    background-image: url('../../img_base/battle_simulator/openallwaves-icon2.webp');
}

.openAllWaves-button {
    background-image: url('../../img_base/battle_simulator/openallwaves-icon1.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

.wave-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #d7b083;
    color: #342317;
    font-weight: bolder;
    font-size: larger;
}

.nav-btn {
    background-color: rgb(88, 117, 114);
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 18px;
    cursor: pointer;
}

.preset-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0;
}

.preset-item {
    display: flex;
    align-items: center;
    background-color: rgb(234, 208, 178);
    color: rgb(67, 51, 38);
    padding: 5px;
    font-weight: bold;
    min-height: 38px;
}

.preset-item input[type="radio"] {
    margin-left: 6px;
}

.preset-name-label {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    overflow: hidden;
    cursor: pointer;
}

.preset-number {
    flex: 0 0 auto;
}

.preset-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preset-name-input {
    min-width: 0;
    height: 28px;
    flex: 1 1 auto;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid rgb(67, 51, 38);
    border-radius: 0;
    outline: none;
    background: rgb(255, 244, 221);
    color: rgb(52, 35, 23);
    font: inherit;
}

.preset-name-input:focus {
    box-shadow: inset 0 0 0 1px rgb(243, 194, 74);
}

.preset-name-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    margin-left: 6px;
}

.preset-name-action,
.preset-name-action:hover,
.preset-name-action:active {
    display: inline-flex;
    margin: 0;
}

.preset-name-action[hidden] {
    display: none;
}

.preset-name-editing {
    background-color: rgb(243, 194, 74);
}

.selected-preset {
    background-color: rgb(243, 194, 74);
}

.selected-preset input[type="radio"] {
    accent-color: green;
}

.presets-button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

.presets-button .icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.presets-button img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.presets-button img:hover {
    transform: scale(0.95);
}

.card-header.collapsed .effect-icon,
.card-header.collapsed .units,
.card-header.collapsed img {
    opacity: 0;
    visibility: hidden;
}

.card-header.collapsed .right-content {
    display: none;
}

.card-header .effect-icon {
    /* Match the game's fixed icon canvas; the artwork keeps its own aspect ratio. */
    width: 18px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    margin-right: 2px;
    vertical-align: middle;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-header .left-content {
    align-items: center;
}

.card-header .units {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    font-weight: bold;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-header img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notification-bar {
    position: fixed;
    bottom: -50px;
    left: 0;
    width: 100%;
    background-color: #6b5231;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    border-radius: 5px;
    transition: bottom 0.3s ease-in-out;
    z-index: 9999;
    font-weight: bolder;
}

.notification-bar.show {
    bottom: 0;
}

.flanks-button-report {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgb(99, 68, 48);
    color: white;
    margin-right: 5px;
    font-weight: bolder;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flanks-button-report:hover {
    border-radius: 50%;
    background-color: rgba(243, 195, 74, 0.7);
    color: black;
    margin-right: 5px;
    font-weight: bolder;
}

.flanks-button-report.active {
    background-color: rgb(243, 194, 74);
    color: black;
}

.section-header {
    text-align: center;
}

.margin-bug-fix .row {
    margin-left: 0 !important;
}

.report-wave {
    min-height: 50px;
}

.btn-confirm {
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.btn-confirm:hover {
    filter: brightness(1.08);
}

.btn-confirm:active {
    transform: translateY(1px);
}

.btn-confirm .icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
}

.sides img {
    width: auto;
    height: 20px;
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease-in-out;
}

.sides.active img {
    filter: none;
}

.no-padding-fix {
    padding: 0 !important;
}

.presets-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 5px !important;
    background: rgb(119, 80, 54);
}

.presets-footer .btn {
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 10px;
    border: 2px solid rgb(67, 51, 38) !important;
    border-radius: 0;
    background: rgb(119, 80, 54);
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.48),
        inset -2px -2px 0 rgba(37, 61, 61, 0.78);
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.presets-footer .btn:hover {
    color: white;
    border-color: rgb(67, 51, 38) !important;
    filter: brightness(1.08);
}

.presets-footer .btn:active {
    transform: translateY(1px);
}

.presets-footer .btn-apply,
.presets-footer .btn-apply-all {
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.presets-footer .btn-save {
    background: rgb(88, 117, 114);
}

.presets-footer .btn-clear {
    background: rgb(88, 117, 114);
}

.presets-footer .btn-apply:active,
.presets-footer .btn-apply-all:active {
    background: #3f760b !important;
    color: white;
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

.presets-footer .btn-save:active,
.presets-footer .btn-clear:active {
    background: rgb(88, 117, 114) !important;
    color: white;
    box-shadow:
        inset 2px 2px 0 rgba(37, 61, 61, 0.78),
        inset -1px -1px 0 rgba(184, 211, 207, 0.28);
}

.presets-footer .btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#settingsModal.settings-custom-setup-active .modal-dialog {
  max-width: var(--battle-panel-max-width);
}

#settingsModal.settings-custom-setup-active .modal-body {
  height: 68vh;
  max-height: 68vh;
  min-height: 68vh;
  overflow: hidden;
}

#settingsModal.settings-switch-troops-active .modal-body {
  height: 68vh;
  max-height: 68vh;
  min-height: 68vh;
  overflow: hidden;
}

.settings-custom-setup-page {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  background: #4a3325;
}

.settings-custom-setup-page[hidden] {
  display: none;
}

.settings-custom-setup-page .battle-catalog-editor {
  width: 100%;
}

.settings-switch-troops-page {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
  background: #4a3325;
}

.settings-switch-troops-page[hidden] {
  display: none;
}

.troop-switch-card {
  background: rgb(151, 103, 71);
  border: 2px solid rgb(67, 51, 38);
}

.troop-switch-select {
  width: calc(100% - 12px);
  margin: 6px;
}

.troop-switch-preview {
  display: flex;
  min-height: 68px;
  align-items: stretch;
  margin: 0 6px 6px;
  color: rgb(67, 51, 38);
  background: rgb(180, 140, 100);
  border: 2px solid rgb(119, 80, 54);
}

.troop-switch-preview-image {
  flex: 0 0 65px;
}

.troop-switch-preview-text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}

.troop-switch-preview-text strong,
.troop-switch-preview-text span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.troop-switch-preview-text strong {
  font-weight: 900;
}

.battle-catalog-editor {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 4px;
  height: 100%;
  padding: 8px;
  min-height: 0;
  background: #4a3325;
  box-sizing: border-box;
}

.catalog-custom-row,
.catalog-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.catalog-custom-row > *,
.catalog-filter-row > * {
  width: 100%;
}

#catalog-custom-id {
  min-width: 0;
  height: 38px;
  padding: 5px 9px;
  color: #342317;
  font-weight: 700;
  background: #d7b083;
  border: 2px solid #6b472f;
  border-radius: 0;
}

.battle-catalog-editor select option {
  font-weight: 700;
}

.catalog-action,
.catalog-remove {
  color: #fff;
  font-weight: 900;
  background: rgb(88, 117, 114);
  border: 2px solid rgb(67, 51, 38);
  border-radius: 0;
  box-shadow:
    inset 2px 2px 0 rgba(184, 211, 207, 0.48),
    inset -2px -2px 0 rgba(37, 61, 61, 0.78);
}

.catalog-action:hover,
.catalog-remove:hover {
  color: #fff;
  background: rgb(101, 132, 141);
  border-color: rgb(67, 51, 38);
  filter: brightness(1.08);
}

.catalog-action:active,
.catalog-remove:active {
  box-shadow:
    inset 2px 2px 0 rgba(37, 61, 61, 0.78),
    inset -1px -1px 0 rgba(184, 211, 207, 0.28);
}

.catalog-level-control {
  width: 100%;
}

.catalog-level-range:disabled {
  opacity: .45;
}

.catalog-icon-action svg,
.catalog-remove svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.catalog-status {
  min-height: 0;
  color: #ffb4a6;
  font-size: .82rem;
  font-weight: 700;
}

.catalog-entry-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 4px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9b6844 #38271d;
}

.catalog-entry {
  min-height: 93px;
  color: #332317;
  background: rgb(180, 140, 100);
}

.catalog-entry.invalid {
  background: #a76d61;
}

.catalog-entry-editor {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.catalog-entry-image-wrap {
  position: relative;
  width: 65px;
  height: 64px;
  flex: 0 0 65px;
}

.catalog-entry-image-wrap .modal-image {
  display: block;
}

.catalog-entry-error {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  padding: 8px;
}

.catalog-remove {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.catalog-remove svg {
  width: 29px;
  height: 29px;
  fill: currentColor;
  stroke: #21170f;
  stroke-width: 1;
  stroke-linejoin: miter;
  paint-order: stroke fill;
  filter: drop-shadow(1px 1px 0 rgba(33, 23, 15, .55));
}

.catalog-remove-invalid {
  position: static;
  flex: 0 0 30px;
  align-self: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.catalog-remove:hover {
  color: #ffe2ad;
  background: transparent;
  filter: none;
}

.catalog-remove:active {
  box-shadow: none;
}

.catalog-empty,
.catalog-loading {
  padding: 18px;
  color: #e6cdb2;
  text-align: center;
}

#waveCopyModal .modal-inline-actions {
    padding: 0 5px 5px;
    background: rgb(119, 80, 54);
}


#openBetaModal .modal-dialog {
    max-width: min(var(--battle-panel-max-width), calc(100% - 20px));
    margin-right: auto;
    margin-left: auto;
}

#openBetaModal .open-beta-modal-content {
    overflow: hidden;
}

#openBetaModal .open-beta-modal-body {
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
}

#openBetaModal .open-beta-modal-body p {
    margin: 0;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.open-beta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    background: rgb(119, 80, 54);
}

.open-beta-action {
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 10px;
    border: 2px solid rgb(67, 51, 38) !important;
    border-radius: 0 !important;
    background: rgb(88, 117, 114);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.48),
        inset -2px -2px 0 rgba(37, 61, 61, 0.78);
    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.open-beta-action:hover,
.open-beta-action:focus {
    background: rgb(101, 132, 141);
    color: #fff;
    border-color: rgb(67, 51, 38) !important;
    filter: brightness(1.08);
    box-shadow:
        inset 2px 2px 0 rgba(184, 211, 207, 0.48),
        inset -2px -2px 0 rgba(37, 61, 61, 0.78);
}

.open-beta-action:focus-visible {
    outline: 2px solid rgb(243, 194, 74);
    outline-offset: -4px;
}

.open-beta-action:active {
    background: rgb(88, 117, 114) !important;
    color: #fff !important;
    transform: translateY(1px) !important;
    filter: none;
    box-shadow:
        inset 2px 2px 0 rgba(37, 61, 61, 0.78),
        inset -1px -1px 0 rgba(184, 211, 207, 0.28);
}

.open-beta-continue {
    grid-column: 1 / -1;
    min-height: 44px;
    background: #3f760b;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.open-beta-continue:hover,
.open-beta-continue:focus {
    background: #4c900e;
    color: #fff;
    box-shadow:
        inset 2px 2px 0 rgba(121, 184, 50, 0.58),
        inset -2px -2px 0 rgba(33, 74, 6, 0.92);
}

.open-beta-continue:active {
    background: #3f760b !important;
    box-shadow:
        inset 2px 2px 0 rgba(33, 74, 6, 0.92),
        inset -1px -1px 0 rgba(121, 184, 50, 0.32);
}

@media (max-width: 430px) {
    #openBetaModal .modal-dialog {
        max-width: calc(100% - 12px);
    }

    #openBetaModal .open-beta-modal-body p {
        padding: 16px 14px;
        font-size: 13px;
    }

    .open-beta-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
    }

    .open-beta-continue {
        grid-column: 1 / -1;
    }
}