@import url("font-system.css");

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f4f0e5 url("assets/shared/BENGAL_CIRCULAR_GARDEN_BACKGROUND_V2.png") center / cover fixed;
  color: #33453e;
  font: 400 16px/1.5 var(--font-ui);
  font-synthesis: none;
}
body::before { content: ""; position: fixed; z-index: 0; inset: 0; background: #f8f5e8c9; pointer-events: none; }
.app { position: relative; z-index: 1; width: min(100%, 520px); min-height: 100vh; margin: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
header,.toolbar,nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h1 { margin: 0; color: #496957; font: 600 22px/1.2 var(--font-zh); }
small { color: #7c8c7c; }
button { padding: 12px; border: 1px solid #dfe5d9; border-radius: 14px; color: #496957; background: #fffdf6; font: 500 15px/1.2 var(--font-ui); cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(2px); }
.toolbar strong { color: #b97441; font: 500 25px/1.1 var(--font-math); font-variant-numeric: tabular-nums; }
.toolbar label { font: 500 13px/1.2 var(--font-ui); }
article { min-height: 280px; flex: 1; padding: 22px; border: 1px solid #e4e3d7; border-radius: 28px; display: grid; place-content: center; justify-items: center; gap: 16px; background: #fffdf6ed; box-shadow: 0 12px 32px rgba(79,88,54,.12),0 2px 6px rgba(97,81,46,.08); }
#problem { width: 100%; min-width: 0; color: #294B3A; font: 400 42px/1.15 var(--font-math); font-variant-numeric: lining-nums tabular-nums; text-align: center; display: flex; align-items: center; justify-content: center; gap: .18em; flex-wrap: wrap; }
.answer-slot { min-width: 1.3em; color: #286C68; font: 500 1.035em/1.15 var(--font-math); text-align: center; transform-origin: center; }
.answer-slot.pulse { animation: answer-in 150ms ease-out; }
@keyframes answer-in { from { transform: scale(1.08); } to { transform: scale(1); } }
nav button { flex: 1; min-height: 48px; }
#keys { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
#keys button { min-height: 52px; font: 500 20px/1 var(--font-math); font-variant-numeric: lining-nums tabular-nums; }
#keys.compare { grid-template-columns: repeat(3,1fr); }
#keys.compare button { font-size: 28px; }
#finishSkipped { color: white; background: #6e9a89; }
#summary { font: 500 18px/1.8 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
#records { padding-left: 28px; font: 400 15px/1.8 var(--font-math); font-variant-numeric: lining-nums tabular-nums; }
#records li.wrong,#records li.unanswered { color: #a46d46; }

/* Explicit per-type equation layouts. */
#problem.equation { width: 100%; max-width: 100%; min-width: 0; min-height: 1.35em; align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center; gap: .18em; flex-wrap: nowrap; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; line-height: 1.15; overflow: visible; font-family: var(--font-math); font-weight: 400; color: var(--math-ink); }
#problem.equation.direct { font-size: 58px; }
#problem.equation.multi { font-size: 42px; }
#problem.equation.direct,#problem.equation.multi { gap: .1em; }
#problem.equation.direct.is-long { font-size: 50px; }
#problem.equation.multi.is-long { font-size: 38px; gap: .06em; }
#problem.equation.compare { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; justify-items: center; align-content: center; gap: 2px; min-height: 3.2em; font-size: 58px; line-height: 1.04; white-space: normal; }
#problem .compare-side { display: block; max-width: 100%; font-size: 1em; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; line-height: 1.06; }
#problem .compare-side.is-long { font-size: 52px; }
#problem.compare .answer-slot { width: .95em; min-width: .95em; height: .92em; min-height: .92em; border: 2px solid #6d9b8a; border-radius: 9px; display: grid; place-items: center; color: var(--answer-teal); font-size: .9em; line-height: 1; }
#problem.equation.direct .answer-slot,#problem.equation.multi .answer-slot { width: 1.3em; min-width: 1.3em; height: auto; min-height: 0; border: 0; border-radius: 0; display: inline-block; font-size: 1.035em; line-height: inherit; }
@media (max-width: 389px) { .app { padding: 12px; } .toolbar { flex-wrap: wrap; } article { min-height: 230px; } #problem.equation.direct { font-size: 58px; } #problem.equation.direct.is-long { font-size: 46px; } #problem.equation.multi.is-long { font-size: 34px; } #problem.equation.compare { font-size: 54px; } }
@media (min-width: 390px) { #problem.equation.direct { font-size: 58px; } #problem.equation.compare { font-size: 58px; } }
@media (min-width: 430px) { #problem.equation.direct { font-size: 58px; } #problem.equation.compare { font-size: 58px; } }
@media (max-width: 380px) { #problem .compare-side.is-long { font-size: 52px; } }

/* UI Kit V2 skin layer: no game rules or sizing of the accepted equation tiers. */
.app:has(#game:not([hidden])) .home-header,
.app:has(#result:not([hidden])) .home-header,
.app:has(#emptyWrong:not([hidden])) .home-header { display: none; }
.home-header { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.brand-lockup { width: min(100%, 390px); aspect-ratio: 2.5 / 1; padding: 12px 24px; display: grid; align-content: center; justify-items: center; background: url("assets/ui-kit-v2/panels/plaque_title.png") center / 100% 100% no-repeat; }
.brand-lockup h1 { color: var(--ui-forest); font: 700 clamp(28px, 8vw, 38px)/1.2 var(--font-zh); }
.brand-lockup small,.home-note { color: #788b73; font-size: 14px; }
.home-mascot { width: min(68vw, 260px); height: min(35vh, 250px); object-fit: contain; filter: drop-shadow(0 8px 8px rgba(89,76,48,.12)); }
.home-actions { width: min(100%, 360px); display: grid; justify-items: center; gap: 8px; }
.home-actions .kit-button { width: min(100%, 330px); }
.home-note { margin: 0; }
#game { min-height: 100vh; min-height: 100svh; padding: max(12px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.toolbar { min-height: 48px; gap: 6px; }
.toolbar strong { padding: 7px 10px; border: 1px solid #f0d5a5; border-radius: 15px; background: #fff3dd; font-family: var(--font-math); font-weight: 500; }
.toolbar label { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--ui-forest); font-size: 13px; }
.toolbar input { accent-color: var(--ui-garden); width: 18px; height: 18px; }
article.kit-question-panel { flex: 0 0 auto; min-height: clamp(300px, 38svh, 330px); height: auto; padding: 16px 18px 14px; display: grid; grid-template-rows: minmax(180px, auto); justify-items: center; align-items: center; }
#problem.equation { max-width: 100%; }
nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
nav .kit-button { min-width: 0; min-height: 48px; padding: 8px 5px; gap: 3px; font-size: 12px; white-space: nowrap; }
nav .kit-icon { width: 17px; height: 17px; }
#keys { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#keys button { min-height: 48px; border: 1px solid #d6dfca; border-radius: 15px; color: var(--ui-forest); background: rgba(255,253,248,.96); box-shadow: 0 3px 0 rgba(84,115,76,.14); font-family: var(--font-math); font-size: 21px; font-weight: 500; touch-action: manipulation; }
#keys button:active { transform: translateY(2px); background: #eaf3df; }
#keys.compare button { color: #286c68; font-size: 28px; }
#result { min-height: 100vh; min-height: 100svh; padding: max(12px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.result-mascot { position: relative; height: 190px; width: min(100%,280px); display: grid; place-items: center; }
.result-mascot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.result-mascot .result-decoration { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: auto; max-height: none; }
.result-mascot .result-cat { position: relative; z-index: 1; width: 176px; height: 176px; }
#result h2 { margin: 0; color: #72512c; font: 700 30px/1.2 var(--font-zh); }
.result-stats-card { width: 100%; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; color: var(--ui-forest); }
.result-stat { min-height: 70px; padding: 8px 6px; display: grid; align-content: center; gap: 2px; border-bottom: 1px solid rgba(214, 190, 127, .28); }
.result-stat:nth-child(odd):not(.result-stat-unanswered) { border-right: 1px solid rgba(214, 190, 127, .28); }
.result-stat small { color: #778473; font: 500 12px/1.3 var(--font-zh); }
.result-stat strong { color: var(--ui-forest); font: 500 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.result-stat-unanswered { grid-column: 1 / -1; border-bottom: 0; }
#result .kit-button { width: min(100%,360px); }
#records { width: 100%; max-height: 35svh; overflow: auto; padding: 16px 20px; text-align: left; }
#recordsToggle,#resultWrongTraining { justify-content: center; }
#emptyWrong { padding: 18px; text-align: center; color: var(--ui-forest); }
.storage-notice { margin: 0; padding: 10px 12px; border: 1px solid #e5c88e; border-radius: 14px; background: #fff6df; color: #76552c; font: 500 13px/1.5 var(--font-zh); }
.challenge-home-link { display: inline-flex; min-height: 44px; align-items: center; padding: 0 8px; color: var(--ui-forest); font: 500 13px/1.2 var(--font-zh); text-decoration: none; white-space: nowrap; }
.challenge-home-link:focus-visible { outline: 2px solid #86a983; outline-offset: 2px; border-radius: 8px; }
@media (max-width: 380px) {
  .home-header { min-height: calc(100svh - 24px); gap: 12px; }
  .home-mascot { height: min(31vh,220px); }
  nav .kit-button { font-size: 10px; }
  article.kit-question-panel { min-height: 300px; padding: 14px 12px; }
  .brand-lockup { padding-inline: 16px; }
  .brand-lockup h1 { font-size: clamp(26px, 7.4vw, 30px); }
  .result-stats-card { padding: 8px; }
}
#game[hidden], #result[hidden] { display: none !important; }