/* Base layout + components. Colours come from CSS variables; themes override them
   in css/themes.css. Defaults below reproduce the original fairy-garden look. */
:root {
  --pink: #ff8fb8;
  --pink-deep: #f06292;
  --pink-soft: #ffe4f0;
  --lavender: #c9b6ff;
  --lavender-deep: #9b7ede;
  --lavender-soft: #f0e9ff;
  --mint: #7eddc2;
  --mint-deep: #4ec9a8;
  --mint-soft: #e4faf3;
  --gold: #ffd76a;
  --gold-deep: #f0b429;
  --cream: #fff9fc;
  --sky: #e8f4ff;
  --text: #3d2a4a;
  --muted: #7a6488;
  --card: #ffffff;
  --shadow: 0 10px 28px rgba(155, 126, 222, 0.18);
  --radius: 24px;

  /* ---- theme hooks (defaults = original fairy-garden look; see css/themes.css) ---- */
  --font-body: "Segoe UI", "Nunito", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);
  --bg:
    radial-gradient(ellipse at 20% 0%, #ffe8f4 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, #e8deff 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, #dffff4 0%, transparent 40%),
    linear-gradient(165deg, #fff5fb 0%, #f5eeff 45%, #eefaf7 100%);
  --title-grad: linear-gradient(120deg, var(--pink-deep), var(--lavender-deep), #6ec8ff);
  --title-sparkle-color: var(--gold-deep);
  --on-bg-muted: var(--muted);
  --card-bg: linear-gradient(180deg, #ffffff 0%, #fff8fc 100%);
  --card-border: rgba(255, 143, 184, 0.25);
  --card-stripe: linear-gradient(90deg, var(--pink), var(--lavender), var(--mint), var(--gold));
  --btn-grad: linear-gradient(180deg, #ff9ec5 0%, var(--pink-deep) 100%);
  --btn-edge: #d44a7a;
  --btn-glow: rgba(240, 98, 146, 0.35);
  --btn-text: #fff;
  --lav-top: #d4c4ff;
  --lav-edge: #7a5cbc;
  --mint-top: #9aefd6;
  --mint-edge: #2fa889;
  --ghost-bottom: #fff5fa;
  --key-bg: linear-gradient(180deg, #ffffff 0%, #fff0f6 100%);
  --key-border: #f0d4e4;
  --key-edge: #e0b8cc;
  --soft-border: #f0dceb;
  --picked-bg: linear-gradient(135deg, #ffe8f2, #f3e8ff);
  --slot-border: #e8d4f0;
  --slot-empty: #e8d0e0;
  --bad: #f06292;
  --spell-border: #e0c8f0;
  --letter-bg: linear-gradient(180deg, #fff 0%, #ffe8f4 100%);
  --banner-grad: linear-gradient(135deg, #ff6b9d, #a55eea);
  --banner-perfect-grad: linear-gradient(135deg, #ff6b9d, #f7b731, #a55eea, #5dade2);
  --grade-grad: linear-gradient(120deg, #ff6b9d, #a55eea, #5dade2);
  --streak-grad: linear-gradient(120deg, #ff6b9d, #f7b731, #a55eea);
  --perfect-burst-bg:
    radial-gradient(circle at 20% 30%, rgba(255, 182, 219, 0.35), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(197, 168, 255, 0.3), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 215, 106, 0.28), transparent 45%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px 48px;
  overflow-x: hidden;
}

.screen { display: none; width: 100%; max-width: 540px; }
.screen.active { display: block; }

.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sparkle-field span {
  position: absolute;
  opacity: 0.5;
  animation: twinkle 3.2s ease-in-out infinite;
  font-size: 14px;
  filter: drop-shadow(0 0 2px rgba(255, 215, 106, 0.6));
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1.2) rotate(12deg); }
}

.wrap { position: relative; z-index: 1; width: 100%; max-width: 540px; }

h1 {
  font-size: clamp(1.7rem, 6.2vw, 2.4rem);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 6px;
  background: var(--title-grad);
  font-family: var(--font-display);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.title-sparkle {
  display: block;
  text-align: center;
  font-size: 1.1rem;
  color: var(--title-sparkle-color);
  margin-bottom: 4px;
  letter-spacing: 0.15em;
}
.subtitle {
  text-align: center;
  font-size: 1.15rem;
  color: var(--on-bg-muted);
  margin-bottom: 18px;
  font-weight: 600;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  margin-bottom: 14px;
  border: 2px solid var(--card-border);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--card-stripe);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* —— Character art —— */
.hero-cast {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 14px;
  position: relative;
  min-height: 180px;
}
.hero-eliza {
  width: min(200px, 48vw);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(155, 126, 222, 0.3));
  animation: floaty 3.5s ease-in-out infinite;
  z-index: 2;
}
.hero-buddy {
  width: min(110px, 28vw);
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 6px 12px rgba(110, 200, 255, 0.35));
  animation: floaty 3s ease-in-out infinite 0.4s;
  z-index: 1;
}
.hero-fairy {
  width: min(130px, 32vw);
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 12px rgba(255, 143, 184, 0.35));
  animation: floaty 4s ease-in-out infinite 0.8s;
  z-index: 1;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.coach-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--pink-soft), var(--lavender-soft));
  border-radius: 18px;
  border: 2px solid rgba(201, 182, 255, 0.4);
}
.coach-eliza {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(155, 126, 222, 0.25));
}
.coach-bubble {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.sticker-accent {
  position: absolute;
  width: 70px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.sticker-accent.tl { top: 12px; left: -6px; transform: rotate(-12deg); }
.sticker-accent.br { bottom: 8px; right: -8px; transform: rotate(8deg); width: 56px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  min-width: 56px;
  padding: 14px 28px;
  font-size: 1.2rem;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--btn-text);
  background: var(--btn-grad);
  box-shadow:
    0 5px 0 var(--btn-edge),
    0 8px 16px var(--btn-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--btn-edge),
    0 2px 6px var(--btn-glow),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.btn:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 3px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(240, 98, 146, 0.35);
}
.btn-mint {
  background: linear-gradient(180deg, var(--mint-top) 0%, var(--mint-deep) 100%);
  box-shadow: 0 5px 0 var(--mint-edge), 0 8px 16px rgba(78, 201, 168, 0.35), inset 0 2px 0 rgba(255,255,255,0.35);
}
.btn-mint:active { box-shadow: 0 1px 0 var(--mint-edge), 0 2px 6px rgba(78,201,168,0.3), inset 0 2px 0 rgba(255,255,255,0.25); }

.btn-lavender {
  background: linear-gradient(180deg, var(--lav-top) 0%, var(--lavender-deep) 100%);
  box-shadow: 0 5px 0 var(--lav-edge), 0 8px 16px rgba(155,126,222,0.35), inset 0 2px 0 rgba(255,255,255,0.35);
}
.btn-lavender:active { box-shadow: 0 1px 0 var(--lav-edge), 0 2px 6px rgba(155,126,222,0.3), inset 0 2px 0 rgba(255,255,255,0.25); }

.btn-gold {
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold-deep) 100%);
  color: #5a3d00;
  box-shadow: 0 5px 0 #c48e12, 0 8px 16px rgba(240,180,41,0.35), inset 0 2px 0 rgba(255,255,255,0.4);
}
.btn-gold:active { box-shadow: 0 1px 0 #c48e12, 0 2px 6px rgba(240,180,41,0.3), inset 0 2px 0 rgba(255,255,255,0.3); }

.btn-ghost {
  background: linear-gradient(180deg, #fff 0%, var(--ghost-bottom) 100%);
  color: var(--text);
  border: 3px solid var(--key-border);
  box-shadow: 0 4px 0 var(--key-edge), inset 0 2px 0 rgba(255,255,255,0.8);
  text-shadow: none;
}
.btn-ghost:active { box-shadow: 0 1px 0 var(--key-edge), inset 0 2px 0 rgba(255,255,255,0.6); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.mode-picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.mode-picks label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fffafc, var(--lavender-soft));
  border: 3px solid var(--soft-border);
  border-radius: 18px;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 56px;
  transition: border-color 0.15s, background 0.15s;
}
.mode-picks input {
  width: 22px;
  height: 22px;
  accent-color: var(--pink-deep);
}
.mode-picks label:has(input:checked) {
  border-color: var(--pink);
  background: var(--picked-bg);
  box-shadow: 0 0 0 3px rgba(255, 143, 184, 0.2);
}

/* Progress */
.progress-wrap { margin-bottom: 12px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--on-bg-muted);
  margin-bottom: 8px;
}
.star-slots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.star-slot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #f5eef8 100%);
  border: 2px solid var(--slot-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(201, 182, 255, 0.2);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.star-slot.filled,
.star-slot.correct {
  background: linear-gradient(180deg, #d4f8e8 0%, #9aefd6 100%);
  border-color: var(--mint-deep);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(78, 201, 168, 0.4);
}
.star-slot.incorrect {
  background: linear-gradient(180deg, #ffe0ea 0%, #ffb0c8 100%);
  border-color: var(--bad);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(240, 98, 146, 0.3);
}

.mode-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #e8f4ff, #d4f0ff);
  color: #2d7ab0;
  border: 2px solid #b8dff5;
}
.mode-badge.writing {
  background: linear-gradient(135deg, #f3e8ff, #e8deff);
  color: #7c3aed;
  border-color: #d4c4ff;
}

.prompt {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}
.hint-line {
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.spell-line {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: linear-gradient(180deg, #fffafc, var(--lavender-soft));
  border: 3px dashed var(--spell-border);
  border-radius: 18px;
  margin-bottom: 14px;
}
.spell-letter {
  width: 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  background: var(--letter-bg);
  border: 3px solid var(--pink);
  border-radius: 14px;
  color: var(--pink-deep);
  text-transform: lowercase;
  box-shadow: 0 3px 0 rgba(240, 98, 146, 0.25);
}
.spell-letter.placeholder {
  border-style: dashed;
  border-color: #d8c0e8;
  color: transparent;
  background: #f8f0fc;
  box-shadow: none;
}

.letter-pad {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
@media (max-width: 400px) {
  .letter-pad { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
.letter-key {
  aspect-ratio: 1;
  min-height: 46px;
  font-size: 1.3rem;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  background: var(--key-bg);
  color: var(--text);
  border: 2px solid var(--key-border);
  box-shadow: 0 3px 0 var(--key-edge), inset 0 1px 0 rgba(255,255,255,0.8);
  cursor: pointer;
  text-transform: lowercase;
  touch-action: manipulation;
}
.letter-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--key-edge);
}
.letter-key:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 2px; }

.write-input {
  width: 100%;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  padding: 16px;
  border: 3px solid var(--lavender);
  border-radius: 18px;
  margin-bottom: 14px;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  color: var(--text);
  background: linear-gradient(180deg, #faf8ff, #f3e8ff);
  min-height: 72px;
  box-shadow: inset 0 2px 6px rgba(155, 126, 222, 0.12);
}
.write-input:focus {
  outline: 3px solid var(--lavender-deep);
  outline-offset: 2px;
}
.write-input::placeholder { color: #c4a8d4; letter-spacing: 0; font-weight: 600; font-size: 1.2rem; }

.feedback {
  text-align: center;
  padding: 16px;
  border-radius: 18px;
  margin: 10px 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: none;
}
.feedback.show { display: block; }
.feedback.ok {
  background: linear-gradient(135deg, #d4f8e8, #e0fff4);
  color: #0d7a50;
  border: 3px solid var(--mint);
}
.feedback.teach {
  background: linear-gradient(135deg, #fff6e0, #ffe8f4);
  color: #8a4a20;
  border: 3px solid var(--gold);
}
.sound-out {
  font-size: 1.7rem;
  letter-spacing: 0.3em;
  margin: 10px 0;
  color: var(--pink-deep);
  font-weight: 800;
}
.tip {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}
.correct-word {
  font-size: 2rem;
  font-weight: 800;
  color: var(--lavender-deep);
  letter-spacing: 0.15em;
  margin: 8px 0;
}
.correct-word.big-reveal {
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  letter-spacing: 0.22em;
  color: var(--pink-deep);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
  animation: revealPop 0.45s ease-out;
}
@keyframes revealPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.scorecard-score {
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  font-weight: 800;
  display: block;
  background: linear-gradient(120deg, var(--pink-deep), var(--lavender-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
  margin: 4px 0 8px;
}
.scorecard-label {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--muted);
}
.scorecard-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px 18px;
  margin: 4px 0 8px;
}
.scorecard-row .scorecard-score {
  margin: 0;
}
.scorecard-grade {
  font-size: clamp(2.6rem, 12vw, 4rem);
  font-weight: 900;
  background: var(--grade-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(255, 107, 157, 0.25);
}
.streak-callout {
  display: block;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 900;
  background: var(--streak-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 6px;
  animation: revealPop 0.45s ease-out;
}

#celebrate {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.celeb-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  background: var(--banner-grad);
  font-family: var(--font-display);
  color: white;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(165, 94, 234, 0.35);
  animation: bannerPop 1.7s ease forwards;
  white-space: nowrap;
  z-index: 60;
}
@keyframes bannerPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  70% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
}

.confetti {
  position: absolute;
  top: -30px;
  font-size: 1.5rem;
  animation: fall 1.7s ease-in forwards;
}
.confetti-sticker {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 120px;
  height: auto;
  transform: translateX(-50%) scale(0.3);
  opacity: 0;
  animation: stickerPop 1.4s ease-out forwards;
  filter: drop-shadow(0 8px 20px rgba(155, 126, 222, 0.4));
  z-index: 101;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes stickerPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.2) rotate(-10deg); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(4deg); }
  60% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.9); }
}

.celeb-banner.perfect {
  background: var(--banner-perfect-grad);
  background-size: 200% 200%;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  padding: 18px 36px;
  animation: bannerPop 2.8s ease forwards, perfectShimmer 1.4s ease infinite;
  box-shadow: 0 12px 40px rgba(255, 107, 157, 0.45);
  z-index: 120;
}
@keyframes perfectShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.confetti.sprinkle {
  font-size: 1.1rem;
  animation-name: sprinkleFall;
  animation-timing-function: linear;
}
@keyframes sprinkleFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(115vh) rotate(1080deg) scale(0.6); opacity: 0; }
}

.confetti.sparkle {
  animation-name: sparkleTwinkle;
  animation-timing-function: ease-in-out;
}
@keyframes sparkleTwinkle {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { opacity: 1; transform: translateY(8vh) scale(1.3); }
  60% { opacity: 1; transform: translateY(50vh) scale(1); }
  100% { transform: translateY(110vh) scale(0.2); opacity: 0; }
}

.perfect-sticker {
  position: absolute;
  width: clamp(72px, 14vw, 110px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(155, 126, 222, 0.45));
  z-index: 105;
  animation: stickerFly 4.2s ease-in-out forwards;
}
@keyframes stickerFly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(-20deg); }
  12% { opacity: 1; transform: translate(var(--dx1), var(--dy1)) scale(1.05) rotate(8deg); }
  55% { opacity: 1; transform: translate(var(--dx2), var(--dy2)) scale(1) rotate(-12deg); }
  100% { opacity: 0; transform: translate(var(--dx3), var(--dy3)) scale(0.7) rotate(25deg); }
}

.perfect-burst {
  position: absolute;
  inset: 0;
  background: var(--perfect-burst-bg);
  animation: burstFade 4.5s ease-out forwards;
  z-index: 90;
}
@keyframes burstFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.end-stats {
  text-align: center;
  font-size: 1.2rem;
  margin: 14px 0;
  line-height: 1.6;
  font-weight: 600;
}
.end-stats strong {
  font-size: 2.6rem;
  display: block;
  background: linear-gradient(120deg, var(--pink-deep), var(--lavender-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.end-cast {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin: 8px 0 12px;
}
.end-cast img {
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(155, 126, 222, 0.3));
}
.end-cast .e { width: 120px; }
.end-cast .b { width: 80px; }
.end-cast .f { width: 100px; }


.mode-badge.paper {
  background: linear-gradient(135deg, #fff6e0, #ffe8cc);
  color: #a05a10;
  border-color: #ffd093;
}
.paper-area {
  display: none;
  text-align: center;
  padding: 18px 12px 8px;
  margin-bottom: 8px;
}
.paper-area.show { display: block; }
.paper-icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 8px;
}
.paper-instruction {
  font-size: clamp(1.45rem, 5.5vw, 1.85rem);
  font-weight: 800;
  color: var(--pink-deep);
  line-height: 1.25;
  margin-bottom: 6px;
}
.paper-sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}
.end-paper {
  display: none;
  text-align: center;
}
.end-paper.show { display: block; }
.end-digital { display: block; }
.end-digital.hide { display: none; }
.photo-tip {
  background: linear-gradient(135deg, #ffe8f4, #f3e8ff);
  border: 3px solid #f0c8e0;
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}
.photo-tip .emoji { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.grownup-box {
  margin-top: 14px;
  text-align: left;
  border: 2px dashed #d8c0e8;
  border-radius: 16px;
  padding: 10px 12px;
  background: #faf8ff;
}
.grownup-box summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--lavender-deep);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.grownup-box summary::-webkit-details-marker { display: none; }
.grownup-box summary::before {
  content: "▸ ";
  margin-right: 4px;
}
.grownup-box[open] summary::before { content: "▾ "; }
.word-order-list {
  margin: 10px 0 4px;
  padding-left: 1.4em;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}
.print-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 20px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--lavender-deep);
  text-decoration: none;
  background: linear-gradient(180deg, #fff 0%, #f3e8ff 100%);
  border: 3px solid #e0d0f5;
  border-radius: 999px;
  box-shadow: 0 3px 0 #d0b8e8;
  min-height: 52px;
}
.print-link:active { transform: translateY(2px); box-shadow: 0 1px 0 #d0b8e8; }

.footer-note {
  text-align: center;
  color: var(--on-bg-muted);
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* =================================================================
   v2 additions: empty slots, week info + old-list picker, accents pad,
   name prompt (shared mode), iPad / touch layout
   ================================================================= */
.star-slot.empty { color: var(--slot-empty); font-size: 0.85rem; }

.week-info {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-bg-muted);
  margin: -10px 0 12px;
}
.old-lists {
  margin: 10px auto 4px;
  max-width: 420px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--on-bg-muted);
}
.old-lists summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: 800;
  border-radius: 999px;
  list-style: none;
  border: 2px dashed currentColor;
  opacity: 0.85;
}
.old-lists summary::-webkit-details-marker { display: none; }
.old-lists[open] summary { opacity: 1; }
.old-lists .picker-panel {
  margin-top: 8px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 18px;
  padding: 10px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.old-lists .picker-hint { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.week-choice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--key-border);
  background: var(--key-bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.week-choice[aria-current="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 143, 184, 0.25); }
.week-choice .wc-words { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.week-choice .wc-tag {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--lavender-soft);
  color: var(--lavender-deep);
}
.week-choice .wc-tag.demo { background: #fff0c2; color: #8a5a00; }

.letter-pad.accents {
  grid-template-columns: repeat(7, 1fr);
  margin-top: -2px;
  padding-top: 8px;
  border-top: 2px dotted var(--spell-border);
}
.letter-key.accent-key {
  background: var(--picked-bg);
  border-color: var(--lavender);
  color: var(--lavender-deep);
}

.name-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(60, 30, 80, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.name-overlay.show { display: flex; }
.name-card { width: 100%; max-width: 440px; text-align: center; }
.name-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 4px;
  color: var(--pink-deep);
}
.name-card .write-input { text-transform: none; letter-spacing: 0.02em; margin-top: 12px; }
.change-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  margin-top: 4px;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--on-bg-muted);
  text-decoration: underline;
  cursor: pointer;
}
.shared-hide { display: none !important; }

/* Safe areas (iPad / iPhone home-screen app) */
body {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(48px, env(safe-area-inset-bottom));
  padding-top: max(12px, env(safe-area-inset-top));
}
button, a, summary, label { -webkit-touch-callout: none; }

/* iPad & larger: roomier layout, bigger touch targets */
@media (min-width: 700px) {
  .screen, .wrap { max-width: 760px; }
  .card { padding: 28px 30px; }
  .letter-pad { gap: 10px; }
  .letter-key { min-height: 64px; font-size: 1.75rem; border-radius: 18px; }
  .spell-letter { width: 60px; height: 70px; font-size: 2.2rem; }
  .btn { min-height: 64px; font-size: 1.35rem; padding: 16px 32px; }
  .star-slot { width: 44px; height: 44px; font-size: 1.25rem; }
  .coach-eliza { width: 80px; height: 80px; }
  .coach-bubble { font-size: 1.2rem; }
  .prompt { font-size: 1.55rem; }
  .hint-line { font-size: 1.15rem; }
  .hero-cast { min-height: 230px; }
  .hero-eliza { width: 240px; }
  .hero-buddy { width: 140px; }
  .hero-fairy { width: 160px; }
  .mode-picks label { min-height: 68px; font-size: 1.2rem; }
  .mode-picks input { width: 28px; height: 28px; }
}
/* iPad landscape: keep the pad visible without scrolling */
@media (min-width: 900px) and (max-height: 820px) and (orientation: landscape) {
  .hero-cast { min-height: 150px; margin: 0 0 8px; }
  .hero-eliza { width: 170px; }
  .hero-buddy { width: 110px; }
  .hero-fairy { width: 120px; }
  .letter-key { min-height: 54px; aspect-ratio: auto; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-field span, .hero-eliza, .hero-buddy, .hero-fairy { animation: none; }
}
body:not(.is-shared) .shared-only { display: none !important; }
body.is-shared .personal-only { display: none !important; }

/* =================================================================
   Study mode: card grid + spotlight with letters lighting up
   ================================================================= */
.study-spot { text-align: center; min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.study-spot-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.06em;
  min-height: 1.3em;
  font-size: clamp(3rem, 15vw, 5.6rem);
  font-weight: 900;
  line-height: 1.15;
  position: relative;
  z-index: 1;
}
.study-spot-word .study-sticker { width: 1.6em; height: auto; animation: floaty 3s ease-in-out infinite; }
.study-letter {
  display: inline-block;
  min-width: 0.55em;
  color: var(--lavender-deep);
  opacity: 0.55;
  transition: transform 0.14s ease-out, color 0.14s, opacity 0.14s, text-shadow 0.14s;
}
.study-letter.lit {
  color: var(--pink-deep);
  opacity: 1;
  transform: translateY(-0.14em) scale(1.32);
  text-shadow: 0 0 0.3em var(--gold), 0 0.06em 0 #fff;
}
.study-letter.done { color: var(--pink-deep); opacity: 1; }
.study-spot-word.say-word .study-letter { color: var(--pink-deep); opacity: 1; animation: wordGlow 0.9s ease-in-out infinite alternate; }
@keyframes wordGlow {
  from { text-shadow: 0 0 0 transparent; transform: scale(1); }
  to { text-shadow: 0 0 0.35em var(--gold); transform: scale(1.06); }
}
.study-spot-hint { font-size: 1.1rem; font-weight: 700; color: var(--muted); margin-top: 6px; position: relative; z-index: 1; }
.study-progress { text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--on-bg-muted); margin: 4px 0 10px; }
.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 400px) { .study-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.study-card {
  position: relative;
  min-height: 132px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  touch-action: manipulation;
  font: inherit;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
}
.study-card-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  transform-style: preserve-3d;
}
.study-card.flipped .study-card-inner { transform: rotateY(180deg); }
.study-card .face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 3px solid var(--key-border);
  box-shadow: 0 5px 0 var(--key-edge), var(--shadow);
}
.study-card .face.back { background: var(--picked-bg); }
.study-card .face.back img { width: 64%; max-width: 92px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)); }
.study-card .face.back .num {
  position: absolute; top: 6px; left: 10px;
  font-weight: 900; font-size: 1.05rem; color: var(--lavender-deep);
}
.study-card .face.front {
  background: var(--card-bg);
  transform: rotateY(180deg);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 900;
  color: var(--pink-deep);
  letter-spacing: 0.06em;
  border-color: var(--pink);
}
.study-card:active .study-card-inner { transform: scale(0.96); }
.study-card.flipped:active .study-card-inner { transform: rotateY(180deg) scale(0.96); }
.study-card.active .face { border-color: var(--gold-deep); box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 5px rgba(255, 215, 106, 0.55), var(--shadow); }
.study-sparkle {
  position: absolute;
  top: -8px; right: -6px;
  z-index: 3;
  font-size: 1.6rem;
  filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.9));
  animation: revealPop 0.45s ease-out;
  pointer-events: none;
}
.study-card:focus-visible { outline: 3px solid var(--lavender-deep); outline-offset: 4px; border-radius: 20px; }
@media (min-width: 700px) {
  .study-card { min-height: 150px; }
  .study-grid { gap: 16px; }
}

/* the hidden attribute must win over component display rules (.btn, .letter-pad, ...) */
[hidden] { display: none !important; }

/* original fairy-garden sticker PNGs have white backgrounds: blend them into the card */

/* Spanish G/J tip on the miss screen: coloured letters */
.tip.tip-gj { font-size: 1.1rem; line-height: 1.5; color: var(--text); }
.tip-gj .gj-g, .tip-gj .gj-j {
  font-weight: 900;
  font-size: 1.2em;
  padding: 0 0.08em;
  border-radius: 6px;
}
.tip-gj .gj-g { color: #0f9d6b; background: rgba(126, 221, 194, 0.3); }
.tip-gj .gj-j { color: #e8590c; background: rgba(255, 169, 77, 0.25); }

/* Miss screen G/J tip: word line big, rule line smaller */
.tip-gj .tip-gj-word { font-size: 1.25em; font-weight: 800; }
.tip-gj .tip-gj-rule { font-size: 0.95em; color: var(--muted); }

/* Study: full G/J rule card above the word cards (speaker button, never autoplays) */
.study-tip {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 18px; margin: 12px auto 4px; max-width: 760px;
}
.study-tip .tip { margin: 0; font-size: 1.15rem; }
.study-tip-speaker {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--lavender-deep, #b197fc); background: #fff;
  font-size: 1.6rem; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.study-tip-speaker:active { transform: translateY(2px); }
.study-tip-speaker.playing { animation: wordGlow 0.9s ease-in-out infinite alternate; background: var(--mint, #b2f2bb); }

/* —— Home extra buttons —— */
.home-extra-btns {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 14px auto 8px; max-width: 640px; padding: 0 8px;
}
.home-extra-btns .home-extra {
  font-size: 1.05rem; min-height: 52px; padding: 10px 18px;
}

/* —— Progress —— */
.progress-pick-label, .progress-attempts-label, .progress-summary-label {
  font-weight: 800; font-size: 1.1rem; margin: 8px 0 6px; color: var(--text);
}
.progress-weeks {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.progress-week-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 3px solid var(--soft-border); background: var(--key-bg);
  border-radius: 16px; padding: 10px 14px; font: inherit; font-weight: 700;
  cursor: pointer; touch-action: manipulation; color: var(--text);
}
.progress-week-btn.active {
  border-color: var(--pink-deep); background: var(--picked-bg);
  box-shadow: 0 3px 0 var(--key-edge);
}
.progress-week-btn .pw-count { font-size: 0.9rem; color: var(--muted); }
.progress-chart {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 12px; min-height: 180px; padding: 12px 4px 8px;
}
.progress-bar-col {
  flex: 1 1 0; max-width: 72px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.progress-bar-track {
  width: 100%; height: 120px; background: var(--pink-soft);
  border-radius: 14px; display: flex; align-items: flex-end; overflow: hidden;
  border: 2px solid var(--soft-border);
}
.progress-bar-fill {
  width: 100%; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  transition: height 0.4s ease;
}
.progress-bar-fill.tier-perfect { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.progress-bar-fill.tier-almost { background: linear-gradient(180deg, #ffe066, var(--pink)); }
.progress-bar-fill.tier-great { background: linear-gradient(180deg, var(--lavender), var(--lavender-deep)); }
.progress-bar-fill.tier-good { background: linear-gradient(180deg, var(--mint), var(--mint-deep)); }
.progress-bar-fill.tier-gentle { background: linear-gradient(180deg, #ced4da, #868e96); }
.progress-bar-score { font-size: 1.35rem; font-weight: 900; color: var(--pink-deep); }
.progress-bar-meta { font-size: 1.1rem; }
.progress-bar-date { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.progress-summary {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  background: var(--lavender-soft); border-radius: 14px; padding: 12px 16px;
  margin-top: 4px;
}
.progress-empty { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--muted); padding: 24px 8px; }

/* —— Theme picker —— */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; max-width: 720px; margin: 12px auto 20px; padding: 0 10px;
}
.theme-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 14px 10px 12px; border-radius: 20px;
  border: 3px solid var(--soft-border); background: var(--card-bg);
  cursor: pointer; touch-action: manipulation; font: inherit;
  box-shadow: var(--shadow); transition: transform 0.15s ease;
}
.theme-card:active { transform: scale(0.97); }
.theme-card.active {
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 4px rgba(255, 143, 184, 0.35), var(--shadow);
}
.theme-thumb {
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}
.theme-name { font-weight: 800; font-size: 1rem; color: var(--text); text-align: center; }
.theme-badge {
  font-size: 0.7rem; font-weight: 800; color: var(--pink-deep);
  background: var(--pink-soft); border-radius: 999px; padding: 2px 8px;
}

/* —— Written score picker —— */
.score-picker {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  max-width: 420px; margin: 12px auto;
}
@media (min-width: 520px) {
  .score-picker { grid-template-columns: repeat(11, 1fr); max-width: 640px; }
}
.score-pick-btn {
  aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--key-border);
  background: var(--key-bg); font: inherit; font-size: 1.4rem; font-weight: 900;
  color: var(--text); cursor: pointer; touch-action: manipulation;
  min-height: 52px; box-shadow: 0 3px 0 var(--key-edge);
}
.score-pick-btn.active {
  background: var(--btn-grad); color: #fff; border-color: var(--btn-edge);
  transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge);
}
.score-picker-of {
  text-align: center; font-size: 1.2rem; font-weight: 800; color: var(--muted); margin: 8px 0 12px;
}
.written-saved {
  text-align: center; font-size: 1.25rem; font-weight: 800; color: var(--mint-deep);
  margin-top: 12px;
}


/* —— UI language toggle (chrome only) —— */
.ui-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px auto 0; padding: 4px 8px;
  background: rgba(255,255,255,0.55); border-radius: 999px;
  border: 2px solid var(--card-border);
}
.ui-lang-label { font-size: 0.75rem; font-weight: 800; color: var(--muted); margin-right: 2px; }
.ui-lang-btn {
  min-width: 40px; min-height: 36px; padding: 4px 10px;
  border-radius: 999px; border: 2px solid transparent;
  background: transparent; font: inherit; font-weight: 900; font-size: 0.85rem;
  color: var(--muted); cursor: pointer; touch-action: manipulation;
}
.ui-lang-btn.active {
  background: var(--btn-grad); color: #fff; border-color: var(--btn-edge);
  box-shadow: 0 2px 0 var(--btn-edge);
}

/* —— Digraph tip colour —— */
.tip .dg, span.dg {
  color: #7b3fe4; font-weight: 900;
  background: rgba(123, 63, 228, 0.12);
  border-radius: 6px; padding: 0 3px;
}
.tip-dg { border-left: 4px solid #7b3fe4; }

/* —— Sentence: last item of the test —— */
.sentence-home-note {
  text-align: center; font-size: 1rem; font-weight: 800; color: var(--pink-deep);
  margin: 8px 0 0; position: relative; z-index: 1;
}
.mode-badge.sentence { background: linear-gradient(135deg, #fff4d6, #ffe8b0); color: #a86400; border-color: #ffd98a; }
.sentence-area { margin: 6px 0 4px; }
.sentence-path-toggle {
  display: flex; justify-content: center; gap: 6px; margin: 0 auto 10px;
  padding: 4px; width: max-content; max-width: 100%;
  background: rgba(255,255,255,0.6); border: 2px solid var(--card-border); border-radius: 999px;
}
.sp-btn {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid transparent;
  background: transparent; font: inherit; font-size: 0.95rem; font-weight: 800; color: var(--muted);
  cursor: pointer; touch-action: manipulation;
}
.sp-btn.active { background: var(--btn-grad); color: #fff; border-color: var(--btn-edge); box-shadow: 0 2px 0 var(--btn-edge); }
.sentence-tray {
  min-height: 64px; padding: 10px 12px; margin-bottom: 12px;
  border-radius: 16px; border: 3px dashed var(--key-border);
  background: var(--picked-bg, #fff7fb);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 1.45rem; font-weight: 800; color: var(--text);
}
.sentence-placeholder { color: var(--muted); font-weight: 700; opacity: 0.6; }
.sentence-chip {
  display: inline-block; padding: 6px 12px; min-height: 44px; border-radius: 12px;
  background: var(--mint-soft, #d8f5ea); border: 2px solid var(--mint-deep);
  font: inherit; font-size: 1.3rem; font-weight: 800; color: var(--text); cursor: pointer;
}
.sentence-typed { letter-spacing: 0.04em; white-space: pre-wrap; word-break: break-word; }
.sentence-caret { color: var(--pink-deep); animation: caretBlink 1s steps(2) infinite; margin-left: -4px; }
@keyframes caretBlink { 50% { opacity: 0; } }
.sentence-bank {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px;
}
.sentence-bank-word {
  padding: 8px 12px; min-height: 48px; min-width: 52px; border-radius: 14px;
  border: 3px solid var(--key-border); background: var(--key-bg);
  font: inherit; font-size: 1.2rem; font-weight: 800; color: var(--text);
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 3px 0 var(--key-edge);
}
.sentence-bank-word:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-edge); }
.sentence-bank-word.used { opacity: 0.25; box-shadow: none; transform: translateY(2px); }
.sentence-pad { margin-bottom: 8px; }
.sentence-space-row { justify-content: center; margin-bottom: 4px; }
#btnSentenceSpace { min-width: 40%; }
.star-slot.sentence-slot { border-radius: 12px; width: 48px; }
@media (min-width: 700px) { .star-slot.sentence-slot { width: 60px; } }
.correct-sentence { display: inline-block; margin-top: 6px; font-size: 1.6rem; font-weight: 900; color: var(--mint-deep); }

/* Wrong sentence: correct sentence word by word; her wrong word struck through beneath */
.sentence-reveal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 10px 0 4px;
}
.sw { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.2em; }
.sw-target {
  font-size: 1.8rem; font-weight: 900; line-height: 1.15; padding: 2px 8px; border-radius: 10px;
}
.sw.ok .sw-target { color: #15803d; background: #dcfce7; }
.sw.wrong .sw-target { color: #b91c1c; background: #fee2e2; box-shadow: 0 0 0 3px #f87171 inset; }
.sw.moved .sw-target { color: #c2410c; background: #ffedd5; box-shadow: 0 0 0 3px #fb923c inset; }
.sw.missing .sw-target { color: #b91c1c; background: #fee2e2; box-shadow: 0 0 0 3px #f87171 inset; }
.sw-hers { font-size: 1.05rem; font-weight: 700; color: var(--muted); opacity: 0.75; margin-top: 2px; }
s.sw-hers { text-decoration-thickness: 2px; text-decoration-color: #ef4444; }
.sw-gap { font-style: italic; }
.sentence-extra { margin: 6px 0 0; font-size: 1rem; font-weight: 700; color: var(--muted); }
.sw-extra { opacity: 0.7; text-decoration-color: #ef4444; }

/* Study: sentence card after the word cards */
.study-sentence-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; max-width: 640px; margin: 14px auto 6px; padding: 14px 18px; min-height: 72px;
  border-radius: 20px; border: 3px dashed var(--key-border); background: var(--picked-bg);
  font: inherit; color: var(--text); cursor: pointer; box-shadow: var(--shadow);
}
.study-sentence-card.active { border-style: solid; border-color: var(--pink-deep); }
.study-sentence-card.studied::after { content: "✨"; }
.ssc-label { font-size: 1.35rem; font-weight: 900; color: var(--pink-deep); }
.ssc-hint { font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.study-spot-word.study-spot-sentence { flex-wrap: wrap; gap: 6px 12px; font-size: 2rem; }
.study-sentence-word { font-weight: 900; }
.study-sentence-word.is-spelling-word { color: var(--pink-deep); text-decoration: underline wavy var(--gold, #f6c445); text-underline-offset: 6px; }

/* Written score: sentence right / not yet */
.written-sentence { margin: 6px 0 4px; text-align: center; }
.written-sentence-label { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
.ws-btn.active { background: var(--btn-grad); color: #fff; border-color: var(--btn-edge); }
.progress-bar-sentence { font-size: 0.9rem; font-weight: 800; }
.progress-bar-sentence.miss { opacity: 0.6; }
.sentence-li { font-style: italic; }

.sentence-badge {
  text-align: center; font-weight: 800; font-size: 1.2rem; margin: 8px 0 0;
}
.sentence-badge.ok { color: var(--mint-deep); }
.sentence-badge.miss { color: var(--pink-deep); }