:root {
    --map-scale: 1.25;
    --cell-size: calc(60px * var(--map-scale));
    --cell-gap: 1px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1a2e;
    color: #eee;
    min-height: 100vh;
    padding: 20px;
}

.game-container {
    max-width: 1200px;
    margin: 0 auto;
}

.slot-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.slot-btn {
    flex: 1;
    height: 36px;
    border: 2px solid;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #1a1a2e;
    color: #888;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.slot-btn:hover {
    color: #fff;
    filter: brightness(1.2);
}

.slot-btn.active {
    color: #1a1a2e;
    border-bottom: none;
}

.slot-btn.executing {
    animation: pulse-border 1s infinite;
    box-shadow: 0 0 10px currentColor;
}

@keyframes pulse-border {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.robot-name-row {
    display: flex;
    gap: 8px;
    padding: 5px;
    background: #16213e;
    border-radius: 0;
}

.robot-name-row input {
    width: 225px;
    padding: 8px 10px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid #0f3460;
    border-radius: 4px;
    background: #1a1a2e;
    color: #eee;
}


.main-content {
    display: flex;
    gap: 20px;
}

.sidebar {
    width: 290px;
    flex-shrink: 0;
}

.hp-tracker {
    background: #16213e;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hp-tracker h3 {
    margin-bottom: 10px;
    color: var(--robot-color, #4ecca3);
}

.hp-track {
    display: flex;
    gap: 2px;
    margin-bottom: 15px;
}

.hp-box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hp-start-indicator {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid var(--robot-color, #4ecca3);
    margin-top: 2px;
}

.hp-box {
    width: 22px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid #0f3460;
    transition: all 0.2s;
}

.hp-box.depleted {
    background: #444;
    color: #666;
    border-color: #333;
}

.hp-box.current {
    transform: scale(1.1);
    box-shadow: 0 0 8px currentColor;
    border-width: 2px;
}

.hp-box.green {
    background: #2d5a3d;
    color: #4ecca3;
    border-color: #4ecca3;
}

.hp-box.yellow {
    background: #5a5a2d;
    color: #ecec4e;
    border-color: #ecec4e;
}

.hp-box.red {
    background: #5a2d2d;
    color: #e94560;
    border-color: #e94560;
}

.self-destruct {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.self-destruct-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.sd-boxes {
    display: flex;
    gap: 3px;
}

.sd-boxes .sd-box {
    width: 18px;
    height: 18px;
    border: 1px solid #4ecca3;
    border-radius: 2px;
    background: #0f3460;
    cursor: pointer;
    transition: background 0.1s;
}

.sd-boxes .sd-box:hover {
    border-color: #fff;
}

.sd-boxes.damage-boxes .sd-box.filled {
    background: #e94560;
}

.sd-boxes.range-boxes .sd-box.filled {
    background: #4a9eff;
}

.program-sheet {
    background: #16213e;
    padding: 15px;
    border-radius: 8px;
}

.program-sheet h3 {
    margin-bottom: 10px;
    color: var(--robot-color, #4ecca3);
}

.program-sheet-buttons {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 5px;
}

.mode-btn {
    flex: 1;
    background: #333;
    color: #666;
    border: 1px solid #444;
}

.mode-btn.active {
    background: var(--robot-color, #4ecca3);
    color: #1a1a2e;
    border-color: var(--robot-color, #4ecca3);
}

.icon-btn {
    width: 64px;
    height: 64px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-btn.disabled {
    opacity: 0.3;
    cursor: default;
}

.new-game-btn {
    margin-top: 15px;
}

.mode-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.grid-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    margin-bottom: 10px;
}

.grid-header .mode-buttons {
    margin-top: 0;
    gap: 6px;
    justify-self: start;
}

.grid-header .game-mode-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.game-mode-btn {
    flex: 0 0 auto;
    padding: 10px 15px;
    background: #333;
    color: #888;
    border: 2px solid #444;
    font-weight: bold;
}

.game-mode-btn.active {
    background: #666;
    color: #fff;
    border-color: #888;
}

.game-mode-btn:hover:not(.active) {
    background: #444;
    color: #fff;
}

.program-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: #1a1a2e;
    border-radius: 4px;
    border: 1px solid #0f3460;
    transition: transform 0.1s, box-shadow 0.1s;
}

.program-row.active {
    border-color: var(--robot-color, #e94560);
    box-shadow: 0 0 8px var(--robot-color, rgba(233, 69, 96, 0.5));
}

.program-row.dragging {
    background: #0f3460;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.row-grabber {
    cursor: grab;
    color: #666;
    font-size: 1rem;
    padding: 2px 4px;
    user-select: none;
    line-height: 1;
}

.row-grabber:hover {
    color: #4ecca3;
}

.row-grabber:active {
    cursor: grabbing;
}

.program-row .row-number {
    width: 24px;
    font-weight: bold;
    color: #888;
}

.program-row .command-select {
    width: 80px;
    flex-shrink: 0;
    padding: 3px 5px;
    font-size: 0.8rem;
    background: #16213e;
    color: #eee;
    border: 1px solid #0f3460;
    border-radius: 4px;
}

.program-row .options select {
    padding: 3px 5px;
    font-size: 0.8rem;
    background: #16213e;
    color: #eee;
    border: 1px solid #0f3460;
    border-radius: 4px;
}

.program-row .options {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.program-row .options select,
.program-row .options button {
    padding: 2px 5px;
    font-size: 0.75rem;
    background: #0f3460;
    color: #eee;
    border: 1px solid var(--robot-color, #4ecca3);
    border-radius: 3px;
    cursor: pointer;
}

.program-row .options button.active {
    background: var(--robot-color, #4ecca3);
    color: #1a1a2e;
}

.damage-boxes {
    display: flex;
    gap: 2px;
}

.damage-box {
    width: 14px;
    height: 14px;
    border: 1px solid #4ecca3;
    border-radius: 2px;
    background: #0f3460;
    cursor: pointer;
    transition: background 0.1s;
}

.damage-box:hover {
    border-color: #fff;
}

.damage-box.filled {
    background: #e94560;
}

.damage-box.disabled {
    border-color: #333;
    background: #1a1a2e;
    cursor: default;
}

.grid-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-section .phase-indicator {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--robot-color, #4ecca3);
    text-align: center;
    padding: 0 12px;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(8, var(--cell-size));
    grid-template-rows: repeat(8, var(--cell-size));
    gap: var(--cell-gap);
    background: #0f3460;
    border: 3px solid #0f3460;
    border-radius: 4px;
}

.grid-cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.grid-cell.goal-line {
    background: linear-gradient(to bottom, #1a1a2e 70%, #4ecca3 100%);
}

.grid-cell.home-square {
    border: 2px solid;
    border-color: inherit;
}

.robot {
    width: calc(50px * var(--map-scale));
    height: calc(50px * var(--map-scale));
    background: #666;
    border: 2px solid #888;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
}

.robot.animating {
    z-index: 100;
}

.robot .arrow {
    width: 0;
    height: 0;
    border-left: calc(10px * var(--map-scale)) solid transparent;
    border-right: calc(10px * var(--map-scale)) solid transparent;
    border-bottom: calc(20px * var(--map-scale)) solid var(--robot-color, #4ecca3);
    position: absolute;
}

.robot .arrow.N { transform: rotate(0deg); }
.robot .arrow.NE { transform: rotate(45deg); }
.robot .arrow.E { transform: rotate(90deg); }
.robot .arrow.SE { transform: rotate(135deg); }
.robot .arrow.S { transform: rotate(180deg); }
.robot .arrow.SW { transform: rotate(225deg); }
.robot .arrow.W { transform: rotate(270deg); }
.robot .arrow.NW { transform: rotate(315deg); }

.robot-hp-bar {
    position: absolute;
    bottom: calc(2px * var(--map-scale));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    width: calc(30px * var(--map-scale));
    height: calc(12px * var(--map-scale));
}

.robot-hp-box {
    background: #333;
    border-radius: 1px;
}

.robot-hp-box.filled.green {
    background: #4ecca3;
}

.robot-hp-box.filled.yellow {
    background: #f39c12;
}

.robot-hp-box.filled.red {
    background: #e94560;
}

.tank-container {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.2s ease-out;
}

.tank-container.facing-N { transform: rotate(0deg); }
.tank-container.facing-NE { transform: rotate(45deg); }
.tank-container.facing-E { transform: rotate(90deg); }
.tank-container.facing-SE { transform: rotate(135deg); }
.tank-container.facing-S { transform: rotate(180deg); }
.tank-container.facing-SW { transform: rotate(225deg); }
.tank-container.facing-W { transform: rotate(270deg); }
.tank-container.facing-NW { transform: rotate(315deg); }

.tank {
    width: calc(32px * var(--map-scale));
    height: calc(40px * var(--map-scale));
    background: #e94560;
    border: 2px solid #ff6b6b;
    border-radius: 4px 4px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.tank-actions-count {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
}

.tank-actions-count.hidden {
    display: none;
}

.tank-actions-count.depleted {
    opacity: 0.3;
}

.tank-arrow {
    position: absolute;
    top: calc(-10px * var(--map-scale));
    width: 0;
    height: 0;
    border-left: calc(6px * var(--map-scale)) solid transparent;
    border-right: calc(6px * var(--map-scale)) solid transparent;
    border-bottom: calc(10px * var(--map-scale)) solid #e94560;
    cursor: pointer;
    transition: border-width 0.1s ease-out, border-bottom-color 0.1s ease-out, top 0.1s ease-out;
}

.tank-arrow.no-target {
    cursor: default;
}

.tank-arrow.no-target:hover {
    border-bottom-color: #666;
}

.tank-arrow.has-target:hover {
    border-left-width: calc(10px * var(--map-scale));
    border-right-width: calc(10px * var(--map-scale));
    border-bottom-width: calc(18px * var(--map-scale));
    top: calc(-18px * var(--map-scale));
    border-bottom-color: #4ecca3;
}

/* Depleted tank - no hover effects on gun */
.tank-container.depleted .tank-arrow {
    cursor: default;
}

.tank-container.depleted .tank-arrow.no-target:hover,
.tank-container.depleted .tank-arrow.has-target:hover {
    border-left-width: calc(6px * var(--map-scale));
    border-right-width: calc(6px * var(--map-scale));
    border-bottom-width: calc(10px * var(--map-scale));
    top: calc(-10px * var(--map-scale));
    border-bottom-color: #e94560;
}

.tank-damage {
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 1px;
    transform: translateY(calc(100% - 12px));
}

.tank-damage.hidden {
    display: none;
}

.tank-damage-box {
    width: 8px;
    height: 8px;
    border: 1px solid #888;
    border-radius: 1px;
    background: #1a1a2e;
}

.tank-damage-box.hp-green {
    background: #4ecca3;
    border-color: #3db892;
}

.tank-damage-box.hp-yellow {
    background: #f0a500;
    border-color: #d99400;
}

.tank-damage-box.hp-red {
    background: #e94560;
    border-color: #d63850;
}

.tank-damage-box.filled {
    background: #e94560;
}

.tank-damage-box.damage-flash {
    animation: damageFlash 0.4s ease-out;
}

@keyframes damageFlash {
    0%, 20%, 40%, 60%, 80% {
        background: #fff;
        transform: scale(1.3);
    }
    10%, 30%, 50%, 70%, 90% {
        background: #e94560;
        transform: scale(1);
    }
    100% {
        background: #1a1a2e;
        transform: scale(1);
    }
}

.rotation-ring {
    position: absolute;
    top: calc(-10px * var(--map-scale));
    left: calc(-10px * var(--map-scale));
    width: calc(80px * var(--map-scale));
    height: calc(80px * var(--map-scale));
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.grid-cell:hover .rotation-ring {
    opacity: 1;
}

/* Hide rotation ring for depleted tanks */
.grid-cell:hover .tank-container.depleted + .rotation-ring,
.grid-cell:hover .tank-container.depleted ~ .rotation-ring {
    opacity: 0;
}

.rotation-btn {
    position: absolute;
    width: calc(12px * var(--map-scale));
    height: calc(12px * var(--map-scale));
    background: #4ecca3;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.7;
    transition: opacity 0.1s, transform 0.1s;
    z-index: 21;
}

.rotation-btn:hover {
    opacity: 1;
}

.rot-N { top: calc(4px * var(--map-scale)); left: 50%; transform: translateX(-50%); }
.rot-N:hover { transform: translateX(-50%) scale(1.3); }
.rot-NE { top: calc(4px * var(--map-scale)); right: calc(4px * var(--map-scale)); }
.rot-NE:hover { transform: scale(1.3); }
.rot-E { top: 50%; right: calc(4px * var(--map-scale)); transform: translateY(-50%); }
.rot-E:hover { transform: translateY(-50%) scale(1.3); }
.rot-SE { bottom: calc(4px * var(--map-scale)); right: calc(4px * var(--map-scale)); }
.rot-SE:hover { transform: scale(1.3); }
.rot-S { bottom: calc(4px * var(--map-scale)); left: 50%; transform: translateX(-50%); }
.rot-S:hover { transform: translateX(-50%) scale(1.3); }
.rot-SW { bottom: calc(4px * var(--map-scale)); left: calc(4px * var(--map-scale)); }
.rot-SW:hover { transform: scale(1.3); }
.rot-W { top: 50%; left: calc(4px * var(--map-scale)); transform: translateY(-50%); }
.rot-W:hover { transform: translateY(-50%) scale(1.3); }
.rot-NW { top: calc(4px * var(--map-scale)); left: calc(4px * var(--map-scale)); }
.rot-NW:hover { transform: scale(1.3); }

.tank-hit {
    animation: tankHitFlash 0.3s ease-out;
}

@keyframes tankHitFlash {
    0% { 
        background: #ffffff; 
        transform: scale(1.2);
        box-shadow: 0 0 20px #ff0000;
    }
    50% { 
        background: #ff0000; 
    }
    100% { 
        background: #e94560; 
        transform: scale(1);
        box-shadow: none;
    }
}

.scan-target {
    animation: scanTargetFlash 0.5s ease-out;
}

@keyframes scanTargetFlash {
    0%, 20%, 40%, 60%, 80% {
        box-shadow: 0 0 0 3px #4ecca3, 0 0 15px #4ecca3;
    }
    10%, 30%, 50%, 70%, 90% {
        box-shadow: none;
    }
    100% {
        box-shadow: none;
    }
}

.btn-icon {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    transition: transform 0.1s, background 0.1s;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

.btn-icon img {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
}

.controls {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.controls.hidden {
    display: none;
}

.phase-indicator-placeholder {
    font-size: 1rem;
    color: #e94560;
    font-weight: bold;
    margin-right: auto;
    display: none;
}

#undo-btn:disabled, #redo-btn:disabled {
    cursor: not-allowed;
}

#finished-btn {
    width: 100px;
    background: #00b894;
    color: #fff;
}

#finished-btn:hover {
    background: #00a383;
}

.btn {
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

#step-btn {
    width: 120px;
    background: #4ecca3;
    color: #1a1a2e;
}

#step-btn:hover {
    background: #3db892;
}


#reset-btn {
    background: #e94560;
    color: #fff;
}

#reset-btn:hover {
    background: #d63850;
}

.step-indicator {
    font-size: 1rem;
    color: #888;
}

.game-message {
    margin-top: 20px;
    padding: 20px 40px;
    background: #16213e;
    border: 3px solid #4ecca3;
    border-radius: 12px;
    text-align: center;
}

.game-message.win {
    border-color: #4ecca3;
}

.game-message.lose {
    border-color: #e94560;
}

.game-message.tie {
    border-color: #f0a500;
}

.game-message h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.game-message.win h2 {
    color: #4ecca3;
}

.game-message.lose h2 {
    color: #e94560;
}

.game-message.tie h2 {
    color: #f0a500;
}

.game-message p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.game-message button {
    padding: 10px 25px;
    font-size: 1rem;
    background: #4ecca3;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.damage-flash {
    animation: flash 0.3s ease-out;
}

@keyframes flash {
    0% { background-color: #ff0000; }
    100% { background-color: inherit; }
}

/* Custom mode */
.custom-title-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: #333;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 3px;
    cursor: pointer;
    justify-self: end;
}

.custom-title-btn:hover {
    background: #555;
    color: #fff;
}

.custom-marker {
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: #000;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.custom-marker:hover {
    outline: 2px solid #fff;
}

.dragging-ghost {
    position: fixed;
    opacity: 0.6;
    pointer-events: none;
    z-index: 100;
    border: 2px dashed #fff;
    border-radius: 4px;
    background: #1a1a2e;
}