@import url("../../../2D/hex/css/hex.css");
[hidden] { display: none !important; }

.board-panel-4d {
    height: clamp(640px, calc(100vh - 150px), 980px);
    min-height: 520px;
    background: #070b10;
    overflow: hidden;
}

#hexBoard {
    width: 100%;
    height: 100%;
    min-height: clamp(600px, calc(100vh - 170px), 940px);
    aspect-ratio: auto;
    background: #080d12;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

#hexBoard.dragging {
    cursor: grabbing;
}

.view-settings {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, 0.14);
    border-radius: 8px;
    background: #10151a;
}

.view-settings summary {
    cursor: pointer;
    color: #e6fbff;
    font-weight: 850;
}

.slice-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.slice-switcher { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.slice-switcher button { width: auto; min-width: 38px; padding: 6px 9px; }
.slice-switcher button[aria-pressed="true"] { border-color: var(--gold); color: #fff1b8; }

.slice-controls label,
.range-grid label {
    display: grid;
    gap: 5px;
}

input[type="range"] {
    min-height: 30px;
    padding: 0;
    accent-color: var(--cyan);
}

.secondary-button { background: #0b1015; }

@media (max-width: 1040px) {
    .board-panel-4d {
        height: clamp(500px, 72svh, 720px);
        min-height: 0;
    }

    #hexBoard {
        height: 100%;
        min-height: 0;
    }
}

@media (max-width: 680px) {
    .board-panel-4d {
        height: clamp(360px, 62svh, 560px);
        min-height: 0;
        padding: 5px;
    }

    #hexBoard {
        height: 100%;
        min-height: 0;
    }

    .slice-controls,
    .range-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .board-panel-4d {
        height: clamp(340px, 58svh, 500px);
    }
}