.crossword-container,
.crossword-container * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.crossword-container {
    width: min(100%, 760px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.crossword-controls {
    justify-content: center;
    gap: 8px;
}

.crossword-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(210px, 280px);
    gap: 14px;
    align-items: start;
}

.crossword-board {
    width: min(100%, 520px);
    margin: 0 auto;
    display: grid;
    gap: 2px;
}

.crossword-cell {
    aspect-ratio: 1;
    min-width: 0;
    position: relative;
}

.crossword-cell.empty {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

.crossword-cell.playable {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #5f8ea8;
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 rgba(40, 96, 125, 0.12); margin: 0;
}

.crossword-cell.playable.active {
    background: #fff8cf;
    border-color: #f4b942;
}

.crossword-cell.playable.secret {
    background: #e7f6e9;
    border-color: #61a96b;
}

.crossword-cell.playable.secret.active {
    background: #f4ffd8;
}

.crossword-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: clamp(9px, 1.8vw, 12px);
    font-weight: 800;
    color: #3f687b;
    line-height: 1;
    pointer-events: none;
}

.crossword-cell input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #24343c;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: bold;
    line-height: 1;
    outline: 0;
    padding: 12% 4% 0;
}

.crossword-clues {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.crossword-clues h3 {
    margin: 0 0 2px;
    font-size: 18px;
    color: #304c5b;
}

.crossword-clue {
    width: 100%;
    border: 2px solid #d4e6ef;
    background: #ffffff;
    color: #263f4d;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: left;
    font-size: 14px;
    line-height: 1.25;
    cursor: pointer;
}

.crossword-clue.active {
    border-color: #f4b942;
    background: #fff8cf;
}

.crossword-secret {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #3c5663;
    font-weight: 800;
}

.crossword-secret-row {
    display: flex;
    gap: 4px;
}

.crossword-secret-row span {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #d8edf5;
    border: 2px solid #8fbfd3;
    color: #245269;
    font-weight: 900;
}

.crossword-secret.revealed .crossword-secret-row span {
    background: #c8efcc;
    border-color: #61a96b;
}

.crossword-feedback {
    text-align: center;
}

.crossword-feedback.success {
    color: #2e7d32;
}

.crossword-feedback.error {
    color: #c62828;
}

@media (max-width: 680px) {
    .crossword-layout {
        grid-template-columns: 1fr;
    }

    .crossword-board {
        width: min(100%, 430px);
        gap: 2px;
        padding: 6px;
    }

    .crossword-clues {
        max-width: 430px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 380px) {
    .crossword-clue {
        font-size: 13px;
        padding: 7px 8px;
    }

    .crossword-secret {
        flex-direction: column;
        gap: 6px;
    }

    .crossword-secret-row span {
        width: 28px;
        height: 28px;
    }
}