.page {width:min(860px,calc(100% - 32px));}
.intro {text-align:center;margin:18px auto 24px;}
.intro h1 {font-size:clamp(2rem,7vw,3.3rem);}
.intro p {margin-inline:auto;}
.game-profile-card {margin-bottom:18px;}
.multiplication-card {padding:clamp(16px,4vw,30px);margin-bottom:20px;}
.level-picker {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.level-picker button {display:grid;gap:5px;min-height:62px;padding:10px 5px;border:1px solid #d4ddd4;border-radius:13px;background:#fafbf7;color:#496459;}
.level-picker strong {font-size:1rem;}
.level-picker small {font-size:.76rem;}
.level-picker [aria-pressed="true"] {border-color:#43876b;background:#e8f4e9;box-shadow:inset 0 0 0 1px #43876b;}
.level-range {min-height:1.4em;margin:12px auto 18px;text-align:center;color:#587068;font-size:.8rem;line-height:1.5;}
.challenge-head {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.challenge-head h2 {font-size:1.1rem;}
.score {display:grid;text-align:right;}
.score strong {font-size:1.5rem;font-variant-numeric:tabular-nums;}
.score span {font-size:.75rem;color:#587068;}
.question-card {margin:14px 0;padding:20px 10px;border:2px solid #dce7dd;border-radius:20px;background:#f5f8f0;text-align:center;}
.question-label {margin:0 0 9px;font-size:.82rem;font-weight:700;color:#587068;}
.equation {font-size:clamp(2.3rem,9vw,4.3rem);font-weight:850;font-variant-numeric:tabular-nums;line-height:1.2;}
.answer-feedback {display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;min-height:30px;font-size:.95rem;}
.answer-feedback span {font-size:1.5rem;}
.question-card[data-correct="true"] {border-color:#5c9b51;background:#e4f3de;color:#245c30;}
.question-card[data-correct="false"] {border-color:#d88376;background:#fff0e9;color:#923a32;}
.choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0;}
.choices button {min-width:44px;min-height:72px;padding:12px;border:2px solid #b8d0bc;border-radius:15px;background:#fffefa;color:#244e3d;font-size:1.8rem;font-weight:800;}
.choices button[data-correct="true"] {border-color:#4f8d45;background:#dcefd4;}
.digitpad-wrap {width:min(100%,330px);margin:18px auto;}
.answer-output {position:relative;display:block;min-height:66px;margin-bottom:12px;padding:8px 44px;border:2px solid #bccfbd;border-radius:14px;background:white;text-align:center;font-size:2.1rem;font-weight:800;font-variant-numeric:tabular-nums;}
.answer-output::before {content:'=';position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--filipika-purple-dark);font-size:1.6rem;line-height:1;}
.digitpad {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.digitpad button {min-width:44px;min-height:52px;border:1px solid #cad6cb;border-radius:12px;background:#fffefa;color:#244e3d;font-size:1.4rem;font-weight:750;}
.digitpad [data-clear-input],.digitpad [data-backspace] {background:#edf2ed;font-size:1.2rem;}
.submit-answer {width:100%;min-height:48px;margin-top:10px;}
.submit-answer kbd {margin-left:6px;font-size:.75rem;opacity:.8;}
.message {min-height:1.5em;text-align:center;font-size:.88rem;line-height:1.5;}
.summary {margin:18px 0;padding:20px;border:1px solid #c1d5bb;border-radius:16px;background:#eff7eb;}
.summary h2 {margin-top:0;}
.summary-score {font-size:2rem;font-weight:850;}
.summary li {margin:7px 0;line-height:1.5;}
.game-start-row {justify-content:center;gap:12px;flex-wrap:wrap;}
.note {text-align:center;line-height:1.5;}
#retry {display:block;margin:10px auto;min-height:44px;}
[hidden] {display:none!important;}
button:disabled {opacity:.48;cursor:default;}
button:focus-visible {outline:3px solid #4d79c8;outline-offset:3px;}
@media(max-width:500px){.page {width:calc(100% - 20px);}.multiplication-card {padding:12px;}.level-picker {gap:5px;}.level-picker strong {font-size:.88rem;}.level-picker small {font-size:.64rem;}.question-card {padding:15px 8px;}.choices {gap:7px;}.choices button {min-height:62px;font-size:1.5rem;}.digitpad-wrap {width:min(100%,290px);}.intro {margin-bottom:16px;}.submit-answer kbd {display:none;}}

/* During a series the question label already contains its number and score. */
@media(max-width:600px) {
  .multiplication-card:has(.question-card:is([data-phase="playing"],[data-phase="feedback"])) .challenge-head {display:none;}
  .multiplication-card:has(.question-card:is([data-phase="playing"],[data-phase="feedback"])) .level-picker button {min-height:44px;padding:6px 3px;gap:2px;}
  .multiplication-card:has(.question-card:is([data-phase="playing"],[data-phase="feedback"])) .level-range {margin:6px auto 8px;}
  .question-card {margin:8px 0;padding:12px 8px;}
  .question-label {margin-bottom:6px;}
  .answer-feedback {margin-top:8px;}
  .choices {margin:12px 0;}
  .digitpad-wrap {margin:10px auto;}
  .answer-output {min-height:50px;margin-bottom:8px;padding-block:4px;font-size:1.8rem;}
  .digitpad {gap:6px;}
  .digitpad button {min-height:44px;}
  .submit-answer {min-height:44px;margin-top:8px;}
  .message {margin:8px 0;font-size:.8rem;line-height:1.4;}
  .game-start-row {margin-top:8px;}
}