/* ============================================================
   MUSIC DETECTIVE — Estilos
   Colección EL TÍO IA · eltioia.cl
   Estética: estudio de grabación. Ondas, ecualizador y pentagramas.
   Pensado para verse bien proyectado en una sala de clases.
   ============================================================ */

:root{
  --bg:        #131024;
  --panel:     #1e1936;
  --panel-2:   #272049;
  --coral:     #ff7a59;   /* color principal */
  --coral-dk:  #e05334;
  --teal:      #4dd6c1;
  --gold:      #ffc46b;
  --violet:    #a78bfa;
  --green:     #57d98a;
  --red:       #ff6b6b;
  --text:      #f3eefe;
  --text-dim:  #a99ec9;
  --radius:    20px;
  --shadow:    0 22px 55px rgba(0,0,0,.5);
  --font-title:"Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* El atributo hidden debe ganarle a cualquier display que definamos abajo */
[hidden]{ display:none !important; }

body{
  min-height:100dvh;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1000px 620px at 15% -10%, rgba(255,122,89,.16) 0%, transparent 62%),
    radial-gradient(900px 600px at 90% 108%, rgba(77,214,193,.14) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------- Onda de fondo ---------- */
.wave-bg{
  position:fixed; left:0; right:0; top:38%; z-index:0;
  pointer-events:none; color:var(--teal); opacity:.10;
}
.wave-bg svg{ width:200%; height:220px; animation:slide 26s linear infinite; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Control de sonido ---------- */
.toolbar{ position:fixed; top:12px; right:12px; z-index:30; }
.tool{
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  background:rgba(255,255,255,.1); color:var(--text);
  border:1.5px solid rgba(255,255,255,.2); border-radius:99px;
  padding:9px 16px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s, color .2s;
}
.tool:hover{ background:rgba(255,255,255,.2); border-color:var(--teal); }
.tool:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.tool[aria-pressed="true"]{
  background:rgba(77,214,193,.22); border-color:var(--teal); color:var(--teal);
}

/* ---------- Pantallas ---------- */
#app{ position:relative; z-index:1; }

.screen{
  display:none; min-height:100dvh;
  padding:clamp(14px,3vw,32px);
  padding-top:clamp(60px,7vw,68px);
  place-items:center;
}
.screen.is-active{ display:grid; animation:screenIn .42s ease both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.card{
  width:min(860px,100%);
  background:linear-gradient(180deg, rgba(39,32,73,.95) 0%, rgba(24,20,45,.96) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,4vw,42px);
  text-align:center; position:relative;
}

/* ---------- Inicio ---------- */
.eq{ display:flex; gap:6px; justify-content:center; align-items:flex-end; height:44px; margin-bottom:6px; }
.eq i{
  width:8px; border-radius:99px; display:block;
  background:linear-gradient(180deg,var(--coral),var(--teal));
  animation:bounceEq 1.1s ease-in-out infinite;
}
.eq i:nth-child(1){ height:16px; animation-delay:0s; }
.eq i:nth-child(2){ height:30px; animation-delay:-.15s; }
.eq i:nth-child(3){ height:44px; animation-delay:-.3s; }
.eq i:nth-child(4){ height:24px; animation-delay:-.45s; }
.eq i:nth-child(5){ height:38px; animation-delay:-.6s; }
.eq i:nth-child(6){ height:20px; animation-delay:-.75s; }
.eq i:nth-child(7){ height:32px; animation-delay:-.9s; }
@keyframes bounceEq{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1);} }

.logo{ font-size:clamp(48px,12vw,80px); line-height:1; animation:sway 3.6s ease-in-out infinite; display:inline-block; }
@keyframes sway{ 0%,100%{ transform:rotate(-8deg) translateY(0);} 50%{ transform:rotate(8deg) translateY(-8px);} }

.title{
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(30px,8vw,62px); letter-spacing:-.01em;
  margin:.08em 0 .1em;
  background:linear-gradient(100deg,var(--coral) 0%, var(--gold) 45%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{
  font-family:var(--font-title); font-size:clamp(16px,4vw,24px);
  color:var(--teal); letter-spacing:.14em; margin:0 0 22px;
}
.intro{ color:var(--text-dim); font-size:clamp(14.5px,3.2vw,17px); line-height:1.7; margin:0 auto 26px; max-width:52ch; }

.sound-note{
  text-align:left; margin-top:22px;
  background:rgba(77,214,193,.1); border:1px solid rgba(77,214,193,.28);
  border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.6; color:#cfe9e4;
}
.sound-note b{ color:var(--teal); }

.brand{ margin:22px 0 10px; font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-dim); }
.brand strong{ color:var(--coral); }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--font-body); font-weight:800; cursor:pointer;
  border:none; border-radius:14px; padding:13px 24px; font-size:16px;
  text-decoration:none; display:inline-block;
  transition:transform .12s, box-shadow .2s, filter .2s, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:translateY(2px); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn:disabled{ opacity:.45; cursor:default; }

.btn-primary{
  background:linear-gradient(180deg, var(--coral) 0%, var(--coral-dk) 100%);
  color:#2b1005; box-shadow:0 6px 0 #a83a20, 0 14px 30px rgba(255,122,89,.28);
}
.btn-primary:hover:not(:disabled){ filter:brightness(1.07); }
.btn-primary:active{ box-shadow:0 2px 0 #a83a20; }
.btn-xl{ font-size:clamp(16px,4vw,21px); padding:16px 32px; width:100%; }

.btn-ghost{
  background:transparent; color:var(--text-dim);
  border:2px solid rgba(255,255,255,.2); font-size:14px; padding:10px 18px; font-weight:600;
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--text); }

.btn-back{
  background:rgba(255,255,255,.1); color:var(--text-dim);
  font-size:13.5px; padding:8px 15px; font-weight:600;
}
.btn-back:hover{ background:rgba(255,255,255,.18); }

/* ---------- Selección de modo y nivel ---------- */
#screen-mode .btn-back,
#screen-level .btn-back{ position:absolute; top:clamp(14px,3vw,22px); left:clamp(14px,3vw,22px); }
#screen-mode .card,
#screen-level .card{ padding-top:clamp(60px,12vw,70px); }

.panel-title{ font-family:var(--font-title); font-size:clamp(23px,5.6vw,36px); margin:0 0 6px; color:var(--gold); }
.panel-sub{ color:var(--text-dim); margin:0 0 24px; font-size:15px; }

.mode-grid{ display:grid; gap:12px; }
@media (min-width:700px){ .mode-grid{ grid-template-columns:repeat(2,1fr); } }

.mode-card{
  font-family:var(--font-body); text-align:left; cursor:pointer;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.14);
  border-radius:16px; padding:16px 18px; color:var(--text);
  display:flex; gap:14px; align-items:flex-start;
  transition:transform .14s, border-color .2s, background .2s, box-shadow .2s;
}
.mode-card:hover{ transform:translateY(-3px); border-color:var(--coral); box-shadow:0 12px 26px rgba(255,122,89,.2); }
.mode-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.mode-card .mi{ font-size:32px; line-height:1; flex:0 0 auto; }
.mode-card b{ display:block; font-size:17px; margin-bottom:3px; }
.mode-card small{ display:block; font-size:13px; color:var(--text-dim); line-height:1.5; }
.mode-card .count{ display:block; font-size:11.5px; color:var(--teal); margin-top:5px; letter-spacing:.05em; }

.audio-status{
  margin:20px 0 0; font-size:13px; line-height:1.6; color:var(--text-dim);
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.16);
  border-radius:12px; padding:12px 14px; text-align:left;
}
.audio-status b{ color:var(--gold); }

.level-grid{ display:grid; gap:14px; }
@media (min-width:700px){ .level-grid{ grid-template-columns:repeat(3,1fr); } }
.level-card{
  font-family:var(--font-body); text-align:center; cursor:pointer;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.14);
  border-radius:16px; padding:22px 16px; color:var(--text);
  transition:transform .14s, border-color .2s, box-shadow .2s;
}
.level-card:hover{ transform:translateY(-4px); border-color:var(--teal); box-shadow:0 12px 26px rgba(77,214,193,.2); }
.level-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.level-card .li{ font-size:34px; display:block; line-height:1; }
.level-card b{ display:block; font-family:var(--font-title); font-size:21px; margin:8px 0 5px; }
.level-card small{ display:block; font-size:13px; color:var(--text-dim); line-height:1.5; }
.level-card .count{ display:block; margin-top:8px; font-size:11.5px; color:var(--teal); }

/* ---------- HUD ---------- */
#screen-game{ align-content:start; gap:12px; }

.hud{
  width:min(900px,100%);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:10px 14px;
}
.hud-item{ display:flex; flex-direction:column; align-items:center; min-width:76px; }
.hud-label{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); }
.hud-value{ font-family:var(--font-title); font-size:clamp(19px,4.6vw,26px); color:var(--gold); }
.hud-value.pop{ animation:pop .4s ease; }
@keyframes pop{ 0%{transform:scale(1);} 45%{transform:scale(1.3); color:var(--teal);} 100%{transform:scale(1);} }

.progress-bar{ width:min(900px,100%); height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.progress-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--gold),var(--teal));
  transition:width .45s cubic-bezier(.4,1.4,.5,1);
}

/* ---------- Tarjeta del desafío ---------- */
.stage{ width:min(900px,100%); }
.q-card{
  background:linear-gradient(180deg, rgba(39,32,73,.95) 0%, rgba(24,20,45,.96) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(18px,3.6vw,32px);
  animation:cardIn .38s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.985);} to{ opacity:1; transform:none;} }

.q-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mode-tag{
  background:rgba(255,122,89,.16); border:1px solid rgba(255,122,89,.35); color:var(--coral);
  border-radius:99px; padding:5px 14px; font-size:13px; font-weight:700;
}
.level-tag{ font-size:13px; font-weight:700; color:var(--text-dim); align-self:center; }

/* ---------- Zona de medios (pentagrama, figuras, audio) ---------- */
.media{ display:grid; justify-items:center; gap:12px; margin-bottom:14px; }
.media:empty{ display:none; }
.media-small .staff-svg{ max-width:220px; }

.staff-svg{ width:min(300px,84vw); height:auto; color:var(--text); }
.figure-svg{ width:78px; height:auto; color:var(--text); }
.rhythm-svg{ width:min(420px,88vw); height:auto; color:var(--text); }

.media-box{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:14px 18px; display:grid; justify-items:center; gap:10px;
  width:min(100%,520px);
}

.play-btn{
  font-family:var(--font-body); font-weight:800; font-size:clamp(16px,3.6vw,20px);
  background:linear-gradient(180deg,var(--teal),#2fae9b); color:#04241f;
  border:none; border-radius:99px; padding:14px 30px; cursor:pointer;
  box-shadow:0 5px 0 #217a6c, 0 12px 26px rgba(77,214,193,.28);
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .12s, filter .2s, box-shadow .2s;
}
.play-btn:hover:not(:disabled){ filter:brightness(1.08); }
.play-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #217a6c; }
.play-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.play-btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.play-btn.playing{ animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }

.media-label{ font-size:13px; color:var(--text-dim); letter-spacing:.04em; }
.media-warn{
  font-size:13px; color:var(--gold); line-height:1.55; text-align:center; max-width:44ch;
}

/* ---------- Enunciado y respuestas ---------- */
.q-text{
  font-family:var(--font-body); font-weight:800;
  font-size:clamp(19px,4.4vw,32px); line-height:1.3;
  text-align:center; margin:0 0 clamp(16px,3vw,24px);
}

.answers{ display:grid; gap:11px; }
@media (min-width:760px){ .answers{ grid-template-columns:repeat(2,1fr); } }
.answers.visual{ grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .answers.visual{ grid-template-columns:repeat(4,1fr); } }

.answer{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  font-family:var(--font-body); font-weight:600;
  font-size:clamp(15px,3.2vw,20px); color:var(--text);
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15);
  border-radius:15px; padding:14px 16px; cursor:pointer;
  transition:transform .12s, border-color .2s, background .2s, box-shadow .2s;
}
.answer:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--coral); background:rgba(255,255,255,.1); }
.answer:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.answer:disabled{ cursor:default; }
.answer .letter{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:rgba(0,0,0,.3); color:var(--gold);
  font-family:var(--font-title); font-size:16px;
}
.answer.visual{ flex-direction:column; justify-content:center; text-align:center; gap:6px; padding:14px 8px; }
.answer.visual .letter{ width:26px; height:26px; font-size:13px; }
.answer.visual .rhythm-svg{ width:100%; max-width:200px; }

.answer.correct{ background:rgba(87,217,138,.18); border-color:var(--green); }
.answer.correct .letter{ background:var(--green); color:#04240f; }
.answer.wrong{ background:rgba(255,107,107,.16); border-color:var(--red); }
.answer.wrong .letter{ background:var(--red); color:#2b0606; }
.answer.dim{ opacity:.45; }

/* ---------- Explicación ---------- */
.explain-card{ text-align:left; }
.explain-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.explain-icon{ font-size:34px; line-height:1; }
.explain-title{ font-family:var(--font-title); font-size:clamp(20px,4.6vw,28px); margin:0 0 4px; }
.explain-title.ok{ color:var(--green); }
.explain-title.bad{ color:var(--gold); }
.explain-answer{ margin:0; font-size:15px; color:var(--text-dim); }
.explain-answer b{ color:var(--text); }
.explain-points{
  margin-left:auto; font-family:var(--font-title);
  font-size:clamp(17px,4vw,24px); color:var(--green); white-space:nowrap;
}

.lesson{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:16px 18px; margin-bottom:16px;
}
.lesson p{ margin:0; font-size:15.5px; line-height:1.7; color:#ddd4f2; }

/* ---------- Resultado ---------- */
.rank-icon{ font-size:clamp(50px,12vw,80px); line-height:1; animation:pop2 .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop2{ 0%{ transform:scale(0) rotate(-25deg); opacity:0;} 100%{ transform:none; opacity:1;} }
.rank-name{ font-family:var(--font-title); font-size:clamp(24px,6.2vw,40px); margin:8px 0 4px; color:var(--gold); }
.rank-msg{ color:var(--text-dim); margin:0 0 22px; font-size:15px; line-height:1.6; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:22px; }
@media (min-width:640px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:14px 8px; }
.stat-num{ display:block; font-family:var(--font-title); font-size:clamp(21px,5.6vw,30px); color:var(--teal); }
.stat-num.small{ font-size:clamp(14px,3.4vw,18px); line-height:1.3; }
.stat-lbl{ display:block; font-size:11.5px; letter-spacing:.05em; color:var(--text-dim); margin-top:5px; }

.review{ text-align:left; margin-bottom:22px; }
.review h3{ font-family:var(--font-title); color:var(--gold); font-size:16px; margin:0 0 10px; }
.review-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.review-list li{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-left-width:4px; border-radius:12px; padding:10px 12px;
  font-size:13.5px; line-height:1.45; color:#ddd4f2;
}
.review-list li.ok  { border-left-color:var(--green); }
.review-list li.bad { border-left-color:var(--red); }
.rv-text b{ display:block; }
.rv-text small{ display:block; color:var(--text-dim); margin-top:2px; }

.result-actions{ display:grid; gap:10px; justify-items:center; }
@media (min-width:520px){ .result-actions{ grid-auto-flow:column; justify-content:center; align-items:center; } }
.result-actions .btn-xl{ width:auto; }

/* ---------- Confeti ---------- */
.confetti{
  position:fixed; top:-18px; width:9px; height:16px; z-index:25;
  pointer-events:none; border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{ to{ transform:translateY(112vh) rotate(720deg); opacity:0; } }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Móvil ---------- */
@media (max-width:560px){
  .toolbar{ position:static; display:flex; justify-content:center; padding:10px 10px 0; }
  .screen{ padding-top:clamp(14px,3vw,32px); }
  .hud{ padding:8px 10px; gap:6px; }
  .hud-item{ min-width:66px; }
  .btn-quit{ order:-1; width:100%; }
  .answer{ padding:12px 13px; }
}

/* ---------- Proyección ---------- */
@media (min-width:1500px){
  .q-text{ font-size:36px; }
  .answer{ font-size:22px; }
}