@import url('/style-guide.css');

/* ── HUD ─────────────────────────────────────────────────────────────────── */

.hud-mistakes::before { content: '✕ '; font-weight: 400; opacity: .8; }
.hud-timer::before    { content: '⏱ '; font-weight: 400; opacity: .8; }

/* ── Board ───────────────────────────────────────────────────────────────── */

.sudoku-grid {
    aspect-ratio: 1;
    background: var(--color-surface);
    border: 2px solid var(--color-text);
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    width: min(100%, 500px);
}

.sudoku-cell {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-mid);
    color: var(--color-blue);
    cursor: pointer;
    display: flex;
    font-size: clamp(1.1rem, 5vmin, 2rem);
    font-weight: 600;
    justify-content: center;
    position: relative;
    touch-action: manipulation;
}

/* Thicker separators between 3×3 boxes */
.sudoku-cell:nth-child(3n) { border-right: 2px solid var(--color-text); }
.sudoku-cell:nth-child(9n) { border-right: none; }
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--color-text); }

.sudoku-cell.fixed { color: var(--color-text); }
.sudoku-cell.wrong { color: var(--color-loss); }

.highlight-row,
.highlight-column,
.highlight-box { background: #eaf2f8; }

.highlight-same-number { background: #cfe7f8; }

.selected { background: #a6d7ff; z-index: 1; }

.invalid,
.selected.invalid,
.highlight-row.invalid,
.highlight-column.invalid,
.highlight-box.invalid,
.highlight-same-number.invalid { background: #ffd6d6; }

.completed-number { font-weight: normal; }

/* ── Notes ───────────────────────────────────────────────────────────────── */

.notes-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.note {
    align-items: center;
    color: #777;
    display: flex;
    font-size: clamp(8px, 2vw, 12px);
    font-weight: normal;
    justify-content: center;
}

/* ── Number pad ──────────────────────────────────────────────────────────── */

#numpad {
    display: grid;
    flex: 0 0 auto;
    gap: .3em;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 520px;
    padding: 0 .75em .6em;
    width: 100%;
}

.number-btn {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    gap: .15em;
    justify-content: center;
    min-height: 52px;
    padding: .3em 0;
    touch-action: manipulation;
    transition: background .12s, border-color .12s;
}

.number-btn:hover  { background: #eaf2f8; }
.number-btn:active { background: #d8ebf7; }

.number-btn__digit {
    color: var(--color-blue);
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
}

.number-btn__count {
    color: var(--color-text-soft);
    font-size: .7em;
    line-height: 1;
}

.number-btn.completed {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
}

.number-btn.completed .number-btn__digit { color: var(--color-border-mid); }
.number-btn.completed .number-btn__count { color: var(--color-win); font-weight: 700; }

.number-btn.notes-mode {
    background: #eaf2f8;
    border: 1px dashed var(--color-blue);
}

/* pencil-sized digits while taking notes */
.number-btn.notes-mode .number-btn__digit {
    color: var(--color-blue-dark);
    font-size: 1em;
}

.number-btn.note-active {
    background: #d8ebf7;
    box-shadow: inset 0 0 0 2px var(--color-blue);
}

/* ── Result panel & toast ────────────────────────────────────────────────── */

#result.visible { transform: none; }

.copy-toast {
    background: #333;
    border-radius: 999px;
    bottom: 6em;
    color: #fff;
    font-size: .875rem;
    left: 50%;
    opacity: 0;
    padding: .5rem 1.25rem;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    transition: opacity .2s ease;
    z-index: 100;
}

.copy-toast.visible { opacity: 1; }

/* ── Animations ──────────────────────────────────────────────────────────── */

.sudoku-cell.deal { animation: deal-in .3s ease backwards; }

@keyframes flash-loss {
    0%   { background-color: var(--color-loss); color: #fff; }
    100% { }
}

.wrong-flash { animation: shake .4s ease, flash-loss .5s ease; }

@keyframes unit-pulse {
    0%   { transform: scale(1); }
    45%  { background-color: #c8e6ff; transform: scale(1.15); }
    100% { transform: scale(1); }
}

.unit-pulse { animation: unit-pulse .3s ease both; z-index: 1; }

@keyframes conflict-pulse {
    0%   { box-shadow: inset 0 0 0 0px rgba(220, 53, 53, 0); }
    40%  { box-shadow: inset 0 0 0 4px rgba(40, 97, 195, 0.75); }
    100% { box-shadow: inset 0 0 0 0px rgba(220, 53, 53, 0); }
}

.conflict-pulse { animation: conflict-pulse 1s ease-out; }

@keyframes win-cell-pulse {
    0%   { background-color: #fff; transform: scale(1); }
    50%  { background-color: #c8e6ff; transform: scale(1.15); }
    100% { background-color: #fff; transform: scale(1); }
}

.win-pulse {
    animation: win-cell-pulse .65s ease-in-out both;
    background-color: #c8e6ff71;
}

@keyframes btn-click {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-click { animation: btn-click .25s ease-out; }

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 430px) {
    #controls { gap: .35em; }

    #controls .game-button {
        font-size: .85em;
        padding: .5em .7em;
    }
}