/* ================= RESET ================= */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  width:100%; height:100%; overflow:hidden;
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  touch-action:none;
  user-select:none;
}
button { font-family:inherit; border:none; cursor:pointer; }
img { -webkit-user-drag:none; user-select:none; }

/* ================= BACKGROUND ================= */
.sky-bg {
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(180deg,#8ec9ff 0%,#bfe3ff 40%,#eaf8ff 75%,#d7f6d0 100%);
  overflow:hidden;
}
.sun {
  position:absolute; top:4%; right:8%; font-size:9vmin;
  filter:drop-shadow(0 0 25px rgba(255,235,120,0.9));
  animation:spin 20s linear infinite;
}
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.cloud { position:absolute; font-size:7vmin; opacity:0.9; animation:drift 40s linear infinite; }
.c1 { top:10%; left:-10%; animation-duration:55s; }
.c2 { top:20%; left:-15%; animation-duration:70s; animation-delay:-20s; font-size:5vmin;}
.c3 { top:6%; left:-20%; animation-duration:45s; animation-delay:-10s; font-size:6vmin;}
@keyframes drift { from{ transform:translateX(0);} to{ transform:translateX(140vw);} }

.butterfly { position:absolute; font-size:4vmin; animation:flutter 8s ease-in-out infinite; }
.b1 { top:35%; left:15%; animation-duration:7s; }
.b2 { top:50%; right:12%; animation-duration:9s; animation-delay:-3s;}
.b3 { top:65%; left:40%; animation-duration:6s; animation-delay:-1s;}
@keyframes flutter {
  0%,100% { transform:translate(0,0) rotate(0deg);}
  25% { transform:translate(6vmin,-4vmin) rotate(10deg);}
  50% { transform:translate(0,-8vmin) rotate(-6deg);}
  75% { transform:translate(-6vmin,-3vmin) rotate(8deg);}
}

.hills {
  position:absolute; bottom:0; left:0; width:100%; height:22%;
  background:linear-gradient(180deg,#bdeb9a,#8fd86a);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.tree, .flower { position:absolute; bottom:4%; font-size:8vmin; }
.t1 { left:6%; font-size:10vmin;} .t2 { left:20%; font-size:7vmin; bottom:2%;} .t3 { right:8%; font-size:9vmin;}
.flower { font-size:4vmin; bottom:2%; animation:sway 4s ease-in-out infinite; }
.f1{left:38%;} .f2{left:48%; animation-delay:-1s;} .f3{left:58%; animation-delay:-2s;}
.f4{left:70%; animation-delay:-1.5s;} .f5{left:30%; animation-delay:-0.5s;}
@keyframes sway { 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);} }

#particles { position:absolute; inset:0; width:100%; height:100%; }

/* ================= SCREENS ================= */
.screen {
  position:fixed; inset:0; z-index:5;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; padding:2vmin;
}
.screen.active { display:flex; }

/* ---------- START SCREEN ---------- */
.title-wrap {
  text-align:center; margin-bottom:6vmin;
  background:rgba(255,255,255,0.9);
  padding:4vmin 6vmin;
  border-radius:5vmin;
  box-shadow:0 1.5vmin 0 rgba(0,0,0,0.08), 0 2vmin 4vmin rgba(30,20,60,0.18);
  animation:pop-in 0.8s cubic-bezier(.34,1.56,.64,1);
  max-width:88vw;
}
.game-title {
  font-size:clamp(24px, 6.5vmin, 54px);
  color:#4a3d8f;
  letter-spacing:0.5px;
  font-weight:900;
}
.game-subtitle {
  font-size:clamp(13px, 2.6vmin, 19px);
  color:#3a8fbf; font-weight:bold; margin-top:1.5vmin;
}
@keyframes pop-in { from{ transform:scale(0.5); opacity:0;} to{ transform:scale(1); opacity:1;} }

.start-buttons { display:flex; flex-direction:column; align-items:center; gap:3vmin; }
.btn-row { display:flex; gap:3vmin; }

.btn-primary {
  background:linear-gradient(180deg,#ffd166,#ff9f43);
  color:#7a3e00;
  font-weight:900;
  box-shadow:0 1vmin 0 #d97b1d, 0 1.5vmin 2vmin rgba(0,0,0,0.25);
  border-radius:6vmin;
  transition:transform .1s;
}
.btn-primary:active { transform:translateY(0.8vmin); box-shadow:0 0.2vmin 0 #d97b1d; }
.btn-big { font-size:clamp(20px,4.5vmin,32px); padding:2.5vmin 8vmin; min-height:48px; }

.btn-secondary {
  background:#fff;
  color:#5a3d8a;
  box-shadow:0 1vmin 0 #d8d0ea, 0 1.5vmin 2vmin rgba(0,0,0,0.15);
  border-radius:6vmin;
  transition:transform .1s;
}
.btn-secondary:active { transform:translateY(0.8vmin); box-shadow:0 0.2vmin 0 #d8d0ea; }

.btn-round {
  width:12vmin; height:12vmin; min-width:56px; min-height:56px; max-width:70px; max-height:70px;
  border-radius:50%;
  background:#fff;
  font-size:clamp(20px,4vmin,28px);
  box-shadow:0 0.8vmin 0 #d8d8d8, 0 1vmin 1.5vmin rgba(0,0,0,0.2);
}
.btn-round.small { width:9vmin; height:9vmin; min-width:44px; min-height:44px; max-width:52px; max-height:52px; font-size:20px; }
.btn-round:active { transform:translateY(0.5vmin); }

/* ---------- TOP BAR ---------- */
.top-bar {
  position:absolute; top:1.5vmin; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3vmin; z-index:6;
}
.pill {
  background:rgba(255,255,255,0.92);
  border-radius:6vmin;
  padding:1.2vmin 3vmin;
  font-weight:900; font-size:clamp(14px,3vmin,20px);
  color:#5a3d8a;
  box-shadow:0 0.6vmin 1.5vmin rgba(0,0,0,0.15);
}
.score-pill { color:#c77c00; }
.round-pill { color:#3a8fbf; }

/* ---------- GAMEPLAY ---------- */
#screen-game { padding-top:9vmin; padding-bottom:2vmin; justify-content:flex-start; }
.play-area {
  position:relative;
  width:100%; max-width:900px; flex:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:2vmin;
}
.line-svg { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }

.number-side { flex:0 0 30%; display:flex; justify-content:center; z-index:3; }
.number-card {
  width:min(28vmin,150px); height:min(28vmin,150px);
  background:linear-gradient(160deg,#ffe08a,#ff9f43);
  border-radius:5vmin;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1.5vmin 0 #d9791b, 0 2vmin 3vmin rgba(0,0,0,0.25);
  position:relative;
  touch-action:none;
  cursor:grab;
}
.number-card img { width:70%; height:70%; object-fit:contain; pointer-events:none; }
.number-card.dragging { cursor:grabbing; filter:brightness(1.08); }
.number-card.locked { opacity:0.5; filter:grayscale(0.4); cursor:default; }
.drag-handle {
  position:absolute; inset:0; border-radius:5vmin;
}

.pictures-side {
  flex:1; display:flex; flex-direction:column; gap:2.2vmin; z-index:3;
  align-items:flex-end;
}
.pic-card {
  width:min(24vmin,130px); height:min(24vmin,130px);
  background:#fff;
  border-radius:4.5vmin;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1vmin 0 #d8d8d8, 0 1.5vmin 2.5vmin rgba(0,0,0,0.15);
  border:0.6vmin solid #fff;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative;
}
.pic-card img { width:78%; height:78%; object-fit:contain; pointer-events:none; }
.pic-card.hover-target { transform:scale(1.06); border-color:#8ecbff; }
.pic-card.correct { border-color:#5fd068; box-shadow:0 0 0 0.8vmin rgba(95,208,104,0.4), 0 1vmin 2.5vmin rgba(0,0,0,0.15); animation:bounce-correct .6s; }
.pic-card.wrong { border-color:#ff6b6b; animation:shake .4s; }
@keyframes bounce-correct {
  0% { transform:scale(1); } 40% { transform:scale(1.18); } 70%{ transform:scale(0.95);} 100%{ transform:scale(1.05);}
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-1.5vmin); }
  40% { transform:translateX(1.5vmin); }
  60% { transform:translateX(-1vmin); }
  80% { transform:translateX(1vmin); }
}

.hint-hand {
  position:absolute; font-size:9vmin; z-index:5; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%);
  filter:drop-shadow(0 0.6vmin 1vmin rgba(0,0,0,0.35));
  transition:opacity .25s;
}
.hint-hand.show { opacity:1; }
.hint-bubble {
  position:absolute; z-index:5; background:#fff; color:#5a3d8a; font-weight:800;
  padding:1.2vmin 3vmin; border-radius:5vmin; font-size:clamp(12px,2.6vmin,17px);
  box-shadow:0 0.8vmin 1.5vmin rgba(0,0,0,0.15);
  opacity:0; transition:opacity .25s; transform:translate(-50%,-100%);
  white-space:nowrap; pointer-events:none;
}
.hint-bubble.show { opacity:1; }

.sparkle {
  position:absolute; pointer-events:none; font-size:3vmin;
  animation:sparkle-pop 0.8s ease-out forwards;
}
@keyframes sparkle-pop {
  0% { transform:scale(0) translateY(0); opacity:1; }
  100% { transform:scale(1.4) translateY(-6vmin); opacity:0; }
}

.feedback-banner {
  position:absolute; left:50%; translate:-50% 0; bottom:16vmin;
  background:#fff; color:#e05a5a; font-weight:900;
  font-size:clamp(16px,3.5vmin,24px);
  padding:1.5vmin 4vmin; border-radius:6vmin;
  box-shadow:0 1vmin 2vmin rgba(0,0,0,0.2);
  opacity:0; pointer-events:none; z-index:8;
  transition:opacity .25s, transform .25s;
  transform:translate(-50%,1vmin);
}
.feedback-banner.show { opacity:1; transform:translate(-50%,0); }

.btn-next {
  position:absolute; bottom:3vmin; left:50%; translate:-50% 0;
  z-index:9;
  animation:pop-in .5s cubic-bezier(.34,1.56,.64,1), nudge 1.2s ease-in-out infinite 0.6s;
}
@keyframes nudge { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-1.2vmin);} }
.hidden { display:none !important; }

/* ---------- END SCREEN ---------- */
.end-card {
  background:rgba(255,255,255,0.95);
  border-radius:6vmin;
  padding:6vmin 8vmin;
  text-align:center;
  box-shadow:0 2vmin 4vmin rgba(0,0,0,0.25);
  z-index:6;
  animation:pop-in .6s cubic-bezier(.34,1.56,.64,1);
}
.end-title { font-size:clamp(30px,8vmin,56px); color:#ff8f43; text-shadow:0 0.5vmin 0 #ffd166; }
.end-sub { font-size:clamp(16px,3.5vmin,24px); color:#6a4fb0; margin-top:1vmin; font-weight:bold; }
.stars { font-size:clamp(28px,7vmin,48px); color:#ffcc33; margin:3vmin 0; text-shadow:0 0.3vmin 0.6vmin rgba(0,0,0,0.15); }
.final-score { font-size:clamp(16px,3.5vmin,22px); color:#3a8fbf; font-weight:900; margin-bottom:3vmin; }
.end-buttons { display:flex; flex-wrap:wrap; gap:2.5vmin; justify-content:center; }
.end-buttons .btn-big { padding:2.2vmin 5vmin; font-size:clamp(16px,3.5vmin,24px); }
#confetti-canvas { position:fixed; inset:0; z-index:7; pointer-events:none; }

/* ---------- responsive tweak for very small phones ---------- */
@media (max-width:380px) {
  .number-card, .pic-card { border-radius:3.5vmin; }
}

@media (orientation:landscape) and (max-height:480px) {
  #screen-game { padding-top:7vmin; }
  .top-bar { top:1vmin; }
}