/* ── Area page layout ── */
.area-hero{
  position:relative;overflow:hidden;
  border-radius:2rem;padding:2rem 2rem 1.75rem;
  display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;
  border:1px solid rgba(99,102,241,0.14);
}
.area-hero::before{
  content:'';position:absolute;inset:0;
  background:var(--area-bg,rgba(99,102,241,0.06));
  z-index:0;
}
.area-hero>*{position:relative;z-index:1}
.area-hero-icon{width:4.5rem;height:4.5rem;border-radius:1.5rem;display:flex;align-items:center;justify-content:center;font-size:2.2rem;flex-shrink:0;background:rgba(255,255,255,0.7);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.area-hero h1{margin:0 0 .3rem;font-size:clamp(1.3rem,2vw,1.8rem);color:var(--accent-strong)}
.area-hero p{margin:0;font-size:.9rem;color:var(--text-muted)}

/* ── Grade selector ── */
.grade-selector-row{
  background:#fff;border:1px solid rgba(59,130,246,0.1);border-radius:1.5rem;
  padding:1.25rem 1.5rem;box-shadow:0 8px 20px rgba(15,23,42,0.04);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.grade-selector-label{font-size:.88rem;font-weight:700;color:var(--text-muted);white-space:nowrap}
.grade-btns-row{display:flex;gap:.5rem;flex-wrap:wrap}
.grade-btn-juego{
  padding:.5rem 1.1rem;border-radius:999px;
  border:1.5px solid rgba(99,102,241,0.2);background:#fff;
  color:var(--text-muted);font-size:.88rem;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.grade-btn-juego:hover{border-color:var(--accent);color:var(--accent-strong);background:rgba(99,102,241,0.05)}
.grade-btn-juego.active{
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  border-color:transparent;color:#fff;font-weight:800;
  box-shadow:0 4px 14px rgba(124,58,237,0.3);
  transform:scale(1.05);
}

/* ── Game cards grid ── */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.game-card{
  background:#fff;border:1px solid rgba(59,130,246,0.1);
  border-radius:1.75rem;padding:1.4rem;
  display:flex;flex-direction:column;gap:.75rem;
  box-shadow:0 8px 24px rgba(15,23,42,0.05);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  animation:fadeInUp .35s ease both;
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.game-card:nth-child(1){animation-delay:.05s}
.game-card:nth-child(2){animation-delay:.1s}
.game-card:nth-child(3){animation-delay:.15s}
.game-card:nth-child(4){animation-delay:.2s}
.game-card:nth-child(5){animation-delay:.25s}
.game-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 20px 48px rgba(15,23,42,0.12)}
.game-icon-card{width:3.2rem;height:3.2rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.game-card h4{margin:0;font-size:1rem;color:var(--accent-strong);font-weight:800}
.game-card p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.6;flex:1}
.game-meta{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}
.game-badge{padding:.3rem .75rem;border-radius:999px;background:rgba(99,102,241,0.08);color:var(--accent-strong);font-weight:700;font-size:.78rem}
.grade-placeholder{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:.95rem}

/* ── Modal ── */
.game-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
.game-overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.game-modal{
  background:#fff;border-radius:2rem;width:100%;max-width:680px;
  max-height:90vh;overflow-y:auto;padding:2rem;
  box-shadow:0 40px 80px rgba(15,23,42,0.25);
  display:grid;gap:1.25rem;
  animation:slideUp .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.game-modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid rgba(148,163,184,0.12)}
.game-modal-header h3{margin:0;font-size:1.15rem;color:var(--accent-strong);font-weight:800}
.game-close{
  background:rgba(148,163,184,0.12);border:none;font-size:1.1rem;
  cursor:pointer;color:var(--text-muted);
  width:2.2rem;height:2.2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.game-close:hover{background:rgba(239,68,68,0.1);color:#ef4444;transform:scale(1.1)}

/* ── Quiz ── */
.quiz-bar{height:8px;border-radius:999px;background:rgba(99,102,241,0.1);overflow:hidden;margin-bottom:.25rem}
.quiz-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#2563eb);transition:width .5s cubic-bezier(.4,0,.2,1)}
.quiz-meta{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-muted);font-weight:600;margin-bottom:.5rem}
.quiz-q{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.65;padding:.75rem 1rem;background:rgba(99,102,241,0.04);border-radius:1rem;border-left:3px solid var(--accent)}
.quiz-opts{display:grid;gap:.6rem;margin-top:.25rem}
.quiz-opt{
  padding:.9rem 1.1rem;border:1.5px solid rgba(99,102,241,0.15);border-radius:1rem;
  background:#f8fbff;cursor:pointer;font-size:.93rem;color:var(--text);
  text-align:left;transition:all .18s;font-weight:500;
  display:flex;align-items:center;gap:.75rem;
}
.quiz-opt::before{content:attr(data-letter);width:1.6rem;height:1.6rem;border-radius:.5rem;background:rgba(99,102,241,0.1);color:var(--accent-strong);font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.quiz-opt:hover:not(:disabled){border-color:var(--accent);background:rgba(99,102,241,0.06);transform:translateX(3px)}
.quiz-opt.correct{border-color:#10b981;background:rgba(16,185,129,0.1);color:#065f46;font-weight:700}
.quiz-opt.correct::before{background:#10b981;color:#fff}
.quiz-opt.wrong{border-color:#ef4444;background:rgba(239,68,68,0.08);color:#991b1b}
.quiz-opt.wrong::before{background:#ef4444;color:#fff}
.quiz-opt:disabled{cursor:default}
.quiz-fb{font-size:.92rem;font-weight:700;padding:.7rem 1.1rem;border-radius:1rem}
.quiz-fb.ok{background:rgba(16,185,129,0.1);color:#065f46;border:1px solid rgba(16,185,129,0.2)}
.quiz-fb.bad{background:rgba(239,68,68,0.08);color:#991b1b;border:1px solid rgba(239,68,68,0.15)}
.score-card{text-align:center;padding:1.5rem;background:linear-gradient(135deg,rgba(124,58,237,0.07),rgba(37,99,235,0.04));border-radius:1.5rem;border:1px solid rgba(99,102,241,0.14)}
.score-big{font-size:3.5rem;font-weight:900;color:var(--accent-strong);line-height:1}
.timer-c{width:2.8rem;height:2.8rem;border-radius:50%;border:3px solid rgba(99,102,241,0.2);display:flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:800;color:var(--accent-strong);flex-shrink:0;transition:all .3s}
.timer-c.urgent{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,0.06);animation:pulse .5s infinite}

/* ── Flashcards ── */
.fc-scene{perspective:800px;width:100%;max-width:460px;margin:0 auto;height:240px;cursor:pointer}
.fc-card-wrap{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);border-radius:1.75rem}
.fc-card-wrap.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:1.75rem;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;box-shadow:0 16px 36px rgba(15,23,42,0.1)}
.fc-front{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border:none}
.fc-back{background:#fff;color:var(--accent-strong);transform:rotateY(180deg);border:2px solid rgba(99,102,241,0.15)}
.fc-hint{font-size:.78rem;color:rgba(255,255,255,0.7);margin-bottom:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.fc-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:.5rem}
.fc-nav button{padding:.6rem 1.4rem;border-radius:999px;border:1.5px solid rgba(99,102,241,0.2);background:#fff;color:var(--accent-strong);font-weight:700;cursor:pointer;transition:all .2s}
.fc-nav button:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(124,58,237,0.3)}
.fc-nav button:disabled{opacity:.35;cursor:default}

/* ── Ordenar ── */
.sort-list{display:grid;gap:.55rem}
.sort-item{padding:.8rem 1.1rem;background:#f8fbff;border:1.5px solid rgba(99,102,241,0.14);border-radius:1rem;cursor:grab;font-size:.92rem;display:flex;align-items:center;gap:.75rem;transition:box-shadow .18s;user-select:none}
.sort-item.dragging{opacity:.45;box-shadow:0 8px 20px rgba(99,102,241,0.2)}
.sort-item.dragover{border-color:var(--accent);background:rgba(99,102,241,0.06)}

/* ── Fórmulas ── */
.frow{background:#f8fbff;border:1px solid rgba(99,102,241,0.1);border-radius:1.25rem;padding:1rem 1.25rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.fpart{font-size:1rem;font-weight:700;color:var(--accent-strong);font-family:monospace}
.finput{border:1.5px solid rgba(99,102,241,0.25);border-radius:.65rem;padding:.4rem .75rem;font-size:.95rem;font-family:monospace;font-weight:700;color:var(--accent-strong);width:110px;text-align:center;outline:none;background:#fff}
.finput:focus{border-color:var(--accent)}
.finput.ok{border-color:#10b981;background:rgba(16,185,129,0.07);color:#065f46}
.finput.bad{border-color:#ef4444;background:rgba(239,68,68,0.06);color:#991b1b}

/* ── Verdadero/Falso ── */
.vf-card{background:#fff;border:1.5px solid rgba(99,102,241,0.12);border-radius:1.5rem;padding:1.75rem;text-align:center}
.vf-statement{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.65;margin-bottom:1.25rem;padding:.85rem 1rem;background:rgba(99,102,241,0.04);border-radius:1rem}
.vf-btns{display:flex;gap:1rem;justify-content:center}
.vf-btn{padding:.8rem 2.2rem;border-radius:999px;border:none;font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s}
.vf-btn.true-btn{background:rgba(16,185,129,0.1);color:#065f46;border:2px solid #10b981}
.vf-btn.false-btn{background:rgba(239,68,68,0.08);color:#991b1b;border:2px solid #ef4444}
.vf-btn:hover:not(:disabled){transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,0.12)}
.vf-btn.true-btn:hover:not(:disabled){background:#10b981;color:#fff}
.vf-btn.false-btn:hover:not(:disabled){background:#ef4444;color:#fff}
.vf-btn:disabled{opacity:.5;cursor:default}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ── Relaciona columnas ── */
.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rel-btn {
  padding: .65rem .85rem; border-radius: .85rem;
  border: 1.5px solid rgba(99,102,241,0.2);
  background: #f8fbff; font-size: .82rem; font-weight: 700;
  color: var(--accent-strong); text-align: left; cursor: pointer;
  transition: all .18s;
}
.rel-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(99,102,241,0.06); }
.rel-btn.selected { border-color: var(--accent); background: rgba(99,102,241,0.1); }
.rel-btn.matched  { border-color: #10b981; background: rgba(16,185,129,0.1); color: #065f46; }

/* ── Memoria ── */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.mem-card {
  aspect-ratio: 1;
  border-radius: 1rem;
  border: 1.5px solid rgba(99,102,241,0.18);
  background: #f8fbff;
  font-size: .72rem; font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  padding: .25rem;
  line-height: 1.2;
  word-break: break-word;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.mem-card.flipped  { border-color: var(--accent); background: rgba(99,102,241,0.08); color: var(--accent-strong); }
.mem-card.matched  { border-color: #10b981; background: rgba(16,185,129,0.12); color: #065f46; }

/* ── Ahorcado letras ── */
.hang-alpha {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-bottom: 1rem;
}
.hang-letter {
  width: 2.2rem; height: 2.2rem; border-radius: .5rem;
  border: 1.5px solid rgba(99,102,241,0.2);
  background: #f8fbff; font-weight: 700; font-size: .85rem;
  cursor: pointer; transition: all .15s;
}
.hang-letter:hover:not(:disabled) { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.hang-letter.correct { background: rgba(16,185,129,0.15); border-color: #10b981; color: #065f46; }
.hang-letter.wrong   { background: rgba(239,68,68,0.1); border-color: #ef4444; color: #991b1b; }
.hang-letter:disabled { cursor: default; }

/* ── Word display ── */
.hang-word {
  font-size: 1.6rem; font-family: monospace;
  letter-spacing: .35rem; color: var(--text);
  min-height: 2.5rem; text-align: center;
}