/*
 * Game-specific overrides for the columnar "multiplicación" drill. The
 * worksheet grid + cells + carry marks live in shared/shell.css (".ws-*")
 * and shared/columnar.js; this file only positions the worksheet and, for
 * the taller 2-digit x 2-digit layout, shrinks the digit size so all the
 * partial-product rows fit on a phone.
 */

.ws-prompt {
  font-size: clamp(16px, 3.8vw, 23px);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1.15;
  margin: 0;
  min-height: 1.2em;
  max-width: 32ch;
}

.stage-area {
  gap: clamp(6px, 2vh, 14px);
  padding-right: 46px; /* gutter the rocket rail lives in */
}

/* two-digit x two-digit stacks ~9 grid rows (carry, a, x, rule, PP1, PP2,
   rule, carry, sum) - shrink the digit and tighten the spacing so the whole
   worksheet clears the keypad on a phone. Plain clamp() only (no nested
   min()/max() - a nested math fn in a track list can wipe the grid). */
#worksheet.ws-stepped {
  --digit: clamp(16px, 5vw, 32px);
  gap: 2px 4px;
  padding: 8px 10px 10px;
}

/* Landscape: worksheet screen-centred, rocket rail in the wide right
   gutter (~65% across), keypad next to it (see sumas/style.css). */
@media (min-width: 640px) and (orientation: landscape) {
  .game-screen {
    grid-template-areas: "hud hud hud" ". stage pad";
    grid-template-columns: var(--pad-width) auto var(--pad-width);
    justify-content: center;
    column-gap: clamp(10px, 2vw, 28px);
  }
  .pad-area { justify-self: start; }
  .stage-area { padding-inline: clamp(44px, 8vw, 96px); }
  .ws-prompt { max-width: 13rem; font-size: clamp(13px, 1.6vw, 18px); }
  #worksheet.ws-stepped { --digit: clamp(15px, 3.6vh, 28px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --pad-width: 208px; }
  .keypad { padding: 10px; gap: 7px; }
  .keypad button { width: 46px; height: 46px; font-size: 21px; }
  #worksheet.ws-stepped { --digit: clamp(14px, 4.6vh, 24px); }
  .feedback { min-height: 30px; }
}

@media (max-height: 460px) {
  .worksheet { --digit: clamp(15px, 4.2vh, 26px); padding: 5px 7px 6px; }
  .feedback { min-height: 28px; }
}