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

.v-tarelka.stage {
  --plate: #fffef8;
  --rim: #e8dcc8;
  --accent: #ff8fab;
  --soft: #ffc8dd;
  font-family: "Comfortaa", sans-serif;
  background: radial-gradient(circle at 50% 30%, #fff5f7 0%, #ffc8dd 55%, #ffafcc 100%);
}

.v-tarelka .game-top {
  position: absolute;
  top: calc(12px + var(--safe-top));
  left: calc(96px + var(--safe-left));
  right: calc(20px + var(--safe-right));
  z-index: 2;
  text-align: center;
}
.v-tarelka .title-row h1 { font-size: 28px; color: #9d4edd; font-weight: 700; }

.v-tarelka .fruit-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 700px;
  margin: 8px auto 0;
}

.v-tarelka .fruit-slot {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--plate);
  box-shadow: 0 4px 12px rgba(157,78,221,0.15), inset 0 -2px 0 var(--rim);
  font-size: 26px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.v-tarelka .fruit-slot.selected { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent); }
.v-tarelka .fruit-slot.current { box-shadow: 0 0 0 3px #9d4edd; }
.v-tarelka .fruit-slot.eaten { background: #d8f3dc; font-size: 18px; font-weight: 700; color: #40916c; }
.v-tarelka .fruit-slot.skipped { opacity: 0.35; }

.v-tarelka .plate-scene {
  position: absolute;
  left: 50%;
  top: calc(52% + 10px);
  transform: translate(-50%, -50%);
  width: min(460px, 68vw);
  height: min(460px, 68vw);
  z-index: 1;
  pointer-events: none;
}

.v-tarelka .plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--plate) 60%);
  box-shadow:
    0 0 0 14px var(--rim),
    0 0 0 18px rgba(255,255,255,0.5),
    0 20px 50px rgba(157,78,221,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 20px;
}

.v-tarelka .squirrel-svg {
  width: 100px;
  height: 100px;
  margin-top: -10px;
}
.v-tarelka .squirrel-svg.chew { animation: plate-chew 0.5s ease; }
.v-tarelka .squirrel-svg.happy { animation: plate-hop 0.6s ease 2; }
@keyframes plate-chew {
  50% { transform: scale(1.08); }
}
@keyframes plate-hop {
  50% { transform: translateY(-12px); }
}

.v-tarelka .plate .current-fruit { font-size: 36px; transition: all 0.5s ease; }
.v-tarelka .plate .current-fruit.fly-eat { transform: translateY(-30px) scale(0); opacity: 0; }
.v-tarelka .plate .syllable {
  font-size: clamp(72px, 10vw, 100px);
  font-weight: 700;
  color: #9d4edd;
  line-height: 1;
}
.v-tarelka .syllable.pop { animation: plate-pop 0.4s ease; }
@keyframes plate-pop {
  0% { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}
.v-tarelka .plate .progress { font-size: 13px; color: #888; font-weight: 600; }

.v-tarelka .game-bottom {
  position: absolute;
  left: calc(20px + var(--safe-left));
  right: calc(20px + var(--safe-right));
  bottom: calc(16px + var(--safe-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.v-tarelka #phase-select {
  width: 100%;
  max-width: 700px;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(157,78,221,0.12);
}
.v-tarelka .select-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-tarelka .select-panel p { font-size: 16px; font-weight: 600; color: #666; }

.v-tarelka #phase-feed:not([hidden]) {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.v-tarelka .letter-box {
  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 6px 16px rgba(157,78,221,0.1);
}
.v-tarelka .letter-box h2 { font-size: 10px; text-align: center; color: #9d4edd; font-weight: 700; text-transform: uppercase; }
.v-tarelka .letter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.v-tarelka .letter {
  border: none;
  border-radius: 10px;
  background: var(--soft);
  font-size: 20px;
  font-weight: 700;
  min-height: 36px;
  color: #9d4edd;
  cursor: pointer;
}
.v-tarelka .letter.active { background: var(--accent); color: #fff; }

.v-tarelka .teacher-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: #888;
  font-weight: 600;
  margin-bottom: 0;
}

.v-tarelka .actions:not([hidden]) { display: flex; gap: 10px; }
.v-tarelka .actions .btn { min-width: 160px; border-radius: 999px; font-weight: 700; }
.v-tarelka .btn-primary { background: var(--accent); color: #fff; }
.v-tarelka .btn-success { background: #95d5b2; color: #1b4332; }
.v-tarelka #phase-done:not([hidden]) {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(157,78,221,0.15);
  max-width: 400px;
}
.v-tarelka .back-link { background: #fff; border-radius: 999px; color: #9d4edd; font-weight: 700; }