/* ── Typing Race (docs/49_GAMES.md) ──────────────────────────────────
   Loaded from src/pages/games/typing-race.astro. */
.gtype {
  --ty-ok: var(--ice-palette-forest-700);
  --ty-bad: var(--ice-palette-crimson-600);
  --ty-bad-bg: var(--ice-palette-crimson-200);
  --ty-todo: var(--ice-palette-slate-600);
  --ty-heat: var(--ice-palette-crimson-600);
}
[data-theme='dark'] .gtype {
  --ty-ok: var(--ice-palette-forest-300);
  --ty-bad: var(--ice-palette-crimson-300);
  --ty-bad-bg: var(--ice-palette-graphite-750);
  --ty-todo: var(--ice-palette-graphite-300);
  --ty-heat: var(--ice-palette-crimson-300);
}
.gtype__track { position: relative; height: 2.4rem; margin: 0 0 .75rem; border: 1px solid var(--ice-color-border); border-radius: 999px; background: var(--ice-color-surface-muted); }
.gtype__runner { position: absolute; top: 50%; left: calc(.3rem + (100% - 2.6rem) * var(--p, 0)); transform: translateY(-50%); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font: 700 .7rem/1 var(--ice-font-primary, sans-serif); transition: left .2s ease-out; }
.gtype__runner--you { background: var(--ice-color-action); color: var(--ice-color-on-action, #fff); z-index: 1; }
.gtype__runner--ghost { border: 2px dashed var(--ty-todo); color: var(--ty-todo); background: var(--ice-color-surface); }
.gtype__runner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .gtype__runner { transition: none; } }
.gtype__passage { max-height: 11rem; overflow-y: auto; margin: 0 0 .75rem; padding: .9rem 1rem; border: 1px solid var(--ice-color-border); border-radius: 8px; background: var(--ice-color-surface); color: var(--ty-todo); font: 500 1.25rem/1.7 var(--ice-font-primary, sans-serif); white-space: pre-wrap; cursor: text; }
.gtype__passage[lang='ne'] { font-size: 1.4rem; line-height: 1.9; }
.gtype__passage .is-ok { color: var(--ty-ok); }
.gtype__passage .is-bad { color: var(--ty-bad); background: var(--ty-bad-bg); border-radius: 2px; }
.gtype__passage .is-pending { color: var(--ice-color-on-surface); }
.gtype__passage .is-cursor { box-shadow: inset 2px 0 0 var(--ice-color-action); color: var(--ice-color-on-surface); }
.gtype__input { display: block; width: 100%; min-height: 5.5rem; padding: .7rem .9rem; border: 1px solid var(--ice-color-border-strong, var(--ice-color-border)); border-radius: 8px; background: var(--ice-color-surface); color: var(--ice-color-on-surface); font: 500 1.15rem/1.6 var(--ice-font-primary, sans-serif); resize: vertical; }
.gtype__input:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 1px; }
.gtype__map { margin-top: 1rem; }
.gtype__map h2 { font-size: 1rem; margin: 0 0 .25rem; }
.gtype__mapnote { margin: 0 0 .5rem; font-size: .85rem; }
.gtype__keys { display: grid; gap: .3rem; overflow-x: auto; }
.gtype__krow { display: flex; gap: .3rem; }
.gtype__krow:nth-child(2) { padding-left: .8rem; } .gtype__krow:nth-child(3) { padding-left: 1.4rem; } .gtype__krow:nth-child(4) { padding-left: 2rem; }
.gtype__krow--wrap { flex-wrap: wrap; padding-left: 0 !important; }
.gtype__key { position: relative; display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .3rem; border: 1px solid var(--ice-color-border); border-radius: 5px; background: color-mix(in srgb, var(--ty-heat) calc(var(--heat, 0) * 70%), var(--ice-color-surface)); color: var(--ice-color-on-surface); font: 600 .9rem/1 var(--ice-font-primary, sans-serif); }
.gtype__key--space { min-width: 12rem; }
.gtype__key b { position: absolute; top: -.45rem; right: -.35rem; min-width: 1.1rem; padding: .1rem .2rem; border-radius: 999px; background: var(--ice-color-on-surface); color: var(--ice-color-surface); font-size: .65rem; text-align: center; }
.gtype__none { margin: 0; font-size: .9rem; }
.gtype__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }