@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@500;700&display=swap');

:root{
  --grad-1: #6c2bd9;
  --grad-2: #b83280;
  --grad-3: #ff6b00;
  --grad-4: #2c89d9;
  --card: rgba(255,255,255,0.08);
  --card-stroke: rgba(255,255,255,0.14);
  --glass: rgba(8,14,35,0.65);
  --text: #e9eefb;
  --muted: #cbd5e1;
  --shadow: 0 18px 50px rgba(0,0,0,0.28);
}

*{ box-sizing: border-box; }

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter','Poppins', sans-serif;
  background: linear-gradient(120deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4));
  background-size: 400% 400%;
  animation: gradientMove 16s ease infinite;
  color: var(--text);
  padding: 18px;
}

.music-section{
  max-width: 1080px;
  margin: 14px auto 0;
}

body.playing .music-section{
  display: none;
}

/* Setup (quiz seleccionado): layout enfocado con scroll normal */
body.preparing{
  padding: 0;
}

body.preparing .grid{
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  gap: 0;
}

body.preparing #catalog-panel{
  display: none;
}

body.preparing .hero{
  display: none;
}

body.preparing #game-panel{
  border-radius: 0;
  min-height: 100vh;
  box-shadow: none;
  padding: 10px;
}

body.playing .grid{
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  height: 100vh;
  gap: 0;
}

body.playing{
  padding: 0;
}

body.playing #catalog-panel{
  display: none;
}

body.playing .hero{
  display: none;
}

body.playing #game-panel{
  border-radius: 0;
  min-height: 100vh;
  box-shadow: none;
  overflow: hidden;
  padding: 10px;
}

/* En partida, la pregunta se muestra por panel */
body.playing .question-card{
  display: none;
}

body.playing #game{
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
}

body.playing .players{
  flex: 1;
  min-height: 0;
  grid-auto-rows: 1fr;
}

body.playing .player-panel{
  min-height: 0;
  padding: 8px;
}

body.playing .player-question-card{
  padding: 6px;
}

body.playing .player-question-card .question-text{
  font-size: 13px;
  line-height: 1.2;
}

body.playing .question-media{
  margin-top: 6px;
}

body.playing .question-media img,
body.playing .question-media video,
body.playing .question-media iframe{
  max-height: 120px;
}

body.playing .answers{
  gap: 8px;
}

body.playing .answer{
  padding: 10px 8px;
}

a{
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.back-link{
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
}

.mp-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), rgba(12,16,35,0.88)),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), rgba(12,16,35,0.88));
  backdrop-filter: blur(8px);
  z-index: 50;
}

.mp-modal.show{
  display: flex;
}

.mp-modal__content{
  width: 100%;
  max-width: 520px;
  background: var(--glass);
  border: 1px solid var(--card-stroke);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.mp-modal__title{
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

#round-ranking-list{
  margin: 0 0 14px;
  padding-left: 20px;
}

#round-ranking-list li{
  margin: 6px 0;
}

.hero{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.hero__logo{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  padding: 8px;
  object-fit: contain;
  margin-right: 12px;
}

.hero__text h1{
  margin: 4px 0;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.hero__text .subtext{
  max-width: 720px;
}

.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin: 0;
  color: var(--muted);
}

.subtext{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.hero__lang{ min-width: 160px; text-align: right; }

.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

select,
input{
  font-family: inherit;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--card-stroke);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
}
#sort{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23e9eefb' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 34px;
  color-scheme: dark;
}
#sort option{
  background-color: #0f172a;
  color: #e9eefb;
}

select:focus-visible,
input:focus-visible{
  outline: 2px solid rgba(44,137,217,0.85);
  outline-offset: 2px;
}

input[type="search"]::placeholder{ color: #9fb1d9; }

.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.panel{
  background: var(--glass);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.panel__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel__actions{ display: flex; align-items: center; gap: 8px; }
.panel__filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tag-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 420px;
}
.tag-filter__actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag-filter__btn{
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--card-stroke);
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.tag-filter__btn.is-icon{
  width: 34px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
}

.tag-filter__icon{ display: inline-block; }
.tag-filter__btn:hover{ filter: brightness(1.05); }
.tag-filter__item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--card-stroke);
  font-size: 12px;
}
.tag-filter__item input{
  margin: 0;
}
.panel__filters input[type="number"]{
  max-width: 90px;
}
.checkbox-inline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.checkbox-inline input{
  width: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--card-stroke);
}

.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.card{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-stroke);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.favorite-btn{
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.favorite-btn:hover{
  transform: translateY(-1px);
  color: #ffe9a3;
  border-color: rgba(255,255,255,0.5);
}
.favorite-btn.is-active{
  color: #ffe166;
  border-color: rgba(255,225,102,0.8);
}
.card-rating{
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating-stars{
  display: inline-flex;
  gap: 4px;
}
.rating-star{
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.35);
  font-size: 18px;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.rating-star:hover{
  transform: translateY(-1px);
  color: #ffe9a3;
}
.rating-star.is-filled{
  color: #ffe166;
}
.rating-summary{
  font-size: 12px;
}

.card-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 140px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
}

.card-thumb.placeholder{
  background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
}

.card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.card-thumb.has-media img{
  display: block;
}

.muted{ color: var(--muted); }

.tag{
  display: inline-block;
  margin-right: 6px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn{
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.btn-primary{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: var(--shadow);
}

.btn-ghost{
  background: rgba(255,255,255,0.1);
  color: var(--text);
  border: 1px solid var(--card-stroke);
}

.btn.multi-submit{
  width: 100%;
  padding: 10px 12px;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.12);
  color: #fff;
  margin-top: 6px;
}

.btn.multi-submit.has-selection{
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.btn.multi-submit:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:hover{ transform: translateY(-1px); }

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.pagination button{
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.pagination button:disabled{ opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.hidden{ display: none !important; }

.setup{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  padding-bottom: 96px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

.question-count-controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.question-count-controls input{
  width: 110px;
}

#question-count-total{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.player-names{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.player-name-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.player-name-field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.player-name-field input{
  width: 100%;
}

.player-icon-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px;
}

.mp-icon-picker{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.12);
}

.mp-icon-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.mp-icon-btn:hover{ filter: brightness(1.05); }

.mp-icon-btn.selected{
  outline: 2px solid rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.14);
}

@media (max-width: 520px){
  .mp-icon-picker{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .player-names{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .card{ padding: 10px; }

  .panel__header{
    flex-direction: column;
    align-items: stretch;
  }

  .panel__actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .panel__actions input#search,
  .panel__actions select#sort{
    width: 100%;
    min-width: 0;
  }

  .panel__actions label[for="sort"]{ display: none; }

  /* Filtros: Etiquetas en una fila; Preguntas en otra */
  .panel__filters label[for="tag-filter"],
  .panel__filters #tag-filter,
  .panel__filters .tag-filter__actions{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .panel__filters label[for="min-questions"]{ flex: 0 0 100%; }
  .panel__filters input#min-questions,
  .panel__filters input#max-questions{
    flex: 1 1 0;
    min-width: 0;
  }
  .panel__filters .checkbox-inline{ flex: 0 0 100%; }
}

.setup-row{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.setup-row select{
  width: 100%;
  justify-self: end;
  max-width: 260px;
}

.setup-row--question-count .question-count-controls{
  width: 100%;
}

#start-btn{
  width: 100%;
  margin-top: 0;
}

.setup-actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 12px;
  background: linear-gradient(to bottom, transparent, var(--card) 28%, var(--card));
  backdrop-filter: blur(10px);
}

@media (max-width: 720px){
  .setup{ padding: 12px; }

  .setup-row{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .setup-row select{
    justify-self: stretch;
    max-width: none;
  }

  .question-count-controls{
    justify-content: flex-start;
  }
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--card-stroke);
}

.pill-timer{ color: #67e8f9; }

.game{
  margin-top: 10px;
}

.game-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.question-card{
  margin-top: 10px;
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
}

body.mode-per-player .question-card{
  display: none;
}

.player-question-card{
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  box-shadow: var(--shadow);
}

.player-question-card .question-text{
  font-size: 16px;
}

.question-text{
  font-size: 20px;
  margin: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

.question-media{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.question-media img,
.question-media video,
.question-media iframe{
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 12px;
  background: #0b122a;
  display: none;
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
}

.question-media.hidden{ display: none; }

#question-image,
#question-video,
#question-iframe{ display: none; }

.players{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.players-2{ grid-template-columns: 1fr 1fr; }
.players-3{ grid-template-columns: 1fr 1fr 1fr; }
.players-4{ grid-template-columns: 1fr 1fr; }

.player-panel{
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  padding: 12px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.player-name{ font-weight: 900; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
.player-icon{ font-size: 18px; line-height: 1; }
.player-name-text{ line-height: 1.1; }
.player-score{ font-weight: 800; color: rgba(255,255,255,0.85); }

.player-feedback{
  min-height: 22px;
  text-align: center;
  font-weight: 900;
}

.player-feedback.ok{ color: #bbf7d0; }
.player-feedback.bad{ color: #fecaca; }
.player-feedback.muted{ color: rgba(255,255,255,0.7); }

.answers{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}

.answer{
  border: none;
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, filter 0.14s ease;
  touch-action: manipulation;
  user-select: none;
}

.answer:nth-child(1){ background: linear-gradient(135deg, #22c55e, #16a34a); }
.answer:nth-child(2){ background: linear-gradient(135deg, #f97316, #ea580c); }
.answer:nth-child(3){ background: linear-gradient(135deg, #3b82f6, #2563eb); }
.answer:nth-child(4){ background: linear-gradient(135deg, #f43f5e, #e11d48); }

.answer:active{ transform: translateY(0); filter: brightness(0.95); }

.answer.multi-selected{
  outline: 3px solid rgba(255,255,255,0.45);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.answer.correct{ border: 2px solid #bbf7d0; }
.answer.wrong{ border: 2px solid #fecaca; }

.answer{
  position: relative;
}

.answer.selected{
  outline: 3px solid rgba(255,255,255,0.45);
  outline-offset: 2px;
}

.answer.correct{
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(187,247,208,0.35), var(--shadow);
}

.answer.wrong{
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(254,202,202,0.35), var(--shadow);
}

.answer.correct::after,
.answer.wrong::after{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  content: '';
}

.answer.correct::after{
  content: '✓';
  background: rgba(34,197,94,0.95);
  color: #fff;
}

.answer.wrong::after{
  content: '✕';
  background: rgba(244,63,94,0.95);
  color: #fff;
}

.results{ margin-top: 10px; }

.ranking-list{ margin: 10px 0 0; padding-left: 18px; text-align: left; }

.result-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 860px){
  .players-3{ grid-template-columns: 1fr; }
  .players-2{ grid-template-columns: 1fr; }
  .players-4{ grid-template-columns: 1fr; }
  .player-panel{ min-height: 280px; }
}