/*
MIT License

Copyright (c) 2023 Paul Parks

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* ====================================================================
   Sudoku -- TDL-flavored stylesheet
   All custom properties prefixed --sdk- to avoid portal collisions.
   Scoped to .sudoku-app so button/reset styles don't leak.
   ==================================================================== */

/* --- Design tokens (light default) --------------------------------- */
.sudoku-app {
    --sdk-surface: #ffffff;
    --sdk-surface-alt: #f0f1f4;
    --sdk-text: #1a1a2e;
    --sdk-text-muted: #6b7280;
    --sdk-border: #e2e5ea;
    --sdk-accent: #2ecc71;
    --sdk-accent-hover: #27ae60;
    --sdk-danger: #e74c3c;
    --sdk-btn-bg: #ffffff;
    --sdk-btn-hover: #f0f1f4;
    --sdk-shadow-btn:
        0 1px 0 rgba(0, 0, 0, .04),
        0 1px 3px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    --sdk-radius: 8px;
    --sdk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, sans-serif;

    /* Grid */
    --sdk-grid-line: #d0d5dc;
    --sdk-grid-bound: #1a1a2e;
    --sdk-cell-bg: #ffffff;

    /* Numbers */
    --sdk-static: #1a1a2e;
    --sdk-game: #1a9e4e;
    --sdk-hint-dim: #c8cfd6;
    --sdk-hint-active: #15803d;

    /* Board max size -- height-only constraint. On mobile the controls have
       fixed height (rectangular buttons), so we subtract a constant. On
       desktop the controls use square buttons that scale with the board,
       so the 0.82 factor applies (see @media override below). */
    --sdk-board-max: calc(100vh - 300px);
    --sdk-pad-gap: .25rem;
    --sdk-section-gap: 10px;
}

@supports (height: 1dvh) {
    .sudoku-app {
        --sdk-board-max: calc(100dvh - 300px);
    }
}

/* --- Dark tokens --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .sudoku-app {
        --sdk-surface: #1f2937;
        --sdk-surface-alt: #1a2332;
        --sdk-text: #e5e7eb;
        --sdk-text-muted: #9ca3af;
        --sdk-border: #4b5668;
        --sdk-btn-bg: #2a3545;
        --sdk-btn-hover: #3a465c;
        --sdk-shadow-btn:
            0 1px 0 rgba(0, 0, 0, .4),
            0 2px 4px rgba(0, 0, 0, .35),
            inset 0 1px 0 rgba(255, 255, 255, .09);

        --sdk-grid-line: #374151;
        --sdk-grid-bound: #9ca3af;
        --sdk-cell-bg: #1f2937;

        --sdk-static: #e5e7eb;
        --sdk-game: #2ecc71;
        --sdk-hint-dim: #4b5563;
        --sdk-hint-active: #4ade80;
    }
}

/* --- Portal sticky-footer fix: the portal body has margin-bottom:60px
   for the absolute footer, which inflates document height. Absorb it
   so the Sudoku page doesn't scroll when content fits visually. ----- */
body {
    margin-bottom: 0 !important;
}

/* --- Standalone dark mode (when viewed outside the portal) --------- */
@media (prefers-color-scheme: dark) {
    body {
        background: #111827;
        color: #e5e7eb;
    }
}

/* --- App container ------------------------------------------------- */
.sudoku-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--sdk-board-max);
    margin: 0 auto;
    padding: 0;
    margin-top: -.35rem;
    margin-bottom: 0;
    gap: var(--sdk-section-gap);
    box-sizing: border-box;
    font-family: var(--sdk-font);
    color: var(--sdk-text);
}

/* --- Top section (title + mode bar) -------------------------------- */
.sudoku-top {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sudoku-top h1 {
    display: none;
}

.mode-controls {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--sdk-pad-gap);
    width: 100%;
    margin: 0;
}

/* Make New and Restart equal width */
#generateBoardButton,
#resetGame {
    flex: 1 1 0;
    max-width: 6rem;
}

/* --- Unified button base (scoped to app) --------------------------- */
.sudoku-app button,
.sudoku-app select {
    margin: 0;
    padding: .4rem .7rem;
    font-family: var(--sdk-font);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--sdk-text);
    background: var(--sdk-btn-bg);
    border: 1px solid var(--sdk-border);
    border-radius: var(--sdk-radius);
    box-shadow: var(--sdk-shadow-btn);
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.sudoku-app button:hover,
.sudoku-app select:hover {
    background: var(--sdk-btn-hover);
}

.sudoku-app button:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
}

.sudoku-app button:focus-visible,
.sudoku-app select:focus-visible {
    outline: 2px solid var(--sdk-accent);
    outline-offset: 2px;
}

.sudoku-app button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Mode-control bar sizing */
.sudoku-top .mode-controls button,
.sudoku-top .mode-controls select {
    height: 2.1rem;
    padding: 0 .6rem;
    font-size: .82rem;
    min-width: 2.1rem;
}

.sudoku-top select#difficultyDropdown {
    appearance: auto;
}

/* Danger-styled reset/clear */
.sudoku-app #resetGame {
    color: var(--sdk-danger);
    font-weight: 600;
}

#clearBoard {
    display: none;
}

/* --- Stage + board ------------------------------------------------- */
.sudoku-stage {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sdk-section-gap);
}

.sudoku-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    aspect-ratio: 1 / 1;
    width: 100%;
    gap: 0;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: var(--sdk-radius);
    overflow: hidden;
    transition: box-shadow .3s;
}

.sudoku-board.board-invalid {
    box-shadow: 0 0 0 3px var(--sdk-danger),
        0 0 12px rgba(231, 76, 60, .2);
}

/* --- Grid cells ---------------------------------------------------- */
.sudoku-board .cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sdk-cell-bg);
    border: 0;
    border-right: 1px solid var(--sdk-grid-line);
    border-bottom: 1px solid var(--sdk-grid-line);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background .1s;
    /* Reset button base styles that leak via .sudoku-app button */
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-weight: normal;
    transform: none;
}

.sudoku-board .cell:active {
    transform: none;
}

/* 3x3 block boundaries */
.sudoku-board .cell-right {
    border-right: 3px solid var(--sdk-grid-bound);
}

.sudoku-board .cell-bottom {
    border-bottom: 3px solid var(--sdk-grid-bound);
}

.sudoku-board .cell-left {
    border-left: 3px solid var(--sdk-grid-bound);
}

.sudoku-board .cell-top {
    border-top: 3px solid var(--sdk-grid-bound);
}

/* --- Numbers ------------------------------------------------------- */
.main-number {
    position: absolute;
    inset: 0;
    font-size: clamp(14px, calc(1.4vw + 1.4vh + .9vmin), 64px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: var(--sdk-font);
}

.static-number {
    color: var(--sdk-static);
    font-weight: 700;
}

.game-number {
    color: var(--sdk-game);
    font-weight: 500;
}

.invalid-number {
    color: var(--sdk-danger) !important;
}

/* --- Hints --------------------------------------------------------- */
.hints {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    color: var(--sdk-hint-dim);
}

.hint {
    width: 100%;
    height: 100%;
    font-family: var(--sdk-font);
    font-size: clamp(8px, calc(.63vw + .63vh + .22vmin), 26px);
    font-weight: 700;
    line-height: 1;
    opacity: .3;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}

.hints .active-hint {
    opacity: 1;
    color: var(--sdk-hint-active);
}

/* --- Selected states ----------------------------------------------- */
.sudoku-board .cell.selected {
    box-shadow: inset 0 0 0 2px var(--sdk-accent);
    background: rgba(46, 204, 113, .08);
}

.sudoku-app button.selected {
    background: rgba(46, 204, 113, .15);
    box-shadow: inset 0 0 0 2px var(--sdk-accent);
    border-color: var(--sdk-accent);
}

.sudoku-app .number-button.selected {
    background: var(--sdk-accent-hover) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    border-color: #fff !important;
}

/* --- Winner -------------------------------------------------------- */
.sudoku-board.winner {
    box-shadow: 0 0 0 3px var(--sdk-accent),
        0 0 16px rgba(46, 204, 113, .25);
}

.sudoku-board.winner .cell {
    background: rgba(46, 204, 113, .1);
}

/* --- Help overlay -------------------------------------------------- */
#helpText {
    position: absolute;
    inset: 0;
    flex-direction: column;
    background: var(--sdk-surface);
    color: var(--sdk-text);
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    margin: 0;
    padding: 1rem;
    font-size: clamp(.7rem, calc(.5vw + .5vh), .95rem);
    line-height: 1.35;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    border-radius: calc(var(--sdk-radius) - 1px);
    z-index: 10;
}

#helpText p,
#helpText li {
    margin: .35rem 0;
    color: var(--sdk-text);
}

#helpText ul {
    margin: .4rem 0 .3rem 1rem;
    padding: 0;
}

#helpText li {
    padding-left: .1rem;
}

#helpText a {
    color: var(--sdk-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#helpText a:visited {
    color: var(--sdk-accent-hover);
}

#helpText a:hover {
    text-decoration-thickness: 2px;
}

/* --- Controls (number pad + action buttons) ------------------------ */
.sudoku-controls {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--sdk-pad-gap);
    width: 100%;
    margin: 0;
}

.sudoku-controls button {
    width: 100%;
    padding: .3rem 0;
    min-height: 44px;
}

.sudoku-app .number-button {
    font-size: clamp(18px, 5.5vmin, 48px);
    font-weight: 600;
    background: var(--sdk-accent);
    color: #fff;
    border-color: var(--sdk-accent-hover);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08),
        0 1px 3px rgba(39, 174, 96, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sudoku-app .number-button:hover {
    background: var(--sdk-accent-hover);
}

.sudoku-app .action-btn {
    font-size: clamp(16px, 4.5vmin, 40px);
    font-variant-emoji: text;
    background: var(--sdk-surface-alt);
    border-color: var(--sdk-border);
}

/* Number pad: center 3 columns */
#num-1 {
    grid-area: 1 / 2;
}

#num-2 {
    grid-area: 1 / 3;
}

#num-3 {
    grid-area: 1 / 4;
}

#num-4 {
    grid-area: 2 / 2;
}

#num-5 {
    grid-area: 2 / 3;
}

#num-6 {
    grid-area: 2 / 4;
}

#num-7 {
    grid-area: 3 / 2;
}

#num-8 {
    grid-area: 3 / 3;
}

#num-9 {
    grid-area: 3 / 4;
}

/* Left actions: column 1, rows 1-2 */
#toggleEditHintMode {
    grid-area: 1 / 1;
}

#deleteEntry {
    grid-area: 2 / 1;
}

/* Right actions: column 5, rows 1-2 */
#helpButton {
    grid-area: 1 / 5;
}

#shareBoardButton {
    grid-area: 2 / 5;
}

/* Editor + Solve fill the empty row-3 corners */
#toggleEditMode {
    grid-area: 3 / 1;
    font-size: clamp(12px, 3vmin, 18px);
}

#solveBoard {
    grid-area: 3 / 5;
    font-size: clamp(12px, 3vmin, 18px);
}

/* Desktop: square buttons, proportional height budget */
@media (min-width: 600px) {
    .sudoku-app {
        --sdk-board-max: calc(0.82 * (100vh - 300px));
    }

    .sudoku-controls button {
        aspect-ratio: 1 / 1;
        padding: 0;
    }

    .sudoku-controls {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: auto auto;
    }

    #num-1 {
        grid-area: 1 / 1;
    }

    #num-2 {
        grid-area: 1 / 2;
    }

    #num-3 {
        grid-area: 1 / 3;
    }

    #num-4 {
        grid-area: 1 / 4;
    }

    #num-5 {
        grid-area: 1 / 5;
    }

    #num-6 {
        grid-area: 1 / 6;
    }

    #num-7 {
        grid-area: 1 / 7;
    }

    #num-8 {
        grid-area: 1 / 8;
    }

    #num-9 {
        grid-area: 1 / 9;
    }

    /* Left cluster: editing actions */
    #toggleEditHintMode {
        grid-area: 2 / 1;
    }

    #deleteEntry {
        grid-area: 2 / 2;
    }

    #toggleEditMode {
        grid-area: 2 / 3;
        font-size: clamp(12px, 1.8vmin, 18px);
    }

    /* Right cluster: assist actions */
    #helpButton {
        grid-area: 2 / 7;
    }

    #shareBoardButton {
        grid-area: 2 / 8;
    }

    #solveBoard {
        grid-area: 2 / 9;
        font-size: clamp(12px, 1.8vmin, 18px);
    }
}

/* --- Utilities ----------------------------------------------------- */
.hidden-initial {
    display: none;
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 480px) {
    .sudoku-top h1 {
        font-size: 1.2rem;
        margin: .05rem 0 .2rem;
    }

    .mode-controls {
        gap: .15rem;
        flex-wrap: wrap;
    }

    .sudoku-top .mode-controls button,
    .sudoku-top .mode-controls select {
        height: 2rem;
        padding: 0 .45rem;
        font-size: .78rem;
    }
}

@media (max-width: 380px) {

    .sudoku-top .mode-controls button,
    .sudoku-top .mode-controls select {
        padding: 0 .35rem;
        font-size: .72rem;
    }
}

/* Touch-friendly minimums */
@media (pointer: coarse) {

    .number-button {
        min-height: 44px;
    }

    .number-controls.number-controls-bottom button {
        min-height: 44px;
    }

    .sudoku-top .mode-controls button,
    .sudoku-top .mode-controls select {
        min-height: 44px;
    }
}