:root{--bg:#151123;--card:#211b34;--ink:#fff;--muted:#bbb4cf;--yellow:#ffcc31;--purple:#7b2cff;--blue:#1686ff;--red:#ff3f59;--green:#1ed760}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:radial-gradient(circle at top,#342063 0,#151123 38%);color:var(--ink);font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;min-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}button,input,select{font:inherit}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 8px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--yellow)}h1{font-size:23px;margin:2px 0}.round{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff25;background:#ffffff12;color:#fff;font-size:20px}main{padding:10px 14px 28px;max-width:720px;margin:auto}.card,.notice{background:linear-gradient(145deg,#29203e,#1d182e);border:1px solid #ffffff16;border-radius:24px;padding:18px;margin:12px 0;box-shadow:0 14px 40px #0005}.hidden{display:none!important}.hero{text-align:center}.logo{font-size:58px}.hero h2{font-size:30px;margin:6px}.hero p,.notice span{color:var(--muted);line-height:1.4}label{display:block;text-align:left;color:var(--muted);font-size:13px;font-weight:700;margin:14px 0 6px}input,select{width:100%;border:1px solid #ffffff22;background:#0e0c18;color:#fff;border-radius:14px;padding:14px;font-size:16px;margin-top:6px}button{border:0;border-radius:15px;padding:14px 16px;font-weight:900;color:#fff}.primary{background:linear-gradient(135deg,#ffca28,#ff8f00);color:#1a1022;width:100%;box-shadow:0 8px 18px #ff9b0038}.secondary{background:#ffffff12;border:1px solid #ffffff1d}.danger{background:#9f2637}.full{width:100%;margin-top:10px}.help{text-align:left;margin-top:16px;color:var(--muted)}.notice{display:grid;gap:8px;border-color:#ffcc3150}.notice button{justify-self:start;background:var(--yellow);color:#211729;padding:8px 12px}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px}.team{text-align:center;border-radius:19px;padding:12px 6px}.team span{font-size:12px;font-weight:1000;letter-spacing:1px}.team strong{display:block;font-size:48px}.team div{display:flex;justify-content:center;gap:8px}.team button{width:42px;padding:8px;font-size:22px;background:#0003}.blue{background:linear-gradient(160deg,#1686ff,#0a3da5)}.red{background:linear-gradient(160deg,#ff5369,#a80b29)}.vs{font-weight:1000;padding:6px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.results{margin-top:8px}.result{display:flex;width:100%;justify-content:space-between;text-align:left;background:#ffffff0b;border-bottom:1px solid #ffffff12;border-radius:0;padding:12px}.result small{display:block;color:var(--muted);margin-top:3px}.cardNo{display:inline-block;background:var(--yellow);color:#1a1022;font-weight:1000;border-radius:999px;padding:6px 12px}.song h2{font-size:30px;margin:14px 0 3px}.song>p{color:var(--muted);font-size:18px;margin-top:0}.timeBox{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#0e0c18;border-radius:18px;padding:10px;margin:18px 0}.timeBox button{background:#ffffff12;font-size:18px}.timeBox label{text-align:center;margin:0}.timeBox input{text-align:center;font-size:27px;font-weight:1000;margin:4px 0;padding:8px}.timeBox small{display:block}.spotify{background:var(--green);color:#09180e;width:100%;margin-top:10px}.matches{margin-top:10px}.match{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #ffffff13}.match img{width:46px;height:46px;border-radius:8px}.match small{display:block;color:var(--muted)}.match button{padding:9px;background:var(--purple)}.device{display:grid;grid-template-columns:1fr auto;gap:8px}.device select{margin:0}dialog{width:min(94vw,520px);border:1px solid #ffffff25;border-radius:24px;background:#191426;color:#fff;padding:16px}dialog::backdrop{background:#000b}.dialogHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialogHead button{padding:8px;background:#ffffff12}video{width:100%;border-radius:18px;background:#000;min-height:300px}.file{background:#ffffff12;padding:14px;border-radius:15px;text-align:center}.file input{display:none}@media(max-width:390px){.team strong{font-size:40px}.song h2{font-size:25px}}
.three{display:grid;grid-template-columns:1fr 1fr;gap:10px}.three .emotionBtn{grid-column:1/-1}
.emotionBtn{background:linear-gradient(135deg,#7b2cff,#ff3f9a);border:1px solid #ffffff25;box-shadow:0 8px 20px #7b2cff45}
.emotionDialog{overflow:hidden}
.emotionStage{text-align:center;background:radial-gradient(circle at top,#5c2da8 0,#241838 68%);border:1px solid #ffffff20;border-radius:24px;padding:22px 14px;margin:8px 0 14px;min-height:260px;display:flex;flex-direction:column;justify-content:center}
.emotionEmoji{font-size:92px;line-height:1;filter:drop-shadow(0 10px 18px #0008)}
.emotionStage h2{font-size:32px;margin:14px 0 6px}
.emotionStage p{margin:0;color:#d5cbea;line-height:1.4}
.emotionRoll{font-size:18px;padding:17px}
.emotionList{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.emotionList span{background:#ffffff0c;border:1px solid #ffffff12;border-radius:12px;padding:9px;font-size:12px;text-align:center;color:#d8d0e7}
.rolling{animation:diceShake .18s linear infinite}
@keyframes diceShake{0%{transform:rotate(-8deg) scale(.96)}25%{transform:rotate(8deg) scale(1.04)}50%{transform:rotate(-5deg) scale(1)}75%{transform:rotate(7deg) scale(1.03)}100%{transform:rotate(-8deg) scale(.96)}}
.resultFlash{animation:resultPop .42s ease-out}
@keyframes resultPop{0%{transform:scale(.65);opacity:.2}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media(max-width:390px){.emotionEmoji{font-size:78px}.emotionStage h2{font-size:27px}}

.gameMenu h2{margin:0 0 14px;font-size:24px}.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.menuButton{min-height:130px;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #ffffff20}.menuButton span{font-size:35px}.menuButton b{font-size:16px}.menuButton small{font-size:11px;opacity:.8;font-weight:700}.songRandom{background:linear-gradient(145deg,#ffb000,#ff6d00);color:#201020}.testRandom{background:linear-gradient(145deg,#7b2cff,#c03cff)}.decadeMenu{background:linear-gradient(145deg,#0ca7a0,#0662ae)}.menuButton.emotionBtn{background:linear-gradient(145deg,#e63487,#7b2cff);grid-column:auto}.spotifyHelp{background:#ffffff0b;border-radius:14px;padding:12px;line-height:1.4;font-size:14px!important}.decadeBadge{display:inline-block;margin-left:6px;background:#ffffff12;border:1px solid #ffffff20;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;color:#e3dcee}.testStage{text-align:center;background:radial-gradient(circle at top,#6233a7,#241838 70%);border-radius:22px;padding:24px 15px;margin-bottom:14px;min-height:270px;display:flex;flex-direction:column;justify-content:center}.testEmoji{font-size:88px}.testStage h2{font-size:31px;margin:12px 0 8px}.testStage p,.dialogIntro{color:#d5cbea;line-height:1.45}.decadeAction{width:100%;margin-top:10px;background:linear-gradient(135deg,#08b3a9,#0871bd);font-size:17px}.decadeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.decadeGrid button{min-height:90px;background:linear-gradient(145deg,#302452,#1e3151);border:1px solid #ffffff20;display:flex;flex-direction:column;align-items:center;justify-content:center}.decadeGrid b{font-size:18px}.decadeGrid small{color:#cfc8df;margin-top:5px}.decadeGrid button:last-child{grid-column:1/-1}.song .spotify{font-size:18px;padding:17px}.song h2{margin-top:14px}@media(max-width:390px){.menuButton{min-height:115px}.testEmoji{font-size:72px}.testStage h2{font-size:27px}}

.spotifyConnectCard{display:flex;flex-direction:column;gap:12px}.spotifyConnectInfo{display:flex;align-items:center;gap:12px}.spotifyConnectInfo div{display:flex;flex-direction:column;gap:3px}.spotifyConnectInfo b{font-size:1.15rem}.spotifyConnectInfo small,.spotifyStatus{opacity:.75}.spotifyLogo{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1ed760;color:#101010;font-size:24px;box-shadow:0 0 18px rgba(30,215,96,.35)}

.guessBtn{background:linear-gradient(145deg,#f7b500,#ef6c00)!important}.guessDialog{max-width:560px;width:calc(100% - 24px);border:0;border-radius:28px;background:#211a38;color:#fff;padding:18px}.guessStage{text-align:center;padding:12px}.guessIcon{font-size:74px;filter:drop-shadow(0 8px 18px #0008)}.guessCountdown{font-size:72px;font-weight:1000;min-height:88px;color:#ffd54a}.buzzers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.buzzers button{min-height:116px;border:0;border-radius:22px;color:#fff;font-size:20px;font-weight:1000}.blueBuzzer{background:linear-gradient(145deg,#1687ff,#0754c9)}.redBuzzer{background:linear-gradient(145deg,#ff4568,#c6143d)}.buzzers button:disabled{opacity:.35;filter:grayscale(.8)}.judgeControls{text-align:center;background:#ffffff10;border-radius:20px;padding:14px}.judgeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.judgeGrid button{border:0;border-radius:16px;padding:16px 8px;font-weight:1000;font-size:16px}.correctBtn{background:#21d769;color:#08180e}.wrongBtn{background:#ff4867;color:white}.guessReveal{text-align:center;background:#ffffff10;border-radius:20px;padding:18px;margin-top:14px}.guessReveal small{letter-spacing:2px;color:#ffd54a;font-weight:900}.guessReveal h2{font-size:30px;margin:8px 0}.guessReveal p{font-size:19px}.guessReveal .spotify{width:100%;margin:8px 0}.guessPulse{animation:guessPulse .5s ease 3}@keyframes guessPulse{50%{transform:scale(1.2)}}

.manualTestsDialog{max-width:720px;width:min(94vw,720px)}
.manualTestsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.manualTestCard{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:16px;border-radius:18px;min-height:125px}
.manualTestCard span{font-size:30px}
.manualTestCard b{font-size:17px}
.manualTestCard small{font-size:13px;line-height:1.35;opacity:.82}
@media(max-width:560px){.manualTestsGrid{grid-template-columns:1fr}.manualTestCard{min-height:auto}}

/* Selector manual de pruebas: contraste corregido */
dialog.manualTestsDialog{
  background:#171225 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.65) !important;
}
dialog.manualTestsDialog::backdrop{
  background:rgba(5,3,12,.82) !important;
  backdrop-filter:blur(5px);
}
.manualTestsDialog .dialogHead,
.manualTestsDialog .dialogIntro{
  color:#ffffff !important;
}
.manualTestsDialog .dialogHead button{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.2) !important;
}
.manualTestsDialog .manualTestsGrid{
  background:transparent !important;
}
.manualTestsDialog button.manualTestCard{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:linear-gradient(145deg,#2b2141,#201831) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}
.manualTestsDialog button.manualTestCard b{
  color:#ffffff !important;
}
.manualTestsDialog button.manualTestCard small{
  color:#ddd7eb !important;
  opacity:1 !important;
}
.manualTestsDialog button.manualTestCard:active{
  transform:scale(.98);
}

/* NUEVA INTERFAZ DE PRUEBAS */
.turnBadge{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:10px 16px;
  margin:0 auto 10px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.04em;
  font-size:.9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.turnBadge.blue{background:#1268ff;color:#fff;border:2px solid #77aaff}
.turnBadge.red{background:#e52745;color:#fff;border:2px solid #ff879a}
.turnBadge.both{background:linear-gradient(90deg,#1268ff 0 48%,#e52745 52% 100%);color:#fff;border:2px solid rgba(255,255,255,.7)}
.testDescription{text-align:left;width:100%}
.testDescription section{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:13px 14px;
  margin:10px 0;
}
.testDescription section>b{display:block;color:#fff;margin-bottom:5px}
.testDescription section p{margin:0;color:#e5e0ef;line-height:1.45}
.doubleChallenge{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:8px;
  margin-top:14px;
}
.doubleChallenge>div{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 8px;
  border-radius:16px;
  text-align:center;
  background:linear-gradient(145deg,#3a285d,#241936);
  border:1px solid rgba(255,255,255,.16);
}
.doubleChallenge>div span{font-size:2rem}
.doubleChallenge>div b{color:#fff}
.doubleChallenge>div small{color:#ddd7eb;line-height:1.35}
.doubleChallenge>strong{align-self:center;font-size:1.8rem;color:#ffd447}
.manualTestsDialog button.manualTestCard{
  text-align:left !important;
  align-items:flex-start !important;
}
.manualTestsDialog button.manualTestCard>span{
  font-size:2rem;
  align-self:center;
}
.manualTestsDialog button.manualTestCard>b{
  align-self:center;
  font-size:1.05rem;
}
.manualTestsDialog button.manualTestCard small{
  display:block;
  width:100%;
  line-height:1.35;
}
.manualTestsDialog button.manualTestCard small strong{
  color:#fff;
}
@media(max-width:520px){
  .doubleChallenge{grid-template-columns:1fr}
  .doubleChallenge>strong{transform:rotate(90deg)}
}


/* Botón Pruebas del menú: contraste alto */
.menuButton.manualTests{
  background:linear-gradient(145deg,#49306f,#251b3e) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 10px 24px rgba(20,10,42,.45) !important;
}
.menuButton.manualTests b,
.menuButton.manualTests small,
.menuButton.manualTests span{
  color:#ffffff !important;
  opacity:1 !important;
}

/* Selector de canción dentro de cada prueba */
.testSongSelector{
  margin:14px 0;
  padding:14px;
  border-radius:19px;
  background:linear-gradient(145deg,#151125,#21183a);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.testSongHeading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
  text-align:left;
}
.testSongHeading>span{font-size:28px}
.testSongHeading>div{display:flex;flex-direction:column;gap:2px}
.testSongHeading b{color:#fff;font-size:1rem}
.testSongHeading small{color:#cfc7dc;font-size:.76rem}
.selectedTestSong{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:66px;
  padding:11px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}
.selectedTestSong.empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.selectedTestSong b{color:#fff;font-size:1rem}
.selectedTestSong small{display:block;color:#cbc4d7;margin-top:3px}
.selectedSongNumber{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  border-radius:13px;
  background:#ffd447;
  color:#21152e;
  font-weight:1000;
}
.testSongButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.testSongButtons button{
  min-height:48px;
  padding:11px 8px;
  font-size:.82rem;
}
.testSongPrimary{
  background:linear-gradient(135deg,#ffca28,#ff8f00);
  color:#211325;
}
.testSongSecondary{
  background:linear-gradient(145deg,#5b35a0,#392368);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.emotionSongSelector{margin-top:0}
@media(max-width:430px){
  .testSongButtons{grid-template-columns:1fr}
}

/* V1 — corrección definitiva del botón PRUEBAS */
#manualTestsBtn,
button#manualTestsBtn.menuButton.manualTests,
.gameMenu .menuGrid #manualTestsBtn{
  background:linear-gradient(145deg,#5634a8 0%,#2b1f55 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:0 10px 28px rgba(53,28,111,.50) !important;
  -webkit-text-fill-color:#ffffff !important;
}
#manualTestsBtn span,
#manualTestsBtn b,
#manualTestsBtn small{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
.testPlaybackControls{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
  margin-top:10px;
}
.testPlaybackControls button{min-height:50px}
.testPlayButton{margin:0 !important;font-size:.92rem}
.testPauseButton{min-width:92px}
.testOpenSpotify{margin-top:9px !important;background:rgba(255,255,255,.10)}
.testSongSelector{position:relative;overflow:hidden}
.testSongSelector:before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#1ed760,#ffd447,#8a42ff);
}
.decadesDialog{max-height:88vh;overflow:auto}
.decadeGrid button:last-child{grid-column:auto !important}
@media(max-width:430px){.testPlaybackControls{grid-template-columns:1fr 86px}}

/* V1.1 — controles definitivos dentro de las pruebas */
.testSongButtonsTwo{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:10px !important;
  margin-top:12px !important;
}
.testSongButtonsTwo button{
  min-height:58px !important;
  font-size:.94rem !important;
  font-weight:900 !important;
  border-radius:16px !important;
}
.lyricsHint{
  margin:10px 2px 0;
  color:#d7d0e3;
  font-size:.76rem;
  line-height:1.35;
  text-align:left;
}
.lyricsHelpToast{
  position:fixed;
  left:16px;
  right:16px;
  bottom:24px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:15px 17px;
  border-radius:18px;
  background:#171124;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 50px rgba(0,0,0,.55);
  transform:translateY(140%);
  opacity:0;
  transition:.32s ease;
}
.lyricsHelpToast.show{transform:translateY(0);opacity:1}
.lyricsHelpToast b{font-size:1rem}
.lyricsHelpToast span{font-size:.84rem;line-height:1.4;color:#ddd5eb}
.appVersion{
  position:fixed;
  top:8px;
  right:10px;
  z-index:9999;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.72);
  font-size:10px;
  pointer-events:none;
}
#manualTestsBtn{
  background:linear-gradient(145deg,#5634a8,#2b1f55)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
#manualTestsBtn *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
@media(max-width:420px){
 .testSongButtonsTwo{grid-template-columns:1fr 1fr!important}
 .testSongButtonsTwo button{font-size:.82rem!important}
}

/* V1.2 — artista aleatorio en Imita al artista */
.artistChallenge{
  margin:0 0 14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(145deg,#ffb000,#ff6a00);
  color:#211325;
  box-shadow:0 12px 30px rgba(255,126,0,.28);
  border:1px solid rgba(255,255,255,.48);
  text-align:left;
}
.artistChallenge>small{
  display:block;
  margin-bottom:9px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#3a1800;
}
.artistChallengeMain{
  display:flex;
  align-items:center;
  gap:13px;
}
.artistChallengeMain>span{
  flex:0 0 62px;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:18px;
  background:rgba(255,255,255,.30);
  font-size:2.25rem;
}
.artistChallengeMain b{
  display:block;
  color:#211325;
  font-size:1.55rem;
  line-height:1.1;
}
.artistChallengeMain p{
  margin:6px 0 0;
  color:#3b210e;
  line-height:1.35;
  font-weight:700;
  font-size:.9rem;
}

/* V1.3 — Una sola vocal y coreografías aleatorias */
.randomChallenge{
  margin:0 0 14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(145deg,#7f5cff,#c64cff);
  color:white;
  box-shadow:0 12px 30px rgba(139,75,255,.28);
  border:1px solid rgba(255,255,255,.42);
  text-align:left;
}
.randomChallenge>small{
  display:block;
  margin-bottom:9px;
  font-weight:1000;
  letter-spacing:.08em;
}
.randomChallengeMain{
  display:flex;
  align-items:center;
  gap:13px;
}
.randomChallengeMain>span{
  flex:0 0 62px;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:18px;
  background:rgba(255,255,255,.22);
  font-size:2.2rem;
}
.randomChallengeMain b{
  display:block;
  font-size:1.45rem;
  line-height:1.1;
}
.randomChallengeMain p{
  margin:6px 0 0;
  line-height:1.35;
  font-weight:700;
  font-size:.9rem;
  color:rgba(255,255,255,.94);
}