/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;
  font-family:'Trebuchet MS','Comic Sans MS',cursive,system-ui;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#app{width:100%;height:100%;position:relative;overflow:hidden}

/* ===== BACKGROUNDS ===== */
#bg-layer{position:absolute;inset:0;transition:background 0.8s ease;overflow:hidden}
.bg-el{position:absolute;pointer-events:none;will-change:transform}

/* ===== SCREENS ===== */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.screen.active{opacity:1;pointer-events:all}

/* ===== START SCREEN ===== */
#screen-start{gap:clamp(12px,3vw,22px);padding:20px}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.game-title{
  font-size:clamp(3rem,11vw,5.5rem);font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#ffe44d 40%,#ff9f43 80%,#ff6b6b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(3px 4px 0px rgba(0,0,0,0.3));
  animation:titleBounce 2.4s ease-in-out infinite;letter-spacing:3px}
.title-emoji-row{font-size:clamp(1.8rem,6vw,3rem);animation:emojiDance 1.5s ease-in-out infinite;display:flex;gap:6px}
.subtitle{font-size:clamp(0.9rem,3vw,1.2rem);color:rgba(255,255,255,0.9);
  font-weight:700;letter-spacing:2px;text-transform:uppercase;
  text-shadow:1px 1px 4px rgba(0,0,0,0.4)}
.mode-wrap{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;margin-top:4px}
.mode-btn{
  padding:clamp(14px,4vw,20px) clamp(20px,5vw,32px);
  border:none;border-radius:22px;
  font-size:clamp(1.1rem,4vw,1.45rem);font-weight:900;
  cursor:pointer;letter-spacing:1px;
  box-shadow:0 7px 0 rgba(0,0,0,0.22),0 0 0 3px rgba(255,255,255,0.2);
  transition:transform 0.12s,box-shadow 0.12s;text-transform:uppercase;
  position:relative;overflow:hidden}
.mode-btn::before{content:'';position:absolute;top:0;left:0;width:100%;height:45%;
  background:rgba(255,255,255,0.2);border-radius:22px 22px 50% 50%}
.mode-btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,0.22),0 0 0 3px rgba(255,255,255,0.2)}
.btn-easy{background:linear-gradient(135deg,#6bcb77,#2dbe5e);color:#0e3a1b}
.btn-medium{background:linear-gradient(135deg,#ffd93d,#ff9f43);color:#3a2000}
.start-hint{color:rgba(255,255,255,0.75);font-size:clamp(0.75rem,2.5vw,0.9rem);
  font-weight:600;text-align:center;letter-spacing:1px}
.floating-items-preview{
  display:flex;gap:clamp(8px,3vw,18px);font-size:clamp(2rem,7vw,3.5rem);
  animation:previewFloat 3s ease-in-out infinite}

/* ===== GAME SCREEN ===== */
#screen-game{flex-direction:column;justify-content:flex-start;padding:0}

/* Header */
#game-header{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(6px,2vw,10px) clamp(10px,3vw,18px);
  background:rgba(0,0,0,0.28);backdrop-filter:blur(6px);z-index:10;flex-shrink:0}
.hud-box{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.15);border-radius:14px;
  padding:5px 12px;border:2px solid rgba(255,255,255,0.25)}
.hud-label{color:rgba(255,255,255,0.7);font-size:clamp(0.6rem,2vw,0.75rem);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.hud-val{color:#fff;font-size:clamp(1rem,3.5vw,1.3rem);font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,0.3)}
.hud-icon{font-size:clamp(1rem,3vw,1.2rem)}
#home-btn{
  background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.35);
  border-radius:12px;color:#fff;padding:6px 14px;
  font-size:clamp(0.85rem,2.5vw,1rem);font-weight:700;cursor:pointer}

/* Question */
#q-banner{
  width:100%;padding:clamp(6px,2vw,10px) 16px;flex-shrink:0;
  background:rgba(255,255,255,0.12);backdrop-filter:blur(3px);z-index:10;
  text-align:center}
#q-text{
  font-size:clamp(1rem,4vw,1.5rem);font-weight:900;color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,0.3),0 0 12px rgba(0,0,0,0.2);
  letter-spacing:1px}

/* Play zone */
#play-zone{flex:1;width:100%;position:relative;overflow:hidden;min-height:0}

/* Items */
.gi{
  position:absolute;display:flex;align-items:center;justify-content:center;
  transform-origin:center;z-index:5;will-change:transform;line-height:1}
.gi.anim-float{animation:gi-float var(--fd,2.5s) ease-in-out var(--fdd,0s) infinite}
.gi.anim-sway{animation:gi-sway var(--fd,2.8s) ease-in-out var(--fdd,0s) infinite}
.gi.anim-hop{animation:gi-hop var(--fd,1.8s) ease-in-out var(--fdd,0s) infinite}
.gi.anim-spin{animation:gi-spin var(--fd,3.5s) ease-in-out var(--fdd,0s) infinite}
.gi.entering{animation:gi-enter 0.6s cubic-bezier(0.34,1.56,0.64,1) var(--ed,0s) both}
.gi.swim-l{animation:gi-swim-l 0.65s cubic-bezier(0.34,1.4,0.64,1) var(--ed,0s) both}
.gi.swim-r{animation:gi-swim-r 0.65s cubic-bezier(0.34,1.4,0.64,1) var(--ed,0s) both}
.gi.fly-in{animation:gi-fly 0.55s cubic-bezier(0.34,1.5,0.64,1) var(--ed,0s) both}
.gi.fall-in{animation:gi-fall 0.6s cubic-bezier(0.22,1,0.36,1) var(--ed,0s) both}
.gi.walk-in{animation:gi-walk 0.5s cubic-bezier(0.22,1,0.36,1) var(--ed,0s) both}
.gi.exiting{animation:gi-exit 0.4s ease-in var(--ed,0s) both}

@keyframes gi-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.06)}}
@keyframes gi-sway{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.05)}}
@keyframes gi-hop{0%,42%,100%{transform:translateY(0) scaleY(1)}28%{transform:translateY(-14px) scaleY(1.02)}38%{transform:translateY(0) scaleY(0.84)}}
@keyframes gi-spin{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes gi-enter{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes gi-swim-l{from{transform:translateX(-220px) scaleX(-1);opacity:0}to{transform:translateX(0) scaleX(1);opacity:1}}
@keyframes gi-swim-r{from{transform:translateX(220px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes gi-fly{from{transform:translateY(-160px) scale(0.3);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes gi-fall{from{transform:translateY(-120px) rotate(-25deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes gi-walk{from{transform:translateX(-160px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes gi-exit{from{transform:scale(1);opacity:1}to{transform:scale(0) rotate(15deg);opacity:0}}

/* Answer Zone */
#answer-zone{width:100%;padding:clamp(8px,2vw,12px) clamp(10px,3vw,16px) clamp(12px,3vw,18px);flex-shrink:0;z-index:10}
#ans-hint{text-align:center;color:rgba(255,255,255,0.85);font-size:clamp(0.75rem,2.5vw,0.95rem);
  font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:2px;
  text-shadow:1px 1px 3px rgba(0,0,0,0.4)}
#ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2vw,12px);max-width:500px;margin:0 auto}
.ans-btn{
  border:none;border-radius:20px;
  font-size:clamp(1.6rem,6.5vw,2.8rem);font-weight:900;
  cursor:pointer;min-height:clamp(58px,15vw,90px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,0.22);
  position:relative;overflow:hidden;color:#fff;
  transition:transform 0.1s,box-shadow 0.1s;
  font-family:inherit;letter-spacing:-1px}
.ans-btn::after{content:'';position:absolute;top:0;left:0;
  width:100%;height:42%;background:rgba(255,255,255,0.18);
  border-radius:20px 20px 50% 50%}
.ans-btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,0.22)}
.ans-btn:disabled{cursor:default;opacity:0.85}
.ac0{background:linear-gradient(145deg,#ff7675,#d63031)}
.ac1{background:linear-gradient(145deg,#74b9ff,#0984e3)}
.ac2{background:linear-gradient(145deg,#55efc4,#00b894)}
.ac3{background:linear-gradient(145deg,#fdcb6e,#e17055)}
.ans-btn.flash-correct{animation:flash-ok 0.55s ease forwards}
.ans-btn.flash-wrong{animation:flash-no 0.45s ease forwards}
.ans-btn.flash-hint{animation:flash-hint 0.9s ease 0.35s both}
@keyframes flash-ok{0%{transform:scale(1)}25%{transform:scale(1.22);
  background:linear-gradient(145deg,#6bcb77,#2dcc70)!important;
  box-shadow:0 0 30px rgba(46,213,115,0.9)}100%{transform:scale(1)}}
@keyframes flash-no{0%,100%{transform:translateX(0)}
  15%{transform:translateX(-10px);background:linear-gradient(145deg,#e17055,#d63031)!important}
  30%{transform:translateX(10px)}50%{transform:translateX(-6px)}70%{transform:translateX(6px)}}
@keyframes flash-hint{0%,100%{transform:scale(1)}
  50%{transform:scale(1.16);background:linear-gradient(145deg,#6bcb77,#2dcc70)!important;
  box-shadow:0 0 28px rgba(46,213,115,0.85)}}

/* Feedback */
#fb-overlay{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;pointer-events:none;z-index:20}
#fb-text{font-size:clamp(2rem,10vw,4rem);font-weight:900;color:#fff;
  text-shadow:3px 3px 0 rgba(0,0,0,0.25);opacity:0;transform:scale(0.5);
  text-align:center;white-space:nowrap}
#fb-text.show-ok{animation:fb-ok 1.1s ease forwards}
#fb-text.show-no{animation:fb-no 0.9s ease forwards}
@keyframes fb-ok{0%{opacity:0;transform:scale(0.5)}
  20%{opacity:1;transform:scale(1.3)}
  50%{opacity:1;transform:scale(1)}
  80%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4) translateY(-30px)}}
@keyframes fb-no{0%{opacity:0;transform:scale(0.5)}
  15%{opacity:1;transform:scale(1.1)}
  55%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(0.8)}}

/* Score pop */
.spop{position:absolute;left:50%;transform:translateX(-50%);
  color:#ffd700;font-size:clamp(1.4rem,5vw,2rem);font-weight:900;
  text-shadow:2px 2px 0 rgba(0,0,0,0.3);pointer-events:none;
  z-index:25;animation:spop 1.1s ease forwards;white-space:nowrap}
@keyframes spop{0%{opacity:1;top:50%;transform:translateX(-50%) scale(0.6)}
  30%{transform:translateX(-50%) scale(1.25);opacity:1}
  100%{top:10%;transform:translateX(-50%) scale(1);opacity:0}}

/* ===== SUBTRACTION MODE ===== */
/* Mode button */
.btn-subtract{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff}

/* Tappable items glow gold */
.gi.tappable{cursor:pointer;filter:drop-shadow(0 0 6px rgba(255,220,0,0.75)) brightness(1.08)}
.gi.tappable:hover{filter:drop-shadow(0 0 10px rgba(255,220,0,1)) brightness(1.15)}

/* Item removal pop */
.gi.removing{animation:gi-remove 0.38s cubic-bezier(0.36,0.07,0.19,0.97) forwards!important}
@keyframes gi-remove{
  0%{transform:scale(1);opacity:1}
  35%{transform:scale(1.4) rotate(10deg);opacity:1}
  100%{transform:scale(0) rotate(25deg);opacity:0}}

/* Item overshoot buzz (already at max removals) */
.gi.buzz-back{animation:gi-buzz 0.32s ease both!important}
@keyframes gi-buzz{
  0%,100%{transform:translateX(0) scale(1)}
  18%{transform:translateX(-7px) scale(1.08)}
  36%{transform:translateX(7px) scale(1.08)}
  54%{transform:translateX(-4px)}
  72%{transform:translateX(4px)}}

/* Remove progress bar — slides in/out */
#remove-bar{
  width:100%;padding:0 16px;flex-shrink:0;
  background:rgba(0,0,0,0.32);backdrop-filter:blur(4px);z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  overflow:hidden;max-height:0;
  transition:max-height 0.3s ease, padding 0.3s ease}
#remove-bar.visible{max-height:80px;padding:8px 16px 6px}
#rb-instruction{
  font-size:clamp(0.85rem,3vw,1.1rem);font-weight:800;color:#fff;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);text-align:center;letter-spacing:0.5px}
#rb-dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.rb-dot{
  width:clamp(18px,4.5vw,26px);height:clamp(18px,4.5vw,26px);
  border-radius:50%;border:2.5px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.15);
  transition:background 0.25s,border-color 0.25s,transform 0.2s;
  display:flex;align-items:center;justify-content:center;font-size:clamp(10px,2.5vw,14px)}
.rb-dot.done{background:#6bcb77;border-color:#2dcc70;transform:scale(1.15)}
.rb-dot.done::after{content:'✓';color:#fff;font-weight:900}

/* Phase label pill */
#phase-pill{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.45);border:2px solid rgba(255,255,255,0.25);
  border-radius:20px;padding:3px 12px;
  color:rgba(255,255,255,0.9);font-size:clamp(0.65rem,2.2vw,0.8rem);
  font-weight:800;letter-spacing:1px;text-transform:uppercase;
  pointer-events:none;z-index:15;display:none}
#phase-pill.visible{display:block}


/* ===== BG ANIMATIONS ===== */
@keyframes bubble-rise{0%{transform:translateY(0) scale(1);opacity:0.6}
  100%{transform:translateY(-105vh) scale(0.4);opacity:0}}
@keyframes cloud-drift{0%{transform:translateX(-25vw)}100%{transform:translateX(115vw)}}
@keyframes star-twinkle{0%,100%{opacity:0.2;transform:scale(0.7)}50%{opacity:1;transform:scale(1.3)}}
@keyframes leaf-fall{0%{opacity:0.9;transform:translateX(0) rotate(0deg)}
  100%{opacity:0;transform:translateX(var(--ld,40px)) translateY(0) rotate(700deg)}}
@keyframes snow-fall{0%{opacity:0.9;transform:translateX(0)}
  100%{opacity:0;transform:translateX(var(--sd,20px)) translateY(108vh)}}
@keyframes petal-float{0%{opacity:0.8;transform:translateX(0) rotate(0deg)}
  100%{opacity:0;transform:translateX(var(--pd,50px)) translateY(108vh) rotate(520deg)}}
@keyframes wave-pulse{0%,100%{transform:translateX(0) scaleY(1)}
  50%{transform:translateX(-25px) scaleY(1.18)}}
@keyframes vine-sway{0%{transform:rotate(-6deg)}100%{transform:rotate(6deg)}}
@keyframes ray-pulse{0%,100%{opacity:0.04}50%{opacity:0.13}}
@keyframes title-bounce{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes emoji-dance{0%,100%{transform:translateY(0)}33%{transform:translateY(-8px)}66%{transform:translateY(4px)}}
@keyframes preview-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sun-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes shimmer{0%,100%{opacity:0.3}50%{opacity:1}}