@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap');

.v-carle.stage {
  --asset: /assets/belochka;
  --paper-brown: #6b4226;
  --paper-red: #d62828;
  --paper-blue: #2d6a9f;
  font-family: "Fredoka", sans-serif;
  background: #5eb0d4 url('/assets/belochka/belochka-carle-bg.png') center / cover no-repeat;
}

.v-carle .scene-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/belochka/belochka-carle-bg.png') center / cover no-repeat;
  z-index: 0;
}

/* --- paper UI building blocks --- */
.v-carle .paper-btn {
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
  transition: transform 0.1s ease, filter 0.1s ease;
}
.v-carle .paper-btn:active {
  transform: translateY(3px) scale(0.98);
  filter: brightness(0.95);
}

.v-carle .paper-tile {
  border: none;
  background: transparent url('/assets/belochka/ui-carle-tile.png') center / 100% 100% no-repeat;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  color: var(--paper-brown);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.v-carle .paper-tile.active {
  background-image: url('/assets/belochka/ui-carle-tile-active.png');
  color: #9a4d00;
  transform: translateY(-2px);
}
.v-carle .paper-tile:active { transform: scale(0.94); }

.v-carle .fruit-icon {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  background: url('/assets/belochka/fruits-sheet-v2.png') no-repeat;
  background-size: 500% 200%;
}

/* --- back --- */
.v-carle .back-link {
  position: absolute;
  top: calc(16px + var(--safe-top));
  left: calc(16px + var(--safe-left));
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  display: block;
  text-decoration: none;
  mix-blend-mode: normal;
}
.v-carle .back-link img {
  display: block;
  height: 44px;
  width: auto;
}

/* --- title --- */
.v-carle .title-strip {
  position: absolute;
  top: calc(14px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 20px 10px;
  min-width: 320px;
  box-shadow: none;
  text-align: center;
}
.v-carle .title-art {
  display: block;
  margin: 0 auto;
  height: 110px;
  width: auto;
  max-width: 640px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

.v-carle .header-progress {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 22px;
  background: transparent url('/assets/belochka/progress-paper-bg.png') center / 100% 100% no-repeat;
  border: none;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  min-width: 110px;
  min-height: 36px;
  line-height: 1.2;
}
.v-carle .header-progress:empty { display: none; }

/* --- squirrel --- */
.v-carle .squirrel-area {
  position: absolute;
  left: calc(-10px + var(--safe-left));
  bottom: calc(18% + var(--safe-bottom));
  z-index: 6;
  width: 300px;
  height: 340px;
  pointer-events: none;
}
.v-carle .squirrel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(4px 8px 0 rgba(0,0,0,0.15));
  animation: squirrel-bob 3.2s ease-in-out infinite;
}
.v-carle .squirrel-area.chew .squirrel-img { animation: squirrel-chew 0.7s ease; }
.v-carle .squirrel-area.happy .squirrel-img { animation: squirrel-happy 0.8s ease-in-out 3; }

@keyframes squirrel-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes squirrel-chew {
  20% { transform: rotate(-8deg) scale(1.05) translateY(-4px); }
  50% { transform: rotate(8deg) scale(1.08) translateY(-2px); }
  80% { transform: rotate(-4deg) scale(1.04); }
}
@keyframes squirrel-happy {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* --- play area --- */
.v-carle .play-area {
  position: absolute;
  inset: calc(90px + var(--safe-top)) calc(24px + var(--safe-right)) calc(100px + var(--safe-bottom)) calc(24px + var(--safe-left));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.v-carle .play-area > * { pointer-events: auto; }

.v-carle .phase-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --- select phase --- */
.v-carle #phase-select .select-panel {
  background: transparent url('/assets/belochka/select-panel-v2.png') center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  padding: 32px 36px 36px;
  box-shadow: none;
  text-align: center;
  max-width: 740px;
  min-width: 540px;
  mix-blend-mode: normal;
}
.v-carle #phase-select p {
  margin-bottom: 18px;
  line-height: 0;
}
.v-carle #phase-select p img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.v-carle .select-hint-count {
  display: inline-block;
  padding: 10px 18px;
  background: transparent url('/assets/belochka/ui-carle-panel.png') center / 100% 100% no-repeat;
  font-size: 18px;
  font-weight: 700;
  color: var(--paper-brown);
}
.v-carle .fruit-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  justify-items: center;
}
.v-carle .fruit-slot {
  width: 76px;
  height: 76px;
  border: none;
  background: transparent url('/assets/belochka/fruit-slot-v2.png') center / contain no-repeat;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.12s ease;
  display: grid;
  place-items: center;
  padding: 4px;
}
.v-carle .fruit-slot:not(:disabled):active,
.v-carle .fruit-slot.selected { transform: translateY(-4px) scale(1.05); }
.v-carle .fruit-slot.selected {
  background-image: url('/assets/belochka/fruit-slot-selected-v2.png');
  animation: slot-bounce 0.35s ease;
}
@keyframes slot-bounce {
  50% { transform: translateY(-8px) scale(1.08); }
  100% { transform: translateY(-4px) scale(1.05); }
}
.v-carle .fruit-slot.eaten {
  font-size: 22px;
  font-weight: 700;
  color: #40916c;
}
.v-carle .fruit-slot.skipped { opacity: 0.35; filter: grayscale(0.5); }

.v-carle .btn-img {
  background: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  color: transparent;
  text-shadow: none;
}
.v-carle .btn-img img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 320px;
  pointer-events: none;
}
.v-carle .btn-img:disabled { opacity: 0.45; filter: grayscale(0.3); }

/* --- feed phase --- */
.v-carle.phase-feed .play-area { inset: 0; z-index: 3; }
.v-carle.phase-feed #phase-feed { position: absolute; inset: 0; }
.v-carle.phase-feed #phase-feed:not([hidden]) { display: block; }

.v-carle .letter-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 10px 12px;
  box-shadow: none;
  min-width: 120px;
  mix-blend-mode: normal;
}
.v-carle .letter-label {
  display: block;
  margin: 0 auto 8px;
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.v-carle .letter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.v-carle.phase-feed .letter-box.consonants {
  position: absolute;
  left: calc(230px + var(--safe-left));
  bottom: calc(32px + var(--safe-bottom));
  z-index: 7;
}
.v-carle.phase-feed .letter-box.consonants .letter-grid {
  grid-template-columns: repeat(4, 1fr);
}
.v-carle.phase-feed .letter-box.vowels {
  position: absolute;
  right: calc(300px + var(--safe-right));
  bottom: calc(20px + var(--safe-bottom));
  z-index: 7;
}
.v-carle.phase-feed .letter-box.vowels .letter-grid {
  grid-template-columns: repeat(3, 1fr);
}

.v-carle .syllable-panel {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
}
.v-carle .current-fruit {
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: none;
  transition: transform 0.65s ease, opacity 0.65s ease;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.12));
}
.v-carle .current-fruit .fruit-icon { width: 56px; height: 56px; }
.v-carle .current-fruit.fly-eat {
  opacity: 1;
  transform: translate(calc(-50% - 280px), 130px) scale(0.08) rotate(22deg);
}
.v-carle .syllable-card {
  background: transparent url('/assets/belochka/syllable-card-v2.png') center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  padding: 32px 64px;
  box-shadow: none;
  min-width: 320px;
  min-height: 200px;
  display: grid;
  place-items: center;
  mix-blend-mode: normal;
}
.v-carle .letter-sprite {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}
.v-carle .letter-grid .letter-sprite {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.v-carle .syllable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.v-carle .syllable .letter-sprite {
  width: clamp(96px, 13vw, 132px);
  height: clamp(96px, 13vw, 132px);
}
.v-carle .syllable .syl-c,
.v-carle .syllable .syl-v {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  min-width: clamp(80px, 12vw, 108px);
  min-height: clamp(80px, 12vw, 108px);
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.v-carle .syllable .syl-c:active,
.v-carle .syllable .syl-v:active { transform: scale(0.88); }
.v-carle .syllable .syl-c.tap-flash,
.v-carle .syllable .syl-v.tap-flash { animation: letter-squash 0.25s ease; }
@keyframes letter-squash {
  50% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.v-carle .teacher-hint {
  margin-top: 12px;
  max-width: 360px;
  line-height: 0;
}
.v-carle .teacher-hint img {
  width: 100%;
  height: auto;
  display: block;
}
.v-carle .syllable.pop { animation: syll-pop 0.35s ease; }
.v-carle .syllable-card.pop { animation: card-pop 0.35s ease; }
@keyframes card-pop {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes syll-pop {
  0% { transform: scale(0.85); opacity: 0.6; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- done --- */
.v-carle #phase-done:not([hidden]) {
  background: transparent url('/assets/belochka/select-panel-v2.png') center / 100% 100% no-repeat;
  border: none;
  padding: 36px 40px;
  box-shadow: none;
  text-align: center;
  max-width: 520px;
  mix-blend-mode: normal;
}
.v-carle .done-title {
  display: block;
  margin: 0 auto 12px;
  height: 72px;
  width: auto;
  max-width: 440px;
  object-fit: contain;
}
.v-carle #phase-done p {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: transparent url('/assets/belochka/progress-paper-bg.png') center / 100% 100% no-repeat;
  display: inline-block;
  min-width: 240px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.v-carle .sparkle {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 9;
  background: url('/assets/belochka/sparkle-star.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  animation: sparkle-burst 0.85s ease forwards;
}
@keyframes sparkle-burst {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.3) translateY(-40px); }
}

.v-carle .progress,
.v-carle .teacher-note { display: none; }

.v-carle .letter {
  border: none;
  background: transparent url('/assets/belochka/letter-tile-v2.png') center / contain no-repeat;
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  color: var(--paper-brown);
  cursor: pointer;
  min-height: 56px;
  min-width: 56px;
  padding: 6px;
  display: grid;
  place-items: center;
  transition: transform 0.1s ease;
}
.v-carle .letter.active {
  background-image: url('/assets/belochka/letter-tile-selected-v2.png');
  color: #7c2d12;
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.05) saturate(1.15);
}
.v-carle .letter:active { transform: scale(0.94); }