.game-card { background:#fff; border:1px solid #e2e7ef; border-radius:20px; padding:16px; box-shadow:0 6px 24px rgba(20,30,50,.06); }
.game-head { display:flex; justify-content:space-between; align-items:center; }
.question-count { font-weight:800; margin-top:2px; }
.timer { font-variant-numeric:tabular-nums; font-weight:800; }
.direction-row { display:flex; align-items:center; justify-content:center; gap:5px; margin:16px auto 10px; font-size:.72rem; color:#667085; }
.direction-toggle { border:1px solid #d9dee8; background:#f7f8fa; color:#4b5565; padding:6px 8px; border-radius:8px; font-size:.68rem; font-weight:800; }
.direction-toggle.active { background:#172033; border-color:#172033; color:#fff; }
.problem { width:max-content; min-width:190px; margin:14px auto 12px; text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:2.1rem; font-weight:800; line-height:1.15; }
.problem > div:nth-child(2) { display:flex; justify-content:flex-end; gap:10px; }
.answer-line { border-bottom:4px solid #172033; margin:7px 0 8px; }
.answer-boxes { display:flex; justify-content:flex-end; gap:7px; min-height:53px; }
.answer-box { width:48px; height:52px; display:grid; place-items:center; border:2px solid #cfd6e2; border-radius:9px; background:#fafbfc; }
.feedback { min-height:26px; text-align:center; font-weight:800; font-size:.9rem; margin:4px 0 8px; }
.feedback.correct { color:#087443; }
.feedback.wrong { color:#b42318; }
.feedback.warn { color:#9a6700; }
.keypad { width:min(390px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad button { min-height:58px; border:1px solid #d9dee8; background:#f8fafc; border-radius:13px; font-size:1.35rem; font-weight:800; touch-action:manipulation; }
.keypad button:active { transform:scale(.97); }
.keypad .utility { background:#eef1f5; }
.keypad .submit { background:#172033; color:#fff; border-color:#172033; }
@media (max-width:420px) {
  .problem { font-size:1.8rem; }
  .answer-box { width:43px; height:47px; }
  .keypad button { min-height:55px; }
  .direction-row { flex-wrap:wrap; }
  .topbar { align-items:flex-start; }
}