html,
body{
  margin:0 !important;
  padding:0 !important;
}

body{
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:18px;
  background:#f4f7fc;
  z-index:9998;
  pointer-events:none;
}

.navbar,
.site-header,
header.site-header,
header.navbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  margin-top:0 !important;
  transform:none !important;
  z-index:10000 !important;
}

.site-header-wrap,
.navbar-wrap,
.header-wrap,
.header-outer,
.topbar,
.top-header,
.nav-wrap{
  margin-top:0 !important;
  padding-top:0 !important;
  top:0 !important;
}

main,
#content,
.content,
.content-wrapper,
.page-wrapper,
.site-main{
  margin-top:0 !important;
  padding-top:0 !important;
}

*{
  box-sizing:border-box;
}

:root{
  --panel:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:#f4f7ff;
  --muted:#b6c3e2;

  --gold1:#ffd85f;
  --gold2:#f6b81f;

  --danger1:#ff9aa0;
  --danger2:#f45b66;

  --ground1:#6a300d;
  --ground2:#4a1805;

  --normal1:#ffe37a;
  --normal2:#ffc62e;

  --angel1:#f7fbff;
  --angel2:#d9ecff;

  --bomb1:#ff9a9a;
  --bomb2:#ff5b5b;

  --finish1:#7ea8ff;
  --finish2:#67e0cb;

  --shadow:0 10px 26px rgba(0,0,0,.22);
  --shadow-lg:0 20px 56px rgba(0,0,0,.34);
}

.math-rain-page{
  width:100%;
  min-height:100vh;
  padding:86px 12px 16px !important;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:radial-gradient(circle at top, #233760 0%, #13264a 34%, #09111f 100%);
  color:var(--text);
  font-family:Arial, sans-serif;
}

.game-shell{
  width:100%;
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:10px;
}

.rain-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.brand-box{
  min-width:0;
}

.logo{
  margin:0;
  font-size:24px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--gold1);
  text-shadow:0 0 20px rgba(255,216,95,.24);
}

.tagline{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
}

.control-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.56fr) 190px;
  gap:10px;
  align-items:stretch;
}

.operation-panel,
.status-panel,
.button-panel,
.bottom-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px 12px;
  backdrop-filter:blur(8px);
}

.operation-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.status-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.panel-title{
  font-size:11px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
  letter-spacing:.4px;
}

.hearts-title{
  margin-bottom:5px;
}

.op-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.op-btn,
.main-btn,
.secondary-btn,
.submit-btn,
.mobile-pad-btn{
  border:none;
  cursor:pointer;
  font-weight:900;
  border-radius:14px;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .15s ease,
    filter .15s ease;
  text-decoration:none;
}

.op-btn:hover,
.main-btn:hover,
.secondary-btn:hover,
.submit-btn:hover,
.mobile-pad-btn:hover{
  transform:translateY(-1px);
}

.op-btn{
  width:52px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  font-size:20px;
  padding:0;
}

.op-btn-mixed{
  width:84px;
  font-size:14px;
}

.op-btn.active{
  background:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 100%);
  color:#111;
  box-shadow:0 10px 24px rgba(246,184,31,.24);
}

.op-btn:disabled{
  cursor:not-allowed;
  opacity:.48;
  filter:grayscale(.2);
  transform:none !important;
  box-shadow:none !important;
}

.hearts-panel{
  padding:10px;
  border-radius:16px;
  background:rgba(255,100,120,.10);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hearts-bar{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  align-items:center;
  min-height:28px;
}

.heart-slot{
  width:100%;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
}

.heart-slot.active{
  color:#ff6d87;
  background:rgba(255,109,135,.14);
  box-shadow:0 0 12px rgba(255,109,135,.16);
}

.button-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}

.main-btn{
  padding:12px 14px;
  background:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 100%);
  color:#111;
  font-size:16px;
  box-shadow:0 10px 24px rgba(246,184,31,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.secondary-btn{
  padding:12px 14px;
  background:linear-gradient(180deg,var(--danger1) 0%,var(--danger2) 100%);
  color:#fff;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.game-area{
  position:relative;
  width:100%;
  height:500px;
  min-height:500px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(
      180deg,
      rgba(106,146,222,.16) 0%,
      rgba(42,69,125,.10) 30%,
      rgba(4,9,20,.80) 100%
    );
  box-shadow:var(--shadow-lg);
}

.sky-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), transparent 42%),
    radial-gradient(circle at 12% 22%, rgba(127,194,255,.16), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(127,194,255,.12), transparent 24%);
}

.stars-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 35%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 12%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 20%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 11%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.8) 0 1px, transparent 2px);
}

.reward-aura{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:58px;
  background:linear-gradient(180deg,var(--ground1) 0%,var(--ground2) 100%);
  border-top:3px solid rgba(255,191,116,.76);
}

.equation{
  position:absolute;
  min-width:78px;
  padding:8px 12px;
  border-radius:16px;
  font-size:20px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  user-select:none;
  box-shadow:var(--shadow);
  z-index:10;
}

.eq-normal{
  color:#101828;
  background:linear-gradient(180deg,var(--normal1) 0%,var(--normal2) 100%);
  box-shadow:
    0 14px 28px rgba(255,190,45,.26),
    inset 0 2px 0 rgba(255,255,255,.56);
}

.eq-bomb{
  color:#fff;
  background:linear-gradient(180deg,var(--bomb1) 0%,var(--bomb2) 100%);
  box-shadow:
    0 14px 28px rgba(255,90,90,.28),
    inset 0 2px 0 rgba(255,255,255,.22);
}

.eq-ringwing{
  color:#1b3f68;
  background:linear-gradient(180deg,var(--angel1) 0%,var(--angel2) 100%);
  box-shadow:
    0 14px 28px rgba(159,209,255,.32),
    inset 0 2px 0 rgba(255,255,255,.62),
    0 0 20px rgba(214,236,255,.28);
  overflow:visible;
  z-index:12;
}

.eq-ringwing::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  width:24px;
  height:8px;
  transform:translateX(-50%);
  border:3px solid #ffd24f;
  border-radius:50%;
  background:rgba(255,244,166,.32);
  box-shadow:0 0 12px rgba(255,210,79,.42);
}

.eq-ringwing::after{
  content:none;
}

.equation.hit{
  animation:popOut .25s ease forwards;
}

.equation.miss{
  animation:splashDown .28s ease forwards;
}

@keyframes popOut{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.2);}
}

@keyframes splashDown{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.25,.72);}
}

.finish-fx-layer{
  position:absolute;
  inset:0;
  z-index:58;
  pointer-events:none;
  overflow:hidden;
}

.finish-drop-star{
  position:absolute;
  top:-42px;
  font-size:24px;
  line-height:1;
  color:#ffe17d;
  text-shadow:
    0 0 10px rgba(255,215,106,.65),
    0 0 20px rgba(255,186,66,.36);
  opacity:0;
  animation:finishStarDrop linear forwards;
}

@keyframes finishStarDrop{
  0%{
    opacity:0;
    transform:translateY(-40px) rotate(0deg) scale(.65);
  }
  10%{
    opacity:1;
  }
  100%{
    opacity:.95;
    transform:translateY(440px) rotate(360deg) scale(1.1);
  }
}

.finish-gain-pop{
  position:absolute;
  left:50%;
  top:18%;
  transform:translate(-50%, 0);
  padding:12px 20px;
  border-radius:999px;
  font-weight:1000;
  font-size:22px;
  color:#fffef1;
  background:linear-gradient(90deg, rgba(255,215,106,.30), rgba(126,168,255,.22), rgba(255,95,138,.22));
  border:1px solid rgba(255,230,145,.44);
  box-shadow:
    0 18px 42px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.26);
  animation:finishGainFloat 1.7s ease forwards;
  white-space:nowrap;
}

@keyframes finishGainFloat{
  0%{opacity:0; transform:translate(-50%, 18px) scale(.88);}
  12%{opacity:1;}
  100%{opacity:0; transform:translate(-50%, -90px) scale(1.08);}
}

.overlay{
  position:absolute;
  inset:0;
  display:none;
  background:rgba(7,10,18,.16);
  backdrop-filter:blur(2px);
  z-index:55;
  padding:14px;
}

.overlay.show{
  display:flex;
}

.start-overlay{
  align-items:center;
  justify-content:center;
}

.reward-intro-overlay{
  align-items:center;
  justify-content:center;
  z-index:64;
  background:rgba(4,7,14,.30);
  backdrop-filter:blur(4px);
}

.finish-overlay{
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:10px;
}

.overlay-card{
  width:min(100%, 400px);
  padding:18px 18px;
  border-radius:22px;
  text-align:center;
  background:rgba(9,19,38,.98);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.overlay-card h2{
  margin:0 0 8px;
  font-size:26px;
  color:var(--gold1);
}

.overlay-card p{
  margin:0 0 10px;
  line-height:1.45;
  color:#eef5ff !important;
  font-size:13px;
  opacity:1 !important;
}

.hidden{
  display:none !important;
}

.start-card{
  width:min(100%, 320px);
}

.start-card p{
  display:none;
}

.start-overlay-btn{
  min-width:138px;
}

.reward-intro-card{
  position:relative;
  width:min(100%, 360px);
  min-height:330px;
  padding:22px 20px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,220,115,.20), transparent 28%),
    radial-gradient(circle at 50% 40%, rgba(103,224,203,.10), transparent 42%),
    linear-gradient(180deg, rgba(11,22,43,.985), rgba(8,17,34,.99));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 28px 80px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.reward-intro-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,215,106,.10), transparent 32%),
    radial-gradient(circle at 20% 20%, rgba(126,168,255,.10), transparent 28%),
    radial-gradient(circle at 80% 28%, rgba(255,95,138,.09), transparent 26%);
}

.reward-intro-fx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.reward-intro-badge{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(135deg, #7ea8ff, #67e0cb);
  color:#07111d;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.reward-intro-star-wrap{
  position:relative;
  z-index:2;
  width:148px;
  height:148px;
  margin:16px auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.reward-intro-star-core{
  position:relative;
  z-index:3;
  font-size:76px;
  line-height:1;
  color:#ffe587;
  text-shadow:
    0 0 12px rgba(255,225,120,.85),
    0 0 28px rgba(255,192,72,.42),
    0 0 54px rgba(103,224,203,.22);
  animation:rewardCorePulse 1.1s ease-in-out infinite alternate;
}

.reward-intro-star-ring{
  position:absolute;
  inset:0;
  margin:auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}

.reward-intro-star-ring-1{
  width:112px;
  height:112px;
  box-shadow:
    0 0 0 8px rgba(255,215,106,.08),
    0 0 34px rgba(255,215,106,.18);
  animation:rewardRingSpin 5s linear infinite;
}

.reward-intro-star-ring-2{
  width:144px;
  height:144px;
  box-shadow:
    0 0 0 10px rgba(126,168,255,.06),
    0 0 38px rgba(103,224,203,.14);
  animation:rewardRingSpinReverse 7s linear infinite;
}

.reward-intro-amount{
  position:relative;
  z-index:2;
  margin-top:2px;
  font-size:54px;
  font-weight:1000;
  line-height:1;
  color:#fff7ca;
  text-shadow:
    0 0 14px rgba(255,216,95,.28),
    0 0 34px rgba(255,216,95,.14);
}

.reward-intro-text{
  position:relative;
  z-index:2;
  margin-top:14px;
  color:#eef5ff;
  font-size:15px;
  line-height:1.4;
}

.reward-intro-falling-star{
  position:absolute;
  top:-34px;
  color:#ffe27a;
  line-height:1;
  opacity:0;
  text-shadow:
    0 0 10px rgba(255,215,106,.72),
    0 0 20px rgba(255,180,72,.34);
  animation:rewardIntroStarFall linear forwards;
}

.reward-intro-falling-star.big{
  color:#fff0a6;
  filter:drop-shadow(0 0 10px rgba(255,225,120,.42));
}

.reward-intro-burst{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,228,120,.95) 45%, rgba(255,228,120,0) 70%);
  animation:rewardBurstOut .95s ease forwards;
}

@keyframes rewardCorePulse{
  0%{transform:scale(.96) rotate(-4deg);}
  100%{transform:scale(1.04) rotate(4deg);}
}

@keyframes rewardRingSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes rewardRingSpinReverse{
  from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}

@keyframes rewardIntroStarFall{
  0%{
    opacity:0;
    transform:translateY(-22px) scale(.55) rotate(0deg);
  }
  10%{
    opacity:1;
  }
  100%{
    opacity:.95;
    transform:translateY(360px) scale(1.18) rotate(360deg);
  }
}

@keyframes rewardBurstOut{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.18);
  }
  20%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(2.4);
  }
}

.finish-card{
  position:relative;
  width:min(100%, 320px);
  max-height:84%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 14px 14px;
  background:
    radial-gradient(circle at top, rgba(126,168,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(11,22,43,.995), rgba(8,17,34,.995));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 24px 66px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.finish-card::-webkit-scrollbar{
  width:7px;
}

.finish-card::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}

.finish-back-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,221,120,.12), transparent 35%),
    radial-gradient(circle at 10% 20%, rgba(126,168,255,.08), transparent 30%),
    radial-gradient(circle at 90% 30%, rgba(103,224,203,.07), transparent 28%);
}

.finish-badge{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--finish1), var(--finish2));
  color:#07111d !important;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.finish-card h2,
.finish-card p,
.finish-card .finish-star-label,
.finish-card .result-k,
.finish-card .result-v{
  position:relative;
  z-index:2;
  opacity:1 !important;
  filter:none !important;
}

.finish-card h2{
  margin:0 0 6px;
  font-size:20px;
  color:#ffd95e !important;
  text-shadow:0 0 18px rgba(255,216,95,.16);
}

.finish-card p{
  margin:0 0 8px;
  color:#eef5ff !important;
  font-size:12px;
}

.finish-hero-stars{
  position:relative;
  z-index:2;
  margin:8px 0 10px;
  padding:12px 12px;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,221,120,.13), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.finish-star-label{
  color:#dcebff !important;
  font-size:10px;
  font-weight:900;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.finish-star-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff6c9 !important;
  font-size:28px;
  font-weight:1000;
  line-height:1;
  text-shadow:
    0 0 12px rgba(255,216,95,.22),
    0 0 24px rgba(255,216,95,.12);
}

.finish-star-plus{
  color:#ffffff !important;
}

.finish-star-icon{
  color:#ffd95f !important;
}

.finish-result-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 10px;
}

.result-item{
  position:relative;
  z-index:2;
  padding:10px 8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:60px;
  opacity:1 !important;
  filter:none !important;
}

.result-k{
  color:#d8e8ff !important;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.result-v{
  color:#ffffff !important;
  font-size:17px;
  font-weight:1000;
  line-height:1.1;
}

.finish-actions{
  position:relative;
  z-index:2;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

.finish-actions-top{
  margin-top:4px;
}

.finish-actions-bottom{
  margin-top:8px;
}

.finish-actions .main-btn,
.finish-actions .secondary-btn{
  flex:1 1 0;
  min-width:0;
  padding:10px 10px;
  font-size:14px;
}

.ranking-link-btn{
  width:100%;
}

.level-intro{
  position:absolute;
  inset:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:rgba(7,10,18,.18);
}

.level-intro.hidden{
  display:none;
}

.level-intro-text{
  padding:14px 22px;
  border-radius:999px;
  background:rgba(255,216,95,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#ffe48f;
  font-size:32px;
  font-weight:900;
  letter-spacing:2px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  animation:introPop .9s ease;
}

@keyframes introPop{
  0%{opacity:0;transform:scale(.75);}
  25%{opacity:1;transform:scale(1.06);}
  100%{opacity:1;transform:scale(1);}
}

.bottom-panel{
  display:grid;
  gap:10px;
  padding:10px 12px;
}

.answer-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 148px;
  gap:8px;
}

.answer-input{
  width:100%;
  min-width:0;
  border:none;
  outline:none;
  border-radius:18px;
  padding:14px 14px;
  font-size:20px;
  text-align:center;
  font-weight:900;
  background:#f4f7ff;
  color:#111827;
}

.answer-input::placeholder{
  color:#60708d;
}

.submit-btn{
  width:100%;
  padding:14px 14px;
  background:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 100%);
  color:#111;
  font-size:17px;
  box-shadow:0 10px 24px rgba(246,184,31,.22);
}

.mobile-pad-wrap{
  display:none;
}

.mobile-pad{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.mobile-pad-btn{
  min-height:52px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#ffffff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:22px;
  font-weight:1000;
}

.mobile-pad-btn-util{
  color:#ffe7b0;
  font-size:18px;
}

.mobile-pad-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

.mobile-action-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:8px;
}

.mobile-action-btn{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:8px 8px;
  font-size:14px;
  border-radius:14px;
}

.bottom-meta,
.info-chip,
.message{
  display:none !important;
}

.float-text{
  position:absolute;
  z-index:35;
  pointer-events:none;
  font-weight:900;
  animation:floatTextUp .95s ease forwards;
}

.float-text.bad{
  color:#ff9f9f;
  font-size:24px;
}

.float-text.ring{
  color:#d8efff;
  font-size:24px;
}

.reward-float{
  position:absolute;
  z-index:40;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,244,182,.16);
  box-shadow:
    0 8px 20px rgba(255,214,79,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation:rewardFloatUp 1s ease forwards;
}

.reward-number{
  font-size:22px;
  font-weight:900;
  color:#fff1aa;
  text-shadow:
    0 0 8px rgba(255,241,170,.3),
    0 2px 0 rgba(90,60,0,.22);
}

.reward-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  font-size:22px;
  line-height:1;
  font-weight:900;
  color:#ffd95e;
  text-shadow:
    0 0 4px rgba(255,226,120,.75),
    0 0 10px rgba(255,200,60,.55),
    0 2px 0 rgba(120,68,0,.28);
  transform:translateY(-1px);
  filter:drop-shadow(0 0 10px rgba(255,214,79,.38));
}

@keyframes floatTextUp{
  0%{opacity:0;transform:translateY(0) scale(.86);}
  15%{opacity:1;}
  100%{opacity:0;transform:translateY(-55px) scale(1.08);}
}

@keyframes rewardFloatUp{
  0%{opacity:0;transform:translateY(8px) scale(.75);}
  15%{opacity:1;transform:translateY(-4px) scale(1);}
  100%{opacity:0;transform:translateY(-72px) scale(1.06);}
}

@media (max-width: 980px){
  .math-rain-page{
    padding:82px 10px 16px !important;
  }

  .game-shell{
    max-width:100%;
  }

  .control-strip{
    grid-template-columns:1fr;
  }

  .button-panel{
    flex-direction:row;
  }

  .button-panel > *{
    flex:1;
  }

  .game-area{
    height:450px;
    min-height:450px;
  }
}

@media (max-width: 720px){
  body::before{
    height:14px;
  }

  .math-rain-page{
    min-height:100vh;
    padding:76px 8px 14px !important;
  }

  .game-shell{
    gap:10px;
  }

  .logo{
    font-size:24px;
  }

  .tagline{
    font-size:11px;
    line-height:1.4;
  }

  .control-strip{
    gap:10px;
  }

  .operation-panel,
  .status-panel,
  .button-panel,
  .bottom-panel{
    border-radius:18px;
    padding:10px;
  }

  .op-buttons{
    gap:8px;
    justify-content:center;
  }

  .op-btn{
    width:54px;
    height:48px;
    font-size:18px;
    border-radius:14px;
  }

  .op-btn-mixed{
    width:84px;
    font-size:14px;
  }

  .hearts-panel{
    padding:10px;
  }

  .hearts-bar{
    gap:6px;
  }

  .heart-slot{
    height:38px;
    font-size:20px;
    width:100%;
  }

  .button-panel{
    gap:8px;
  }

  .main-btn,
  .secondary-btn{
    padding:13px 12px;
    font-size:15px;
    border-radius:14px;
  }

  .game-area{
    height:430px;
    min-height:430px;
    border-radius:22px;
  }

  .equation{
    min-width:70px;
    font-size:18px;
    padding:8px 11px;
    border-radius:16px;
  }

  .eq-ringwing::before{
    top:-10px;
    width:22px;
    height:8px;
    border-width:3px;
  }

  .overlay{
    padding:10px;
  }

  .overlay-card{
    width:min(100%, 340px);
    border-radius:20px;
  }

  .reward-intro-card{
    width:min(100%, 320px);
    min-height:300px;
    padding:18px 14px;
  }

  .reward-intro-star-wrap{
    width:132px;
    height:132px;
    margin:14px auto 8px;
  }

  .reward-intro-star-core{
    font-size:68px;
  }

  .reward-intro-amount{
    font-size:44px;
  }

  .reward-intro-text{
    font-size:14px;
  }

  .finish-card{
    width:min(100%, 300px);
    max-height:84vh;
    padding:15px 12px 14px;
  }

  .finish-card h2{
    font-size:18px;
  }

  .finish-star-value{
    font-size:24px;
  }

  .result-grid,
  .finish-result-grid{
    gap:7px;
  }

  .result-item{
    min-height:54px;
    padding:7px;
  }

  .result-k{
    font-size:8px;
  }

  .result-v{
    font-size:15px;
  }

  .reward-number,
  .reward-icon{
    font-size:20px;
  }

  .float-text.bad,
  .float-text.ring{
    font-size:22px;
  }

  .finish-gain-pop{
    font-size:20px;
    padding:10px 16px;
  }
}

@media (max-width: 640px){
  .math-rain-page{
    padding:74px 6px 8px !important;
  }

  .game-shell{
    gap:8px;
  }

  .rain-head{
    display:none;
  }

  .control-strip{
    gap:8px;
  }

  .button-panel{
    display:none;
  }

  .operation-panel,
  .status-panel,
  .bottom-panel{
    border-radius:16px;
    padding:8px;
  }

  .operation-panel{
    padding-bottom:10px;
  }

  .panel-title{
    margin-bottom:6px;
    font-size:10px;
  }

  .op-buttons{
    gap:6px;
  }

  .op-btn{
    width:48px;
    height:42px;
    font-size:17px;
    border-radius:12px;
  }

  .op-btn-mixed{
    width:74px;
    font-size:12px;
  }

  .hearts-panel{
    padding:8px;
    border-radius:14px;
  }

  .heart-slot{
    height:34px;
    font-size:18px;
  }

  .game-area{
    height:360px;
    min-height:360px;
    border-radius:20px;
  }

  .ground{
    height:52px;
  }

  .equation{
    min-width:64px;
    font-size:16px;
    padding:7px 10px;
    border-radius:14px;
  }

  .bottom-panel{
    gap:8px;
  }

  .answer-panel{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
    gap:8px;
  }

  .answer-input,
  .submit-btn{
    width:100%;
    min-width:0;
  }

  .answer-input{
    min-height:42px;
    height:42px;
    max-height:42px;
    padding:4px 10px;
    border-radius:16px;
    font-size:18px;
    line-height:1.1;
    text-align:center;
  }

  .submit-btn{
    min-height:42px;
    height:42px;
    border-radius:16px;
    font-size:16px;
    padding:4px 10px;
  }

  .mobile-pad-wrap{
    display:block;
  }

  .mobile-pad{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
  }

  .mobile-pad-btn{
    min-height:46px;
    border-radius:14px;
    font-size:20px;
  }

  .mobile-action-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:8px;
  }

  .mobile-action-btn{
    min-height:44px;
    height:44px;
    border-radius:14px;
    padding:6px 6px;
    font-size:13px;
    white-space:nowrap;
  }

  .finish-card{
    width:min(100%, 348px);
    max-height:88vh;
    padding:18px 14px 16px;
  }

  .finish-card h2{
    font-size:18px;
  }

  .finish-hero-stars{
    margin:8px 0 8px;
    padding:10px 10px;
  }

  .finish-star-value{
    font-size:24px;
  }

  .result-item{
    min-height:52px;
    padding:8px 6px;
  }

  .result-k{
    font-size:8px;
  }

  .result-v{
    font-size:15px;
  }

  .finish-actions .main-btn,
  .finish-actions .secondary-btn{
    min-height:42px;
    padding:8px 8px;
    font-size:13px;
  }
}

.no-key-card{
  width:min(100%, 340px);
  max-height:none;
}

.no-key-card p{
  margin:8px 0 12px;
}