/*
 * PawDoku's look: warm cream, flat region colours, espresso grout. The region palette is the
 * Android build's, and it is picked rather than generated — the rose is warm so it does not
 * collapse onto the blues, there is exactly one red and one green, and the light and dark
 * entries alternate so neighbours stay apart at a glance.
 *
 * The palette lives in JS as well, because a region's colour is chosen by index at runtime.
 */

.gpaw {
    --cream: #fbf6ee;
    --grout: #4a3b30;
    --ink: #3c2f26;
    --muted: #8a7768;
    --heart: #e0795c;

    /*
     * The top bar, the panel, the ad slot and the gaps between them: 264px measured, plus
     * slack. It has to be at least the real figure, since declaring less lets the board grow
     * into space that is not there.
     *
     * It read 465 for a while, from measuring `scrollHeight - board`. That is not the chrome
     * when the page does not overflow, because scrollHeight never reports less than the
     * viewport — so it was measuring the screen and shrinking the board by two hundred pixels
     * for nothing. Measure the parts, not the document.
     */
    /*
     * Re-measured after the gap below the board went from 16px to 32px, and at a desktop
     * width as well as a phone one — the figure came out the same at both, so there is one
     * number here rather than Rekta's split. It was 276, which is under the real 289, and
     * declaring less than the chrome takes lets the board grow into space the page does not
     * have.
     */
    --play-chrome-stacked: 292px;
}

body.gpaw {
    background: var(--cream);
    color: var(--ink);
}

/* The site's animated mesh is built for the marketing pages and muddies the board colours. */
body.gpaw::before {
    display: none;
}

.gpaw .play-bar .play-home,
.gpaw .play-bar a.play-quiet {
    color: var(--muted);
}

.gpaw .play-title {
    color: var(--ink);
    font-size: 1.3rem;
    white-space: nowrap;
}

.gpaw .stat {
    background: #fff;
    border: 1px solid #e6dcd0;
    border-radius: 10px;
    padding: 4px 9px;
    min-width: 50px;
    text-align: center;
    line-height: 1.1;
}

.gpaw .stat-label {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}

.gpaw .stat-value {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gpaw .hearts {
    font-size: 1.05rem;
    letter-spacing: 2px;
    color: var(--heart);
}

.gpaw .hearts .spent {
    opacity: 0.22;
}

.gpaw .play-button {
    background: #fff;
    border-color: #e6dcd0;
    color: var(--ink);
}

.gpaw .play-button[aria-pressed="true"] {
    background: var(--ink);
    border-color: transparent;
    color: var(--cream);
}

.gpaw .play-hint {
    color: var(--muted);
}

/* ---------- the board ---------- */

/*
 * The board is the Android build's, taken from its store screenshots rather than invented:
 * separate rounded tiles with a gap between them, sitting on a white card. There are no
 * region borders at all — colour alone groups the cells, and there is one colour per region.
 *
 * An earlier pass here drew heavy lines along every region boundary. That is how a printed
 * puzzle of this family is set, and it is not how this game looks; the tiles-on-a-card
 * treatment is what makes it read as friendly rather than as a worksheet.
 *
 * Gaps, radii and markers are all fractions of a cell, so a 5x5 and a 9x9 look like the same
 * game at different sizes instead of the 9x9 turning into piping.
 */
.gpaw .play-board {
    --board-max: 500px;

    display: grid;
    grid-template-columns: repeat(var(--cells), 1fr);
    grid-template-rows: repeat(var(--cells), 1fr);
    /*
     * Percentages, not cqw. `container-type: size` makes this element a query container for
     * its *descendants*; a cqw used in a declaration on the container itself resolves against
     * the container above it, which here is the whole stage — so the gap came out more than
     * twice the intended width. A percentage gap resolves against this element's own content
     * box, which is exactly what was wanted.
     *
     * One tenth of a cell, and a cell is a tenth of the board divided by the count.
     */
    gap: calc(10% / var(--cells));
    padding: clamp(3px, 1.1%, 9px);
    background: #fff;
    border-radius: clamp(8px, 2.4%, 14px);
    box-shadow: 0 8px 24px rgba(74, 59, 48, 0.1), 0 1px 3px rgba(74, 59, 48, 0.08);
    /* Establishes the container that the cells size their markers against. */
    container-type: size;
}

.gpaw .cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    border-radius: 14%;
    /* A second tap within 200ms is the game's own gesture, and dragging paints across cells,
       so the browser must not claim either as a zoom or a scroll. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* cqw is correct *here*, on a descendant of the container: one cell's width. The marks
       below are sized in em, so they follow the board at every grid size. */
    font-size: calc(100cqw / var(--cells));
    transition: filter 120ms ease-out;
}

/* Hover only where there is a real pointer; on a phone it sticks after a tap. */
@media (hover: hover) {
    .gpaw .cell:hover {
        filter: brightness(1.07);
    }
}

.gpaw .cell:active {
    filter: brightness(0.94);
}

/*
 * Both marks are a disc of the same size, centred in the cell: a pale one holding an orange
 * paw for a cat, a red one holding a white cross for a wrong guess. Same shape, opposite
 * weight — the player's answer sits *on* the colour, the game's verdict interrupts it.
 */
.gpaw .cell .mark {
    pointer-events: none;
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.03em 0.06em rgba(74, 59, 48, 0.28);
}

.gpaw .cell .paw {
    background: #fff8f0;
}

.gpaw .cell .paw svg {
    width: 66%;
    height: 66%;
    fill: #e8834f;
    display: block;
}

/*
 * Drawn rather than typed. The ✕ glyph sits differently in every fallback font and drifts
 * off-centre; two rotated bars are the same shape everywhere and scale cleanly.
 *
 * `--reach` is how far each bar runs past the box sides. A bar rotated 45° puts its ends on
 * the diagonal, so a negative reach of about 20% is what makes the cross span its box corner
 * to corner rather than sitting as a small mark in the middle of it.
 */
.gpaw .cell .cross::before,
.gpaw .cell .cross::after {
    content: "";
    position: absolute;
    inset: calc(50% - var(--bar) / 2) var(--reach);
    border-radius: 999px;
    background: currentColor;
}

.gpaw .cell .cross::before {
    rotate: 45deg;
}

.gpaw .cell .cross::after {
    rotate: -45deg;
}

/*
 * The player's own note. No disc and no shadow: it is a pencil mark on the tile, not an
 * object placed on it, and it has to stay quieter than both the paw and the locked cross.
 */
.gpaw .cell .cross.note {
    --bar: 13%;
    --reach: -20.7%;
    position: relative;
    /* Corner to corner this reads at about 45% of the cell, near enough the paw disc's 62%
       to belong to the same board. It was a third of that before, which looked like a
       smudge rather than a decision the player had made. */
    width: 0.45em;
    height: 0.45em;
    border-radius: 0;
    box-shadow: none;
    /* Solid rather than a faint wash. It still has to sit below the paw and the locked cross
       in weight, but a mark the player deliberately placed should look placed — at 42% alpha
       it disappeared entirely on the darker regions. */
    color: rgba(60, 47, 38, 0.72);
}

/*
 * The cross left by summoning a cat where there is none. It cost a life and it cannot be
 * cleared, so it has to read as the game's mark rather than the player's — heavier, red, and
 * ringed so it is still distinguishable where the region colour is itself reddish.
 */
/* The game's verdict: a solid red disc with a white cross, the same size as the paw disc. */
.gpaw .cell .cross.locked {
    --bar: 11%;
    /* Positive, so the arms stay inside the disc instead of running out of it. */
    --reach: 27%;
    position: relative;
    color: #fff;
    background: #dc3545;
}

.gpaw .cell.rejected {
    animation: paw-reject 340ms ease-out;
}

.gpaw .cell.landed {
    animation: paw-settle 260ms ease-out;
}

@keyframes paw-reject {
    0%, 100% { transform: none; }
    25% { transform: scale(0.9); }
    50% { transform: scale(1.06); }
}

@keyframes paw-settle {
    from { scale: 0.6; opacity: 0.4; }
}

/* ---------- result card ---------- */

.gpaw .sheet {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(60, 47, 38, 0.55);
}

.gpaw .sheet[hidden] {
    display: none;
}

.gpaw .sheet-card {
    background: var(--cream);
    border-radius: 18px;
    padding: 26px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(60, 47, 38, 0.3);
}

.gpaw .sheet-card h2 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    color: var(--ink);
}

.gpaw .sheet-card p {
    margin: 0 0 14px 0;
    color: var(--muted);
    font-weight: 600;
}

.gpaw .sheet-card .play-row {
    justify-content: center;
}

.gpaw .sheet-card .play-button {
    background: var(--ink);
    border-color: transparent;
    color: var(--cream);
}

.gpaw .sheet-card .play-button.ghost {
    background: transparent;
    border-color: #e6dcd0;
    color: var(--muted);
}