/* Times tables game (assets/play/times.js): arrays of dots, equal groups, big answer buttons, streak and sprint timer. */
.tm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.tm-head .lesson-bar { flex: 1 1 140px; }
.tm-streak { font: 800 1rem var(--display); color: var(--navy); background: #fff3c4; border-radius: 999px; padding: 2px 12px;
  box-shadow: inset 0 0 0 2px var(--yellow); white-space: nowrap; }
.tm-streak:empty { display: none; }
.tm-bump { animation: tm-bump .35s ease-out; }
@keyframes tm-bump { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.tm-score { font: 800 1.6rem/1 var(--display); color: #fff; background: var(--navy); border-radius: 14px; padding: 6px 14px; min-width: 2.4em; text-align: center; }
.tm-timer b { background: var(--green); transition: width .2s linear; }
.tm-hurry .tm-timer b { background: var(--red); }
.tm-hurry .tm-score { animation: tm-bump .5s; }

.tm-area { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 12px;
  max-width: 100%; }
.tm-sprint { min-height: 170px; }
.tm-wait { min-height: 340px; }
.tm-wait.tm-wait-s { min-height: 130px; }
.tm-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.tm-eq { font: 800 clamp(2.2rem, 10vw, 4.2rem)/1.1 var(--display); color: var(--navy); text-align: center; white-space: nowrap; }
.tm-blank { display: inline-block; min-width: 1.3em; border-bottom: 6px solid var(--blue); color: var(--blue); }
.tm-blank.tm-filled { color: var(--green); border-bottom-color: var(--green); animation: tm-bump .35s ease-out; }

/* arrays: one row per group, each row its own color */
.tm-array { --d: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; }
.tm-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; transition: background .25s, opacity .3s;
  animation: pop .25s ease-out; }
.tm-row i, .tm-grp i { flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c, var(--blue));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.tm-sum { min-width: 2.3em; padding-left: 4px; font: 800 1rem/1 var(--display); color: var(--navy); }
.tm-sum:empty { visibility: hidden; }
.tm-row.tm-lit { background: #fff3c4; box-shadow: inset 0 0 0 2px var(--yellow); }
.tm-row.tm-lit2 { background: #d6f1ff; box-shadow: inset 0 0 0 2px var(--blue); }
.tm-row.tm-gone { opacity: .22; background: none; box-shadow: none; }

/* equal groups: a box per group */
.tm-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; max-width: 100%; padding-top: 10px; }
.tm-grp { --d: 18px; position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), auto); gap: 4px; justify-items: center;
  align-items: center; padding: 12px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 3px var(--line); transition: background .25s, box-shadow .25s; }
.tm-grp svg { width: clamp(30px, 8vw, 44px); height: auto; }
.tm-grp .tm-sum { position: absolute; top: -12px; right: -8px; min-width: 0; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: .95rem; }
.tm-grp.tm-lit { background: #fff8dc; box-shadow: inset 0 0 0 4px var(--yellow); }

/* story problems */
.tm-story { max-width: 540px; background: var(--soft); border-radius: 18px; padding: 14px 16px; text-align: center; }
.tm-story p { margin: 0 0 10px; font: 700 clamp(1.15rem, 3.6vw, 1.45rem)/1.35 var(--display); color: var(--navy); }
.tm-story p b { color: var(--red); }

/* answer buttons: 4 in a row, 2 x 2 on phones */
.tm-answers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(100%, 580px); margin: 0 auto; }
.tm-answers button { height: clamp(72px, 17vw, 100px); border-radius: 22px; border: 0; cursor: pointer; background: #fff; padding: 0 4px;
  font: 800 clamp(1.9rem, 6.5vw, 2.8rem) var(--display); color: var(--navy); box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 3px #d4dce8;
  touch-action: manipulation; transition: transform .1s; }
.tm-answers button:active { transform: translateY(3px); box-shadow: 0 3px 0 #c9d3e2, inset 0 0 0 3px #d4dce8; }
.tm-answers button:disabled { cursor: default; }
.tm-answers button.tm-right { background: var(--green); color: #fff; box-shadow: 0 6px 0 #168a56; }
.tm-answers button.tm-wrong { background: #ffe1de; color: var(--red-dark); opacity: .8; }
.tm-answers button.tm-hint { animation: bob 1s ease-in-out infinite; box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 5px var(--green); }
@media (hover: hover) {
  .tm-answers button:not(:disabled):hover { box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 3px var(--blue); }
  .tm-answers button.tm-hint:not(:disabled):hover { box-shadow: 0 6px 0 #c9d3e2, inset 0 0 0 5px var(--green); }
}
@media (max-width: 520px) { .tm-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tm-area { min-height: 200px; } }

/* end panel: the facts you mastered */
.tm-sumh { display: block; margin: 14px 0 6px; font: 800 1.05rem var(--display); color: var(--navy); }
.tm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tm-chip { background: #dff5e9; color: #146c45; border-radius: 999px; padding: 3px 11px; font: 700 .95rem var(--body); white-space: nowrap; }
.tm-chip.tm-miss { background: #ffe1de; color: var(--red-dark); }
@media (prefers-reduced-motion: reduce) { .tm-bump, .tm-row, .tm-answers button.tm-hint, .tm-blank.tm-filled { animation: none; } }