@import url("../../../2D/hex/css/hex.css");

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

#hexBoard {
    width: 100%;
    height: 100%;
    min-height: clamp(600px, calc(100vh - 170px), 940px);
    aspect-ratio: auto;
    background: #080d12;
    cursor: grab;
    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;
}

.range-grid label {
    display: grid;
    gap: 4px;
}

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

.coordinate-filter {
    display: grid;
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid rgba(226, 232, 240, 0.12);
}

.coordinate-filter strong { font-size: 13px; }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.secondary-button { background: #0b1015; }

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

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

@media (max-width: 680px) {
    .top-bar { gap: 8px; }
    .top-bar h1 { font-size: clamp(25px, 8vw, 34px); }
    .top-bar p:last-child {
        font-size: 13px;
        line-height: 1.35;
    }

    .game-info-bar { gap: 8px; }
    .turn-pill,
    .boundary-display {
        min-height: 34px;
        padding-inline: 9px;
        font-size: 13px;
    }

    .board-panel-3d {
        height: clamp(360px, 62svh, 560px);
        padding: 5px;
    }

    #hexBoard {
        height: 100%;
        min-height: 0;
        border-radius: 5px;
    }

    .range-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .view-settings {
        padding: 9px;
    }
}

@media (max-width: 420px) {
    .filter-grid,
    .range-grid { grid-template-columns: 1fr; }

    .board-panel-3d {
        height: clamp(340px, 58svh, 500px);
    }
}