:root{
  --ink:#382d63;--muted:#746b91;--purple:#7859ff;--pink:#ff65bb;--gold:#ffbf2f;
  --card:rgba(255,255,255,.9);--border:rgba(255,255,255,.72);--shadow:0 16px 42px rgba(58,35,126,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Nunito,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink);background:#d9efff}
body{overflow-x:hidden}
button{font:inherit;color:inherit}
button:focus-visible{outline:4px solid rgba(255,191,47,.75);outline-offset:2px}
#app{min-height:100vh;padding:12px}
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);box-shadow:var(--shadow)}
.topbar{max-width:1500px;margin:auto;border-radius:24px;padding:10px 14px;display:flex;align-items:center;gap:18px;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:9px;min-width:210px}
.brand img{width:48px;height:48px;object-fit:contain}
.brand strong{font-size:1.05rem;display:block}.brand small{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;flex:1}
.stat{background:#fff;border-radius:16px;padding:8px 10px;text-align:center;box-shadow:0 4px 12px rgba(82,57,135,.08)}
.stat span{font-size:1rem}.stat b{font-size:1.03rem;margin-left:4px}.stat small{display:block;color:var(--muted);font-size:.68rem}
.iconbtn{border:0;border-radius:16px;background:#fff;padding:8px;cursor:pointer;box-shadow:0 4px 12px rgba(82,57,135,.1)}
.iconbtn img{width:34px;height:34px;object-fit:contain;display:block}
.layout{max-width:1500px;margin:12px auto 0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);gap:12px;min-height:calc(100vh - 104px)}
.stage{position:relative;border-radius:30px;overflow:hidden;min-height:760px;background:#8bd9ff center/cover no-repeat;box-shadow:var(--shadow);isolation:isolate}
.stageTint{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(112,73,193,.08));z-index:-1}
.click-zone{position:absolute;inset:78px 12px 195px;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2}
.combo-wrap{width:min(460px,78%);margin-bottom:14px}
.combo-label{display:flex;justify-content:space-between;background:rgba(255,255,255,.85);padding:6px 11px;border-radius:12px 12px 0 0;font-size:.82rem}
.meter{height:10px;background:rgba(255,255,255,.6);border-radius:0 0 12px 12px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#58d7ff,#8264ff,#ff67b8,#ffc43b);transition:width .12s}
.star-button{width:min(330px,54vw);aspect-ratio:1;border:0;background:transparent;cursor:pointer;position:relative;padding:0;transition:transform .08s}
.star-button:hover{transform:scale(1.025)}.star-button:active{transform:scale(.94)}
.star-button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 25px rgba(95,54,151,.2));position:relative;z-index:2;user-select:none;-webkit-user-drag:none}
.star-button .glow{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#fff6 0,#ffe46a66 34%,#d577ff33 62%,transparent 74%);filter:blur(8px);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);opacity:.68}}
.click-info{text-align:center;background:rgba(255,255,255,.88);padding:8px 18px;border-radius:18px;box-shadow:0 8px 22px rgba(58,42,107,.12)}
.click-info strong{display:block;font-size:1.15rem}.click-info small{color:var(--muted)}
.run-summary{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.run-summary span{background:rgba(255,255,255,.85);padding:6px 10px;border-radius:999px;font-size:.78rem}
.stage-footer{position:absolute;bottom:12px;left:12px;right:12px;border-radius:18px;padding:10px;display:flex;justify-content:space-around;gap:8px;font-size:.78rem;z-index:5}
.boostbar{position:absolute;top:13px;left:13px;display:flex;gap:7px;z-index:5;flex-wrap:wrap}
.boost-pill{background:#fff;border:2px solid #ffd45d;border-radius:999px;padding:5px 8px;display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;box-shadow:0 4px 12px #694ba333}
.boost-pill img{width:25px;height:25px;object-fit:contain}
.power-drop{position:absolute;right:6%;top:30%;border:0;background:#fff;border-radius:24px;padding:8px;cursor:pointer;z-index:8;box-shadow:0 12px 24px rgba(62,40,110,.23);animation:floaty 1.2s ease-in-out infinite alternate}
.power-drop img{display:block;width:100px;height:100px;object-fit:contain}.power-drop span{font-weight:900;font-size:.72rem}
.hidden{display:none!important}@keyframes floaty{to{transform:translateY(-12px) rotate(3deg)}}
.float-layer{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.float-text{position:absolute;font-size:1.35rem;font-weight:1000;color:#fff;text-shadow:0 2px 0 #6f53c5,0 0 10px #fff;animation:floatText .85s ease-out forwards}
.float-text.crit{font-size:1.8rem;color:#fff36e;text-shadow:0 2px 0 #c66d15,0 0 12px #fff}
@keyframes floatText{to{transform:translateY(-90px) scale(1.2);opacity:0}}
.particle{position:absolute;width:30px;height:30px;object-fit:contain;animation:particle 700ms ease-out forwards}
@keyframes particle{to{transform:translate(var(--dx),var(--dy)) rotate(240deg) scale(.3);opacity:0}}
.panel{border-radius:28px;overflow:hidden;min-height:760px;display:flex;flex-direction:column}
.tabs{display:flex;gap:5px;padding:8px;overflow-x:auto;background:rgba(244,239,255,.8);border-bottom:1px solid #e5dcfb}
.tabs button{border:0;background:transparent;border-radius:14px;padding:7px 8px;min-width:70px;cursor:pointer;font-size:.67rem;font-weight:800;display:flex;align-items:center;flex-direction:column;gap:2px;white-space:nowrap}
.tabs button img{width:30px;height:30px;object-fit:contain}.tabs button.active{background:#fff;box-shadow:0 4px 14px #6549aa1c;color:#6548dd}
.tab-content{padding:12px;overflow:auto;flex:1}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:2px 0 10px}
.section-head h2{margin:0;font-size:1.25rem}.section-head p{margin:2px 0 0;color:var(--muted);font-size:.78rem}
.buy-modes{display:flex;gap:4px}.buy-modes button,.chip{border:0;border-radius:999px;background:#eee9ff;padding:5px 9px;font-size:.7rem;font-weight:800;cursor:pointer}.buy-modes button.active{background:#7657ef;color:#fff}
.grid{display:grid;gap:8px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid #eee8fa;border-radius:18px;padding:10px;box-shadow:0 5px 15px rgba(69,48,123,.07);position:relative}
.item-card{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:9px}
.item-card img,.world-card img,.skin-card img,.award-card img{width:64px;height:64px;object-fit:contain}
.item-card h3,.world-card h3,.skin-card h3{font-size:.9rem;margin:0}.item-card p,.world-card p,.skin-card p{font-size:.68rem;margin:3px 0;color:var(--muted)}
.item-meta{font-size:.68rem;font-weight:800;color:#7258d9}
.buybtn,.claimbtn,.primary{border:0;background:linear-gradient(135deg,#7c5dff,#f05fb5);color:#fff;border-radius:13px;padding:8px 10px;font-weight:900;cursor:pointer;box-shadow:0 5px 10px rgba(106,78,220,.2)}
.buybtn:disabled,.claimbtn:disabled,.primary:disabled{opacity:.45;filter:grayscale(.3);cursor:not-allowed}
.cost{font-size:.7rem;display:block;margin-top:3px;color:#7559c8}.owned{position:absolute;top:7px;right:8px;background:#eee9ff;border-radius:999px;padding:3px 6px;font-size:.66rem;font-weight:900}
.upgrade-card{display:grid;grid-template-columns:58px 1fr auto;gap:8px;align-items:center}.upgrade-card img{width:54px;height:54px;object-fit:contain}
.progress{height:9px;background:#eeeaf8;border-radius:999px;overflow:hidden;margin-top:6px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#69d9ff,#7657ef,#ff68b7)}
.quest-card{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.world-card,.skin-card,.award-card{display:flex;gap:9px;align-items:center}
.world-card.locked,.skin-card.locked{filter:grayscale(.85);opacity:.62}.world-card.selected,.skin-card.selected{outline:3px solid #8d70ff}
.badge{font-size:.65rem;background:#f1ecff;padding:3px 6px;border-radius:999px;font-weight:900}
.rebirth-hero{text-align:center;background:linear-gradient(145deg,#fff,#f3ecff);border-radius:22px;padding:14px}.rebirth-hero img{width:160px;height:160px;object-fit:contain}
.rebirth-hero h2{margin:3px}.gem-big{font-size:1.2rem;font-weight:1000}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid #eee8f7}
.toggle{border:0;border-radius:999px;background:#d9d2e9;width:48px;height:28px;padding:3px;cursor:pointer}.toggle i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}.toggle.on{background:#7b5cff}.toggle.on i{transform:translateX(20px)}
.textarea{width:100%;min-height:92px;border:1px solid #ded4f5;border-radius:14px;padding:8px;resize:vertical}
.toast-wrap{position:fixed;right:16px;bottom:16px;z-index:100;display:grid;gap:7px}
.toast{background:#fff;border-left:5px solid #7c5dff;border-radius:14px;padding:9px 12px;box-shadow:0 12px 28px rgba(42,27,86,.22);font-size:.8rem;animation:toastIn .25s ease-out}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}}
dialog{border:0;background:transparent;padding:0;max-width:94vw}dialog::backdrop{background:rgba(33,25,59,.45);backdrop-filter:blur(4px)}
.modal-card{width:min(520px,92vw);background:#fff;border-radius:24px;padding:20px;position:relative;box-shadow:0 25px 80px rgba(36,23,79,.35)}.close{position:absolute;right:10px;top:8px;border:0;background:#eee8ff;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:1.2rem}
.modal-hero{width:130px;height:130px;object-fit:contain;display:block;margin:auto}
hr{border:0;border-top:1px solid #ece6f7;margin:12px 0}
.small{font-size:.72rem;color:var(--muted)}
.danger{background:#ffe5ec;color:#a52952}
@media(max-width:1000px){
  #app{padding:7px}.topbar{border-radius:20px;align-items:flex-start}.brand{min-width:auto}.brand strong{font-size:.9rem}.brand small{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}.stat{padding:5px}.layout{grid-template-columns:1fr}.stage{min-height:650px}.panel{min-height:620px}.tabs{position:sticky;top:0;z-index:3}
}
@media(max-width:580px){
  .topbar{gap:7px;padding:8px}.brand img{width:36px;height:36px}.brand strong{font-size:.72rem}.stats{gap:4px}.stat b{font-size:.78rem}.stat small{font-size:.58rem}.iconbtn{padding:5px}.iconbtn img{width:27px;height:27px}
  .stage{min-height:580px;border-radius:22px}.click-zone{inset:80px 8px 170px}.star-button{width:min(280px,68vw)}
  .decor{width:110px}.power-drop img{width:70px;height:70px}.stage-footer{font-size:.65rem}.panel{border-radius:22px}.tab-content{padding:8px}
  .grid.two{grid-template-columns:1fr}.item-card{grid-template-columns:58px 1fr auto}.item-card img{width:54px;height:54px}
}
.reduced-motion *{animation:none!important;transition:none!important}


/* Purchased helper animals decorate the bottom of the clicker scene. */
.pet-parade{
  position:absolute;
  left:16px;
  right:16px;
  bottom:62px;
  min-height:76px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  overflow:hidden;
  pointer-events:none;
  z-index:4;
  padding:0 8px;
}
.parade-pet{
  position:relative;
  flex:0 1 66px;
  width:66px;
  height:72px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform-origin:50% 100%;
  animation:petBob 2.6s ease-in-out infinite alternate;
  filter:drop-shadow(0 7px 5px rgba(72,49,108,.18));
}
.parade-pet:nth-child(2n){animation-delay:-.7s}
.parade-pet:nth-child(3n){animation-delay:-1.4s}
.parade-pet img{
  max-width:100%;
  max-height:68px;
  object-fit:contain;
  user-select:none;
}
.pet-count{
  position:absolute;
  right:-2px;
  top:3px;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#674bd3;
  border:2px solid #dacfff;
  font-size:.62rem;
  font-weight:1000;
  box-shadow:0 3px 8px rgba(62,43,108,.18);
}
.parade-pet.just-added{animation:petPop .5s cubic-bezier(.2,1.5,.4,1),petBob 2.6s .5s ease-in-out infinite alternate}
@keyframes petBob{to{transform:translateY(-5px)}}
@keyframes petPop{0%{transform:scale(0) translateY(20px)}70%{transform:scale(1.2) translateY(-5px)}100%{transform:scale(1)}}

@media(max-width:800px){
  .pet-parade{bottom:58px;gap:1px;padding:0 3px}
  .parade-pet{flex-basis:48px;width:48px;height:58px}
  .parade-pet img{max-height:54px}
  .pet-count{min-width:18px;height:18px;font-size:.54rem}
}
@media(max-width:520px){
  .pet-parade{left:5px;right:5px}
  .parade-pet{flex-basis:39px;width:39px;height:48px}
  .parade-pet img{max-height:46px}
}


/* Clipart-based UI instead of generic emoji icons */
.stat-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:3px;
  filter:drop-shadow(0 2px 3px rgba(75,48,120,.14));
}
.mini-ui-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:4px;
}
.section-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.section-title img{
  width:36px;
  height:36px;
  object-fit:contain;
}
.reward-inline{
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}
.reward-inline img{
  width:18px;
  height:18px;
  object-fit:contain;
  vertical-align:middle;
}

/* Purchased machines appear in their own line above the helper animals. */
.machine-parade{
  position:absolute;
  left:18px;
  right:18px;
  bottom:135px;
  min-height:72px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
  padding:0 8px;
}
.parade-machine{
  position:relative;
  flex:0 1 68px;
  width:68px;
  height:70px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform-origin:50% 100%;
  filter:drop-shadow(0 7px 5px rgba(72,49,108,.18));
}
.parade-machine img{
  max-width:100%;
  max-height:66px;
  object-fit:contain;
  user-select:none;
}
.machine-count{
  position:absolute;
  right:-2px;
  top:2px;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff8cf;
  color:#8a5a12;
  border:2px solid #ffd85d;
  font-size:.62rem;
  font-weight:1000;
  box-shadow:0 3px 8px rgba(62,43,108,.18);
}
.parade-machine.just-added{
  animation:machinePop .55s cubic-bezier(.2,1.5,.4,1);
}
@keyframes machinePop{
  0%{transform:scale(0) translateY(18px)}
  70%{transform:scale(1.15) translateY(-4px)}
  100%{transform:scale(1)}
}

@media(max-width:800px){
  .machine-parade{bottom:115px;gap:1px;padding:0 3px}
  .parade-machine{flex-basis:48px;width:48px;height:54px}
  .parade-machine img{max-height:51px}
  .machine-count{min-width:18px;height:18px;font-size:.54rem}
}
@media(max-width:520px){
  .machine-parade{left:5px;right:5px;bottom:107px}
  .parade-machine{flex-basis:39px;width:39px;height:44px}
  .parade-machine img{max-height:42px}
}


/* Upgrade-driven world decorations */
.upgrade-decor-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.world-decor{
  position:absolute;
  object-fit:contain;
  filter:drop-shadow(0 6px 8px rgba(64,45,104,.16));
  opacity:.9;
  transform-origin:center;
  animation:decorFloat 4.5s ease-in-out infinite alternate;
}
.world-decor:nth-child(2n){animation-delay:-1.2s}
.world-decor:nth-child(3n){animation-delay:-2.1s}
.world-decor.tiny{width:70px}
.world-decor.small{width:95px}
.world-decor.medium{width:125px}
.world-decor.large{width:160px}
.world-decor.top-left{left:3%;top:10%}
.world-decor.top-mid{left:41%;top:8%}
.world-decor.top-right{right:3%;top:11%}
.world-decor.mid-left{left:4%;top:37%}
.world-decor.mid-right{right:4%;top:38%}
.world-decor.low-left{left:7%;bottom:205px}
.world-decor.low-mid{left:42%;bottom:210px}
.world-decor.low-right{right:7%;bottom:205px}
@keyframes decorFloat{
  to{transform:translateY(-8px) rotate(2deg)}
}

@media(max-width:700px){
  .world-decor.tiny{width:48px}
  .world-decor.small{width:62px}
  .world-decor.medium{width:78px}
  .world-decor.large{width:96px}
  .world-decor.low-left,.world-decor.low-mid,.world-decor.low-right{bottom:175px}
}


.decor-toggle{
  position:absolute;
  right:14px;
  top:14px;
  z-index:12;
  border:2px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:6px 10px 6px 7px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#5b45b2;
  font-size:.72rem;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(64,43,110,.18);
  backdrop-filter:blur(8px);
}
.decor-toggle img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.decor-toggle.off{
  opacity:.72;
  filter:grayscale(.35);
}
.decor-toggle:hover{transform:translateY(-1px)}
@media(max-width:580px){
  .decor-toggle{top:52px;right:8px;padding:4px 7px 4px 5px;font-size:.62rem}
  .decor-toggle img{width:23px;height:23px}
}