/* ---------- The grade games (js/puzzles/games/): shared pieces and the Number Pad ----------
   Every game's puzzle fits the puzzle window with no scrolling, down to 568x320 (see CLAUDE.md).
   Each interaction's own look lives in its css/games-*.css file. */

/* a fraction, stacked: <span class="frac"><i>3</i><i>4</i></span> */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .08em; font-size: .62em; line-height: 1.05; }
.frac i { font-style: normal; padding: 0 .15em; }
.frac i:first-child { border-bottom: .09em solid currentColor; }
sup { font-size: .55em; vertical-align: .9em; line-height: 0; }

/* an array of dots (rows x --c) */
.gm-array { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: clamp(3px, .8vh, 6px); padding: 8px; background: rgba(255, 255, 255, .55); border-radius: 12px; box-shadow: 0 0 0 3px var(--th-pz-soft); }
.gm-array i { width: clamp(12px, 2.6vh, 20px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #c8372b); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gm-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: clamp(16px, 3.4vh, 28px); line-height: 1.15; max-width: min(100%, 520px); }
.gm-row i { font-style: normal; }
@media (max-height: 420px) { .gm-row { font-size: 15px; max-width: 100%; } }
.pulse { animation: pulseBox .9s ease-in-out 2; }

/* ---------- Number Pad (types/keypad.js) ----------
   Wide screens: the question on the left, the pad on the right. Upright and short screens: the pad
   under the question (on short ones the sum and the answer box share one row). */
.kp { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 36px); width: 100%; min-height: 0; }
.kp-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 14px); min-width: 0; flex: 1 1 0; }
.kp-art { display: flex; justify-content: center; max-width: 100%; }
.kp-art .pz-visual { gap: 6px 10px; }
.kp-art .pz-visual .ig { padding: 5px; }
.kp-art .pz-visual .ic { font-size: clamp(16px, 3.2vh, 30px); }
.kp-art .pz-visual.many .ic { font-size: clamp(13px, 2.4vh, 22px); }
.kp-prompt { font-size: clamp(22px, min(4.8vw, 8vh), 56px); white-space: nowrap; }
.kp-show { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: clamp(120px, 20vw, 240px); height: clamp(44px, 9vh, 72px); padding: 0 16px; border-radius: 12px;
  font-weight: 700; font-size: clamp(26px, min(4.6vw, 7.5vh), 50px); color: #1d3f78; background: #fff; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .12), 0 0 0 4px var(--ink); transition: background .2s; }
.kp-show .u { color: #6b4f24; font-size: .8em; }
.kp-show.empty .kp-val::after { content: '?'; color: #e0702a; animation: blink 1s steps(2) infinite; }
.kp-show.bad { background: #ffe1dc; animation: wiggle .4s; }
.kp-show.good { background: #c9f5c9; color: #1f6a28; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .1), 0 0 0 4px #0b2a0c, 0 0 26px rgba(110, 255, 120, .8); }
.kp-note { font-weight: 700; font-size: clamp(13px, 2.4vh, 18px); color: #1f6a28; text-align: center; }
.kp-keys { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: clamp(5px, 1.2vh, 10px); flex: 0 0 auto; width: clamp(250px, 44%, 460px); }
.kp-k { min-width: 0; height: clamp(40px, 10vh, 64px); padding: 0; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: clamp(20px, 5vh, 34px); color: #fff;
  background: linear-gradient(var(--th-opt-hi), var(--th-opt-lo)); text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  box-shadow: inset 0 -5px 0 var(--th-opt-sh), inset 0 3px 0 var(--th-opt-lt), 0 0 0 3px var(--ink); transition: transform .08s, filter .15s; }
.kp-k:active, .kp-k.press { transform: translateY(3px); filter: brightness(1.15); box-shadow: inset 0 -2px 0 var(--th-opt-sh), 0 0 0 3px var(--ink); }
.kp-k.back { background: linear-gradient(#f0b25a, #c9792a); box-shadow: inset 0 -5px 0 #8a4f16, inset 0 3px 0 #ffd79a, 0 0 0 3px var(--ink); }
.kp-k.ok { background: linear-gradient(#5ec466, #3f9e48); box-shadow: inset 0 -5px 0 #24642b, inset 0 3px 0 #8fe596, 0 0 0 3px var(--ink); }
.kp-k.ok:disabled { filter: grayscale(.8) brightness(.9); opacity: .6; cursor: default; }
.kp-k.sym { background: linear-gradient(#8fb4ff, #4d74c9); box-shadow: inset 0 -5px 0 #27427e, inset 0 3px 0 #c4d6ff, 0 0 0 3px var(--ink); }
.kp-k:focus-visible { outline: 4px solid #ffd25a; outline-offset: 2px; }
@media (max-aspect-ratio: 1/1), (max-height: 420px) {
  .kp { flex-direction: column; gap: clamp(6px, 1.6vh, 14px); }
  .kp-q { flex: 0 1 auto; width: 100%; }
  .kp-keys { width: min(100%, 420px); }
}
@media (max-aspect-ratio: 1/1) {
  .kp-k { height: clamp(42px, 11vw, 62px); font-size: clamp(22px, 6.5vw, 32px); }
  .kp-prompt { font-size: clamp(24px, 7.5vw, 48px); }
}
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  .kp-q { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .kp-art { flex-basis: 100%; }
  .kp-show { height: 40px; min-width: 110px; font-size: 26px; }
  .kp-keys { gap: 5px; width: min(100%, 380px); }
  .kp-k { height: clamp(34px, 11vh, 44px); font-size: 22px; border-radius: 9px; }
}
@media (max-height: 420px) {
  .kp-art .pz-visual .ic { font-size: 15px; }
  .kp-art .pz-visual .ig { padding: 3px; gap: 1px; }
  .kp-art .gm-array { gap: 3px; padding: 5px; }
  .kp-art .gm-array i { width: 9px; }
}
@media (max-aspect-ratio: 1/1) {
  .kp-art .pz-visual.many .ic { font-size: clamp(13px, 4vw, 18px); }
  .kp-art .pz-visual.many { gap: 6px; }
}
/* The smallest phones: counting pictures, dot arrays and balance scales give way to the sum and the
   keys (the sum is in the question too). Price tags, In/Out tables and clues stay: they ARE the question. */
@media (max-height: 340px) {
  .kp-art > .pz-visual, .kp-art > .gm-array, .kp-art > .gm-row, .kp-art > .gm-balance { display: none; }
}
@keyframes blink { 50% { opacity: 0; } }