:root {
    color-scheme: dark;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 15%, rgba(137, 236, 119, 0.35), transparent 26rem),
        radial-gradient(circle at 85% 10%, rgba(255, 237, 142, 0.22), transparent 24rem),
        linear-gradient(160deg, #8193bd, #536f98);
    color: #eef4ea;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.game-card {
    background: rgba(20, 37, 54, 0.88);
    border: 2px solid rgba(255, 247, 185, 0.45);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
    padding: 1rem;
}

.canvas-wrap {
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(255, 247, 185, 0.58);
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #8798bf, #7089b4);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: grab;
    position: relative;
    z-index: 2;
}

#gameCanvas.dragging {
    cursor: grabbing;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.stats-grid div {
    background: #15222a;
    border: 1px solid #33483a;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.stats-grid span {
    display: block;
    color: #91a291;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stats-grid strong {
    display: block;
    color: #ffd767;
    font-size: 1.35rem;
}

.tower-btn {
    text-align: left;
}

.tower-btn.active {
    background: #35553b;
    border-color: #8bbf59;
}

.build-dock {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    z-index: 6;
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    transform: translateX(-50%);
    padding: 0.45rem;
    background: rgba(14, 24, 34, 0.88);
    border: 2px solid rgba(255, 247, 185, 0.5);
    border-radius: 0.85rem;
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.build-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 4.6rem;
    padding: 0.45rem 0.4rem 0.4rem;
    border: 2px solid #3d5566;
    border-radius: 0.65rem;
    background: #182733;
    color: #eef4ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    text-align: center;
    line-height: 1.1;
}

.build-slot:hover,
.build-slot:focus-visible {
    border-color: #8bbf59;
    outline: none;
}

.build-slot.active {
    background: #2d4a35;
    border-color: #b6e06a;
    box-shadow:
        0 0 0 2px rgba(182, 224, 106, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.build-slot-cancel {
    border-color: #6a4646;
    background: #2a1d22;
    min-width: 3.75rem;
}

.build-slot-cancel:hover,
.build-slot-cancel:focus-visible {
    border-color: #ff8f8f;
}

.build-key {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    min-width: 1rem;
    padding: 0.05rem 0.22rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.45);
    color: #d7e4cf;
    font: 600 0.62rem/1.1 monospace;
}

.build-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.build-meta strong {
    font-size: 0.72rem;
    font-weight: 700;
}

.build-cost {
    color: #ffd767;
    font-size: 0.68rem;
    font-weight: 600;
}

.build-cancel-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0.15rem 0;
    border-radius: 999px;
    background: #6d3434;
    color: #ffe5e5;
    font-size: 1.35rem;
    line-height: 1;
}

.build-icon {
    position: relative;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0.2rem 0 0.1rem;
}

.build-icon-ballista::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    width: 1.35rem;
    height: 0.55rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #caa66c, #795033);
    border: 1px solid #5a3b26;
    border-radius: 0.2rem;
}

.build-icon-ballista::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0.35rem;
    width: 1.45rem;
    height: 0.28rem;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #8b5d35, #6dbbff 70%, #dfe9ef);
    border-radius: 0.15rem;
    box-shadow: 0 0 0 1px #2c1e16;
}

.build-icon-mortar::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 1.5rem;
    height: 0.55rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #b68752, #6d4529);
    border: 1px solid #5a3b26;
    border-radius: 0.2rem;
}

.build-icon-mortar::after {
    content: '';
    position: absolute;
    left: 0.35rem;
    bottom: 0.65rem;
    width: 1.35rem;
    height: 0.55rem;
    background: linear-gradient(180deg, #52606b, #1e2630);
    border: 1px solid #111820;
    border-radius: 0.25rem;
    transform: rotate(-18deg);
}

.build-icon-barricade::before,
.build-icon-barricade::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    width: 0.35rem;
    height: 1.4rem;
    background: linear-gradient(90deg, #7b4f2e, #9a6537);
    border: 1px solid #5a3b26;
    border-radius: 0.12rem;
}

.build-icon-barricade::before {
    transform: translateX(-50%) rotate(-38deg);
}

.build-icon-barricade::after {
    transform: translateX(-50%) rotate(38deg);
}

@media (max-width: 640px) {
    .build-dock {
        gap: 0.3rem;
        padding: 0.35rem;
        bottom: 0.55rem;
        max-width: calc(100% - 0.75rem);
    }

    .build-slot {
        min-width: 3.6rem;
        padding: 0.35rem 0.25rem 0.3rem;
    }

    .build-meta strong {
        font-size: 0.64rem;
    }

    .build-cost {
        font-size: 0.6rem;
    }
}

.selected-panel {
    background: linear-gradient(160deg, #15232d, #101920);
    border: 1px solid #365243;
    border-radius: 0.65rem;
    padding: 0.85rem;
}

.settings-panel {
    background: linear-gradient(160deg, #15232d, #101920);
    border: 1px solid #365243;
    border-radius: 0.65rem;
    padding: 0.85rem;
}

.settings-panel .form-label {
    color: #8fa796;
}

.settings-panel .form-range {
    height: 0.35rem;
}

.settings-panel .form-range::-webkit-slider-thumb {
    background: #ffd767;
}

.settings-panel .form-range::-moz-range-thumb {
    background: #ffd767;
    border: 0;
}

.settings-panel .form-check-label {
    color: #c9d6c4;
}

.settings-panel .form-check-input {
    background-color: #263238;
    border-color: #4a5f66;
}

.settings-panel .form-check-input:checked {
    background-color: #8bbf59;
    border-color: #8bbf59;
}

.settings-toggle {
    border-color: #4a5f66;
    color: #d5e0d8;
}

.settings-toggle:hover,
.settings-toggle:focus {
    background: #233038;
    border-color: #8bbf59;
    color: #fff7d2;
}

.tower-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.tower-stats div {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(141, 191, 89, 0.18);
    border-radius: 0.45rem;
    padding: 0.55rem;
}

.tower-stats span {
    display: block;
    color: #8fa796;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tower-stats strong {
    color: #f3e9bc;
    font-size: 0.95rem;
}

.tower-stats .tower-xp {
    grid-column: 1 / -1;
}

.tower-xp .progress {
    height: 0.55rem;
    background: #263238;
    margin: 0.3rem 0;
}

.tower-xp small {
    color: #c9d6c4;
}

.bonus-list {
    min-height: 5rem;
    margin: 0;
    padding-left: 1.2rem;
    color: #bfd4b7;
}

.bonus-card {
    border: 2px solid #3f553f;
    background: #16242c;
    color: #eef4ea;
    padding: 0.85rem;
    text-align: left;
}

.bonus-card:hover,
.bonus-card:focus {
    border-color: #ffd767;
    background: #23362e;
    color: #fff7d2;
}