/* css/children-stories.css — Gamified Children Stories Suite (CCI Kid-First UI) */

:root {
  --btn-font: var(--kids-font);
  --kids-font: 'Fredoka', 'Nunito', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --kids-body-font: 'Nunito', 'Fredoka', sans-serif;
  --kids-bg-soft: rgba(255, 255, 255, 0.07);
  --kids-gold: #ffbe0b;
  --kids-gold-soft: rgba(255, 190, 11, 0.22);
  --kids-pink: #ff006e;
  --kids-pink-soft: rgba(255, 0, 110, 0.18);
  --kids-blue: #3a86ff;
  --kids-blue-soft: rgba(58, 134, 255, 0.18);
  --kids-green: #06d6a0;
  --kids-green-soft: rgba(6, 214, 160, 0.18);
  --kids-purple: #8338ec;
  --kids-purple-soft: rgba(131, 56, 236, 0.2);
}

/* ── Kid-Safe Shell: Hide Heavy Adult Nav Bars Unless Parent Gate Unlocked ─ */
body.kids-page-mode {
  font-family: var(--kids-body-font);
  background: radial-gradient(circle at 20% 10%, #2b1d54 0%, #191636 52%, #111328 100%) !important;
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
}
body.kids-page-mode:not(.adult-nav-unlocked) #nav-bar,
body.kids-page-mode:not(.adult-nav-unlocked) #tab-bar,
body.kids-page-mode:not(.adult-nav-unlocked) .sf-context-bar {
  position: fixed !important;
  top: -300px !important;
  left: -300px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.kids-page-mode.adult-nav-unlocked {
  padding-top: 58px !important;
}

/* ── Kid-Safe Top Navigation Bar (.kids-top-nav) ─────────────────────────── */
.kids-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .85rem;
  padding: .9rem 1.4rem;
  max-width: 1040px;
  margin: .85rem auto 0;
  border-radius: 28px;
  background: rgba(34, 27, 74, 0.92);
  border: 3px solid rgba(255, 190, 11, 0.45);
  box-shadow: 0 8px 0 rgba(12, 9, 32, 0.55), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.kids-top-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--kids-font);
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
}
.kids-brand-icon {
  font-size: 1.9rem;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.kids-brand-name strong {
  color: var(--kids-gold);
}
.kids-top-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.kids-big-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.35rem;
  border-radius: 99px;
  font-family: var(--kids-font);
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kids-big-nav-pill.mode-pill {
  background: linear-gradient(135deg, #06d6a0, #04a77c);
  color: #09221c;
  box-shadow: 0 5px 0 #037355;
  border-color: #52ffcf;
}
.kids-big-nav-pill.speak-pill {
  background: linear-gradient(135deg, #ffbe0b, #ff9900);
  color: #1f1600;
  box-shadow: 0 5px 0 #b36b00;
  border-color: #ffe380;
}
.kids-big-nav-pill:hover {
  transform: translateY(-2px);
}
.kids-big-nav-pill:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.kids-parent-corner {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.kids-parent-link,
.kids-parent-link:hover,
.kids-parent-gate-btn:hover {
  border-color: var(--kids-gold);
  color: #fff;
}

/* ── Kids Header ──────────────────────────────────────────────────────────── */
.kids-header {
  text-align: center;
  padding: 1.4rem 1rem 1rem;
  max-width: 980px;
  margin: 0 auto;
}
.kids-header-badge { font-family: var(--kids-font); margin-bottom: .65rem; }
.kids-header-title {
  font-family: var(--kids-font);
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  margin: 0 0 .5rem;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.kids-header-sub {
  color: #e2dcf8;
  font-size: clamp(1.12rem, 2.3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
  max-width: 740px;
  margin: 0 auto;
}

/* ── Container ────────────────────────────────────────────────────────────── */
.kids-container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

/* ── Gamified HUD Strip ───────────────────────────────────────────────────── */
.kids-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.4rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 1.25rem;
}

.kids-hud-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kids-hud-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--kids-gold) var(--ring-p, 0deg), rgba(255, 255, 255, 0.08) 0deg);
  box-shadow: 0 0 12px rgba(255, 190, 11, 0.25);
  position: relative;
}

.kids-hud-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface);
}

.kids-hud-ring-txt {
  position: relative;
  font-family: var(--kids-font);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  line-height: .95;
  color: var(--kids-gold);
}

.kids-hud-ring-txt small {
  font-size: .65rem;
  color: var(--text-muted);
}

.kids-hud-progress {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.kids-hud-rank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
}

.kids-hud-rank {
  font-family: var(--kids-font);
  font-weight: 700;
  color: var(--text);
}

.kids-hud-target {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
}

.kids-hud-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.kids-hud-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--kids-gold), #ff8800);
  transition: width .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kids-hud-stats {
  display: flex;
  gap: .75rem;
  align-items: center;
}


/* ── Mascot Coach Card (Dual Companions: Renard & Hermeline) ─────────────── */
.kids-mascot-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 1.75rem;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 190, 11, 0.16), rgba(131, 56, 236, 0.14));
  border: 3px solid rgba(255, 190, 11, 0.5);
  box-shadow: 0 8px 0 rgba(12, 9, 32, 0.45), 0 12px 28px rgba(0, 0, 0, 0.25);
  margin-bottom: 1.65rem;
}

.kids-mascot-duo {
  display: flex;
  gap: .95rem;
  align-items: center;
  flex-shrink: 0;
}

.kids-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.kids-avatar-wrap.renard {
  animation: mascotBob 3.2s ease-in-out infinite;
}

.kids-avatar-wrap.hermeline {
  animation: mascotBob 3.2s ease-in-out infinite 1.6s;
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.kids-avatar-label {
  font-family: var(--kids-font);
  font-size: .95rem;
  font-weight: 800;
  color: #ffe380;
}

.kids-mascot-avatar {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}

.kids-mascot-dialogue {
  flex: 1;
}

.kids-mascot-badge-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}

.kids-guide-chip { font-family: var(--kids-font); }

.kids-active-speaker-tag {
  font-family: var(--kids-font);
  font-size: .95rem;
  font-weight: 800;
  color: #e2dcf8;
}

.kids-mascot-title {
  margin: 0 0 .35rem;
  font-family: var(--kids-font);
  font-size: 1.38rem;
  font-weight: 800;
  color: var(--kids-gold);
}

.kids-mascot-text {
  margin: 0 0 .35rem;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

.kids-mascot-sub {
  font-size: 1rem;
  font-weight: 600;
  color: #d8d0f5;
}

/* ── Step Tabs Bar (Big Chunky 3D Kid Tiles) ──────────────────────────────── */
.kids-steps-bar {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.65rem;
  overflow-x: auto;
  padding-bottom: .55rem;
}

.kids-step-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.35rem;
  border-radius: 22px;
  font-family: var(--kids-font);
  font-size: 1.12rem;
  font-weight: 800;
  background: rgba(34, 27, 74, 0.92);
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 0 rgba(10, 8, 28, 0.55);
  color: #e2dcf8;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}

.kids-step-tab:hover {
  border-color: var(--kids-gold);
  color: #fff;
  transform: translateY(-2px);
}

.kids-step-tab.active {
  background: linear-gradient(135deg, #8338ec, #5e17eb);
  border-color: #d4b3ff;
  color: #fff;
  box-shadow: 0 6px 0 #3c0999, 0 0 18px rgba(131, 56, 236, 0.45);
}

.kids-step-tab.completed {
  border-color: var(--kids-green);
  background: rgba(6, 214, 160, 0.16);
  color: #52ffcf;
}

.kids-step-tab.completed::after {
  content: '✓';
  font-weight: 900;
  color: var(--kids-green);
  margin-left: .25rem;
}

.kids-step-tab.locked {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.45);
  border-style: dashed;
  position: relative;
}

.kids-step-tab.locked::after {
  content: '🔒';
  font-size: .95rem;
  margin-left: .3rem;
}

.kids-step-tab.locked:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #e2dcf8;
  transform: none;
}

/* ── Panel Stages ─────────────────────────────────────────────────────────── */
.kids-stage {
  display: none;
}

.kids-stage.active {
  display: block;
}

.kids-card {
  background: rgba(34, 27, 74, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  padding: 2rem;
  box-shadow: 0 10px 0 rgba(10, 8, 28, 0.55), 0 14px 36px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* ── Stage 1: Audio Controls (Oversized Tactile Player) ───────────────────── */
.kids-audio-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.65rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 190, 11, 0.4);
  margin-bottom: 1.75rem;
}

.kids-audio-main-controls {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.kids-audio-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.kids-audio-title {
  font-family: var(--kids-font);
  font-size: 1.28rem;
  font-weight: 800;
  color: #fff;
}

.kids-audio-time {
  font-family: var(--kids-font);
  font-size: 1rem;
  font-weight: 700;
  color: #ffd166;
}

.kids-audio-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

.kids-voice-picker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--kids-font);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.kids-select {
  padding: .65rem 1.1rem;
  border-radius: 16px;
  background: #191636;
  border: 2px solid rgba(255, 190, 11, 0.45);
  color: #fff;
  font-family: var(--kids-font);
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
}

.kids-chip-btn { font-family: var(--kids-font); cursor: pointer; }

.kids-chip-btn:hover {
  border-color: var(--kids-gold);
  background: rgba(255, 190, 11, 0.2);
}

/* ── Story Book Arena ─────────────────────────────────────────────────────── */
.kids-story-book {
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
  margin-bottom: 2.2rem;
}

.kids-scene-card {
  padding: 1.75rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.16);
  transition: border-color .2s ease;
}

.kids-scene-card:hover {
  border-color: rgba(255, 190, 11, 0.45);
}

.kids-scene-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--kids-font);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--kids-gold);
  margin: 0 0 1.25rem;
}

.kids-story-line {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: 20px;
  margin-bottom: .65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
}

.kids-story-line:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 190, 11, 0.35);
}

.kids-story-line.active {
  background: rgba(255, 190, 11, 0.18);
  border: 2px solid var(--kids-gold);
  box-shadow: 0 4px 16px rgba(255, 190, 11, 0.2);
}

.story-line-jump {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 190, 11, 0.45);
  background: rgba(255, 190, 11, 0.15);
  color: #ffd166;
  font-size: 1.15rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  transition: all .15s ease;
}

.kids-story-line:hover .story-line-jump,
.kids-story-line.active .story-line-jump {
  background: var(--kids-gold);
  color: #1a1a2e;
  border-color: #fff;
  transform: scale(1.08);
}

.story-line-text {
  flex: 1;
}

.story-fr {
  font-family: var(--kids-body-font);
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.62;
  color: #fff;
}

.story-en {
  font-size: 1.12rem;
  font-weight: 600;
  color: #d8d0f5;
  font-style: italic;
  margin-top: .35rem;
  display: none;
}

.story-en.visible {
  display: block;
}

/* ── Speaker Tags ─────────────────────────────────────────────────────────── */
.kids-speaker-tag {
  display: inline-block;
  font-family: var(--kids-font);
  font-size: 1rem;
  font-weight: 800;
  padding: .3rem .85rem;
  border-radius: 12px;
  margin-bottom: .4rem;
}

.speaker-leo {
  background: var(--kids-blue-soft);
  color: #8cb8ff;
  border: 2px solid rgba(58, 134, 255, 0.5);
}

.speaker-lea {
  background: var(--kids-pink-soft);
  color: #ff85bb;
  border: 2px solid rgba(255, 0, 110, 0.5);
}

.speaker-chouette {
  background: var(--kids-purple-soft);
  color: #d8b4ff;
  border: 2px solid rgba(131, 56, 236, 0.5);
}

.speaker-narrator {
  background: var(--kids-gold-soft);
  color: #ffd166;
  border: 2px solid rgba(255, 190, 11, 0.5);
}

/* ── Primary Action Buttons ───────────────────────────────────────────────── */
.kids-stage-finish-row {
  display: flex;
  justify-content: center;
  margin-top: 1.8rem;
}

/* ── Stage 2: Vocab Flashcards ────────────────────────────────────────────── */
.kids-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.kids-step-indicator {
  font-family: var(--kids-font);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-muted);
}


.kids-combo-tag {
  font-family: var(--kids-font);
  font-size: .82rem;
  font-weight: 700;
  color: #ff8800;
  animation: pulse 1s infinite alternate;
}

.kids-prog-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.kids-prog-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--kids-purple), var(--kids-gold));
  transition: width .35s ease;
}

.kids-flashcard-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 2px dashed rgba(255, 190, 11, 0.35);
  border-radius: 20px;
  padding: 2.2rem 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.kids-vocab-emoji {
  font-size: 3.5rem;
  margin-bottom: .5rem;
}

.kids-vocab-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-bottom: .3rem;
}

.kids-vocab-fr {
  font-family: var(--kids-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.kids-vocab-en {
  font-size: 1.05rem;
  color: var(--kids-gold);
  font-style: italic;
  margin-bottom: .8rem;
}

.kids-vocab-ctx {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 550px;
  margin: 0 auto;
}

.kids-vocab-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kids-btn.master {
  background: var(--kids-green-soft);
  border: 1px solid rgba(6, 214, 160, 0.4);
  color: var(--kids-green);
}

.kids-btn.master:hover {
  background: rgba(6, 214, 160, 0.25);
  transform: translateY(-2px);
}

.kids-btn.review {
  background: var(--kids-bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.kids-grid-toggle {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.kids-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.kids-vgrid-item {
  padding: .75rem;
  border-radius: 12px;
  background: var(--kids-bg-soft);
  border: 1px solid var(--border);
  font-size: .85rem;
}

/* ── Stage 3: Quiz Détective ──────────────────────────────────────────────── */
.kids-prompt-wrap {
  background: var(--kids-bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.kids-prompt {
  font-family: var(--kids-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.kids-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.kids-result-box {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  font-size: .92rem;
  line-height: 1.45;
}

.kids-result-box.show {
  display: block;
}

.kids-result-box.ok {
  background: var(--kids-green-soft);
  border: 1px solid rgba(6, 214, 160, 0.4);
  color: var(--kids-green);
}

.kids-result-box.wrong {
  background: var(--kids-pink-soft);
  border: 1px solid rgba(255, 0, 110, 0.4);
  color: #ff66aa;
}

/* ── Stage 4: Puzzle Mystère ──────────────────────────────────────────────── */
.kids-puzzle-sentence {
  font-size: 1.25rem;
  font-family: var(--kids-font);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  padding: 1.5rem;
  background: var(--kids-bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 1.25rem;
}

.kids-puzzle-slot {
  display: inline-block;
  min-width: 110px;
  padding: .2rem .75rem;
  border-radius: 10px;
  background: rgba(255, 190, 11, 0.15);
  border: 2px dashed var(--kids-gold);
  color: var(--kids-gold);
  font-weight: 700;
  text-align: center;
}

.kids-puzzle-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-bottom: 1rem;
}

.kids-word-pill { font-family: var(--kids-font); cursor: pointer; }

.kids-word-pill:hover {
  border-color: var(--kids-gold);
  background: var(--kids-gold-soft);
  transform: scale(1.05);
}

.kids-puzzle-hint {
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

/* ── Stage 5: Théâtre de Léo & Léa ────────────────────────────────────────── */
.kids-role-picker {
  text-align: center;
  margin-bottom: 1.25rem;
}

.kids-role-label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .6rem;
}

.kids-role-btns {
  display: flex;
  justify-content: center;
  gap: .75rem;
}

.kids-role-btn.active {
  border-color: var(--kids-gold);
  background: var(--kids-gold-soft);
  color: var(--kids-gold);
}

.kids-theatre-quote-box {
  background: var(--kids-bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.kids-theatre-fr {
  font-size: 1.25rem;
  font-family: var(--kids-font);
  font-weight: 700;
  color: var(--text);
  margin: .4rem 0 .2rem;
}

.kids-theatre-en {
  font-size: .9rem;
  color: var(--text-muted);
  font-style: italic;
}

.kids-theatre-listen-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.kids-theatre-hint {
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
}

.kids-eval-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.kids-eval-btn.perfect {
  background: var(--kids-gold-soft);
  border-color: rgba(255, 190, 11, 0.4);
  color: var(--kids-gold);
}

.kids-eval-btn.good {
  background: var(--kids-green-soft);
  border-color: rgba(6, 214, 160, 0.4);
  color: var(--kids-green);
}

/* ── Stage 6: Victory & Certificate ───────────────────────────────────────── */
.kids-victory-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 190, 11, 0.08), rgba(131, 56, 236, 0.08));
  border: 2px solid rgba(255, 190, 11, 0.35);
}

.kids-trophy-icon {
  font-size: 4rem;
  animation: bounceTrophy 1.2s infinite alternate ease-in-out;
}

@keyframes bounceTrophy {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.06); }
}

.kids-stars-row {
  font-size: 2rem;
  letter-spacing: .3rem;
  margin: .5rem 0 .8rem;
}

.kids-victory-title {
  font-family: var(--kids-font);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--kids-gold);
}

.kids-victory-motive {
  font-size: 1.05rem;
  color: var(--text);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.kids-certificate {
  background: var(--surface);
  border: 2px dashed var(--kids-gold);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 580px;
  margin: 0 auto 1.75rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.kids-cert-header {
  font-family: var(--kids-font);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--kids-gold);
  margin-bottom: .6rem;
}

.kids-cert-body {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: .75rem;
}

.kids-cert-seal {
  font-size: .85rem;
  font-weight: 800;
  color: #ff8800;
}

.kids-stats-row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.kids-stat-card {
  --ds-card-bg: var(--kids-bg-soft);
  padding: .75rem 1.25rem;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.kids-stat-val {
  font-family: var(--kids-font);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kids-gold);
}

.kids-stat-lbl {
  font-size: .75rem;
  color: var(--text-muted);
}

.kids-actions-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* ── XP Floater ───────────────────────────────────────────────────────────── */
.kids-xp-floater {
  position: fixed;
  font-family: var(--kids-font);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--kids-gold);
  text-shadow: 0 0 10px rgba(255, 190, 11, 0.7);
  pointer-events: none;
  animation: floatXp 1.2s forwards ease-out;
  z-index: 9999;
}

@keyframes floatXp {
  0% { opacity: 1; transform: translateY(0) scale(0.9); }
  50% { transform: translateY(-30px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

@media (max-width: 640px) {
  .kids-hud { grid-template-columns: auto 1fr; }
  .kids-hud-stats { grid-column: span 2; justify-content: center; }
  .kids-options-grid { grid-template-columns: 1fr; }
  .kids-audio-bar { flex-direction: column; align-items: stretch; }
  .kids-stats-row { flex-direction: column; gap: .6rem; }
}


/* ── Age Mode Selector Modal ─────────────────────────────────────────────── */
.kids-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 24, 0.78);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.kids-modal-backdrop.open {
  display: flex;
  animation: modalFadeIn .25s ease-out forwards;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.kids-modal-card {
  background: var(--surface);
  border: 2px solid rgba(255, 190, 11, 0.4);
  border-radius: 28px;
  padding: 2rem 2.2rem;
  max-width: 760px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  text-align: center;
}
.kids-modal-badge { font-family: var(--kids-font); font-weight: 800; margin-bottom: .6rem; }
.kids-modal-title {
  font-family: var(--kids-font);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  margin: 0 0 .4rem;
  color: var(--text);
}
.kids-modal-sub {
  color: var(--text-muted);
  font-size: .95rem;
  margin: 0 0 1.5rem;
}
.kids-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.kids-mode-card {
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .2s ease, border-color .2s ease;
}
.kids-mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--kids-gold);
}
.kids-mode-card.active-card {
  border-color: rgba(58, 134, 255, 0.6);
  background: rgba(58, 134, 255, 0.05);
}
.kids-mode-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.kids-mode-tag {
  font-family: var(--kids-font);
  font-size: .75rem;
  font-weight: 800;
  color: #06d6a0;
  text-transform: uppercase;
}
.kids-mode-tag.highlight {
  color: #4d94ff;
}
.kids-mode-name {
  font-family: var(--kids-font);
  font-size: 1.25rem;
  margin: 0;
  color: var(--text);
}
.kids-mode-desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.kids-mode-features {
  list-style: none;
  padding: 0;
  margin: .3rem 0;
  font-size: .82rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kids-mode-free-btn {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.25);
  color: var(--text-muted);
  padding: .6rem 1.2rem;
  border-radius: 99px;
  font-family: var(--kids-font);
  font-size: .88rem;
  cursor: pointer;
  transition: all .2s ease;
}
.kids-mode-free-btn:hover {
  border-color: var(--kids-gold);
  color: var(--text);
}

/* ── Listening Guard Card & 90% Progress ─────────────────────────────────── */
.kids-listen-guard-card {
  width: 100%;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 1rem 1.35rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transition: all .3s ease;
}
.kids-listen-guard-card.completed {
  border-color: rgba(6, 214, 160, 0.5);
  background: rgba(6, 214, 160, 0.08);
}
.kids-guard-header {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.kids-guard-icon {
  font-size: 1.6rem;
}
.kids-guard-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kids-guard-title {
  font-family: var(--kids-font);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.kids-guard-sub {
  font-size: .8rem;
  color: var(--text-muted);
}
.kids-guard-pill { font-family: var(--kids-font); font-weight: 800; font-size: .88rem; }
.kids-guard-meter {
  height: 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.kids-guard-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffbe0b, #06d6a0);
  transition: width .25s ease;
}
.kids-primary-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: none !important;
  transform: none !important;
}
.kids-primary-btn.ready-to-claim {
  animation: kidsBouncePulse 1.8s infinite;
}
@keyframes kidsBouncePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 #9322cc; }
  50% { transform: scale(1.02); box-shadow: 0 8px 16px rgba(131, 56, 236, 0.4), 0 6px 0 #9322cc; }
}

/* ── Big-Piece Puzzle for Petits Aventuriers (2-6 ans) ───────────────────── */
.kids-big-puzzle-arena {
  margin-top: 1rem;
}
.kids-big-puzzle-header {
  text-align: center;
  margin-bottom: 1.2rem;
}
.kids-big-puzzle-title {
  font-family: var(--kids-font);
  font-size: 1.35rem;
  color: var(--kids-gold);
  margin: 0 0 .3rem;
}
.kids-big-puzzle-desc {
  font-size: .95rem;
  color: var(--text-muted);
  margin: 0;
}
.kids-big-puzzle-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 440px;
  margin: 0 auto 1.5rem;
}
.kids-big-slot {
  aspect-ratio: 1;
  border: 3px dashed rgba(255,255,255,0.2);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  transition: all .25s ease;
}
.kids-big-slot.filled {
  border-style: solid;
  border-color: #06d6a0;
  background: rgba(6, 214, 160, 0.12);
  animation: slotPop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slotPop {
  0% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.slot-placed-icon {
  font-size: 3rem;
  line-height: 1;
}
.slot-placed-name {
  font-family: var(--kids-font);
  font-weight: 800;
  font-size: .88rem;
  color: var(--text);
  margin-top: .3rem;
}
.kids-big-pieces-tray {
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.kids-big-piece-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .9rem 1.2rem;
  border-radius: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: 0 6px 0 rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all .15s ease;
}
.kids-big-piece-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(0,0,0,0.3);
  border-color: var(--kids-gold);
}
.kids-big-piece-card:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.kids-big-piece-card.placed {
  opacity: .35;
  filter: grayscale(0.5);
  pointer-events: none;
  transform: none;
}
.kids-big-piece-card .piece-icon {
  font-size: 2.2rem;
}
.kids-big-piece-card .piece-label {
  font-family: var(--kids-font);
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
}
.kids-step-tab.toddler-hidden {
  display: none !important;
}

/* Light themes: the kids palette is drawn for a dark page; same hues, ink-dark. */
:is([data-theme="light"],[data-theme="paper"],[data-theme="app"]) .kids-mode-tag { color: #04785a; }
:is([data-theme="light"],[data-theme="paper"],[data-theme="app"]) .kids-mode-tag.highlight { color: #1d5fd1; }

/* Phone: tighter story header so the story starts above the fold */
@media (max-width: 640px) {
  .kids-header { padding: .8rem .85rem .6rem; }
  .kids-header-badge { font-size: .8rem; padding: .3rem .8rem; margin-bottom: .45rem; }
  .kids-header-title { font-size: 1.55rem; }
  .kids-header-sub { font-size: .95rem; line-height: 1.4; }
}

/* ── Phone (mobile-first pass 2): compact player, mascot strip, smaller names ── */
@media (max-width: 640px) {
  .kids-container { padding: 0 .7rem 3rem; overflow-x: hidden; }
  .kids-container *, .kids-card * { min-width: 0; }

  .kids-hud { padding: .6rem .8rem; gap: .5rem .8rem; border-radius: 16px; margin-bottom: .8rem; }
  .kids-hud-ring { width: 46px; height: 46px; }
  .kids-hud-rank-row { flex-wrap: wrap; gap: 0 .5rem; font-size: .76rem; }
  .kids-hud-stats { gap: .4rem; }
  .kids-hud-badge { padding: .25rem .55rem; font-size: .76rem; }

  /* mascots: one slim strip (avatars left, message right) instead of a tall stack */
  .kids-mascot-card { flex-direction: row; align-items: center; gap: .7rem; padding: .7rem .8rem; margin-bottom: .9rem; border-radius: 18px; }
  .kids-mascot-duo { flex-direction: column; gap: .2rem; }
  .kids-mascot-avatar { width: 44px; height: 44px; }
  .kids-mascot-avatar svg { width: 100%; height: 100%; }
  .kids-avatar-label, .kids-guide-chip, .kids-active-speaker-tag, .kids-mascot-sub { display: none; }
  .kids-mascot-dialogue { flex: 1 1 0; min-width: 0; }
  .kids-mascot-title { font-size: .92rem; margin-bottom: .15rem; }
  .kids-mascot-text { font-size: .82rem; line-height: 1.35; margin: 0; }

  /* steps: swipe row */
  .kids-steps-bar { gap: .4rem; margin: 0 -.7rem .9rem; padding: 0 .7rem .4rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .kids-steps-bar::-webkit-scrollbar { display: none; }
  .kids-step-tab { flex: 0 0 auto; padding: .5rem .8rem; font-size: .86rem; white-space: nowrap; }

  .kids-card { padding: .8rem; border-radius: 20px; }

  /* audio player */
  .kids-audio-bar { padding: .8rem; gap: .7rem; border-radius: 16px; }
  .kids-audio-main-controls { gap: .7rem; width: 100%; }
  .kids-play-btn { width: 54px; height: 54px; font-size: 1.4rem; flex: 0 0 auto; }
  .kids-audio-info { flex: 1 1 0; }
  .kids-audio-title { font-size: .9rem; }
  .kids-audio-time { font-size: .78rem; }
  .kids-scrubber-wrap, .kids-scrubber { width: 100%; }
  .kids-audio-settings { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .kids-voice-picker { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
  .kids-voice-picker .kids-select { flex: 1; width: 100%; font-size: .84rem; padding: .4rem .5rem; }
  .kids-chip-btn { font-size: .78rem; padding: .45rem .5rem; white-space: normal; }

  /* story scenes: names/tags small, text readable, jump button slim */
  .kids-story-book { gap: .8rem; margin-bottom: 1.2rem; }
  .kids-scene-card { padding: .85rem; border-radius: 16px; }
  .kids-scene-title { font-size: 1rem; margin-bottom: .7rem; gap: .4rem; }
  .kids-story-line { padding: .6rem .65rem; gap: .55rem; border-radius: 14px; }
  .story-line-jump { width: 34px; height: 34px; font-size: .9rem; flex: 0 0 auto; }
  .story-fr { font-size: 1.05rem; line-height: 1.45; }
  .story-en { font-size: .88rem; }
  .kids-speaker-tag { font-size: .68rem; padding: .12rem .5rem; margin-bottom: .25rem; letter-spacing: .02em; }
}

@media (max-width: 640px) {
  .kids-top-nav { padding: .55rem .7rem; gap: .5rem .6rem; margin: .5rem .6rem; border-radius: 18px; flex-wrap: wrap; align-items: center; }
  .kids-top-brand { font-size: 1rem; gap: .3rem; }
  .kids-brand-icon { font-size: 1.3rem; }
  .kids-top-controls { flex: 1 1 100%; display: flex; gap: .4rem; order: 3; }
  .kids-big-nav-pill { flex: 1 1 0; font-size: .8rem; padding: .45rem .5rem; border-radius: 999px; white-space: nowrap; }
  .kids-parent-corner { margin-left: auto; display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kids-parent-link, .kids-parent-gate-btn { flex: 0 0 auto; font-size: .7rem; padding: .3rem .55rem; white-space: nowrap; }
  .kids-header-badge { font-size: .74rem; }
}

/* ── Story library + parent tip (generated packs) ─────────────────────────── */
.kids-library { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .8rem .6rem; max-width: 1020px; margin: 0 auto; scrollbar-width: none; }
.kids-library::-webkit-scrollbar { display: none; }
.kids-lib-card { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); color: #f3eefc; font-family: var(--kids-font); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.kids-lib-card.current { background: rgba(255,190,11,.2); border-color: rgba(255,190,11,.6); color: #ffd166; }
.kids-pack-tip { display: flex; flex-direction: column; gap: .2rem; max-width: 980px; margin: 0 auto .8rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); color: #d8f5e2; font-size: .88rem; line-height: 1.45; }
.kids-pack-tip[hidden] { display: none; }
.speaker-c0 { background: rgba(59,130,246,.22); color: #93c5fd; border: 1px solid rgba(96,165,250,.5); }
.speaker-c1 { background: rgba(236,72,153,.2); color: #f9a8d4; border: 1px solid rgba(244,114,182,.5); }
.speaker-c2 { background: rgba(34,197,94,.18); color: #86efac; border: 1px solid rgba(74,222,128,.45); }
.speaker-c3 { background: rgba(168,85,247,.2); color: #d8b4fe; border: 1px solid rgba(192,132,252,.5); }

/* ── Mobile-first pass 3 (M599): stacked finish row, 40px+ tap targets, ≥ 12px text ── */
/* The listen guard and its button share .kids-stage-finish-row; side by side the card shrank to a sliver. */
.kids-stage-finish-row { flex-direction: column; align-items: center; }
.kids-stage-finish-row > .kids-listen-guard-card { align-self: stretch; box-sizing: border-box; }

@media (max-width: 640px) {
  .kids-stage-finish-row { margin-top: 1.2rem; }
  .kids-stage-finish-row > .kids-primary-btn { width: 100%; justify-content: center; text-align: center; font-size: 1.05rem; padding: .85rem 1rem; border-radius: 20px; }
  .kids-listen-guard-card { padding: .8rem .9rem; border-radius: 16px; }
  .kids-guard-header { flex-wrap: wrap; gap: .5rem .7rem; }
  .kids-guard-details { flex: 1 1 160px; }
  .kids-guard-title { font-size: .9rem; }

  .kids-big-nav-pill { min-height: 44px; }
  .kids-parent-link, .kids-parent-gate-btn { min-height: 40px; display: inline-flex; align-items: center; font-size: .78rem; }
  .kids-lib-card { min-height: 40px; }
  .kids-voice-picker .kids-select, .kids-chip-btn { min-height: 40px; }
  .kids-scrubber { height: 28px; }
  .story-line-jump { width: 40px; height: 40px; }
  .kids-speaker-tag { font-size: .75rem; }
  .kids-header-badge { font-size: .78rem; }
}

/* ── Touch devices of any width (M600): tablets keep the phone tap sizes ── */
@media (pointer: coarse) {
  .kids-parent-link, .kids-parent-gate-btn, .kids-lib-card { min-height: 40px; display: inline-flex; align-items: center; }
  .kids-big-nav-pill { min-height: 44px; }
  .kids-voice-picker .kids-select, .kids-chip-btn { min-height: 40px; }
  .kids-scrubber { height: 28px; }
  .story-line-jump { min-width: 40px; min-height: 40px; }
  .kids-speaker-tag { font-size: .75rem; }
}

/* M637: kids buttons now come from shared.css DS:TYPE (--soft / --playful / --play / --option); only tokens here. */
.kids-parent-gate-btn { --soft-bg: rgba(255,255,255,.08); --soft-border: rgba(255,255,255,.2); --soft-ink: #dcd6f7; text-decoration: none; }
.kids-parent-gate-btn:hover { border-color: var(--kids-gold); color: #fff; }
.kids-play-btn { --play-size: 72px; --play-bg: linear-gradient(135deg, var(--kids-gold), #ff8800); --play-ink: #1a1a2e; --play-border: 3px solid #ffe380; --play-shadow: 0 6px 0 #b35900, 0 8px 24px rgba(255,190,11,.45); }
.kids-speak-btn { --play-size: 44px; --play-bg: var(--kids-gold-soft); --play-ink: var(--kids-gold); --play-border: 1px solid rgba(255,190,11,.4); }
.kids-mode-select-btn { margin-top: auto; }
.kids-option-btn { --opt-accent: var(--kids-gold); --opt-bg: var(--surface); --opt-ok: var(--kids-green); --opt-ok-bg: var(--kids-green-soft); --opt-bad: #ff66aa; --opt-bad-edge: var(--kids-pink); --opt-bad-bg: var(--kids-pink-soft); border-radius: 16px; padding: 1rem 1.2rem; }
.kids-option-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,190,11,.2); }
.kids-voice-picker label { display: inline-flex; align-items: center; min-height: 44px; }