/* Tape Measure — game-specific styles.
 * Indigo category color. Tape-yellow SVG ruler (see game.js). Teal drag bar.
 */

.game-page {
    padding: 1.5rem 0 2rem;
    --jump-accent: var(--cat-measure);
}

.game-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.25rem;
}
.game-head h1 {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
}
.game-head .category {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--cat-measure-bg);
    color: var(--cat-measure);
}
.game-lede {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    font-family: var(--font-hand);
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Start panel */
.start-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem 1.4rem;
    margin: 1rem 0 1.5rem;
    overflow: hidden;
}
.start-panel h2 {
    font-family: var(--font-hand);
    margin: 0 0 0.25rem;
    font-size: 1.8rem;
    color: var(--cat-measure);
    transform: rotate(-1deg);
    display: inline-block;
}
.start-panel h2::after { display: none; }
.start-panel::before {
    content: "| | | |";
    position: absolute;
    top: 0.5rem;
    right: 1.1rem;
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cat-measure);
    opacity: 0.22;
    letter-spacing: 0.2em;
    pointer-events: none;
    transform: rotate(-4deg);
}
@media (max-width: 560px) {
    .start-panel::before { display: none; }
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.25rem;
    margin: 0.25rem 0 1rem;
    align-items: start;
}
.panel-col { min-width: 0; }
@media (max-width: 640px) {
    .panel-grid { grid-template-columns: 1fr; gap: 0.5rem 1rem; }
}

.panel-subhead {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 600;
    margin: 0.9rem 0 0.2rem;
}

.start-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}
.start-footer-left {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.untimed-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* Circle pickers */
.circle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.3rem 0 0;
}
.circle-pick { position: relative; cursor: pointer; }
.circle-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.circle-pick > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px dashed var(--border-strong);
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.05;
    color: var(--text);
    transition: all 0.18s ease;
    transform: rotate(var(--rot, 0));
    user-select: none;
    text-align: center;
    padding: 0.1rem 0.2rem;
}
.circle-pick:nth-child(1) > span { --rot: -5deg; }
.circle-pick:nth-child(2) > span { --rot: 4deg; }
.circle-pick:nth-child(3) > span { --rot: -3deg; }
.circle-pick:hover > span {
    transform: rotate(0) scale(1.06);
    color: var(--cat-measure);
    border-color: var(--cat-measure);
}
.circle-pick input:checked + span {
    border-style: solid;
    border-color: var(--cat-measure);
    background: var(--cat-measure-bg);
    color: var(--cat-measure);
    box-shadow: 0 2px 0 rgba(90, 95, 184, 0.14);
}
.circle-pick input:focus-visible + span {
    outline: 2px solid var(--cat-measure);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .circle-pick > span { transform: none; transition: none; }
    .circle-pick:hover > span { transform: scale(1.06); }
}

/* Mode icons */
.mode-row .circle-pick > span .mode-icon {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.08rem;
}
.mode-row .circle-pick > span .mode-name {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
    font-family: var(--font-sans);
}
.mode-row .circle-pick input:checked + span .mode-name { opacity: 1; }

/* Precision + length circles */
.prec-row .circle-pick > span strong,
.length-row .circle-pick > span strong {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}
.prec-row .circle-pick > span small,
.length-row .circle-pick > span small {
    font-family: var(--font-sans);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.1rem;
    opacity: 0.7;
}

.prec-row.is-disabled { opacity: 0.45; pointer-events: none; filter: grayscale(0.7); }
.prec-note {
    margin: 0.5rem 0 0;
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--cat-measure);
    opacity: 0.85;
}

/* Unit toggle */
.unit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--text);
    user-select: none;
}
.unit-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.unit-toggle-track {
    width: 44px;
    height: 24px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.unit-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: left 0.2s, background 0.2s;
}
.unit-toggle input:checked + .unit-toggle-track {
    background: var(--cat-measure-bg);
    border-color: var(--cat-measure);
}
.unit-toggle input:checked + .unit-toggle-track .unit-toggle-thumb {
    left: 23px;
    background: var(--cat-measure);
}
.unit-toggle input:focus-visible + .unit-toggle-track {
    outline: 2px solid var(--cat-measure);
    outline-offset: 2px;
}
.unit-toggle-label {
    font-weight: 600;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1.4rem;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 2px solid var(--cat-measure);
    border-radius: 999px;
    background: var(--cat-measure);
    color: #fff;
    cursor: pointer;
    box-shadow: 3px 4px 0 rgba(90, 95, 184, 0.28);
    transform: rotate(-0.8deg);
    transition: transform 0.18s, box-shadow 0.15s, filter 0.15s;
}
.btn-primary:hover {
    filter: brightness(0.96);
    transform: rotate(0) translate(-1px, -1px);
    box-shadow: 4px 5px 0 rgba(90, 95, 184, 0.32);
}
.btn-primary:active {
    transform: rotate(0) translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(90, 95, 184, 0.25);
}
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    font-family: var(--font-hand);
    font-size: 1.15rem;
    font-weight: 600;
    border: 1.5px dashed var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transform: rotate(var(--btn-rot, 0.8deg));
    transition: transform 0.18s, border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-ghost:hover {
    transform: rotate(0) scale(1.03);
    border-style: solid;
    border-color: var(--cat-measure);
    color: var(--cat-measure);
    background: var(--cat-measure-bg);
}
.btn-ghost:focus-visible { outline: 2px solid var(--cat-measure); outline-offset: 3px; }
.btn-ghost:nth-of-type(odd)  { --btn-rot: -0.8deg; }
.btn-ghost:nth-of-type(even) { --btn-rot: 1deg; }
.btn-ghost-primary {
    border-style: solid;
    border-color: var(--cat-measure);
    background: var(--cat-measure-bg);
    color: var(--cat-measure);
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-ghost { transform: none; }
}

/* Game area */
.game-area {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: transform 0.08s;
}
.game-area.shake { animation: shake 0.35s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .game-area.shake { animation: none; }
}

/* HUD */
.hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
    flex-wrap: wrap;
}
.hud-group {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.hud-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}
.hud-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
}
.timer-low { color: var(--danger); animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
@media (prefers-reduced-motion: reduce) { .timer-low { animation: none; } }
.score-bump { animation: scoreBump 0.35s ease-out; }
@keyframes scoreBump {
    0%   { transform: scale(1); color: var(--cat-measure); }
    40%  { transform: scale(1.35); color: var(--cat-measure); }
    100% { transform: scale(1); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) { .score-bump { animation: none; } }
.score-pop {
    position: absolute;
    top: -0.5em;
    left: 100%;
    margin-left: 0.2em;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--cat-measure);
    opacity: 0;
    pointer-events: none;
}
.score-pop.pop-run { animation: popUp 0.9s ease-out forwards; }
@keyframes popUp {
    0%   { opacity: 0; transform: translateY(0); }
    25%  { opacity: 1; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-28px); }
}
@media (prefers-reduced-motion: reduce) { .score-pop.pop-run { animation: none; opacity: 0; } }
.hud-streak .streak-value {
    color: var(--accent);
    font-family: var(--font-hand);
    font-size: 1.5rem;
    line-height: 1;
}
.hud-streak.streak-hot .streak-value {
    color: var(--cat-car);
    text-shadow: 0 0 8px rgba(212, 122, 60, 0.4);
}
.btn-end {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-end:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--bg-soft);
}

/* Problem prompt */
.problem-prompt {
    font-family: var(--font-hand);
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    margin: 0.5rem 0 0.75rem;
    min-height: 2.2rem;
    line-height: 1.2;
}

/* Ruler stage */
.ruler-stage {
    margin: 0.25rem 0 1rem;
}
.ruler-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 28px 4px 4px;
    -webkit-overflow-scrolling: touch;
}
.ruler-canvas {
    display: flex;
    justify-content: center;
    min-width: min-content;
}
.ruler-svg {
    display: block;
    margin: 0 auto;
    user-select: none;
    touch-action: none;
    cursor: pointer;
    /* Never scale down — we rely on horizontal scroll for narrow viewports so
     * millimeter ticks stay readable. */
    max-width: none;
}
.ruler-svg text { user-select: none; }
.ruler-hint {
    margin: 0.5rem 0 0;
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--text-secondary);
    min-height: 1.4rem;
}

/* Input zones */
.input-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.25rem;
}
.input-zone[hidden] { display: none; }
.find-zone { padding-top: 0.75rem; }

.find-status {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    color: var(--text);
    text-align: center;
    margin: 0;
    max-width: 36ch;
    line-height: 1.35;
}
.find-status strong {
    color: var(--cat-measure);
    font-family: var(--font-mono);
    font-size: 1.05em;
}

/* Answer card (read mode) */
.answer-card {
    --card-bg: #fdf8ea;
    --card-ink: #1f2a3a;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.6rem 1.1rem 0.65rem;
    min-width: 180px;
    justify-content: center;
    background: linear-gradient(135deg, #fdf8ea 0%, #f5ecd4 100%);
    color: var(--card-ink);
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 10px 22px -14px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: rotate(-0.5deg);
    transition: transform 0.25s;
}
.answer-card:hover { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) { .answer-card, .answer-card:hover { transform: none; } }
:root[data-theme="dark"] .answer-card {
    --card-bg: #f3ead5;
    --card-ink: #1f2a3a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .answer-card {
        --card-bg: #f3ead5;
        --card-ink: #1f2a3a;
    }
}
.answer-input {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cat-measure);
    min-width: 4ch;
    border-bottom: 2px solid var(--cat-measure);
    padding: 0 0.25em 0.05em;
    white-space: pre;
    line-height: 1.05;
    display: inline-block;
    text-align: center;
}
.answer-input.is-empty::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background: var(--cat-measure);
    margin-left: 0.1em;
    animation: caretBlink 1s steps(1) infinite;
    opacity: 0.8;
    vertical-align: middle;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .answer-input.is-empty::after { animation: none; } }
.answer-suffix {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 2rem;
    color: var(--cat-measure);
    line-height: 1;
    opacity: 0.85;
}

/* Read keypad — 3-col grid of small keys */
.read-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
}
.read-keys .key {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.08s, background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.read-keys .key:hover { background: var(--surface); border-color: var(--cat-measure); }
.read-keys .key:active { transform: translateY(1px) scale(0.97); }
.read-keys .key:focus-visible { outline: 2px solid var(--cat-measure); outline-offset: 2px; }
.read-keys .key-back  { color: var(--text-muted); }
.read-keys .key-back:hover { color: var(--danger); border-color: var(--danger); }
.read-keys .key-dot   { font-size: 1.55rem; color: var(--cat-measure); font-weight: 800; }
.read-keys .key-slash { font-size: 1.45rem; color: var(--cat-measure); font-weight: 800; }
.read-keys .key-space { font-size: 1.2rem; color: var(--text-muted); }

/* Action row / feedback */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    justify-content: center;
}
.feedback {
    min-height: 1.8rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0.5rem 0 0.25rem;
    color: transparent;
    transition: color 0.2s;
    font-family: var(--font-hand);
    line-height: 1.3;
}
.feedback-right {
    color: var(--success);
    font-size: 2.4rem;
    animation: feedbackPop 0.5s ease-out;
}
.feedback-wrong { color: var(--danger); font-size: 1.15rem; }
.feedback-skip  { color: var(--text-muted); font-size: 1.1rem; }
@keyframes feedbackPop {
    0%   { transform: scale(0.4); opacity: 0; }
    40%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .feedback-right { animation: none; }
}

/* Correct-answer flash — brief green ring + tint on the whole game area
 * so the signal is unmissable even when the user is looking at the ruler. */
.game-area.flash-correct { animation: correctGlow 0.7s ease-out; }
@keyframes correctGlow {
    0%   { box-shadow: 0 0 0 0 rgba(46, 139, 122, 0.0); }
    25%  { box-shadow: 0 0 0 6px rgba(46, 139, 122, 0.55); background: #eaf5f1; }
    100% { box-shadow: 0 0 0 0 rgba(46, 139, 122, 0.0); }
}
:root[data-theme="dark"] .game-area.flash-correct { animation: correctGlowDark 0.7s ease-out; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .game-area.flash-correct {
        animation: correctGlowDark 0.7s ease-out;
    }
}
@keyframes correctGlowDark {
    0%   { box-shadow: 0 0 0 0 rgba(76, 187, 166, 0.0); }
    25%  { box-shadow: 0 0 0 6px rgba(76, 187, 166, 0.55); background: #223631; }
    100% { box-shadow: 0 0 0 0 rgba(76, 187, 166, 0.0); }
}
@media (prefers-reduced-motion: reduce) {
    .game-area.flash-correct { animation: none; }
}

/* Countdown */
.countdown {
    text-align: center;
    font-family: var(--font-hand);
    font-size: 4rem;
    font-weight: 600;
    color: var(--cat-measure);
    padding: 2rem 0;
    line-height: 1;
}

/* Handle dialog */
.handle-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.handle-dialog[hidden] { display: none; }
.handle-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 380px;
    width: 100%;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}
.handle-card h3 {
    margin: 0 0 0.35rem;
    font-family: var(--font-hand);
    font-size: 1.6rem;
}
.handle-card p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.handle-card input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    margin-bottom: 0.5rem;
}
.handle-card input:focus { outline: 2px solid var(--cat-measure); outline-offset: 1px; }
.handle-error {
    color: var(--danger);
    font-size: 0.85rem;
    min-height: 1.2em;
    margin: 0 0 0.6rem;
}
.handle-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Summary */
.summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
}
.summary h2 {
    font-family: var(--font-hand);
    font-size: 2rem;
    margin: 0 0 0.25rem;
}
.summary h2::after { display: none; }
.summary-score {
    font-family: var(--font-mono);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--cat-measure);
    line-height: 1;
    margin: 0.5rem 0 0.25rem;
}
.summary-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.summary-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.summary-meta span strong {
    color: var(--text);
    font-family: var(--font-mono);
}
.summary-best-flag {
    color: var(--accent);
    font-family: var(--font-hand);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}
.summary-best-flag:empty { display: none; margin: 0; }
.summary-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.share-note {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    min-height: 1.2em;
}

/* Leaderboard */
.leaderboard {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.leaderboard-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.local-best-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.local-best-list li {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto auto 3rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.local-best-list li:last-child { border-bottom: none; }
.local-best-list li.empty {
    display: block;
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
}
.local-best-list .rank { font-family: var(--font-mono); color: var(--text-muted); font-weight: 600; }
.local-best-list .handle { font-weight: 500; }
.local-best-list .diff,
.local-best-list .date { font-size: 0.78rem; color: var(--text-muted); }
.local-best-list .score {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--cat-measure);
    text-align: right;
}

.game-page .section-heading .section-hint {
    font-family: var(--font-hand);
    font-size: 1rem;
}

/* Content sections */
.game-content { margin-top: 2.25rem; }
.game-content section { margin-bottom: 2rem; }
.game-content h2 { margin-top: 0; }

.game-page .section-heading h2 {
    font-family: var(--font-hand);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}
.game-content h3 {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.15;
    margin: 1.4em 0 0.3em;
    color: var(--text);
}
.game-content p,
.game-content ul,
.game-content ol.walkthrough + p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text-secondary);
}
.game-content p strong { color: var(--text); }
.game-content code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-soft);
    padding: 0.08em 0.35em;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Step walkthroughs */
.walkthrough {
    list-style: none;
    counter-reset: wstep;
    padding: 0;
    margin: 0.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.walkthrough li {
    counter-increment: wstep;
    position: relative;
    padding: 0.5rem 0.85rem 0.5rem 2.75rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
.walkthrough li::before {
    content: counter(wstep);
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cat-measure-bg);
    color: var(--cat-measure);
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.05rem;
    border: 1.5px dashed var(--cat-measure);
}
.walkthrough strong {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 1.02em;
}

/* Callout */
.callout {
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin: 1rem 0;
    line-height: 1.55;
}
.callout-gotcha {
    background: #eeeef8;
    border: 1px solid #b9bce1;
    color: #2d316d;
}
:root[data-theme="dark"] .callout-gotcha {
    background: #262a42;
    border-color: #4c5186;
    color: #c9cbed;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .callout-gotcha {
        background: #262a42;
        border-color: #4c5186;
        color: #c9cbed;
    }
}
.callout strong { font-weight: 700; }

.ftc-disclosure {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin: 1rem 0;
    border: 1px solid var(--border);
}

.affiliate-links {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}
.affiliate-links li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}
.affiliate-links li:last-child { border-bottom: none; }
.affiliate-links a { font-weight: 500; }
.affiliate-links .blurb {
    display: block;
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: 0.15rem;
}

/* FAQ diagrams */
.faq-diagram {
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    text-align: center;
}
.faq-diagram figcaption {
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.faq-diagram svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.kb-hints {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
.kb-hints kbd {
    font-family: var(--font-mono);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

@media (max-width: 560px) {
    .kb-hints { display: none; }
    .local-best-list li { grid-template-columns: 2rem 1fr auto 3rem; }
    .local-best-list .date { display: none; }
    .read-keys .key { font-size: 1.1rem; }
    .problem-prompt { font-size: 1.35rem; }
}