/* ============================================================
   EDUCA.CSS — Hub, Onboarding, Compagnon, Cartes, Collection
   ============================================================ */

/* === ONBOARDING === */
.onboard-step { display:none; flex-direction:column; gap:1rem; flex:1; }
.onboard-step.active { display:flex; }

.companion-stage {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  position: relative;
}
/* Kaya, le bébé jaguar (SVG injecté par js/kaya.js) */
.companion-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(246,173,55,0.22), rgba(246,173,55,0.05) 60%, transparent 75%);
  box-shadow: 0 0 40px rgba(245,158,11,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: companionIdle 4s ease-in-out infinite;
  position: relative;
}
.companion-placeholder svg { width: 94%; height: 94%; }

@keyframes companionIdle {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

.speech-bubble {
  background: white;
  color: #0F172A;
  border-radius: 16px;
  padding: 1rem 1.6rem 1rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  box-shadow: var(--shadow);
  cursor: pointer;
}
/* L'icône est en CSS (::after) pour ne pas être lue par la voix */
.speech-bubble::after {
  content: '🔊';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.85rem;
  opacity: 0.5;
}
.speech-bubble::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 30px;
  border: 10px solid transparent;
  border-bottom-color: white;
  border-top: none;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.choice-btn {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 1rem 0.5rem;
  /* Petites mains : cible tactile ≥ 44 px */
  min-height: 44px;
  min-width: 44px;
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.choice-btn:hover { border-color: var(--secondary); background: rgba(245,158,11,0.15); }
.choice-btn.selected {
  border-color: var(--secondary);
  background: rgba(245,158,11,0.2);
  box-shadow: 0 0 16px rgba(245,158,11,0.3);
}
.choice-icon { font-size: 2rem; }
.choice-label { font-size: 0.85rem; }

/* === HUB === */
.hub-header {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hub-companion-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.hub-companion-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(246,173,55,0.25), transparent 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: companionIdle 4s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(245,158,11,0.25);
}
.hub-companion-img svg { width: 100%; height: 100%; }
.hub-info { flex:1; }
.hub-name { font-size:1.1rem; font-weight:900; }
.hub-rank { font-size:0.85rem; color:#CBD5E1; margin-bottom:0.4rem; }
.hub-xp-track { height:8px; background:rgba(255,255,255,0.15); border-radius:10px; overflow:hidden; }
.hub-xp-fill  { height:100%; background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:10px; transition:width 0.8s ease; }
.hub-collection-btn {
  width: 52px; min-height: 44px; border-radius: var(--radius);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; gap: 2px; padding: 6px 4px;
}
.hub-collection-btn:hover { background:rgba(245,158,11,0.15); border-color:var(--secondary); }
.hub-coll-label {
  font-family: 'Orbitron', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.minigame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.minigame-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.minigame-card:hover {
  background: rgba(124,58,237,0.2);
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(124,58,237,0.3);
}
.minigame-icon {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.minigame-icon-builder {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 2rem;
}
.minigame-icon-builder span {
  width: 10px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0.8;
}
.minigame-icon-builder span:nth-child(1) { height: 60%; }
.minigame-icon-builder span:nth-child(2) { height: 85%; }
.minigame-icon-builder span:nth-child(3) { height: 100%; }
.minigame-title { font-weight:900; font-size:1rem; }
.minigame-desc  { font-size:0.8rem; color:#A7B4C9; }
.minigame-card .badge { margin-top:0.3rem; }

/* === CARD REVEAL OVERLAY === */
.card-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  backdrop-filter: blur(6px);
}
.card-overlay.hidden { display:none; }

/* === CARTE VIVANTE — 3D, halo de rareté, holographie ===
   La carte est la seule source de lumière de la scène : elle flotte,
   suit le doigt (ou le gyroscope) et son reflet glisse dessus. */
.card-overlay { perspective: 1100px; }
.card-overlay > * { position: relative; z-index: 1; }

/* Halo coloré derrière la carte — la couleur dit la rareté */
.card-overlay::before {
  content: '';
  position: absolute;
  left: 50%; top: 44%;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  background: radial-gradient(circle, var(--aura, #7C3AED) 0%, transparent 62%);
  opacity: 0.38;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
/* Rayons dorés tournants — réservés aux cartes Légendaires */
.card-overlay.legendary::after {
  content: '';
  position: absolute;
  left: 50%; top: 44%;
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,200,60,0.14) 0deg 9deg, transparent 9deg 60deg);
  animation: raysSpin 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

.card-wrap {
  perspective: 900px;
  width: 220px; height: 308px;
  cursor: pointer;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ryw, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  will-change: transform;
}
/* L'anneau de focus dénature la carte — toute la scène est déjà le bouton */
.card-wrap:focus-visible { outline: none; }
/* Au repos, la carte flotte doucement */
.card-wrap.idle { animation: cardFloat 5.5s ease-in-out infinite; }
@keyframes cardFloat {
  0%,100% { transform: rotateX(4deg) rotateY(-7deg); }
  50%     { transform: rotateX(-4deg) rotateY(7deg); }
}
.card-inner {
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.card-inner.flipped { transform: rotateY(180deg); }
.card-face {
  position:absolute; inset:0; border-radius:18px;
  backface-visibility:hidden;
}
.card-back {
  background: linear-gradient(160deg, #0e0c1e 0%, #181030 100%);
  border: 1.5px solid rgba(124,58,237,0.5);
  display: flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem;
}
.card-back-logo { font-size:3.5rem; }
.card-back-text {
  font-family: 'Orbitron', monospace;
  font-weight:900; font-size:1rem; letter-spacing:4px; opacity:0.6;
}
.card-front { transform: rotateY(180deg); overflow:hidden; }
.card-front > .card { width:100% !important; height:100% !important; }

.card-hint { color:rgba(255,255,255,0.75); font-size:0.9rem; }

/* === HOLOGRAPHIE — le reflet qui suit le doigt === */
.card .holo, .card .glare-fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.card .holo {
  z-index: 5;
  background-image: linear-gradient(115deg,
    transparent 22%,
    var(--holo1, rgba(255,255,255,.25)) 37%,
    var(--holo2, rgba(255,255,255,.40)) 47%,
    var(--holo3, rgba(255,255,255,.30)) 53%,
    var(--holo2, rgba(255,255,255,.40)) 63%,
    transparent 78%);
  background-size: 240% 240%;
  background-position: var(--posx, 50%) var(--posy, 50%);
  mix-blend-mode: color-dodge;
  filter: brightness(1.05) contrast(1.1) saturate(1.35);
}
.card .glare-fx {
  z-index: 6;
  background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%),
    rgba(255,255,255,0.50) 4%, rgba(255,255,255,0.10) 26%, transparent 60%);
  mix-blend-mode: overlay;
}
/* La lumière s'allume à la révélation, avec un balayage automatique
   pour que l'enfant découvre l'effet sans savoir qu'il faut bouger */
.card-wrap.revealed .holo {
  opacity: var(--holo-power, 0.55);
  animation: holoSweep 2.6s ease 0.4s;
}
.card-wrap.revealed .glare-fx { opacity: 0.85; }
@keyframes holoSweep {
  0%   { background-position: 115% 115%; }
  100% { background-position: var(--posx, 50%) var(--posy, 50%); }
}

/* Teinte du reflet par famille — la rareté se voit, sans lire :
   Lettres = vernis satiné · Exploits = holo violet ·
   Héros = aurore turquoise · Légendes = prisme complet */
.theme-blue   { --holo1:rgba(122,170,255,.55); --holo2:rgba(255,255,255,.32); --holo3:rgba(74,144,255,.62); }
.theme-teal   { --holo1:rgba(80,230,215,.55);  --holo2:rgba(255,255,255,.32); --holo3:rgba(26,223,204,.62); }
.theme-purple { --holo1:rgba(190,140,255,.55); --holo2:rgba(255,255,255,.32); --holo3:rgba(160,96,255,.62); }
.theme-red    { --holo1:rgba(255,120,130,.55); --holo2:rgba(255,255,255,.32); --holo3:rgba(255,80,96,.62); }
.theme-amber  { --holo1:rgba(255,205,100,.55); --holo2:rgba(255,255,255,.32); --holo3:rgba(255,184,48,.62); }
.theme-green  { --holo1:rgba(110,225,110,.55); --holo2:rgba(255,255,255,.32); --holo3:rgba(64,200,64,.62); }
.spc-commun   { --holo1:rgba(160,96,255,.60);  --holo2:rgba(96,160,255,.55);  --holo3:rgba(255,255,255,.50); --holo-power:.70; }
.spc-rare     { --holo1:rgba(26,223,204,.65);  --holo2:rgba(120,255,170,.55); --holo3:rgba(80,180,255,.55);  --holo-power:.78; }
.spc-epic     { --holo1:rgba(255,90,90,.65);   --holo2:rgba(255,215,0,.70);   --holo3:rgba(0,255,200,.60);   --holo-power:.82; }

/* === SVG CARD THEMES (from cards-design) === */
.card {
  border-radius: 18px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer;
  font-family: 'Rajdhani', 'Nunito', sans-serif;
}
.theme-blue   { background:linear-gradient(160deg,#060d1f 0%,#0a1530 100%); border:1.5px solid #2a5fc0; }
.theme-teal   { background:linear-gradient(160deg,#060f0e 0%,#0a1e1c 100%); border:1.5px solid #0f7a6a; }
.theme-purple { background:linear-gradient(160deg,#0e060f 0%,#1a0d1e 100%); border:1.5px solid #7030b0; }
.theme-red    { background:linear-gradient(160deg,#0f0606 0%,#1e0a0a 100%); border:1.5px solid #b02030; }
.theme-amber  { background:linear-gradient(160deg,#0f0c04 0%,#1e1608 100%); border:1.5px solid #b07010; }
.theme-green  { background:linear-gradient(160deg,#060f06 0%,#0a1e0a 100%); border:1.5px solid #207a20; }
.card-glow { position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.theme-blue   .card-glow { box-shadow:inset 0 0 40px rgba(42,95,192,0.2); }
.theme-teal   .card-glow { box-shadow:inset 0 0 40px rgba(15,122,106,0.2); }
.theme-purple .card-glow { box-shadow:inset 0 0 40px rgba(112,48,176,0.2); }
.theme-red    .card-glow { box-shadow:inset 0 0 40px rgba(176,32,48,0.2); }
.theme-amber  .card-glow { box-shadow:inset 0 0 40px rgba(176,112,16,0.2); }
.theme-green  .card-glow { box-shadow:inset 0 0 40px rgba(32,122,32,0.2); }
.card-top { display:flex; justify-content:space-between; align-items:center; padding:10px 12px 0; }
.cat-tag {
  font-family:'Orbitron',monospace; font-size:7px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px;
}
.theme-blue   .cat-tag { background:rgba(42,95,192,0.3); color:#6aabff; border:0.5px solid rgba(42,95,192,0.5); }
.theme-teal   .cat-tag { background:rgba(15,122,106,0.3); color:#4addc8; border:0.5px solid rgba(15,122,106,0.5); }
.theme-purple .cat-tag { background:rgba(112,48,176,0.3); color:#b87aff; border:0.5px solid rgba(112,48,176,0.5); }
.theme-red    .cat-tag { background:rgba(176,32,48,0.3); color:#ff7a8a; border:0.5px solid rgba(176,32,48,0.5); }
.theme-amber  .cat-tag { background:rgba(176,112,16,0.3); color:#ffcc5a; border:0.5px solid rgba(176,112,16,0.5); }
.theme-green  .cat-tag { background:rgba(32,122,32,0.3); color:#6adf6a; border:0.5px solid rgba(32,122,32,0.5); }
.card-num { font-family:'Orbitron',monospace; font-size:8px; font-weight:700; color:rgba(255,255,255,0.25); }
.art-zone { flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
.letter-svg { width:140px; height:130px; }
.divider { height:0.5px; margin:0 12px; opacity:0.25; }
.theme-blue   .divider { background:#2a5fc0; }
.theme-teal   .divider { background:#0f7a6a; }
.theme-purple .divider { background:#7030b0; }
.theme-red    .divider { background:#b02030; }
.theme-amber  .divider { background:#b07010; }
.theme-green  .divider { background:#207a20; }
.card-bottom { padding:8px 12px 10px; }
.letter-name {
  font-family:'Orbitron',monospace; font-size:13px; font-weight:900;
  color:#fff; letter-spacing:0.05em; line-height:1.1;
}
.letter-word { font-size:10px; font-weight:500; color:rgba(255,255,255,0.45); margin-top:2px; }
.card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.rarity { display:flex; gap:4px; align-items:center; }
.dot { width:7px; height:7px; border-radius:50%; }
.dot-active-blue   { background:#4a90ff; }
.dot-active-teal   { background:#1adfcc; }
.dot-active-purple { background:#a060ff; }
.dot-active-red    { background:#ff5060; }
.dot-active-amber  { background:#ffb830; }
.dot-active-green  { background:#40c840; }
.dot-off { background:rgba(255,255,255,0.12); }
.xp-badge { font-family:'Orbitron',monospace; font-size:8px; font-weight:700; color:rgba(255,255,255,0.3); }
.xp-badge span { color:rgba(255,255,255,0.65); }
.pwr-badge { font-family:'Orbitron',monospace; font-size:8px; font-weight:700; color:rgba(255,255,255,0.25); }
.corner-tl, .corner-br { position:absolute; width:14px; height:14px; pointer-events:none; }
.corner-tl { top:6px; left:6px; border-top:1.5px solid; border-left:1.5px solid; border-radius:4px 0 0 0; }
.corner-br { bottom:6px; right:6px; border-bottom:1.5px solid; border-right:1.5px solid; border-radius:0 0 4px 0; }
.theme-blue   .corner-tl,.theme-blue   .corner-br { border-color:rgba(74,144,255,0.5); }
.theme-teal   .corner-tl,.theme-teal   .corner-br { border-color:rgba(26,223,204,0.5); }
.theme-purple .corner-tl,.theme-purple .corner-br { border-color:rgba(160,96,255,0.5); }
.theme-red    .corner-tl,.theme-red    .corner-br { border-color:rgba(255,80,96,0.5); }
.theme-amber  .corner-tl,.theme-amber  .corner-br { border-color:rgba(255,184,48,0.5); }
.theme-green  .corner-tl,.theme-green  .corner-br { border-color:rgba(64,200,64,0.5); }

/* === CARTES SPÉCIALES (Exploits / Héros / Légendes) === */
.spc-commun {
  background: linear-gradient(160deg, #0e060f 0%, #1a0d1e 60%, #0e060f 100%);
  border: 1.5px solid #7030b0;
}
.spc-commun .card-glow   { box-shadow: inset 0 0 50px rgba(112,48,176,0.22); }
.spc-commun .cat-tag     { background: rgba(112,48,176,0.3); color: #b87aff; border: 0.5px solid rgba(112,48,176,0.5); }
.spc-commun .corner-tl, .spc-commun .corner-br { border-color: rgba(160,96,255,0.5); }
.spc-commun .divider     { background: #7030b0; }
.spc-commun .letter-name { text-shadow: 0 0 14px rgba(160,96,255,0.35); }
.spc-dot-commun          { background: #a060ff; }

.spc-rare {
  background: linear-gradient(160deg, #060f0e 0%, #0a1e1c 60%, #060f0e 100%);
  border: 1.5px solid #0f7a6a;
}
.spc-rare .card-glow   { box-shadow: inset 0 0 50px rgba(15,122,106,0.25); }
.spc-rare .cat-tag     { background: rgba(15,122,106,0.3); color: #4addc8; border: 0.5px solid rgba(15,122,106,0.5); }
.spc-rare .corner-tl, .spc-rare .corner-br { border-color: rgba(26,223,204,0.5); }
.spc-rare .divider     { background: #0f7a6a; }
.spc-rare .letter-name { text-shadow: 0 0 14px rgba(26,223,204,0.35); }
.spc-dot-rare          { background: #1adfcc; }

.spc-epic {
  background: linear-gradient(160deg, #0f0a02 0%, #1e1408 60%, #0f0a02 100%);
  border: 1.5px solid #c07800;
  animation: epicPulse 2.5s ease-in-out infinite;
}
.spc-epic .card-glow   { box-shadow: inset 0 0 60px rgba(192,120,0,0.28); }
.spc-epic .cat-tag     { background: rgba(192,120,0,0.3); color: #ffcc5a; border: 0.5px solid rgba(192,120,0,0.5); }
.spc-epic .corner-tl, .spc-epic .corner-br { border-color: rgba(255,184,48,0.6); }
.spc-epic .divider     { background: #c07800; }
.spc-epic .letter-name { text-shadow: 0 0 14px rgba(255,184,48,0.45); }
.spc-dot-epic          { background: #ffb830; }

@keyframes epicPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,184,48,0); }
  50%     { box-shadow: 0 0 28px rgba(255,184,48,0.35); }
}

.art-svg { width: 140px; height: 130px; }

/* === COLLECTION === */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.3rem;
}
.coll-item {
  border-radius: 12px;
  padding: 0.6rem 0.3rem;
  min-height: 44px;
  text-align: center;
  transition: transform 0.2s;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  background: rgba(255,255,255,0.04);
}
.coll-item:hover { transform:scale(1.08); }
.coll-item.locked { opacity:0.2; filter:grayscale(1); }
.coll-item.theme-blue   { background:rgba(74,144,255,0.12);  border-color:rgba(74,144,255,0.35); }
.coll-item.theme-teal   { background:rgba(26,223,204,0.12);  border-color:rgba(26,223,204,0.35); }
.coll-item.theme-purple { background:rgba(160,96,255,0.12);  border-color:rgba(160,96,255,0.35); }
.coll-item.theme-red    { background:rgba(255,80,96,0.12);   border-color:rgba(255,80,96,0.35);  }
.coll-item.theme-amber  { background:rgba(255,184,48,0.12);  border-color:rgba(255,184,48,0.35); }
.coll-item.theme-green  { background:rgba(64,200,64,0.12);   border-color:rgba(64,200,64,0.35);  }
.coll-item.spc-commun  { background:rgba(160,96,255,0.14);  border-color:rgba(160,96,255,0.4);  }
.coll-item.spc-rare    { background:rgba(26,223,204,0.14);  border-color:rgba(26,223,204,0.4);  }
.coll-item.spc-epic    { background:rgba(255,184,48,0.14);  border-color:rgba(255,184,48,0.45); }
.coll-letter {
  font-family: 'Orbitron', monospace;
  font-size: 1.3rem; font-weight: 900;
  color: rgba(255,255,255,0.85);
}
.coll-name  { font-size:0.6rem; font-weight:700; margin-top:0.3rem; opacity:0.6; letter-spacing:0.03em; }