/* ════════════════════════════════════════════════
   QUIDDITCH DE HABILIDAD — CSS
   ════════════════════════════════════════════════ */

.quidditch-main { position:relative; overflow-x:hidden; min-height:100vh; }

/* ── HERO ── */
.qd-hero {
  position:relative; z-index:1;
  padding:7rem 0 4rem; text-align:center;
  border-bottom:1px solid var(--border-subtle);
  background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(212,168,50,.06) 0%,transparent 65%);
}
.qd-eyebrow {
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--font-ui); font-size:1.1rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:2rem;
}
.qd-eyebrow__line { display:block; width:4rem; height:1px; }
.qd-eyebrow__line:first-child { background:linear-gradient(90deg,transparent,var(--gold-500)); }
.qd-eyebrow__line:last-child  { background:linear-gradient(90deg,var(--gold-500),transparent); }
.qd-hero__title {
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,6.5rem);
  line-height:1.1; color:var(--text-bright); margin-bottom:1.5rem;
}
.qd-hero__title em {
  font-style:normal;
  background:linear-gradient(135deg,var(--gold-200),var(--gold-500));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.qd-hero__sub {
  font-size:1.8rem; color:var(--text-muted);
  max-width:52rem; margin:0 auto 3rem; line-height:1.65;
}

/* Stats hero */
.qd-stats {
  display:inline-flex; gap:3rem;
  background:var(--ink-800); border:1px solid var(--border-gold);
  border-radius:var(--r-lg); padding:1.4rem 3rem;
  box-shadow:var(--glow-gold);
}
.qd-stat { text-align:center; }
.qd-stat__val {
  display:block; font-family:var(--font-display);
  font-size:2.8rem; color:var(--gold-300); line-height:1; margin-bottom:.3rem;
}
.qd-stat__lbl {
  font-family:var(--font-ui); font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}

/* ── SECCIÓN JUEGO ── */
.qd-game-section { position:relative; z-index:1; padding:4rem 0 6rem; }

/* ── PANTALLAS ── */
.qd-screen { display:none; }
.qd-screen.is-active { display:block; }

/* ── PANTALLA INICIO ── */
.qd-start-card {
  max-width:680px; margin:0 auto;
  background:var(--ink-800); border:1px solid var(--border-gold);
  border-radius:var(--r-lg); padding:4rem 3.5rem; text-align:center;
  box-shadow:var(--glow-gold),var(--shadow-card);
}
.qd-start-icon { font-size:6rem; margin-bottom:1.5rem; display:block;
  animation:icon-float 3s ease-in-out infinite; }
@keyframes icon-float {
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%    {transform:translateY(-14px) rotate(3deg);}
}
.qd-start-title {
  font-family:var(--font-heading); font-size:2.8rem;
  color:var(--text-bright); margin-bottom:1rem;
}
.qd-start-desc { font-size:1.75rem; color:var(--text-muted); line-height:1.65; margin-bottom:2.5rem; }
.qd-rules {
  list-style:none; text-align:left; margin-bottom:3rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.qd-rules li { display:flex; align-items:flex-start; gap:1rem; font-size:1.6rem; color:var(--text-muted); }
.qd-rules li::before { content:'🏆'; flex-shrink:0; font-size:1.4rem; }

/* Dificultad */
.qd-difficulty {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.5rem;
}
.qd-diff-btn {
  font-family:var(--font-ui); font-size:1.1rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.8rem 2.2rem; border-radius:100px;
  border:1px solid var(--border-default); background:var(--ink-800);
  color:var(--text-muted); cursor:pointer; transition:all .2s;
}
.qd-diff-btn:hover { border-color:var(--border-gold); color:var(--gold-300); }
.qd-diff-btn.is-active {
  background:rgba(212,168,50,.1); border-color:var(--gold-400);
  color:var(--gold-200); box-shadow:var(--glow-gold);
}

/* ── CANVAS WRAPPER ── */
.qd-canvas-wrap {
  max-width:820px; margin:0 auto;
  position:relative;
}
.qd-canvas-wrap canvas {
  display:block; width:100%; border-radius:var(--r-lg);
  border:1px solid var(--border-gold);
  box-shadow:var(--glow-gold),var(--shadow-card);
  cursor:none; /* usamos cursor custom en canvas */
  touch-action:none;
}

/* HUD superpuesto al canvas */
.qd-hud {
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:1.2rem 1.6rem;
  pointer-events:none;
}
.qd-hud__left, .qd-hud__right { display:flex; flex-direction:column; gap:.4rem; }
.qd-hud__score {
  font-family:var(--font-display); font-size:3rem;
  color:var(--gold-300); line-height:1;
  text-shadow:0 0 12px rgba(212,168,50,.6);
}
.qd-hud__label {
  font-family:var(--font-ui); font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.qd-hud__lives {
  font-size:1.8rem; letter-spacing:.2rem;
  text-shadow:0 0 8px rgba(220,38,38,.5);
}
.qd-hud__timer {
  font-family:var(--font-display); font-size:2.4rem;
  color:var(--text-bright); text-align:right; line-height:1;
  text-shadow:0 0 10px rgba(30,216,200,.4);
}
.qd-hud__timer.danger { color:#f87171; text-shadow:0 0 12px rgba(239,68,68,.6); }
.qd-hud__combo {
  font-family:var(--font-ui); font-size:1rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-300); text-align:right;
}

/* Controles móvil */
.qd-mobile-controls {
  display:none;
  justify-content:center; gap:1.5rem; margin-top:1.6rem;
}
@media(max-width:700px){ .qd-mobile-controls { display:flex; } }
.qd-ctrl-btn {
  width:7rem; height:7rem; border-radius:50%;
  background:rgba(212,168,50,.1); border:2px solid var(--border-gold);
  color:var(--gold-300); font-size:2.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.qd-ctrl-btn:active { background:rgba(212,168,50,.25); transform:scale(.92); }

/* ── PANTALLA RESULTADO ── */
.qd-result-card {
  max-width:680px; margin:0 auto; text-align:center;
  animation:chq-slide-in .4s ease;
}
.qd-result-icon {
  font-size:7rem; display:block; margin-bottom:1rem;
  animation:icon-float 3s ease-in-out infinite;
}
.qd-result-title {
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5vw,5rem); margin-bottom:.5rem;
}
.qd-result-title.win  { color:var(--gold-300); }
.qd-result-title.lose { color:#f87171; }
.qd-result-sub { font-size:1.8rem; color:var(--text-muted); margin-bottom:3rem; line-height:1.6; }

.qd-result-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
  margin-bottom:2.5rem;
}
.qd-result-stat {
  background:var(--ink-800); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:1.6rem 1rem; text-align:center;
}
.qd-result-stat__val {
  font-family:var(--font-display); font-size:3rem;
  color:var(--gold-300); display:block; line-height:1; margin-bottom:.4rem;
}
.qd-result-stat__lbl {
  font-family:var(--font-ui); font-size:1rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint);
}

.qd-pts-earned {
  display:inline-flex; flex-direction:column; align-items:center;
  background:var(--ink-800); border:1px solid var(--border-gold);
  border-radius:var(--r-lg); padding:2rem 4rem; margin-bottom:2.5rem;
  box-shadow:var(--glow-gold);
}
.qd-pts-earned__num {
  font-family:var(--font-display); font-size:5rem;
  color:var(--gold-300); line-height:1;
  animation:pts-pop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pts-pop { 0%{transform:scale(0);opacity:0;} 100%{transform:scale(1);opacity:1;} }
.qd-pts-earned__lbl {
  font-family:var(--font-ui); font-size:1.1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:.4rem;
}
.qd-pts-earned__house { font-family:var(--font-ui); font-size:1.1rem; color:var(--gold-400); margin-top:.3rem; }

.qd-result-actions { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; }

/* Highscore banner */
.qd-new-record {
  display:inline-flex; align-items:center; gap:.8rem;
  background:rgba(212,168,50,.1); border:1px solid var(--border-gold);
  border-radius:100px; padding:.6rem 1.8rem; margin-bottom:1.5rem;
  font-family:var(--font-ui); font-size:1.1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300);
  animation:pts-pop .5s ease;
}

/* Toast */
.qd-toast {
  position:fixed; bottom:3rem; right:3rem;
  background:var(--ink-800); border:1px solid var(--border-gold);
  border-radius:var(--r-lg); padding:1.4rem 2rem;
  box-shadow:var(--glow-gold),var(--shadow-lift);
  z-index:9999; transform:translateX(130%);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1); max-width:260px;
}
.qd-toast.show { transform:translateX(0); }
.qd-toast__pts { font-family:var(--font-display); font-size:2.6rem; color:var(--gold-300); display:block; }
.qd-toast__msg { font-family:var(--font-ui); font-size:1.05rem; letter-spacing:.1em; color:var(--text-muted); }

/* FAQ */
.qd-faq { margin-top:5rem; padding-top:4rem; border-top:1px solid var(--border-subtle); max-width:820px; margin-left:auto; margin-right:auto; }
.qd-faq__list { display:flex; flex-direction:column; gap:1.4rem; }
.qd-faq__item { background:var(--ink-800); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:2rem 2.4rem; }
.qd-faq__item dt { font-family:var(--font-heading); font-size:1.65rem; color:var(--text-bright); margin-bottom:.7rem; }
.qd-faq__item dd { font-size:1.65rem; color:var(--text-muted); line-height:1.65; }

@media(max-width:600px){
  .qd-start-card { padding:2.4rem 1.8rem; }
  .qd-stats { gap:1.8rem; padding:1.2rem 1.8rem; }
  .qd-result-stats { grid-template-columns:repeat(2,1fr); }
  .qd-pts-earned { padding:1.6rem 2.5rem; }
}