.build-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    transform-origin: 50% 50%;
    z-index: 3;
}

.build-item {
    position: absolute;
    transform: translate(-50%, -92%);
    transform-origin: 50% 92%;
    pointer-events: none;
}

.build-item.build-barricade {
    transform: translate(-50%, -92%) rotate(var(--rotate, 0deg));
}

.build-tower .tower-turn {
    transform: rotate(var(--rotate, 0deg));
    transform-origin: 50% 50%;
}

/* Castle — 3x3 isometric tile grid */

.castle-cell {
    position: absolute;
    width: var(--tile-w, 64px);
    height: var(--tile-h, 32px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: linear-gradient(165deg, #d5dde1 0%, #a4b2ba 50%, #8d9aa0 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.castle-cell::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 78%;
    height: 38%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #bcc6c9 0%, #6f7c83 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.55;
}

.castle-cell-edge::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -0.55rem;
    width: 72%;
    height: 0.55rem;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        90deg,
        #c5d0d5 0 0.35rem,
        transparent 0.35rem 0.55rem
    );
}

.castle-cell-gate {
    background: linear-gradient(165deg, #fff4a8 0%, #e7c95c 50%, #ffe98d 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.castle-cell-gate::before {
    opacity: 0.35;
}

.castle-cell-corner::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 42%;
    width: 46%;
    height: 95%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #d8e0e4 0%, #95a3ab 100%);
    border: 2px solid #5d6b72;
    border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
    box-shadow: inset 0 0.25rem 0 #eef2f0;
}

.castle-cell-corner::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(42% + 95%);
    width: 56%;
    height: 0.45rem;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        90deg,
        #c5d0d5 0 0.28rem,
        transparent 0.28rem 0.45rem
    );
    opacity: 1;
    clip-path: none;
}

.castle-cell-center {
    background: linear-gradient(165deg, #dde4e8 0%, #a8b5bc 50%, #95a3ab 100%);
}

.castle-cell-center::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 38%;
    width: 52%;
    height: 110%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #d5dde1 0%, #8d9aa0 100%);
    border: 2px solid #5d6b72;
    border-radius: 0.2rem;
    box-shadow: inset 0 0.3rem 0 #eef2f0;
}

.castle-cell-center::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(38% + 110%);
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 0.85rem solid transparent;
    border-right: 0.85rem solid transparent;
    border-bottom: 0.85rem solid #c45745;
    filter: drop-shadow(0 2px 0 #5d2a22);
    opacity: 1;
    clip-path: none;
}

/* Ballista */

.build-ballista .tower-body {
    position: relative;
    width: 3.25rem;
    height: 2.75rem;
}

.build-ballista .tower-shadow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.75rem;
    height: 0.65rem;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 50%;
}

.build-ballista .tower-base {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: 2.4rem;
    height: 1rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #caa66c 0%, #795033 100%);
    border: 2px solid #5a3b26;
    border-radius: 0.35rem;
    box-shadow: inset 0 0.25rem 0 rgba(255, 255, 255, 0.2);
}

.build-ballista .tower-frame {
    position: absolute;
    left: 50%;
    bottom: 1.05rem;
    width: 2.5rem;
    height: 1.35rem;
    transform: translateX(-50%);
}

.build-ballista .tower-frame::before,
.build-ballista .tower-frame::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0.35rem;
    height: 1.25rem;
    background: #7b4f2e;
    border-radius: 0.15rem;
}

.build-ballista .tower-frame::before {
    transform: translateX(-50%) rotate(-28deg);
    transform-origin: bottom center;
}

.build-ballista .tower-frame::after {
    transform: translateX(-50%) rotate(28deg);
    transform-origin: bottom center;
}

.build-ballista .tower-bolt {
    position: absolute;
    left: 50%;
    bottom: 1.15rem;
    width: 2rem;
    height: 0.35rem;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #8b5d35 0%, #6dbbff 70%, #dfe9ef 100%);
    border-radius: 0.15rem;
    box-shadow: 0 0 0 1px #2c1e16;
}

.build-ballista .tower-bolt::after {
    content: '';
    position: absolute;
    right: -0.15rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    border-left: 0.35rem solid #dfe9ef;
}

/* Mortar */

.build-mortar .tower-body {
    position: relative;
    width: 3.5rem;
    height: 2.85rem;
}

.build-mortar .tower-shadow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3rem;
    height: 0.65rem;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 50%;
}

.build-mortar .tower-base {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: 2.75rem;
    height: 1rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #b68752 0%, #6d4529 100%);
    border: 2px solid #5a3b26;
    border-radius: 0.35rem;
}

.build-mortar .tower-wheel {
    position: absolute;
    bottom: 0.15rem;
    width: 0.85rem;
    height: 0.85rem;
    background: #5a3b26;
    border: 2px solid #2c1e16;
    border-radius: 50%;
}

.build-mortar .tower-wheel::after {
    content: '';
    position: absolute;
    inset: 0.2rem;
    background: #d0a05d;
    border-radius: 50%;
}

.build-mortar .tower-wheel-left { left: 0.35rem; }
.build-mortar .tower-wheel-right { right: 0.35rem; }

.build-mortar .tower-barrel {
    position: absolute;
    left: 0.55rem;
    bottom: 1.15rem;
    width: 2.35rem;
    height: 0.85rem;
    background: linear-gradient(180deg, #52606b 0%, #1e2630 100%);
    border: 2px solid #111820;
    border-radius: 0.4rem;
}

.build-mortar .tower-barrel::after {
    content: '';
    position: absolute;
    right: -0.55rem;
    top: 0.08rem;
    width: 0.65rem;
    height: 0.65rem;
    background: #111820;
    border-radius: 0.2rem;
}

.build-mortar .tower-strut {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.95rem;
    height: 0.35rem;
    background: #7c4f2e;
    border-radius: 0.15rem;
}

/* Barricade */

.build-barricade .barricade-body {
    position: relative;
    width: 2.75rem;
    height: 2rem;
}

.build-barricade .barricade-shadow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.35rem;
    height: 0.55rem;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.build-barricade .barricade-log {
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    width: 0.45rem;
    height: 1.45rem;
    background: linear-gradient(90deg, #7b4f2e 0%, #9a6537 100%);
    border: 1px solid #5a3b26;
    border-radius: 0.15rem;
}

.build-barricade .barricade-log-a { transform: translateX(-50%) rotate(-38deg); }
.build-barricade .barricade-log-b { transform: translateX(-50%) rotate(38deg); }
.build-barricade .barricade-log-c {
    height: 1.15rem;
    bottom: 0.55rem;
    transform: translateX(-50%) rotate(-90deg);
}

.build-barricade .barricade-hp {
    position: absolute;
    left: 50%;
    top: -0.35rem;
    width: 2.5rem;
    height: 0.3rem;
    transform: translateX(-50%);
    background: #151515;
    border-radius: 0.15rem;
    overflow: hidden;
}

.build-barricade .barricade-hp span {
    display: block;
    height: 100%;
    background: #72d15f;
    width: var(--hp, 100%);
}

.build-barricade.is-low .barricade-hp span {
    background: #ff805f;
}

/* Tower labels */

.build-tower.is-selected::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 4.25rem;
    height: 1rem;
    transform: translateX(-50%);
    border: 3px solid #ffd767;
    border-radius: 50%;
}

.build-tower .tower-level {
    position: absolute;
    left: 50%;
    top: -0.85rem;
    transform: translateX(-50%);
    padding: 0.05rem 0.3rem;
    background: rgba(17, 24, 32, 0.88);
    color: #f3e9bc;
    font: bold 0.68rem/1.2 monospace;
    border-radius: 0.2rem;
    z-index: 2;
    white-space: nowrap;
}

.build-tower.is-selected .tower-range-label {
    position: absolute;
    left: 50%;
    top: -1.45rem;
    transform: translateX(-50%);
    color: #111820;
    font: bold 0.68rem/1.2 monospace;
    z-index: 2;
    white-space: nowrap;
}