.game.hard { padding: 32px 16px; }
.hd-info { font-size: 1.2rem; color: #666; }
.hd-hint { min-height: 1.6em; font-size: 1.2rem; font-weight: bold; color: #e5484d; margin-top: 6px; }
.hd-line { font-size: 2.6rem; font-weight: bold; line-height: 1.6; margin: 16px 0 20px; font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.hd-line span { color: #b8c0cc; }
.hd-line span.done { color: #2bb673; }
.hd-line span.now { color: #4a7cf7; border-bottom: 5px solid #4a7cf7; }
.hd-line span.sp.now { background: #dbe6ff; }
.hd-line.bad { animation: hd-shake 0.3s; }
.hd-line.pop { animation: hd-pop 0.25s; }
@keyframes hd-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes hd-pop { from { transform: scale(0.9); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.hd-next { font-size: 1.3rem; color: #9aa3b0; margin-bottom: 8px; }
.hd-tip { font-size: 1.1rem; color: #888; }
.hd-done { font-size: 2.2rem; font-weight: bold; }
.hd-result { font-size: 1.3rem; }
.hd-again { font-size: 1.4rem; min-height: 70px; padding: 0 30px; border: 0; border-radius: 16px;
  background: #4a7cf7; color: #fff; margin-top: 16px; }
@media (max-width: 600px) { .hd-line { font-size: 1.8rem; } }