/* Number Puzzle - Classic Senior Theme */
:root {
    --number-lane-width: 640px;
}

.number-shell {
    background: linear-gradient(180deg, #f9f3e4 0%, #f3ead3 100%);
    border: 2px solid #8f7a4c;
}

.number-board-frame {
    width: 100%;
    max-width: var(--number-lane-width);
    margin: 0 auto;
}

.number-shell .info-bar {
    width: 100%;
    max-width: var(--number-lane-width);
    margin: 0 auto 8px;
}

.game-board {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: var(--number-lane-width);
    margin: 0 auto;
    padding: 10px;
    border: 2px solid #d7b979;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 36%),
        linear-gradient(180deg, #1d5a42 0%, #164634 100%);
}

.game-board.grid-3x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-board.grid-4x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-board.grid-5x5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.number-placeholder {
    grid-column: 1 / -1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f7edd2;
    padding: 2rem 1rem;
}

.number-placeholder-icon {
    font-size: 2.8rem;
    margin-bottom: 0.65rem;
}

.number-placeholder-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.number-placeholder-text {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    color: rgba(247, 237, 210, 0.88);
}

.number-tile {
    aspect-ratio: 1;
    background: linear-gradient(180deg, #fff8e7 0%, #f1e0b9 100%);
    border: 2px solid #dec99a;
    border-radius: 16px;
    font-size: 2rem;
    font-weight: 800;
    color: #3b3e2f;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: none;
}

.number-tile:hover:not(.found):not(.wrong) {
    transform: translateY(-2px);
    border-color: #d4af63;
    color: #1f5d45;
}

.number-tile.found {
    background: linear-gradient(180deg, #84c59f 0%, #2f9e63 100%);
    color: #fffdf8;
    border-color: #84c59f;
    cursor: default;
    opacity: 0.75;
    transform: scale(0.95);
}

.number-tile.wrong {
    background: #ffe8e3;
    border-color: #c95b45;
    color: #b33d26;
    animation: number-shake 0.35s;
}

@keyframes number-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.number-action-lane {
    width: 100%;
    max-width: var(--number-lane-width);
    margin: 8px auto 0;
    border: 1px solid #cbb17a;
    border-radius: 12px;
    background: #f7edd8;
    padding: 10px;
}

.number-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.number-start-btn {
    min-height: 48px;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 0.9rem;
    font-weight: 700;
}

.number-difficulty-row {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.number-diff-label {
    color: #615b48;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.number-difficulty-row .difficulty-selector {
    margin: 0;
    gap: 6px;
}

.number-difficulty-row .difficulty-btn {
    min-width: 88px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #cbb07a;
    background: #fff8e8;
    color: #4a4738;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0 14px;
    box-shadow: none;
}

.number-difficulty-row .difficulty-btn.active {
    background: #1f5d45;
    border-color: #1f5d45;
    color: #f7edd2;
}

@media (max-width: 760px) {
    .number-control-row {
        flex-direction: column;
        align-items: stretch;
    }

    .number-start-btn {
        width: 100%;
    }

    .number-difficulty-row {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .game-board { gap: 8px; }
    .number-tile { font-size: 1.8rem; }
    .game-board.grid-5x5 .number-tile { font-size: 1.35rem; }
}



/* 2026-03 final tablet compact pass: number puzzle */
:root {
    --number-lane-width: 600px;
}

.number-shell .info-bar,
.number-board-frame,
.number-action-lane,
.number-shell .guide-box,
.number-shell .bottom-actions {
    max-width: var(--number-lane-width);
}

.game-board {
    gap: 8px;
    padding: 8px;
}

.number-placeholder {
    min-height: 220px;
    padding: 1.2rem 0.9rem;
}

.number-tile {
    border-radius: 14px;
    font-size: 1.75rem;
}

.game-board.grid-5x5 .number-tile {
    font-size: 1.2rem;
}

.number-action-lane {
    padding: 8px;
}

.number-start-btn {
    min-height: 44px;
    font-size: 0.86rem;
}

.number-difficulty-row {
    min-height: 44px;
}

.number-diff-label {
    min-height: 40px;
    font-size: 0.82rem;
}

.number-difficulty-row .difficulty-btn {
    min-width: 82px;
    min-height: 40px;
    font-size: 0.8rem;
    padding: 0 12px;
}

@media (min-width: 768px) and (max-width: 1180px) {
    :root {
        --number-lane-width: 540px;
    }

    .game-content-wrapper.number-shell {
        padding: 0.95rem 1rem 0.85rem;
    }

    .number-shell .info-bar {
        margin-bottom: 6px;
    }

    .number-shell .info-item {
        min-width: 112px;
        padding: 0.45rem 0.7rem;
        font-size: 0.88rem;
    }

    .game-board {
        gap: 6px;
        padding: 6px;
        border-radius: 12px;
    }

    .number-placeholder {
        min-height: 190px;
        padding: 1rem 0.8rem;
    }

    .number-placeholder-icon {
        font-size: 2.2rem;
        margin-bottom: 0.45rem;
    }

    .number-placeholder-title {
        font-size: 1rem;
    }

    .number-placeholder-text {
        font-size: 0.8rem;
    }

    .number-tile {
        border-radius: 12px;
        font-size: 1.45rem;
    }

    .game-board.grid-4x4 .number-tile {
        font-size: 1.24rem;
    }

    .game-board.grid-5x5 .number-tile {
        font-size: 1.02rem;
    }

    .number-action-lane {
        margin-top: 6px;
        padding: 7px;
    }

    .number-control-row {
        gap: 8px;
    }

    .number-start-btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 0.8rem;
    }

    .number-difficulty-row {
        min-height: 40px;
        gap: 6px;
    }

    .number-diff-label {
        min-height: 38px;
        font-size: 0.78rem;
    }

    .number-difficulty-row .difficulty-selector {
        gap: 5px;
    }

    .number-difficulty-row .difficulty-btn {
        min-width: 76px;
        min-height: 38px;
        font-size: 0.74rem;
        padding: 0 10px;
    }

    .number-shell .guide-box {
        margin-top: 6px;
        padding: 0.72rem 0.8rem;
    }

    .number-shell .guide-title-standard {
        font-size: 0.92rem;
        margin-bottom: 0.25rem;
    }

    .number-shell .guide-text-standard {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .number-shell .bottom-actions {
        margin-top: 0.45rem;
        padding-top: 0.45rem;
    }
}