/* Tập viết: tô chữ bằng ngón tay. */
.wr-wrap {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: calc(100vh - 260px);
  height: calc(100dvh - 260px);
  min-height: 280px;
  overflow: hidden;
  touch-action: none;
}
.wr-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}
.wr-msg {
  position: absolute;
  left: 0; right: 0; top: 14px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
  min-height: 1px;
}
.wr-msg.hint { color: var(--accent); animation: wr-nudge .5s ease; }
.wr-msg.win { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.wr-pop {
  font-size: 180px;
  line-height: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18));
  animation: wr-pop .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.wr-wrap.solved { box-shadow: 0 0 0 6px var(--good), var(--shadow); }
.wr-nav { gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.wr-nav .big-btn { min-width: 88px; height: 88px; font-size: 40px; padding: 0 18px; }
.wr-nav .counter { min-width: 64px; }
.wr-letter .big { line-height: 1.1; }

@keyframes wr-pop {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes wr-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

@media (max-width: 600px) {
  .wr-wrap { height: calc(100vh - 230px); height: calc(100dvh - 230px); min-height: 240px; }
  .wr-nav { flex-wrap: nowrap; gap: 8px; }
  .wr-nav .big-btn { min-width: 60px; height: 60px; font-size: 28px; padding: 0 8px; }
  .wr-nav .counter { min-width: 40px; }
  .wr-pop { font-size: 120px; }
}