.vtd-words { --line-height: 52px; height: calc(var(--line-height) * 4 + 20px); padding: 10px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: text; }
.vtd-words-inner { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; transition: transform .12s ease-out; }
.vtd-word { height: var(--line-height); padding: 0 6px; border-radius: 6px; font-size: var(--large); line-height: var(--line-height); white-space: nowrap; }
.vtd-word.is-current { background: var(--current); }
.vtd-word.is-current.is-off { background: var(--bad); color: #fff; }
.vtd-word.is-correct { color: var(--ok); }
.vtd-word.is-wrong { color: var(--bad); }
.is-solo .vtd-words { height: auto; min-height: calc(var(--line-height) * 4 + 20px); }
.vtd-word.is-rival { box-shadow: inset 0 -3px 0 var(--bad); }

.vtd-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; margin-top: 10px; }
.vtd-input-row input:disabled { opacity: .6; }
.vtd-timer { display: grid; place-items: center; min-width: 84px; height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: var(--large); font-variant-numeric: tabular-nums; }
.is-running .vtd-timer { border-color: var(--accent); color: var(--accent); }
.vtd-timer.is-low { border-color: var(--bad) !important; color: var(--bad) !important; }
.vtd-reset { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: var(--large); line-height: 1; cursor: pointer; }
.vtd-reset:hover { border-color: var(--accent); color: var(--accent); }

.vtd-result { margin-top: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.vtd-wpm { margin: 0 0 12px; color: var(--muted); }
.vtd-wpm strong { margin-right: 6px; color: var(--accent); font-size: 56px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.vtd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vtd-stats dt { color: var(--muted); font-size: var(--small); }
.vtd-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vtd-result .ok { color: var(--ok); }
.vtd-result .bad { color: var(--bad); }
.vtd-mistakes, .vtd-save { margin: 12px 0 0; color: var(--muted); font-size: var(--small); }
.vtd-save:empty { display: none; }
.vtd-save.is-saved { color: var(--ok); }
.vtd-save.is-failed { color: var(--bad); }
.vtd-result .tg-primary { margin-top: 16px; }

@media (max-width: 699px) {
    .vtd-words { --line-height: 44px; }
    .vtd-timer { min-width: 70px; }
    .vtd-stats { grid-template-columns: minmax(0, 1fr); }
}

.vtd-full { font-size: 22px; }
.vtd-play.is-full { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: auto; background: var(--bg); }
.vtd-play.is-full > * { width: min(1200px, 100%); margin-left: auto; margin-right: auto; }
.vtd-play.is-full .vtd-words { --line-height: 76px; flex: none; }
.vtd-play.is-full .vtd-word { padding: 0 10px; font-size: 36px; }
.vtd-play.is-full .vtd-input-row .tg-input { height: 64px; font-size: 28px; }
.vtd-play.is-full .vtd-timer, .vtd-play.is-full .vtd-reset { height: 64px; }
.vtd-play.is-full .vtd-reset { width: 64px; }
.vtd-play.is-full .vtd-full { border-color: var(--accent); color: var(--accent); }
.is-solo .vtd-play.is-full { justify-content: flex-start; }
body.vtd-full-open { overflow: hidden; }
@media (max-width: 699px) {
    .vtd-play.is-full .vtd-words { --line-height: 52px; }
    .vtd-play.is-full .vtd-word { font-size: 24px; }
    .vtd-play.is-full .vtd-input-row .tg-input { height: 52px; font-size: var(--large); }
    .vtd-play.is-full .vtd-timer, .vtd-play.is-full .vtd-reset { height: 52px; }
    .vtd-play.is-full .vtd-reset { width: 52px; }
}