.cube-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 12px 0 8px;
}

.cube-status #timer { margin: 0; }

.cubeGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(176px, 264px));
    gap: 24px 32px;
    justify-content: center;
    width: min(90vw, 560px);
    max-width: 90vw;
    margin: 28px auto;
    touch-action: none;
}

.cubeLayer { min-width: 0; width: 100%; max-width: 264px; }
.cubeLayerTitle { margin: 0 0 8px; font-size: 16px; font-weight: bold; }

.cubeLayerGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    background: var(--surface);
}

.cubeCell {
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: clamp(15px, 2.4vw, 21px);
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.cubeCell:nth-child(3n) { border-right: 0; }
.cubeCell:nth-last-child(-n + 3) { border-bottom: 0; }
.cubeCell.black { background: #000 !important; color: #000 !important; cursor: default; }
.cubeCell.clue, .cubeCell.chainCell { font-weight: bold; }
.cubeCell.current { outline: 4px solid var(--border); outline-offset: -4px; }
.cubeCell:focus-visible { outline: 3px solid var(--border); outline-offset: -3px; }
#cubeProgress { font-size: 18px; }
#message { min-height: 24px; margin: 10px auto; text-align: center; }

@media (max-width: 700px) {
    .cubeGrid {
        grid-template-columns: 1fr;
        gap: 10px;
        width: min(76vw, 260px);
        max-width: 76vw;
        margin: 14px auto;
    }

    .cubeLayer {
        width: min(76vw, 260px);
        max-width: 260px;
    }

    .cubeLayerTitle {
        margin: 0 0 3px;
        font-size: 11px;
        line-height: 1.1;
    }

    .cubeCell {
        font-size: clamp(12px, 3.5vw, 16px);
    }
}

@media (max-height: 760px) and (max-width: 700px) {
    .cubeGrid {
        width: min(68vw, 220px);
        max-width: 68vw;
        gap: 7px;
        margin: 10px auto;
    }

    .cubeLayer {
        width: min(68vw, 220px);
        max-width: 220px;
    }

    .cubeLayerTitle { font-size: 10px; }
    .cubeCell { font-size: 12px; }
}