* {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;color:#fff}
#app{width:100%;height:100%;position:relative;overflow:hidden}
.page{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center}
.page.active{display:flex}
.hidden{display:none!important}

@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 22px rgba(255,182,193,.6),0 0 44px rgba(255,192,203,.35)}50%{box-shadow:0 0 35px rgba(255,182,193,.9),0 0 70px rgba(255,192,203,.55)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}
@keyframes slide-up{from{opacity:0;transform:translateY(55px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce-in{0%{opacity:0;transform:scale(.35)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@keyframes confetti-fall{0%{transform:translateY(-120vh) rotate(0deg);opacity:1}100%{transform:translateY(120vh) rotate(800deg);opacity:0}}
@keyframes rainbow{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes glow-pulse{0%,100%{text-shadow:0 0 12px rgba(255,182,193,.9),0 0 24px rgba(255,192,203,.6),0 0 36px rgba(255,192,203,.35);transform:scale(1)}50%{text-shadow:0 0 24px rgba(255,182,193,1),0 0 48px rgba(255,192,203,.9),0 0 72px rgba(255,192,203,.5);transform:scale(1.03)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(35px,-22px) scale(1.12)}50%{transform:translate(-22px,35px) scale(.88)}75%{transform:translate(22px,22px) scale(1.06)}}
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes combo-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.22)}50%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1.12)}}
@keyframes pet-float{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}25%{transform:translateY(-18px) rotate(6deg) scale(1.06)}50%{transform:translateY(-10px) rotate(-4deg) scale(.97)}75%{transform:translateY(-22px) rotate(10deg) scale(1.04)}}
@keyframes paw-fade{0%,100%{opacity:.12;transform:rotate(-18deg) scale(.88)}50%{opacity:.25;transform:rotate(-10deg) scale(1.12)}}
@keyframes bone-spin{0%{transform:rotate(0deg) translateY(0)}33%{transform:rotate(140deg) translateY(-12px)}66%{transform:rotate(280deg) translateY(6px)}100%{transform:rotate(420deg) translateY(0)}}
@keyframes heart-beat{0%,100%{transform:scale(1);opacity:.15}25%{transform:scale(1.22);opacity:.28}50%{transform:scale(.94);opacity:.18}75%{transform:scale(1.18);opacity:.24}}
@keyframes cloud-drift{0%{transform:translateX(0)}50%{transform:translateX(50px)}100%{transform:translateX(0)}}
@keyframes bubble-rise{0%{transform:translateY(0) scale(1);opacity:0}20%{opacity:.8}100%{transform:translateY(-150px) scale(.5);opacity:0}}

.btn-primary{
  background:linear-gradient(160deg,#ffb6c1 0%,#ff8fa3 30%,#ff6b8a 70%,#ff5c75 100%);
  color:#fff;border:none;padding:18px 52px;border-radius:50px;
  font-size:19px;font-weight:bold;cursor:pointer;
  transition:all .32s cubic-bezier(.175,.885,.32,1.275);
  box-shadow:0 6px 20px rgba(255,107,138,.5),inset 0 -3px 12px rgba(0,0,0,.15),0 0 35px rgba(255,107,138,.25);
  position:relative;overflow:hidden;letter-spacing:2px;
  text-shadow:0 2px 4px rgba(0,0,0,.2)
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-110%;width:220%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .55s;opacity:0
}
.btn-primary:hover::before{opacity:1;left:110%}
.btn-primary:hover{
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 10px 30px rgba(255,107,138,.65),inset 0 -3px 12px rgba(0,0,0,.15),0 0 50px rgba(255,107,138,.4)
}
.btn-primary:active{transform:scale(.94);box-shadow:0 3px 10px rgba(255,107,138,.7)}
.btn-glow{animation:pulse-glow 2.4s ease-in-out infinite}

.btn-secondary{
  background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,182,193,.4);
  padding:13px 34px;border-radius:28px;font-size:15px;cursor:pointer;
  transition:all .32s ease;backdrop-filter:blur(12px);
  box-shadow:0 3px 10px rgba(0,0,0,.1)
}
.btn-secondary:hover{
  background:rgba(255,182,193,.22);border-color:rgba(255,182,193,.6);
  transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,107,138,.35)
}

.btn-danger{
  background:linear-gradient(160deg,#ff7675 0%,#ff5252 100%);color:#fff;border:none;
  padding:15px 42px;border-radius:28px;font-size:16px;cursor:pointer;
  transition:all .32s ease;box-shadow:0 5px 18px rgba(255,82,82,.45)
}

.btn-back{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:8px 18px;border-radius:22px;transition:all .3s}
.btn-back:hover{background:rgba(255,255,255,.15)}

#page-start{
  background:linear-gradient(160deg,#fff5f7 0%,#ffeff3 25%,#ffe4ea 50%,#ffd8e3 75%,#ffccdc 100%);
  background-size:400% 400%;animation:bg-shift 15s ease infinite;
  position:relative;overflow:hidden
}
.start-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}

.bg-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:orb-float 9s ease-in-out infinite}
.orb1{width:280px;height:280px;background:linear-gradient(135deg,#ffb6c1,#ff8fa3);top:-90px;left:-70px;animation-delay:0s}
.orb2{width:340px;height:340px;background:linear-gradient(135deg,#87ceeb,#add8e6);top:18%;right:-110px;animation-delay:2.5s}
.orb3{width:220px;height:220px;background:linear-gradient(135deg,#dda0dd,#e6e6fa);bottom:28%;left:-60px;animation-delay:5s}
.orb4{width:300px;height:300px;background:linear-gradient(135deg,#ffd700,#ffec8b);bottom:-90px;right:-70px;animation-delay:1.5s}
.orb5{width:200px;height:200px;background:linear-gradient(135deg,#ff9a9e,#fecfef);top:52%;left:28%;animation-delay:4s}
.orb6{width:240px;height:240px;background:linear-gradient(135deg,#b0e0e6,#afeeee);top:12%;right:22%;animation-delay:6s}

.floating-pet{position:absolute;left:var(--x);top:var(--y);font-size:42px;animation:pet-float 5s ease-in-out infinite;animation-delay:var(--delay);opacity:.75;filter:drop-shadow(0 6px 14px rgba(0,0,0,.15))}

.bubble-deco{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(255,182,193,.4),rgba(255,192,203,.2));animation:bubble-rise linear infinite;pointer-events:none}
.bubble-deco.bubble-a{width:12px;height:12px;left:10%;animation-duration:8s;animation-delay:0s}
.bubble-deco.bubble-b{width:8px;height:8px;left:25%;animation-duration:10s;animation-delay:2s}
.bubble-deco.bubble-c{width:14px;height:14px;left:60%;animation-duration:9s;animation-delay:4s}
.bubble-deco.bubble-d{width:10px;height:10px;left:85%;animation-duration:11s;animation-delay:6s}

.sparkle-deco{position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 18px #fff,0 0 36px rgba(255,182,193,.6);animation:sparkle 3s ease-in-out infinite;pointer-events:none}
.sparkle-deco.sparkle-a{top:18%;left:12%;animation-delay:0s}
.sparkle-deco.sparkle-b{top:42%;right:15%;animation-delay:1.2s}
.sparkle-deco.sparkle-c{bottom:32%;left:20%;animation-delay:2.4s}
.sparkle-deco.sparkle-d{top:65%;right:22%;animation-delay:3.6s}

.start-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:22px;gap:24px}

.logo-container{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.logo-icon{font-size:88px;z-index:2;animation:bounce-in 1.1s ease-out;filter:drop-shadow(0 8px 28px rgba(255,215,0,.85))}
.logo-ring{position:absolute;border-radius:50%;border:3px solid transparent}
.logo-ring.ring1{width:125px;height:125px;border-top-color:#ffb6c1;border-right-color:#ffd700;animation:spin 3.2s linear infinite}
.logo-ring.ring2{width:148px;height:148px;border-bottom-color:#87ceeb;border-left-color:#dda0dd;animation:spin 4.4s linear infinite reverse}
.logo-ring.ring3{width:165px;height:165px;border-top-color:#ffd700;border-bottom-color:#ffb6c1;animation:spin 5.5s linear infinite;opacity:.45}

.game-title{text-align:center;margin:12px 0}
.title-text{
  display:block;font-size:50px;font-weight:bold;
  background:linear-gradient(135deg,#ff6b8a,#ffd700,#87ceeb,#ffb6c1,#ffd700);
  background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:rainbow 5s linear infinite;letter-spacing:8px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))
}
.title-sub{display:block;font-size:17px;color:rgba(100,80,90,.7);letter-spacing:10px;margin-top:8px;text-transform:uppercase;font-weight:500}

.stats-bar{
  display:flex;gap:28px;padding:18px 36px;
  background:rgba(255,255,255,.88);border-radius:32px;
  backdrop-filter:blur(14px);border:2px solid rgba(255,182,193,.3);
  box-shadow:0 8px 28px rgba(255,107,138,.2),inset 0 1px 0 rgba(255,255,255,.8)
}
.stat-item{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:bold;color:#ff6b8a}
.stat-icon{font-size:22px;filter:drop-shadow(0 2px 4px rgba(255,107,138,.3))}

.menu-buttons{display:flex;gap:18px;margin-top:12px}

.version-text{color:rgba(100,80,90,.4);font-size:13px;margin-top:auto}

#page-levels{
  background:linear-gradient(180deg,#fff5f7 0%,#ffe4ea 40%,#ffd8e3 100%);
  overflow-y:auto
}
#page-levels::-webkit-scrollbar{display:none}
.levels-bg{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:22px 18px}
.levels-header{width:100%;max-width:540px;display:flex;justify-content:space-between;align-items:center;padding:18px 0;margin-bottom:18px}
.levels-header h2{
  font-size:28px;
  background:linear-gradient(135deg,#ff6b8a,#ffb6c1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:4px;font-weight:bold
}
.stars-display{font-size:20px;color:#ffd700;font-weight:bold;text-shadow:0 0 12px rgba(255,215,0,.5);filter:drop-shadow(0 2px 4px rgba(255,215,0,.3))}

.daily-reward{margin-bottom:22px}
.daily-chest-btn{
  background:linear-gradient(160deg,#ffd700 0%,#ffb800 100%);color:#8b4513;border:none;
  padding:15px 34px;border-radius:30px;font-size:16px;font-weight:bold;cursor:pointer;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 6px 22px rgba(255,215,0,.45),inset 0 -3px 10px rgba(0,0,0,.1);
  transition:all .32s;animation:pulse-glow 2.5s ease-in-out infinite
}
.daily-chest-btn:active{transform:scale(.94)}
.chest-icon{font-size:24px;animation:bounce-in .7s ease-out}

.levels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:540px;width:100%;padding-bottom:50px}
.level-cell{
  aspect-ratio:1;border-radius:20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;position:relative;
  transition:all .32s cubic-bezier(.68,-.55,.27,1.55);border:2px solid transparent;font-weight:bold;
  box-shadow:0 4px 16px rgba(0,0,0,.1)
}
.level-cell.locked{background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,228,234,.4));color:rgba(100,80,90,.35);cursor:not-allowed;border-color:rgba(255,182,193,.2)}
.level-cell.unlocked{
  background:linear-gradient(160deg,rgba(255,182,193,.25),rgba(255,192,203,.18));
  color:#fff;border-color:rgba(255,182,193,.5);
  box-shadow:0 6px 18px rgba(255,107,138,.25),inset 0 1px 0 rgba(255,255,255,.4)
}
.level-cell.unlocked:hover{
  transform:translateY(-7px) scale(1.06);
  box-shadow:0 12px 30px rgba(255,107,138,.45);
  border-color:#ffd700
}
.level-cell.unlocked:active{transform:scale(.94)}
.level-cell.completed{background:linear-gradient(160deg,rgba(255,215,0,.25),rgba(255,215,0,.15));border-color:rgba(255,215,0,.6)}
.level-cell.current{animation:glow-pulse 1.8s ease-in-out infinite;border-color:#ff6b8a}
.level-num{font-size:24px;font-weight:bold;text-shadow:0 2px 5px rgba(0,0,0,.2)}
.level-stars{font-size:12px;margin-top:5px;color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,.5)}
.level-lock-icon{font-size:22px;opacity:.5}

#page-collection{background:linear-gradient(180deg,#fff5f7 0%,#ffe4ea 100%);overflow-y:auto}
.collection-bg{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:22px 18px}
.collection-header{width:100%;max-width:640px;display:flex;justify-content:space-between;align-items:center;padding:18px 0;margin-bottom:28px}
.collection-header h2{font-size:30px;background:linear-gradient(135deg:#ff6b8a,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:640px;width:100%;padding-bottom:50px}

.pet-card{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,248,250,.88));
  border-radius:24px;padding:22px;text-align:center;cursor:pointer;
  transition:all .32s ease;border:2px solid rgba(255,182,193,.25);position:relative;overflow:hidden;
  box-shadow:0 6px 20px rgba(255,107,138,.12)
}
.pet-card::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.15),transparent 35%);
  animation:spin 5s linear infinite;opacity:0;transition:opacity .32s
}
.pet-card:hover::before{opacity:1}
.pet-card:hover{
  transform:translateY(-10px) scale(1.04);
  border-color:rgba(255,107,138,.55);
  box-shadow:0 14px 36px rgba(255,107,138,.3)
}
.pet-avatar{font-size:60px;margin-bottom:14px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));transition:transform .32s}
.pet-card:hover .pet-avatar{transform:scale(1.12) rotate(5deg)}
.pet-name-card{font-size:17px;font-weight:bold;margin-bottom:7px;color:#ff6b8a}
.pet-rarity-card{font-size:13px;margin-bottom:9px}
.pet-rarity-card.common{color:#9e9e9e}
.pet-rarity-card.rare{color:#87ceeb}
.pet-rarity-card.epic{color:#dda0dd}
.pet-rarity-card.legendary{color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.5)}
.pet-card.locked-card{filter:grayscale(1) brightness(.55);cursor:not-allowed}
.pet-card.locked-card .pet-avatar{filter:grayscale(1) brightness(.35);font-size:42px}
.pet-card.locked-card::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:34px;opacity:.6}

#page-game{
  background:linear-gradient(180deg,#fff0f3 0%,#ffe4ea 30%,#ffd8e3 60%,#ffcdd9 100%);
  position:relative
}
.game-bg-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:5}

.sparkle{position:absolute;width:7px;height:7px;background:#fff;border-radius:50%;box-shadow:0 0 18px #fff,0 0 36px rgba(255,182,193,.7),0 0 54px rgba(255,192,203,.5);animation:sparkle 3.5s ease-in-out infinite}
.sparkle-1{top:16%;left:9%;animation-delay:0s}
.sparkle-2{top:36%;right:13%;animation-delay:1.2s}
.sparkle-3{bottom:26%;left:16%;animation-delay:2.4s}
.sparkle-4{top:62%;right:9%;animation-delay:.6s}
.sparkle-5{bottom:46%;left:52%;animation-delay:1.8s}

.floating-pet{position:absolute;font-size:30px;animation:pet-float 7s ease-in-out infinite;opacity:.22;pointer-events:none}
.floating-pet-1{top:11%;left:6%;animation-delay:0s}
.floating-pet-2{top:26%;right:9%;animation-delay:1.4s}
.floating-pet-3{bottom:32%;left:13%;animation-delay:2.8s}
.floating-pet-4{bottom:16%;right:16%;animation-delay:4.2s}
.floating-pet-5{top:56%;left:62%;animation-delay:5.6s}

.paw-print{position:absolute;font-size:17px;animation:paw-fade 9s ease-in-out infinite;opacity:.18;transform:rotate(-22deg)}
.paw-1{top:42%;left:4%;animation-delay:0s}
.paw-2{top:66%;right:6%;animation-delay:2.2s}
.paw-3{bottom:22%;left:26%;animation-delay:4.4s}
.paw-4{top:19%;right:26%;animation-delay:6.6s}

.bone{position:absolute;font-size:15px;animation:bone-spin 12s linear infinite;opacity:.2}
.bone-1{top:72%;left:9%;animation-delay:0s}
.bone-2{bottom:36%;right:11%;animation-delay:6s}

.heart-float{position:absolute;font-size:19px;animation:heart-beat 4.5s ease-in-out infinite;opacity:.2}
.heart-1{top:33%;left:77%;animation-delay:0s}
.heart-2{bottom:44%;left:70%;animation-delay:2.2s}

.game-top-bar{
  width:100%;padding:6px 9px 9px;display:flex;flex-direction:column;gap:7px;
  background:transparent;position:relative;z-index:10;flex-shrink:0;
  border-bottom:none;box-shadow:none
}
.top-main-row{
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:7px;
  background:rgba(255,255,255,.72);padding:6px 9px;border-radius:10px;
  border:1px solid rgba(129,199,132,.25);backdrop-filter:blur(10px)
}
.top-bar-left{display:flex;align-items:center;gap:9px}
.level-badge{
  background:linear-gradient(160deg,#81c784 0%,#66bb6a 50%,#4caf50 100%);
  padding:5px 12px;border-radius:10px;
  font-size:14px;font-weight:bold;color:#fff;
  box-shadow:0 3px 8px rgba(76,175,80,.35),inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing:1px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.2)
}
.score-display{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,215,0,.12);
  padding:4px 10px;border-radius:10px;
  border:1px solid rgba(255,215,0,.25);
  box-shadow:0 2px 5px rgba(0,0,0,.08)
}
.score-icon{font-size:15px}
.score-value{font-size:16px;font-weight:bold;color:#f57f17;text-shadow:0 0 5px rgba(245,127,23,.35)}
.top-bar-right{display:flex;align-items:center;gap:6px}
.btn-audio{
  width:32px;height:32px;border-radius:50%;
  background:rgba(129,199,132,.18);
  border:1px solid rgba(129,199,132,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;transition:all .3s;
  backdrop-filter:blur(10px);box-shadow:0 2px 5px rgba(0,0,0,.08)
}
.btn-audio:hover{background:rgba(129,199,132,.3);transform:scale(1.1)}
.btn-audio.muted{opacity:.4}

.combo-popup{
  position:absolute;top:18%;left:50%;transform:translate(-50%,-50%) scale(0);
  background:linear-gradient(160deg,#ffb6c1,#ffd700);padding:18px 38px;border-radius:24px;
  font-size:32px;font-weight:bold;color:#fff;pointer-events:none;z-index:100;opacity:0;
  transition:all .32s cubic-bezier(.68,-.55,.27,1.55);
  box-shadow:0 10px 35px rgba(255,107,138,.65),0 0 80px rgba(255,215,0,.4);
  text-align:center;white-space:nowrap;
  border:2px solid rgba(255,255,255,.3)
}
.combo-popup.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:combo-pop .85s ease-out forwards}
.combo-number{font-size:42px;display:block;text-shadow:0 2px 5px rgba(0,0,0,.25)}
.combo-text{font-size:17px;display:block}

.game-board-area{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:3px;position:relative;width:100%;flex-shrink:1;min-height:0
}
#gameCanvas{border-radius:8px;touch-action:none;background:transparent;max-width:100%;max-height:100%}

.slot-area{
  padding:9px 9px 12px;
  background:linear-gradient(180deg,#a1887f 0%,#8d6e63 30%,#795548 70%,#6d4c41 100%);
  position:relative;z-index:10;flex-shrink:0;
  border-top:3px solid #8d6e63;
  box-shadow:0 -3px 10px rgba(0,0,0,.18);
  overflow:visible
}
.slot-area::before{
  content:'🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾 🐾';
  position:absolute;top:-12px;left:0;width:100%;
  font-size:12px;letter-spacing:4px;text-align:center;
  color:rgba(255,255,255,.12);
  pointer-events:none;white-space:nowrap;overflow:hidden
}
.slot-area::after{
  content:'';position:absolute;top:-8px;left:6%;right:6%;height:2px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,224,178,.35),transparent);
  pointer-events:none
}
.slot-label{
  text-align:center;font-size:14px;color:#ffe0b2;margin-bottom:7px;font-weight:bold;
  text-shadow:0 1px 3px rgba(0,0,0,.25),0 0 8px rgba(255,224,178,.3);
  letter-spacing:2px
}
.slots-container{display:flex;justify-content:center;gap:9px;min-height:54px}
.slot{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(160deg,#bcaaa4 0%,#a1887f 50%,#8d6e63 100%);
  border:2px solid #8d6e63;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  transition:all .3s ease;position:relative;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.12)
}
.slot::after{
  content:'';position:absolute;inset:5px;border-radius:9px;
  border:1px solid rgba(255,255,255,.08);pointer-events:none
}
.slot.filled{
  background:linear-gradient(160deg,#fffde7 0%,#fff9c4 40%,#fff176 100%);
  border:2px solid #f9a825;
  box-shadow:0 3px 10px rgba(249,168,37,.35),inset 0 1px 0 rgba(255,255,255,.6),0 0 14px rgba(255,215,0,.2);
  animation:bounce-in .32s ease-out
}
.slot.warning{animation:shake .55s ease-in-out;border-color:#f44336;box-shadow:0 0 14px rgba(244,67,54,.5),0 0 24px rgba(244,67,54,.25)}

.bottom-bar{
  display:flex;justify-content:center;align-items:center;gap:8px;
  padding:9px 6px 12px;
  background:transparent;position:relative;z-index:10;flex-shrink:0;
  border-top:none
}
.tool-btn{
  width:58px;height:58px;min-width:58px;min-height:58px;border-radius:14px;
  background:linear-gradient(160deg,#64b5f6 0%,#42a5f5 30%,#1e88e5 70%,#1976d2 100%);
  border:2px solid #1565c0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .26s ease;position:relative;gap:3px;
  box-shadow:0 5px 14px rgba(21,101,192,.38),0 3px 6px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 6px rgba(0,0,0,.18);
  overflow:visible
}
.tool-btn::after{
  content:'';position:absolute;top:0;left:0;right:0;height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);
  border-radius:14px 14px 0 0;pointer-events:none
}
.tool-btn:hover{
  transform:translateY(-3px);
  border-color:#42a5f5;
  box-shadow:0 8px 20px rgba(21,101,192,.5),0 3px 6px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.18);
  background:linear-gradient(160deg,#78c0f6 0%,#64b5f6 30%,#42a5f5 70%,#1e88e5 100%)
}
.tool-btn:active{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 2px 6px rgba(0,0,0,.22)}
.tool-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.5)}
.tool-count{
  position:absolute;top:-7px;right:-7px;
  font-size:11px;font-weight:bold;color:#fff;
  background:linear-gradient(135deg,#ff9800,#ff6b00);
  padding:2px 7px;border-radius:12px;min-width:18px;text-align:center;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 2px 5px rgba(0,0,0,.22);z-index:2
}
.tool-icon{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.tool-label{font-size:11px;color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.tool-btn-pause{
  background:linear-gradient(160deg,#ef5350 0%,#e53935 30%,#c62828 100%);border-color:#b71c1c
}
.tool-btn-pause:hover{
  background:linear-gradient(160deg,#f44336 0%,#ef5350 30%,#e53935 100%);border-color:#d32f2f
}

.overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;
  z-index:1000;backdrop-filter:blur(10px);animation:fade-in .32s ease
}
.overlay-content{
  background:linear-gradient(160deg,#fff5f7,#ffe4ea);
  border-radius:32px;padding:44px;text-align:center;max-width:420px;width:90%;
  border:2px solid rgba(255,182,193,.4);
  box-shadow:0 18px 55px rgba(255,107,138,.35),inset 0 1px 0 rgba(255,255,255,.8)
}
.pause-content h2{font-size:32px;color:#ff6b8a;margin-bottom:30px;font-weight:bold}
.win-content h2{font-size:34px;background:linear-gradient(135deg,#ff6b8a,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:26px}
.lose-content h2{font-size:30px;color:#ff8fa3;margin-bottom:20px}
.lose-message{font-size:15px;color:rgba(100,80,90,.6);margin-bottom:28px;line-height:1.6}

.win-animation{position:relative;margin-bottom:22px}
.win-animation .confetti{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.win-animation .confetti::before{
  content:'🎀 🌸 🎀 🌸 🎀 🌸 🎀 🌸';
  position:absolute;top:0;left:0;width:240%;height:100%;
  animation:confetti-fall 2.8s linear infinite;font-size:22px;opacity:.8
}
.trophy{font-size:88px;display:block;animation:bounce-in 1s ease-out;filter:drop-shadow(0 10px 28px rgba(255,215,0,.7))}
.lose-animation{font-size:75px;display:block;animation:bounce-in .85s ease-out;filter:drop-shadow(0 6px 16px rgba(0,0,0,.2))}

.win-stats{
  display:flex;justify-content:center;gap:26px;margin-bottom:32px;
  padding:20px;background:rgba(255,255,255,.7);border-radius:20px;
  border:1px solid rgba(255,182,193,.25)
}
.win-stat{display:flex;flex-direction:column;align-items:center;gap:7px}
.win-stat-label{font-size:14px;color:rgba(100,80,90,.6)}
.win-stat-value{font-size:24px;font-weight:bold;color:#ff6b8a}

.pet-modal{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;
  z-index:1000;backdrop-filter:blur(12px);animation:fade-in .3s ease
}
.pet-detail{
  background:linear-gradient(160deg,#fff5f7,#ffe4ea);
  border-radius:28px;padding:36px;text-align:center;max-width:360px;width:88%;
  border:2px solid rgba(255,182,193,.45);
  box-shadow:0 16px 50px rgba(255,107,138,.4)
}
.modal-close{
  position:absolute;top:16px;right:20px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,107,138,.2);border:2px solid rgba(255,107,138,.4);
  font-size:22px;cursor:pointer;transition:all .3s;color:#ff6b8a
}
.modal-close:hover{background:rgba(255,107,138,.4);transform:rotate(90deg)}
.pet-showcase{margin-bottom:20px}
.pet-avatar-large{font-size:90px;display:block;margin-bottom:16px;filter:drop-shadow(0 8px 22px rgba(255,107,138,.4))}
.pet-rarity{font-size:16px;margin-bottom:14px}
.pet-rarity.common{color:#9e9e9e}
.pet-rarity.rare{color:#87ceeb}
.pet-rarity.epic{color:#dda0dd}
.pet-rarity.legendary{color:#ffd700;text-shadow:0 0 12px rgba(255,215,0,.6)}
.pet-name{font-size:28px;font-weight:bold;color:#ff6b8a;margin-bottom:12px}
.pet-desc{font-size:15px;color:rgba(100,80,90,.65);margin-bottom:22px;line-height:1.6}
.pet-stats{display:flex;justify-content:center;gap:28px}
.pet-stat{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:rgba(100,80,90,.6)}

.ad-loading-content{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 50px;border-radius:28px;
  background:linear-gradient(160deg,#fff5f7,#ffe4ea);
  border:2px solid rgba(255,182,193,.4);
  box-shadow:0 12px 40px rgba(255,107,138,.3),inset 0 1px 0 rgba(255,255,255,.8)
}

.ad-loading-spinner{
  width:50px;height:50px;border:4px solid rgba(255,182,193,.3);
  border-top-color:#ff8fa3;border-radius:50%;
  animation:spin 1s linear infinite;
  box-shadow:0 0 15px rgba(255,143,163,.4)
}

.ad-loading-text{
  font-size:20px;color:#ff6b8a;font-weight:bold;
  letter-spacing:2px
}

.ad-loading-tip{
  font-size:14px;color:rgba(100,80,90,.5)
}

@keyframes transPetFloat{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}25%{transform:translateY(-28px) rotate(10deg) scale(1.15)}50%{transform:translateY(-14px) rotate(-6deg) scale(.95)}75%{transform:translateY(-32px) rotate(15deg) scale(1.1)}}
@keyframes transSpin{to{transform:rotate(360deg)}}
@keyframes transPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

.transition-content{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:50px 40px;border-radius:32px;
  background:linear-gradient(160deg,rgba(255,245,247,.97),rgba(255,228,234,.95));
  border:2px solid rgba(255,182,193,.4);
  box-shadow:0 18px 55px rgba(255,107,138,.35),inset 0 1px 0 rgba(255,255,255,.8);
  text-align:center;max-width:360px;width:88%
}

.transition-pets{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap
}
.trans-pet{
  font-size:28px;display:inline-block;
  animation:transPetFloat 2.8s ease-in-out infinite
}
.trans-pet-1{animation-delay:0s}
.trans-pet-2{animation-delay:.45s}
.trans-pet-3{animation-delay:.9s}
.trans-pet-4{animation-delay:1.35s}
.trans-pet-5{animation-delay:1.8s}

.transition-spinner{
  width:50px;height:50px;border:4px solid rgba(255,182,193,.25);
  border-top-color:#ff8fa3;border-radius:50%;
  animation:transSpin .9s linear infinite;
  box-shadow:0 0 18px rgba(255,143,163,.4)
}

.transition-title{
  font-size:22px;font-weight:bold;
  background:linear-gradient(135deg,#ff6b8a,#ffb6c1,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:3px;
  animation:transPulse 2s ease-in-out infinite
}

.transition-tip{
  font-size:14px;color:rgba(100,80,90,.5);letter-spacing:2px
}