/* SchoolDay v234: the look of a maths game, driven by its settings.

   Everything here overrides a v229 rule with a custom property that the engine
   sets on the overlay from the school's saved appearance. The fallback in each
   var() is the v229 colour, so this stylesheet loading WITHOUT the engine
   having set anything leaves the game exactly as it was.

   Layout stays in public-maths-v229.css. This file is colour, font and the
   preview width, and nothing else. */

.maths-game-overlay-v229 {
  background: linear-gradient(
    180deg,
    var(--maths-bg-top-v234, #eaf6ff) 0%,
    var(--maths-bg-bottom-v234, #fdfbe9) 100%);
  font-family: var(--maths-font-v234, inherit);
}

/* The panel itself stays near-white so the chosen background is what reads as
   the background. A school picking a strong green gets a green screen with a
   card on it, not a green card. */
.maths-game-prompt-v229,
.maths-game-number-v229,
.maths-game-word-v229,
.maths-game-progress-v229 {
  color: var(--maths-question-colour-v234, #173f68);
}

/* The answer bubbles. The shape keeps its clip-path and its z-index from v229
   -- those solve the problem where a clipped shape painted over its own
   number -- and only the fill and the border change here. */
.maths-game-choice-shape-v229 {
  background: var(--maths-bubble-v234, #7cc6f5);
  border: .22rem solid var(--maths-bubble-border-v234, transparent);
}
.maths-game-choice-label-v229 {
  color: var(--maths-answer-text-v234, #173f68);
  font-family: var(--maths-font-v234, inherit);
}

/* Right and wrong still say right and wrong. A school can colour the bubbles
   however it likes; it cannot colour away the feedback, because a child who
   cannot tell a correct answer from an incorrect one is not playing a game.
   These keep the v229 greens and reds and override the school's fill. */
.maths-game-choice-v229.is-correct-v229 .maths-game-choice-shape-v229,
.maths-game-choice-v229.is-wrong-v229 .maths-game-choice-shape-v229 {
  border-color: transparent;
}

/* --- Preview: the size a child actually sees --------------------------
   Opened from Games Settings, the game is shown at phone width on whatever
   screen the adult is using. A teacher choosing colours needs to be looking at
   what the class will look at, and colours that work across a 27-inch monitor
   can be unreadable in a 6-inch column. Same reasoning as the phonics preview.

   The overlay still covers the whole window -- it is still modal -- and only
   the panel is narrowed. */
.maths-game-overlay-v229.is-preview-v234 .maths-game-panel-v229 {
  width: min(23rem, 94vw);
  max-height: min(44rem, 92vh);
}
.maths-game-overlay-v229.is-preview-v234 .maths-game-choice-v229 {
  width: clamp(5rem, 22vw, 6.2rem);
  height: clamp(5rem, 22vw, 6.2rem);
}
.maths-game-overlay-v229.is-preview-v234 .maths-game-choice-label-v229 {
  font-size: clamp(1.8rem, 7vw, 2.4rem);
}
.maths-game-overlay-v229.is-preview-v234 .maths-game-prompt-v229 {
  font-size: clamp(1.1rem, 5vw, 1.4rem);
}
/* Says what it is, so nobody reports the preview as "the game is too small". */
.maths-game-overlay-v229.is-preview-v234 .maths-game-panel-v229::before {
  content: "Preview — the size a child sees on a phone";
  display: block;
  margin: -.4rem 0 .6rem;
  font-size: .7rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--maths-question-colour-v234, #173f68);
  opacity: .65;
}

/* --- Above the admin page it is opened from ---------------------------
   v229 put the overlay at z-index 1200, which is fine on the public page and
   nowhere near enough on the admin page: the admin shell alone uses 99999 and
   the functions dropdown portal uses 2147483000. The game is modal, so it goes
   above both. Checked by test against every stylesheet admin.html loads. */
.maths-game-overlay-v229 { z-index: 2147483500; }