:root { color-scheme: light; font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; background:#eef0ff; color:#161932; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 85% 5%,#dcd8ff 0,transparent 35%),#eef0ff; }
.streak-effects{position:fixed;z-index:50;inset:0;overflow:hidden;pointer-events:none}
.streak-spark{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:var(--color);box-shadow:0 0 12px var(--color);animation:spark-burst var(--duration) cubic-bezier(.16,.75,.35,1) forwards}
.speed-line{position:absolute;left:var(--x);top:var(--y);width:var(--length);height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--color));transform:rotate(var(--angle));transform-origin:right center;animation:speed-flash var(--duration) ease-out forwards}
.streak-hit{animation:streak-shake var(--shake-duration) cubic-bezier(.36,.07,.19,.97)}
@keyframes streak-shake{0%,100%{transform:translate(0) scale(1)}15%{transform:translate(calc(var(--shake)*-1),0) rotate(-2deg) scale(1.04)}30%{transform:translate(var(--shake),-2px) rotate(2deg)}45%{transform:translate(calc(var(--shake)*-.7),1px) rotate(-1deg)}60%{transform:translate(calc(var(--shake)*.7),-1px) rotate(1deg)}80%{transform:translate(calc(var(--shake)*-.35),0)}}
@keyframes spark-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25)}}
@keyframes speed-flash{0%{opacity:0;transform:rotate(var(--angle)) translateX(-25px) scaleX(.25)}20%{opacity:.9}100%{opacity:0;transform:rotate(var(--angle)) translateX(45px) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.streak-spark,.speed-line,.streak-hit{animation:none!important}.streak-effects{display:none}}
button,input,select { font:inherit; }
button { min-height:52px; border:0; border-radius:16px; padding:0 24px; color:#fff; background:#5046e5; font-weight:750; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:active { transform:scale(.98); }
.page { width:min(100%,900px); height:100dvh; min-height:0; overflow:hidden; margin:auto; padding:calc(58px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(226px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:8px; }
header,.topic-row,.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
header { position:relative; }
h1 { margin:2px 0 0; font-size:clamp(36px,7vw,54px); letter-spacing:-.04em; }
.eyebrow { margin:0; color:#6259d9; font-weight:800; }
.icon-button { width:54px; padding:0; color:#312e81; background:#ffffffb8; font-size:24px; }
.refresh-button { position:fixed; z-index:10; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); min-width:48px; min-height:34px; padding:0 10px; border-radius:10px; color:#656981; background:#ffffffaa; font-size:13px; box-shadow:0 3px 12px #27336b18; }
.progress { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; color:#4b506b; font-weight:700; text-align:center; }
.progress span { padding:7px 5px; border-radius:10px; background:#ffffff8c; font-size:13px; }
.level-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.chapter-progress { padding:14px 16px; border-radius:16px; background:#fff9; }
.chapter-progress header { margin-bottom:9px; font-size:14px; font-weight:800; }
.pips { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pip { height:9px; border-radius:99px; background:#d9daf0; }
.pip.on { background:linear-gradient(90deg,#756cf4,#5046e5); }
.boss-badge { padding:7px 12px; border-radius:999px; color:#fff; background:#bd2c2c; font-weight:900; letter-spacing:.08em; }
.focus-hud { position:fixed; z-index:9; inset:0 0 auto 0; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; width:100%; margin:0; padding:calc(9px + env(safe-area-inset-top)) 58px 9px 12px; border:0; border-radius:0 0 16px 16px; background:#ffffffd9; box-shadow:0 5px 22px #27336b0d; backdrop-filter:blur(16px); }
.boss-progress-track { height:10px; overflow:hidden; border-radius:999px; background:#dddff0; }
.boss-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#756cf4,#5046e5,#f09b3d); transition:width .45s ease; }
#bossProgressText { color:#6b6f84; font-size:12px; white-space:nowrap; }
#scoreMini { min-width:54px; color:#5046e5; font-size:14px; text-align:right; white-space:nowrap; }
.focus-hud .boss-badge { grid-column:1/-1; justify-self:center; padding:4px 10px; font-size:12px; }
.card { flex:1; min-height:0; padding:clamp(18px,4vw,38px); border:1px solid #ffffff; border-radius:28px; background:linear-gradient(165deg,#ffffff 0%,#fcfcff 100%); box-shadow:0 18px 55px #27336b12; display:flex; flex-direction:column; }
.play-area { flex:1; min-height:0; position:relative; display:flex; }
.play-area .card { width:100%; }
.question-panel{min-width:0;min-height:0;display:flex;flex:1;flex-direction:column;justify-content:center}
.inventory { position:absolute; z-index:3; right:-18px; top:82px; display:grid; gap:8px; }
.item-button { position:relative; width:48px; min-height:48px; padding:0; border-radius:14px; background:#fff; color:#312e81; border:2px solid #d9daf0; box-shadow:0 5px 16px #27336b22; font-size:24px; }
.item-button:disabled { opacity:.35; filter:grayscale(1); }
.item-count { position:absolute; right:-5px; top:-7px; min-width:20px; height:20px; padding:1px 5px; border-radius:999px; color:#fff; background:#5046e5; font:700 12px/18px system-ui; }
.topic { color:#5046e5; font-weight:800; }
select { border:1px solid #d9daf0; border-radius:12px; padding:8px; background:#f8f8ff; }
.question { flex:1; display:grid; place-items:center; padding:22px 0; font-size:clamp(30px,6vw,52px); font-weight:850; text-align:center; line-height:1.25; }
.question-visual { min-height:120px; display:grid; place-items:center; padding:8px; }
.question-visual svg { width:min(100%,360px); max-height:180px; overflow:visible; }
.confirm-button { background:#6b7280; }
form { display:grid; gap:20px; }
input { width:100%; min-height:56px; border:2px solid #b8b4fa; border-radius:14px; background:#f6f6ff; padding:7px 14px; font-size:27px; text-align:center; outline:none; }
input:focus { caret-color:#5046e5; }
.choice-input{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:min(100%,30rem);margin:.7rem auto 0}
.choice-input[hidden]{display:none}
.number-keyboard[hidden]{display:none}
.choice-option{min-height:3.25rem;border:2px solid #d9d8f5;border-radius:14px;background:#fff;color:#252747;font-size:1.08rem;font-weight:750;padding:.55rem .75rem;box-shadow:0 3px 0 #d9d8f5}
.choice-option:active{transform:translateY(2px);box-shadow:0 1px 0 #d9d8f5}
@media(max-width:520px){.choice-input{gap:.45rem}.choice-option{min-height:2.75rem;font-size:1rem}}
input:focus { border-color:#5046e5; box-shadow:0 0 0 4px #5046e51a; }
.fraction-input { width:min(100%,270px); margin:auto; display:grid; grid-template-rows:54px 3px 54px; gap:6px; }
.fraction-input input { min-height:0; height:54px; }
.fraction-line { display:block; border-radius:99px; background:#34365b; }
.stacked-fraction{display:inline-grid;grid-template-rows:auto 3px auto;align-items:center;justify-items:center;min-width:1.35em;margin:0 .12em;vertical-align:middle;line-height:1;font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:2em;font-weight:700}
.stacked-fraction .fraction-bar{display:block;width:100%;height:3px;background:currentColor;border-radius:2px;margin:.08em 0}
.stacked-fraction .fraction-top,.stacked-fraction .fraction-bottom{font-size:.72em;padding:.05em .12em}
.fraction-operation{display:inline-flex;align-items:center;justify-content:center;gap:.22em;white-space:nowrap;vertical-align:middle}
.fraction-operator{display:inline-block;font-family:inherit;font-weight:700}
.fraction-result{display:inline-block;margin-left:.08em;font-family:inherit}
.question-content{display:inline;max-width:100%}
.handwriting-area{position:relative;width:100%;height:100%;min-height:300px}
.handwriting-area[hidden]{display:none}
.handwriting-area textarea{width:100%;height:100%;min-height:300px;resize:none;border:0;border-radius:0;background:transparent;padding:24px;font-size:38px;line-height:1.5;text-align:center;color:#252747;outline:none;box-shadow:none;-webkit-user-select:text;user-select:text;touch-action:manipulation}
.handwriting-area textarea:focus{border:0;box-shadow:none}
.handwriting-area button{display:none}
.number-keyboard { position:fixed; z-index:12; left:0; right:0; bottom:0; padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(58px,.82fr) minmax(58px,.82fr); grid-template-rows:repeat(4,minmax(35px,1fr)); gap:8px; background:#e8e9f4ed; border-top:1px solid #ffffffb8; box-shadow:0 -12px 40px #27336b10; backdrop-filter:blur(20px); }
.number-keyboard button { min-height:43px; border:1px solid #ffffff; border-radius:12px; color:#20233e; background:#ffffffdf; font-size:22px; box-shadow:0 2px 7px #27336b10; }
.number-keyboard button:disabled { opacity:.3; box-shadow:none; }
.number-keyboard .key-tab,.number-keyboard .key-confirm { grid-column:4 / 6; font-size:27px; }
.number-keyboard .key-tab { grid-row:1 / 3; }
.number-keyboard .key-confirm { grid-row:3 / 5; color:#fff; background:#5046e5; }
.feedback { min-height:32px; margin:0; font-size:20px; font-weight:750; text-align:center; }
.actions { display:flex; gap:14px; }
.actions button { flex:1; }
.secondary { color:#4b4d66; background:#ececf6; }
.danger { margin-top:28px; color:#b42318; background:#fee4e2; width:100%; }
.privacy { margin:0; color:#686c80; text-align:center; font-size:14px; }
dialog { width:min(calc(100% - 32px),600px); border:0; border-radius:26px; padding:28px; box-shadow:0 24px 80px #16193255; }
dialog::backdrop { background:#16193266; backdrop-filter:blur(4px); }
dialog h2 { margin:0; }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }
.stat-grid div { padding:18px; border-radius:16px; background:#f2f3ff; }
.stat-grid strong { display:block; font-size:28px; }
.recent { padding-left:22px; color:#555a72; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
[hidden] { display:none !important; }
.start-screen { min-height:100dvh; padding:max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); display:grid; place-items:center; }
.start-card { position:relative; width:min(100%,560px); padding:clamp(32px,7vw,58px); border-radius:34px; background:#fff; text-align:center; box-shadow:0 20px 70px #27336b24; }
.start-card h1 { margin:8px 0 12px; }
.start-card h1 { font-size:clamp(30px,7vw,48px); line-height:1.05; }
.start-card>p:not(.eyebrow) { color:#60657b; font-size:18px; }
.hero-mark { width:100px; height:100px; margin:0 auto 28px; border-radius:28px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#756cf4,#4035c9); font-size:70px; font-weight:700; box-shadow:0 14px 30px #5046e54a; }
.start-grade { margin:30px 0 18px; display:grid; gap:10px; color:#4b506b; font-weight:750; text-align:left; }
.start-grade select { min-height:54px; font-size:18px; }
.start-button { width:100%; min-height:62px; font-size:22px; }
.start-card small { display:block; margin-top:18px; color:#777b8f; }
.library-button { position:absolute; top:18px; right:18px; min-height:38px; padding:0 14px; color:#5046e5; background:#f0efff; font-size:14px; }
.language-button { position:absolute; top:18px; right:84px; min-height:38px; padding:0 12px; color:#4b506b; background:#f2f3f7; font-size:13px; }
.home-refresh-button { position:absolute; top:18px; left:18px; width:38px; min-height:38px; padding:0; color:#656981; background:#f2f3f7; font-size:20px; }
.chapter-summary { margin:8px 0 18px !important; color:#696d82 !important; font-size:14px !important; }
.library-dialog { width:min(calc(100% - 28px),560px); }
.library-dialog .chapter-picker { margin:24px 0; }
.library-dialog .chapter-choices { max-height:min(52dvh,430px); }
.chapter-picker { margin:22px 0; padding:0; border:0; text-align:left; }
.chapter-picker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chapter-picker legend { padding:0; color:#4b506b; font-weight:800; }
.text-button { min-height:32px; padding:0 10px; color:#5046e5; background:transparent; font-size:14px; }
.chapter-choices { max-height:190px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:4px; }
.chapter-choice { min-height:44px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #d9daf0; border-radius:12px; background:#f8f8ff; font-size:14px; }
.chapter-choice input { width:20px; min-height:20px; margin:0; accent-color:#5046e5; }
.chapter-error { margin:8px 4px 0; color:#b42318 !important; font-size:14px !important; }
.game-over { position:fixed; inset:0; z-index:20; padding:20px; display:grid; place-items:center; background:#161932cc; backdrop-filter:blur(8px); }
.countdown { display:block; margin:24px; color:#5046e5; font-size:72px; }
.reward-dialog { text-align:center; }
.reward-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px; }
.reward-card { min-height:180px; padding:20px 12px; display:grid; place-items:center; align-content:center; gap:8px; background:linear-gradient(145deg,#756cf4,#4035c9); }
.reward-card .item-icon { font-size:48px; }
.reward-card small { color:#eeedff; font-weight:500; }
@media (max-width:520px) { .page{padding-left:10px;padding-right:10px;padding-bottom:calc(218px + env(safe-area-inset-bottom))}.progress{font-size:11px;grid-template-columns:repeat(4,1fr);gap:5px}.actions{flex-direction:column}.card{min-height:0;border-radius:22px;padding:16px 14px}.question{font-size:clamp(25px,7vw,38px);padding:12px 0}.question-visual{min-height:90px}.inventory{right:-4px;top:70px}.item-button{width:38px;min-height:38px;font-size:19px}.number-keyboard{gap:6px;padding-top:7px}.number-keyboard button{min-height:41px;font-size:21px} }
@media (max-height:700px) { .page{padding-top:calc(50px + env(safe-area-inset-top));padding-bottom:calc(190px + env(safe-area-inset-bottom))}.focus-hud{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}.card{padding:10px 12px}.question{font-size:clamp(22px,5vw,32px);padding:6px 0}.question-visual{min-height:70px}.feedback{min-height:22px;font-size:16px}.number-keyboard{gap:4px;padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}.number-keyboard button{min-height:35px;font-size:19px}.fraction-input{grid-template-rows:44px 3px 44px}.fraction-input input{height:44px}input{min-height:48px;font-size:24px} }
@media (min-width:768px){
  #appScreen.page{padding-bottom:14px;padding-right:14px}
  .play-area .card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(24px,4vw,58px);align-items:stretch}
  .question-panel{grid-column:1;min-height:100%;border-right:1px solid #e8e7f7;padding-right:clamp(20px,3vw,46px)}
  .question{flex:none;min-height:45%;font-size:clamp(30px,4vw,52px)}
  #answerForm{grid-column:2;align-self:stretch;min-height:0;padding-bottom:220px}
  .number-keyboard{left:auto;width:42%;border-left:1px solid #ffffffb8;border-top-left-radius:22px;padding-left:12px}
  .choice-input{grid-template-columns:1fr;width:100%}
}