@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Nunito:wght@700;800;900&display=swap');

.v-les.stage {
  --sky: #a8d8ea;
  --grass: #7cb87a;
  --wood: #8b5e3c;
  --cream: #fff9f0;
  font-family: "Nunito", sans-serif;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(90,140,70,0.35), transparent 55%),
    linear-gradient(180deg, #a8d8ea 0%, #c5e8d5 48%, #7cb87a 48%, #5a9e58 100%);
}

.v-les .tree {
  position: absolute;
  bottom: 42%;
  width: 90px;
  height: 160px;
  opacity: 0.35;
  background: linear-gradient(180deg, transparent 40%, #6b8f4e 40%, #4a7038 100%);
  border-radius: 40% 40% 8px 8px;
}
.v-les .tree.left { left: 3%; transform: scale(0.9); }
.v-les .tree.right { right: 5%; transform: scale(1.1); }

.v-les .leaf {
  position: absolute;
  font-size: 22px;
  opacity: 0.5;
  animation: drift 8s linear infinite;
}
.v-les .leaf.a { top: 12%; left: 8%; animation-delay: 0s; }
.v-les .leaf.b { top: 22%; left: 70%; animation-delay: 2s; }
.v-les .leaf.c { top: 8%; left: 45%; animation-delay: 4s; }
@keyframes drift {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(18px) rotate(12deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.v-les .game-top {
  position: absolute;
  top: calc(16px + var(--safe-top));
  left: calc(100px + var(--safe-left));
  right: calc(24px + var(--safe-right));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.v-les .title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v-les .title-row h1 {
  font-family: "Marcellus", serif;
  font-size: 36px;
  color: #3d2914;
}

.v-les .squirrel-svg {
  width: 130px;
  height: 130px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
  animation: idle-bob 3s ease-in-out infinite;
}
.v-les .squirrel-svg.chew { animation: chew-les 0.55s ease; }
.v-les .squirrel-svg.happy { animation: happy-wag 0.8s ease-in-out 3; }
.v-les .squirrel-svg.chew .sq-mouth { transform: scaleY(1.8); }
.v-les .squirrel-svg.happy .sq-tail { transform-origin: 30% 70%; animation: tail-wag 0.3s ease-in-out 6 alternate; }

@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes chew-les {
  25% { transform: rotate(-3deg) scale(1.04); }
  75% { transform: rotate(3deg) scale(1.04); }
}
@keyframes tail-wag {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}
@keyframes happy-wag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.v-les .fruit-slots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 960px;
}

.v-les .fruit-slot {
  aspect-ratio: 1;
  border: none;
  background: var(--cream);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 4px 0 #c4a882, 0 8px 16px rgba(61,41,20,0.12);
  font-size: 30px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.v-les .fruit-slot:not(:disabled):active,
.v-les .fruit-slot.selected { transform: translateY(-4px) scale(1.05); }
.v-les .fruit-slot.selected { box-shadow: 0 0 0 3px #e8a838, 0 8px 16px rgba(61,41,20,0.15); }
.v-les .fruit-slot.current { box-shadow: 0 0 0 3px #5a9e58, 0 8px 16px rgba(61,41,20,0.15); }
.v-les .fruit-slot.eaten { background: #dff0d8; font-size: 22px; font-weight: 900; color: #3d6b34; }
.v-les .fruit-slot.skipped { opacity: 0.4; }

.v-les .game-bottom {
  position: absolute;
  left: calc(24px + var(--safe-left));
  right: calc(24px + var(--safe-right));
  bottom: calc(20px + var(--safe-bottom));
  top: calc(280px + var(--safe-top));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v-les .phase-panel {
  background: rgba(255,249,240,0.94);
  border-radius: 24px;
  border: 3px solid #c4a882;
  box-shadow: 0 8px 24px rgba(61,41,20,0.1);
  padding: 18px 20px;
}
.v-les #phase-select { flex: 0 0 auto; }
.v-les .select-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v-les .select-panel p { font-size: 20px; font-weight: 800; color: #6b5344; }

.v-les #phase-feed:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) minmax(260px, 1.2fr) minmax(140px, 0.4fr);
  gap: 12px;
  padding: 12px;
  flex: 1;
  min-height: 0;
}

.v-les .letter-box {
  background: #fff;
  border: 2px solid #c4a882;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v-les .letter-box h2 { font-size: 12px; text-align: center; color: #8b7355; font-weight: 900; text-transform: uppercase; }
.v-les .letter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.v-les .letter {
  border: 2px solid #e8dcc8;
  border-radius: 12px;
  background: #faf6ef;
  font-size: 26px;
  font-weight: 900;
  min-height: 44px;
  cursor: pointer;
  color: #3d2914;
}
.v-les .letter.active { border-color: #e8a838; background: #fff4dc; color: #b86a00; }

.v-les .syllable-panel { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.v-les .current-fruit { font-size: 44px; transition: transform 0.55s ease, opacity 0.55s ease; }
.v-les .current-fruit.fly-eat { transform: translateY(-80px) scale(0.3); opacity: 0; }
.v-les .syllable {
  font-family: "Marcellus", serif;
  font-size: clamp(88px, 12vw, 120px);
  font-weight: 400;
  color: #8b4513;
  line-height: 1;
}
.v-les .syllable.pop { animation: syll-pop 0.35s ease; }
@keyframes syll-pop {
  0% { transform: scale(0.85); opacity: 0.6; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.v-les .progress { font-size: 14px; font-weight: 800; color: #8b7355; }
.v-les .teacher-note { font-size: 13px; color: #8b7355; max-width: 240px; text-align: center; font-weight: 700; }

.v-les .actions:not([hidden]) { display: flex; justify-content: center; gap: 12px; flex: 0 0 auto; }
.v-les .actions .btn { min-width: 180px; border-radius: 999px; }
.v-les .btn-primary { background: linear-gradient(180deg, #f0c060, #d4924a); border: 2px solid #8b5e3c; }
.v-les #phase-done:not([hidden]) { text-align: center; padding: 28px; }
.v-les #phase-done h2 { font-family: Marcellus, serif; font-size: 36px; }
.v-les .back-link { background: var(--cream); border: 2px solid #c4a882; }