* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ink: #000000;
    --ink-soft: #4a4a4a;
    --ink-faint: #8a8a86;
    --paper: #F3F3EF;
    --blue: #0000FF;
    --blue-soft: rgba(0, 0, 255, 0.55);
    --line: rgba(0, 0, 0, 0.18);
    --paper-rgb: 243 243 239;

    --grid-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M0 0H15' stroke='rgba(0,0,255,0.22)' stroke-width='1' stroke-dasharray='3 2'/><path d='M0 0V15' stroke='rgba(0,0,255,0.22)' stroke-width='1' stroke-dasharray='3 2'/></svg>");

    --grid-step: 15px;
    --frame-offset: 15px;

    --frame-gap: var(--frame-offset);
    --frame-border: 5px;

    --content-w: 900px;

    --pen: var(--blue);
    --pen-soft: rgba(0, 0, 255, 0.45);
    --pencil: #4a4a4a;
    --pencil-soft: #8f8f8b;
    --red: #EE0000;
    --grid-ink: rgba(0, 0, 255, 0.22);
    --scrap-edge: rgba(0, 0, 0, 0.14);
    --scrap-edge-red: rgba(0, 0, 0, 0.2);

    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
}

body {
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    background-color: var(--paper);
    background-image: var(--grid-image);
    background-repeat: repeat;
    background-size: var(--grid-step) var(--grid-step);
    background-position: var(--frame-offset) var(--frame-offset);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

.blue-frame {
    position: relative;
    margin: var(--frame-offset);
    min-height: calc(100vh - (var(--frame-offset) * 2));
    border: var(--frame-border) solid var(--blue-pure);
    display: flex;
    flex-direction: column;
    padding: 0 30px 30px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.games-wrap {
    max-width: var(--content-w);
    margin: 0 auto;
    width: 100%;
    flex: 1 0 auto;
    padding-top: 90px;
}

.games-head { margin-bottom: calc(var(--grid-step) * 4); }

.games-kicker {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
}

.games-kicker a { color: var(--blue); text-decoration: none; }
.games-kicker a:hover { text-decoration: underline; }
.games-num { color: var(--ink); }

.games-head h1 {
    font-family: var(--brand);
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
    hyphens: manual;
}

.games-lead {
    margin-top: 16px;
    max-width: 34em;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.games-group { margin-bottom: calc(var(--grid-step) * 5); }

.games-group > h2 {
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--pencil);
    margin-bottom: calc(var(--grid-step) * 2);
}

.games-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(var(--grid-step) * 18));
    align-items: start;
    column-gap: calc(var(--grid-step) * 2);
    row-gap: calc(var(--grid-step) * 4);
}

.game-card { position: relative; }
.game-card:nth-child(3n + 2) { margin-top: var(--grid-step); }
.game-card:nth-child(4n + 1) { margin-top: calc(var(--grid-step) * 2); }
.game-card:nth-child(5n + 4) { margin-top: calc(var(--grid-step) * 3); }

.game-card > a,
.game-card > div {
    display: block;
    text-decoration: none;
    color: inherit;
}

.game-sketch {
    position: relative;
    display: block;
}
.game-sketch img {
    display: block;
    width: calc(var(--grid-step) * 16);
    max-width: 100%;
    height: auto;
}

.game-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: var(--blue);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: stroke-dashoffset 0.55s ease-out, opacity 0.12s linear;
}
.game-card.is-ready:hover .game-ring,
.game-card.is-ready:focus-within .game-ring {
    opacity: 1;
    stroke-dashoffset: 0;
}

.ring-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.game-name {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: calc(var(--grid-step) * 0.8);
    transition: color 0.15s ease;
}
.game-card:not(.is-ready) .game-name { color: var(--ink-soft); }
.game-card.is-ready:hover .game-name,
.game-card.is-ready:focus-within .game-name { color: var(--blue); }

.game-num {
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-weight: 400;
    font-size: 18px;
    color: var(--pencil-soft);
    margin-right: 7px;
}

.game-note,
.game-flag {
    display: block;
    margin-top: 6px;
}

.game-note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.game-flag {
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-size: 17px;
    line-height: 1.2;
    color: var(--pencil-soft);
}

@media (hover: hover) {
    .game-note,
    .game-flag {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 5px;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .game-note { opacity: 0; transform: translateY(-3px); }
    .game-card:hover .game-note,
    .game-card:focus-within .game-note { opacity: 1; transform: none; }
    .game-card:hover .game-flag,
    .game-card:focus-within .game-flag { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .game-ring {
        stroke-dashoffset: 0;
        transition: opacity 0.12s linear;
    }
}

.game-head { margin-bottom: calc(var(--grid-step) * 2); }

.game-stage {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--grid-step) * 3);
    margin-bottom: calc(var(--grid-step) * 4);
}

.board {
    flex: 0 0 46%;
    display: flex;
    justify-content: flex-start;
    padding-right: var(--grid-step);
}

.board canvas {
    display: block;
    touch-action: manipulation;
    cursor: pointer;
}
.board canvas:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

.game-caption {
    font-family: var(--hand);
    font-synthesis-weight: none;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    color: var(--ink-soft);
    margin-top: 6px;
    transform: rotate(-0.7deg);
    transform-origin: left center;
}

@keyframes hand-write {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.game-caption.is-writing { animation: hand-write 800ms steps(26, end) 550ms both; }

@media (prefers-reduced-motion: reduce) {
    .game-caption.is-writing { animation: none; }
}

.paper-fall {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 80;
}

.game-side {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}

.game-status {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 2.5em;
    text-wrap: balance;
}
.game-status[data-tone='win'] { color: var(--blue); }
.game-status[data-tone='lose'] { color: var(--ink-soft); }

.game-score {
    display: flex;
    gap: calc(var(--grid-step) * 2);
    margin: var(--grid-step) 0 calc(var(--grid-step) * 2);
    padding-top: var(--grid-step);
    border-top: 1px solid var(--line);
}
.game-score div { min-width: 0; }
.game-score dt {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}
.game-score dd {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.game-score .of {
    display: block;
    margin-top: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-faint);
}
.game-stage.battle .game-score {
    flex-wrap: wrap;
    gap: var(--grid-step) calc(var(--grid-step) * 1.5);
}
.game-stage.battle .game-score dd { font-size: 22px; }

.game-levels { border: 0; margin-bottom: calc(var(--grid-step) * 1.5); }
.game-levels legend {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
}
.game-levels .levels-row { display: flex; flex-wrap: wrap; gap: 6px; }
.game-levels label { cursor: pointer; }
.game-levels input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.game-levels span {
    display: inline-block;
    padding: 6px 11px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    user-select: none;
}
.game-levels label:hover span { border-color: var(--blue-soft); color: var(--blue); }
.game-levels input:checked + span { border-color: var(--blue); color: var(--blue); }
.game-levels input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.game-dictate {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: calc(var(--grid-step) * 4);
    margin-bottom: calc(var(--grid-step) * 1.5);
}
.dictate-arrow {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 38px;
    line-height: 1;
    color: var(--blue);
}
.dictate-say {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}
.dictate-step {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 6px;
}

.game-picks { border: 0; margin-bottom: calc(var(--grid-step) * 1.5); }
.game-picks legend {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
}
.picks-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pick {
    padding: 4px;
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    line-height: 0;
}
.pick:hover:not(:disabled) { border-color: var(--blue); background: rgb(var(--blue-rgb) / 0.06); }
.pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pick:disabled { cursor: default; opacity: 0.4; }

.pick[data-held] { opacity: 1; }
.pick[data-held='you'] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.pick[data-held='bot'] { border-color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--ink-soft); }

.game-alphabet { border: 0; margin-bottom: calc(var(--grid-step) * 1.5); }
.game-alphabet legend {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
}
.letters-row { display: flex; flex-wrap: wrap; gap: 4px; }

.letter {
    padding: 2px 3px;
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
    line-height: 0;
}
.letter:hover:not(:disabled) { border-color: var(--blue); background: rgb(var(--blue-rgb) / 0.06); }
.letter:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.letter:disabled { cursor: default; opacity: 0.4; }
.letter[data-on] {
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
    background: rgb(var(--blue-rgb) / 0.06);
}

.game-said {
    display: flex;
    gap: calc(var(--grid-step) * 2);
    margin: calc(var(--grid-step) * 1.5) 0;
}
.game-said > div { flex: 1 1 0; min-width: 0; }

.game-moves {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: calc(var(--grid-step) * 1.5);
    max-height: calc(var(--grid-step) * 7);
    overflow-y: auto;
    overflow-wrap: break-word;
    font-variant-numeric: tabular-nums;
}
.game-moves:empty { display: none; }

.game-stage.chess .game-score {
    flex-wrap: wrap;
    gap: var(--grid-step) calc(var(--grid-step) * 1.5);
}
.game-stage.chess .game-score dd.stars { font-size: 21px; letter-spacing: 0.05em; }
.game-said h3 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
}
.game-said ol { list-style: none; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (min-width: 761px) {
    .game-stage.wide .board { flex: 0 0 62%; }

    .game-stage.wide.dictation .board { flex: 0 0 calc(var(--grid-step) * 20); }
}

@media (min-width: 761px) {
    .game-stage.sheet {
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--grid-step) * 2);
    }
    .game-stage.sheet .board {
        flex: 0 0 auto;
        width: 100%;
        justify-content: flex-start;
    }
    .game-stage.sheet .game-side {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0 calc(var(--grid-step) * 3);
        padding-top: 0;
    }
    .game-stage.sheet .game-status {
        flex: 1 0 100%;
        min-height: 0;
        margin-bottom: var(--grid-step);
    }
    .game-stage.sheet .game-score { margin: 0; padding-top: 0; border-top: 0; }
    .game-stage.sheet .game-picks {
        flex: 1 0 100%;
        margin: var(--grid-step) 0;
    }
    .game-stage.sheet .game-levels { margin-bottom: 0; }
    .game-stage.sheet .game-hint { flex: 1 0 100%; }
}

.game-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.game-btn {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 16px;
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--blue-soft);
    cursor: pointer;
}
.game-btn:hover { border-color: var(--blue); background: rgb(var(--blue-rgb) / 0.06); }
.game-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.game-btn:disabled { cursor: default; opacity: 0.4; }
.game-btn:disabled:hover { border-color: var(--blue-soft); background: transparent; }

.game-hint {
    margin-top: var(--grid-step);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-faint);
}

.game-rules { max-width: 34em; margin-bottom: calc(var(--grid-step) * 3); }
.game-rules.wide { max-width: 62em; }
.game-rules.wide p,
.game-rules.wide li,
.game-rules.wide .game-legend { max-width: 34em; }
.game-rules h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}
.game-rules p,
.game-rules li { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.game-rules p + p { margin-top: 12px; }
.game-rules ul { margin: 12px 0 0 1.1em; }
.game-rules li + li { margin-top: 6px; }
.game-rules h3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: calc(var(--grid-step) * 1.5) 0 8px;
}

.game-rules .game-table-wrap {
    margin-top: 12px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.game-table {
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
    min-width: 100%;
}
.game-table caption {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 6px;
}
.game-table th,
.game-table td {
    padding: 7px 12px 7px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.game-table thead th {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 400;
    white-space: nowrap;
}
.game-table tbody th {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.game-table td.num {
    white-space: nowrap;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--ink);
}

.game-glyph {
    display: inline-block;
    vertical-align: -7px;
    margin-right: 7px;
}

.game-legend { margin-top: 12px; }
.game-legend div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.game-legend dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.game-legend dd {
    flex: 1 1 12em;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.games-foot {
    padding-top: var(--grid-step);
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.games-foot a { color: var(--blue); text-decoration: none; }
.games-foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .blue-frame { padding: 0 18px 24px; }
    .games-wrap { padding-top: 78px; }
    .game-stage {
        flex-direction: column;
        gap: calc(var(--grid-step) * 2);
    }
    .board { flex: 0 0 auto; width: 100%; padding-right: 0; justify-content: center; }
    .game-side { width: 100%; }
    .game-status { font-size: 18px; min-height: 0; }

    .game-stage.wide {
        align-items: stretch;
        gap: var(--grid-step);
    }
    .game-stage.wide .game-side { display: contents; }
    .game-stage.wide .board { order: 2; }
    .game-stage.wide .game-status { order: 3; }
    .game-stage.wide .game-picks { order: 4; margin-bottom: 0; }
    .game-stage.wide .game-alphabet { order: 4; margin-bottom: 0; }
    .game-stage.wide .game-levels { order: 5; margin-bottom: 0; }
    .game-stage.wide .game-actions { order: 6; }
    .game-stage.wide .game-hint { order: 7; margin-top: 0; }

    .game-stage.wide.chess .game-moves { order: 4; margin-bottom: 0; }
    .game-stage.wide.chess .game-picks { order: 5; }

    .game-stage.wide.dictation .game-dictate { order: 1; min-height: 0; margin-bottom: 0; }
    .game-stage.wide.dictation .game-score { order: 2; }
    .game-stage.wide.dictation .board { order: 3; }
    .game-stage.wide.dictation .game-status { order: 4; }
    .game-stage.wide.dictation .game-levels { order: 5; margin-bottom: 0; }
    .game-stage.wide.dictation .game-actions { order: 6; }
    .game-stage.wide.dictation .game-hint { order: 7; margin-top: 0; }

    .game-stage.wide.letters .game-actions { order: 5; }
    .game-stage.wide.letters .game-said { order: 6; margin-bottom: 0; }
    .game-stage.wide.letters .game-levels { order: 7; margin-bottom: 0; }
    .game-stage.wide.letters .game-hint { order: 8; margin-top: 0; }

    .game-stage.wide .game-score,
    .game-stage.sheet .game-score {
        order: 1;
        margin: 0;
        padding-top: 0;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px;
        gap: calc(var(--grid-step) * 1.5);
    }
    .game-stage.wide .game-score dt,
    .game-stage.sheet .game-score dt { margin-bottom: 2px; }
    .game-stage.wide .game-score dd,
    .game-stage.sheet .game-score dd { font-size: 21px; }

    .game-stage.sheet { align-items: stretch; gap: var(--grid-step); }
    .game-stage.sheet .game-side { display: contents; }
    .game-stage.sheet .game-status { order: 1; }
    .game-stage.sheet .game-score { order: 2; }
    .game-stage.sheet .board { order: 3; }
    .game-stage.sheet .game-picks { order: 4; margin-bottom: 0; }
    .game-stage.sheet .game-levels { order: 5; margin-bottom: 0; }
    .game-stage.sheet .game-actions { order: 6; }
    .game-stage.sheet .game-hint { order: 7; margin-top: 0; }
}

@media (max-width: 560px) {
    .games-list { grid-template-columns: 1fr; }
    .game-card:nth-child(3n + 2),
    .game-card:nth-child(4n + 1),
    .game-card:nth-child(5n + 4) { margin-top: 0; }
}

.game-sketch .for-dark { display: none; }

:root[data-theme="dark"] .game-sketch .for-light { display: none; }
:root[data-theme="dark"] .game-sketch .for-dark { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .game-sketch .for-light { display: none; }
    :root:not([data-theme="light"]) .game-sketch .for-dark { display: block; }
}