:root{--bg:#fff8e8;--card:#fff;--ink:#1d2a44;--muted:#667085;--orange:#ff8a3d;--blue:#4f8cff;--green:#25bf78;--red:#ff5f6d;--yellow:#ffd466;--shadow:0 14px 30px rgba(37,60,90,.12);--radius:24px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#fff7dc,#eaf9ff 55%,#ecfff2);-webkit-tap-highlight-color:transparent}.app{max-width:1180px;margin:0 auto;padding:18px 18px 38px}.hero{display:flex;justify-content:space-between;gap:16px;align-items:stretch;background:rgba(255,255,255,.75);border:2px solid rgba(255,210,102,.55);border-radius:30px;padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.eyebrow,.label{margin:0 0 8px;font-weight:800;color:#59708f}.hero h1{font-size:clamp(34px,7vw,64px);margin:0;color:#ea6a1f;letter-spacing:.02em}.sub{margin:8px 0 0;color:#526174;font-weight:700}.scorePanel{display:flex;gap:12px}.scorePanel div,.challengeStats span{min-width:92px;background:#fff7df;border:2px solid #ffd27a;border-radius:20px;padding:14px;text-align:center;font-weight:900}.scorePanel span{display:block;color:#526174;font-size:15px}.scorePanel b{font-size:34px}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}.tabs button,.modeButtons button,.difficulty button{border:0;border-radius:18px;padding:15px 10px;background:#fff;box-shadow:0 8px 0 #dfe9f8;font-weight:900;color:#243454;font-size:18px;cursor:pointer}.tabs button.active,.modeButtons button.active,.difficulty button.active{background:linear-gradient(135deg,#ffb347,#ff7d3a);color:white;box-shadow:0 8px 0 #e2b171}.screen{display:none}.screen.active{display:block}.card,.visualCard,.answerCard,.calcBox,.challengePanel,.review{background:rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.intro{display:flex;align-items:center;justify-content:space-between;gap:16px;border:2px solid #ffd58a}.intro h2{margin:0;font-size:clamp(24px,4vw,42px);color:#eb6920}.ghost,.primary{border:0;border-radius:18px;padding:16px 22px;background:linear-gradient(135deg,#5b9bff,#457af0);color:#fff;font-size:18px;font-weight:900;box-shadow:0 8px 0 #dce6f7;cursor:pointer}.primary{background:linear-gradient(135deg,#ff9d43,#ff7338);font-size:24px}.modeButtons,.difficulty{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.mini{font-size:16px!important;padding:12px 16px!important}.gameGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.question,.bigQuestion{font-size:clamp(24px,4.5vw,44px);font-weight:1000;color:#21304d;margin-bottom:14px}.fractionVisual{display:flex;justify-content:center;align-items:center;min-height:330px}.pieSvg{width:min(320px,72vw);height:min(320px,72vw);filter:drop-shadow(0 12px 14px rgba(0,0,0,.12))}.slice{cursor:pointer;transition:transform .15s,opacity .15s}.slice:hover{opacity:.86}.pieceLine{stroke:#fff;stroke-width:3}.hint{margin-top:16px;padding:16px;background:#f3f6ff;border-radius:18px;color:#2f4164;font-weight:900;line-height:1.55}.feedback{margin-top:14px;padding:16px;border-radius:18px;background:#fff7dd;font-weight:1000;color:#374763;min-height:58px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.options button,.answerGrid button,.fractionChoice{border:0;background:#fff;border-radius:22px;padding:22px;box-shadow:0 9px 0 #dfe9f8;font-weight:1000;color:#1f2b45;font-size:clamp(24px,4vw,40px);cursor:pointer}.answerGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.answerGrid button.small{font-size:22px}.correct{background:#d9ffe9!important;box-shadow:0 9px 0 #9cdfbd!important}.wrong{background:#ffe4e8!important;box-shadow:0 9px 0 #f5adb5!important;animation:shake .24s}.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0}.vs{font-size:30px;font-weight:1000;color:#ff7d3a}.barArea{display:grid;gap:14px}.bar{height:58px;background:#edf2f9;border-radius:18px;overflow:hidden;border:3px solid #d8e1f2;position:relative}.fill{height:100%;background:linear-gradient(90deg,#68d391,#34c38f)}.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:22px}.multiPies{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;min-height:260px}.multiPies .pieSvg{width:170px;height:170px}.challengeStats{display:flex;gap:10px;flex-wrap:wrap}.challengePanel{text-align:center;min-height:260px}.challengeQ{font-size:clamp(28px,5vw,48px);font-weight:1000;margin:0 0 18px}.review{margin-top:16px;display:none}.review.show{display:block}.reviewItem{border:2px dashed #ffd27a;background:#fffdf4;border-radius:18px;padding:14px;margin:12px 0}.reviewItem b{color:#e4631e}.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef4ff;font-weight:900;margin:4px}@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}@media(max-width:820px){.app{padding:10px}.hero{padding:18px;flex-direction:column}.scorePanel{width:100%}.scorePanel div{flex:1}.tabs{grid-template-columns:repeat(2,1fr)}.tabs button{font-size:16px;padding:13px 8px}.gameGrid{grid-template-columns:1fr}.intro{align-items:flex-start;flex-direction:column}.ghost{width:100%}.fractionVisual{min-height:260px}.options{grid-template-columns:1fr}.versus{grid-template-columns:1fr}.vs{text-align:center}.challengeStats span{flex:1}.answerGrid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.hero h1{font-size:38px}.card,.visualCard,.answerCard,.calcBox,.challengePanel,.review{padding:16px}.tabs{gap:8px}.modeButtons button,.difficulty button{flex:1 1 45%}.pieSvg{width:260px;height:260px}.fractionChoice{padding:18px}.answerGrid{grid-template-columns:1fr}.scorePanel b{font-size:28px}}
.soundToggle{border:0;border-radius:20px;padding:14px 16px;background:linear-gradient(135deg,#7dd3fc,#60a5fa);color:#123;box-shadow:0 8px 0 #dbeafe;font-size:16px;font-weight:1000;cursor:pointer;min-width:112px}.scorePanel{align-items:stretch}.scorePanel .soundToggle{height:auto}@media(max-width:820px){.soundToggle{flex:1;min-height:72px}.scorePanel{flex-wrap:wrap}}@media(max-width:480px){.soundToggle{width:100%;min-height:54px}}


.frac{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle;line-height:1;margin:0 .12em;font-weight:1000;min-width:.85em}
.fracTop{display:block;border-bottom:3px solid currentColor;padding:0 .16em .08em;text-align:center}
.fracBottom{display:block;padding:.08em .16em 0;text-align:center}
.options button .frac,.answerGrid button .frac,.fractionChoice .frac,.challengeQ .frac{font-size:.9em}
.bar span .frac{font-size:.95em}
.reviewItem .frac{font-size:1em}