.typing-game-page {
  display: grid;
  gap: var(--space-6);
}

.typing-page-header {
  max-width: 760px;
}

.typing-page-kicker,
.typing-eyebrow {
  color: var(--color-teal);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.typing-page-title,
.typing-hero-title,
.typing-screen-title {
  color: var(--color-purple-dark);
  font-family: var(--font-heading);
  line-height: 1.12;
  letter-spacing: 0;
}

.typing-page-title {
  margin-top: var(--space-2);
  font-size: var(--text-4xl);
}

.typing-page-description {
  max-width: 62ch;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.typing-game {
  --typing-border: #d8e2ea;
  --typing-ink: #1f2937;
  --typing-muted: #607080;
  --typing-panel: #ffffff;
  --typing-panel-soft: #f7fbfb;
  --typing-current: #fbbf24;
  --typing-correct: #047857;
  --typing-error: #b91c1c;
  --typing-blue: #2563eb;
  --typing-teal: #0f766e;
  color: var(--typing-ink);
}

.typing-screen {
  display: grid;
  gap: var(--space-5);
}

.typing-hero,
.typing-panel {
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel);
  box-shadow: var(--shadow-sm);
}

.typing-hero {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  border-top: 5px solid var(--color-yellow);
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.08), rgba(251, 191, 36, 0.08)),
    var(--typing-panel);
}

.typing-hero-title {
  font-size: var(--text-4xl);
}

.typing-hero-copy,
.typing-muted {
  color: var(--typing-muted);
}

.typing-mobile-warning {
  display: none;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 800;
}

.typing-menu-grid,
.typing-category-grid,
.typing-setup-grid,
.typing-custom-grid,
.typing-results-grid {
  display: grid;
  gap: var(--space-4);
}

.typing-menu-grid,
.typing-category-grid {
  grid-template-columns: 1fr;
}

.typing-menu-card,
.typing-category-card,
.typing-practice-card {
  position: relative;
  display: grid;
  min-height: 132px;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--typing-border);
  border-left: 5px solid var(--color-teal);
  border-radius: 8px;
  background: var(--typing-panel);
  color: var(--typing-ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.typing-menu-card:hover,
.typing-category-card:hover,
.typing-practice-card:hover,
.typing-menu-card:focus-visible,
.typing-category-card:focus-visible,
.typing-practice-card:focus-visible {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
  outline: 3px solid rgba(20, 184, 166, 0.25);
  outline-offset: 2px;
}

.typing-menu-card-title,
.typing-category-title {
  color: var(--color-gray-900);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.2;
}

.typing-menu-card-copy,
.typing-category-copy,
.typing-lesson-keys,
.typing-lesson-best,
.typing-category-meta {
  color: var(--typing-muted);
}

.typing-menu-card-arrow {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  color: var(--typing-teal);
  font-weight: 800;
}

.typing-topbar,
.typing-play-header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

.typing-screen-title {
  margin-top: var(--space-1);
  font-size: var(--text-3xl);
}

.typing-icon-button,
.typing-primary-button,
.typing-secondary-button,
.typing-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.typing-primary-button,
.typing-start-button {
  border: 2px solid var(--color-purple);
  background: var(--color-purple);
  color: var(--color-white);
}

.typing-secondary-button,
.typing-icon-button {
  border: 2px solid var(--typing-border);
  background: var(--color-white);
  color: var(--color-gray-800);
}

.typing-primary-button:hover,
.typing-start-button:hover,
.typing-primary-button:focus-visible,
.typing-start-button:focus-visible {
  background: var(--color-purple-dark);
  border-color: var(--color-purple-dark);
  color: var(--color-white);
  outline: 3px solid rgba(124, 58, 237, 0.22);
  outline-offset: 2px;
}

.typing-secondary-button:hover,
.typing-icon-button:hover,
.typing-secondary-button:focus-visible,
.typing-icon-button:focus-visible {
  border-color: var(--typing-teal);
  color: var(--typing-teal);
  outline: 3px solid rgba(20, 184, 166, 0.22);
  outline-offset: 2px;
}

.typing-start-button:disabled {
  border-color: var(--color-gray-200);
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.typing-lesson-list {
  display: grid;
  gap: var(--space-3);
}

.typing-lesson-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel);
}

.typing-lesson-number {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: #ecfeff;
  color: var(--typing-teal);
  font-weight: 900;
}

.typing-lesson-title {
  font-size: var(--text-lg);
  line-height: 1.25;
}

.typing-lesson-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.typing-status-pill,
.typing-key-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: var(--text-sm);
  font-weight: 800;
}

.typing-panel {
  padding: var(--space-5);
}

.typing-panel-title {
  margin-bottom: var(--space-4);
  color: var(--color-gray-900);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.typing-choice-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.typing-choice,
.typing-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel-soft);
  font-weight: 800;
}

.typing-choice {
  justify-content: flex-start;
}

.typing-field-label {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-gray-900);
  font-weight: 800;
}

.typing-textarea,
.typing-select {
  width: 100%;
  border: 2px solid var(--typing-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--typing-ink);
}

.typing-textarea {
  min-height: 220px;
  padding: var(--space-4);
  resize: vertical;
  line-height: 1.6;
}

.typing-select {
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
}

.typing-range {
  width: 100%;
  accent-color: var(--color-purple);
}

.typing-range-control {
  display: grid;
  gap: var(--space-2);
}

.typing-range-control + .typing-range-control {
  margin-top: var(--space-4);
}

.typing-range-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.typing-range-heading .typing-field-label {
  margin: 0;
}

.typing-range-value {
  color: var(--typing-teal);
  font-weight: 900;
  white-space: nowrap;
}

.typing-length-panel {
  max-width: 720px;
}

.typing-inline-control {
  padding: var(--space-3) var(--space-4);
  box-shadow: none;
}

.typing-inline-control .typing-range-control {
  gap: var(--space-1);
}

.typing-play-screen {
  position: relative;
}

.typing-play-actions,
.typing-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.typing-capture {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel);
  outline: none;
}

.typing-capture:focus {
  border-color: var(--typing-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
}

.typing-target.is-error-feedback {
  border-color: var(--typing-error);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
  animation: typing-error-jitter 180ms ease-in-out;
}

@keyframes typing-error-jitter {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }
}

.typing-game--reduced-motion .typing-target.is-error-feedback {
  animation: none;
}

.typing-next-key {
  font-size: var(--text-lg);
  font-weight: 800;
}

.typing-next-key strong {
  color: var(--typing-blue);
}

.typing-finger-guidance {
  padding: var(--space-3) var(--space-4);
  border-left: 5px solid var(--color-yellow);
  border-radius: 8px;
  background: #fffbeb;
  color: #713f12;
  font-weight: 800;
}

.typing-live-stats,
.typing-result-stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.typing-stat,
.typing-result-stat {
  min-height: 72px;
  padding: var(--space-3);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel-soft);
}

.typing-stat.is-hidden {
  display: none;
}

.typing-stat-label,
.typing-result-stat span {
  display: block;
  color: var(--typing-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.typing-stat-value,
.typing-result-stat strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-gray-900);
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.typing-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-gray-100);
}

.typing-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-teal), var(--color-green));
  transition: width var(--transition);
}

.typing-target {
  min-height: 150px;
  padding: var(--space-5);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--color-gray-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--text-2xl);
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.typing-char {
  position: relative;
  border-radius: 4px;
}

.typing-char.is-space {
  border-bottom: 3px solid #cbd5e1;
}

.typing-char.is-correct {
  color: var(--typing-correct);
  background: #ecfdf5;
}

.typing-char.is-current {
  color: var(--color-gray-900);
  background: var(--typing-current);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45);
}

.typing-char.is-incorrect {
  color: var(--color-white);
  background: var(--typing-error);
}

.typing-keyboard-wrap {
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.typing-keyboard {
  --key-unit: 44px;
  --key-gap: 6px;
  display: grid;
  width: max-content;
  min-width: max-content;
  gap: var(--key-gap);
  margin-inline: auto;
  padding: var(--space-2);
}

.typing-key-row {
  display: flex;
  align-items: center;
  gap: var(--key-gap);
}

.typing-key {
  display: grid;
  width: var(--key-unit);
  height: var(--key-unit);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-bottom-width: 3px;
  border-radius: 7px;
  background: #f8fafc;
  color: var(--color-gray-800);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.typing-key--u125 {
  width: 56px;
}

.typing-key--u15 {
  width: 68px;
}

.typing-key--u175 {
  width: 80px;
}

.typing-key--u2 {
  width: 92px;
}

.typing-key--u225 {
  width: 104px;
}

.typing-key--u275 {
  width: 128px;
}

.typing-key--u625 {
  width: 300px;
}

.typing-key.is-next {
  border-color: var(--typing-blue);
  background: #dbeafe;
  color: #1e3a8a;
  transform: translateY(-2px);
}

.typing-key.is-correct {
  border-color: var(--typing-correct);
  background: #dcfce7;
  color: #14532d;
  transform: translateY(2px);
}

.typing-key.is-incorrect {
  border-color: var(--typing-error);
  background: #fee2e2;
  color: #7f1d1d;
  transform: translateY(2px);
}

.typing-paused-banner {
  position: absolute;
  inset: 88px var(--space-4) auto;
  padding: var(--space-4);
  border: 2px solid var(--color-yellow);
  border-radius: 8px;
  background: #fffbeb;
  color: #713f12;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 900;
  box-shadow: var(--shadow-md);
}

.typing-result-summary {
  border-top: 5px solid var(--color-green);
}

.typing-result-grade {
  color: var(--typing-teal);
  font-size: var(--text-2xl);
  font-weight: 900;
}

.typing-result-title {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.typing-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.typing-history-list {
  display: grid;
  gap: var(--space-2);
}

.typing-history-item {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel-soft);
}

.typing-setup-summary {
  align-content: start;
  gap: var(--space-4);
}

.typing-game-noscript {
  padding: var(--space-4);
  border: 1px solid var(--typing-border);
  border-radius: 8px;
  background: var(--typing-panel-soft);
}

.typing-game--large-text .typing-target {
  font-size: var(--text-3xl);
}

.typing-game--large-text .typing-keyboard {
  --key-unit: 50px;
}

.typing-game--large-text .typing-key {
  font-size: var(--text-base);
}

.typing-game--reduced-motion *,
.typing-game--reduced-motion *::before,
.typing-game--reduced-motion *::after {
  transition: none !important;
  animation: none !important;
}

@media (min-width: 640px) {
  .typing-menu-grid,
  .typing-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .typing-live-stats,
  .typing-result-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .typing-result-stats--overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .typing-lesson-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .typing-lesson-actions {
    grid-column: auto;
  }
}

@media (min-width: 900px) {
  .typing-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .typing-setup-grid,
  .typing-custom-grid,
  .typing-results-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }
}

@media (max-width: 639px) {
  .typing-page-title,
  .typing-hero-title {
    font-size: var(--text-3xl);
  }

  .typing-mobile-warning {
    display: block;
  }

  .typing-choice-grid {
    grid-template-columns: 1fr;
  }

  .typing-target {
    font-size: var(--text-xl);
    line-height: 1.75;
    padding: var(--space-4);
  }

  .typing-keyboard {
    --key-unit: 38px;
    --key-gap: 5px;
  }

  .typing-key {
    font-size: var(--text-xs);
  }

  .typing-key--u125 {
    width: 48px;
  }

  .typing-key--u15 {
    width: 58px;
  }

  .typing-key--u175 {
    width: 68px;
  }

  .typing-key--u2 {
    width: 78px;
  }

  .typing-key--u225 {
    width: 88px;
  }

  .typing-key--u275 {
    width: 108px;
  }

  .typing-key--u625 {
    width: 230px;
  }

  .typing-history-item {
    grid-template-columns: 1fr;
  }
}