/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
@font-face{font-family:'VagRounded';src:url('fonts/VagRounded.ttf') format('truetype');}
html,body{
  width:100%;height:100%;overflow:hidden;
  font-family:'VagRounded',Arial,sans-serif;
  background:#f7c5d5;
}

/* ===== SCREENS ===== */
.screen{
  position:fixed;inset:0;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
}
.screen.active{display:flex;}
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.65);z-index:99;
  display:none;align-items:center;justify-content:center;
}

/* ===== SPLASH ===== */
#screenSplash{background:#1a0a2e;cursor:pointer;}
#splashImg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
#tapToPlay{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:min(8px,2vw);
  background:rgba(0,0,0,0.55);
  border:2px solid rgba(255,255,255,0.4);
  border-radius:50px;
  padding:clamp(10px,2.5vw,16px) clamp(18px,5vw,32px);
  color:#fff;
  font-size:clamp(0.85rem,3.5vw,1.4rem);
  letter-spacing:clamp(1px,0.5vw,3px);
  animation:tapPulse 1.4s ease-in-out infinite;
  margin-top:55vh;
}
.tap-dot{width:clamp(4px,1vw,6px);height:clamp(4px,1vw,6px);background:#fff;border-radius:50%;opacity:0.6;}
@keyframes tapPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.06);opacity:0.8;}}

/* ===== MENU SCREENS BASE ===== */
#screenMenu,#screenLB,#screenHowTo,#screenMusic,#screenReset{
  background:linear-gradient(145deg,#ffe8f0,#ffb3d1 40%,#e8a0d0);
}
#screenMenu::before,#screenLB::before,#screenHowTo::before,
#screenMusic::before,#screenReset::before{
  content:'✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦';
  position:absolute;top:6px;left:0;right:0;
  text-align:center;font-size:clamp(0.55rem,1.8vw,0.9rem);
  color:rgba(255,255,255,0.35);letter-spacing:clamp(4px,2vw,12px);
  pointer-events:none;z-index:1;
}

.floating-fruits{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.float-fruit{position:absolute;opacity:0.25;animation:floatUp linear infinite;}
@keyframes floatUp{
  from{transform:translateY(110vh) rotate(0deg);opacity:0;}
  10%{opacity:0.25;}90%{opacity:0.25;}
  to{transform:translateY(-20vh) rotate(360deg);opacity:0;}
}

/* ===== MENU BOX — scales with viewport ===== */
.menu-box{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.5vh,14px);
  padding:clamp(8px,1.5vh,20px) clamp(14px,4vw,22px);
  width:min(340px,90vw);
  transform-origin: center center;
}

/* ===== 3D TITLE ===== */
.title-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(2px,1vh,6px);}
.game-title{
  font-size:clamp(2rem,11vw,5rem);
  line-height:0.9;text-align:center;
  animation:titleFloat 3s ease-in-out infinite;
  letter-spacing:clamp(1px,0.5vw,2px);
}
.t-fruit{
  display:block;
  background:linear-gradient(180deg,#fff9 0%,#ffe0b2 30%,#ffb347 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(200,100,0,.55)) drop-shadow(0 4px 0 rgba(160,70,0,.3)) drop-shadow(0 7px 16px rgba(0,0,0,.2));
  transform:perspective(300px) rotateX(8deg);transform-origin:center bottom;
}
.t-drop{
  display:block;
  background:linear-gradient(180deg,#ffcce8 0%,#ff6b9d 35%,#c0185e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(150,0,80,.6)) drop-shadow(0 4px 0 rgba(110,0,50,.3)) drop-shadow(0 7px 16px rgba(0,0,0,.22));
  transform:perspective(300px) rotateX(8deg);transform-origin:center bottom;
}
@keyframes titleFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.03);}}
.subtitle{
  font-size:clamp(0.6rem,2.5vw,0.95rem);
  color:rgba(255,255,255,.95);
  letter-spacing:clamp(1px,0.5vw,2px);
  margin-top:clamp(-4px,0px,0px);
}

/* ===== MAPI FOOTER ===== */
.mapi-footer{
  position:absolute;bottom:clamp(6px,1.5vh,14px);left:0;right:0;
  text-align:center;font-family:'VagRounded',Arial,sans-serif;
  font-size:clamp(0.6rem,2.2vw,1rem);
  color:#e8102a;letter-spacing:clamp(1px,0.8vw,3px);font-weight:bold;
  text-shadow:0 1px 4px rgba(0,0,0,.15);pointer-events:none;z-index:2;
}

/* ===== BUTTONS ===== */
.btn{
  padding:clamp(8px,1.8vh,13px) clamp(16px,5vw,28px);
  border:none;border-radius:50px;
  font-family:inherit;
  font-size:clamp(0.78rem,2.8vw,1.02rem);
  cursor:pointer;
  width:100%;max-width:min(270px,85vw);
  display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,8px);
  transition:transform .12s,box-shadow .12s;
  position:relative;overflow:hidden;
}
.btn:active{transform:translateY(3px) scale(.97);}
.kawaii-icon{font-size:1.15em;}
.kawaii-label{flex:1;text-align:center;}
.kawaii-sparkle{font-size:0.9em;opacity:0.8;animation:sparkSpin 2s linear infinite;}
@keyframes sparkSpin{to{transform:rotate(360deg);}}

.btn.primary{
  background:linear-gradient(135deg,#ff6eb4,#ff9de2,#ffb347);
  background-size:200% 200%;
  animation:btnShimmer 3s ease infinite;
  color:#fff;
  box-shadow:0 5px 0 #c94a6e,0 8px 16px rgba(255,107,157,.35);
}
.btn.primary:active{box-shadow:0 2px 0 #c94a6e,0 4px 8px rgba(255,107,157,.25);}
@keyframes btnShimmer{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.btn.secondary{
  background:rgba(255,255,255,.9);color:#e85d8a;
  box-shadow:0 4px 0 #d4a0b8,0 6px 14px rgba(0,0,0,.1);
}
.btn.secondary:active{box-shadow:0 1px 0 #d4a0b8;}
.btn.danger{
  background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;
  box-shadow:0 5px 0 #c0392b,0 8px 16px rgba(255,71,87,.35);
}
.btn.danger:active{box-shadow:0 2px 0 #c0392b,0 4px 8px rgba(255,71,87,.25);}
.btn.small{padding:clamp(6px,1.2vh,9px) clamp(12px,3vw,18px);font-size:.86rem;width:auto;max-width:none;}

/* ===== LEADERBOARD ===== */
#screenLB h2{color:#fff;font-size:clamp(1.1rem,5vw,2rem);margin-bottom:4px;}
.lb-list{
  background:rgba(255,255,255,.88);border-radius:18px;
  padding:clamp(6px,1.5vw,10px);
  width:100%;max-width:min(290px,85vw);
  max-height:min(52vh,55%);overflow-y:auto;
}
.lb-row{display:flex;gap:10px;align-items:center;padding:clamp(5px,1.2vw,7px) 8px;border-bottom:1px solid rgba(0,0,0,.06);font-size:clamp(0.75rem,2.5vw,.9rem);color:#444;}
.lb-row:last-child{border-bottom:none;}
.lb-rank{width:24px;text-align:center;}.lb-name{flex:1;}.lb-score{font-weight:bold;color:#ff6b9d;}
.lb-empty{text-align:center;color:#aaa;padding:18px;}

/* ===== HOW TO PLAY ===== */
.howto-box,.music-box{
  max-width:min(380px,92vw);
  max-height:min(88vh,88%);
  overflow-y:auto;
  gap:clamp(8px,2vh,12px) !important;
}
.howto-title{
  font-size:clamp(1.1rem,4.5vw,1.7rem);
  color:#fff;text-shadow:0 2px 8px rgba(200,50,100,.3);
  margin-bottom:4px;text-align:center;
}
.tut-steps{display:flex;flex-direction:column;gap:clamp(5px,1.2vh,10px);width:100%;}
.tut-step{
  display:flex;align-items:center;gap:clamp(6px,2vw,10px);
  background:rgba(255,255,255,.78);border-radius:14px;
  padding:clamp(6px,1.5vw,9px) clamp(8px,2.5vw,12px);
}
.tut-num{
  background:linear-gradient(135deg,#ff6b9d,#ff8c6b);color:#fff;font-weight:bold;
  width:clamp(18px,5vw,24px);height:clamp(18px,5vw,24px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(0.7rem,2.2vw,.85rem);flex-shrink:0;
}
.tut-text{font-size:clamp(0.72rem,2.5vw,.88rem);color:#555;}

/* ===== MUSIC PICKER ===== */
.music-list{
  width:100%;display:flex;flex-direction:column;gap:clamp(5px,1.2vh,8px);
  max-height:min(55vh,60%);overflow-y:auto;padding:2px;
}
.music-item{
  display:flex;align-items:center;gap:clamp(6px,2vw,10px);
  background:rgba(255,255,255,.82);border-radius:16px;
  padding:clamp(7px,1.8vw,10px) clamp(10px,3vw,14px);
  cursor:pointer;border:3px solid transparent;transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.music-item:hover{background:rgba(255,255,255,.95);transform:scale(1.02);}
.music-item.selected{border-color:#ff6b9d;background:rgba(255,200,225,.95);box-shadow:0 3px 12px rgba(255,107,157,.3);}
.music-item.selected::after{content:'✓';margin-left:auto;color:#ff6b9d;font-weight:bold;font-size:1.1rem;}
.music-note{font-size:clamp(1rem,3.5vw,1.3rem);flex-shrink:0;}
.music-name{flex:1;font-size:clamp(0.72rem,2.5vw,.88rem);color:#555;}
.music-preview-btn{
  background:linear-gradient(135deg,#ff6b9d,#ff8c6b);border:none;border-radius:50%;
  width:clamp(22px,5vw,28px);height:clamp(22px,5vw,28px);
  color:#fff;font-size:clamp(0.6rem,1.8vw,.75rem);
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .12s;
}
.music-preview-btn:hover{transform:scale(1.15);}

/* ===== RESET SCREEN ===== */
.reset-box{max-width:min(340px,90vw);gap:clamp(8px,2vh,12px) !important;}
.reset-icon{font-size:clamp(2rem,8vw,3.5rem);animation:resetWobble 1.5s ease-in-out infinite;line-height:1;}
@keyframes resetWobble{0%,100%{transform:rotate(-8deg) scale(1);}50%{transform:rotate(8deg) scale(1.1);}}
.reset-title{font-size:clamp(1.1rem,4.5vw,1.8rem);color:#fff;text-shadow:0 2px 8px rgba(180,40,80,.3);text-align:center;}
.reset-desc{
  background:rgba(255,255,255,.75);border-radius:18px;
  padding:clamp(8px,2vw,12px) clamp(10px,3vw,16px);
  width:100%;display:flex;flex-direction:column;gap:clamp(5px,1.2vh,8px);
}
.reset-item{font-size:clamp(0.72rem,2.5vw,.92rem);color:#555;display:flex;align-items:center;gap:6px;}
.reset-warning{font-size:clamp(0.68rem,2.2vw,.88rem);color:rgba(255,255,255,.9);text-align:center;font-style:italic;}
.reset-btns{display:flex;flex-direction:column;gap:clamp(7px,1.5vh,10px);width:100%;align-items:center;}
.reset-done-icon{font-size:clamp(2rem,7vw,3rem);animation:sparkPop .6s ease-out;}
@keyframes sparkPop{0%{transform:scale(0) rotate(-20deg);}60%{transform:scale(1.3) rotate(10deg);}100%{transform:scale(1) rotate(0deg);}}
.reset-done-msg{font-size:clamp(0.8rem,2.8vw,1rem);color:#ff6b9d;text-align:center;}

/* ===== TUTORIAL OVERLAY ===== */
.tutorial-modal{max-width:min(340px,90vw);}
.tut-title{font-size:clamp(1.1rem,4.5vw,1.6rem);color:#ff6b9d;margin-bottom:6px;text-align:center;}

/* ===== MODAL ===== */
.modal{
  background:linear-gradient(160deg,#fff5f9,#fff);
  border-radius:28px;border:3px solid #ffb3d1;
  padding:clamp(16px,4vw,24px) clamp(18px,5vw,28px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,12px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  min-width:min(255px,80vw);max-width:min(360px,92vw);
  max-height:90vh;overflow-y:auto;
}
.modal::before{content:'(◕‿◕✿)';font-size:clamp(1rem,3.5vw,1.4rem);color:#ff6b9d;text-align:center;}
.modal-title,.modal h2{font-size:clamp(1.1rem,4.5vw,1.9rem);color:#e85d8a;text-align:center;}
.big-score{font-size:clamp(2rem,10vw,3.4rem);color:#ff6b9d;font-weight:bold;line-height:1;}
.hs-msg{font-size:clamp(0.8rem,2.8vw,.98rem);color:#ff8c00;animation:pulse .6s ease-in-out infinite alternate;}
@keyframes pulse{from{transform:scale(1);}to{transform:scale(1.06);}}
.name-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
#nameInput{
  padding:clamp(6px,1.5vw,8px) 14px;border:2px solid #ff6b9d;border-radius:26px;
  font-family:inherit;font-size:clamp(0.8rem,2.5vw,.9rem);outline:none;color:#333;
  width:min(138px,60vw);
}

/* ===== POPUPS ===== */
#comboPopup,#actionToast{
  position:fixed;top:32%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-weight:bold;text-shadow:0 2px 8px rgba(0,0,0,.2);
  pointer-events:none;z-index:60;opacity:0;transition:all .15s;
  font-family:'VagRounded',Arial,sans-serif;
  background:rgba(255,255,255,.92);border-radius:30px;
  padding:clamp(5px,1.5vw,8px) clamp(12px,4vw,20px);
}
#comboPopup{color:#ff6b9d;font-size:clamp(1.1rem,4vw,1.5rem);border:2px solid #ff6b9d;}
#actionToast{color:#ff8c00;font-size:clamp(1rem,3.5vw,1.3rem);border:2px solid #ff8c00;top:26%;}
#comboPopup.show,#actionToast.show{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* ===== GAME SCREEN ===== */
#screenGame{
  background:#f7c5d5;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
  padding:clamp(3px,1vw,6px) clamp(2px,0.8vw,4px);
  gap:clamp(3px,0.8vw,6px);
  overflow:hidden;
  max-height:100vh;
}
#panelLeft{display:flex;flex-direction:column;align-items:center;padding-top:4px;flex-shrink:0;width:clamp(36px,8vw,48px);}
.hud-btn{
  width:clamp(32px,7vw,42px);height:clamp(32px,7vw,42px);
  background:linear-gradient(135deg,#8a6840,#6b4e2a);
  border:2px solid #4a3018;border-bottom:4px solid #3a2010;border-radius:12px;
  color:#f5e6c8;font-size:clamp(0.8rem,2.5vw,1.1rem);
  cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;transition:transform .12s;
}
.hud-btn:active{transform:translateY(2px);border-bottom-width:2px;}

#canvasWrap{
  flex:1 1 0;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  gap:clamp(2px,0.6vw,4px);overflow:hidden;
}
#gameCanvas{
  display:block;border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  touch-action:none;
}

#evoBar{
  width:100%;max-width:380px;
  background:linear-gradient(135deg,#8a6840,#6b4e2a);
  border:2px solid #4a3018;border-bottom:3px solid #3a2010;
  border-radius:26px;padding:clamp(3px,0.8vw,5px) clamp(5px,1.2vw,8px) clamp(3px,0.8vw,5px) clamp(7px,1.8vw,10px);
  display:flex;align-items:center;gap:clamp(2px,0.5vw,4px);
  box-shadow:0 3px 10px rgba(0,0,0,.2);flex-shrink:0;overflow:hidden;
}
#evoInner{flex:1;display:flex;align-items:center;gap:clamp(1px,0.4vw,2px);overflow:hidden;}
.evo-fruit{width:clamp(16px,4vw,26px);height:clamp(16px,4vw,26px);border-radius:50%;flex-shrink:0;transition:transform .2s;}
.evo-fruit.active{transform:scale(1.3);filter:drop-shadow(0 0 5px #fff700);}
.evo-arrow{color:#f5e6c8;font-size:clamp(1rem,3vw,1.4rem);flex-shrink:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}

#panelRight{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,1vw,6px);flex-shrink:0;
  width:clamp(72px,17vw,108px);
  overflow:hidden;min-height:0;
}
.hud-card{
  width:100%;
  background:linear-gradient(160deg,#8a6840,#6b4e2a);
  border:2px solid #4a3018;border-bottom:4px solid #3a2010;
  border-radius:14px;
  padding:clamp(4px,1vw,7px) clamp(3px,0.8vw,5px);
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.hud-card-label{font-size:clamp(0.45rem,1.4vw,0.68rem);color:#f5e6c8;letter-spacing:clamp(1px,0.5vw,2.5px);margin-bottom:2px;font-weight:bold;}
.hud-divider{width:80%;height:1px;background:rgba(255,255,255,.2);margin:3px 0;}
.score-val{font-size:clamp(0.8rem,2.5vw,1.35rem);color:#f5e6c8;font-weight:bold;text-align:center;}
.best-color{color:#ffdd88 !important;font-size:clamp(.75rem,2.2vw,1.15rem);}
.hud-action{cursor:pointer;transition:transform .12s,filter .12s;}
.hud-action:not(.disabled):hover{filter:brightness(1.2);}
.hud-action:not(.disabled):active{transform:translateY(2px);}
.action-label{font-size:clamp(0.55rem,1.6vw,0.76rem);color:#ffdd88;font-weight:bold;letter-spacing:1px;margin-top:2px;}
.action-uses{font-size:clamp(.5rem,1.4vw,.7rem);color:#f5e6c8;background:rgba(0,0,0,.25);border-radius:20px;padding:1px clamp(4px,1vw,7px);margin-top:2px;}
.hud-action.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.shake-icon{font-size:clamp(1.2rem,3.5vw,2rem);line-height:1;animation:shakeIdle 3s ease-in-out infinite;}
@keyframes shakeIdle{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
.hud-action:not(.disabled):hover .shake-icon{animation:shakeHover .25s ease-in-out infinite;}
@keyframes shakeHover{0%,100%{transform:rotate(-14deg) scale(1.1);}50%{transform:rotate(14deg) scale(1.1);}}

/* Bottom fruit parade */
.menu-fruits-row{
  position:absolute;bottom:clamp(28px,5vh,44px);
  left:0;right:0;
  display:flex;justify-content:center;align-items:center;
  gap:clamp(3px,1vw,6px);padding:0 10px;
  z-index:2;pointer-events:none;
}
.menu-fruit-item{
  width:clamp(16px,4vw,30px);height:clamp(16px,4vw,30px);
  object-fit:contain;
  animation:fruitBounceRow 1.2s ease-in-out infinite alternate;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
@keyframes fruitBounceRow{from{transform:translateY(0) rotate(-5deg);}to{transform:translateY(-6px) rotate(5deg);}}

/* Canvas shake */
@keyframes canvasShake{
  0%,100%{transform:translate(0,0);}
  15%{transform:translate(-5px,3px);}30%{transform:translate(5px,-3px);}
  45%{transform:translate(-4px,4px);}60%{transform:translate(4px,-2px);}
  75%{transform:translate(-2px,3px);}90%{transform:translate(2px,-1px);}
}
#gameCanvas.shaking{animation:canvasShake .4s ease-in-out;}