/*
 * Kata·Word's look. The classic palette from the Android build's free theme — the other
 * themes there unlock at streak milestones through a coin store the browser version does not
 * have, so there is one palette here and no theme picker.
 *
 * Every scored tile carries its result as an aria-label, so the board is readable without
 * seeing the colours at all.
 *
 * ponytail: no high-contrast palette yet. Roughly one man in twelve cannot reliably separate
 * 6AAA64 from C9B458, and the honest fix is the alternate orange/blue pair with a toggle, not
 * a tweak to these two. Add it when there is a settings surface to hang the toggle on.
 */

.gkata {
    --correct: #6aaa64;
    --present: #c9b458;
    --absent: #787c7e;
    --tile-empty: #ffffff;
    --tile-border: #d3d6da;
    --tile-filled-border: #878a8c;
    --key-bg: #d3d6da;
    --key-text: #1a1a1b;

    /*
     * Measured at 375px wide by adding up the parts — top bar, panel, keyboard, ad slot and
     * the gaps between them — which comes to 469, plus slack.
     *
     * It read 524 for a while, from `scrollHeight - board`. That overstates the chrome
     * whenever the page does not overflow, because scrollHeight never reports less than the
     * viewport, and the board paid for the difference: 55px of dead space under the ad slot
     * and tiles smaller than they needed to be.
     *
     * This is still the tallest chrome of any game here, and most of it is the keyboard,
     * which is not negotiable — a word game with no keys is not playable on a phone.
     *
     * 498 rather than 476: measured on a 375x812 phone the parts add up to 479 — bar 60,
     * panel 123, keys 144, ad slot 100, gaps 48 — and declaring less than that lets the board
     * grow into space the page does not have. It was overflowing by 3px. The remaining 16px is
     * the wider gap now kept between the board and the advert; every other game had the slack
     * for that already, this one did not.
     */
    --play-chrome-stacked: 498px;
}

.gkata .play-title {
    font-size: 1.2rem;
    white-space: nowrap;
}

/*
 * Deliberately tight. Three stats plus the title have to stay on one line at 360px wide: the
 * moment they wrap, the panel grows by a whole row and the board loses that height twice
 * over, once for the wrap and once because --play-chrome-stacked no longer describes reality.
 */
.gkata .stat {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--tile-border);
    border-radius: 9px;
    padding: 4px 7px;
    min-width: 44px;
    text-align: center;
    line-height: 1.1;
}

.gkata .stat-label {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: #6b7280;
    font-weight: 700;
}

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

.gkata .play-button[aria-pressed="true"] {
    background: #2d3748;
    border-color: transparent;
    color: #fff;
}

.gkata .play-select {
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: #2d3748;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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

.gkata .play-board {
    --board-max: 400px;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: min(1.6%, 6px);
    /* Sizes the letters against the board rather than the viewport, so a four-letter game
       gets bigger tiles and bigger letters with no JavaScript involved. */
    container-type: size;
}

.gkata .tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tile-border);
    background: var(--tile-empty);
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1a1a1b;
    font-size: calc(100cqw / var(--cols) * 0.46);
    line-height: 1;
    user-select: none;
}

.gkata .tile.filled {
    border-color: var(--tile-filled-border);
}

/* The pop is what tells a player the key registered on a phone with no tactile feedback. */
.gkata .tile.pop {
    animation: kata-pop 100ms ease-out;
}

@keyframes kata-pop {
    50% {
        scale: 1.08;
    }
}

.gkata .tile.correct,
.gkata .tile.present,
.gkata .tile.absent {
    color: #fff;
    border-color: transparent;
}

.gkata .tile.correct {
    background: var(--correct);
}

.gkata .tile.present {
    background: var(--present);
}

.gkata .tile.absent {
    background: var(--absent);
}

/* A new word leaves the grid looking exactly as it did, so the board says so itself. */
.gkata .play-board.refreshed .tile {
    animation: kata-refresh 420ms ease-out;
}

@keyframes kata-refresh {
    from {
        border-color: var(--present);
        background: #fdf6dd;
    }
}

.gkata .row-invalid {
    animation: kata-shake 320ms;
}

@keyframes kata-shake {
    10%, 90% { translate: -2px 0; }
    30%, 70% { translate: 4px 0; }
    50% { translate: -6px 0; }
}

/* ---------- keyboard ---------- */

.gkata .keys {
    --key-gap: 5px;
    /* The longest row. Every letter key is sized to a tenth of the keyboard so that all
       three rows use the same key, whatever their length. */
    --keys-per-row: 10;

    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 auto;
    /* The keyboard is tapped fast and repeatedly; without this a double tap zooms the page. */
    touch-action: manipulation;
}

.gkata .keys-row {
    display: flex;
    gap: var(--key-gap);
    justify-content: center;
}

.gkata .key {
    appearance: none;
    /*
     * Fixed, not flexible. With `flex: 1 1 auto` each row shared out its own width, so the
     * nine keys of the middle row came out wider than the ten above them and a letter moved
     * under the finger between rows. A tenth of the keyboard is the same width everywhere,
     * and the shorter rows simply centre.
     */
    flex: 0 0 auto;
    width: calc((100% - (var(--keys-per-row) - 1) * var(--key-gap)) / var(--keys-per-row));
    min-width: 0;
    /* 44px is the smallest comfortable touch target, and three rows of it is the single
       biggest thing standing between the board and the bottom of a phone screen. */
    height: 44px;
    border: 0;
    border-radius: 5px;
    background: var(--key-bg);
    color: var(--key-text);
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
}

/*
 * Enter and Del take whatever the seven letters between them leave, and split it evenly.
 * The basis is 0 rather than auto on purpose: from `auto` they grow out of their own text, so
 * the wider word ends up the wider key and the row looks lopsided.
 */
.gkata .key.wide {
    flex: 1 1 0;
    width: auto;
    font-size: 0.72rem;
}

.gkata .key.correct {
    background: var(--correct);
    color: #fff;
}

.gkata .key.present {
    background: var(--present);
    color: #fff;
}

.gkata .key.absent {
    background: var(--absent);
    color: #fff;
}

.gkata .key:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- result sheet ---------- */

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

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

.gkata .sheet-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.gkata .sheet-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    color: #1a1a1b;
}

.gkata .sheet-card p {
    margin: 0 0 6px 0;
    color: #4a5568;
    font-weight: 600;
}

.gkata .sheet-word {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--correct);
    margin: 10px 0 16px 0 !important;
}

.gkata .sheet-card .play-row {
    justify-content: center;
    margin-top: 8px;
}

.gkata .sheet-card .play-button {
    background: #2d3748;
    border-color: transparent;
    color: #fff;
}

.gkata .sheet-card .play-button.ghost {
    background: transparent;
    border-color: var(--tile-border);
    color: #4a5568;
}

/* On a landscape phone the keyboard goes beside the board with the rest of the chrome. */
@media (orientation: landscape) and (max-height: 560px) {
    .gkata .keys {
        width: min(320px, 34vw);
    }

    .gkata .key {
        height: 34px;
        font-size: 0.8rem;
    }
}