body.math-page, body.math-page * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
body.math-page main { min-height: 100dvh; background: radial-gradient(circle at 9% 17%, #fff 0 3px, transparent 4px), linear-gradient(#bfeaf2 0 300px, #fff8e7 300px); }
.math-game { width: min(980px, calc(100% - 40px)); margin: 28px auto 44px; position: relative; z-index: 1; }
.math-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; animation: math-rise .5s ease-out both; }
.math-heading > div:first-child > span { color: #2e7d87; font-size: 10px; letter-spacing: .16em; font-weight: 900; }
.math-heading h1 { margin: 7px 0; font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -.05em; }
.math-heading p { margin: 0; color: #526575; font-size: 13px; }
.math-score { min-width: 112px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #e8dcff; box-shadow: 5px 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; }
.math-score span { font-size: 30px; }
.math-score b { color: #725ac6; font-size: 38px; line-height: 1; }
.math-card { overflow: hidden; border: 3px solid var(--ink); border-radius: 27px; background: #fff; box-shadow: 10px 10px 0 var(--ink); animation: math-card-in .6s .08s cubic-bezier(.2,.8,.2,1) both; }
.math-toolbar { padding: 12px 16px; border-bottom: 3px solid var(--ink); background: #fff2bd; display: flex; justify-content: center; gap: 10px; }
.math-toolbar button { min-width: 102px; min-height: 58px; padding: 5px 12px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 4px 4px 0 var(--ink); color: var(--ink); cursor: pointer; }
.math-toolbar button b, .math-toolbar button small { display: block; }
.math-toolbar button b { font-size: 29px; line-height: 1; }
.math-toolbar button small { margin-top: 4px; font-size: 9px; font-weight: 900; }
.math-toolbar button.is-active { background: var(--yellow); transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.math-toolbar .math-sound { min-width: 62px; background: var(--blue); font-size: 25px; }
.math-board { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); min-height: 430px; }
.math-problem { min-width: 0; padding: 27px; border-right: 3px solid var(--ink); background: #dff5e5; display: grid; align-content: center; gap: 24px; }
.math-objects { position: relative; min-height: 164px; display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; gap: 9px; }
.math-object-group { min-height: 150px; padding: 13px; border: 3px dashed #4a8a66; border-radius: 22px; background: #fff; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 7px; transition: opacity .22s ease, transform .22s ease; }
.math-object-group i { font-style: normal; font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(35px, 5vw, 54px); line-height: 1; filter: drop-shadow(0 3px 0 #25304718); animation: math-object-pop .35s cubic-bezier(.2,.8,.2,1) both; }
.math-object-group.is-subtracted i { opacity: .3; filter: grayscale(.8); text-decoration: line-through; }
.math-visual-sign { width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 31px; font-weight: 900; }
.math-objects.is-showing-result > .math-object-group, .math-objects.is-showing-result > .math-visual-sign { opacity: 0; transform: scale(.82); }
.math-result-visual { position: absolute; z-index: 2; inset: 0; padding: 8px; background: #dff5e5; display: flex; align-items: center; justify-content: center; gap: 14px; animation: math-result-in .52s cubic-bezier(.22,1.3,.42,1) both; }
.math-result-visual.hidden { display: none; }
.math-result-visual > span { width: 52px; height: 52px; flex: 0 0 auto; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 31px; font-weight: 900; }
.math-result-visual > div { width: min(78%, 370px); min-height: 145px; padding: 12px; border: 4px solid #4a8a66; border-radius: 24px; background: #fff; box-shadow: 5px 5px 0 #25304728; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 7px; }
.math-result-visual i { font-style: normal; font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(35px, 5vw, 54px); line-height: 1; animation: math-result-object .42s cubic-bezier(.22,1.3,.42,1) both; }
.math-equation { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); font-size: clamp(42px, 7vw, 72px); font-weight: 900; line-height: 1; }
.math-equation b { min-width: 72px; padding: 7px 12px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.math-equation strong { color: var(--pink); font-size: 1.12em; }
.math-answer-area { min-width: 0; padding: 25px 20px; background: #e8dcff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.math-answer-area > span { font-size: 35px; animation: math-point 1.4s ease-in-out infinite; }
.math-answers { width: 100%; display: grid; gap: 12px; }
.math-answer { min-height: 84px; border: 3px solid var(--ink); border-radius: 20px; background: #fff; box-shadow: 5px 5px 0 var(--ink); color: var(--ink); font-size: 46px; font-weight: 900; cursor: pointer; transition: transform .14s ease, background .14s ease; }
.math-answer:nth-child(1) { background: #fff2bd; }
.math-answer:nth-child(2) { background: #dff5e5; }
.math-answer:nth-child(3) { background: #ffdce5; }
.math-answer:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.math-answer.is-correct { background: #75c98b; color: #fff; animation: math-correct .55s ease-out; }
.math-answer.is-wrong { animation: math-wrong .36s ease-out; }
.math-next { margin-top: 18px; min-height: 48px; padding: 7px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); font-size: 14px; font-weight: 900; cursor: pointer; }
.math-toast { position: fixed; z-index: 2000; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 13px 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--pink); color: #fff; box-shadow: 5px 5px 0 var(--ink); font-weight: 900; text-align: center; animation: math-toast-in .3s ease-out; }
.math-toast.is-warning { background: #f3a640; color: var(--ink); }
.math-page footer { padding-bottom: env(safe-area-inset-bottom); }
@keyframes math-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes math-card-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes math-object-pop { from { opacity: 0; transform: translateY(-12px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes math-result-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes math-result-object { from { opacity: 0; transform: translateY(-24px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes math-point { 50% { transform: translateY(6px); } }
@keyframes math-correct { 45% { transform: scale(1.08) rotate(-2deg); } }
@keyframes math-wrong { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
@keyframes math-toast-in { from { opacity: 0; transform: translate(-50%,-15px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 760px) {
  .math-page .topbar { width: calc(100% - 22px); }
  .math-game { width: calc(100% - 22px); margin: 13px auto 28px; }
  .math-heading { align-items: center; gap: 8px; margin-bottom: 11px; }
  .math-heading h1 { margin-block: 4px; font-size: 31px; }
  .math-heading p { max-width: 230px; font-size: 10px; }
  .math-score { min-width: 80px; padding: 6px 9px; box-shadow: 3px 3px 0 var(--ink); }
  .math-score span { font-size: 23px; }
  .math-score b { font-size: 29px; }
  .math-card { border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); }
  .math-toolbar { padding: 8px; gap: 6px; }
  .math-toolbar button { flex: 1; min-width: 0; min-height: 48px; padding: 4px; border-width: 2px; border-radius: 12px; box-shadow: 2px 3px 0 var(--ink); }
  .math-toolbar button b { font-size: 25px; }
  .math-toolbar .math-sound { flex: 0 0 52px; min-width: 52px; }
  .math-board { grid-template-columns: 1fr; min-height: 0; }
  .math-problem { padding: 12px; border-right: 0; border-bottom: 3px solid var(--ink); gap: 9px; }
  .math-objects { min-height: 105px; grid-template-columns: 1fr 38px 1fr; gap: 5px; }
  .math-object-group { min-height: 102px; padding: 7px; border-width: 2px; border-radius: 14px; gap: 3px; }
  .math-object-group i { font-size: clamp(27px, 9vw, 40px); }
  .math-visual-sign { width: 36px; height: 36px; border-width: 2px; font-size: 24px; }
  .math-result-visual { padding: 4px; gap: 7px; }
  .math-result-visual > span { width: 38px; height: 38px; border-width: 2px; font-size: 24px; }
  .math-result-visual > div { min-height: 99px; padding: 6px; border-width: 2px; border-radius: 15px; gap: 3px; }
  .math-result-visual i { font-size: clamp(27px, 9vw, 40px); }
  .math-equation { min-height: 67px; gap: 8px; font-size: 41px; }
  .math-equation b { min-width: 52px; padding: 5px 8px; border-width: 2px; border-radius: 13px; box-shadow: 2px 3px 0 var(--ink); }
  .math-answer-area { padding: 10px 11px 13px; }
  .math-answer-area > span { display: none; }
  .math-answers { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .math-answer { min-height: 68px; border-width: 2px; border-radius: 15px; box-shadow: 3px 4px 0 var(--ink); font-size: 38px; }
  .math-next { margin-top: 10px; min-height: 42px; }
  .math-page footer { width: calc(100% - 22px); min-height: 50px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .math-heading > div:first-child > span, .math-heading p { display: none; }
  .math-heading h1 { margin: 0; font-size: 27px; }
  .math-toolbar button small { display: none; }
  .math-toolbar button { min-height: 42px; }
  .math-object-group { min-height: 82px; }
  .math-objects { min-height: 84px; }
  .math-equation { min-height: 56px; font-size: 35px; }
  .math-answer { min-height: 58px; }
  .math-next { min-height: 38px; margin-top: 7px; }
  .math-page footer { min-height: 44px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .math-heading, .math-card, .math-object-group i, .math-result-visual, .math-result-visual i, .math-answer-area > span, .math-answer, .math-toast { animation: none !important; transition: none !important; }
}