/*
 * sudoku.css — Jogo de Sudoku (pop-up aberto pela 1ª estante)
 * Reaproveita a mesma linguagem visual "Frutiger Aero" já usada no resto
 * do site (vidro azul-esverdeado translúcido, pílulas com gradiente,
 * Comfortaa nos títulos e Nunito no corpo — ver .dashboard-painel e
 * .botao-atalho em estilo.css). Fica em arquivo próprio (em vez de
 * dentro de estilo.css) só pra ficar fácil de achar e revisar.
 */

/* === BOTÃO NA ESTANTE + POP-UP ===============================================
 * O jogo abre num <dialog> nativo (.sudoku-popup), aberto pelo botão "Jogar
 * Sudoku" (.sudoku-abrir) que fica sobre a prateleira do 1º andar. O <dialog>
 * fica FORA da .sala, então o cursor de giz (que vale só dentro de .sala) não
 * chega até ele — aqui volta o cursor normal, como convém a um jogo. Os
 * botões e células (mais abaixo) declaram o próprio "cursor: pointer".
 */

.sudoku-popup,
.sudoku-popup * {
    cursor: default;
}

.sudoku-popup {
    width: min(560px, calc(100vw - 24px));
    max-width: none;
    max-height: none;
    /* O reset "* { margin: 0 }" do estilo.css tira a centralização automática do
     * <dialog>; "margin: auto" devolve (o dialog aberto é posicionado em toda a tela). */
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
}

.sudoku-popup[open] {
    animation: sudoku-aparece 0.2s ease-out;
}

.sudoku-popup::backdrop {
    background: rgba(8, 14, 20, 0.6);
    backdrop-filter: blur(3px);
}

@keyframes sudoku-aparece {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sudoku-popup[open] { animation: none; }
}

/* Botão sobre a prateleira do 1º andar: pílula de vidro, no mesmo estilo dos
 * outros botões do site. .estante-andar-1 é "position: relative", então o
 * botão fica preso ao andar. */
.sudoku-abrir {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0d3b52;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(190, 232, 245, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 20, 35, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sudoku-abrir:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 20, 35, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.sudoku-abrir:focus-visible,
.sudoku-fechar:focus-visible {
    outline: 3px solid #0f6e8c;
    outline-offset: 3px;
}

/* Botão de fechar (×) no canto da janela de vidro — 44 px para dar para acertar com o dedo. */
.sudoku-fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    line-height: 1;
    font-family: 'Nunito', sans-serif;
    color: #0d3b52;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}
.sudoku-fechar:hover { background: rgba(255, 255, 255, 0.95); }

.sudoku-janela {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 26px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(205, 238, 248, 0.78) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    box-shadow:
        0 20px 50px rgba(0, 20, 35, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Os botões e células (mais abaixo no arquivo) já têm seu próprio
 * "cursor: pointer" declarado — como vêm depois no arquivo, ganham da
 * regra genérica ".sudoku-popup *" acima (mesma especificidade, mas
 * ordem posterior no CSS). Só a célula fixa e o título continuam com
 * o cursor normal (não são clicáveis). */

.sudoku-titulo {
    padding: 0 40px; /* não deixa o título passar por baixo do botão × */
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d3b52;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: center;
}

/* === SELETOR DE DIFICULDADE ================================================ */

.sudoku-dificuldades {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.sudoku-dificuldade-botao {
    font-family: 'Nunito', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    padding: 8px 18px;
    color: #0f6e8c;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.sudoku-dificuldade-botao:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.sudoku-dificuldade-ativa,
.sudoku-dificuldade-ativa:hover {
    color: #0d3b52;
    background: linear-gradient(to bottom, #eaffff 0%, #7fd4e8 100%);
    box-shadow: 0 3px 8px rgba(0, 60, 90, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* === AÇÕES (novo jogo / reiniciar) + INFORMAÇÕES =========================== */

.sudoku-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.sudoku-acao-botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 16px;
    color: #0d3b52;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.sudoku-acao-botao:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

.sudoku-info {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    color: rgba(15, 45, 60, 0.85);
    font-size: 0.98rem;
}

.sudoku-cronometro {
    font-weight: 800;
    color: #0d3b52;
    font-variant-numeric: tabular-nums;
}

.sudoku-mensagem {
    min-height: 1.4em;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0d3b52;
    text-align: center;
}

/* === GRADE DO SUDOKU ========================================================
 * clamp() garante que a grade sempre caiba na tela (largura E altura),
 * tanto num celular pequeno quanto num monitor grande.
 */

.sudoku-grade {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: min(88vw, 62vh, 420px);
    height: min(88vw, 62vh, 420px);
    background: rgba(13, 59, 82, 0.9);
    border: 3px solid rgba(13, 59, 82, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 30, 45, 0.35);
    transition: opacity 0.2s;
}

.sudoku-grade-carregando { opacity: 0.45; pointer-events: none; }

.sudoku-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.95rem, 4.2vmin, 1.4rem);
    font-weight: 600;
    color: #0f6e8c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 59, 82, 0.15);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.1s;
}

.sudoku-celula-fixa {
    color: #0d3b52;
    font-weight: 800;
    background: rgba(214, 236, 244, 0.85);
    cursor: default;
}

.sudoku-borda-esquerda { border-left: 2.5px solid rgba(13, 59, 82, 0.85); }
.sudoku-borda-topo     { border-top: 2.5px solid rgba(13, 59, 82, 0.85); }
.sudoku-borda-direita  { border-right: 2.5px solid rgba(13, 59, 82, 0.85); }
.sudoku-borda-baixo    { border-bottom: 2.5px solid rgba(13, 59, 82, 0.85); }

.sudoku-celula-destaque { background: rgba(180, 230, 245, 0.55); }

.sudoku-celula-mesmo-numero { background: rgba(140, 210, 235, 0.55); }

.sudoku-celula-selecionada {
    background: rgba(255, 224, 130, 0.85);
}
.sudoku-celula-selecionada.sudoku-celula-mesmo-numero { background: rgba(255, 224, 130, 0.85); }

.sudoku-celula-erro {
    color: #a02b2b !important;
    background: rgba(255, 190, 190, 0.75) !important;
}

.sudoku-grade-vitoria {
    animation: sudoku-vitoria 0.9s ease;
}
@keyframes sudoku-vitoria {
    0%   { box-shadow: 0 10px 26px rgba(0, 30, 45, 0.35); }
    40%  { box-shadow: 0 0 0 10px rgba(120, 230, 160, 0.55); }
    100% { box-shadow: 0 10px 26px rgba(0, 30, 45, 0.35); }
}

/* === TECLADO NUMÉRICO NA TELA ===============================================
 * Funciona junto com o teclado físico — o aluno pode usar qualquer um dos
 * dois. Em telas de toque isso é o principal jeito de jogar.
 */

.sudoku-teclado {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: min(88vw, 420px);
}

.sudoku-tecla {
    padding: 10px 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d3b52;
    background: linear-gradient(to bottom, #ffffff 0%, #d8f0f7 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 60, 90, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.1s, box-shadow 0.1s;
}
.sudoku-tecla:hover { transform: translateY(-1px); }
.sudoku-tecla:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0, 40, 60, 0.25); }

.sudoku-tecla-apagar {
    grid-column: span 2;
    color: #7a3a1a;
    background: linear-gradient(to bottom, #fff4ea 0%, #ffd9b8 100%);
}

/* === CELULAR ================================================================ */

@media (max-width: 600px) {
    .sudoku-janela { padding: 18px 14px 20px; gap: 10px; border-radius: 18px; }
    .sudoku-titulo { font-size: 1.3rem; }
    .sudoku-dificuldade-botao,
    .sudoku-acao-botao { font-size: 0.9rem; padding: 7px 14px; }
    .sudoku-grade { width: min(90vw, 58vh, 380px); height: min(90vw, 58vh, 380px); }
    .sudoku-tecla { font-size: 1.05rem; padding: 9px 0; }
}