/* ==========================================================================
   The games beside the korsord: sudoku and ordsök

   Only their pages fetch this file ("style: games" at the top of a page). It takes its colours,
   typefaces and buttons from style.css, and a round's page is laid out as a korsord's: the bar
   with the name and the tools above the board, the square that is written in yellow and what
   it belongs to blue, and Rätta and Avslöja marking squares as they do in a korsord.

   1. A game's own page
   2. A round's page
   3. Sudoku
   4. Ordsök
   5. Phones
   ========================================================================== */

/* 1. A game's own page: the variants to choose from, as the levels on /korsord/
   ========================================================================== */
/* (the columns to choose from are in style.css, since /korsord/ and the home page have them too) */

/* 2. A round's page
   ========================================================================== */
.round-wrapper {
    flex: 1;
    width: 100%;
    min-height: 100vh;
    padding: calc(var(--header-h) + 1.25rem) var(--gutter) var(--section-gap);
}

.round-area {
    width: 100%;
    max-width: 58rem;
    margin: 0 auto;
}

/* The bar is as wide as the board and what is beside it, where a korsord's is as wide as its grid */
.round-area .game-bar {
    position: static;
    width: auto;
    min-width: 0;
}

.round-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

/* The room the board has: rounds.js gives the board its size from it */
.round-board {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.round-side {
    flex: none;
    width: 17.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Rätta and Avslöja, as under a korsord: a label and its buttons, which share the row */
.round-side .btn-group {
    padding: 8px 10px;
    gap: 8px;
}

.round-side .group-label {
    flex: none;
    width: 4.4rem;
    margin: 0;
}

.round-side .btn-group button {
    flex: 1;
    min-width: 0;
    padding: 11px 6px;
    font-size: 1rem;
}

.round-side button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.round-wrapper .load-error {
    margin: 2rem 0;
}

/* 3. Sudoku
   ========================================================================== */
/* The lines are the board's ground, seen between the squares: one line between two squares,
   three between two blocks and around the board. --cell and --line are whole device pixels
   (fitBoard in rounds.js), so that every line of a kind is as thick as the others. */
.sudoku-grid {
    flex: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), auto);
    gap: var(--line, 1px);
    padding: calc(var(--line, 1px) * 3);
    background: var(--grid-line-color);
}

.sudoku-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cell, 2.5rem);
    height: var(--cell, 2.5rem);
    padding: 0;
    --square: var(--letter-bg);
    background: var(--square);
    color: var(--letter-text);
    font-family: var(--font-ui);
    /* Every digit is written alike, whoever wrote it and whether it is right: what tells them
       apart is the ground and the colour */
    font-size: calc(var(--cell, 2.5rem) * 0.54);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: none;
}

.sudoku-cell.block-right {
    margin-right: calc(var(--line, 1px) * 2);
}

.sudoku-cell.block-bottom {
    margin-bottom: calc(var(--line, 1px) * 2);
}

/* The digits that are given are on the grey of a korsord's clue squares */
.sudoku-cell.is-given {
    --square: var(--clue-bg);
    color: var(--clue-text);
}

/* The row, the column and the block of the chosen square, and the squares with its digit */
.sudoku-cell.is-seen {
    background: color-mix(in srgb, var(--active-word) 40%, var(--square));
}

.sudoku-cell.is-same {
    background: var(--active-word);
    color: var(--active-word-text);
}

/* A digit that is twice in a row, a column or a block, when the visitor has asked to be shown */
.sudoku-cell.is-clash {
    color: var(--marker-wrong);
}

.sudoku-cell.checked-wrong {
    background: var(--marker-wrong-bg);
    color: var(--marker-wrong-text);
}

.sudoku-cell.is-selected {
    background: var(--active-cell);
    color: var(--active-cell-text);
    box-shadow: inset 0 0 0 2px var(--active-cell-ring);
}

.sudoku-cell.is-selected:is(.is-clash, .checked-wrong) {
    color: #b91c1c;
}

.sudoku-cell:focus-visible {
    outline: none;
}

/* What Rätta and Avslöja leave in a square: a small corner, green for right and orange for revealed */
.sudoku-cell.checked-correct:not(.revealed)::after,
.sudoku-cell.revealed::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: calc(var(--cell, 2.5rem) * 0.2) solid var(--marker-correct);
    border-left: calc(var(--cell, 2.5rem) * 0.2) solid transparent;
    pointer-events: none;
}

.sudoku-cell.revealed::after {
    border-top-color: var(--marker-revealed);
}

/* The small digits, each in its own place in the square */
.sudoku-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    padding: 6%;
    color: var(--text-muted);
    font-size: calc(var(--cell, 2.5rem) * 0.25);
    font-weight: 600;
}

.sudoku-grid[style*="--n: 4"] .sudoku-notes {
    grid-template-columns: repeat(2, 1fr);
    font-size: calc(var(--cell, 2.5rem) * 0.3);
}

.sudoku-notes span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sudoku-cell.is-selected .sudoku-notes {
    color: inherit;
}

/* The digits to write with */
.sudoku-keys {
    --key-digit: 1.6rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.sudoku-keys[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sudoku-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 4rem;
    padding: 0.4rem 0;
    background: var(--surface);
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.sudoku-key:hover:not(:disabled) {
    background: var(--text-color);
    color: var(--bg-color);
}

/* The line is as high whatever the size of the digit, so that the keys stay as they are when it changes */
.sudoku-key-digit {
    font-size: var(--key-digit);
    font-weight: 700;
    line-height: var(--key-digit);
}

.sudoku-key-left {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.75;
}

/* A digit that is in all its places */
.round-side .sudoku-key:disabled {
    border-color: var(--rule);
    color: var(--text-muted);
    opacity: 1;
}

.sudoku-key:disabled .sudoku-key-digit {
    opacity: 0.45;
}

/* While small digits are written, the keys show theirs small */
.sudoku-keys.is-noting .sudoku-key-digit {
    font-size: calc(var(--key-digit) * 0.66);
}

/* Ångra, Sudda and Anteckna, drawn as the tools above the board are */
.sudoku-edit {
    gap: 0.5rem;
}

.sudoku-edit .tool-icon {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 3.5rem;
    border-color: var(--rule);
    font-size: 0.85rem;
}

.sudoku-edit .tool-icon:hover:not(:disabled) {
    border-color: var(--text-color);
}

.sudoku-edit .tool-icon[aria-pressed="true"] {
    background: var(--active-cell);
    border-color: var(--active-cell-ring);
    color: var(--active-cell-text);
}

.sudoku-edit .tool-icon[aria-pressed="true"] svg {
    color: var(--active-cell-text);
}

/* The key that does the same as the button, for those who have keys */
.key-hint {
    position: absolute;
    top: 3px;
    right: 4px;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    line-height: 1;
    opacity: 0.8;
}

@media (hover: none), (pointer: coarse) {
    .key-hint {
        display: none;
    }
}

/* Rätta and Avslöja, drawn as Ångra and Sudda above them */
.sudoku-side .btn-group {
    padding: 0;
    border: none;
}

.sudoku-side .btn-group button {
    min-height: 2.75rem;
    padding: 0.4rem 0.3rem;
    background: transparent;
    border: 1px solid var(--rule);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.sudoku-side .btn-group button:hover {
    border-color: var(--text-color);
    color: var(--text-color);
}

/* The choice of having clashes shown: a box to tick, with what it does under its name */
.sudoku-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    align-items: center;
    padding: 0.25rem 0;
    cursor: pointer;
}

.sudoku-option input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--text-color);
    cursor: pointer;
}

.sudoku-option-name {
    font-weight: 600;
}

.sudoku-option-text {
    grid-column: 2;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* 4. Ordsök
   ========================================================================== */
.ordsok-grid {
    flex: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), var(--cell, 2rem));
    background: var(--letter-bg);
    border: 2px solid var(--grid-line-color);
    /* A finger that is dragged over the letters marks a word, and doesn't move the page */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* The marks are under the letters: a band along each word that is marked, and along the one being pointed out */
.ordsok-marks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ordsok-marks line {
    stroke-width: 0.76;
    stroke-linecap: round;
}

.ordsok-marks .is-found {
    stroke: var(--active-word);
}

.ordsok-marks .is-revealed {
    stroke: color-mix(in srgb, var(--marker-revealed) 50%, var(--letter-bg));
}

.ordsok-marks .is-picked {
    stroke: var(--active-cell);
}

/* A band that was no word: red, and gone in a moment */
.ordsok-marks .is-miss {
    stroke: var(--marker-wrong-bg);
    animation: ordsokMiss 0.45s ease-out forwards;
}

@keyframes ordsokMiss {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.ordsok-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cell, 2rem);
    height: var(--cell, 2rem);
    padding: 0;
    background: none;
    color: var(--letter-text);
    font-family: var(--font-ui);
    font-size: calc(var(--cell, 2rem) * 0.56);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: none;
}

.ordsok-cell.is-found {
    color: var(--active-word-text);
}

.ordsok-cell.is-picked {
    color: var(--active-cell-text);
}

.ordsok-cell:focus-visible {
    outline-offset: -3px;
}

.ordsok-theme {
    margin: 0;
    font-size: 1.3rem;
}

.ordsok-rule {
    margin: 0;
    line-height: 1.45;
    color: var(--text-muted);
}

.ordsok-words {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 1rem;
    margin: 0;
    padding: 0.9rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    list-style: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ordsok-words .is-found {
    color: var(--text-muted);
    font-weight: 400;
    text-decoration: line-through;
}

/* 5. Phones
   ========================================================================== */
@media (max-width: 900px) {
    /* A round's page has the slim header of a korsord's: the way back at the left, the round's
       name in the middle and the menu at the right, with the round's tools first in it */
    :is([data-page="sudoku"], [data-page="ordsok"]) {
        --header-h: 46px;
    }

    :is([data-page="sudoku"], [data-page="ordsok"]) .logo-link {
        display: none;
    }

    :is([data-page="sudoku"], [data-page="ordsok"]) .nav-container {
        position: relative;
        max-width: none;
    }

    .round-wrapper {
        padding-top: calc(var(--header-h) + 0.75rem);
    }

    /* The name is in the header, and the page's own heading is left to screen readers */
    .round-area .game-bar {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .round-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .round-board {
        flex: none;
        width: 100%;
    }

    .round-side {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
    }

    /* Under the board: a row of digits, a row of Ångra, Sudda and Anteckna, then Rätta and Avslöja
       side by side, each with its label above its two buttons */
    .sudoku-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .sudoku-keys,
    .sudoku-edit,
    .sudoku-option {
        grid-column: 1 / -1;
    }

    /* Every digit in one row, whatever the grid */
    .sudoku-keys {
        --key-digit: 1.4rem;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .sudoku-keys[data-n="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sudoku-keys[data-n="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sudoku-key {
        gap: 0;
        min-height: 3.25rem;
        padding: 0.25rem 0;
    }

    .sudoku-key-left {
        font-size: 0.7rem;
    }

    .sudoku-edit .tool-icon {
        flex-direction: row;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.75rem;
        padding: 4px 2px;
    }

    .sudoku-edit .tool-icon svg {
        flex: none;
    }

    .sudoku-side .btn-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .sudoku-side .group-label {
        grid-column: 1 / -1;
        width: auto;
        font-size: 0.72rem;
    }

    .ordsok-words {
        grid-template-columns: repeat(3, 1fr);
        font-size: 1rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 420px) {
    .ordsok-words {
        grid-template-columns: 1fr 1fr;
    }
}