/*
 * Game-specific overrides for the columnar "sumas y restas" drill. The
 * worksheet grid, its cells and the borrow/carry marks all live in
 * shared/shell.css (the ".ws-*" block) + shared/columnar.js - this file
 * only positions the worksheet inside the shared stage/pad layout.
 */

.ws-prompt {
  font-size: clamp(17px, 4vw, 24px);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1.15;
  margin: 0;
  max-width: 30ch;
}

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

/* Landscape: the WORKSHEET sits screen-centred (equal pad-width columns
   either side of the auto stage column, the whole grid centred). The
   rocket rail lives in the stage's wide right gutter - well clear of the
   worksheet, around 65% across - and the keypad is pinned to the start of
   the right column, right next to the rail. */
@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(14px, 1.7vw, 19px); }
}

/* landscape phone (short + wide): the full keypad won't fit beside a
   centred worksheet, so shrink both a bit */
@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 { --digit: clamp(18px, 5.4vh, 30px); padding: 6px 8px 8px; }
  .feedback { min-height: 32px; }
}