/* ====== GLOBAL RESET & BASE ====== */
*{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;background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 40%,#40916C 70%,#52B788 100%);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}

/* ====== ANIMATIONS ====== */
@keyframes float-nature{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-25px) rotate(8deg)}
}

@keyframes sway{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}

@keyframes pulse-glow-green{
  0%,100%{box-shadow:0 0 20px rgba(82,183,136,.5),0 0 40px rgba(82,183,136,.3),inset 0 -2px 10px rgba(0,0,0,.2)}
  50%{box-shadow:0 0 35px rgba(82,183,136,.8),0 0 60px rgba(82,183,136,.5),inset 0 -2px 15px rgba(0,0,0,.3)}
}

@keyframes sparkle-shine{
  0%,100%{opacity:0;transform:scale(0) rotate(0deg);filter:brightness(2)}
  50%{opacity:1;transform:scale(1.5) rotate(180deg);filter:brightness(3)}
}

@keyframes slide-up-fresh{
  from{opacity:0;transform:translateY(60px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes bounce-juicy{
  0%{opacity:0;transform:scale(.2)}
  50%{opacity:1;transform:scale(1.15)}
  70%{transform:scale(.92)}
  85%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

@keyframes shake-tree{
  0%,100%{transform:translateX(0) rotate(0deg)}
  20%{transform:translateX(-8px) rotate(-3deg)}
  40%{transform:translateX(8px) rotate(3deg)}
  60%{transform:translateX(-6px) rotate(-2deg)}
  80%{transform:translateX(6px) rotate(2deg)}
}

@keyframes confetti-rain{
  0%{transform:translateY(-120vh) rotate(0deg);opacity:1}
  100%{transform:translateY(120vh) rotate(1080deg);opacity:0}
}

@keyframes rainbow-flow{
  0%{filter:hue-rotate(0deg) brightness(1)}
  50%{filter:hue-rotate(180deg) brightness(1.3)}
  100%{filter:hue-rotate(360deg) brightness(1)}
}

@keyframes star-pop{
  0%{opacity:0;transform:scale(0) translateY(30px)}
  30%{opacity:1;transform:scale(1.4) translateY(-10px)}
  50%{transform:scale(1) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ====== BUTTONS ====== */
.btn-primary-fruits{
  background:linear-gradient(135deg,#52B788 0%,#2D6A4F 50%,#1B4332 100%);
  color:#fff;
  border:none;
  padding:18px 56px;
  border-radius:50px;
  font-size:19px;
  font-weight:bold;
  cursor:pointer;
  transition:all .4s cubic-bezier(.68,-.55,.27,1.55);
  box-shadow:
    0 6px 24px rgba(45,106,79,.5),
    0 3px 12px rgba(27,67,50,.4),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -4px 0 rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  letter-spacing:3px;
  text-transform:uppercase
}

.btn-primary-fruits::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 60%);
  transition:all .6s;
  opacity:0;
  transform:scale(0)
}

.btn-primary-fruits:hover::before{opacity:1;transform:scale(1)}
.btn-primary-fruits:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:
    0 10px 32px rgba(45,106,79,.7),
    0 6px 16px rgba(27,67,50,.5),
    inset 0 2px 0 rgba(255,255,255,.3)
}
.btn-primary-fruits:active{transform:scale(.95) translateY(0)}

.btn-glow-fruits{animation:pulse-glow-green 2.5s ease-in-out infinite}

.btn-secondary-fruits{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:2px solid rgba(255,255,255,.25);
  padding:13px 36px;
  border-radius:28px;
  font-size:15px;
  cursor:pointer;
  transition:all .35s ease;
  backdrop-filter:blur(12px);
  font-weight:500
}

.btn-secondary-fruits:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(82,183,136,.7);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(82,183,136,.35);
  background:linear-gradient(135deg,rgba(82,183,136,.25),rgba(64,145,108,.2))
}

.btn-danger-fruits{
  background:linear-gradient(135deg,#E76F51 0%,#D62828 100%);
  color:#fff;
  border:none;
  padding:14px 42px;
  border-radius:26px;
  font-size:16px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 4px 18px rgba(231,111,81,.45)
}

.btn-icon-fruits{
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:all .35s cubic-bezier(.68,-.55,.27,1.55);
  backdrop-filter:blur(10px)
}

.btn-icon-fruits:hover{
  background:rgba(82,183,136,.3);
  border-color:rgba(82,183,136,.6);
  transform:rotate(360deg) scale(1.15);
  box-shadow:0 4px 16px rgba(82,183,136,.4)
}

.btn-back-fruits{
  background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:8px 18px;border-radius:22px;transition:all .3s;font-weight:500}
.btn-back-fruits:hover{background:rgba(82,183,136,.25);transform:translateX(-3px)}

/* ====== START PAGE ====== */
#page-start{
  background:radial-gradient(ellipse at 50% 40%,#2D6A4F 0%,#1B4332 50%,#081C15 100%);
  position:relative;
  overflow:hidden
}

.start-bg-nature{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  overflow:hidden
}

.sunlight{
  position:absolute;
  top:-150px;right:-150px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,223,128,.4) 0%,transparent 70%);
  filter:blur(40px);
  animation:pulse-glow-green 4s ease-in-out infinite
}

.leaf{
  position:absolute;
  font-size:48px;
  animation:sway 4s ease-in-out infinite;
  opacity:.5;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))
}

.leaf1{top:10%;left:8%;animation-delay:0s;font-size:56px}
.leaf2{top:25%;right:12%;animation-delay:1.5s;font-size:44px}
.leaf3{bottom:20%;left:15%;animation-delay:3s;font-size:52px}

.fruit-float{
  position:absolute;
  font-size:42px;
  animation:float-nature 5s ease-in-out infinite;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))
}

.fruit-float.f1{--x:12%;--y:18%;animation-delay:0s}
.fruit-float.f2{--x:88%;--y:25%;animation-delay:1.2s}
.fruit-float.f3{--x:6%;--y:62%;animation-delay:2.4s}
.fruit-float.f4{--x:90%;--y:68%;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:20px;
  gap:22px
}

.logo-container-fruits{
  position:relative;
  width:150px;height:150px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px
}

.fruit-logo-icon{
  font-size:78px;
  z-index:2;
  animation:bounce-juicy 1.2s ease-out;
  filter:drop-shadow(0 8px 20px rgba(255,165,0,.7));
  animation:bounce-juicy .8s ease-out
}

.fruit-logo-ring{
  position:absolute;
  border-radius:50%;
  border:3px solid transparent
}

.fruit-logo-ring.ring-outside{
  width:130px;height:130px;
  border-top-color:#52B788;
  border-right-color:#74C69D;
  border-bottom-color:#40916C;
  animation:spin 4s linear infinite
}

.fruit-logo-ring.ring-inside{
  width:148px;height:148px;
  border-left-color:#95D5B2;
  border-bottom-color:#D8F3DC;
  animation:spin 5s linear infinite reverse
}

@keyframes spin{to{transform:rotate(360deg)}}

.game-title-fruits{text-align:center;margin:12px 0}
.title-text-fruits{
  display:block;
  font-size:44px;
  font-weight:bold;
  background:linear-gradient(135deg,#95D5B2 0%,#D8F3DC 30%,#FFF 50%,#D8F3DC 70%,#95D5B2 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rainbow-flow 4s linear infinite;
  letter-spacing:5px;
  text-shadow:none
}

.title-sub-fruits{
  display:block;
  font-size:17px;
  color:rgba(255,255,255,.75);
  letter-spacing:10px;
  margin-top:6px;
  text-transform:uppercase;
  font-weight:300
}

.stats-bar-fruits{
  display:flex;
  gap:28px;
  padding:18px 38px;
  background:linear-gradient(135deg,rgba(82,183,136,.2),rgba(45,106,79,.15));
  border-radius:32px;
  backdrop-filter:blur(12px);
  border:2px solid rgba(149,213,178,.25);
  box-shadow:0 4px 20px rgba(0,0,0,.2)
}

.stat-item-fruits{
  display:flex;align-items:center;gap:8px;
  font-size:17px;
  font-weight:bold;
  color:#D8F3DC
}

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

.version-text-fruits{
  color:rgba(255,255,255,.45);
  font-size:13px;
  margin-top:auto;
  font-style:italic
}

/* ====== LEVEL SELECT PAGE ====== */
#page-levels{
  background:linear-gradient(180deg,#1B4332 0%,#2D6A4F 50%,#081C15 100%);
  overflow-y:auto
}

#page-levels::-webkit-scrollbar{display:none}

.levels-bg-fruits{
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 16px
}

.levels-header-fruits{
  width:100%;
  max-width:520px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  margin-bottom:18px
}

.levels-header-fruits h2{
  font-size:28px;
  background:linear-gradient(135deg,#D8F3DC,#95D5B2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:4px;
  font-weight:bold
}

.coins-display{
  font-size:19px;
  color:#FFD700;
  font-weight:bold;
  text-shadow:0 0 12px rgba(255,215,0,.6)
}

.world-tabs{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
  justify-content:center
}

.world-tab{
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
  padding:10px 20px;
  border-radius:20px;
  font-size:14px;
  cursor:pointer;
  transition:all .3s;
  font-weight:500
}

.world-tab.active{
  background:linear-gradient(135deg,#52B788,#2D6A4F);
  border-color:#74C69D;
  color:#fff;
  box-shadow:0 4px 16px rgba(82,183,136,.4)
}

.world-tab:hover:not(.active){
  background:rgba(82,183,136,.2);
  border-color:rgba(82,183,136,.5);
  transform:translateY(-2px)
}

.levels-grid-fruits{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  max-width:520px;
  width:100%;
  padding-bottom:50px
}

.level-cell-fruits{
  aspect-ratio:1;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:all .4s cubic-bezier(.68,-.55,.27,1.55);
  border:2px solid transparent;
  font-weight:bold;
  overflow:hidden
}

.level-cell-fruits::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  opacity:0;
  transition:opacity .3s
}

.level-cell-fruits:hover::before{opacity:1}

.level-cell-fruits.locked{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:rgba(255,255,255,.25);
  cursor:not-allowed;
  border-color:rgba(255,255,255,.06)
}

.level-cell-fruits.unlocked{
  background:linear-gradient(135deg,rgba(82,183,136,.25),rgba(64,145,108,.18));
  color:#fff;
  border-color:rgba(82,183,136,.45);
  box-shadow:0 4px 18px rgba(82,183,136,.25),inset 0 1px 0 rgba(255,255,255,.12)
}

.level-cell-fruits.unlocked:hover{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 10px 30px rgba(82,183,136,.45);
  border-color:#D8F3DC
}

.level-cell-fruits.unlocked:active{transform:scale(.94)}

.level-cell-fruits.completed{
  background:linear-gradient(135deg,rgba(255,215,0,.22),rgba(255,170,0,.15));
  border-color:rgba(255,215,0,.55)
}

.level-cell-fruits.current{
  animation:pulse-glow-green 1.8s ease-in-out infinite;
  border-color:#74C69D
}

.level-num-fruits{font-size:24px;font-weight:bold;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.level-stars-fruits{font-size:11px;margin-top:4px;color:#FFD700;text-shadow:0 0 6px rgba(255,215,0,.5)}
.level-lock-icon-fruits{font-size:22px;opacity:.4}

/* ====== COLLECTION PAGE ====== */
#page-collection{
  background:linear-gradient(180deg,#081C15 0%,#1B4332 100%);
  overflow-y:auto
}

.collection-bg-fruits{
  width:100%;min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:20px 16px
}

.collection-header-fruits{
  width:100%;max-width:600px;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;margin-bottom:28px
}

.collection-header-fruits h2{
  font-size:29px;
  background:linear-gradient(135deg,#95D5B2,#D8F3DC);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:bold
}

.collection-grid-fruits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:600px;
  width:100%;
  padding-bottom:50px
}

.fruit-card{
  background:linear-gradient(135deg,rgba(82,183,136,.15),rgba(45,106,79,.1));
  border-radius:22px;
  padding:22px;
  text-align:center;
  cursor:pointer;
  transition:all .4s cubic-bezier(.68,-.55,.27,1.55);
  border:2px solid rgba(149,213,178,.15);
  position:relative;
  overflow:hidden
}

.fruit-card::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:conic-gradient(from 0deg,transparent,rgba(149,213,178,.15),transparent 30%);
  animation:spin 5s linear infinite;
  opacity:0;
  transition:opacity .4s
}

.fruit-card:hover::after{opacity:1}
.fruit-card:hover{
  transform:translateY(-10px) scale(1.04);
  border-color:rgba(82,183,136,.6);
  box-shadow:0 14px 35px rgba(82,183,136,.35)
}

.fruit-avatar-fruits{
  font-size:60px;
  margin-bottom:14px;
  display:block;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
  transition:transform .3s
}

.fruit-card:hover .fruit-avatar-fruits{transform:scale(1.15) rotate(5deg)}

.fruit-name-card-fruits{font-size:17px;font-weight:bold;margin-bottom:6px;color:#D8F3DC}
.fruit-desc-card-fruits{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}

.fruit-card.locked-card-fruits{
  filter:grayscale(1) brightness(.4);
  cursor:not-allowed
}

.fruit-card.locked-card-fruits .fruit-avatar-fruits{
  filter:grayscale(1) brightness(.3);
  font-size:44px
}

.fruit-card.locked-card-fruits::before{
  content:'🔒';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:34px;
  opacity:.5;
  z-index:2
}

/* ====== GAME PAGE ====== */
#page-game{
  background:linear-gradient(180deg,#E8F5E9 0%,#C8E6C9 30%,#A5D6A7 60%,#81C784 100%);
  position:relative
}

.game-bg-effects-fruits{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  overflow:hidden
}

.sparkle-fruits{
  position:absolute;
  width:5px;height:5px;
  background:#D8F3DC;
  border-radius:50%;
  box-shadow:0 0 12px #D8F3DC,0 0 24px #95D5B2;
  animation:sparkle-shine 3.5s ease-in-out infinite
}

.sparkle-fruits.s1{top:18%;left:8%;animation-delay:0s}
.sparkle-fruits.s2{top:42%;right:12%;animation-delay:1.3s}
.sparkle-fruits.s3{bottom:28%;left:18%;animation-delay:2.6s}

.game-top-bar-fruits{
  width:100%;
  padding:4px 6px 5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,.85);
  position:relative;
  z-index:10;
  flex-shrink:0;
  border-bottom:2px solid rgba(76,175,80,.2);
  box-shadow:0 2px 8px rgba(0,0,0,.08)
}

.game-info-left-fruits{display:flex;align-items:center;gap:6px}

.level-badge-fruits{
  background:linear-gradient(135deg,#66BB6A,#43A047);
  padding:3px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:bold;
  box-shadow:0 2px 6px rgba(76,175,80,.3),inset 0 1px 0 rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.15)
}

.score-display-fruits{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,215,0,.1);
  padding:2px 7px;
  border-radius:6px;
  border:1px solid rgba(255,215,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}

.score-label-fruits{color:rgba(0,0,0,.5);font-weight:normal;font-size:11px}
.score-value-fruits{font-size:14px;color:#F57F17;font-weight:bold;text-shadow:0 0 4px rgba(245,127,23,.3)}

.game-info-right-fruits{display:flex;align-items:center;gap:5px}

.moves-counter{
  background:rgba(76,175,80,.08);
  padding:2px 7px;
  border-radius:6px;
  display:flex;align-items:center;gap:4px;
  border:1px solid rgba(76,175,80,.15);
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}

.moves-label{font-size:11px;color:rgba(0,0,0,.5)}
.moves-value{font-size:13px;font-weight:bold;color:#F57F17}

/* ★ 步数不足红边闪烁警告 */
.moves-counter.danger-flash{animation:movesDangerFlash 0.5s ease-in-out infinite;border-color:#ff4757!important;background:rgba(255,71,87,.1)!important}
@keyframes movesDangerFlash{0%,100%{box-shadow:0 0 8px rgba(255,71,87,.3)}50%{box-shadow:0 0 20px rgba(255,71,87,.7),0 0 40px rgba(255,71,87,.3)}}
.moves-counter.danger-flash .moves-value{color:#ff4757;animation:textPulse 0.4s ease-in-out infinite}
@keyframes textPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

.btn-icon-fruits{
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(76,175,80,.12);
  border:1px solid rgba(76,175,80,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  cursor:pointer;
  transition:all .3s;
  backdrop-filter:blur(6px);
  box-shadow:0 1px 3px rgba(0,0,0,.08)
}

.btn-icon-fruits:hover{
  background:rgba(76,175,80,.25);
  border-color:rgba(76,175,80,.4);
  transform:scale(1.06)
}

.goal-area-fruits{
  padding:2px 5px;
  display:flex;
  align-items:center;
  gap:5px;
  background:rgba(255,255,255,.5);
  position:relative;
  z-index:10;
  flex-shrink:0;
  min-height:24px;
  border-bottom:1px solid rgba(76,175,80,.1)
}

.goal-label{font-size:10px;color:rgba(0,0,0,.5);font-weight:500}

.goals-container{
  display:flex;
  gap:4px;
  flex-wrap:wrap
}

.goal-item{
  display:flex;align-items:center;gap:3px;
  background:rgba(76,175,80,.06);
  padding:2px 6px;
  border-radius:5px;
  font-size:10px;
  border:1px solid rgba(76,175,80,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.05)
}

.goal-item.completed{
  background:rgba(76,175,80,.2);
  border-color:rgba(76,175,80,.35);
  text-decoration:line-through;
  opacity:.65
}

/* ★ TARGET COMPLETE 横幅 */
.target-complete-banner{
  position:fixed;
  top:-60px;left:0;right:0;z-index:9999;
  text-align:center;
  padding:10px 20px;
  font-size:18px;font-weight:bold;
  letter-spacing:4px;
  color:#fff;
  background:linear-gradient(90deg,transparent,#52B788,#38a169,#52B788,transparent);
  box-shadow:0 4px 20px rgba(82,183,136,.5);
  animation:targetBannerSlideIn .6s cubic-bezier(.34,1.56,.64,1) forwards,
             targetBannerGlow 1s ease-in-out infinite alternate;
}
@keyframes targetBannerSlideIn{from{top:-60px}to{top:0}}
@keyframes targetBannerGlow{from{box-shadow:0 4px 20px rgba(82,183,136,.5)}to{box-shadow:0 4px 40px rgba(82,183,136,.9),0 0 30px rgba(255,215,0,.3)}}

/* ★ 大招屏幕闪光 */
.screen-flash{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;
  pointer-events:none;opacity:0;
  transition:opacity .15s ease-out;
}
.screen-flash.active{opacity:1}
.screen-flash.flash-bomb{background:radial-gradient(circle,rgba(255,99,71,.35),transparent 70%)}
.screen-flash.flash-rainbow{background:linear-gradient(135deg,rgba(165,94,234,.25),rgba(255,105,180,.25),rgba(165,94,234,.25))}

.combo-popup-fruits{
  position:absolute;
  top:22%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:linear-gradient(135deg,#52B788,#95D5B2);
  padding:18px 36px;
  border-radius:24px;
  font-size:30px;
  font-weight:bold;
  color:#fff;
  pointer-events:none;
  z-index:100;
  opacity:0;
  transition:all .4s cubic-bezier(.68,-.55,.27,1.55);
  box-shadow:0 10px 35px rgba(82,183,136,.65);
  text-align:center;
  white-space:nowrap
}

.combo-popup-fruits.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:combo-pop-fruits .9s ease-out forwards
}

@keyframes combo-pop-fruits{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  45%{transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-75%) scale(1.05)}
}

.combo-number-fruits{font-size:38px;display:block;text-shadow:0 3px 6px rgba(0,0,0,.3)}
.combo-text-fruits{font-size:17px;display:block;font-weight:normal}

.game-board-area-fruits{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;
  min-height:0;
  position:relative;
  width:100%
}

#gameCanvasFruits{
  border-radius:5px;
  touch-action:none;
  box-shadow:
    0 3px 14px rgba(0,0,0,.15),
    0 1px 6px rgba(0,0,0,.1),
    inset 0 0 0 1px rgba(149,213,178,.15),
    inset 0 0 14px rgba(0,0,0,.06);
  max-width:100%;
  max-height:100%;
  background:linear-gradient(135deg,rgba(27,67,50,.15),rgba(8,28,21,.2))
}

.tools-bar-fruits{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:8px 6px 10px;
  background:linear-gradient(180deg,#E8F5E9 0%,#C8E6C9 100%);
  position:relative;
  z-index:10;
  flex-shrink:0;
  border-top:2px solid rgba(76,175,80,.2)
}

.tool-btn-fruits{
  flex:1;
  max-width:72px;
  min-height:64px;
  border-radius:12px;
  background:linear-gradient(160deg,#42A5F5 0%,#1E88E5 50%,#1565C0 100%);
  border:2px solid #0D47A1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
  gap:3px;
  box-shadow:0 4px 12px rgba(21,101,192,.3),0 2px 4px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.15);
  overflow:hidden
}

.tool-btn-fruits::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);
  border-radius:12px 12px 0 0;
  pointer-events:none
}

.tool-btn-fruits:hover{
  transform:translateY(-2px);
  border-color:#1565C0;
  box-shadow:0 6px 16px rgba(21,101,192,.4),0 2px 4px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.15);
  background:linear-gradient(160deg,#64B5F6 0%,#42A5F5 50%,#1E88E5 100%)
}

.tool-btn-fruits:active{transform:scale(.93);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 4px rgba(0,0,0,.2)}
.tool-btn-fruits:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.5)}
/* ★ 道具为空时的样式（提示需要看广告） */
.tool-btn-fruits.tool-empty{
  border-color:rgba(99,102,241,0.5);
  box-shadow:0 0 10px rgba(99,102,241,0.2)
}
.tool-btn-fruits.tool-empty::after{
  content:'📺';font-size:9px;position:absolute;top:-4px;right:-4px
}

.tool-icon-fruits{font-size:24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.tool-count-fruits{
  font-size:11px;
  font-weight:bold;
  color:#FFF;
  background:linear-gradient(135deg,#FF6F00,#E65100);
  padding:2px 7px;
  border-radius:8px;
  min-width:18px;
  text-align:center;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.tool-label-fruits{font-size:11px;color:#FFF;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* ====== OVERLAYS ====== */
.overlay-fruits{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(8,28,21,.9);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  backdrop-filter:blur(12px);
  animation:fade-in-fruits .35s ease
}

@keyframes fade-in-fruits{from{opacity:0}to{opacity:1}}

.overlay-content-fruits{
  background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 100%);
  border-radius:32px;
  padding:44px;
  text-align:center;
  max-width:420px;
  width:90%;
  border:3px solid rgba(82,183,136,.35);
  box-shadow:
    0 24px 70px rgba(0,0,0,.85),
    0 0 50px rgba(82,183,136,.25),
    inset 0 2px 0 rgba(255,255,255,.1);
  animation:slide-up-fresh .45s cubic-bezier(.68,-.55,.27,1.55)
}

.overlay-content-fruits h2{
  font-size:30px;
  margin-bottom:28px;
  background:linear-gradient(135deg,#D8F3DC,#95D5B2);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:bold
}

.overlay-content-fruits button{
  width:100%;
  margin:14px 0
}

/* WIN CONTENT */
.win-animation-fruits{position:relative;height:110px;margin-bottom:22px}
.trophy-fruits{
  font-size:86px;
  animation:bounce-juicy 1s ease-out;
  display:inline-block;
  filter:drop-shadow(0 10px 25px rgba(255,215,0,.85))
}

.confetti-fruits{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none
}

.confetti-fruits::before,
.confetti-fruits::after,
.confetti-fruits .c1,
.confetti-fruits .c2{
  content:'🎉';
  position:absolute;
  font-size:28px;
  animation:confetti-rain 2.5s linear infinite
}

.confetti-fruits::before{left:15%;animation-delay:0s}
.confetti-fruits::after{right:15%;animation-delay:.6s}

.win-title-fruits{
  font-size:34px!important;
  margin-bottom:24px!important;
  color:#FFD700!important;
  -webkit-text-fill-color:#FFD700!important;
  text-shadow:0 0 25px rgba(255,215,0,.7)!important
}

.win-stats-fruits{
  display:flex;
  justify-content:space-around;
  margin:28px 0;
  padding:24px;
  background:rgba(255,255,255,.06);
  border-radius:24px;
  border:1px solid rgba(149,213,178,.15)
}

.win-stat-fruits{
  display:flex;flex-direction:column;gap:8px
}

.win-stat-label-fruits{font-size:14px;color:rgba(255,255,255,.58);font-weight:400}
.win-stat-value-fruits{font-size:22px;font-weight:bold;color:#FFD700}

/* LOSE CONTENT */
.lose-animation-fruits{
  font-size:84px;
  margin-bottom:18px;
  animation:shake-tree .6s ease-in-out
}

.lose-title-fruits{
  color:#E76F51!important;
  -webkit-text-fill-color:#E76F51!important;
  text-shadow:0 0 22px rgba(231,111,81,.7)!important
}

.lose-message-fruits{
  color:rgba(255,255,255,.62);
  margin:18px 0 28px;
  font-size:16px;
  line-height:1.6
}

/* ====== LEVEL COMPLETE ANIMATION ====== */
.level-complete-overlay{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(8,28,21,.85);
  display:flex;align-items:center;justify-content:center;
  z-index:1500;
  backdrop-filter:blur(8px)
}

.stars-container{
  display:flex;
  gap:30px
}

.star{
  font-size:80px;
  opacity:0;
  filter:drop-shadow(0 8px 20px rgba(255,215,0,.8))
}

.star.star1{animation:star-pop .8s .2s forwards}
.star.star2{animation:star-pop .8s .6s forwards}
.star.star3{animation:star-pop .8s 1s forwards}

/* ====== RESPONSIVE ====== */
@media(max-width:480px){
  .title-text-fruits{font-size:36px}
  .stats-bar-fruits{padding:14px 28px;gap:20px}
  .stat-item-fruits{font-size:15px}
  .levels-grid-fruits{grid-template-columns:repeat(4,1fr);gap:12px}
  .level-num-fruits{font-size:20px}
  .tool-btn-fruits{width:54px;height:54px}
  .tool-icon-fruits{font-size:22px}
  .collection-grid-fruits{grid-template-columns:repeat(3,1fr);gap:14px}
  .fruit-avatar-fruits{font-size:50px}
}

@media(max-width:380px){
  .title-text-fruits{font-size:30px}
  .fruit-logo-icon{font-size:64px}
  .logo-container-fruits{width:120px;height:120px}
  .btn-primary-fruits{padding:16px 44px;font-size:17px}
  .levels-grid-fruits{grid-template-columns:repeat(3,1fr)}
}

/* ====== SAFE AREA ====== */
@supports(padding:max(0px)){
  .game-top-bar-fruits{padding-top:max(14px,env(safe-area-inset-top))}
  .tools-bar-fruits{padding-bottom:max(24px,env(safe-area-inset-bottom))}       
  .start-content{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* ====== AD LOADING OVERLAY ====== */
.ad-loading-content-fruits{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 50px;border-radius:28px;
  background:linear-gradient(160deg,#fff9f0,#fff0e6);
  border:2px solid rgba(255,140,0,.4);
  box-shadow:0 12px 40px rgba(255,140,0,.3),inset 0 1px 0 rgba(255,255,255,.8)
}

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

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

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

/* ====== TOAST ANIMATIONS ====== */
@keyframes toastFadeIn{
  from{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.8)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@keyframes toastFadeOut{
  from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  to{opacity:0;transform:translateX(-50%) translateY(-15px) scale(.9)}
}