/**
 * Wordle Game · Washi theme overrides
 *
 * Project-specific styling layered on top of the Washi framework
 * (css/washi.css). Everything here builds on Washi's design tokens —
 * warm paper, sumi ink, vermilion seal red, jade and gold — so the game
 * board, keyboard and ceremonial moments sit inside the same paper-and-ink
 * world. No raw colours: only var(--…) tokens.
 *
 * JS contract preserved: .guess-row, .letter-box, .letter-correct/present/absent,
 * .animate, .keyboard-key, .key-correct/present/absent, .shake and the
 * #gameBoard / #keyboard / #guessInput hooks are all kept intact.
 *
 * @author  Andy
 * @version 2.0.0
 */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.game-main {
    flex: 1;
}

.game-shell {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

/* Give the body a column layout so the footer settles at the bottom. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* ── Brand seal in the header ────────────────────────────────────────────── */
.brand .seal {
    width: 2.1em;
    height: 2.1em;
    font-size: var(--fs-sm);
    transform: rotate(-4deg);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.game-hero {
    padding-block: clamp(var(--sp-6), 9vw, var(--sp-8));
}

.game-hero .display {
    font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl));
}

/* ── Word-length selector ────────────────────────────────────────────────── */
.length-set {
    border: 0;
    padding: 0;
    margin: 0;
}

.length-set legend {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--sp-3);
}

.length-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: var(--sp-3);
}

/* Visually hidden radio, still keyboard reachable. */
.length-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.length-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-2);
    background: var(--card);
    border: var(--bw) solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--t), background var(--t), transform var(--t-fast);
}

.length-option:hover {
    border-color: var(--ink-2);
    transform: translateY(-2px);
}

.length-num {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.length-count {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted);
}

.length-input:checked + .length-option {
    background: var(--ink);
    border-color: var(--ink);
}

.length-input:checked + .length-option .length-num {
    color: var(--paper);
}

.length-input:checked + .length-option .length-count {
    color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.length-input:focus-visible + .length-option {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Rules list ──────────────────────────────────────────────────────────── */
.rules-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.rules-list li {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.rules-list li::before {
    content: '—';
    color: var(--accent);
    flex: none;
}

/* Inline legend swatches for the colour key. */
.swatch {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: var(--r-sm);
    transform: translateY(0.05em);
    margin-right: 0.15em;
    flex: none;
}
.swatch-correct { background: var(--jade); }
.swatch-present { background: var(--gold); }
.swatch-absent  { background: var(--paper-3); border: 1px solid var(--line); }

/* ── Stat row (game screen) ──────────────────────────────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.stat-card {
    text-align: center;
    align-items: center;
}

/* ── Game board ──────────────────────────────────────────────────────────── */
.game-board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    margin-inline: auto;
}

.guess-row {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
}

.letter-box {
    --tile: clamp(2.6rem, 13vw, 3.5rem);
    width: var(--tile);
    height: var(--tile);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: calc(var(--tile) * 0.52);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--card);
    border: var(--bw) solid var(--line);
    border-radius: var(--r);
    transition: background var(--t-slow), border-color var(--t-slow), color var(--t-slow);
}

/* A filled-but-unscored tile (mid typing) reads slightly firmer. */
.letter-box:not(:empty) {
    border-color: var(--ink-2);
}

.letter-correct {
    background: var(--jade);
    border-color: var(--jade);
    color: var(--paper);
}

.letter-present {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--paper);
}

.letter-absent {
    background: var(--paper-3);
    border-color: var(--paper-3);
    color: var(--muted);
}

/* Flip reveal — uses the framework's reduced-motion guard automatically. */
.letter-box.animate {
    animation: tileFlip 0.55s ease;
}

@keyframes tileFlip {
    0%   { transform: rotateX(0); }
    50%  { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
}

/* ── Guess input ─────────────────────────────────────────────────────────── */
#guessInput {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
}

#guessInput::placeholder {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--fs-sm);
}

.guess-form .btn {
    flex: none;
}

#errorMessage {
    min-height: 1.3em;
    margin-top: var(--sp-2);
    text-align: center;
}

/* ── Virtual keyboard ────────────────────────────────────────────────────── */
.keyboard {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-inline: auto;
    max-width: 32rem;
}

.keyboard-row {
    display: flex;
    gap: var(--sp-1);
    justify-content: center;
}

.keyboard-spacer {
    flex: 0.5;
}

.keyboard-key {
    flex: 1;
    min-width: 0;
    height: 3.4rem;
    padding: 0 var(--sp-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink);
    background: var(--paper-2);
    border: var(--bw) solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}

.keyboard-key:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.keyboard-key:active {
    transform: translateY(1px);
}

.keyboard-key-lg {
    flex: 1.6;
    font-size: var(--fs-xs);
}

.keyboard-key.key-correct {
    background: var(--jade);
    border-color: var(--jade);
    color: var(--paper);
}

.keyboard-key.key-present {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--paper);
}

.keyboard-key.key-absent {
    background: var(--paper-3);
    border-color: var(--paper-3);
    color: var(--muted);
}

/* ── End-of-game ceremony ────────────────────────────────────────────────── */
.game-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    text-align: center;
}

.lose-kanji {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 1;
    color: var(--accent);
    animation: washi-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-word {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.game-over .cluster {
    justify-content: center;
    margin-top: var(--sp-2);
}

/* ── Shake (paired with the keyframes game.js injects) ───────────────────── */
.shake {
    animation: shake 0.45s;
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .keyboard-key {
        height: 3rem;
        font-size: var(--fs-xs);
    }
    .length-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}