/* 学霸乐园 math arena — per-game scenes. */

/* ===== 数学切水果 ===== */
.mf-cover-slash {
  position: absolute; left: 4%; top: 46%; width: 86%; height: 10px; border-radius: 999px; transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 22px #fff, 0 0 44px #ffe066;
  animation: mf-slash 2.4s ease-in-out infinite;
}
@keyframes mf-slash { 0%, 55% { clip-path: inset(0 100% 0 0); opacity: 1; } 75% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 100%); opacity: 0; } }
.mf-col {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .22); border: 3px solid rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 55%, transparent);
}
.mf-col.is-boom { animation: mf-boom .6s; }
.mf-col.is-shake { animation: ma-shake .45s; }
@keyframes mf-boom { 0% { background: rgba(255, 255, 255, .95); } 30% { transform: translate(-6px, 4px); } 60% { transform: translate(5px, -4px); } 100% { background: rgba(255, 255, 255, .22); } }
.mf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mf-combo { font-weight: 900; color: #fff; -webkit-text-stroke: 4px #f76707; paint-order: stroke fill; font-size: 20px; }
.mf-combo.is-new { animation: ma-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.mf-q {
  align-self: center; padding: 6px 26px; border-radius: 18px; background: #fff; border: 4px solid var(--pc); box-shadow: 0 5px 0 var(--pd);
  font-weight: 900; font-size: clamp(24px, 6cqh, 46px); color: var(--pd); white-space: nowrap;
}
.mf-q.is-new { animation: ma-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.mf-field { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 16px; touch-action: none; cursor: crosshair; }
.mf-field canvas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mf-fruit { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; pointer-events: none; }
.mf-fruit img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.mf-fruit b {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); min-width: 1.6em; padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: #23304a; font-size: clamp(18px, 3.2cqh, 30px); font-weight: 900; text-align: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2); border: 3px solid #23304a;
}
.mf-fruit.is-bomb img { animation: mf-fizz .25s infinite alternate; }
.mf-fruit.is-answer img { filter: drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 22px #fff); }
.mf-fruit.is-answer b { background: #2fbf71; color: #fff; border-color: #1b8a4e; }
@keyframes mf-fizz { to { filter: drop-shadow(0 0 8px #ff922b) brightness(1.15); } }
.mf-half { position: absolute; z-index: 3; pointer-events: none; animation: mf-half .9s ease-in forwards; }
.mf-half img { width: 100%; height: 100%; object-fit: contain; }
.mf-half.is-l { clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); }
.mf-half.is-r { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%); }
@keyframes mf-half { to { transform: translate(var(--dx), 260px) rotate(var(--rot)); opacity: 0; } }
.mf-splash {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--juice) 0 30%, transparent 31%), radial-gradient(circle at 20% 30%, var(--juice) 0 10%, transparent 11%),
    radial-gradient(circle at 80% 25%, var(--juice) 0 8%, transparent 9%), radial-gradient(circle at 70% 80%, var(--juice) 0 9%, transparent 10%),
    radial-gradient(circle at 25% 78%, var(--juice) 0 7%, transparent 8%);
  opacity: .8; animation: mf-splash 1.2s ease-out forwards;
}
@keyframes mf-splash { 0% { transform: translate(-50%, -50%) scale(.3); } 20% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.mf-blast {
  position: absolute; z-index: 5; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, #ffe066 35%, #ff922b 55%, rgba(255, 80, 0, 0) 70%); animation: mf-blast .7s ease-out forwards;
}
@keyframes mf-blast { to { transform: scale(6); opacity: 0; } }

/* ===== 口算小蛇大冒险 ===== */
.ms-col {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 0; padding: 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .3); border: 3px solid rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 55%, transparent);
}
.ms-col.is-shake { animation: ma-shake .45s; }
.ms-head { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ms-len { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-weight: 800; font-size: 14px; }
.ms-q {
  padding: 4px 24px; border-radius: 16px; background: #fff; border: 4px solid var(--pc); box-shadow: 0 5px 0 var(--pd);
  font-weight: 900; font-size: clamp(22px, 5.4cqh, 42px); color: var(--pd); white-space: nowrap;
}
.ms-q.is-new { animation: ma-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.ms-board-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.ms-board {
  position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; border-radius: 18px; overflow: hidden; touch-action: none;
  border: 5px solid #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .15), 0 12px 28px rgba(0, 0, 0, .18);
  background:
    repeating-conic-gradient(#a9e46b 0 25%, #93d65a 0 50%) 0 0 / calc(200% / var(--g)) calc(200% / var(--g));
}
.ms-seg, .ms-apple { position: absolute; left: 0; top: 0; width: calc(100% / var(--g)); height: calc(100% / var(--g)); }
.ms-seg { transition: transform var(--tick) linear; }
.ms-seg.no-anim { transition: none; }
.ms-seg img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); filter: hue-rotate(var(--hue)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.ms-seg.is-head img { transform: scale(1.5); }
.ms-seg.is-head.is-left img { transform: scale(-1.5, 1.5); }
.ms-apple { z-index: 1; display: grid; place-items: center; animation: ms-drop .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.ms-apple img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.ms-apple b {
  position: relative; z-index: 1; margin-top: 18%; padding: 0 4px; border-radius: 7px; background: rgba(255, 255, 255, .92); color: #23304a;
  font-size: clamp(11px, calc(42cqmin / var(--g)), 26px); font-weight: 900; line-height: 1.2; box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.ms-apple.is-hint b { background: #2fbf71; color: #fff; }
@keyframes ms-drop { from { scale: 0; } }
.ms-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 40px); gap: 5px; }
.ms-pad button {
  border: 0; border-radius: 12px; background: #fff; color: var(--pd); font-size: 18px; cursor: pointer; box-shadow: 0 4px 0 var(--pd); touch-action: none;
}
.ms-pad button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pd); background: var(--ps); }
.ms-pad [data-dir="up"] { grid-column: 2; }
.ms-pad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.ms-pad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.ms-pad [data-dir="right"] { grid-column: 3; grid-row: 2; }

/* ===== 数学飞车 ===== */
.mr-cover-lines {
  position: absolute; left: 0; top: 58%; width: 34%; height: 60px;
  background: repeating-linear-gradient(180deg, transparent 0 10px, rgba(255, 255, 255, .9) 10px 16px); animation: mr-lines .5s linear infinite;
  mask: linear-gradient(90deg, transparent, #000);
}
@keyframes mr-lines { 0% { transform: translateX(10px); opacity: .4; } 50% { opacity: 1; } 100% { transform: translateX(-30px); opacity: .4; } }
.mr-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 10px; }
.mr-track {
  --road: 0px; position: relative; display: grid; grid-template-rows: repeat(var(--lanes), 1fr); min-height: 0; overflow: hidden;
  border-radius: 22px; border: 6px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .12); padding: 16px 0;
  background:
    radial-gradient(circle at 10px 8px, #ffe066 0 3px, transparent 4px) var(--road) 0 / 90px 16px repeat-x,
    radial-gradient(circle at 40px 8px, #ff8fab 0 3px, transparent 4px) var(--road) 100% / 70px 16px repeat-x,
    linear-gradient(#7cc95a 16px, transparent 16px calc(100% - 16px), #7cc95a calc(100% - 16px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 60px, transparent 60px 120px) var(--road) 0 / 120px 100%,
    linear-gradient(#5d6577, #4a5162);
}
.mr-lane { position: relative; border-bottom: 4px dashed rgba(255, 255, 255, .65); }
.mr-lane:last-child { border-bottom: 0; }
.mr-lane::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px;
  background: repeating-linear-gradient(90deg, #ff6b6b 0 24px, #fff 24px 48px) var(--road) 0 / 48px 100%; opacity: .7;
}
.mr-finish {
  position: absolute; right: 5%; top: 0; bottom: 0; z-index: 1; width: 28px;
  background: conic-gradient(#222 25%, #fff 0 50%, #222 0 75%, #fff 0) 0 0 / 14px 14px; box-shadow: 0 0 0 3px #fff;
}
.mr-place {
  position: absolute; right: 9%; top: 50%; z-index: 2; transform: translateY(-50%); padding: 2px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); font-weight: 900; font-size: 14px;
}
.mr-place:empty { display: none; }
.mr-place.is-first { background: #ffd43b; }
.mr-car {
  position: absolute; left: 2%; top: 50%; z-index: 3; height: 118%; max-height: 210px; aspect-ratio: 1; transform: translate(-12%, -50%);
  transition: left .7s cubic-bezier(.3, 1.3, .5, 1);
}
.mr-car img { width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); animation: mr-idle .35s ease-in-out infinite alternate; }
@keyframes mr-idle { to { transform: translateY(-3%); } }
.mr-flame {
  position: absolute; left: -26%; top: 48%; width: 40%; height: 26%; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 100% 50%, #fff 0 15%, #ffd43b 30%, #ff6b00 60%, transparent 72%);
}
.mr-car.is-boost .mr-flame { animation: mr-flame .7s ease-out; }
.mr-car.is-nitro .mr-flame { animation: mr-flame 1.1s ease-out; width: 70%; left: -55%; }
.mr-car.is-nitro img { filter: hue-rotate(var(--hue)) drop-shadow(0 0 12px #ffd43b) drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }
@keyframes mr-flame { 0% { opacity: 0; transform: scaleX(.2); } 20% { opacity: 1; transform: scaleX(1.2); } 100% { opacity: 0; transform: scaleX(.6); } }
.mr-car.is-spin img { animation: mr-spin .8s ease-out; }
@keyframes mr-spin { 0% { transform: rotate(0); } 60% { transform: rotate(-380deg); } 100% { transform: rotate(-360deg); } }
.mr-car.is-winner img { animation: ma-hop .5s ease-out 3; }
.mr-pads { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; height: clamp(170px, 34cqh, 260px); }
.mr-pads .ma-pad-opts { grid-template-columns: repeat(3, 1fr) !important; }

/* ===== 数学抢大鹅 ===== */
.mg-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 10px; }
.mg-field {
  position: relative; display: grid; grid-template-rows: repeat(var(--lanes), 1fr); padding: 10px 15% 10px 3%; min-height: 0;
  border-radius: 24px; background: rgba(255, 255, 255, .18); border: 4px solid rgba(255, 255, 255, .7);
}
.mg-lane { position: relative; border-bottom: 3px dashed rgba(255, 255, 255, .8); }
.mg-lane:last-child { border-bottom: 0; }
.mg-marks { position: absolute; left: 4%; right: 0; bottom: 10%; display: flex; justify-content: space-between; }
.mg-marks i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .7); border: 3px solid var(--pc); transition: background .3s, transform .3s; }
.mg-marks i.is-done { background: var(--pc); transform: scale(1.2); }
.mg-marks i:last-child { width: 22px; height: 22px; background: #ffd43b; }
.mg-kid {
  --x: 0; position: absolute; bottom: 4%; left: calc(var(--x) * 96%); z-index: 2; height: 92%; max-height: 150px; aspect-ratio: 1;
  transform: translateX(-30%); transition: left .6s cubic-bezier(.3, 1.2, .5, 1);
}
.mg-kid img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .3)); }
.mg-kid.is-run img { animation: ma-run .3s ease-in-out 2; }
.mg-kid.is-dash img { animation: ma-run .18s ease-in-out 4; filter: drop-shadow(0 0 10px #ffd43b) drop-shadow(0 5px 3px rgba(0, 0, 0, .3)); }
.mg-kid.is-dash::before { content: ""; position: absolute; left: -60%; top: 30%; width: 70%; height: 40%; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 255, 255, .9) 6px 9px); animation: mr-lines .3s linear 3; }
.mg-kid.is-fall img { animation: mg-fall .7s ease-out; }
.mg-kid.is-winner img { animation: ma-hop .5s ease-out infinite; }
@keyframes mg-fall { 0% { transform: rotate(0); } 30% { transform: rotate(-70deg) translateY(20%); } 70% { transform: rotate(-70deg) translateY(20%); } 100% { transform: rotate(0); } }
.mg-name {
  position: absolute; left: 50%; top: -6%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--pc); color: #fff;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.mg-goose { position: absolute; right: 1%; top: 50%; z-index: 3; width: 14%; transform: translateY(-50%); }
.mg-goose img { width: 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); animation: mg-waddle .6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes mg-waddle { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateY(-4%); } }
.mg-goose.is-caught img { animation: ma-hop .35s ease-out infinite; }
.mg-goose.is-flee { transition: transform 1.2s ease-in; transform: translate(160%, -50%) rotate(10deg); }
.mg-cards { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; height: clamp(190px, 38cqh, 290px); }
.mg-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mg-card header {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; border: 3px solid var(--pc);
  box-shadow: 0 3px 0 var(--pd);
}
.mg-card header .ma-avatar { width: 32px; height: 32px; border-width: 2px; }
.mg-card header b { color: var(--pd); }
.mg-step { margin-left: auto; font-weight: 800; color: #66718a; font-size: 13px; }
.mg-pad { flex: 1; min-height: 0; }

/* ===== 数字登顶王 ===== */
.ml-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 10px; }
.ml-mountain { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 220px)); justify-content: center; gap: 3%; padding: 13cqh 4% 4px; min-height: 0; }
.ml-peak { position: absolute; left: 50%; top: 0; z-index: 0; width: min(36%, 22cqh * 1.4); transform: translateX(-50%); }
.ml-peak img { width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.ml-stair { position: relative; z-index: 1; }
.ml-stair > i {
  position: absolute; left: calc(var(--k) / var(--steps) * 48%); bottom: calc(var(--k) / var(--steps) * 100%); width: 52%; height: calc(100% / var(--steps) - 3px);
  border-radius: 8px; background: linear-gradient(#fff, #e9eef5); box-shadow: 0 4px 0 #b9c3d3; transition: background .3s;
}
.ml-stair > i.is-done { background: linear-gradient(color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); box-shadow: 0 4px 0 var(--pd); }
.ml-stair > i:last-of-type { background: linear-gradient(#ffe066, #fab005); box-shadow: 0 4px 0 #e67700; }
.ml-climber {
  --h: 0; position: absolute; z-index: 2; left: calc(min(var(--h), var(--steps) - 1) / var(--steps) * 48% + 8%);
  bottom: calc(var(--h) / var(--steps) * 100% + 2px); width: 36%; aspect-ratio: 1; max-width: 90px;
  transition: left .45s ease-out, bottom .45s cubic-bezier(.3, 1.6, .5, 1);
}
.ml-climber img { width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.ml-climber.is-up img { animation: ma-hop .45s ease-out; }
.ml-climber.is-down img { animation: ma-shake .45s; }
.ml-flag { position: absolute; right: -30%; top: -40%; font-size: 34px; opacity: 0; transform: scale(0); transition: .4s cubic-bezier(.3, 1.6, .5, 1); }
.ml-climber.is-top .ml-flag { opacity: 1; transform: scale(1) rotate(8deg); }
.ml-climber.is-top img { animation: ma-hop .5s ease-out infinite; }
.ml-tag { position: absolute; left: 0; bottom: -2px; transform: translateY(100%); padding: 0 8px; border-radius: 999px; background: var(--pc); color: #fff; font-weight: 800; font-size: 13px; }
.ml-cards { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; height: clamp(190px, 38cqh, 290px); margin-top: 14px; }
.ml-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ml-card header {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; border: 3px solid var(--pc); box-shadow: 0 3px 0 var(--pd);
}
.ml-card header .ma-avatar { width: 32px; height: 32px; border-width: 2px; }
.ml-card header b { color: var(--pd); margin-right: auto; }
.ml-card header span { font-weight: 800; font-size: 13px; color: #66718a; }
.ml-combo { color: #f76707 !important; }
.ml-pad { flex: 1; min-height: 0; }

/* ===== 数学警察捉小偷 ===== */
.mp-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(150px, 38%) 1fr; gap: 10px; padding: 10px; }
.mp-road {
  position: relative; border-radius: 24px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
  background: linear-gradient(transparent 62%, #6b7280 62% 92%, #4b5563 92%), linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .05));
}
.mp-road::after { content: ""; position: absolute; left: 0; right: 0; top: 76%; height: 5px; background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 68px); opacity: .85; }
.mp-ticks { position: absolute; left: 6%; right: 16%; top: 64%; display: flex; justify-content: space-between; z-index: 1; }
.mp-ticks i { width: 3px; height: 12px; background: rgba(255, 255, 255, .7); border-radius: 2px; }
.mp-hideout { position: absolute; right: 1%; bottom: 8%; width: 17%; z-index: 1; }
.mp-hideout img { width: 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.mp-runner {
  --x: 0; position: absolute; bottom: 10%; left: calc(6% + var(--x) * 78%); z-index: 2; height: 62%; aspect-ratio: 1; transform: translateX(-50%);
  transition: left .7s cubic-bezier(.3, 1.2, .5, 1);
}
.mp-runner img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); animation: ma-run .5s ease-in-out infinite; }
.mp-runner.is-thief img { animation-duration: .42s; }
.mp-runner.is-dash img { animation: ma-run .16s ease-in-out 4; }
.mp-gap {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: #fff;
  font-weight: 900; color: #e8590c; box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.mp-road.is-caught .mp-thief, .mp-road.is-caught .is-thief img { animation: ma-shake .4s 3; }
.mp-road.is-caught::before { content: "🚨"; position: absolute; left: 50%; top: 28%; z-index: 4; font-size: 60px; animation: ma-pulse .4s infinite; }
.mp-road.is-escaped .is-thief { transition: left .9s ease-in, opacity .9s; left: 96%; opacity: 0; }
.mp-arena { position: relative; display: grid; grid-template-columns: 1fr minmax(220px, 30%) 1fr; gap: 12px; min-height: 0; }
.mp-team {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .94);
  border: 5px solid var(--pc); box-shadow: 0 7px 0 var(--pd); min-height: 0;
}
.mp-team.is-police { grid-column: 1; grid-row: 1; }
.mp-team.is-thief { grid-column: 3; grid-row: 1; }
.mp-team.is-locked { filter: grayscale(.7); opacity: .75; }
.mp-team.is-win { box-shadow: 0 7px 0 var(--pd), 0 0 0 6px #ffd43b; }
.mp-team.is-shake { animation: ma-shake .45s; }
.mp-team header { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.mp-team header b { color: var(--pd); }
.mp-icon { font-size: 28px; }
.mp-score { margin-left: auto; min-width: 46px; padding: 2px 12px; border-radius: 999px; background: var(--pc); color: #fff; font-weight: 900; text-align: center; }
.mp-opts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.mp-opt {
  border: 0; border-radius: 16px; background: var(--ps); color: var(--pd); font: inherit; font-size: clamp(26px, 7cqh, 52px); font-weight: 900; cursor: pointer;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 40%, transparent), 0 5px 0 color-mix(in srgb, var(--pc) 50%, #000 10%);
}
.mp-opt:active { transform: translateY(3px); }
.mp-opt:disabled { cursor: default; }
.mp-opt.is-right { background: #2fbf71; color: #fff; animation: ma-pop .3s; }
.mp-opt.is-wrong { background: #ff6b6b; color: #fff; }
.mp-question {
  grid-column: 2; grid-row: 1; display: grid; place-content: center; gap: 6px; text-align: center; padding: 12px; border-radius: 24px;
  background: #fffaf0; border: 5px solid #ffd43b; box-shadow: 0 7px 0 #f08c00;
}
.mp-question small { font-weight: 800; color: #f08c00; letter-spacing: 3px; }
.mp-question b { font-size: clamp(34px, 10cqh, 72px); font-weight: 900; white-space: nowrap; }
.mp-question b.is-new { animation: ma-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.mp-question span { color: #66718a; font-weight: 700; }
.mp-think { display: grid; gap: 4px; font-size: 13px; color: #66718a; text-align: center; }
.mp-think::before { content: ""; height: 8px; border-radius: 99px; background: #eee; grid-area: 1 / 1; }
.mp-think i { grid-area: 1 / 1; height: 8px; width: 0; border-radius: 99px; background: var(--pc); }

/* ===== 银河口算突击队 ===== */
.mx-col {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(rgba(16, 20, 60, .55), rgba(40, 20, 80, .45)); border: 3px solid color-mix(in srgb, var(--pc) 70%, #fff);
  box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 50%, transparent);
}
.mx-col.is-shake { animation: ma-shake .45s; }
.mx-col.is-power { box-shadow: 0 0 0 4px #ffd43b, 0 0 40px #ffd43b; }
.mx-col.is-down .mx-sky { filter: grayscale(1) brightness(.6); }
.mx-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mx-shields { font-size: 16px; letter-spacing: -2px; white-space: nowrap; }
.mx-energy { position: relative; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.mx-energy i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #74c0fc, #ffd43b); transition: width .25s; }
.mx-energy span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 800; color: #fff; line-height: 18px; }
.mx-q {
  align-self: center; padding: 4px 22px; border-radius: 16px; background: rgba(255, 255, 255, .95); border: 4px solid var(--pc);
  font-weight: 900; font-size: clamp(22px, 5.6cqh, 44px); color: var(--pd); white-space: nowrap; box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 60%, transparent);
}
.mx-q.is-new { animation: ma-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.mx-sky {
  position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), rgba(0, 0, 0, .18);
}
.mx-planet {
  position: absolute; z-index: 2; width: clamp(64px, 26cqmin, 130px); aspect-ratio: 1; margin: 0; padding: 0; border: 0; background: none; cursor: crosshair;
  transform: translate(-50%, 0); animation: mx-in .45s cubic-bezier(.2, 1.6, .4, 1) backwards;
}
.mx-planet img { width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) drop-shadow(0 0 12px rgba(255, 255, 255, .35)); animation: ma-bob var(--bob) ease-in-out infinite; }
.mx-planet b {
  position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); min-width: 1.8em; padding: 0 8px; border-radius: 999px; background: #fff;
  color: #23304a; font-size: clamp(18px, 4cqh, 30px); font-weight: 900; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); border: 3px solid var(--pc);
}
.mx-planet kbd { position: absolute; left: 4%; top: 4%; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .75); font: 700 11px/1.4 inherit; color: #23304a; }
.mx-planet:hover img { filter: hue-rotate(var(--hue)) drop-shadow(0 0 18px #fff); }
.mx-planet.is-hit { animation: mx-hit .5s ease-out forwards; pointer-events: none; }
.mx-planet.is-miss { animation: ma-shake .45s; }
.mx-planet.is-answer b { background: #2fbf71; color: #fff; }
@keyframes mx-in { from { transform: translate(-50%, 0) scale(0); } }
@keyframes mx-hit { 30% { transform: translate(-50%, 0) scale(1.25); filter: brightness(2.5); } 100% { transform: translate(-50%, 0) scale(0); opacity: 0; } }
.mx-rocket {
  --aim: 0rad; position: absolute; left: 50%; bottom: 2%; z-index: 3; width: clamp(54px, 20cqmin, 100px); aspect-ratio: 1;
  transform: translateX(-50%) rotate(var(--aim)); transition: transform .2s;
}
.mx-rocket img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .4)); }
.mx-fire {
  position: absolute; left: 50%; bottom: -14%; width: 22%; height: 26%; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 20%, #fff 0 15%, #ffd43b 35%, #ff6b00 65%, transparent 72%); animation: mx-fire .15s infinite alternate;
}
.mx-col.is-power .mx-rocket img { filter: drop-shadow(0 0 16px #ffd43b) drop-shadow(0 0 30px #ff922b); }
@keyframes mx-fire { to { transform: translateX(-50%) scaleY(1.3); opacity: .8; } }
.mx-laser {
  position: absolute; z-index: 1; height: 8px; margin-top: -4px; transform-origin: 0 50%; border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, #fff, #74c0fc 30%, #e599f7); box-shadow: 0 0 14px #74c0fc, 0 0 28px #e599f7; animation: mx-laser .38s ease-out forwards;
}
.mx-laser.is-miss { background: linear-gradient(90deg, #fff, #ff8787); box-shadow: 0 0 14px #ff6b6b; }
@keyframes mx-laser { 0% { clip-path: inset(0 100% 0 0); } 40% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { opacity: 0; } }
.mx-meteor { position: absolute; top: var(--t); left: -20%; z-index: 0; width: 16%; opacity: .85; animation: mx-meteor var(--d) linear infinite; }
@keyframes mx-meteor { from { transform: translateX(0) rotate(0); } to { transform: translateX(800%) rotate(360deg); } }
.mx-progress { text-align: center; color: #fff; font-weight: 800; font-size: 13px; }

/* ===== 口算消消乐 ===== */
.mm-cover { position: absolute; inset: 12% 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-6deg); }
.mm-cover .mm-card { font-size: clamp(22px, 4cqh, 36px); animation: ma-bob 2.4s ease-in-out infinite; }
.mm-cover .mm-card:nth-child(2n) { animation-delay: -1.2s; }
.mm-col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px; border-radius: 24px;
  background: rgba(255, 255, 255, .4); border: 4px solid #fff; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pc) 50%, transparent), 0 8px 0 rgba(0, 0, 0, .1);
}
.mm-head { display: flex; align-items: center; gap: 8px; }
.mm-left { padding: 3px 10px; border-radius: 99px; background: #fff; font-weight: 800; font-size: 14px; }
.mm-combo { margin-left: auto; font-weight: 900; color: #fff; -webkit-text-stroke: 4px #f76707; paint-order: stroke fill; font-size: 18px; }
.mm-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 8px; }
.mm-card {
  display: grid; place-items: center; min-height: 0; padding: 4px; border: 0; border-radius: 16px; font: inherit; font-weight: 900; cursor: pointer;
  font-size: clamp(16px, 4.4cqh, 34px); white-space: nowrap; transition: transform .15s, box-shadow .15s, opacity .3s;
  animation: mm-in .45s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.mm-card.is-eq { background: linear-gradient(#6fb1ff, #3d8bfd); color: #fff; box-shadow: 0 5px 0 #1f5fc4; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.mm-card.is-ans { background: linear-gradient(#fffaf0, #ffe8b8); color: #8a4b00; box-shadow: 0 5px 0 #e0a63c; }
.mm-card:hover { transform: translateY(-3px); }
.mm-card.is-sel { transform: translateY(-5px) scale(1.06); box-shadow: 0 0 0 4px #ffd43b, 0 10px 18px rgba(0, 0, 0, .2); }
.mm-card.is-wrong { animation: ma-shake .45s; box-shadow: 0 0 0 4px #ff6b6b; }
.mm-card.is-gone { animation: mm-out .45s ease-in forwards; pointer-events: none; }
@keyframes mm-in { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
@keyframes mm-out { 30% { transform: scale(1.2) rotate(6deg); filter: brightness(1.6); } 100% { transform: scale(0) rotate(-20deg); opacity: 0; } }

/* ===== 翻牌配对王 ===== */
.mc-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(120px, 17%) 1fr minmax(120px, 17%); gap: 10px; padding: 10px; }
.mc-mascot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 4%; }
.mc-mascot img { width: 100%; max-width: 220px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); animation: ma-bob 2.8s ease-in-out infinite; }
.mc-mascot.is-right img { animation-delay: -1.4s; }
.mc-bubble {
  position: relative; margin: 0; padding: 10px 14px; border-radius: 18px; background: #fff; font-weight: 800; text-align: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .1); max-width: 100%;
}
.mc-bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.mc-bubble.is-new { animation: ma-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.mc-center { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.mc-scores { display: flex; justify-content: center; gap: 14px; }
.mc-score {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .9);
  border: 3px solid var(--pc); font-weight: 800; transition: transform .2s, box-shadow .2s; opacity: .75;
}
.mc-score b { font-size: 22px; color: var(--pc); }
.mc-score.is-turn { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 4px #ffd43b, 0 5px 0 var(--pd); }
.mc-board {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 10px; padding: 14px;
  border-radius: 26px; background: linear-gradient(#ffe8c2, #ffd08a); border: 8px solid #c97b2d; box-shadow: inset 0 0 0 4px #fff3dc, 0 10px 0 #8a4f16, 0 18px 40px rgba(0, 0, 0, .25);
}
.mc-card {
  position: relative; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px;
  animation: mm-in .5s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.mc-face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
}
.mc-back { background: url("/img/games/math/sprites/card-back.jpg") center / cover; border: 3px solid #fff; }
.mc-front { transform: rotateY(180deg); font-weight: 900; font-size: clamp(16px, 4.4cqh, 34px); white-space: nowrap; border: 3px solid #fff; }
.mc-front.is-eq { background: linear-gradient(#6fb1ff, #3d8bfd); color: #fff; }
.mc-front.is-ans { background: linear-gradient(#fffaf0, #ffe8b8); color: #8a4b00; }
.mc-card.is-open .mc-back { transform: rotateY(-180deg); }
.mc-card.is-open .mc-front { transform: rotateY(0); }
.mc-card:not(.is-open):hover .mc-back { transform: translateY(-4px) rotate(-1.5deg); }
.mc-card.is-matched { pointer-events: none; }
.mc-card.is-matched .mc-front { box-shadow: 0 0 0 4px #40c057, 0 0 18px #8ce99a; animation: ma-pop .4s; }
@media (max-width: 900px) { .mc-wrap { grid-template-columns: 1fr; } .mc-mascot { display: none; } }

/* ===== 速算争霸赛 ===== */
.mt-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(150px, 40%) 1fr; gap: 10px; padding: 10px; }
.mt-field {
  position: relative; overflow: hidden; border-radius: 24px; border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
  background: linear-gradient(transparent 70%, rgba(120, 190, 80, .55) 70%), rgba(255, 255, 255, .15);
}
.mt-line { position: absolute; top: 8%; bottom: 8%; width: 6px; border-radius: 3px; z-index: 1; }
.mt-line.is-left { left: 12%; background: repeating-linear-gradient(#2f7cf6 0 14px, #fff 14px 22px); }
.mt-line.is-right { right: 12%; background: repeating-linear-gradient(#f0463c 0 14px, #fff 14px 22px); }
.mt-center { position: absolute; left: 50%; top: 4%; bottom: 4%; width: 4px; margin-left: -2px; background: rgba(255, 255, 255, .9); z-index: 1; }
.mt-team {
  --pos: 0; position: absolute; left: 50%; top: 8%; bottom: 16%; z-index: 2; display: flex; align-items: center; width: 84cqw; max-width: 1100px;
  transform: translateX(calc(-50% + var(--pos) * 38cqw)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.mt-bear, .mt-tiger { position: relative; z-index: 2; height: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .3)); }
.mt-bear { margin-right: -7%; }
.mt-tiger { margin-left: -7%; }
.mt-rope { position: relative; flex: 1; height: 14px; margin-top: 4%; border-radius: 7px; background: repeating-linear-gradient(60deg, #c8955a 0 8px, #a87339 8px 16px); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.mt-flag { position: absolute; left: 50%; top: -38px; font-size: 34px; font-style: normal; transform: translateX(-30%); animation: mg-waddle .5s ease-in-out infinite alternate; }
.mt-team.is-pull-0 .mt-bear, .mt-team.is-pull-1 .mt-tiger { animation: mt-pull .5s ease-out; }
.mt-team.is-pull-0 .mt-tiger, .mt-team.is-pull-1 .mt-bear { animation: ma-shake .4s; }
.mt-team.is-win-0 .mt-bear, .mt-team.is-win-1 .mt-tiger { animation: ma-hop .45s ease-out infinite; }
.mt-team.is-win-0 .mt-tiger, .mt-team.is-win-1 .mt-bear { filter: grayscale(.6) drop-shadow(0 8px 5px rgba(0, 0, 0, .3)); transform: rotate(18deg); transition: transform .4s; }
@keyframes mt-pull { 40% { transform: translateX(-4%) rotate(-6deg) scale(1.05); } }
.mt-team.is-pull-1 .mt-tiger { animation-name: mt-pull-r; }
@keyframes mt-pull-r { 40% { transform: translateX(4%) rotate(6deg) scale(1.05); } }
.mt-meter { position: absolute; left: 0; right: 0; bottom: 4%; z-index: 3; display: flex; justify-content: space-between; padding: 0 3%; }
.mt-meter span { padding: 4px 16px; border-radius: 999px; background: var(--pc); color: #fff; font-weight: 800; box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.mt-meter b { font-size: 22px; }
.mt-play { display: grid; grid-template-columns: minmax(240px, 30%) 1fr minmax(240px, 30%); gap: 12px; min-height: 0; }
.mt-side { min-height: 0; display: grid; }
.mt-side .ma-keypad { height: 100%; box-sizing: border-box; justify-content: space-between; }
.mt-qs { display: grid; gap: 10px; align-content: center; }
.mt-q {
  --pc: #f08c00; display: grid; place-items: center; gap: 4px; padding: 14px; border-radius: 24px; background: #fffaf0; border: 5px solid var(--pc);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--pc) 75%, #000);
}
.mt-q small { font-weight: 800; color: var(--pc); letter-spacing: 3px; }
.mt-q b { font-size: clamp(30px, 9cqh, 76px); font-weight: 900; white-space: nowrap; }
.mt-q.is-shared b { font-size: clamp(40px, 13cqh, 104px); }
.mt-q b.is-new { animation: ma-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.mt-bot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 22px;
  background: rgba(255, 255, 255, .94); border: 4px solid var(--pc); box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 70%, #000);
}
.mt-bot img { width: 50%; max-width: 160px; animation: ma-bob 2s ease-in-out infinite; }
.mt-bot b { color: var(--pc); font-size: 20px; }
.mt-bot-bar { width: 80%; height: 10px; border-radius: 99px; background: #eee; overflow: hidden; }
.mt-bot-bar i { display: block; width: 0; height: 100%; background: var(--pc); }
.mt-bot span { font-weight: 700; color: #66718a; }