/* ===== Mmagic-dictation.css ===== */



.dictation-instruction{
  margin: 10px 0 14px;
  font-size: 18px;
  opacity: 0.85;
}

.dictation-card{
  background: linear-gradient(135deg,#fff0f6,#ffe4f0);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(255,105,180,0.25);
  animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

.source-word{
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 14px;
}

.target-word{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom: 16px;
  direction:ltr;
}
.letter-slot,
.letter-bubble{
  direction:ltr;
}


.letter-slot{
  width:42px;
  height:48px;
  border-radius:10px;
  background:#fff;
  box-shadow: inset 0 0 0 2px #f9a8d4;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:bold;
}

.letter-slot.filled{
  background:#ffe4f0;
  box-shadow: 0 0 12px rgba(255,105,180,0.6);
}

.letter-bank{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom: 12px;
}

.letter-bubble{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff6fb1,#ffb6d5);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(255,105,180,0.6);
  transition:transform 0.15s ease;
}

.letter-bubble:active{
  transform:scale(0.9);
}

.letter-bubble.used{
  opacity:0.4;
  pointer-events:none;
}

.typing-area{
  margin-bottom:12px;
}

#textInput{
  width:100%;
  font-size:20px;
  padding:10px;
  border-radius:12px;
  border:2px solid #f9a8d4;
  text-align:center;
}
.letter-slot.active-slot{
  position: relative;
  border-radius: 16px;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg,#ff6fb1,#b983ff,#6ae3ff) border-box;
  box-shadow:
    0 0 0 6px rgba(255,182,213,0.35),
    0 0 28px rgba(255,105,180,0.9),
    0 12px 24px rgba(255,105,180,0.35);
  transform: scale(1.15);
  animation: magicFocus 1.2s infinite ease-in-out;
  z-index: 2;
}

.letter-slot.active-slot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(circle at bottom right, rgba(255,182,213,0.8), transparent 65%);
  animation: sparkleMove 1.6s infinite linear;
  pointer-events:none;
}

@keyframes magicFocus{
  0%{
    transform: scale(1.12) rotate(-1deg);
  }
  50%{
    transform: scale(1.18) rotate(1deg);
  }
  100%{
    transform: scale(1.12) rotate(-1deg);
  }
}

@keyframes sparkleMove{
  0%{
    opacity:0.6;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0.6;
  }
}
.dictation-progress{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:12px 0 18px;
  padding:12px 14px;
  border-radius:22px;
  border:3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#ff6fb1,#b983ff,#6ae3ff) border-box;
  box-shadow:
    0 10px 28px rgba(255,105,180,0.25),
    0 18px 40px rgba(109,40,217,0.12);
  overflow:hidden;
}

.dictation-progress::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,182,213,0.8), transparent 60%),
    radial-gradient(circle at 60% 30%, rgba(106,227,255,0.75), transparent 62%);
  animation:dictationGlow 2.2s infinite ease-in-out;
  pointer-events:none;
}

.dictation-progress::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.55) 45%,
    transparent 70%
  );
  transform:translateX(-120%);
  animation:dictationShine 2.6s infinite ease-in-out;
  pointer-events:none;
}

.dictation-timer,
.dictation-words{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(255,255,255,0.75);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.06),
    0 0 0 4px rgba(255,182,213,0.25);
  backdrop-filter:blur(6px);
}

.dictation-timer{
  font-size:18px;
  color:#d63384;
  letter-spacing:0.5px;
  animation:timerMagic 1.1s infinite ease-in-out;
}

.dictation-words{
  position:relative;
  font-size:16px;
  font-weight:bold;
  color:#6d28d9;
  padding:10px 18px;
  border-radius:999px;
  background:
    linear-gradient(135deg,#fce7f3,#ede9fe);
  box-shadow:
    0 6px 16px rgba(109,40,217,0.25),
    inset 0 0 0 2px rgba(255,182,213,0.9);
  animation:wordsFloat 2.4s ease-in-out infinite;
}

.dictation-words::before{
  content:"✨";
  position:absolute;
  left:-6px;
  top:-8px;
  font-size:16px;
  animation:sparkleBlink 1.8s infinite ease-in-out;
}

@keyframes wordsFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

@keyframes sparkleBlink{
  0%{ opacity:0.4; transform:scale(0.9); }
  50%{ opacity:1; transform:scale(1.1); }
  100%{ opacity:0.4; transform:scale(0.9); }
}


@keyframes dictationGlow{
  0%{ transform:scale(1) rotate(0deg); opacity:0.75; }
  50%{ transform:scale(1.08) rotate(6deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:0.75; }
}

@keyframes dictationShine{
  0%{ transform:translateX(-120%); opacity:0; }
  20%{ opacity:1; }
  60%{ opacity:1; }
  100%{ transform:translateX(120%); opacity:0; }
}

@keyframes timerMagic{
  0%{ transform:scale(1) rotate(-1deg); }
  50%{ transform:scale(1.08) rotate(1deg); }
  100%{ transform:scale(1) rotate(-1deg); }
}