:root{
  --pink:#ff9ec8; --pink-d:#ff6fb0;
  --lav:#c9b6ff; --mint:#b8f2e6; --sky:#a9d6ff;
  --cream:#fff6fb; --ink:#5a3d5c;
  --hud:#2a1b33; --hud-glow:#ffb4e0;
  --font-disp:'Baloo 2', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;min-height:100%;}
body{
  font-family:var(--font-disp); color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%, #ffd6ec 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, #d6ccff 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, #c2f5ea 0%, transparent 55%),
    linear-gradient(160deg,#fff0f8,#f3ecff);
  overflow-x:hidden;
}
.app-shell{position:relative; min-height:100vh; display:flex; flex-direction:column; padding:0 12px 22px; z-index:1;}

/* floating background blobs */
.bg-blobs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.blob{position:absolute; border-radius:50%; filter:blur(30px); opacity:.5; animation:float 12s ease-in-out infinite;}
.b1{width:260px;height:260px;background:var(--pink);top:-60px;left:-40px;}
.b2{width:220px;height:220px;background:var(--lav);bottom:-50px;right:-30px;animation-delay:-3s;}
.b3{width:180px;height:180px;background:var(--mint);top:40%;left:60%;animation-delay:-6s;}
@keyframes float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.08);}}

/* topbar */
.topbar{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:14px 6px 8px; max-width:920px; margin:0 auto; width:100%;}
.app-title{font-size:clamp(18px,4.4vw,30px); font-weight:800; margin:0; text-align:center; flex:1;
  background:linear-gradient(90deg,var(--pink-d),var(--lav));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 0 rgba(255,255,255,.5); letter-spacing:.3px;}
.score-pill{background:#fff; border:2px solid var(--pink); color:var(--pink-d); font-weight:800;
  padding:6px 12px; border-radius:999px; font-size:14px; box-shadow:0 4px 0 rgba(255,111,176,.25); white-space:nowrap;}
.mute-btn{background:#fff; border:2px solid var(--lav); border-radius:999px; width:42px; height:42px;
  font-size:18px; cursor:pointer; box-shadow:0 4px 0 rgba(201,182,255,.35); transition:transform .1s;}
.mute-btn:active{transform:translateY(3px); box-shadow:none;}

/* layout */
.main-grid{position:relative; z-index:2; display:grid; gap:16px; width:100%; max-width:920px;
  margin:10px auto 0; grid-template-columns:1fr;}
@media(min-width:760px){ .main-grid{grid-template-columns:0.9fr 1.1fr; align-items:start;} }

.panel{background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
  border:3px solid #fff; border-radius:26px; padding:18px;
  box-shadow:0 12px 30px rgba(180,120,180,.25);}

/* mascot */
.mascot-panel{display:flex; flex-direction:column; align-items:center; gap:14px;}
.mascot-wrap{position:relative; display:flex; flex-direction:column; align-items:center; width:100%;}
.ring{--p:0%; width:200px; height:200px; border-radius:50%;
  background:conic-gradient(var(--pink) var(--p), #ecd9f7 var(--p) 100%);
  padding:8px; display:grid; place-items:center; transition:background .5s ease;
  box-shadow:0 0 0 4px #fff, 0 8px 22px rgba(255,140,200,.35);}
.ring-inner{position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,#fff,#ffe9f5); display:grid; place-items:center;}
.mascot-img{width:100%; height:100%; object-fit:cover;}
.mascot-fallface{display:none; font-size:34px; color:var(--pink-d); font-weight:800;}
.mascot-fallback .mascot-fallface{display:block;}
.bob{animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-6px) rotate(-1deg);}}
.shake{animation:wiggle .35s ease-in-out infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-3deg) scale(1.02);}50%{transform:rotate(3deg) scale(1.05);}}

.lv-badge{margin-top:12px; background:linear-gradient(90deg,var(--lav),var(--pink));
  color:#fff; font-weight:800; padding:6px 16px; border-radius:999px; font-size:13px;
  box-shadow:0 4px 0 rgba(180,120,200,.3);}
.speech{position:absolute; top:-6px; right:-6px; max-width:180px; background:#fff;
  border:3px solid var(--pink); border-radius:18px 18px 18px 4px; padding:8px 12px;
  font-size:13px; font-weight:600; color:var(--ink); box-shadow:0 6px 16px rgba(255,140,200,.3);
  animation:pop .3s ease; z-index:5;}
@keyframes pop{0%{transform:scale(.5);opacity:0;}70%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}

.stat-row{display:flex; gap:10px; width:100%; justify-content:center;}
.stat{flex:1; background:#fff; border:2px solid var(--mint); border-radius:16px; padding:8px;
  text-align:center; max-width:120px;}
.stat b{display:block; font-size:20px; color:var(--pink-d);}
.stat span{font-size:11px; color:#9c7fa0;}
.xp-note{font-size:12px; color:#9c7fa0; font-weight:600; text-align:center;}

/* calculator */
.calc-panel{display:flex; flex-direction:column; gap:12px;}
.combo-meter{position:relative; height:22px; background:#efe0f5; border-radius:999px; overflow:hidden;
  border:2px solid #fff;}
.combo-fill{position:absolute; inset:0; width:0; background:linear-gradient(90deg,#ffb347,#ff6fb0,#ff3d81);
  border-radius:999px; transition:width .3s ease; box-shadow:0 0 12px rgba(255,80,150,.6);}
.combo-label{position:absolute; inset:0; display:grid; place-items:center; font-size:12px;
  font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); z-index:2;}

.calc-display-wrap{position:relative; background:var(--hud); border-radius:18px; padding:14px 18px;
  min-height:88px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;
  box-shadow:inset 0 0 20px rgba(255,140,220,.25), 0 0 0 3px #fff;
  border:2px solid var(--hud-glow); overflow:visible;}
.calc-expr{font-family:var(--font-mono); color:#c9a6d6; font-size:14px; min-height:18px;
  word-break:break-all; text-align:right; width:100%;}
.calc-display{font-family:var(--font-mono); color:#ffd9f0; font-weight:700; font-size:clamp(26px,7vw,40px);
  text-shadow:0 0 14px rgba(255,150,220,.8); word-break:break-all; text-align:right; width:100%;}
.err-shake{animation:eshake .45s;}
@keyframes eshake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(4px);}}

/* keypad */
.keypad{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.calc-btn{border:none; border-radius:18px; padding:16px 0; font-family:var(--font-disp);
  font-weight:800; font-size:clamp(18px,4.5vw,24px); cursor:pointer; color:#fff;
  transition:transform .08s, box-shadow .08s; user-select:none;}
.calc-btn:active{transform:translateY(4px)!important; box-shadow:none!important;}
.btn-num{background:linear-gradient(160deg,#fff,#ffe4f2); color:var(--pink-d);
  box-shadow:0 5px 0 #ffc4e2;}
.btn-op{background:linear-gradient(160deg,var(--lav),#a98cff); box-shadow:0 5px 0 #8a6de0;}
.btn-fn{background:linear-gradient(160deg,var(--mint),#7fe0cd); color:#0e6b5d;
  box-shadow:0 5px 0 #5cc7b3;}
.btn-eq{background:linear-gradient(160deg,#ffb347,var(--pink-d)); box-shadow:0 5px 0 #d13b7f;
  position:relative; overflow:hidden;}
.btn-eq::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);
  animation:shimmer 2.4s linear infinite;}
@keyframes shimmer{0%{left:-60%;}100%{left:140%;}}

/* particles */
.particle-layer{position:absolute; top:20%; left:50%; z-index:6; pointer-events:none;}
.particle{position:absolute; left:0; top:0; animation:fly .9s ease-out forwards;}
@keyframes fly{0%{transform:translate(0,0) scale(.4); opacity:1;}
  100%{transform:translate(var(--tx),var(--ty)) scale(1.2); opacity:0;}}

/* toast */
.toast{position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:40;
  background:#fff; border:3px solid var(--pink); color:var(--pink-d); font-weight:800;
  padding:10px 20px; border-radius:999px; box-shadow:0 10px 26px rgba(255,120,180,.4);
  animation:toastIn .35s ease;}
@keyframes toastIn{0%{transform:translate(-50%,-20px); opacity:0;}100%{transform:translate(-50%,0); opacity:1;}}

/* level up overlay */
.levelup-overlay{position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:rgba(90,50,100,.25); backdrop-filter:blur(3px); animation:pop .3s ease; overflow:hidden;}
.levelup-card{position:relative; background:#fff; border:4px solid var(--pink); border-radius:28px;
  padding:28px 40px; text-align:center; box-shadow:0 20px 50px rgba(255,100,180,.5); animation:pop .4s ease;}
.lu-title{font-size:34px; font-weight:800; background:linear-gradient(90deg,var(--pink-d),var(--lav));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.lu-sub{font-size:16px; color:var(--ink); font-weight:600; margin-top:4px;}
.confetti{position:fixed; top:-10px; width:10px; height:14px; border-radius:2px;
  background:hsl(var(--h),90%,65%); animation:fall 1.6s ease-in var(--d) forwards;}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1;}100%{transform:translateY(105vh) rotate(720deg);opacity:0;}}

/* footer */
.foot{position:relative; z-index:2; margin:20px auto 0; max-width:920px; width:100%;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  font-size:12px; color:#9c7fa0; font-weight:600; padding:0 6px;}
.foot a{color:var(--pink-d); font-weight:800; text-decoration:none; border-bottom:2px dotted var(--pink);}
.foot a:hover{color:var(--lav);}