:root{
  --sky-top:#5EC1E8;
  --sky-bottom:#CFF1FA;
  --sun:#FFD35C;
  --grass:#5FBF6B;
  --grass-dark:#3E9A4C;
  --ribbon:#FF7FA6;
  --overalls:#4A79C9;
  --boots:#8B5A2B;
  --cream:#FFF6E5;
  --cream-dark:#FFE9C2;
  --ink:#3B2A20;
  --heart:#FF5D7A;
  --gold:#FFC93C;
  --shadow:rgba(59,42,32,0.25);
  font-family:'Nunito',sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--sky-top);}

button{font-family:'Baloo 2',sans-serif;cursor:pointer;border:none;outline:none;}
select,input{font-family:'Nunito',sans-serif;}

.screen{
  position:fixed; inset:0; width:100%; height:100%;
}
.hidden{display:none !important;}

/* ============ LOADING SCREEN ============ */
#loading-screen{
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  display:flex; align-items:center; justify-content:center;
}
.loading-card{
  text-align:center; color:var(--ink);
}
.loading-heart{
  animation:heartbeat 1.1s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px var(--shadow));
}
.heart-path{fill:var(--heart); stroke:#fff; stroke-width:3;}
@keyframes heartbeat{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}
.game-title{
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:2rem; margin:0.6rem 0 0.2rem;
  color:var(--ink);
  text-shadow:2px 2px 0 #fff, 3px 3px 0 var(--shadow);
}
.game-title span{color:var(--ribbon);}
.game-title.big{font-size:3.2rem; line-height:1.1;}
.title-eleen{color:var(--overalls);}
.title-cat{color:var(--gold); -webkit-text-stroke:1px var(--ink);}
.amp{color:var(--ribbon);}
.loading-bar-track{
  width:280px; height:20px; background:#fff; border:3px solid var(--ink);
  border-radius:20px; margin:1.2rem auto 0.6rem; overflow:hidden;
}
.loading-bar-fill{
  height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--ribbon));
  transition:width 0.2s ease-out;
}
.loading-tip{font-weight:700; color:var(--ink); opacity:0.75;}

/* ============ MAIN MENU ============ */
#main-menu{background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));}
#menu-bg-canvas{position:absolute; inset:0; width:100%; height:100%;}
.menu-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.4rem; padding:1rem;
}
.subtitle{
  font-weight:800; color:var(--ink); background:rgba(255,255,255,0.6);
  padding:0.2rem 1rem; border-radius:20px; margin:0 0 1rem;
}
.menu-buttons{display:flex; flex-direction:column; gap:0.75rem; width:min(320px,80vw);}
.big-btn{
  font-size:1.2rem; font-weight:700; padding:0.8rem 1.2rem;
  border-radius:20px; background:var(--cream); color:var(--ink);
  border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink);
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.big-btn:hover{transform:translateY(-2px);}
.big-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--ink);}
.big-btn.primary{background:var(--gold);}
.small-btn{
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:0.9rem;
  padding:0.35rem 0.8rem; border-radius:14px; background:var(--cream-dark);
  border:2px solid var(--ink); box-shadow:0 3px 0 var(--ink);
}
.small-margin-top{margin-top:1rem;}
.menu-toolbar{display:flex; gap:0.8rem; margin-top:1.4rem;}
.icon-btn{
  width:46px; height:46px; border-radius:50%; background:var(--cream);
  border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink); font-size:1.2rem;
}
.icon-btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink);}
.icon-btn.active{background:var(--gold);}

/* ============ MODALS ============ */
.modal{
  position:fixed; inset:0; background:rgba(59,42,32,0.45);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.modal-card{
  background:var(--cream); border:4px solid var(--ink); border-radius:26px;
  padding:1.6rem 2rem; width:min(380px,88vw); text-align:center;
  box-shadow:0 8px 0 var(--ink); color:var(--ink); max-height:85vh; overflow-y:auto;
}
.modal-card h2{font-family:'Baloo 2',sans-serif; margin-top:0;}
.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:0.8rem; margin:0.7rem 0; font-weight:700; text-align:left;
}
.setting-row input[type="range"]{width:130px;}
.credits-text{font-weight:600; line-height:1.5;}
.dedication{
  font-style:italic; background:var(--cream-dark); border-radius:14px;
  padding:0.7rem 0.9rem; margin:0.7rem 0; font-weight:700; line-height:1.5;
}
.win-card{width:min(400px,90vw);}
#win-scene-canvas{
  display:block; margin:0.6rem auto; border-radius:16px;
  border:3px solid var(--ink); background:linear-gradient(180deg,#FFF6E5,#FFE9C2);
}

/* ============ GAME SCREEN ============ */
#game-screen{background:#000;}
#game-canvas{display:block; width:100%; height:100%;}

#hud{position:absolute; inset:0; pointer-events:none; z-index:5;}
.hud-top-left{
  position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap;
}
.hud-top-right{position:absolute; top:14px; right:14px; pointer-events:all;}
.hud-pill{
  background:rgba(255,246,229,0.92); border:3px solid var(--ink); border-radius:20px;
  padding:0.3rem 0.7rem; font-family:'Baloo 2',sans-serif; font-weight:700;
  color:var(--ink); display:flex; align-items:center; gap:4px; font-size:1rem;
  box-shadow:0 3px 0 var(--ink);
}
#hud-hearts{gap:2px;}
.heart-icon{font-size:1.1rem;}
.hud-bottom{
  position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center;
}
.hint-text{
  background:rgba(59,42,32,0.75); color:#fff; font-weight:700; padding:0.4rem 1rem;
  border-radius:16px; font-size:0.95rem; max-width:80vw; text-align:center;
  opacity:0; transition:opacity 0.3s ease;
}
.hint-text.show{opacity:1;}
.achievement-toast{
  position:absolute; top:70px; left:50%; transform:translateX(-50%);
  background:var(--gold); border:3px solid var(--ink); border-radius:18px;
  padding:0.5rem 1.1rem; font-family:'Baloo 2',sans-serif; font-weight:700;
  color:var(--ink); box-shadow:0 4px 0 var(--ink);
  animation:toast-in 0.4s ease-out;
}
@keyframes toast-in{
  from{transform:translate(-50%,-20px); opacity:0;}
  to{transform:translate(-50%,0); opacity:1;}
}

/* ============ TOUCH CONTROLS ============ */
#touch-controls{position:absolute; inset:0; pointer-events:none; z-index:6;}
.touch-stick-zone{
  position:absolute; left:20px; bottom:20px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,0.25); border:3px solid rgba(59,42,32,0.4);
  pointer-events:all;
}
.touch-actions{
  position:absolute; right:20px; bottom:20px; display:flex; gap:10px; pointer-events:all;
}
.touch-btn{
  width:60px; height:60px; border-radius:50%; background:rgba(255,246,229,0.85);
  border:3px solid var(--ink); font-size:1.4rem; box-shadow:0 4px 0 var(--ink);
}

@media (max-width:820px), (pointer:coarse){
  #touch-controls:not(.hidden){display:block !important;}
}

@media (max-width:480px){
  .game-title.big{font-size:2.1rem;}
  .hud-pill{font-size:0.85rem;}
}