@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Fredoka:wght@400;600;700&display=swap');

:root{
  --bg1:#ffd6f1;
  --bg2:#ffe2b3;
  --bg3:#c9f3ff;
  --bg4:#d2ffe1;
  --panel:rgba(255, 255, 255, 0.86);
  --text:#4a213c;
  --muted:#7a5b6d;
  --chip:rgba(255,255,255,0.78);
  --btn:#ff8dc5;
  --btn2:#ffc2dd;
  --accent:#6fe7d3;
  --kidPink:#ff6fb8;
  --kidYellow:#ffc481;
  --mint:#7ee8d6;
  --sky:#7ec8ff;
  --lav:#c5b4ff;
  --outline:rgba(255, 166, 207, 0.5);
  --outlineSoft:rgba(255, 201, 227, 0.45);
  --shadowSoft:rgba(255, 114, 167, 0.2);
  --shadowStrong:rgba(140, 46, 86, 0.24);
}

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(720px 520px at 12% 18%, rgba(255,255,255,0.88), transparent 60%),
    radial-gradient(820px 620px at 88% 12%, rgba(255,220,168,0.72), transparent 60%),
    radial-gradient(760px 620px at 68% 84%, rgba(255,196,230,0.55), transparent 62%),
    radial-gradient(820px 720px at 22% 86%, rgba(182,255,221,0.55), transparent 62%),
    radial-gradient(760px 760px at 50% 50%, rgba(200,198,255,0.35), transparent 65%),
    linear-gradient(135deg, var(--bg2), var(--bg1), var(--bg3));
  background-size:200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  background-position:0% 0%, 100% 0%, 0% 100%, 0% 45%, 50% 50%, 0% 50%;
  animation:bgShift 18s ease-in-out infinite alternate;
  font-family: "Fredoka", "Baloo 2", "Comic Sans MS", "Trebuchet MS", sans-serif;
  color:var(--text);
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior:none;
}

body{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
}

body::before{
  content:"";
  position:fixed;
  inset:-10% -10%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 1px, rgba(255,255,255,0) 2px),
    radial-gradient(circle, rgba(255,206,229,0.45) 0, rgba(255,206,229,0.45) 1px, rgba(255,255,255,0) 2px);
  background-size:120px 120px, 160px 160px;
  opacity:0.45;
  pointer-events:none;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:-25% -25%;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27380%27%20height%3D%27380%27%20viewBox%3D%270%200%20380%20380%27%3E%0A%3Cg%20opacity%3D%270.6%27%3E%0A%20%20%3Ccircle%20cx%3D%2780%27%20cy%3D%2752%27%20r%3D%2720%27%20fill%3D%27rgb%28255%2C176%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27110%27%20cy%3D%2778%27%20r%3D%2720%27%20fill%3D%27rgb%28255%2C176%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27100%27%20cy%3D%27110%27%20r%3D%2720%27%20fill%3D%27rgb%28255%2C176%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%2760%27%20cy%3D%27110%27%20r%3D%2720%27%20fill%3D%27rgb%28255%2C176%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%2750%27%20cy%3D%2778%27%20r%3D%2720%27%20fill%3D%27rgb%28255%2C176%2C214%29%27/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%2780%27%20cy%3D%2782%27%20r%3D%2714%27%20fill%3D%27rgb%28255%2C238%2C190%29%27%20opacity%3D%270.85%27/%3E%0A%0A%3Cg%20opacity%3D%270.55%27%3E%0A%20%20%3Ccircle%20cx%3D%27270%27%20cy%3D%2760%27%20r%3D%2722%27%20fill%3D%27rgb%28197%2C180%2C255%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27300%27%20cy%3D%2788%27%20r%3D%2722%27%20fill%3D%27rgb%28197%2C180%2C255%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27286%27%20cy%3D%27120%27%20r%3D%2722%27%20fill%3D%27rgb%28197%2C180%2C255%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27254%27%20cy%3D%27120%27%20r%3D%2722%27%20fill%3D%27rgb%28197%2C180%2C255%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27240%27%20cy%3D%2788%27%20r%3D%2722%27%20fill%3D%27rgb%28197%2C180%2C255%29%27/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%27270%27%20cy%3D%2792%27%20r%3D%2715%27%20fill%3D%27rgb%28190%2C255%2C232%29%27%20opacity%3D%270.8%27/%3E%0A%0A%3Cg%20opacity%3D%270.6%27%3E%0A%20%20%3Ccircle%20cx%3D%27130%27%20cy%3D%27230%27%20r%3D%2724%27%20fill%3D%27rgb%28255%2C210%2C170%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27160%27%20cy%3D%27260%27%20r%3D%2724%27%20fill%3D%27rgb%28255%2C210%2C170%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27130%27%20cy%3D%27290%27%20r%3D%2724%27%20fill%3D%27rgb%28255%2C210%2C170%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27100%27%20cy%3D%27260%27%20r%3D%2724%27%20fill%3D%27rgb%28255%2C210%2C170%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27100%27%20cy%3D%27230%27%20r%3D%2724%27%20fill%3D%27rgb%28255%2C210%2C170%29%27/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%27130%27%20cy%3D%27260%27%20r%3D%2716%27%20fill%3D%27rgb%28255%2C244%2C210%29%27%20opacity%3D%270.85%27/%3E%0A%0A%3Cg%20opacity%3D%270.55%27%3E%0A%20%20%3Ccircle%20cx%3D%27300%27%20cy%3D%27240%27%20r%3D%2722%27%20fill%3D%27rgb%28174%2C238%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27330%27%20cy%3D%27268%27%20r%3D%2722%27%20fill%3D%27rgb%28174%2C238%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27316%27%20cy%3D%27300%27%20r%3D%2722%27%20fill%3D%27rgb%28174%2C238%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27284%27%20cy%3D%27300%27%20r%3D%2722%27%20fill%3D%27rgb%28174%2C238%2C214%29%27/%3E%0A%20%20%3Ccircle%20cx%3D%27270%27%20cy%3D%27268%27%20r%3D%2722%27%20fill%3D%27rgb%28174%2C238%2C214%29%27/%3E%0A%3C/g%3E%0A%3Ccircle%20cx%3D%27300%27%20cy%3D%27272%27%20r%3D%2715%27%20fill%3D%27rgb%28255%2C186%2C224%29%27%20opacity%3D%270.8%27/%3E%0A%3C/svg%3E"),
    radial-gradient(28px 28px at 18% 20%, rgba(255,210,232,0.55), rgba(255,210,232,0) 70%),
    radial-gradient(26px 26px at 70% 18%, rgba(255,232,180,0.5), rgba(255,232,180,0) 70%),
    radial-gradient(30px 30px at 62% 78%, rgba(197,180,255,0.45), rgba(197,180,255,0) 70%),
    radial-gradient(26px 26px at 30% 70%, rgba(170,236,214,0.45), rgba(170,236,214,0) 70%);
  background-size:380px 380px, 240px 240px, 260px 260px, 280px 280px, 240px 240px;
  background-position:0 0, 12% 18%, 72% 12%, 60% 78%, 28% 72%;
  filter:blur(12px) saturate(1.2);
  opacity:0.6;
  pointer-events:none;
  z-index:0;
  animation:flowerFloat 26s ease-in-out infinite alternate;
}

/* Mobile / low-perf: freeze and simplify heavy backgrounds */
html.lowPerf,
body.lowPerf{
  animation:none;
}
body.lowPerf::before{
  animation:none;
  opacity:0.25;
}
body.lowPerf::after{
  content:none;
  background-image:none;
  filter:none;
  animation:none;
  opacity:0;
}
body.lowPerf #centerOverlay::before{
  animation:none;
  opacity:0;
}
body.lowPerf .levelGrid{
  animation:none;
}


/* Generic utility */
.hidden{display:none !important;}

#app, #app *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}


#app{position:relative;width:100%;height:100%;z-index:1;}
#glcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* Soft FX overlay (sparkles, rings). Uses additive blending. */
#fxCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  mix-blend-mode: screen;
}

#hud{position:absolute;inset:0;pointer-events:none;}

#topbar{
  pointer-events:auto;
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  left:calc(10px + env(safe-area-inset-left));
  right:calc(10px + env(safe-area-inset-right));
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  z-index:5;
}

.spacer{flex:1;}

#controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
  /* Allow wrapping inside the controls group on narrow screens */
  max-width:100%;
  flex:1 1 320px;
  min-width:0;
}

#controls .btn.icon{flex:0 0 auto;}


.chip{
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.7)),
             linear-gradient(135deg, rgba(255,210,231,0.4), rgba(193,236,255,0.35), rgba(214,255,232,0.35));
  border:2px solid var(--outlineSoft);
  border-radius:18px;
  padding:8px 12px;
  font-size:14px;
  color:var(--text);
  backdrop-filter: blur(10px);
  box-shadow:0 10px 25px var(--shadowSoft), 0 0 0 2px rgba(255,255,255,0.55);
}

.coinChip{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  letter-spacing:0.2px;
  border-radius:18px;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(255,226,176,0.5), rgba(255,174,214,0.28)),
             linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.56));
}
.coinSvg{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
  filter: drop-shadow(0 2px 3px var(--shadowSoft));
}
#coinCount{min-width:34px; text-align:right;}

@media (max-width:420px){
  .coinSvg{width:16px;height:16px;}
}

.btn{
  pointer-events:auto;
  border:2px solid rgba(255,255,255,0.7);
  background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35)),
             linear-gradient(120deg, var(--btn2), var(--btn), var(--mint));
  color:var(--text);
  padding:10px 14px;
  border-radius:18px;
  font-weight:700;
  letter-spacing:0.2px;
  cursor:pointer;
  box-shadow:0 12px 26px var(--shadowSoft), 0 0 0 2px rgba(255, 174, 214, 0.25);
  transition:transform 120ms ease, filter 120ms ease;
}
.btn:active{transform:translateY(1px)}

@media (hover:hover){
  .btn:hover{filter:brightness(1.06) saturate(1.08); transform:translateY(-1px);}
  .levelTile:hover{transform:translateY(-2px) rotate(-0.25deg);}
}
.btn.primary{
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.25)),
             linear-gradient(120deg, var(--kidPink), var(--kidYellow), var(--mint), var(--sky));
  color:#3b1a35;
  border:2px solid rgba(255,255,255,0.8);
  box-shadow:0 0 0 2px rgba(255, 145, 195, 0.25), 0 16px 34px rgba(199, 73, 120, 0.22);
}
.btn.danger{
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.25)),
             linear-gradient(120deg, #ff94a7, #ffd0a1, #ffdfff);
  color:#4a1c2b;
  border:2px solid rgba(255,255,255,0.7);
}
.btn.icon{
  width:44px;
  height:44px;
  padding:0;
  font-size:18px;
  display:grid;
  place-items:center;
}
.btn.mapBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  min-height:44px;
}
.btnIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.badgeBtn{position:relative; overflow:visible;}
.badge{
  position:absolute;
  right:-6px;
  top:-6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
  color:#4a213c;
  border-radius:999px;
  padding:2px 7px;
  font-size:11px;
  font-weight:900;
  border:1px solid var(--outlineSoft);
  box-shadow:0 6px 14px var(--shadowSoft);
}

#bottomHint{
  position:absolute;
  left:calc(10px + env(safe-area-inset-left));
  right:calc(10px + env(safe-area-inset-right));
  bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(255, 246, 251, 0.82);
  border:1px solid var(--outlineSoft);
  border-radius:16px;
  padding:10px 12px;
  color:var(--muted);
  font-size:13px;
  backdrop-filter: blur(10px);
  display:none; /* hidden per request */
}

@media (max-width: 520px){
  .spacer{display:none;}
  #topbar{gap:8px;}
  #controls{width:100%;}
  .chip{font-size:13px;padding:7px 10px;}
  .btn.icon{width:42px;height:42px;}
}

.overlay{
  pointer-events:auto;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255, 205, 228, 0.55);
  z-index:4;
}
.overlay.hidden{display:none;}

#centerOverlay{
  position:absolute;
}
#centerOverlay::before{
  content:"";
  position:absolute;
  inset:-5%;
  background-image:
    radial-gradient(120px 90px at 10% 15%, rgba(255,210,231,0.35), transparent 65%),
    radial-gradient(160px 120px at 85% 20%, rgba(193,236,255,0.35), transparent 65%),
    radial-gradient(140px 110px at 60% 85%, rgba(214,255,232,0.35), transparent 65%),
    radial-gradient(120px 100px at 25% 75%, rgba(255,228,180,0.35), transparent 65%);
  filter:blur(12px);
  opacity:0;
  pointer-events:none;
  z-index:0;
  animation:floraDrift 24s ease-in-out infinite alternate;
}
#centerOverlay.levelsMode::before{
  opacity:0.9;
}

#secretsOverlay,
#secretViewOverlay,
#shopOverlay,
#settingsOverlay,
#resetConfirmOverlay,
#tutorialOverlay,
#leaderboardOverlay{
  z-index:6;
}

.panel{
  width:min(520px, calc(100vw - 32px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)),
    radial-gradient(140% 120% at 100% 0%, rgba(255,198,226,0.45), transparent 60%),
    radial-gradient(120% 120% at 0% 100%, rgba(193,236,255,0.35), transparent 60%);
  border:1px solid var(--outlineSoft);
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 60px rgba(199, 73, 120, 0.2);
  backdrop-filter: blur(12px);
  animation:panelPop 260ms ease;
  position:relative;
  z-index:1;
}

.panel h1{
  margin:0 0 8px 0;
  font-size:22px;
  font-family:"Baloo 2","Fredoka","Comic Sans MS","Trebuchet MS",sans-serif;
  letter-spacing:0.3px;
}
.panel p{margin:0 0 14px 0;color:var(--muted);line-height:1.35;}

@media (min-width: 900px){
  #centerOverlay.levelsMode .panel h1{font-size:30px;}
}

.loadingProgress{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 12px;
}
.loadingBar{
  flex:1 1 auto;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.6);
  border:1px solid var(--outlineSoft);
  overflow:hidden;
}
.loadingFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(111,231,211,0.55), rgba(255,178,210,0.9));
  transition:width 220ms ease;
}
.loadingPercent{
  min-width:48px;
  text-align:right;
  font-weight:900;
  color:#4a213c;
}

.panel.tutorial ul{
  margin:10px 0 14px 0;
  padding-left:18px;
  color:var(--text);
  line-height:1.35;
}
.panel.tutorial li{margin:8px 0;}

/* Settings */
.panel.settings h1{margin-bottom:12px;}
.settingsRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.7);
}
.settingsLabel{
  font-weight:900;
  letter-spacing:0.2px;
}
.panel.settings .btn{min-width:92px;}

.panel.resetConfirm{
  width:min(460px, calc(100vw - 32px));
}
.resetConfirmActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}

/* Level select */
.levelGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap:10px;
  max-height:min(62vh, 560px);
  overflow:hidden;
  padding:6px;
  border-radius:16px;
  border:1px solid var(--outlineSoft);
  /* Lighter background so the level map doesn't look too dark */
  background:
    radial-gradient(140% 120% at 20% 10%, rgba(255,210,231,0.45), transparent 60%),
    radial-gradient(140% 120% at 85% 20%, rgba(193,236,255,0.45), transparent 60%),
    radial-gradient(140% 120% at 50% 90%, rgba(214,255,232,0.45), transparent 60%),
    rgba(255,255,255,0.72);
  background-size:200% 200%, 200% 200%, 200% 200%, auto;
  background-position:0% 0%, 100% 0%, 0% 100%, 0% 0%;
  animation:gridShift 20s ease-in-out infinite alternate;
}

.levelTile{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.82);
  cursor:pointer;
  padding:0;
  display:block;
  animation:tilePop 320ms ease both;
}
.levelTile:nth-child(1){animation-delay:40ms;}
.levelTile:nth-child(2){animation-delay:60ms;}
.levelTile:nth-child(3){animation-delay:80ms;}
.levelTile:nth-child(4){animation-delay:100ms;}
.levelTile:nth-child(5){animation-delay:120ms;}
.levelTile:nth-child(6){animation-delay:140ms;}
.levelTile:nth-child(7){animation-delay:160ms;}
.levelTile:nth-child(8){animation-delay:180ms;}
.levelTile:nth-child(9){animation-delay:200ms;}
.levelTile:nth-child(10){animation-delay:220ms;}
.levelTile:nth-child(11){animation-delay:240ms;}
.levelTile:nth-child(12){animation-delay:260ms;}

.levelTile img{
  width:100%;
  height:140px;
  object-fit:contain;
  display:block;
  /* Not completed levels should still be visible (less dark) */
  filter: grayscale(0.6) brightness(0.88) contrast(1.03) saturate(0.85);
  background:linear-gradient(135deg, rgba(255, 214, 233, 0.55), rgba(193,236,255,0.55));
}

.levelTile.completed img{
  filter: grayscale(0.10) brightness(0.95) contrast(1.03) saturate(1.08);
}
.levelTile.locked{
  cursor:not-allowed;
  opacity:0.78;
}
.levelTile.locked img{
  filter: grayscale(0.88) brightness(0.62) contrast(1.02);
}
.levelTile .levelLock{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255, 206, 230, 0.6);
  backdrop-filter: blur(4px);
}
.levelTile .levelLock svg{
  width:30px;
  height:30px;
  filter: drop-shadow(0 6px 12px rgba(199, 73, 120, 0.35));
}

.levelTile .checkMark{
  position:absolute;
  right:10px;
  bottom:10px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--outlineSoft);
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  color:#17b35f;
  box-shadow:0 10px 22px var(--shadowSoft);
}

.levelTile .lvlNum{
  position:absolute;
  left:10px;
  top:10px;
  padding:6px 9px;
  border-radius:12px;
  background:rgba(255, 150, 198, 0.8);
  border:1px solid rgba(255,255,255,0.5);
  font-weight:800;
  font-size:13px;
  color:#3e1934;
  text-shadow: 0 2px 8px rgba(255,255,255,0.5);
}

.levelPager{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.levelPager.hidden{display:none;}
.levelPager .pageInfo{
  min-width:72px;
  text-align:center;
  font-weight:900;
  color:#4a213c;
  text-shadow: 0 2px 10px rgba(255,255,255,0.6);
  padding:6px 10px;
  border-radius:14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--outlineSoft);
}

.levelTile .lvlPieces{
  position:absolute;
  right:10px;
  top:10px;
  padding:6px 9px;
  border-radius:12px;
  background:rgba(255, 198, 223, 0.75);
  border:1px solid rgba(255,255,255,0.45);
  font-weight:700;
  font-size:12px;
  color:#6b4662;
}

.levelTile:active{transform:translateY(1px)}
.levelTile:hover img{filter: grayscale(0.75) brightness(0.82) contrast(1.06) saturate(0.55);}

.toast{
  position:absolute;
  left:50%;
  top:calc(70px + env(safe-area-inset-top));
  transform:translateX(-50%);
  background:rgba(255, 249, 253, 0.98);
  border:1px solid var(--outlineSoft);
  border-radius:14px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  box-shadow:0 12px 30px var(--shadowSoft);
}
.toast.hidden{display:none;}

/* Coin fly FX */
#coinFxLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.coinFx{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 35%),
             radial-gradient(circle at 60% 60%, rgba(255,225,120,0.95), rgba(255,188,60,0.9) 60%, rgba(180,110,10,0.95));
  box-shadow:0 10px 18px rgba(199, 73, 120, 0.2);
  border:1px solid rgba(255,255,255,0.45);
}
.coinFx::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
}

@media (max-height: 520px){
  #bottomHint{display:none;}
  .panel{padding:14px;}
  display:none; /* hidden per request */
}

@media (max-width: 520px){
  .levelTile img{height:112px;}
  .levelGrid{
    max-height:min(68vh, 540px);
    gap:8px;
  }
}

@media (max-width: 520px), (max-height: 720px){
  #centerOverlay.levelsMode{
    align-items:flex-start;
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  #centerOverlay.levelsMode .panel{
    max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
  }
  #centerOverlay.levelsMode .panel h1{font-size:20px;}
  #centerOverlay.levelsMode .panel p{font-size:13px;}
  #centerOverlay.levelsMode .levelGrid{
    flex:1 1 auto;
    min-height:0;
  }
}

@media (max-width: 360px){
  #controls{gap:6px;}
  .btn.icon{width:40px; height:40px;}
}

@keyframes panelPop{
  0%{transform:translateY(10px) scale(0.98); opacity:0;}
  100%{transform:translateY(0) scale(1); opacity:1;}
}

@keyframes tilePop{
  0%{transform:translateY(12px) scale(0.96); opacity:0;}
  100%{transform:translateY(0) scale(1); opacity:1;}
}

@keyframes floraDrift{
  0%{transform:translate3d(0, 0, 0) scale(1); opacity:0.45;}
  50%{transform:translate3d(1.5%, -1.5%, 0) scale(1.04); opacity:0.6;}
  100%{transform:translate3d(-1.5%, 1.5%, 0) scale(1.02); opacity:0.5;}
}

@keyframes flowerFloat{
  0%{transform:translate3d(0, 0, 0) scale(1) rotate(0deg); opacity:0.55;}
  50%{transform:translate3d(1.2%, -1.4%, 0) scale(1.04) rotate(1.5deg); opacity:0.65;}
  100%{transform:translate3d(-1.6%, 1.4%, 0) scale(1.06) rotate(-1.5deg); opacity:0.6;}
}

@keyframes bgShift{
  0%{background-position:0% 0%, 100% 0%, 0% 100%, 0% 45%, 50% 50%, 0% 50%;}
  100%{background-position:100% 100%, 0% 100%, 100% 0%, 100% 45%, 50% 50%, 100% 50%;}
}

@keyframes gridShift{
  0%{background-position:0% 0%, 100% 0%, 0% 100%, 0% 0%;}
  100%{background-position:100% 100%, 0% 100%, 100% 0%, 0% 0%;}
}

/* -------- Leaderboard overlay (kid-friendly) -------- */
.panel.leaderboard{
  width:min(600px, calc(100vw - 32px));
}

.lbHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.lbHead h1{margin:0;font-size:22px;}
.lbSub{
  color:#6b4662;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--outlineSoft);
  white-space:nowrap;
}

.lbBody{margin-top:10px;}
.lbMsg{
  text-align:center;
  color:var(--muted);
  padding:12px 10px;
}
.lbAuthTitle{font-weight:900;color:var(--text);margin-bottom:6px;}
.lbAuthText{margin-bottom:10px;}

.lbList{
  max-height:min(58vh, 520px);
  overflow:hidden;
  padding:8px;
  border-radius:18px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.7);
}

.lbRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.88);
  box-shadow:0 10px 20px rgba(199, 73, 120, 0.16);
  margin-bottom:10px;
}
.lbRow:last-child{margin-bottom:0;}

.lbRow.you{
  background:linear-gradient(180deg, rgba(255,168,213,0.32), rgba(255,214,176,0.24)), rgba(255,255,255,0.88);
  border-color:rgba(255,175,214,0.6);
  box-shadow:0 0 0 2px rgba(255,145,195,0.24), 0 16px 28px rgba(199, 73, 120, 0.18);
}

.lbRank{
  width:52px;
  text-align:center;
  font-weight:1000;
  color:var(--kidYellow);
  text-shadow:0 2px 10px rgba(255,255,255,0.7);
  flex:0 0 auto;
}

.lbAvatar{
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--outlineSoft);
  flex:0 0 auto;
}
.lbAvatar img{width:100%;height:100%;object-fit:cover;display:block;}

.lbName{flex:1 1 auto;min-width:0;font-weight:900;}
.lbName .youTag{
  margin-left:6px;
  font-size:11px;
  font-weight:1000;
  color:#4a213c;
  background:rgba(255,255,255,0.95);
  padding:2px 7px;
  border-radius:999px;
}

.lbScore{
  flex:0 0 auto;
  font-weight:1000;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--outlineSoft);
}

.lbActions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.lbToken{
  position:fixed;
  z-index:9999;
  transform:translate(-50%, -50%);
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
  color:#4a213c;
  font-weight:1000;
  border:1px solid var(--outlineSoft);
  box-shadow:0 14px 32px rgba(199, 73, 120, 0.22);
  pointer-events:none;
}

@media (max-width: 520px){
  .panel.leaderboard{padding:14px;}
  .lbRank{width:44px;}
  .lbRow{padding:9px 9px;}
}

/* Post-win mini panel (below the slab) */
.winBar{
  position:absolute;
  left:50%;
  /* Relax appearance: subtle float-in + fade */
  opacity:0;
  transform:translateX(-50%) translateY(12px) scale(0.985);
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(.2,1.18,.2,1);
  bottom:calc(72px + env(safe-area-inset-bottom));
  pointer-events:none;
}

.winBar.show{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}
.winBarInner{
  pointer-events:auto;
  min-width:min(520px, calc(100vw - 24px));
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)),
             linear-gradient(180deg, rgba(255,190,220,0.28), rgba(255,228,190,0.24));
  border:2px solid var(--outlineSoft);
  border-radius:22px;
  padding:12px 14px;
  box-shadow:0 18px 44px rgba(199, 73, 120, 0.2);
  backdrop-filter: blur(6px);
}
.winBarTitle{
  font-weight:1000;
  letter-spacing:0.2px;
  font-size:16px;
  margin-bottom:4px;
}
.winBarSub{
  color:#6b4662;
  font-size:13px;
  margin-bottom:10px;
}
.winBarBtns{
  display:flex;
  gap:10px;
  justify-content:space-between;
}
.winBarBtns .btn{flex:1 1 0;}

@media (max-width:520px){
  .winBar{bottom:calc(62px + env(safe-area-inset-bottom));}
  .winBarInner{padding:11px 12px;}
}

/* UI tweaks: hide pager text (no 1/∞) */
.levelPager .pageInfo{display:none !important;}

/* Force-hide the bottom hint and pager text */
#bottomHint{display:none !important;}
.pageInfo{display:none !important;}

.mapActions{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.mapActions.hidden{display:none;}
.mapActions .btn.primary{grid-column:1 / -1;}
body.levelsMode #topbar{
  pointer-events:none;
  opacity:0.2;
  filter:blur(1px);
}

@media (max-width:520px){
  .mapActions{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px;}
  .mapActions .btn.primary{grid-column:auto;}
  .mapActions .btn{padding:9px 6px; gap:5px; min-height:40px;}
  .mapActions .btnText{font-size:11px;}
  body.levelsMode #topbar{display:none;}
  .toast{top:calc(120px + env(safe-area-inset-top));}
}


/* Secret collection */
.panel.secrets{max-width:min(820px, 96vw);}
.secretsHead{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.secretsHead .close{min-width:44px; height:44px; border-radius:14px;}
.secretsGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  max-height:min(62vh, 560px);
  overflow:hidden;
  padding:6px;
  border-radius:16px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.7);
}
.secretCard{
  position:relative;
  border-radius:18px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.88);
  padding:12px 10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.secretCard.locked{opacity:0.55; cursor:default;}
.secretCircle{
  width:112px;
  height:112px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--outlineSoft);
  box-shadow: 0 10px 24px rgba(199, 73, 120, 0.18);
  background:rgba(255,246,252,0.9);
}
.secretCircle canvas{width:100%; height:100%; display:block;}
.secretName{font-weight:900; letter-spacing:0.2px; color:#4a213c; text-shadow:0 2px 10px rgba(255,255,255,0.7);}
.secretProg{font-size:12px; color:#6b4662;}
.secretLock{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  opacity:0.8;
  pointer-events:none;
  text-shadow:0 8px 18px rgba(255,145,195,0.6);
}

.secretView{max-width:min(620px, 94vw);}
.secretViewWrap{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#secretViewCanvas{
  width:min(74vw, 420px);
  height:min(74vw, 420px);
  border-radius:50%;
  border:1px solid var(--outlineSoft);
  background:rgba(255,246,252,0.9);
  box-shadow:0 18px 40px rgba(199, 73, 120, 0.22);
}
.secretViewProgress{
  margin-top:10px;
  text-align:center;
  color:#6b4662;
  font-weight:800;
}
.secretsPager{margin-top:12px;}
.secretsPager .pageInfo{display:none;}

@media (max-height: 720px){
  #secretsOverlay{
    align-items:flex-start;
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  #secretsOverlay .panel.secrets{
    max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
  }
  #secretsOverlay .panel.secrets .secretsGrid{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 520px){
  #secretsOverlay{
    align-items:flex-start;
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  #secretsOverlay .panel.secrets{
    max-height:calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
  }
  #secretsOverlay .panel.secrets .secretsGrid{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap:10px;
  }
  .secretCircle{width:96px; height:96px;}
  .secretCard{padding:10px 8px 8px; gap:6px;}
  .secretProg{font-size:11px;}
}

/* Shop */
.panel.shop{max-width:min(640px, 94vw);}
.shopHead{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.shopHead .close{min-width:44px; height:44px; border-radius:14px;}
.shopGrid{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.shopItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--outlineSoft);
  background:rgba(255,255,255,0.88);
}
.shopIcon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,246,252,0.9);
  border:1px solid var(--outlineSoft);
}
.shopInfo{flex:1 1 auto; min-width:0;}
.shopItemTitle{font-weight:900; letter-spacing:0.2px;}
.shopItemDesc{font-size:12px; color:var(--muted);}