/* Typing Test — DOM text surface on top of the shared arcade kit. */
:root { --accent: #f5a04e; }

#stage {
  aspect-ratio: auto;
  max-height: none;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 16px 18px;
  touch-action: manipulation;
  background: #0c0f1e;
  cursor: text;
}

/* The passage. Each character is its own span so it can be
   coloured independently as you type. */
.passage {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: clamp(15px, 3.6vw, 21px);
  line-height: 1.95;
  letter-spacing: 0.3px;
  word-break: break-word;
  color: #565b7d;
  max-height: 46vh;
  overflow: hidden;
  user-select: none;
}
.ch.ok  { color: #6fe08f; }
.ch.bad { color: #ff8578; background: rgba(255, 107, 92, 0.18); border-radius: 2px; }
.ch.cur {
  background: rgba(245, 160, 78, 0.9);
  color: #22140a;
  border-radius: 2px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.35; } }

/* Off-screen input that owns the real keyboard focus — this is what
   makes the mobile keyboard appear at all. */
#typeInput {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  left: 50%;
  top: 50%;
}

.live-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-top: 18px;
}
.live-row > div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.live-row .n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-row .l { font-size: 9px; letter-spacing: 1.2px; color: var(--text-dim); }

.tap-hint {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.len-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.len-btn {
  padding: 10px 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.len-btn.active { background: linear-gradient(135deg, #f5a04e, #e0812c); color: #22140a; border-color: transparent; }

.grade { font-size: 13px; color: var(--text-dim); }
.grade b { color: var(--accent); font-size: 17px; }