:root {
  color-scheme: light;
  --chalk-font: "Comic Neue", "Comic Sans MS", "Segoe Print", "Noto Sans Khmer", "Khmer OS Battambang", system-ui, sans-serif;
  font-family: var(--chalk-font);
  --app-h: 100vh;
}
@supports (height: 100svh) {
  :root { --app-h: 100svh; }
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #f5f2eb;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--chalk-font);
  font-weight: 700;
}
button {
  font-family: var(--chalk-font);
  font-weight: 700;
}
html {
  height: 100dvh;
}
body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-h);
  display: grid;
  place-items: center;
  background-image:
    radial-gradient(ellipse 88% 70% at 50% 40%, #fffaf3 0%, transparent 62%),
    linear-gradient(180deg, #f8f4ec 0%, #f5f2eb 42%, #eadfcb 100%);
}
button { font: inherit; color: inherit; border: 0; touch-action: manipulation; user-select: none; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.game-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  --board-image: url("assets/chalkboard-portrait.webp");
  background: #171717 var(--board-image) center / 100% 100% no-repeat;
}
.game-shell.theme-classic { --board-image: url("assets/chalkboard-portrait.webp"); }
.game-shell.theme-green { --board-image: url("assets/chalkboard-green.webp"); }
.game-shell.theme-navy { --board-image: url("assets/chalkboard-navy.webp"); }
.game-shell::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,3,38,.08), rgba(11,3,59,.22)); }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding: max(4.5vh, env(safe-area-inset-top)) 5% max(3vh, env(safe-area-inset-bottom)); }
.screen.active { display: flex; animation: screen-in .22s ease-out; }
.play-mode .play-screen.active { display: grid; }
.board-tools {
  position: absolute;
  z-index: 10;
  top: max(2.2%, env(safe-area-inset-top));
  left: 4%;
  display: flex;
  align-items: center;
  gap: .45em;
}
.language-button,
.settings-button {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: min(4.8vh, 8vw);
  aspect-ratio: 1;
  flex: none;
  padding: 0;
  cursor: pointer;
}
.language-button {
  overflow: hidden;
  border-radius: 50%;
  background: none;
}
.language-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.settings-button {
  display: grid;
  place-items: center;
  background: none;
  color: #efece4;
  font: 800 clamp(16px, 2.8vh, 24px)/1 system-ui, sans-serif;
  border: .16em solid rgba(245, 243, 236, .88);
  border-radius: 50%;
  box-shadow: 0 0 0 .05em rgba(255,255,255,.18);
}
.settings-button[hidden],
.language-button[hidden] { display: none; }
.settings-overlay {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 8, .58);
}
.settings-overlay[hidden] { display: none; }
.settings-panel {
  position: relative;
  width: 78%;
  padding: 6vh 7% 4vh;
  color: #f3f1e9;
  text-align: center;
  font-family: var(--chalk-font);
  border: .22em dashed rgba(243, 241, 233, .45);
  border-radius: 1.4em;
  background: rgba(18, 18, 18, .42);
}
.settings-panel h2 {
  margin: 0 0 2.4vh;
  font-size: clamp(26px, 4.4cqh, 42px);
  letter-spacing: .06em;
  text-shadow: 0 0 2px #fff;
}
.settings-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin: 0 0 1.2vh;
  padding: 1.5vh 2%;
  background: none;
  color: inherit;
  font: 800 clamp(15px, 2.6vh, 24px)/1 inherit;
  cursor: pointer;
  border-bottom: .12em solid rgba(243, 241, 233, .28);
}
.settings-row strong { color: #ffe88d; }
.board-label {
  margin: 2.2vh 0 1.2vh;
  font-size: clamp(14px, 2.3vh, 22px);
  font-weight: 800;
  letter-spacing: .08em;
  text-align: left;
}
.board-picker { display: flex; justify-content: space-between; gap: 4%; }
.board-swatch {
  flex: 1;
  aspect-ratio: 3 / 4;
  max-height: 11vh;
  border: .18em solid rgba(255,255,255,.28);
  border-radius: .55em;
  cursor: pointer;
  background: #2a2a2a center/cover no-repeat;
}
.board-swatch[data-theme="classic"] { background-image: url("assets/chalkboard-portrait.webp"); }
.board-swatch[data-theme="green"] { background-image: url("assets/chalkboard-green.webp"); }
.board-swatch[data-theme="navy"] { background-image: url("assets/chalkboard-navy.webp"); }
.board-swatch[aria-pressed="true"] {
  border-color: #ffe88d;
  box-shadow: 0 0 0 .18em rgba(255, 232, 141, .35);
}
.settings-close {
  position: absolute;
  top: 2%;
  right: 4%;
  background: none;
  color: #c9c7c0;
  font: 800 clamp(26px, 4.5vh, 40px)/1 var(--chalk-font);
  cursor: pointer;
}
.brand { margin-top: 10vh; text-align: center; text-shadow: 0 3px 0 #3b1388, 0 7px 18px #09022f; }
.eyebrow { margin: 0; font-weight: 1000; letter-spacing: .18em; color: #71f5ff; font-size: clamp(12px, 1.8vh, 24px); }
h1 { margin: .2em 0 .05em; font: 700 clamp(48px, 8.5cqh, 92px)/1 var(--chalk-font); letter-spacing: -.04em; color: white; }
h1 span { color: #ffd83d; text-shadow: 0 3px 0 #e56b14, 0 7px 18px #09022f; }
#tagline { margin: .7em auto 0; max-width: 32em; font-size: clamp(13px, 1.75vh, 22px); font-weight: 800; color: #e9e6ff; }
.mode-panel { width: 100%; margin-top: auto; text-align: center; }
.section-label { margin: 0 0 1.2vh; font-size: clamp(16px, 2vh, 26px); font-weight: 900; }
.asset-button { position: relative; min-height: 7vh; background: center/100% 100% no-repeat; cursor: pointer; transition: transform .1s, filter .15s; }
.asset-button:active { transform: translateY(3px) scale(.97); }
.asset-button span { position: relative; z-index: 1; font-weight: 1000; text-shadow: 0 2px 2px #280d62; }
.best-line { display: flex; justify-content: center; align-items: baseline; gap: 1em; margin: 1.5vh 0; font-weight: 700; color: #dcd8ff; font-family: var(--chalk-font); }
.best-line strong { font: 700 clamp(28px, 4.6cqh, 48px)/1 var(--chalk-font); color: #ffd83d; }
.primary { width: 82%; font-size: clamp(20px, 2.7vh, 34px); }
.secondary { width: 64%; min-height: 6vh; font-size: clamp(16px, 2.2vh, 28px); }
.start-button { margin-bottom: 3vh; }
.question-card { position: relative; width: 100%; height: 35vh; margin-top: 2vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.question { font: 700 clamp(48px, 8vh, 90px)/1 var(--chalk-font); text-shadow: 0 4px 0 #17105d; }
.feedback { position: absolute; right: 8%; bottom: 11%; font: 700 clamp(22px, 3.4vh, 40px)/1 var(--chalk-font); opacity: 0; }
.feedback.show { animation: feedback-pop .55s ease-out; }
.feedback.good { color: #69ffb2; }.feedback.bad { color: #ff728b; }
.question-card.wrong { animation: shake .28s; }
.question-card.correct { animation: correct-pop .22s; }
.result-screen { justify-content: center; gap: 1.2vh; }
.result-panel { width: 100%; min-height: 50vh; padding: 7vh 8% 3vh; text-align: center; color: #19135e; }
.result-panel .eyebrow { color: #6352c8; }.result-panel h2 { margin: .25em 0; font-size: clamp(28px, 4.5vh, 52px); color: #322187; }
.result-score-label { margin: 0; font-weight: 700; color: #776fc0; }.result-score { font: 700 clamp(58px, 9vh, 105px)/1 var(--chalk-font); color: #ff9c19; text-shadow: 0 3px 0 white; }
.result-stats { display: flex; justify-content: space-around; margin-top: 2.5vh; }.result-stats div { display: flex; flex-direction: column; }.result-stats strong { font: 700 clamp(24px, 3.8vh, 44px)/1 var(--chalk-font); }.result-stats span { margin-top: .5vh; font-size: clamp(12px, 1.7vh, 20px); font-weight: 700; color: #6e67a9; }
.new-best { min-height: 1.5em; margin: 2vh 0 0; color: #ed6417; font-weight: 1000; }
.pause-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: rgba(5,2,35,.78); }
.pause-overlay[hidden] { display: none; }.pause-panel { width: 84%; padding: 7vh 5%; display: flex; flex-direction: column; align-items: center; gap: 1.4vh; color: #27166f; }.pause-panel h2 { font-size: clamp(28px, 4vh, 50px); }
@keyframes screen-in { from { opacity: 0; } }
@keyframes feedback-pop { 0% { opacity: 0; transform: translateY(10px); } 25% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes correct-pop { 50% { transform: scale(1.02); } }
@media (min-aspect-ratio: 9/16) {
  body {
    background-image:
      radial-gradient(ellipse 88% 70% at 50% 40%, #fffaf3 0%, transparent 62%),
      linear-gradient(180deg, #f8f4ec 0%, #f5f2eb 42%, #eadfcb 100%);
  }
}
@media (max-height: 600px) { .brand { margin-top: 5vh; } .question-card { height: 32vh; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* 16:9 chalkboard home screen */
.game-shell.home-mode,
.game-shell.tutorial-mode,
.game-shell.countdown-mode,
.game-shell.play-mode,
.game-shell.result-mode {
  width: 100%;
  height: 100%;
  background: #171717 var(--board-image) center / 100% 100% no-repeat;
}
.game-shell.home-mode::after,
.game-shell.tutorial-mode::after,
.game-shell.countdown-mode::after,
.game-shell.play-mode::after,
.game-shell.result-mode::after { display: none; }
.home-mode .start-screen { padding: 3.8% 6.5% 4.5%; justify-content: flex-start; }
.home-mode .board-tools,
.tutorial-mode .board-tools {
  top: 6%;
  left: 4.2%;
}
.home-mode .language-button,
.tutorial-mode .language-button,
.home-mode .settings-button {
  width: min(4.6vh, 7.2vw);
  font-size: clamp(16px, 2.8vh, 22px);
}
.home-mode .brand { margin-top: 0; text-shadow: none; }
.home-mode .brand .eyebrow { display: none; }
.home-mode h1 {
  margin: 0;
  font-family: var(--chalk-font);
  font-size: clamp(34px, 8.4vh, 88px);
  font-weight: 700;
  letter-spacing: -.06em;
  color: #f5f3ec;
  text-shadow: 1px 1px 0 rgba(40, 40, 40, .35);
  transform: none;
}
.home-mode h1 span { color: inherit; text-shadow: inherit; }
.home-mode #tagline { display: none; }
.home-mode .best-line {
  position: static;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 1.2vh 0 0;
  gap: .55em;
  font-family: var(--chalk-font);
  font-size: clamp(15px, 3.7vh, 36px);
  color: #f1efe8;
  text-shadow: none;
  white-space: nowrap;
}
.home-mode .best-line strong {
  font-family: inherit;
  font-size: 1.15em;
  color: #f1efe8;
}
.chalk-play-button {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; top: 39%;
  width: min(19vh, 28vw);
  aspect-ratio: 1;
  margin-inline: auto;
  background: url("assets/chalk-play.webp") center/contain no-repeat;
  cursor: pointer;
  transition: transform .12s;
}
@media (hover: hover) and (pointer: fine) {
  .chalk-play-button:hover { transform: scale(1.05); }
}
.chalk-play-button:active { transform: scale(.96); }
.chalk-play-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#startButton.chalk-play-button { animation: play-breathe 2s ease-in-out infinite; }
#startButton.chalk-play-button:hover,
#startButton.chalk-play-button:active { animation: none; }

.home-mode .brand { position: relative; width: 100%; z-index: 2; }
.home-mode .home-mascot {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 30%;
  width: min(11vh, 18vw);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.chalk-doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--chalk-font);
  color: #fff;
}
.chalk-doodles .doodle {
  position: absolute;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .16);
  animation: doodle-float 8s ease-in-out infinite;
}
.chalk-doodles .d1 { top: 17%; left: 8%; font-size: clamp(22px, 4.4vh, 42px); --tilt: -12deg; }
.chalk-doodles .d2 { top: 14%; right: 9%; font-size: clamp(20px, 4vh, 38px); animation-duration: 8.2s; --tilt: 9deg; }
.chalk-doodles .d3 { top: 47%; left: 6%; font-size: clamp(24px, 4.8vh, 46px); animation-duration: 6.4s; --tilt: 14deg; }
.chalk-doodles .d4 { top: 44%; right: 7%; font-size: clamp(22px, 4.6vh, 44px); animation-duration: 7.6s; --tilt: -8deg; }
.chalk-doodles .d5 { top: 63%; left: 10%; font-size: clamp(20px, 4vh, 36px); animation-duration: 9s; --tilt: 6deg; }
.chalk-doodles .d6 { top: 66%; right: 11%; font-size: clamp(18px, 3.6vh, 34px); animation-duration: 8.8s; --tilt: -14deg; }
.chalk-doodles .d7 { top: 28%; left: 5%; font-size: clamp(18px, 3.8vh, 34px); animation-duration: 6.8s; --tilt: 18deg; }
.chalk-doodles .d8 { bottom: 24%; left: 12%; font-size: clamp(13px, 2.4vh, 22px); animation-duration: 9.4s; --tilt: -4deg; }
.chalk-doodles .d9 { bottom: 22%; right: 11%; font-size: clamp(14px, 2.6vh, 24px); animation-duration: 7.2s; --tilt: 8deg; }
.chalk-doodles .d10 { top: 72%; left: 22%; font-size: clamp(12px, 2.2vh, 20px); animation-duration: 8s; --tilt: -10deg; }

@keyframes play-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, -8deg)); }
  50% { transform: translateY(-9px) rotate(var(--tilt, -8deg)); }
}

.tutorial-screen { padding: 5% 8% 4.5%; color: #f3f1e9; font-family: var(--chalk-font); }
.tutorial-content { width: 100%; height: 100%; }
.tutorial-content h2 {
  margin: 0 0 2.5%;
  text-align: center;
  font-size: clamp(24px, 7vh, 68px);
  font-weight: 700;
  text-shadow: 0 0 2px white;
  transform: rotate(-1deg);
}
.tutorial-list { width: 88%; margin: 0 auto; display: grid; gap: 1.3vh; }
.tutorial-row { min-height: 9vh; display: grid; grid-template-columns: 6% 1fr 21%; align-items: center; gap: 2%; }
.tutorial-row p { margin: 0; font-size: clamp(13px, 2.8vh, 29px); font-weight: 700; line-height: 1.4; text-shadow: 0 0 1px white; }
.chalk-number { display: grid; place-items: center; width: 5vh; aspect-ratio: 1; border: .35vh solid #eee; border-radius: 50%; font-size: clamp(13px, 2.7vh, 27px); font-weight: 800; }
.tutorial-row img { justify-self: center; width: min(9vh, 7vw); filter: saturate(.8); }
.mini-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; }
.mini-keys b { display: grid; place-items: center; aspect-ratio: 1; border: .25vh solid #eee; border-radius: .7vh; font-size: clamp(10px, 2.2vh, 21px); }
.time-penalty { justify-self: center; font: 800 clamp(22px, 5vh, 48px)/1 var(--chalk-font); color: #ff9c83; transform: rotate(-5deg); }
.tutorial-goal { margin: 2.2vh 0 0; text-align: center; color: #ffe88d; font-size: clamp(14px, 3vh, 30px); font-weight: 800; }
.tutorial-play { top: auto; bottom: 5%; width: min(13vh, 8vw); }

.countdown-screen { justify-content: center; padding: 0; }
.countdown-number {
  font: 700 clamp(90px, 34vh, 340px)/1 var(--chalk-font);
  color: #f5f3ec;
  text-shadow: 0 0 3px white, 3px 4px 0 rgba(255,255,255,.18);
  transform: rotate(-3deg);
}
.countdown-number.pop { animation: chalk-count .72s cubic-bezier(.2,.8,.25,1); }
@keyframes chalk-count {
  0% { opacity: 0; transform: scale(.25) rotate(-12deg); filter: blur(7px); }
  35% { opacity: 1; transform: scale(1.22) rotate(3deg); filter: blur(0); }
  72% { transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(1.12) rotate(-2deg); }
}

/* Play layout: header / stars / question / choices inside the wooden frame */
.play-mode .play-screen {
  display: grid;
  grid-template-columns: max-content 1fr auto;
  grid-template-rows: auto auto auto minmax(2.8em, .28fr) auto auto minmax(0, .72fr);
  grid-template-areas:
    "level . close"
    "timer timer timer"
    "stars stars stars"
    ". . ."
    "question question question"
    "choices choices choices"
    ". . .";
  align-items: center;
  padding: 11% 10% 13%;
  gap: 1.4% 2.4%;
  color: #f4f2eb;
  font-family: var(--chalk-font);
}
.chalk-level { display: none; }
.play-mode .chalk-level {
  display: block;
  grid-area: level;
  position: static;
  left: auto;
  top: auto;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(20px, 4.4cqh, 36px);
  font-weight: 700;
  transform: rotate(-2deg);
  text-shadow: 0 0 2px white;
}
.chalk-timer { display: none; }
.play-mode .chalk-timer {
  display: block;
  grid-area: timer;
  position: static;
  left: auto;
  top: auto;
  justify-self: center;
  width: min(78%, 22em);
  min-width: 0;
  height: clamp(16px, 3.4cqh, 30px);
  padding: .28em;
  border: .22em solid #eee;
  border-radius: .45em;
  box-shadow: 0 0 2px white;
}
.chalk-timer div {
  height: 100%;
  width: 100%;
  background: #f2f0e8;
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
  box-shadow: 0 0 5px white;
}
.chalk-close { display: none; }
.play-mode .chalk-close {
  display: grid;
  place-items: center;
  grid-area: close;
  position: static;
  right: auto;
  top: auto;
  width: clamp(48px, 7.6cqh, 68px);
  min-width: 48px;
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  color: #f3f1e9;
  font: 800 clamp(34px, 6.4cqh, 54px)/1 var(--chalk-font);
  cursor: pointer;
  text-shadow: 0 0 2px white;
}
.chalk-stars { display: none; }
.play-mode .chalk-stars {
  display: flex;
  grid-area: stars;
  position: static;
  top: auto;
  left: auto;
  justify-self: center;
  transform: none;
  gap: .18em;
  color: #b4a83c;
  font: 400 clamp(22px, 5cqh, 40px)/1 system-ui, sans-serif;
}
.chalk-stars span.filled { color: #ffe65b; text-shadow: 0 0 9px #e8b92d; transform: scale(1.08); }
.play-mode .question-card {
  grid-area: question;
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  margin: 0;
  display: grid;
  place-items: center;
  background: none;
}
.play-mode .question {
  width: 100%;
  font-family: var(--chalk-font);
  font-size: clamp(42px, 11cqw, 86px);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 3px white;
  transform: rotate(-1deg);
}
.play-mode .question::after { content: " = ?"; }
.play-mode .feedback { right: 8%; bottom: 8%; font-family: var(--chalk-font); }
.answer-choices { display: none; }
.play-mode .answer-choices {
  display: grid;
  grid-area: choices;
  position: static;
  top: auto;
  left: auto;
  justify-self: center;
  width: 100%;
  max-width: 22em;
  transform: none;
  justify-content: center;
  gap: clamp(1.2em, 7cqw, 2.6em) clamp(1.6em, 8.5cqw, 3.2em);
  margin-top: 1.2em;
  padding-bottom: 0;
}
.play-mode .answer-choices[data-count="3"] { grid-template-columns: repeat(3, auto); }
.play-mode .answer-choices[data-count="4"] { grid-template-columns: repeat(2, auto); }
.choice-button {
  width: clamp(54px, 12cqh, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(205,205,205,.24);
  color: #f6f4ed;
  font: 700 clamp(22px, 4.8cqh, 40px)/1 var(--chalk-font);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  text-shadow: 0 0 3px white;
  box-shadow: inset 0 0 0 .25vh rgba(255,255,255,.07);
  transition: transform .08s ease-out, background .08s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .choice-button:hover { background: rgba(235,235,235,.34); transform: scale(1.05); }
}
.choice-button:active { transform: scale(.92); }
.choice-button { position: relative; }
.choice-button.is-correct,
.choice-button.is-wrong { color: transparent; text-shadow: none; transform: scale(1.05); }
.choice-button.is-correct::after,
.choice-button.is-wrong::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 1000 clamp(35px, 7vh, 68px)/1 system-ui, sans-serif;
  animation: answer-mark .45s cubic-bezier(.2,.9,.25,1);
}
.choice-button.is-correct { background: rgba(63, 204, 117, .22); box-shadow: inset 0 0 0 .45vh #52e58a, 0 0 2vh rgba(82,229,138,.4); }
.choice-button.is-correct::after { content: "✓"; color: #63ee98; }
.choice-button.is-wrong { background: rgba(235, 61, 73, .22); box-shadow: inset 0 0 0 .45vh #f04d59, 0 0 2vh rgba(240,77,89,.42); }
.choice-button.is-wrong::after { content: "×"; color: #f04d59; }
@keyframes answer-mark {
  0% { opacity: 0; transform: scale(.25) rotate(-15deg); }
  55% { opacity: 1; transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.choice-button[hidden] { display: none; }
.choice-button[data-digits="4"] { font-size: clamp(19px, 3.4vh, 34px); }
.choice-button[data-digits="5"] { font-size: clamp(16px, 2.8vh, 28px); }

.level-transition {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(7, 7, 7, .56);
  color: #f7f4e9;
  font-family: var(--chalk-font);
  overflow: hidden;
  animation: level-overlay-in .2s ease-out;
}
.level-transition[hidden] { display: none; }
.level-transition::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 120%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,91,.34) 0, rgba(255,226,91,.12) 22%, transparent 58%);
  transform: translate(-50%, -50%) scale(.2);
  animation: level-flash .75s ease-out forwards;
}
.level-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3.2vh 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(25, 25, 24, .96);
  border-top: .35vh solid rgba(248,246,237,.82);
  border-bottom: .35vh solid rgba(248,246,237,.82);
  overflow: hidden;
  box-shadow: 0 0 2.2vh rgba(255,229,104,.28), 0 2vh 5vh rgba(0,0,0,.55);
  transform: none;
  animation: level-card-pop .52s cubic-bezier(.18,.9,.25,1.2);
}
.level-card::before {
  content: "";
  position: absolute;
  top: -80%; left: -35%;
  width: 22%; height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,244,183,.6), transparent);
  transform: rotate(18deg);
  animation: level-shine .72s .18s ease-in-out forwards;
}
.level-transition strong {
  position: relative;
  z-index: 1;
  color: #ffe88b;
  font-size: clamp(34px, 6.5vh, 64px);
  text-shadow: 0 0 1.4vh rgba(255,232,139,.42);
  white-space: nowrap;
  animation: level-text-pop .58s .08s cubic-bezier(.2,.9,.25,1.25) both;
}
@keyframes level-overlay-in { from { opacity: 0; } }
@keyframes level-card-pop {
  0% { opacity: 0; clip-path: inset(48% 50%); transform: scale(.82); }
  48% { opacity: 1; clip-path: inset(0 0); transform: scale(1.055); }
  72% { transform: scale(.985); }
  100% { clip-path: inset(0 0); transform: scale(1); }
}
@keyframes level-text-pop {
  0% { opacity: 0; transform: translateY(2.5vh) scale(.5); letter-spacing: -.08em; }
  62% { opacity: 1; transform: translateY(-.35vh) scale(1.1); }
  100% { transform: translateY(0) scale(1); letter-spacing: normal; }
}
@keyframes level-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes level-shine {
  from { left: -35%; opacity: 0; }
  25% { opacity: 1; }
  to { left: 120%; opacity: 0; }
}

/* Chalkboard pause menu */
.play-mode .pause-overlay {
  background: rgba(8, 8, 8, .78);
}
.play-mode .pause-panel {
  position: relative;
  width: min(52%, 720px);
  min-height: 54%;
  padding: 6% 6% 5%;
  gap: 3vh;
  justify-content: center;
  background: rgba(24, 24, 24, .9);
  border: .55vh solid rgba(245, 243, 235, .88);
  border-radius: 1.5vh;
  box-shadow: 0 0 0 .25vh rgba(255,255,255,.2), 0 2vh 5vh rgba(0,0,0,.45);
  color: #f5f3eb;
  font-family: var(--chalk-font);
  transform: rotate(-.35deg);
}
.play-mode .pause-panel::before,
.play-mode .pause-panel::after {
  content: "";
  position: absolute;
  width: 18%; height: .45vh;
  background: rgba(255,255,255,.28);
  top: 18%;
}
.play-mode .pause-panel::before { left: 8%; transform: rotate(3deg); }
.play-mode .pause-panel::after { right: 8%; transform: rotate(-3deg); }
.play-mode .pause-panel h2 {
  margin: 0 0 1vh;
  color: #f7f5ee;
  font-family: inherit;
  font-size: clamp(40px, 7.6cqh, 76px);
  font-weight: 700;
  text-shadow: 0 0 2px white;
  transform: rotate(-1deg);
}
.play-mode .pause-panel .asset-button {
  width: 72%;
  min-height: 10vh;
  background-image: none;
  border: .45vh solid currentColor;
  border-radius: 999px;
  font-family: inherit;
  font-size: clamp(22px, 4.2cqh, 42px);
  color: #f5f3eb;
  text-shadow: 0 0 2px white;
  box-shadow: inset 0 0 0 .2vh rgba(255,255,255,.12);
}
.play-mode .pause-panel .primary {
  color: #fff09a;
  background: rgba(236, 199, 55, .1);
}
.play-mode .pause-panel .secondary {
  color: #d1d0ca;
  background: rgba(255,255,255,.035);
}
@media (hover: hover) and (pointer: fine) {
  .play-mode .pause-panel .asset-button:hover { filter: brightness(1.08); }
}
.play-mode .pause-panel .asset-button:active { transform: scale(.96); }

/* 16:9 chalkboard result and grade */
.grade-line, .result-level { display: none; }
.result-mode .result-screen {
  justify-content: flex-start;
  padding: 5% 7% 4%;
  gap: 0;
  color: #f4f2eb;
  font-family: var(--chalk-font);
}
.result-mode .result-panel {
  width: 100%; min-height: 0;
  padding: 0;
  background: none;
  color: inherit;
}
.result-mode .result-panel .eyebrow { display: none; }
.result-mode .result-panel h2 {
  margin: 0;
  color: #f4f2eb;
  font-family: inherit;
  font-size: clamp(25px, 7vh, 68px);
  font-weight: 700;
  text-shadow: 0 0 2px white;
  transform: rotate(-1deg);
}
.result-mode .result-score-label {
  position: absolute;
  left: 35%; top: 30%;
  color: #f4f2eb;
  font-size: clamp(16px, 4vh, 39px);
}
.result-mode .result-score {
  position: absolute;
  left: 55%; top: 27%;
  color: #f4f2eb;
  font-family: inherit;
  font-size: clamp(30px, 8vh, 78px);
  text-shadow: 0 0 2px white;
}
.result-mode .grade-line {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  position: absolute;
  left: 74%; top: 31%;
  flex-direction: column;
  font-size: clamp(18px, 4.3vh, 42px);
}
.result-mode .grade-line strong {
  display: grid;
  place-items: center;
  width: min(11vh, 7vw); aspect-ratio: 1;
  border: .5vh solid currentColor;
  border-radius: 50%;
  font-size: 1.55em;
  transform: rotate(-7deg);
  color: #ffe66e;
}
.result-mode .result-level {
  display: block;
  position: absolute;
  left: 30%; top: 62%;
  font-size: clamp(16px, 4vh, 39px);
}
.result-mode .result-stats {
  position: absolute;
  left: 30%; top: 40%;
  width: 39%; height: 18%;
  margin: 0;
  color: #f4f2eb;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1vh;
}
.result-mode .result-stats div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 2vw; }
.result-mode .result-stats div:nth-child(3) { display: none; }
.result-mode .result-stats strong { min-width: 8vw; text-align: left; font-family: inherit; font-size: clamp(17px, 4vh, 39px); }
.result-mode .result-stats span { order: 2; min-width: 20vw; text-align: right; color: #f4f2eb; font-size: clamp(12px, 3.2vh, 31px); }
.result-mode .new-best { position: absolute; left: 50%; top: 81%; transform: translateX(-50%); margin: 0; color: #ffe66e; }
.result-mode #retryButton,
.result-mode #homeButton {
  position: absolute;
  bottom: 5%;
  width: 13%; min-height: 11vh;
  background-image: url("assets/chalk-play.webp");
  background-size: contain;
  filter: none;
}
.result-mode #homeButton { left: 35%; transform: rotate(180deg); }
.result-mode #retryButton { right: 35%; }
.result-mode #homeButton span,
.result-mode #retryButton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Shared portrait UI for phones and the desktop 3:4 board */
.home-mode .start-screen { padding: 8% 7% 7%; }
.home-mode .board-tools,
.tutorial-mode .board-tools {
  top: max(3.8%, calc(env(safe-area-inset-top, 0px) + 8px));
  left: max(4.5%, calc(env(safe-area-inset-left, 0px) + 8px));
  gap: .5em;
}
.home-mode .language-button,
.tutorial-mode .language-button,
.home-mode .settings-button {
  width: clamp(40px, 6.2vh, 52px);
  width: clamp(40px, 6.2cqh, 52px);
  font-size: clamp(18px, 3vh, 26px);
}
.home-mode h1 { margin-top: 4.5vh; font-size: clamp(48px, 9cqh, 96px); }
.home-mode .home-mascot {
  left: 7%;
  top: 30%;
  width: min(12vh, 22vw);
  width: min(12cqh, 22cqw);
  height: auto;
}
.home-mode .best-line { font-size: clamp(22px, 4.2cqh, 40px); }
.chalk-play-button { top: 38%; width: min(20vh, 36vw); width: min(20cqh, 36cqw); }
.chalk-doodles .d1 { top: 19%; left: 9%; }
.chalk-doodles .d2 { top: 18%; right: 10%; }
.chalk-doodles .d3 { top: 49%; left: 7%; }
.chalk-doodles .d4 { top: 48%; right: 8%; }
.chalk-doodles .d8 { bottom: 21%; left: 11%; }
.chalk-doodles .d9 { bottom: 20%; right: 10%; }
.chalk-doodles .d10 { top: 74%; left: 18%; }

.tutorial-screen { padding: 10% 8% 7%; }
.tutorial-content h2 { margin-top: 2vh; margin-bottom: 3.2vh; font-size: clamp(36px, 6.4cqh, 64px); }
.tutorial-list { width: 100%; gap: 2.4vh; }
.tutorial-row { min-height: 12vh; grid-template-columns: 12% 1fr 18%; gap: 3%; }
.tutorial-row p { font-size: clamp(16px, 2.8cqh, 26px); line-height: 1.5; }
.chalk-number { width: 5.2vh; font-size: clamp(16px, 2.6cqh, 24px); }
.mini-keys { grid-template-columns: repeat(2, 1fr); }
.tutorial-row img { width: min(7vh, 13vw); }
.tutorial-goal { margin-top: 3.4vh; font-size: clamp(18px, 3.1cqh, 28px); line-height: 1.45; }
.tutorial-play { top: auto; bottom: 4%; width: min(11vh, 21vw); width: min(11cqh, 21cqw); }

.countdown-number { font-size: clamp(110px, 24vh, 240px); }

.play-mode .pause-panel { width: 84%; min-height: 43%; padding: 10% 7%; gap: 2.5vh; }

@media (orientation: portrait), (max-width: 767px) {
  .game-shell,
  .game-shell.home-mode,
  .game-shell.tutorial-mode,
  .game-shell.countdown-mode,
  .game-shell.play-mode,
  .game-shell.result-mode {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    transform: none;
    box-shadow: none;
  }
}

/* Wider 3:4 canvas on desktop and larger tablets */
@media (min-width: 768px) and (min-aspect-ratio: 4/3) {
  .game-shell,
  .game-shell.home-mode,
  .game-shell.tutorial-mode,
  .game-shell.countdown-mode,
  .game-shell.play-mode,
  .game-shell.result-mode {
    width: min(100%, calc(var(--app-h) * 3 / 4));
    height: var(--app-h);
    max-height: 100%;
    box-shadow: 0 18px 48px rgba(72, 48, 24, .28), 0 3px 10px rgba(60, 40, 20, .16);
    background-image: var(--board-image);
    background-size: 100% 100%;
  }

  .tutorial-list { width: 90%; }
}

/* Polished result layout */
.result-mode .result-screen { padding: 8% 8% 6%; justify-content: flex-start; }
.result-mode .result-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "title title" "grade score" "stats stats" "level level" "best best";
  align-items: center;
  gap: 2.4vh 5%;
  width: 100%;
  min-height: 72%;
  padding: 2vh 4% 3vh;
}
.result-mode .result-panel h2 {
  grid-area: title;
  position: static;
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 5.6cqh, 58px);
  line-height: 1.25;
}
.result-mode .grade-line {
  grid-area: grade;
  position: static;
  transform: none;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: .8vh;
  font-size: clamp(18px, 2.8cqh, 28px);
}
.result-mode .grade-line strong { width: min(10vh, 19vw); font-size: clamp(42px, 7cqh, 68px); }
.result-mode .result-score-group { grid-area: score; justify-self: center; text-align: center; }
.result-mode .result-score-label,
.result-mode .result-score {
  position: static;
  margin: 0;
  color: #f4f2eb;
  font-family: inherit;
  text-shadow: 0 0 2px white;
}
.result-mode .result-score-label { font-size: clamp(18px, 2.8cqh, 28px); }
.result-mode .result-score { margin-top: .5vh; font-size: clamp(48px, 8cqh, 80px); }
.result-mode .result-stats {
  grid-area: stats;
  position: static;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4vh 4%;
  margin: 0;
}
.result-mode .result-stats div {
  min-height: 7.5vh;
  padding: 1.2vh 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45vh;
  border: .25vh solid rgba(255,255,255,.28);
  border-radius: 1.2vh;
  background: rgba(255,255,255,.045);
}
.result-mode .result-stats div:nth-child(3) { display: none; }
.result-mode .result-stats strong,
.result-mode .result-stats span { min-width: 0; order: initial; text-align: center; }
.result-mode .result-stats strong { font-size: clamp(24px, 4cqh, 40px); }
.result-mode .result-stats span { font-size: clamp(13px, 2.1cqh, 22px); color: #d5d2ca; }
.result-mode .result-level {
  grid-area: level;
  position: static;
  justify-self: center;
  padding: .8vh 6%;
  border-bottom: .3vh solid rgba(255,255,255,.5);
  font-size: clamp(18px, 2.9cqh, 30px);
}
.result-mode .new-best {
  grid-area: best;
  position: static;
  transform: none;
  justify-self: center;
  min-height: 1.5em;
  margin: 0;
  padding: .5vh 5%;
  border-radius: 999px;
  color: #ffe466;
  background: rgba(255,228,102,.08);
  font-size: clamp(13px, 2vh, 20px);
  white-space: nowrap;
}
.result-mode .new-best:empty { visibility: hidden; }
.result-mode #homeButton,
.result-mode #retryButton { bottom: 4.5%; width: min(10vh, 19vw); min-height: 0; aspect-ratio: 1; }
.result-mode #homeButton { left: 25%; }
.result-mode #retryButton { right: 25%; }

@media (min-width: 768px) and (min-aspect-ratio: 4/3) {
  .result-mode .result-panel { width: 88%; gap: 2vh 7%; }
  .result-mode .result-stats { gap: 1.2vh 5%; }
  .result-mode #homeButton { left: 30%; }
  .result-mode #retryButton { right: 30%; }
}