/* =========================================================
   🎬 MOVIES IN DETAIL – Rediseño estilo RingoQuiz
   Tema oscuro con gradientes, glassmorphism y glows
   ========================================================= */

/* =========================
   🎨 VARIABLES GLOBALES
   ========================= */
:root {
  /* Fondos */
  --bg-primary: #0d1117;
  --bg-secondary: #151b23;
  --bg-elevated: #1a212b;
  --bg-card: rgba(21, 27, 35, 0.92);

  /* Textos */
  --text-primary: #e8edf2;
  --text-secondary: #9aa7b5;
  --text-muted: #6f7d8c;

  /* Acentos */
  --accent-primary: #5f8fb5;
  --accent-secondary: #8aa4b8;
  --accent-tertiary: #b8955f;
  --accent-gold: #b8955f;

  /* Estados */
  --success: #3f8f68;
  --error: #c95a5a;
  --warning: #b8955f;

  /* Bordes y sombras */
  --border-color: rgba(203, 213, 225, 0.12);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
  
  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  
  /* Transiciones */
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;
  
  /* Layout */
  --container: 1120px;
  --gap: 12px;
}

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f3f6f9;
  --bg-secondary: #e6ebf1;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.92);
  --text-primary: #1c2530;
  --text-secondary: #546578;
  --text-muted: #7a8896;
  --accent-primary: #456b88;
  --accent-secondary: #607d95;
  --accent-tertiary: #8d6f45;
  --accent-gold: #8d6f45;
  --success: #2f7755;
  --error: #b54848;
  --warning: #8d6f45;
  --border-color: rgba(28, 37, 48, 0.12);
  --shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 14px 32px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.14);
}

/* =========================
   🔄 RESET Y BASE
   ========================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg-primary);
  background-image: 
    radial-gradient(circle at top, rgba(95, 143, 181, 0.12) 0%, transparent 42%),
    radial-gradient(circle at bottom right, rgba(184, 149, 95, 0.08) 0%, transparent 36%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  padding: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(circle at top, rgba(69, 107, 136, 0.1) 0%, transparent 42%),
    radial-gradient(circle at bottom right, rgba(141, 111, 69, 0.08) 0%, transparent 36%);
}

/* Contenedor principal */
body > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.brand-link {
  text-decoration: none;
  color: inherit;
}

.brand-link:hover {
  color: inherit;
  text-decoration: none;
}

.theme-toggle {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  right: max(12px, calc(env(safe-area-inset-right) + 8px));
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  z-index: 100002;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.info-toggle {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  left: max(12px, calc(env(safe-area-inset-left) + 8px));
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  z-index: 100002;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

.info-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.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;
}

.language-switcher {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  right: calc(max(12px, calc(env(safe-area-inset-right) + 8px)) + 54px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  z-index: 100001;
}

.language-switcher-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.language-select {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding-right: 6px;
  outline: none;
  cursor: pointer;
}

.language-select option {
  color: #11161d;
}

/* =========================
   🎬 HEADER / TÍTULO
   ========================= */
.topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.titulo {
  display: inline-flex;
  align-items: center;
  gap: 0;  /* Sin gap para que parezca "Detail" */
  padding: 14px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

.titulo span:first-child {
  margin-right: -3px;  /* Acercar "Movies in" al icono */
}

.titulo span:last-child {
  margin-left: -10px;   /* Acercar "etail" al icono */
}

.titulo span {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary) 0%, #c6d2dd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
}

html[data-theme="light"] .titulo span {
  background: none;
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}

.titulo img {
  width: 70px;
  height: auto;
  margin-right: -2px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-md), 0 0 30px rgba(99, 102, 241, 0.3); }
  50% { transform: scale(1.02); box-shadow: var(--shadow-lg), 0 0 50px rgba(99, 102, 241, 0.4); }
}

/* =========================
   🔍 BUSCADOR PRINCIPAL
   ========================= */
.entrada-con-borrar {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 14px;
}

.entrada-con-borrar input {
  width: 100%;
  height: 62px;
  padding: 0 60px 0 20px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: all var(--transition);
}

.entrada-con-borrar input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(95, 143, 181, 0.18), var(--shadow-md);
}

.entrada-con-borrar input::placeholder {
  color: var(--text-muted);
}

.borrar-x {
  position: absolute;
  right: 12px;
  top: 31px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  user-select: none;
  z-index: 2;
  line-height: 1;
  padding-bottom: 2px;
}

.borrar-x:hover {
  transform: translateY(-50%);
  color: var(--text-primary);
  border-color: rgba(138, 164, 184, 0.3);
  box-shadow: var(--shadow-md);
}

.borrar-x:active {
  transform: translateY(-50%) scale(0.95);
}

/* Sugerencias dropdown */
#sugerencias {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

#sugerencias[aria-hidden="true"], 
#sugerencias:empty { 
  display: none !important; 
}

#sugerencias li {
  padding: 12px 16px;
  cursor: pointer;
  transition: all var(--transition);
  border-bottom: 1px solid var(--border-color);
}

#sugerencias li:last-child {
  border-bottom: none;
}

#sugerencias li:hover {
  background: rgba(95, 143, 181, 0.12);
  color: var(--text-primary);
}

/* =========================
   💡 AYUDA DE BOTONES
   ========================= */
#ayuda-botones {
  display: block;
  width: fit-content;
  max-width: 90vw;
  margin: 0 auto 14px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.favorites-block {
  margin: 0 auto 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.favorites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.favorites-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.favorites-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.favorites-action-button,
.favorites-share-button,
.favorites-clear-button {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 0.9rem;
  flex-direction: row;
  gap: 8px;
}

.favorites-action-button {
  background: linear-gradient(180deg, rgba(167, 93, 174, 0.98), rgba(137, 67, 145, 0.98) 58%, rgba(102, 47, 108, 0.99));
  border-color: rgba(230, 181, 233, 0.34);
}

.favorites-share-button {
  background: linear-gradient(180deg, rgba(121, 28, 214, 0.96), rgba(88, 0, 125, 0.98));
  border-color: rgba(220, 181, 255, 0.28);
}

.favorites-clear-button {
  background: linear-gradient(180deg, rgba(74, 46, 113, 0.98), rgba(52, 31, 83, 0.98) 58%, rgba(38, 23, 61, 0.99));
  border-color: rgba(159, 126, 212, 0.28);
}

.favorites-note,
.favorites-empty {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.favorites-empty {
  margin: 0;
}

.favorites-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shared-favorites-prompt {
  margin: 12px 0 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
}

.shared-favorites-text {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.shared-favorites-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.shared-favorites-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(121, 28, 214, 0.16);
  border: 1px solid rgba(220, 181, 255, 0.2);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.shared-favorites-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.favorites-list[hidden],
.favorites-empty[hidden],
.shared-favorites-prompt[hidden] {
  display: none !important;
}

.favorite-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
}

.favorite-item-label,
.favorite-item-remove {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 0.88rem;
  flex-direction: row;
}

.favorite-item-label {
  max-width: min(320px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(121, 28, 214, 0.96), rgba(88, 0, 125, 0.98));
  border-color: rgba(220, 181, 255, 0.28);
}

.favorite-item-remove {
  width: 38px;
  min-width: 38px;
  padding: 0;
  justify-content: center;
  background: linear-gradient(180deg, rgba(90, 58, 137, 0.98), rgba(64, 40, 99, 0.98));
  border-color: rgba(177, 145, 228, 0.28);
}

html[data-theme="light"] .favorite-item {
  background: rgba(69, 107, 136, 0.04);
}

/* =========================
   🔘 GRID DE BOTONES
   ========================= */
.botones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  margin: 12px auto 18px;
  width: 100%;
  align-items: stretch;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  min-height: 82px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  background:
    linear-gradient(180deg, rgba(82, 63, 124, 0.98) 0%, rgba(58, 42, 95, 0.98) 58%, rgba(40, 30, 68, 0.99) 100%);
  border: 1px solid rgba(178, 155, 224, 0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(9, 13, 18, 0.36),
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.botones > button {
  height: 100%;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.07), transparent 54%);
  opacity: 0.95;
  pointer-events: none;
}

button:hover::before {
  opacity: 1;
}

button:hover {
  transform: translateY(-1px);
  border-color: rgba(196, 174, 236, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(9, 13, 18, 0.42),
    0 16px 30px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(144, 112, 211, 0.08);
}

button:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.14);
}

button small {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
  font-weight: 400;
}

/* Variantes de botones por fila */
.fila1 button,
button.fila1 {
  background:
    linear-gradient(180deg, rgba(167, 93, 174, 0.98) 0%, rgba(137, 67, 145, 0.98) 58%, rgba(102, 47, 108, 0.99) 100%);
  border-color: rgba(230, 181, 233, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(230, 181, 233, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(9, 13, 18, 0.34),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.fila1 button:hover,
button.fila1:hover {
  border-color: rgba(241, 201, 244, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(241, 201, 244, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(9, 13, 18, 0.36),
    0 16px 30px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(185, 102, 192, 0.16);
}

.fila2 button,
button.fila2 {
  background:
    linear-gradient(180deg, rgba(121, 28, 214, 0.98) 0%, rgba(97, 18, 184, 0.98) 58%, rgba(74, 11, 142, 0.99) 100%);
  border-color: rgba(206, 155, 255, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(206, 155, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(9, 13, 18, 0.34),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.fila2 button:hover,
button.fila2:hover {
  border-color: rgba(220, 181, 255, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(220, 181, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(9, 13, 18, 0.36),
    0 16px 30px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(123, 18, 214, 0.2);
}

.fila3 button,
button.fila3 {
  background:
    linear-gradient(180deg, rgba(102, 13, 145, 0.98) 0%, rgba(88, 0, 125, 0.98) 58%, rgba(66, 0, 95, 0.99) 100%);
  border-color: rgba(195, 132, 230, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(195, 132, 230, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(9, 13, 18, 0.34),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.fila3 button:hover,
button.fila3:hover {
  border-color: rgba(211, 152, 243, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(211, 152, 243, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(9, 13, 18, 0.36),
    0 16px 30px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(102, 0, 141, 0.2);
}

/* Botones especiales */
#btn-stremio {
  background:
    linear-gradient(180deg, rgba(149, 76, 219, 0.98) 0%, rgba(110, 36, 190, 0.98) 58%, rgba(82, 12, 150, 0.99) 100%);
  border-color: rgba(228, 187, 255, 0.44);
  box-shadow:
    inset 0 0 0 1px rgba(228, 187, 255, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(9, 13, 18, 0.34),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

#btn-stremio:hover {
  border-color: rgba(238, 204, 255, 0.64);
  box-shadow:
    inset 0 0 0 1px rgba(238, 204, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(9, 13, 18, 0.36),
    0 16px 30px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(155, 76, 232, 0.22);
}

#btn-omni {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

html[data-theme="light"] .botones button,
html[data-theme="light"] .top-links button,
html[data-theme="light"] .guess-form button {
  color: #eef4fa;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .botones button small,
html[data-theme="light"] .top-links button small,
html[data-theme="light"] .guess-form button small {
  color: rgba(238, 244, 250, 0.8);
  opacity: 1;
}

/* Estado tocado */
.boton-tocado {
  box-shadow: 0 0 0 3px rgba(95, 143, 181, 0.2), var(--shadow-md) !important;
}

/* Focus visible accesible */
:focus-visible {
  outline: 3px solid rgba(95, 143, 181, 0.5);
  outline-offset: 2px;
}

/* =========================
   🎮 SECCIÓN JUEGO (GUESS)
   ========================= */
#description {
  text-align: center;
  margin-bottom: 8px;
}

#description img {
  display: block;
  margin: 0 auto 14px;
  max-width: 60%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition);
}

.guess-image {
  height: auto;
  max-width: 72%;
  aspect-ratio: 1675 / 704;
}

#description img:hover {
  transform: scale(1.01);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
}

#description h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 12px 0 10px;
  background: linear-gradient(135deg, var(--text-primary), #c7d0da);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] #description h1 {
  background: none;
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}

#description p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
}

.guess-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 8px;
}

.guess-title {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(180deg, #c0a06f, #aa8758);
  color: #11161d;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.guess-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}

.guess-result {
  margin-top: 10px;
  font-size: 1.125rem;
  text-align: center;
  color: var(--text-primary);
  grid-column: 1 / -1;
}

#userGuess {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  outline: none;
  transition: all var(--transition);
  margin-bottom: 0;
}

#userGuess:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 95, 0.18), var(--shadow-sm);
}

.stremio-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(48, 37, 74, 0.98), rgba(36, 28, 56, 0.98));
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid rgba(130, 109, 184, 0.32);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.guess-form button {
  min-height: 52px;
  padding: 0 18px;
  white-space: nowrap;
}

.stremio-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: white;
  text-decoration: none;
}

/* =========================
   👤 FIRMA / LOGO PERSONAL
   ========================= */
.firma-con-video {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: -28px 0 10px;
}

.logo-firma {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);  /* Cuadrado con bordes redondeados como RingoQuiz */
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: 4px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  object-fit: cover;
}

.logo-firma:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

/* =========================
   📊 SECCIONES TOP5
   ========================= */
.top5 {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

.top5 h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--text-primary), #cad3dc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] .top5 h2,
html[data-theme="light"] .mid-welcome-right h1 {
  background: none;
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}

.top-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-links li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.top-links li:last-child {
  border-bottom: none;
}

.top-links button {
  min-width: auto;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 0.82rem;
}

.options-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.options-help {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.results-block {
  display: none;
}

.top10-block {
  margin-top: 16px;
}

.didyouknow {
  margin: 18px auto 0;
  max-width: 220px;
  border-radius: 22px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.didyouknow img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  cursor: pointer;
}

/* =========================
   🎭 MODALES
   ========================= */
#modalFicha,
#modalImagen,
#modalYoutube,
#modalPeople,
#modalTrailer,
#modalLocalizaciones {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#modalFicha {
  align-items: flex-start;
  padding-top: 40px;
}

#modalFicha > div,
.wtw-sheet,
.wm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 28px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

#modalFicha button.close-ficha,
.wtw-close,
.wm-close {
  background: linear-gradient(180deg, #b85d5d, #a34f4f);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

#modalFicha button.close-ficha:hover,
.wtw-close:hover,
.wm-close:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Modal de imagen */
#modalImagen img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Modal YouTube */
#modalYoutube > div,
.youtube-content {
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Where to watch overlay */
.wm-overlay,
.wtw-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 20, 0.78);
  backdrop-filter: blur(6px);
  z-index: 9999;
  padding: 20px;
}

.wm-card h3,
.wtw-sheet h3 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.wm-list,
.wtw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.wm-list li a,
.wtw-list li a {
  color: var(--accent-secondary);
}

.trakt-search-links li a {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(122, 92, 183, 0.96), rgba(87, 63, 136, 0.98));
  border: 1px solid rgba(230, 181, 233, 0.28);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.tmdb-upcoming-list {
  gap: 14px;
}

.tmdb-upcoming-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
}

.tmdb-upcoming-poster {
  width: 88px;
  height: 132px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.tmdb-upcoming-body {
  min-width: 0;
}

.tmdb-upcoming-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.tmdb-upcoming-body h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.tmdb-upcoming-body p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.tmdb-upcoming-overview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tmdb-upcoming-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #fff !important;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(121, 28, 214, 0.96), rgba(88, 0, 125, 0.98));
  border: 1px solid rgba(220, 181, 255, 0.28);
}

html[data-theme="light"] .tmdb-upcoming-card {
  background: rgba(69, 107, 136, 0.04);
}

.wm-actions,
.wtw-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* =========================
   📰 TICKER DE NOTICIAS
   ========================= */
.news-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, transparent, rgba(13, 17, 23, 0.96));
  padding: 10px 0;
  overflow: hidden;
  z-index: 100;
}

.news-item {
  display: inline-block;
  white-space: nowrap;
  animation: tickerAnim 240s linear infinite;
}

.news-item a {
  color: var(--text-secondary);
  margin-right: 50px;
  font-size: 0.88rem;
  transition: color var(--transition);
}

.news-item a:hover {
  color: var(--text-primary);
}

@keyframes tickerAnim {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* =========================
   🎉 WELCOME MODAL
   ========================= */
.mid-welcome {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, 0.86);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mid-welcome.hidden {
  display: none !important;
}

.mid-welcome-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  max-width: 720px;
  width: 92%;
  padding: 32px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  position: relative;
  animation: slideUp 0.5s ease;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mid-welcome-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mid-welcome-left img {
  max-width: 140px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.mid-welcome-right h1 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--text-primary), #cad3dc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mid-welcome-right p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  min-height: 4.8em;
}

.mid-welcome-updates {
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
}

.mid-welcome-updates h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mid-welcome-updates-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  display: grid;
  gap: 8px;
}

.mid-welcome-updates-list li {
  line-height: 1.45;
}

.mid-welcome-start {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(167, 93, 174, 0.98), rgba(137, 67, 145, 0.98) 58%, rgba(102, 47, 108, 0.99));
  color: white;
  border: 1px solid rgba(230, 181, 233, 0.34);
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.mid-welcome-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22), 0 0 20px rgba(185, 102, 192, 0.16);
}

.mid-welcome-links {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.mid-welcome-links a {
  color: var(--accent-secondary);
}

.info-modal-content {
  display: grid;
  gap: 14px;
  color: var(--text-secondary);
}

.info-modal-content p {
  margin: 0;
}

.info-modal-content h4 {
  margin: 6px 0 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.info-modal-content ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.info-modal-content li {
  line-height: 1.5;
}

.info-modal-content strong {
  color: var(--text-primary);
}

.mid-welcome-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  transition: all var(--transition);
}

.mid-welcome-close:hover {
  background: #a34f4f;
  border-color: #a34f4f;
  color: white;
}

/* =========================
   🦶 FOOTER
   ========================= */
footer {
  margin-top: 60px;
  padding: 30px 20px 64px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border-color);
  background: linear-gradient(180deg, transparent, rgba(21, 27, 35, 0.4));
}

footer p {
  margin: 8px 0;
}

.site-footer {
  margin-top: 28px;
  padding: 20px 20px 36px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.ai-promo {
  margin-top: 24px;
  text-align: center;
}

.ai-promo-description {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.support-block {
  margin-top: 8px;
  text-align: center;
}

.support-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2d91b8, #237a9b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.support-link:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.friend-apps {
  margin-top: 28px;
  text-align: center;
}

.friend-apps-title {
  margin-bottom: 22px;
  font-size: 1rem;
  color: var(--text-secondary);
}

.friend-apps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.friend-app-card {
  text-align: center;
  width: 100%;
  max-width: 260px;
  padding: 18px 16px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.friend-app-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.friend-app-icon-shell--plain {
  background: transparent;
}

.friend-app-image {
  display: block;
  width: 70px;
  height: 70px;
}

.store-badge {
  width: auto;
  height: 40px;
  margin-bottom: 8px;
  cursor: pointer;
}

.friend-app-link {
  font-size: 0.9rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.thank-you-block {
  text-align: center;
  color: var(--text-secondary);
}

.ficha-artistica-container {
  margin-top: 20px;
}

.ficha-artistica-container--top {
  margin-top: 15px;
}

#ayudaTexto {
  min-height: 0;
}

/* =========================
   📱 RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  body {
    padding: 12px;
  }

  .language-switcher {
    right: calc(max(12px, calc(env(safe-area-inset-right) + 8px)) + 48px);
    gap: 6px;
    padding: 0 8px;
  }

  .info-toggle {
    left: max(12px, calc(env(safe-area-inset-left) + 8px));
  }

  .language-select {
    font-size: 0.82rem;
    max-width: 84px;
  }
  
  .titulo {
    padding: 12px 18px;
  }
  
  .titulo span {
    font-size: 1.4rem;
  }
  
  .titulo img {
    width: 50px;
    margin-right: -1px;
  }
  
  .botones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  
  button {
    padding: 11px 9px;
    font-size: 0.85rem;
    min-height: 76px;
  }
  
  #description img,
  .guess-image {
    max-width: 90%;
  }

  .guess-form {
    grid-template-columns: 1fr;
  }

  .guess-form button {
    width: 100%;
    min-height: 50px;
  }

  .firma-con-video {
    margin: -18px 0 8px;
  }
  
  .mid-welcome-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
    width: 100%;
    max-height: calc(100dvh - 24px);
  }
  
  .mid-welcome-left {
    order: -1;
  }
  
  .mid-welcome-left img {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .info-toggle {
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 0.86rem;
  }

  .mid-welcome {
    align-items: flex-start;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px;
  }

  .mid-welcome-card {
    padding: 20px 18px 18px;
    gap: 18px;
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
  }

  .mid-welcome-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    right: auto;
    z-index: 2;
  }

  .botones {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .titulo span {
    font-size: 1.2rem;
  }
  
  .stremio-button {
    font-size: 0.8rem;
    padding: 10px 14px;
  }
  
  .guess-title {
    font-size: 1rem;
    padding: 10px 18px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .botones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 600px) {
  .friend-apps-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tmdb-upcoming-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .tmdb-upcoming-poster {
    width: 72px;
    height: 108px;
  }
}

/* =========================
   ♿ ACCESIBILIDAD
   ========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .news-item {
    animation: none;
  }
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-secondary);
  border-radius: 5px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* =========================
   🎬 AI CHAT BUTTON
   ========================= */
.ai-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(180deg, #375269, #2d4358);
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: 1px solid rgba(138, 164, 184, 0.28);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.ai-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: white;
  text-decoration: none;
}

/* =========================
   📦 RESULTADOS / CARDS
   ========================= */
.resultado {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 16px 0;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

.resultado a {
  color: var(--accent-primary);
}

/* Iframe visor */
iframe#visor {
  width: 100%;
  border: none;
  margin-top: 20px;
  border-radius: var(--radius-lg);
}

#visor[src=""], 
#visor:empty { 
  display: none; 
  height: 0 !important; 
}

/* =========================================================
   PATRÓN 2 · REDISEÑO ARQUITECTÓNICO AZUL PREMIUM
   Cambios visuales/estructurales por CSS. No toca lógica JS.
   ========================================================= */
:root {
  --p2-bg-0: #020713;
  --p2-bg-1: #061326;
  --p2-bg-2: #0b2138;
  --p2-panel: rgba(10, 22, 39, 0.72);
  --p2-panel-strong: rgba(12, 28, 50, 0.86);
  --p2-border: rgba(118, 173, 228, 0.24);
  --p2-border-strong: rgba(141, 200, 255, 0.42);
  --p2-text: #f3f8ff;
  --p2-muted: #aab8c9;
  --p2-soft: #6f849b;
  --p2-blue: #4ea4ff;
  --p2-cyan: #78e5ff;
  --p2-ice: #c8eeff;
  --p2-ink: #07111f;
  --p2-gold: #ffd36b;
  --p2-radius-xl: 38px;
  --p2-radius-lg: 28px;
  --p2-radius-md: 20px;
  --p2-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
  --p2-glow: 0 0 42px rgba(78, 164, 255, 0.14), 0 0 90px rgba(120, 229, 255, 0.08);
  --bg-primary: var(--p2-bg-0);
  --bg-secondary: rgba(9, 21, 39, 0.86);
  --bg-elevated: rgba(13, 31, 55, 0.88);
  --bg-card: var(--p2-panel);
  --text-primary: var(--p2-text);
  --text-secondary: var(--p2-muted);
  --text-muted: var(--p2-soft);
  --accent-primary: var(--p2-cyan);
  --accent-secondary: var(--p2-blue);
  --accent-tertiary: var(--p2-ice);
  --accent-gold: var(--p2-gold);
  --border-color: var(--p2-border);
  --radius-md: var(--p2-radius-md);
  --radius-lg: var(--p2-radius-lg);
  --radius-xl: var(--p2-radius-xl);
  --container: 1280px;
}

html[data-theme="light"] {
  --p2-bg-0: #eef7ff;
  --p2-bg-1: #dcecff;
  --p2-bg-2: #c7e1fb;
  --p2-panel: rgba(244, 250, 255, 0.82);
  --p2-panel-strong: rgba(255, 255, 255, 0.92);
  --p2-border: rgba(25, 80, 130, 0.18);
  --p2-border-strong: rgba(25, 80, 130, 0.28);
  --p2-text: #07111f;
  --p2-muted: #40546c;
  --p2-soft: #63788e;
  --bg-primary: var(--p2-bg-0);
  --bg-secondary: rgba(244, 250, 255, 0.86);
  --bg-elevated: rgba(255, 255, 255, 0.92);
  --bg-card: var(--p2-panel);
  --text-primary: var(--p2-text);
  --text-secondary: var(--p2-muted);
  --text-muted: var(--p2-soft);
  --border-color: var(--p2-border);
}

html {
  scroll-behavior: smooth;
}

body {
  padding: 22px;
  color: var(--p2-text);
  background:
    radial-gradient(circle at 7% 6%, rgba(78, 164, 255, 0.26), transparent 28vw),
    radial-gradient(circle at 92% 12%, rgba(120, 229, 255, 0.18), transparent 26vw),
    radial-gradient(circle at 72% 72%, rgba(17, 92, 173, 0.18), transparent 34vw),
    linear-gradient(135deg, var(--p2-bg-0) 0%, var(--p2-bg-1) 46%, #020712 100%) !important;
  background-attachment: fixed;
  letter-spacing: -0.018em;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background-image:
    linear-gradient(rgba(142, 196, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 196, 255, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%);
}

body::after {
  background:
    radial-gradient(circle at 22% 28%, rgba(80, 147, 221, 0.12), transparent 22vw),
    radial-gradient(circle at 78% 62%, rgba(120, 229, 255, 0.12), transparent 30vw);
  filter: blur(20px);
}

body > * {
  max-width: none;
}

.p2-page,
.mid-welcome-card {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Controles flotantes */
.theme-toggle,
.info-toggle,
.language-switcher,
.borrar-x {
  background: linear-gradient(145deg, rgba(18, 39, 68, 0.84), rgba(5, 13, 27, 0.78)) !important;
  border: 1px solid var(--p2-border-strong) !important;
  color: var(--p2-text) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 0 26px rgba(78,164,255,0.14) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.language-switcher {
  padding: 0 14px !important;
  min-width: 176px;
  justify-content: center;
}

.language-select {
  color: var(--p2-text) !important;
  font-weight: 800;
}

/* HERO editorial tipo patrón 2 */
.p2-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  gap: 28px;
  align-items: stretch;
  margin: 28px auto 28px;
}

#description.p2-hero-card,
.topbar,
.p2-command-center,
.top5,
.ai-promo,
.support-block,
.friend-apps,
.favorites-block,
.resultado,
.didyouknow {
  border: 1px solid var(--p2-border) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    linear-gradient(135deg, rgba(10, 23, 43, 0.86), rgba(7, 15, 29, 0.78)) !important;
  box-shadow: var(--p2-shadow), var(--p2-glow), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

#description.p2-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
  grid-template-areas:
    "copy image"
    "guess image";
  gap: 26px;
  min-height: 580px;
  padding: clamp(28px, 5vw, 58px) !important;
  border-radius: 46px !important;
  overflow: hidden;
  text-align: left !important;
}

#description.p2-hero-card::before {
  content: "MOVIES IN DETAIL";
  position: absolute;
  left: clamp(28px, 5vw, 58px);
  top: 28px;
  color: var(--p2-cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.94;
}

#description.p2-hero-card::after {
  content: "DETAIL";
  position: absolute;
  right: -0.08em;
  bottom: -0.17em;
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: -0.08em;
  color: rgba(255,255,255,0.028);
  pointer-events: none;
}

#description.p2-hero-card h1 {
  grid-area: copy;
  align-self: end;
  margin: 64px 0 0 !important;
  max-width: 720px;
  font-size: clamp(3.4rem, 7.4vw, 7.8rem) !important;
  line-height: 0.86 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  text-align: left;
  background: linear-gradient(100deg, #ffffff 0%, #cceeff 38%, #79caff 72%, #d9f7ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

#description.p2-hero-card h1 span {
  display: inline;
}

#description.p2-hero-card p {
  grid-area: copy;
  align-self: end;
  margin: 0 0 0 !important;
  padding-top: clamp(230px, 30vw, 390px);
  max-width: 650px;
  text-align: left !important;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
  line-height: 1.65 !important;
  color: var(--p2-muted) !important;
}

#description.p2-hero-card .guess-image {
  grid-area: image;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none !important;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: 36px !important;
  border: 1px solid var(--p2-border-strong) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.42), 0 0 64px rgba(78,164,255,0.14) !important;
  opacity: 0.92;
}

.guess-buttons,
.guess-form {
  grid-area: guess;
  align-self: end;
  justify-content: flex-start !important;
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.guess-buttons {
  margin-top: 18px !important;
  margin-bottom: 16px !important;
}

.guess-title,
.stremio-button,
.guess-form button {
  border-radius: 999px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border: 1px solid var(--p2-border-strong) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.guess-title {
  display: inline-flex !important;
  align-items: center;
  background: linear-gradient(135deg, #ffe68a 0%, #ffc861 48%, #63d7ff 100%) !important;
  color: #061326 !important;
}

.stremio-button,
.guess-form button {
  background: linear-gradient(135deg, rgba(17, 57, 96, 0.95), rgba(34, 96, 148, 0.88)) !important;
  color: #f7fbff !important;
}

.guess-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
}

#userGuess,
.entrada-con-borrar input {
  height: 66px !important;
  border-radius: 999px !important;
  background: rgba(2, 9, 20, 0.72) !important;
  border: 1px solid rgba(142, 196, 255, 0.22) !important;
  color: var(--p2-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 42px rgba(0,0,0,0.24) !important;
}

/* Panel lateral de marca/búsqueda */
.topbar {
  position: relative;
  display: grid !important;
  align-content: space-between;
  gap: 24px !important;
  min-height: 580px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 46px !important;
  overflow: hidden;
  margin: 0 !important;
}

.topbar::before {
  content: "METASEARCH";
  color: var(--p2-cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.42em;
}

.topbar::after {
  content: "LINKS";
  position: absolute;
  right: -0.05em;
  bottom: -0.12em;
  font-size: clamp(7rem, 14vw, 14rem);
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: -0.08em;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
}

.titulo {
  justify-self: start;
  align-self: center;
  padding: 28px 32px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(120,229,255,0.13), transparent 42%),
    linear-gradient(145deg, rgba(16, 38, 67, 0.82), rgba(5, 13, 27, 0.62)) !important;
  border: 1px solid var(--p2-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 70px rgba(0,0,0,0.3) !important;
}

.titulo span {
  font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  background: linear-gradient(100deg, #ffffff 0%, #bfeaff 44%, #5cadff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.titulo img {
  width: clamp(58px, 7vw, 86px) !important;
  filter: drop-shadow(0 18px 30px rgba(78,164,255,0.22)) !important;
}

.entrada-con-borrar {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  z-index: 2;
}

/* Centro de herramientas tipo dashboard/bento */
.p2-command-center {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 46px !important;
  overflow: hidden;
  margin-bottom: 34px;
}

.p2-command-center::before {
  content: "QUICK ACTIONS";
  display: block;
  color: var(--p2-cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.42em;
  margin: 0 0 18px;
}

#ayuda-botones {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 0 22px !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  background: rgba(3, 12, 25, 0.62) !important;
  border: 1px solid var(--p2-border) !important;
  box-shadow: none !important;
}

.favorites-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 20px;
  align-items: center;
  padding: 28px !important;
  border-radius: 34px !important;
  margin: 0 0 22px !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(78,164,255,0.16), transparent 38%),
    linear-gradient(135deg, rgba(14, 32, 57, 0.88), rgba(5, 13, 27, 0.74)) !important;
}

.favorites-head {
  display: contents !important;
}

.favorites-title {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
  line-height: 0.95;
  font-weight: 950 !important;
  letter-spacing: -0.07em;
}

.favorites-actions {
  justify-self: end;
}

.favorites-note,
.favorites-empty,
#favoritesList,
.shared-favorites-prompt {
  grid-column: 1 / -1;
}

/* Bento real: cambia ritmo, tamaños y arquitectura visual */
.p2-command-center .botones {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(92px, auto);
  gap: 16px !important;
  margin: 16px 0 0 !important;
  align-items: stretch;
}

.p2-command-center .botones > button,
.options-panel > button,
.top-links button,
.favorites-action-button,
.favorites-share-button,
.favorites-clear-button,
.favorite-item-label,
.favorite-item-remove,
.ai-button,
.support-link,
.tmdb-upcoming-link,
.trakt-search-links li a {
  position: relative;
  min-height: 94px !important;
  padding: 20px 22px !important;
  border-radius: 30px !important;
  color: #f7fbff !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(157, 217, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(22, 58, 96, 0.92) 0%, rgba(12, 42, 74, 0.92) 48%, rgba(5, 18, 38, 0.96) 100%) !important;
  border: 1px solid rgba(132, 194, 255, 0.26) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  overflow: hidden;
  isolation: isolate;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem) !important;
  font-weight: 850 !important;
}

.p2-command-center .botones > button::before,
.options-panel > button::before,
.top-links button::before,
.favorites-action-button::before,
.favorites-share-button::before,
.favorites-clear-button::before,
.ai-button::before,
.support-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.1), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(120,229,255,0.12), transparent 36%);
  pointer-events: none;
}

.p2-command-center .botones > button::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(132,194,255,0.18);
  background: rgba(255,255,255,0.035);
  opacity: 0.75;
}

.p2-command-center .botones > button:hover,
.options-panel > button:hover,
.top-links button:hover,
.favorites-action-button:hover,
.favorites-share-button:hover,
.favorites-clear-button:hover,
.ai-button:hover,
.support-link:hover {
  transform: translateY(-4px) scale(1.01) !important;
  border-color: rgba(168, 218, 255, 0.54) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.34), 0 0 46px rgba(78,164,255,0.18), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* Primera parrilla: tamaños bento */
#btn-where { grid-column: span 5; grid-row: span 2; }
#btn-trailer { grid-column: span 3; grid-row: span 2; }
#btn-bso { grid-column: span 2; }
#btn-review { grid-column: span 2; }
#btn-bloopers { grid-column: span 4; }
#btn-ficha { grid-column: span 4; grid-row: span 2; }
#btn-fullcredits { grid-column: span 4; }
#btn-filmaffinity { grid-column: span 3; }
#btn-trakt { grid-column: span 3; }
#btn-omdb { grid-column: span 3; }
#btn-tmdb { grid-column: span 3; }
#btn-trivia { grid-column: span 3; }
#btn-makingof { grid-column: span 3; }
#btn-people { grid-column: span 3; }
#btn-awards { grid-column: span 3; }
#btn-critics { grid-column: span 4; }
#btn-userreviews { grid-column: span 4; }
#btn-imagenes { grid-column: span 2; }
#btn-canciones { grid-column: span 2; }

/* Segunda parrilla: herramientas como stack visual */
.botones:not(.fila1) .boton-reddit-opcion { grid-column: span 3; }
.botones:not(.fila1) button[data-help="locations"] { grid-column: span 6; }
#btn-guion,
#btn-guion2,
#btn-guion3 { grid-column: span 4; }
#btnSimilar { grid-column: span 5; grid-row: span 2; }
#btn-clips,
#btn-clips2 { grid-column: span 3; }
#btn-stremio { grid-column: span 4; }
#btn-venir-movie,
#btn-venir-show { grid-column: span 6; min-height: 150px !important; }

/* Diferenciación visual por importancia, sin rosa/lila base */
#btn-where,
#btnSimilar,
#btn-venir-movie,
#btn-venir-show {
  background:
    radial-gradient(circle at 20% 18%, rgba(203, 238, 255, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(36, 93, 148, 0.95) 0%, rgba(9, 41, 79, 0.96) 54%, rgba(3, 13, 30, 0.98) 100%) !important;
}

#btn-trailer,
#btn-bso,
#btn-review,
#btn-ficha,
#btn-stremio {
  background:
    radial-gradient(circle at 20% 16%, rgba(120, 229, 255, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(17, 70, 120, 0.96) 0%, rgba(12, 38, 80, 0.96) 58%, rgba(3, 13, 30, 0.98) 100%) !important;
}

#btn-filmaffinity,
#btn-trakt,
#btn-omdb,
#btn-tmdb,
#btn-critics,
#btn-userreviews {
  background:
    radial-gradient(circle at 14% 18%, rgba(158, 205, 255, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(18, 48, 83, 0.94) 0%, rgba(7, 27, 55, 0.96) 100%) !important;
}

/* Paneles inferiores tipo manifiesto/campaña */
.top5 {
  position: relative;
  padding: clamp(26px, 4vw, 52px) !important;
  border-radius: 42px !important;
  margin: 30px auto !important;
  overflow: hidden;
}

.top5::before {
  content: "LIVE DATA";
  display: block;
  color: var(--p2-cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.42em;
  margin-bottom: 28px;
}

.top5 h2,
.barra-top10 {
  font-size: clamp(2.4rem, 5.3vw, 6rem) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  color: var(--p2-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  margin-bottom: 30px !important;
}

#trakt-trending-movies,
#trakt-trending-shows,
.top-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#trakt-trending-movies li,
#trakt-trending-shows li,
.top-links li {
  list-style: none;
  border: 1px solid var(--p2-border) !important;
  border-radius: 26px;
  padding: 18px !important;
  background: rgba(3, 12, 25, 0.45) !important;
}

.barra-top10 {
  max-width: 1280px;
  margin: 48px auto 18px;
  padding: 0 10px;
}

.top-links li {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

.top-links button {
  min-height: 54px !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Did you know y promos como bloques tipo perfil premium */
.didyouknow {
  max-width: 420px !important;
  padding: 18px !important;
  border-radius: 34px !important;
}

.ai-promo,
.support-block,
.friend-apps {
  border-radius: 42px !important;
  padding: clamp(28px, 4vw, 46px) !important;
  margin: 30px auto !important;
  text-align: center;
}

.ai-button,
.support-link {
  display: inline-flex !important;
  min-height: 58px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  text-align: center !important;
}

/* Modales y welcome */
.mid-welcome-card,
#modalFicha > div,
.wtw-sheet,
.wm-card {
  border-radius: 42px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    rgba(7, 18, 34, 0.92) !important;
  border: 1px solid var(--p2-border) !important;
}

/* Responsive real */
@media (max-width: 1040px) {
  .p2-hero-stage {
    grid-template-columns: 1fr;
  }

  #description.p2-hero-card,
  .topbar {
    min-height: auto;
  }

  #description.p2-hero-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "copy"
      "guess";
  }

  #description.p2-hero-card h1 {
    margin-top: 22px !important;
  }

  #description.p2-hero-card p {
    padding-top: 0;
    grid-area: copy;
  }

  #description.p2-hero-card .guess-image {
    min-height: 320px;
  }

  .p2-command-center .botones {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  #btn-where,
  #btn-trailer,
  #btn-ficha,
  #btnSimilar,
  #btn-venir-movie,
  #btn-venir-show,
  .botones:not(.fila1) button[data-help="locations"] {
    grid-column: span 4;
  }

  #btn-bso,
  #btn-review,
  #btn-filmaffinity,
  #btn-trakt,
  #btn-omdb,
  #btn-tmdb,
  #btn-trivia,
  #btn-makingof,
  #btn-people,
  #btn-awards,
  #btn-critics,
  #btn-userreviews,
  #btn-imagenes,
  #btn-canciones,
  #btn-guion,
  #btn-guion2,
  #btn-guion3,
  #btn-clips,
  #btn-clips2,
  #btn-stremio,
  .botones:not(.fila1) .boton-reddit-opcion {
    grid-column: span 4;
  }
}

@media (max-width: 680px) {
  body {
    padding: 12px;
  }

  .language-switcher {
    min-width: 118px;
  }

  .p2-hero-stage,
  .p2-command-center .botones {
    gap: 12px !important;
  }

  #description.p2-hero-card,
  .topbar,
  .p2-command-center,
  .favorites-block,
  .top5,
  .ai-promo,
  .support-block,
  .friend-apps {
    border-radius: 28px !important;
    padding: 18px !important;
  }

  #description.p2-hero-card::before,
  .p2-command-center::before,
  .topbar::before,
  .top5::before {
    font-size: 0.66rem;
    letter-spacing: 0.28em;
  }

  #description.p2-hero-card .guess-image {
    min-height: 210px;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(2.4rem, 12vw, 4.4rem) !important;
  }

  .guess-form {
    grid-template-columns: 1fr !important;
  }

  .favorites-block {
    grid-template-columns: 1fr;
  }

  .favorites-actions {
    justify-self: stretch;
  }

  .favorites-action-button,
  .favorites-share-button,
  .favorites-clear-button {
    width: 100%;
  }

  .p2-command-center .botones {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }

  .p2-command-center .botones > button,
  .p2-command-center .botones > button[id],
  .p2-command-center .botones > button[class] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 112px !important;
  }

  #trakt-trending-movies,
  #trakt-trending-shows,
  .top-links {
    grid-template-columns: 1fr;
  }

  .top5 h2,
  .barra-top10 {
    font-size: clamp(2.1rem, 12vw, 3.8rem) !important;
  }
}


/* =========================================================
   PATRÓN 2 · AJUSTE FINAL CON REFERENCIA BEATLES
   Objetivo: corregir escala, logo, composición y movimiento.
   Solo CSS: no modifica IDs, eventos ni lógica.
   ========================================================= */

:root {
  --p2-motion-cyan: rgba(120, 229, 255, 0.68);
  --p2-motion-blue: rgba(78, 164, 255, 0.42);
  --p2-motion-lime: rgba(211, 255, 82, 0.58);
}

/* Animaciones base, inspiradas en patrón 2 pero ligeras */
@keyframes p2SlowOrbit {
  to { transform: rotate(1turn); }
}

@keyframes p2FloatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes p2CardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes p2ShineSweep {
  from { transform: translateX(-120%) skewX(-14deg); }
  to { transform: translateX(140%) skewX(-14deg); }
}

@keyframes p2PulseDot {
  0%, 100% { opacity: 0.48; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

body::after {
  animation: p2SlowOrbit 38s linear infinite;
}

/* Hero: reducir texto gigante y evitar solapes */
#description.p2-hero-card {
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.8fr) !important;
  grid-template-areas:
    "headline image"
    "lead image"
    "guess image" !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
  min-height: 540px !important;
  padding: clamp(30px, 4.2vw, 54px) !important;
  animation: p2CardIn 0.7s ease both;
}

#description.p2-hero-card h1 {
  grid-area: headline !important;
  align-self: end !important;
  margin: 60px 0 0 !important;
  max-width: 650px !important;
  font-size: clamp(2.8rem, 5.6vw, 5.9rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.075em !important;
  text-wrap: balance;
}

#description.p2-hero-card p {
  grid-area: lead !important;
  align-self: start !important;
  margin: 0 !important;
  padding-top: 0 !important;
  max-width: 650px !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.58 !important;
}

#description.p2-hero-card .guess-image {
  position: relative;
  min-height: 420px !important;
  animation: p2FloatSoft 7s ease-in-out infinite;
}

#description.p2-hero-card .guess-image:hover {
  transform: translateY(-4px) scale(1.008);
}

/* Capas visuales tipo "live/on air" sin tocar HTML */
#description.p2-hero-card::before {
  content: "MOVIES IN DETAIL" !important;
}

#description.p2-hero-card::after {
  content: "SEARCH" !important;
  font-size: clamp(6rem, 13vw, 12rem) !important;
  opacity: 0.025 !important;
}

#description.p2-hero-card h1::after {
  content: "ON AIR";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.55rem;
  transform: translateY(-0.2em) rotate(-2deg);
  min-height: 38px;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: rgba(2, 9, 20, 0.82);
  border: 1px solid rgba(142, 196, 255, 0.24);
  color: #f7fbff;
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 950;
  letter-spacing: 0.22em;
  -webkit-text-fill-color: currentColor;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

/* Botones del juego más patrón 2, sin texto desbordado */
.guess-title,
.stremio-button,
.guess-form button {
  min-height: 52px !important;
  padding: 0 24px !important;
  font-size: 0.98rem !important;
}

.guess-title {
  background: linear-gradient(135deg, #d7ff52 0%, #77fff0 48%, #75baff 100%) !important;
}

.stremio-button,
.guess-form button {
  background:
    radial-gradient(circle at 18% 16%, rgba(120,229,255,0.18), transparent 38%),
    linear-gradient(135deg, rgba(16, 64, 113, 0.96), rgba(6, 28, 60, 0.96)) !important;
}

/* Logo/caja Movies in Detail: hacerlo legible y no partido */
.titulo {
  position: relative;
  display: grid !important;
  place-items: center !important;
  min-width: min(100%, 420px);
  min-height: 168px;
  padding: 28px 32px !important;
}

.titulo span,
.titulo img {
  display: none !important;
}

.titulo::before {
  content: "Movies in Detail";
  display: block;
  max-width: 8.8ch;
  color: var(--p2-text);
  font-size: clamp(2.3rem, 4.6vw, 4.25rem);
  font-weight: 950;
  line-height: 0.92;
  letter-spacing: -0.075em;
  background: linear-gradient(105deg, #f8fbff 0%, #c9efff 42%, #70bcff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.titulo::after {
  content: "MID";
  position: absolute;
  right: 26px;
  top: 22px;
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  background: rgba(120, 229, 255, 0.12);
  border: 1px solid rgba(120, 229, 255, 0.22);
  color: var(--p2-cyan);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.18em;
  -webkit-text-fill-color: currentColor;
}

.topbar {
  animation: p2CardIn 0.82s ease 0.08s both;
}

.topbar::before {
  content: "SEARCH HUB" !important;
}

.topbar::after {
  font-size: clamp(5rem, 11vw, 10rem) !important;
}

.entrada-con-borrar input {
  animation: p2CardIn 0.72s ease 0.16s both;
}

/* Decoración tipo esfera/orbit en panel lateral */
.topbar .brand-link {
  position: relative;
  display: block;
  width: fit-content;
}

.topbar .brand-link::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -84px;
  top: -58px;
  border-radius: 50%;
  background: conic-gradient(from 120deg, rgba(120,229,255,0.34), rgba(78,164,255,0.24), rgba(211,255,82,0.18), rgba(120,229,255,0.34));
  filter: blur(10px);
  opacity: 0.55;
  z-index: -1;
  animation: p2SlowOrbit 26s linear infinite;
}

/* Quick actions: entrada animada y etiquetas visuales */
.p2-command-center {
  animation: p2CardIn 0.82s ease 0.14s both;
}

.p2-command-center .botones > button {
  animation: p2CardIn 0.52s ease both;
  animation-delay: calc((var(--p2-i, 1) - 1) * 0.025s);
}

.p2-command-center .botones > button:nth-child(1) { --p2-i: 1; }
.p2-command-center .botones > button:nth-child(2) { --p2-i: 2; }
.p2-command-center .botones > button:nth-child(3) { --p2-i: 3; }
.p2-command-center .botones > button:nth-child(4) { --p2-i: 4; }
.p2-command-center .botones > button:nth-child(5) { --p2-i: 5; }
.p2-command-center .botones > button:nth-child(6) { --p2-i: 6; }
.p2-command-center .botones > button:nth-child(7) { --p2-i: 7; }
.p2-command-center .botones > button:nth-child(8) { --p2-i: 8; }
.p2-command-center .botones > button:nth-child(9) { --p2-i: 9; }
.p2-command-center .botones > button:nth-child(10) { --p2-i: 10; }
.p2-command-center .botones > button:nth-child(11) { --p2-i: 11; }
.p2-command-center .botones > button:nth-child(12) { --p2-i: 12; }
.p2-command-center .botones > button:nth-child(n+13) { --p2-i: 13; }

.p2-command-center .botones > button::after {
  animation: p2PulseDot 3.8s ease-in-out infinite;
}

.p2-command-center .botones > button::before {
  overflow: hidden;
}

.p2-command-center .botones > button:hover::before {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.12) 42%, transparent 72%),
    radial-gradient(circle at 78% 24%, rgba(120,229,255,0.16), transparent 38%);
  animation: p2ShineSweep 1.1s ease;
}

/* Top 5 / datos: reducir tamaños gigantes y mejorar ritmo */
.top5 h2,
.barra-top10 {
  font-size: clamp(2rem, 4vw, 4.3rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.07em !important;
  text-wrap: balance;
}

.top5::before {
  margin-bottom: 20px !important;
}

.top5 {
  padding: clamp(24px, 3.2vw, 42px) !important;
  animation: p2CardIn 0.74s ease both;
}

#trakt-trending-movies,
#trakt-trending-shows,
.top-links {
  margin-top: 14px !important;
}

/* Bloques inferiores con sensación patrón 2, sin agrandar de más */
.ai-promo,
.support-block,
.friend-apps,
.didyouknow {
  animation: p2CardIn 0.78s ease both;
}

.ai-promo::before,
.friend-apps::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: 8%;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,229,255,0.16), transparent 68%);
  pointer-events: none;
}

/* Tablet y móvil: evitar los desbordes de las capturas */
@media (max-width: 1040px) {
  #description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "headline"
      "lead"
      "guess" !important;
  }

  #description.p2-hero-card h1 {
    margin-top: 14px !important;
    font-size: clamp(2.5rem, 8.5vw, 4.8rem) !important;
  }

  #description.p2-hero-card p {
    max-width: 820px !important;
  }

  .titulo {
    min-height: 132px;
  }
}

@media (max-width: 680px) {
  #description.p2-hero-card h1 {
    font-size: clamp(2rem, 11vw, 3.45rem) !important;
    line-height: 0.94 !important;
  }

  #description.p2-hero-card h1::after {
    display: flex;
    width: fit-content;
    margin: 12px 0 0;
    transform: none;
  }

  #description.p2-hero-card p {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  .titulo {
    min-width: 0;
    width: 100%;
    min-height: 118px;
    padding: 22px !important;
  }

  .titulo::before {
    max-width: none;
    font-size: clamp(2rem, 11vw, 3.1rem);
    line-height: 0.96;
  }

  .top5 h2,
  .barra-top10 {
    font-size: clamp(1.9rem, 10vw, 3.1rem) !important;
    line-height: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .topbar .brand-link::before,
  #description.p2-hero-card .guess-image,
  .p2-command-center .botones > button,
  .p2-command-center .botones > button::after,
  .topbar,
  .p2-command-center,
  .top5,
  .ai-promo,
  .support-block,
  .friend-apps,
  .didyouknow {
    animation: none !important;
  }
}

/* =========================================================
   PATRÓN 2 · VERSIÓN CORREGIDA iPAD / ESCALA / MOVIMIENTO
   Objetivo: menos gigantismo, más contraste visual y animación real.
   Mantiene IDs y lógica existentes.
   ========================================================= */
:root {
  --p2-lime: #d7ff52;
  --p2-aqua: #62ffe8;
  --p2-violet-soft: rgba(117, 92, 183, 0.22);
  --p2-card-dark: rgba(5, 12, 24, 0.78);
}

@keyframes p2GlowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.52; }
  50% { transform: translate3d(18px, -16px, 0) rotate(12deg); opacity: 0.82; }
}

@keyframes p2OrbitalLine {
  to { transform: rotate(360deg); }
}

@keyframes p2BadgeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(1deg); }
}

@keyframes p2CardFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

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

body {
  background:
    radial-gradient(circle at 11% 8%, rgba(86, 168, 255, 0.24), transparent 30rem),
    radial-gradient(circle at 86% 16%, rgba(98, 255, 232, 0.14), transparent 32rem),
    radial-gradient(circle at 54% 72%, rgba(215, 255, 82, 0.07), transparent 34rem),
    radial-gradient(circle at 76% 86%, rgba(88, 54, 140, 0.18), transparent 36rem),
    linear-gradient(180deg, #020813 0%, #07182b 44%, #020713 100%) !important;
}

body::after {
  background:
    radial-gradient(circle at 18% 26%, rgba(98, 255, 232, 0.12), transparent 24vw),
    radial-gradient(circle at 82% 60%, rgba(78, 164, 255, 0.14), transparent 31vw),
    radial-gradient(circle at 50% 50%, rgba(215, 255, 82, 0.045), transparent 42vw) !important;
  filter: blur(18px) !important;
  animation: p2GlowDrift 12s ease-in-out infinite !important;
}

.p2-page {
  max-width: min(1220px, calc(100vw - 36px));
}

/* HERO: menos imagen dominante, más equilibrio editorial */
.p2-hero-stage {
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  margin: 18px auto 26px !important;
}

#description.p2-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(300px, 0.72fr) !important;
  grid-template-areas:
    "headline image"
    "lead image"
    "guess image" !important;
  min-height: 0 !important;
  padding: clamp(22px, 3.2vw, 42px) !important;
  gap: clamp(16px, 2vw, 26px) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  isolation: isolate;
}

#description.p2-hero-card::before {
  top: clamp(18px, 2.6vw, 28px) !important;
  left: clamp(22px, 3.2vw, 42px) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.34em !important;
  color: var(--p2-aqua) !important;
}

#description.p2-hero-card::after {
  content: "MOVIE HUB" !important;
  right: -0.08em !important;
  bottom: -0.13em !important;
  font-size: clamp(4.6rem, 12vw, 10.5rem) !important;
  opacity: 0.028 !important;
}

#description.p2-hero-card h1 {
  grid-area: headline !important;
  align-self: end !important;
  margin: clamp(34px, 5vw, 54px) 0 0 !important;
  max-width: 620px !important;
  font-size: clamp(2.15rem, 4.6vw, 4.65rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.068em !important;
  text-wrap: balance !important;
  z-index: 2;
}

#description.p2-hero-card h1::after {
  position: relative !important;
  margin-left: 0.42rem !important;
  min-height: 30px !important;
  padding: 0 0.72rem !important;
  font-size: clamp(0.58rem, 0.75vw, 0.68rem) !important;
  letter-spacing: 0.18em !important;
  color: var(--p2-aqua) !important;
  background: rgba(2, 8, 19, 0.82) !important;
  animation: p2BadgeFloat 5.2s ease-in-out infinite;
}

#description.p2-hero-card p {
  grid-area: lead !important;
  max-width: 610px !important;
  font-size: clamp(0.95rem, 1.12vw, 1.08rem) !important;
  line-height: 1.55 !important;
  color: rgba(222, 236, 250, 0.76) !important;
  z-index: 2;
}

#description.p2-hero-card .guess-image {
  grid-area: image !important;
  width: 100% !important;
  height: clamp(260px, 38vw, 430px) !important;
  min-height: 0 !important;
  max-height: 430px !important;
  align-self: center !important;
  object-fit: cover !important;
  border-radius: 32px !important;
  opacity: 0.88 !important;
  filter: saturate(0.82) contrast(1.04) brightness(0.82) !important;
  animation: p2CardFloat 7.5s ease-in-out infinite !important;
}

#description.p2-hero-card .guess-image::selection { background: transparent; }

/* Marco animado y badges visuales sobre el hero */
#description.p2-hero-card .guess-buttons::before,
#description.p2-hero-card .guess-form::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

#description.p2-hero-card .guess-buttons::before {
  right: clamp(32px, 5vw, 74px);
  top: clamp(48px, 6vw, 86px);
  width: clamp(110px, 14vw, 180px);
  height: clamp(110px, 14vw, 180px);
  border-radius: 999px;
  border: 1px solid rgba(98, 255, 232, 0.16);
  background: conic-gradient(from 120deg, rgba(98,255,232,0.26), rgba(78,164,255,0.12), rgba(215,255,82,0.12), rgba(98,255,232,0.26));
  filter: blur(0.5px);
  opacity: 0.55;
  animation: p2OrbitalLine 22s linear infinite;
}

#description.p2-hero-card .guess-form::after {
  right: clamp(24px, 4vw, 54px);
  bottom: clamp(22px, 4vw, 50px);
  content: "LIVE";
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 42px;
  border-radius: 999px;
  color: #07111f;
  background: linear-gradient(135deg, var(--p2-lime), var(--p2-aqua));
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  box-shadow: 0 20px 50px rgba(98, 255, 232, 0.12);
  animation: p2BadgeFloat 4.8s ease-in-out infinite;
}

.guess-buttons,
.guess-form {
  z-index: 3;
}

.guess-buttons {
  gap: 10px !important;
  margin: 10px 0 12px !important;
}

.guess-title,
.stremio-button,
.guess-form button {
  min-height: 48px !important;
  padding: 0 20px !important;
  font-size: 0.94rem !important;
}

.guess-title {
  color: #061326 !important;
  background-size: 180% 180% !important;
  animation: p2GradientSlide 8s ease infinite !important;
}

.guess-form {
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) !important;
  gap: 12px !important;
}

#userGuess,
.entrada-con-borrar input {
  height: 56px !important;
  font-size: 0.98rem !important;
}

/* Marca/buscador: más compacto y legible */
.topbar {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 0.44fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(16px, 2.4vw, 28px) !important;
  padding: clamp(18px, 2.8vw, 34px) !important;
  border-radius: 36px !important;
}

.topbar::before {
  position: absolute;
  left: clamp(18px, 2.8vw, 34px);
  top: 18px;
  font-size: 0.66rem !important;
  letter-spacing: 0.34em !important;
}

.topbar::after {
  content: "SEARCH" !important;
  font-size: clamp(4rem, 10vw, 8rem) !important;
  opacity: 0.025 !important;
}

.topbar .brand-link {
  width: 100% !important;
  margin-top: 22px;
}

.titulo {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 130px !important;
  padding: 22px 24px !important;
  justify-items: start !important;
  overflow: hidden;
}

.titulo::before {
  content: "Movies in Detail" !important;
  max-width: 100% !important;
  font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
}

.titulo::after {
  content: "MID" !important;
  right: 18px !important;
  top: 16px !important;
  font-size: 0.62rem !important;
}

.topbar .brand-link::before {
  width: 150px !important;
  height: 150px !important;
  right: -34px !important;
  top: -34px !important;
  opacity: 0.42 !important;
}

.entrada-con-borrar {
  align-self: end;
}

/* Dashboard: más variación y movimiento real sin hacerlo enorme */
.p2-command-center {
  padding: clamp(18px, 2.6vw, 30px) !important;
  border-radius: 36px !important;
}

.p2-command-center::before {
  font-size: 0.68rem !important;
  letter-spacing: 0.34em !important;
  margin-bottom: 14px !important;
}

.p2-command-center .botones {
  grid-auto-rows: minmax(78px, auto) !important;
  gap: 12px !important;
}

.p2-command-center .botones > button,
.options-panel > button,
.top-links button,
.favorites-action-button,
.favorites-share-button,
.favorites-clear-button,
.favorite-item-label,
.favorite-item-remove,
.ai-button,
.support-link,
.tmdb-upcoming-link,
.trakt-search-links li a {
  min-height: 80px !important;
  border-radius: 24px !important;
  padding: 16px 18px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(98, 255, 232, 0.11), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(215, 255, 82, 0.06), transparent 30%),
    linear-gradient(135deg, rgba(20, 54, 92, 0.94) 0%, rgba(8, 31, 61, 0.96) 54%, rgba(3, 12, 27, 0.98) 100%) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

.p2-command-center .botones > button:nth-child(4n+1) {
  background:
    radial-gradient(circle at 20% 14%, rgba(215, 255, 82, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(28, 82, 130, 0.94), rgba(4, 20, 44, 0.98)) !important;
}

.p2-command-center .botones > button:nth-child(4n+2) {
  background:
    radial-gradient(circle at 20% 14%, rgba(98, 255, 232, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(16, 72, 116, 0.94), rgba(4, 19, 42, 0.98)) !important;
}

.p2-command-center .botones > button:nth-child(4n+3) {
  background:
    radial-gradient(circle at 20% 14%, rgba(142, 196, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(24, 56, 100, 0.94), rgba(5, 18, 39, 0.98)) !important;
}

.p2-command-center .botones > button::after {
  width: 34px !important;
  height: 34px !important;
  background: linear-gradient(135deg, rgba(98,255,232,0.18), rgba(255,255,255,0.035)) !important;
}

#btn-where,
#btnSimilar,
#btn-venir-movie,
#btn-venir-show {
  min-height: 126px !important;
}

#btn-ficha,
#btn-trailer {
  min-height: 112px !important;
}

/* Panel favoritos menos pesado */
.favorites-block {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 20px !important;
  border-radius: 28px !important;
}

.favorites-title {
  font-size: clamp(1.25rem, 2.2vw, 2.1rem) !important;
  line-height: 1.04 !important;
}

.favorites-note,
.favorites-empty {
  font-size: 0.92rem !important;
}

.favorites-action-button,
.favorites-share-button,
.favorites-clear-button {
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
}

/* Datos inferiores: evitar textos gigantes de iPad */
.top5 h2,
.barra-top10 {
  font-size: clamp(1.55rem, 3.2vw, 3.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 18px !important;
}

.top5 {
  padding: clamp(20px, 2.8vw, 36px) !important;
  border-radius: 32px !important;
}

.top5::before {
  font-size: 0.66rem !important;
  letter-spacing: 0.34em !important;
  margin-bottom: 16px !important;
}

#trakt-trending-movies li,
#trakt-trending-shows li,
.top-links li {
  border-radius: 22px !important;
  padding: 14px !important;
}

/* Tablet/iPad: la imagen no debe comerse la pantalla */
@media (max-width: 1180px) {
  .p2-page {
    max-width: min(1120px, calc(100vw - 32px));
  }

  #description.p2-hero-card {
    grid-template-columns: minmax(0, 0.86fr) minmax(280px, 0.72fr) !important;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(2rem, 4.4vw, 4.2rem) !important;
  }

  #description.p2-hero-card .guess-image {
    height: clamp(240px, 34vw, 360px) !important;
    max-height: 360px !important;
  }

  .topbar {
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body {
    padding: 14px !important;
  }

  .p2-page {
    max-width: calc(100vw - 28px);
  }

  #description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "headline"
      "lead"
      "image"
      "guess" !important;
    padding: 22px !important;
  }

  #description.p2-hero-card h1 {
    margin-top: 36px !important;
    font-size: clamp(2rem, 7vw, 3.7rem) !important;
  }

  #description.p2-hero-card .guess-image {
    height: clamp(190px, 42vw, 300px) !important;
    max-height: 300px !important;
  }

  #description.p2-hero-card .guess-form::after,
  #description.p2-hero-card .guess-buttons::before {
    display: none !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  .titulo {
    min-height: 104px !important;
  }

  .titulo::before {
    font-size: clamp(1.9rem, 8vw, 3rem) !important;
  }

  .favorites-block {
    grid-template-columns: 1fr !important;
  }

  .favorites-actions {
    justify-self: start !important;
  }

  #trakt-trending-movies,
  #trakt-trending-shows,
  .top-links {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  #description.p2-hero-card,
  .topbar,
  .p2-command-center,
  .favorites-block,
  .top5,
  .ai-promo,
  .support-block,
  .friend-apps {
    border-radius: 24px !important;
    padding: 16px !important;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(1.9rem, 10vw, 3rem) !important;
    line-height: 1 !important;
  }

  #description.p2-hero-card p {
    font-size: 0.94rem !important;
  }

  .guess-buttons {
    align-items: stretch !important;
  }

  .guess-title,
  .stremio-button,
  .guess-form button {
    width: 100% !important;
  }

  .p2-command-center .botones > button,
  .p2-command-center .botones > button[id],
  .p2-command-center .botones > button[class] {
    min-height: 82px !important;
  }

  #btn-where,
  #btnSimilar,
  #btn-venir-movie,
  #btn-venir-show,
  #btn-ficha,
  #btn-trailer {
    min-height: 96px !important;
  }

  .top5 h2,
  .barra-top10 {
    font-size: clamp(1.55rem, 8vw, 2.55rem) !important;
    letter-spacing: -0.045em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  #description.p2-hero-card .guess-image,
  #description.p2-hero-card .guess-form::after,
  #description.p2-hero-card .guess-buttons::before,
  .guess-title,
  #description.p2-hero-card h1::after {
    animation: none !important;
  }
}

/* =========================================================
   PATRÓN 2 · CORRECCIÓN FINAL ESCALA / CAPAS / SUGERENCIAS
   - Reduce gigantismo en iPad
   - Quita textos decorativos tipo LIVE DATA / ON AIR / SEARCH HUB
   - Hace visible el texto principal
   - Corrige desplegable de sugerencias por encima de módulos
   - Mantiene IDs, eventos y lógica intactos
   ========================================================= */

:root {
  --p2-lime: #d7ff52;
  --p2-aqua: #62ffe8;
  --p2-violet-soft: rgba(105, 76, 165, 0.18);
  --p2-panel-deep: rgba(4, 12, 26, 0.84);
}

@keyframes p2SoftAppear {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes p2AmbientFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -8px, 0) scale(1.01); }
}

@keyframes p2AmbientSpin {
  to { transform: rotate(360deg); }
}

@keyframes p2LightSweep {
  from { transform: translateX(-140%) skewX(-16deg); }
  to { transform: translateX(150%) skewX(-16deg); }
}

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(78, 164, 255, 0.22), transparent 30rem),
    radial-gradient(circle at 86% 15%, rgba(98, 255, 232, 0.13), transparent 32rem),
    radial-gradient(circle at 52% 72%, rgba(215, 255, 82, 0.06), transparent 34rem),
    radial-gradient(circle at 78% 86%, rgba(92, 72, 150, 0.16), transparent 36rem),
    linear-gradient(180deg, #020713 0%, #07172a 45%, #020713 100%) !important;
}

body::after {
  background:
    radial-gradient(circle at 18% 26%, rgba(98, 255, 232, 0.10), transparent 24vw),
    radial-gradient(circle at 82% 60%, rgba(78, 164, 255, 0.13), transparent 31vw),
    radial-gradient(circle at 50% 50%, rgba(215, 255, 82, 0.04), transparent 42vw) !important;
  animation: p2AmbientFloat 12s ease-in-out infinite !important;
}

.p2-page {
  max-width: min(1220px, calc(100vw - 36px)) !important;
  overflow: visible !important;
}

.p2-hero-stage {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  margin: 18px auto 26px !important;
  overflow: visible !important;
}

/* HERO: texto legible e imagen controlada */
#description.p2-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.72fr) !important;
  grid-template-areas:
    "headline image"
    "lead image"
    "guess image" !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: clamp(22px, 3vw, 40px) !important;
  gap: clamp(16px, 2vw, 26px) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  animation: p2SoftAppear 0.55s ease both !important;
}

/* Quitar nombres decorativos: MOVIES IN DETAIL, SEARCH, ON AIR, LIVE, SEARCH HUB, LIVE DATA */
#description.p2-hero-card::before,
#description.p2-hero-card h1::after,
#description.p2-hero-card .guess-form::after,
.topbar::before,
.p2-command-center::before,
.top5::before {
  content: none !important;
  display: none !important;
}

/* Mantener decoración sin texto */
#description.p2-hero-card::after {
  content: "" !important;
  position: absolute !important;
  right: -90px !important;
  bottom: -110px !important;
  width: clamp(240px, 36vw, 520px) !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 42% 42%, rgba(98, 255, 232, 0.16), transparent 36%),
    conic-gradient(from 120deg, rgba(98,255,232,0.16), rgba(78,164,255,0.12), rgba(215,255,82,0.08), rgba(98,255,232,0.16)) !important;
  opacity: 0.72 !important;
  filter: blur(8px) !important;
  animation: p2AmbientSpin 30s linear infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#description.p2-hero-card h1 {
  grid-area: headline !important;
  align-self: end !important;
  margin: 0 !important;
  max-width: 620px !important;
  font-size: clamp(2rem, 4.2vw, 4.1rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  text-align: left !important;
  text-wrap: balance !important;
  opacity: 1 !important;
  color: var(--p2-text) !important;
  background: linear-gradient(105deg, #ffffff 0%, #cceeff 42%, #73c8ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

#description.p2-hero-card p {
  grid-area: lead !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 650px !important;
  font-size: clamp(1rem, 1.2vw, 1.14rem) !important;
  line-height: 1.56 !important;
  color: rgba(226, 240, 255, 0.78) !important;
  opacity: 1 !important;
  text-align: left !important;
}

#description.p2-hero-card .guess-image {
  grid-area: image !important;
  width: 100% !important;
  max-width: none !important;
  height: clamp(220px, 28vw, 340px) !important;
  min-height: 0 !important;
  max-height: 340px !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  border-radius: 30px !important;
  opacity: 0.86 !important;
  filter: saturate(0.86) contrast(1.04) brightness(0.82) !important;
  animation: p2AmbientFloat 8s ease-in-out infinite !important;
}

.guess-buttons,
.guess-form {
  grid-area: guess !important;
  position: relative !important;
  z-index: 3 !important;
}

.guess-buttons {
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 8px 0 10px !important;
}

.guess-title,
.stremio-button,
.guess-form button {
  min-height: 46px !important;
  padding: 0 18px !important;
  font-size: 0.92rem !important;
  border-radius: 999px !important;
}

.guess-title {
  color: #061326 !important;
  background: linear-gradient(135deg, var(--p2-lime), var(--p2-aqua), #78bfff) !important;
  background-size: 180% 180% !important;
  animation: p2GradientSlide 8s ease infinite !important;
}

.guess-form {
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) !important;
  gap: 12px !important;
  margin: 0 !important;
}

#userGuess,
.entrada-con-borrar input {
  height: 54px !important;
  font-size: 0.96rem !important;
}

/* Logo/buscador: legible, no partido */
.topbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(16px, 2.2vw, 28px) !important;
  min-height: 0 !important;
  padding: clamp(18px, 2.6vw, 30px) !important;
  border-radius: 34px !important;
  overflow: visible !important;
  z-index: 50 !important;
}

.topbar::after {
  content: "" !important;
  position: absolute !important;
  right: -52px !important;
  top: -64px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 999px !important;
  background: conic-gradient(from 120deg, rgba(98,255,232,0.20), rgba(78,164,255,0.10), rgba(215,255,82,0.08), rgba(98,255,232,0.20)) !important;
  filter: blur(10px) !important;
  opacity: 0.48 !important;
  animation: p2AmbientSpin 28s linear infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.topbar .brand-link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
}

.topbar .brand-link::before {
  display: none !important;
}

.titulo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 18px 20px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

.titulo span,
.titulo img {
  display: block !important;
}

.titulo span {
  font-size: clamp(1.35rem, 2.5vw, 2.25rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.065em !important;
  background: linear-gradient(105deg, #f8fbff 0%, #c9efff 42%, #70bcff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  white-space: nowrap !important;
}

.titulo span:first-child {
  margin-right: -2px !important;
}

.titulo span:last-child {
  margin-left: -7px !important;
}

.titulo img {
  width: clamp(42px, 5vw, 62px) !important;
  height: auto !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 10px 22px rgba(98, 255, 232, 0.14)) !important;
}

.titulo::before,
.titulo::after {
  content: none !important;
  display: none !important;
}

.entrada-con-borrar {
  position: relative !important;
  z-index: 10000 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

#sugerencias,
.suggestions-list {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000000 !important;
  max-height: min(420px, 55vh) !important;
  overflow-y: auto !important;
  border-radius: 22px !important;
  background: rgba(3, 10, 22, 0.98) !important;
  border: 1px solid rgba(142, 196, 255, 0.30) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.58), 0 0 44px rgba(98,255,232,0.12) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}

#sugerencias li,
.suggestions-list li {
  background: transparent !important;
  color: var(--p2-text) !important;
}

#sugerencias li:hover,
.suggestions-list li:hover {
  background: linear-gradient(90deg, rgba(98,255,232,0.14), rgba(78,164,255,0.10)) !important;
}

/* Botonera y paneles: más variación, menos monocromo */
.p2-command-center {
  position: relative !important;
  padding: clamp(18px, 2.6vw, 30px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
}

.p2-command-center .botones {
  grid-auto-rows: minmax(76px, auto) !important;
  gap: 12px !important;
}

.p2-command-center .botones > button,
.options-panel > button,
.top-links button,
.favorites-action-button,
.favorites-share-button,
.favorites-clear-button,
.favorite-item-label,
.favorite-item-remove,
.ai-button,
.support-link,
.tmdb-upcoming-link,
.trakt-search-links li a {
  min-height: 78px !important;
  border-radius: 24px !important;
  padding: 15px 18px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(98, 255, 232, 0.12), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(215, 255, 82, 0.06), transparent 30%),
    linear-gradient(135deg, rgba(20, 54, 92, 0.94) 0%, rgba(8, 31, 61, 0.96) 54%, rgba(3, 12, 27, 0.98) 100%) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

.p2-command-center .botones > button:nth-child(4n+1) {
  background:
    radial-gradient(circle at 20% 14%, rgba(215, 255, 82, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(28, 82, 130, 0.94), rgba(4, 20, 44, 0.98)) !important;
}

.p2-command-center .botones > button:nth-child(4n+2) {
  background:
    radial-gradient(circle at 20% 14%, rgba(98, 255, 232, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(16, 72, 116, 0.94), rgba(4, 19, 42, 0.98)) !important;
}

.p2-command-center .botones > button:nth-child(4n+3) {
  background:
    radial-gradient(circle at 20% 14%, rgba(142, 196, 255, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(24, 56, 100, 0.94), rgba(5, 18, 39, 0.98)) !important;
}

.p2-command-center .botones > button:hover {
  transform: translateY(-4px) !important;
  filter: saturate(1.12) brightness(1.06) !important;
  border-color: rgba(98, 255, 232, 0.42) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,0.38), 0 0 34px rgba(98,255,232,0.12) !important;
}

.p2-command-center .botones > button:hover::before {
  animation: p2LightSweep 1.05s ease !important;
}

#btn-where,
#btnSimilar,
#btn-venir-movie,
#btn-venir-show {
  min-height: 118px !important;
}

#btn-ficha,
#btn-trailer {
  min-height: 104px !important;
}

/* Favoritos y datos: escala contenida */
.favorites-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 20px !important;
  border-radius: 28px !important;
}

.favorites-title {
  font-size: clamp(1.15rem, 2vw, 1.85rem) !important;
  line-height: 1.05 !important;
}

.favorites-note,
.favorites-empty {
  font-size: 0.92rem !important;
}

.favorites-action-button,
.favorites-share-button,
.favorites-clear-button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
}

.top5,
.ai-promo,
.support-block,
.friend-apps,
.didyouknow {
  animation: p2SoftAppear 0.55s ease both !important;
}

.top5 h2,
.barra-top10 {
  font-size: clamp(1.5rem, 3vw, 3.2rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 18px !important;
}

.top5 {
  padding: clamp(20px, 2.8vw, 36px) !important;
  border-radius: 32px !important;
}

#trakt-trending-movies li,
#trakt-trending-shows li,
.top-links li {
  border-radius: 22px !important;
  padding: 14px !important;
}

/* iPad/tablet */
@media (max-width: 1180px) {
  .p2-page {
    max-width: min(1120px, calc(100vw - 32px)) !important;
  }

  #description.p2-hero-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.68fr) !important;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(1.95rem, 4vw, 3.8rem) !important;
  }

  #description.p2-hero-card .guess-image {
    height: clamp(220px, 30vw, 320px) !important;
    max-height: 320px !important;
  }

  .topbar {
    grid-template-columns: minmax(210px, 0.38fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body {
    padding: 14px !important;
  }

  .p2-page {
    max-width: calc(100vw - 28px) !important;
  }

  #description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "headline"
      "lead"
      "image"
      "guess" !important;
    padding: 22px !important;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(2rem, 7vw, 3.45rem) !important;
  }

  #description.p2-hero-card .guess-image {
    height: clamp(180px, 40vw, 280px) !important;
    max-height: 280px !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  .titulo {
    min-height: 86px !important;
  }

  .favorites-block {
    grid-template-columns: 1fr !important;
  }

  .favorites-actions {
    justify-self: start !important;
  }

  #trakt-trending-movies,
  #trakt-trending-shows,
  .top-links {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  #description.p2-hero-card,
  .topbar,
  .p2-command-center,
  .favorites-block,
  .top5,
  .ai-promo,
  .support-block,
  .friend-apps {
    border-radius: 24px !important;
    padding: 16px !important;
  }

  #description.p2-hero-card h1 {
    font-size: clamp(1.85rem, 9vw, 2.8rem) !important;
    line-height: 1 !important;
  }

  #description.p2-hero-card p {
    font-size: 0.94rem !important;
  }

  .guess-form {
    grid-template-columns: 1fr !important;
  }

  .guess-title,
  .stremio-button,
  .guess-form button {
    width: 100% !important;
  }

  .p2-command-center .botones > button,
  .p2-command-center .botones > button[id],
  .p2-command-center .botones > button[class] {
    min-height: 82px !important;
  }

  #btn-where,
  #btnSimilar,
  #btn-venir-movie,
  #btn-venir-show,
  #btn-ficha,
  #btn-trailer {
    min-height: 94px !important;
  }

  .top5 h2,
  .barra-top10 {
    font-size: clamp(1.5rem, 8vw, 2.45rem) !important;
    letter-spacing: -0.045em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  #description.p2-hero-card::after,
  #description.p2-hero-card .guess-image,
  .guess-title,
  .topbar::after,
  .top5,
  .ai-promo,
  .support-block,
  .friend-apps,
  .didyouknow {
    animation: none !important;
  }
}

/* =========================================================
   PATRÓN 2 · AJUSTE FINAL: GUESS + TENDENCIAS PREMIUM
   Solo CSS. No cambia HTML, IDs, eventos ni lógica.
   ========================================================= */

@keyframes p2CardPulse {
  0%, 100% { opacity: 0.72; transform: translate3d(0,0,0) scale(1); }
  50% { opacity: 0.96; transform: translate3d(0,-6px,0) scale(1.035); }
}

@keyframes p2CardSweep {
  0% { transform: translateX(-135%) skewX(-18deg); opacity: 0; }
  22% { opacity: 0.5; }
  100% { transform: translateX(135%) skewX(-18deg); opacity: 0; }
}

@keyframes p2TrendIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Separar correctamente los botones del formulario de Guess.
   Antes compartían la misma zona visual y se pisaban. */
#description.p2-hero-card {
  grid-template-areas:
    "headline image"
    "lead image"
    "buttons image"
    "form image" !important;
  row-gap: clamp(12px, 1.65vw, 18px) !important;
}

#description.p2-hero-card .guess-buttons {
  grid-area: buttons !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

#description.p2-hero-card .guess-form {
  grid-area: form !important;
  position: relative !important;
  z-index: 6 !important;
  margin: 0 !important;
  max-width: 720px !important;
}

#description.p2-hero-card .guess-buttons::before,
#description.p2-hero-card .guess-form::after {
  content: none !important;
  display: none !important;
}

#description.p2-hero-card .guess-title,
#description.p2-hero-card .stremio-button,
#description.p2-hero-card .guess-form button {
  transform: none !important;
  white-space: nowrap !important;
}

#description.p2-hero-card .stremio-button {
  background:
    radial-gradient(circle at 18% 18%, rgba(98, 255, 232, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(18, 44, 74, 0.94), rgba(7, 18, 38, 0.98)) !important;
  border-color: rgba(142, 196, 255, 0.30) !important;
}

/* Tendencias: tarjetas con fondo visual, menos planas */
.top5.top5--featured {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(98, 255, 232, 0.105), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(78, 164, 255, 0.135), transparent 36%),
    linear-gradient(145deg, rgba(14, 31, 55, 0.84), rgba(3, 10, 24, 0.94)) !important;
}

.top5.top5--featured::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -120px !important;
  top: -140px !important;
  width: min(440px, 42vw) !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  background:
    conic-gradient(from 120deg,
      rgba(98, 255, 232, 0.20),
      rgba(78, 164, 255, 0.16),
      rgba(215, 255, 82, 0.07),
      rgba(98, 255, 232, 0.20)) !important;
  filter: blur(14px) !important;
  opacity: 0.72 !important;
  animation: p2AmbientSpin 34s linear infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.top5.top5--featured::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8% !important;
  bottom: -70px !important;
  width: min(320px, 34vw) !important;
  aspect-ratio: 1.55 !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at center, rgba(215, 255, 82, 0.075), transparent 68%) !important;
  filter: blur(10px) !important;
  animation: p2CardPulse 9s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#trakt-trending-movies,
#trakt-trending-shows {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#trakt-trending-movies li,
#trakt-trending-shows li {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  color: rgba(245, 251, 255, 0.94) !important;
  font-weight: 850 !important;
  letter-spacing: -0.022em !important;
  border: 1px solid rgba(142, 196, 255, 0.20) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(98, 255, 232, 0.13), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(215, 255, 82, 0.06), transparent 26%),
    linear-gradient(135deg, rgba(16, 54, 88, 0.68), rgba(3, 12, 27, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 42px rgba(0,0,0,0.24) !important;
  animation: p2TrendIn 0.55s ease both !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
}

#trakt-trending-movies li:nth-child(2n),
#trakt-trending-shows li:nth-child(2n) {
  background:
    radial-gradient(circle at 14% 18%, rgba(142, 196, 255, 0.16), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(98, 255, 232, 0.08), transparent 28%),
    linear-gradient(135deg, rgba(11, 42, 78, 0.72), rgba(3, 12, 27, 0.92)) !important;
}

#trakt-trending-movies li:nth-child(3n),
#trakt-trending-shows li:nth-child(3n) {
  background:
    radial-gradient(circle at 14% 18%, rgba(215, 255, 82, 0.10), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(78, 164, 255, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(18, 58, 76, 0.70), rgba(3, 12, 27, 0.92)) !important;
}

#trakt-trending-movies li::before,
#trakt-trending-shows li::before {
  content: "" !important;
  position: absolute !important;
  right: -52px !important;
  top: -62px !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(98,255,232,0.16), transparent 70%) !important;
  z-index: -1 !important;
  opacity: 0.75 !important;
}

#trakt-trending-movies li::after,
#trakt-trending-shows li::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.105) 48%, transparent 62%) !important;
  transform: translateX(-135%) skewX(-18deg) !important;
  pointer-events: none !important;
}

#trakt-trending-movies li:hover,
#trakt-trending-shows li:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(98, 255, 232, 0.38) !important;
  filter: brightness(1.05) saturate(1.08) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,0.34), 0 0 34px rgba(98,255,232,0.09) !important;
}

#trakt-trending-movies li:hover::after,
#trakt-trending-shows li:hover::after {
  animation: p2CardSweep 0.9s ease !important;
}

#trakt-trending-movies li:nth-child(1),
#trakt-trending-shows li:nth-child(1) { animation-delay: 0.02s !important; }
#trakt-trending-movies li:nth-child(2),
#trakt-trending-shows li:nth-child(2) { animation-delay: 0.06s !important; }
#trakt-trending-movies li:nth-child(3),
#trakt-trending-shows li:nth-child(3) { animation-delay: 0.10s !important; }
#trakt-trending-movies li:nth-child(4),
#trakt-trending-shows li:nth-child(4) { animation-delay: 0.14s !important; }
#trakt-trending-movies li:nth-child(5),
#trakt-trending-shows li:nth-child(5) { animation-delay: 0.18s !important; }

@media (max-width: 900px) {
  #description.p2-hero-card {
    grid-template-areas:
      "headline"
      "lead"
      "image"
      "buttons"
      "form" !important;
  }

  #description.p2-hero-card .guess-buttons,
  #description.p2-hero-card .guess-form {
    width: 100% !important;
  }

  #trakt-trending-movies,
  #trakt-trending-shows {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  #trakt-trending-movies li,
  #trakt-trending-shows li {
    min-height: 68px !important;
    padding: 15px 17px !important;
    font-size: 0.98rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top5.top5--featured::before,
  .top5.top5--featured::after,
  #trakt-trending-movies li,
  #trakt-trending-shows li {
    animation: none !important;
  }
}

/* =========================================================
   AJUSTE FINAL PATRÓN 2 · Resultado del juego + tendencias enlazables
   Solo capa visual. Mantiene estructura y lógica existente.
   ========================================================= */

#description.p2-hero-card {
  overflow: visible !important;
}

#description.p2-hero-card .guess-form {
  position: relative !important;
  z-index: 6 !important;
  align-items: center !important;
  gap: 14px !important;
}

#description.p2-hero-card .guess-result {
  grid-column: 1 / -1 !important;
  display: none;
  width: min(560px, 100%) !important;
  margin: 12px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
  font-size: clamp(0.98rem, 1.45vw, 1.12rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  color: #061019 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  transform-origin: left center !important;
}

#description.p2-hero-card .guess-result.is-visible {
  display: block !important;
  animation: p2ResultPop 520ms cubic-bezier(.2,.9,.16,1) both !important;
}

#description.p2-hero-card .guess-result.is-correct {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(135deg, #d8ff6a 0%, #5fffd7 48%, #68b7ff 100%) !important;
  outline: 4px solid rgba(95,255,215,0.16) !important;
}

#description.p2-hero-card .guess-result.is-wrong {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.64), transparent 34%),
    linear-gradient(135deg, #ffd1dc 0%, #ff6f91 52%, #8c5cff 100%) !important;
  outline: 4px solid rgba(255,111,145,0.15) !important;
}

#description.p2-hero-card .guess-result.is-correct::before,
#description.p2-hero-card .guess-result.is-wrong::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 999px;
  vertical-align: 1px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

@keyframes p2ResultPop {
  0% { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(8px); }
  55% { opacity: 1; transform: translateY(-2px) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Animación nueva 1: pulso cinematográfico del frame */
#description.p2-hero-card .guess-image {
  animation: p2FrameBreath 7.5s ease-in-out infinite !important;
}

@keyframes p2FrameBreath {
  0%, 100% {
    transform: translate3d(0,0,0) scale(1);
    box-shadow:
      0 28px 80px rgba(0,0,0,.34),
      0 0 0 1px rgba(130,190,255,.18),
      0 0 34px rgba(78,176,255,.08);
  }
  50% {
    transform: translate3d(0,-5px,0) scale(1.006);
    box-shadow:
      0 34px 96px rgba(0,0,0,.4),
      0 0 0 1px rgba(180,230,255,.28),
      0 0 56px rgba(107,255,226,.16);
  }
}

/* Animación nueva 2: aurora suave de fondo, sin texto decorativo */
.p2-hero-stage::after,
.top5::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background:
    conic-gradient(from 160deg,
      rgba(92, 203, 255, .20),
      rgba(108, 255, 213, .16),
      rgba(62, 103, 255, .14),
      rgba(92, 203, 255, .20));
  filter: blur(28px);
  opacity: .55;
  animation: p2AuroraDrift 16s ease-in-out infinite alternate;
  z-index: 0;
}

.p2-hero-stage::after {
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  right: 4vw;
  bottom: -8vw;
}

.top5 {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.top5::after {
  width: 380px;
  height: 380px;
  right: -120px;
  top: -160px;
  opacity: .34;
}

@keyframes p2AuroraDrift {
  0% { transform: translate3d(-18px, 14px, 0) rotate(0deg) scale(.92); }
  50% { transform: translate3d(12px, -20px, 0) rotate(18deg) scale(1.06); }
  100% { transform: translate3d(24px, 18px, 0) rotate(34deg) scale(.98); }
}

/* Tendencias más visuales y clicables */
#trakt-trending-movies,
#trakt-trending-shows {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#trakt-trending-movies li,
#trakt-trending-shows li {
  position: relative !important;
  min-height: 88px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(112, 185, 255, 0.24) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(130, 210, 255, .18), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(120, 255, 218, .12), transparent 30%),
    linear-gradient(145deg, rgba(15, 45, 76, .78), rgba(5, 18, 33, .92) 62%, rgba(8, 12, 28, .96)) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.25) !important;
  animation: p2TrendRise 620ms cubic-bezier(.2,.9,.16,1) both !important;
}

#trakt-trending-movies li::before,
#trakt-trending-shows li::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -78px;
  top: -96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 185, 255, .38), transparent 68%);
  z-index: 0;
  transition: transform .28s ease, opacity .28s ease;
}

#trakt-trending-movies li:nth-child(2n)::before,
#trakt-trending-shows li:nth-child(2n)::before {
  background: radial-gradient(circle, rgba(107, 255, 226, .30), transparent 68%);
}

#trakt-trending-movies li:nth-child(3n)::before,
#trakt-trending-shows li:nth-child(3n)::before {
  background: radial-gradient(circle, rgba(114, 141, 255, .34), transparent 68%);
}

.trend-link {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 20px 24px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: transparent !important;
  color: #eff8ff !important;
  font-size: clamp(1rem, 1.55vw, 1.16rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
  cursor: pointer !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.42) !important;
}

.trend-link::after {
  content: "Ver plataformas";
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(182, 255, 102, .93);
  color: #061019;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .22s ease, transform .22s ease;
}

#trakt-trending-movies li:hover,
#trakt-trending-shows li:hover,
#trakt-trending-movies li:focus-within,
#trakt-trending-shows li:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(138, 215, 255, .46) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.34),
    0 0 34px rgba(82,185,255,.16),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

#trakt-trending-movies li:hover::before,
#trakt-trending-shows li:hover::before,
#trakt-trending-movies li:focus-within::before,
#trakt-trending-shows li:focus-within::before {
  transform: scale(1.18) translate(-8px, 8px);
  opacity: .92;
}

#trakt-trending-movies li:hover .trend-link::after,
#trakt-trending-shows li:hover .trend-link::after,
#trakt-trending-movies li:focus-within .trend-link::after,
#trakt-trending-shows li:focus-within .trend-link::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes p2TrendRise {
  0% { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

#trakt-trending-movies li:nth-child(1),
#trakt-trending-shows li:nth-child(1) { animation-delay: .02s !important; }
#trakt-trending-movies li:nth-child(2),
#trakt-trending-shows li:nth-child(2) { animation-delay: .06s !important; }
#trakt-trending-movies li:nth-child(3),
#trakt-trending-shows li:nth-child(3) { animation-delay: .10s !important; }
#trakt-trending-movies li:nth-child(4),
#trakt-trending-shows li:nth-child(4) { animation-delay: .14s !important; }
#trakt-trending-movies li:nth-child(5),
#trakt-trending-shows li:nth-child(5) { animation-delay: .18s !important; }

@media (max-width: 760px) {
  #description.p2-hero-card .guess-result {
    width: 100% !important;
    text-align: center !important;
  }

  #trakt-trending-movies,
  #trakt-trending-shows {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .trend-link {
    min-height: 76px !important;
    padding: 17px 18px !important;
    font-size: .98rem !important;
  }

  .trend-link::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #description.p2-hero-card .guess-image,
  .p2-hero-stage::after,
  .top5::after,
  #description.p2-hero-card .guess-result.is-visible,
  #trakt-trending-movies li,
  #trakt-trending-shows li {
    animation: none !important;
  }
}

/* =========================================================
   MINIMALISTA CLARA V3 - reparación estable
   Cambios visuales únicamente. La composición evita solapes.
   ========================================================= */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --m3-bg: #f5f5f2;
  --m3-surface: #ffffff;
  --m3-surface-soft: #f0f1ed;
  --m3-surface-raised: #fafaf8;
  --m3-text: #202622;
  --m3-muted: #66706a;
  --m3-line: #dfe3de;
  --m3-line-strong: #ccd3cd;
  --m3-button: #f7f7f4;
  --m3-button-hover: #ecefea;
  --m3-button-text: #27302b;
  --m3-primary: #dce8e1;
  --m3-primary-hover: #cfdfd6;
  --m3-primary-text: #263c31;
  --m3-danger: #f7ecec;
  --m3-danger-text: #744c4c;
  --m3-overlay: rgba(28, 33, 30, .58);
  --m3-shadow: 0 12px 34px rgba(35, 45, 39, .08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --m3-bg: #151918;
  --m3-surface: #1e2321;
  --m3-surface-soft: #252b28;
  --m3-surface-raised: #202624;
  --m3-text: #f3f5f2;
  --m3-muted: #adb5b0;
  --m3-line: #39413d;
  --m3-line-strong: #4b5650;
  --m3-button: #eef1ed;
  --m3-button-hover: #dfe5e0;
  --m3-button-text: #27312c;
  --m3-primary: #d8e6de;
  --m3-primary-hover: #c8dbd0;
  --m3-primary-text: #24382e;
  --m3-danger: #eee1e1;
  --m3-danger-text: #704747;
  --m3-overlay: rgba(5, 8, 7, .78);
  --m3-shadow: 0 16px 42px rgba(0, 0, 0, .26);
}

html,
body {
  background: var(--m3-bg) !important;
  color: var(--m3-text) !important;
}

body {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 0 calc(52px + env(safe-area-inset-bottom)) !important;
  background-image: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important;
  letter-spacing: -.012em !important;
  overflow-x: hidden !important;
}

body::before,
body::after,
.p2-hero-stage::before,
.p2-hero-stage::after,
#description.p2-hero-card::before,
#description.p2-hero-card::after,
#description.p2-hero-card h1::after,
#description.p2-hero-card .guess-form::after,
#description.p2-hero-card .guess-buttons::before,
.topbar::before,
.topbar::after,
.topbar .brand-link::before,
.p2-command-center::before,
.p2-command-center::after,
.p2-command-center .botones > button::before,
.p2-command-center .botones > button::after,
.options-panel > button::before,
.options-panel > button::after,
.top5::before,
.top5::after,
.top-links button::before,
.top-links button::after {
  display: none !important;
  content: none !important;
}

* { box-sizing: border-box; }

/* Controles fijos: discretos y siempre por debajo de cualquier modal. */
html body .theme-toggle,
html body .info-toggle {
  position: fixed !important;
  top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: 0 4px 16px rgba(30, 40, 34, .08) !important;
  transform: none !important;
  z-index: 600 !important;
}
html body .info-toggle {
  left: max(14px, calc(env(safe-area-inset-left) + 8px)) !important;
  right: auto !important;
}
html body .theme-toggle {
  right: max(14px, calc(env(safe-area-inset-right) + 8px)) !important;
  left: auto !important;
}
html body .language-switcher {
  position: fixed !important;
  top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
  right: calc(max(14px, calc(env(safe-area-inset-right) + 8px)) + 48px) !important;
  left: auto !important;
  width: auto !important;
  min-width: 132px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: 0 4px 16px rgba(30, 40, 34, .08) !important;
  z-index: 600 !important;
}
html body .language-select {
  color: var(--m3-text) !important;
  background: transparent !important;
  font-size: .84rem !important;
}

/* Estructura general: contenida, sin posicionamiento absoluto ni capas cruzadas. */
html body .p2-page {
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 0 30px !important;
  overflow: visible !important;
}
html body .p2-hero-stage {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 20px !important;
  padding: 76px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow: visible !important;
}

/* Barra de logo y búsqueda: situada después del bloque del juego. */
html body .topbar {
  order: 1 !important;
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}
html body .topbar .brand-link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .titulo {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .titulo span {
  color: var(--m3-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
html body .titulo img {
  width: 44px !important;
  height: 44px !important;
  margin: 0 -5px !important;
  filter: none !important;
}
html body .entrada-con-borrar {
  position: relative !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}
html body .entrada-con-borrar input,
html body #userGuess {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 46px 0 14px !important;
  border-radius: 10px !important;
  background: var(--m3-surface-raised) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line-strong) !important;
  box-shadow: none !important;
  font-size: .94rem !important;
  transform: none !important;
  animation: none !important;
}
html body .entrada-con-borrar input:focus,
html body #userGuess:focus {
  border-color: #89978e !important;
  box-shadow: 0 0 0 3px rgba(112, 132, 120, .14) !important;
  outline: 0 !important;
}
html body #sugerencias,
html body .suggestions-list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200000 !important;
  max-height: min(360px, 48vh) !important;
  overflow-y: auto !important;
  border-radius: 10px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: var(--m3-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body #sugerencias li,
html body .suggestions-list li {
  color: var(--m3-text) !important;
  background: transparent !important;
}
html body #sugerencias li:hover,
html body .suggestions-list li:hover {
  background: var(--m3-surface-soft) !important;
}

/* Juego: cinco áreas independientes. Nada comparte celda. */
html body #description.p2-hero-card {
  order: 0 !important;
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(18px, 2.3vw, 28px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr) !important;
  grid-template-areas:
    "image headline"
    "image lead"
    "image gamehead"
    "image gameform" !important;
  align-items: center !important;
  gap: 14px 26px !important;
  overflow: hidden !important;
  isolation: auto !important;
  border-radius: 16px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  animation: none !important;
}
html body #description.p2-hero-card .guess-image {
  grid-area: image !important;
  display: block !important;
  width: 100% !important;
  height: clamp(270px, 31vw, 400px) !important;
  min-height: 270px !important;
  max-height: 400px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 12px !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
html body #description.p2-hero-card h1 {
  grid-area: headline !important;
  align-self: end !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--m3-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.65rem, 3vw, 2.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.05em !important;
  text-align: left !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html body #description.p2-hero-card p {
  grid-area: lead !important;
  align-self: start !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--m3-muted) !important;
  font-size: .92rem !important;
  line-height: 1.52 !important;
  text-align: left !important;
  opacity: 1 !important;
}
html body #description.p2-hero-card .guess-buttons {
  grid-area: gamehead !important;
  position: static !important;
  width: 100% !important;
  margin: 3px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  z-index: auto !important;
}
html body .guess-title {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--m3-text) !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  animation: none !important;
}
html body .stremio-button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  font-size: .76rem !important;
  font-weight: 650 !important;
  transform: none !important;
}
html body #description.p2-hero-card .guess-form {
  grid-area: gameform !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: auto !important;
}
html body .guess-form button {
  width: auto !important;
  min-width: 104px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-primary-text) !important;
  border: 1px solid #c5d6cc !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  transform: none !important;
}
html body .guess-form button:hover {
  background: var(--m3-primary-hover) !important;
  transform: none !important;
}
html body .guess-result {
  grid-column: 1 / -1 !important;
  margin: 2px 0 0 !important;
  color: var(--m3-text) !important;
  font-size: .9rem !important;
  text-align: left !important;
}

/* Centro de herramientas. */
html body .p2-command-center {
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto 18px !important;
  padding: 20px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}
html body .p2-command-center > * {
  max-width: none !important;
}
html body #ayuda-botones,
html body .options-help {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--m3-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: .78rem !important;
  text-align: left !important;
}
html body .favorites-block {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 13px !important;
  border-radius: 11px !important;
  background: var(--m3-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}
html body .favorites-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
html body .favorites-title {
  margin: 0 !important;
  color: var(--m3-text) !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}
html body .favorites-note,
html body .favorites-empty,
html body .shared-favorites-text {
  color: var(--m3-muted) !important;
  font-size: .76rem !important;
  line-height: 1.42 !important;
}
html body .favorites-actions,
html body .shared-favorites-actions {
  gap: 6px !important;
}
html body .favorites-action-button,
html body .favorites-share-button,
html body .favorites-clear-button,
html body .favorite-item-label,
html body .favorite-item-remove {
  min-height: 34px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  font-size: .75rem !important;
  transform: none !important;
}
html body .favorites-clear-button,
html body .favorite-item-remove {
  background: var(--m3-danger) !important;
  color: var(--m3-danger-text) !important;
}

/* Todos los botones de herramientas, incluidos los que antes tenían reglas por ID. */
html body .p2-command-center .botones {
  width: 100% !important;
  margin: 8px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 50px !important;
  gap: 8px !important;
}
html body .p2-command-center .botones > button,
html body .options-panel > button,
html body .top-links button {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
}
html body .p2-command-center .botones > button:hover,
html body .options-panel > button:hover,
html body .top-links button:hover {
  background: var(--m3-button-hover) !important;
  border-color: var(--m3-line-strong) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
html body .p2-command-center .botones > button small {
  color: #4f5b54 !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}
html body .options-panel {
  width: 100% !important;
  margin: 10px 0 !important;
  padding: 10px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 50px !important;
  gap: 7px !important;
  border-radius: 11px !important;
  background: var(--m3-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}

/* Secciones inferiores: neutras y sin bloques azules. */
html body .results-block,
html body .top10-block,
html body .didyouknow,
html body .ai-promo,
html body .support-block,
html body .friend-apps,
html body .site-footer,
html body .thank-you-block,
html body .top5 {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 16px auto !important;
  padding: 18px !important;
  border-radius: 14px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  animation: none !important;
}
html body .top5 h2,
html body .barra-top10 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--m3-text) !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
}
html body #trakt-trending-movies,
html body #trakt-trending-shows {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html body #trakt-trending-movies li,
html body #trakt-trending-shows li,
html body .top-links li {
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 10px !important;
  background: var(--m3-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}
html body .trend-link {
  min-height: 52px !important;
  padding: 10px !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  font-size: .8rem !important;
}
html body .top10-block {
  display: block !important;
  overflow: visible !important;
}
html body .top10-block .top5 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body .top-links {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html body .top-links li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
html body .top-links button {
  min-height: 38px !important;
  padding: 6px 9px !important;
  font-size: .76rem !important;
  justify-content: center !important;
  text-align: center !important;
}
html body .top-links li button:first-child {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body .didyouknow {
  max-width: 260px !important;
  padding: 10px !important;
}
html body .didyouknow img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html body .ai-button,
html body .support-link,
html body .tmdb-upcoming-link,
html body .trakt-search-links li a {
  min-height: 38px !important;
  height: auto !important;
  padding: 8px 13px !important;
  border-radius: 9px !important;
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-primary-text) !important;
  border: 1px solid #c5d6cc !important;
  box-shadow: none !important;
  font-size: .8rem !important;
  transform: none !important;
}
html body .friend-app-card {
  border-radius: 11px !important;
  background: var(--m3-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
}
html body .site-footer,
html body .ai-promo-description {
  color: var(--m3-muted) !important;
  font-size: .82rem !important;
}

/* Welcome: amplio, legible y completo en iPad horizontal sin scroll. */
html body .mid-welcome {
  position: fixed !important;
  inset: 0 !important;
  z-index: 400000 !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: var(--m3-overlay) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html body .mid-welcome.hidden {
  display: none !important;
}
html body .mid-welcome-card {
  position: relative !important;
  width: min(1060px, calc(100vw - 48px)) !important;
  max-width: 1060px !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
  padding: 32px !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 26px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .24) !important;
  animation: none !important;
}
html body .mid-welcome-left {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
html body .mid-welcome-left img {
  width: 80px !important;
  height: 80px !important;
  max-width: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
html body .mid-welcome-right {
  min-width: 0 !important;
  padding-right: 40px !important;
}
html body .mid-welcome-right h1 {
  margin: 0 0 9px !important;
  color: var(--m3-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}
html body .mid-welcome-right > p {
  min-height: 0 !important;
  margin: 0 0 17px !important;
  color: var(--m3-muted) !important;
  font-size: 1rem !important;
  line-height: 1.48 !important;
}
html body .mid-welcome-updates {
  margin: 0 0 15px !important;
  padding: 15px 17px !important;
  border-radius: 12px !important;
  background: var(--m3-surface-soft) !important;
  background-image: none !important;
  border: 1px solid var(--m3-line) !important;
}
html body .mid-welcome-updates h2 {
  margin: 0 0 9px !important;
  color: var(--m3-text) !important;
  font-size: 1.05rem !important;
}
html body .mid-welcome-updates-list {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 24px !important;
  list-style: none !important;
}
html body .mid-welcome-updates-list li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 14px !important;
  color: var(--m3-muted) !important;
  font-size: .88rem !important;
  line-height: 1.34 !important;
}
html body .mid-welcome-updates-list li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: .55em !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #8b9b91 !important;
}
html body .mid-welcome-start {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 0 10px !important;
  padding: 0 15px !important;
  border-radius: 9px !important;
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-primary-text) !important;
  border: 1px solid #c5d6cc !important;
  box-shadow: none !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
  transform: none !important;
}
html body .mid-welcome-links {
  margin: 5px 0 0 !important;
  color: var(--m3-muted) !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}
html body .mid-welcome-links a {
  color: #667d70 !important;
  font-weight: 700 !important;
}
html body .mid-welcome-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  font-size: 1.25rem !important;
  transform: none !important;
}

/* Modales: siempre por encima de idioma, tema y ticker. Cierre siempre visible. */
html body .wm-overlay,
html body .wtw-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 350000 !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: var(--m3-overlay) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html body .wm-card,
html body .wtw-sheet {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
  padding: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-radius: 16px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .25) !important;
  animation: none !important;
}
html body .wm-card h3,
html body .wtw-sheet h3 {
  margin: 0 0 16px !important;
  color: var(--m3-text) !important;
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  line-height: 1.12 !important;
}
html body .info-modal-content {
  display: grid !important;
  gap: 12px !important;
  color: var(--m3-muted) !important;
}
html body .info-modal-content h4 {
  margin: 8px 0 0 !important;
  color: var(--m3-text) !important;
}
html body .info-modal-content ul {
  gap: 7px !important;
}
html body .info-modal-content li {
  padding: 10px 12px !important;
  border-radius: 9px !important;
  background: var(--m3-surface-soft) !important;
  border: 1px solid var(--m3-line) !important;
  color: var(--m3-muted) !important;
  line-height: 1.45 !important;
}
html body .wm-close,
html body .wtw-close {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 18px 0 0 !important;
  padding: 0 14px !important;
  flex: 0 0 auto !important;
  border-radius: 9px !important;
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-primary-text) !important;
  border: 1px solid #c5d6cc !important;
  box-shadow: 0 -8px 16px var(--m3-surface) !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
  transform: none !important;
}
html body #modalFicha,
html body #modalImagen,
html body #modalYoutube,
html body #modalPeople,
html body #modalTrailer,
html body #modalLocalizaciones {
  z-index: 350000 !important;
}
html body #modalFicha[style*="display: block"],
html body #modalFicha[style*="display:block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
html body #modalFicha #fichaArtisticaContent {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 26px 26px 76px !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  color: var(--m3-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .25) !important;
}
html body #modalFicha button.close-ficha {
  position: fixed !important;
  right: max(36px, calc((100vw - 980px) / 2 + 24px)) !important;
  bottom: 38px !important;
  z-index: 350010 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-primary-text) !important;
  border: 1px solid #c5d6cc !important;
  box-shadow: none !important;
}

/* Ticker fijo restaurado; el contenido reserva su altura. */
html body .news-box {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 500 !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(42px + env(safe-area-inset-bottom)) !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--m3-line) !important;
  border-radius: 0 !important;
  background: var(--m3-surface) !important;
  background-image: none !important;
  box-shadow: 0 -5px 18px rgba(20, 30, 24, .08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html body .news-item {
  display: inline-block !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  animation: tickerAnim 240s linear infinite !important;
  will-change: transform !important;
}
html body .news-item a {
  margin-right: 48px !important;
  color: var(--m3-muted) !important;
  font-size: .78rem !important;
  text-decoration: none !important;
}

/* Tablet. */
@media (max-width: 980px) {
  html body .p2-page { width: min(100% - 22px, 920px) !important; }
  html body .topbar { grid-template-columns: 1fr !important; gap: 13px !important; }
  html body #description.p2-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(285px, .9fr) !important;
    gap: 13px 20px !important;
  }
  html body .p2-command-center .botones,
  html body .options-panel { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body .top-links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body #trakt-trending-movies,
  html body #trakt-trending-shows { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .mid-welcome-card {
    width: min(940px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 26px !important;
    gap: 20px !important;
  }
}

/* Móvil y tablet estrecha. */
@media (max-width: 760px) {
  html body .p2-hero-stage { padding-top: 68px !important; }
  html body #description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "headline"
      "lead"
      "gamehead"
      "gameform" !important;
  }
  html body #description.p2-hero-card .guess-image {
    height: clamp(210px, 54vw, 340px) !important;
    min-height: 210px !important;
  }
  html body .p2-command-center .botones,
  html body .options-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .top-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .mid-welcome {
    padding: 12px !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
  }
  html body .mid-welcome-card {
    width: 100% !important;
    max-height: none !important;
    margin: auto 0 !important;
    padding: 20px 17px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: visible !important;
  }
  html body .mid-welcome-left img { width: 54px !important; height: 54px !important; }
  html body .mid-welcome-right { padding-right: 0 !important; }
  html body .mid-welcome-right h1 { padding-right: 36px !important; font-size: 1.55rem !important; }
  html body .mid-welcome-right > p { font-size: .9rem !important; }
  html body .mid-welcome-updates-list { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  html body .p2-page { width: calc(100% - 16px) !important; }
  html body .topbar,
  html body #description.p2-hero-card,
  html body .p2-command-center { padding: 14px !important; border-radius: 13px !important; }
  html body .language-switcher { min-width: 112px !important; }
  html body .guess-form { grid-template-columns: 1fr !important; }
  html body .guess-form button { width: 100% !important; }
  html body .top-links { grid-template-columns: 1fr !important; }
}

@media (max-height: 700px) and (min-width: 761px) {
  html body .mid-welcome { padding: 14px !important; }
  html body .mid-welcome-card {
    width: min(1040px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 21px 24px !important;
    gap: 18px !important;
  }
  html body .mid-welcome-left img { width: 68px !important; height: 68px !important; }
  html body .mid-welcome-right h1 { margin-bottom: 6px !important; font-size: 1.7rem !important; }
  html body .mid-welcome-right > p { margin-bottom: 10px !important; font-size: .88rem !important; line-height: 1.35 !important; }
  html body .mid-welcome-updates { margin-bottom: 10px !important; padding: 10px 13px !important; }
  html body .mid-welcome-updates h2 { margin-bottom: 6px !important; }
  html body .mid-welcome-updates-list { gap: 4px 18px !important; }
  html body .mid-welcome-updates-list li { font-size: .74rem !important; line-height: 1.24 !important; }
  html body .mid-welcome-start { height: 38px !important; min-height: 38px !important; margin-bottom: 6px !important; }
  html body .mid-welcome-links { margin-top: 2px !important; font-size: .74rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .news-item { animation: none !important; transform: none !important; }
}

/* Correcciones finales de especificidad y estado oculto */
html body .wm-overlay[style*="display:none"],
html body .wm-overlay[style*="display: none"],
html body .wtw-overlay[style*="display:none"],
html body .wtw-overlay[style*="display: none"],
html body #modalLocalizaciones[style*="display:none"],
html body #modalLocalizaciones[style*="display: none"] {
  display: none !important;
}

html body .info-modal-content ul {
  list-style: none !important;
  padding-left: 0 !important;
}

html body #btn-where,
html body #btn-trailer,
html body #btn-bso,
html body #btn-review,
html body #btn-bloopers,
html body #btn-ficha,
html body #btn-fullcredits,
html body #btn-filmaffinity,
html body #btn-trakt,
html body #btn-omdb,
html body #btn-tmdb,
html body #btn-trivia,
html body #btn-makingof,
html body #btn-people,
html body #btn-awards,
html body #btn-critics,
html body #btn-userreviews,
html body #btn-imagenes,
html body #btn-canciones,
html body #btn-guion,
html body #btn-guion2,
html body #btn-guion3,
html body #btnSimilar,
html body #btn-clips,
html body #btn-clips2,
html body #btn-stremio,
html body #btn-venir-movie,
html body #btn-venir-show {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-color: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  font-size: .9rem !important;
  line-height: 1.15 !important;
}

html body .p2-command-center .botones > .boton-reddit-opcion,
html body .p2-command-center .botones > button[data-help="locations"],
html body .p2-command-center .botones > .fila2,
html body .p2-command-center .botones > .fila3 {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  background: var(--m3-button) !important;
  background-color: var(--m3-button) !important;
  background-image: none !important;
}

/* Botones compactos aunque el HTML incluya span, br o small */
html body .p2-command-center .botones > button span,
html body .p2-command-center .botones > button small {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}
html body .p2-command-center .botones > button br {
  display: none !important;
}

/* Neutraliza la disposición vertical heredada de botones concretos */
html body #btn-where,
html body #btn-trailer,
html body #btn-bso,
html body #btn-review,
html body #btn-bloopers,
html body #btn-ficha,
html body #btn-fullcredits,
html body #btn-filmaffinity,
html body #btn-trakt,
html body #btn-omdb,
html body #btn-tmdb,
html body #btn-trivia,
html body #btn-makingof,
html body #btn-people,
html body #btn-awards,
html body #btn-critics,
html body #btn-userreviews,
html body #btn-imagenes,
html body #btn-canciones,
html body #btn-guion,
html body #btn-guion2,
html body #btn-guion3,
html body #btnSimilar,
html body #btn-clips,
html body #btn-clips2,
html body #btn-stremio,
html body #btn-venir-movie,
html body #btn-venir-show {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

/* Evita estados iniciales invisibles heredados de animaciones */
html body .topbar,
html body .p2-command-center,
html body .top5,
html body .results-block,
html body .top10-block,
html body .didyouknow,
html body .ai-promo,
html body .support-block,
html body .friend-apps,
html body .site-footer,
html body .thank-you-block {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Reparación final: neutraliza los dos controles que aún heredaban azul */
html body #description.p2-hero-card .guess-buttons .stremio-button,
html body #description.p2-hero-card .stremio-button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: var(--m3-button) !important;
  background-color: var(--m3-button) !important;
  background-image: none !important;
  color: var(--m3-button-text) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

html body .entrada-con-borrar .borrar-x,
html body .borrar-x {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  right: 7px !important;
  top: 23px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: var(--m3-surface-soft) !important;
  background-color: var(--m3-surface-soft) !important;
  background-image: none !important;
  color: var(--m3-muted) !important;
  border: 1px solid var(--m3-line) !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modal informativo: el contenido se desplaza dentro y el cierre nunca queda tapado */
html body .wtw-sheet:has(.info-modal-content) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}
html body .wtw-sheet:has(.info-modal-content) > .info-modal-content {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 5px !important;
  scrollbar-gutter: stable !important;
}
html body .wtw-sheet:has(.info-modal-content) > .wtw-close {
  position: static !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}

/* Ajuste final de la barra situada bajo el juego. */
html body .entrada-con-borrar .ficha-artistica-container--top:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
   AJUSTE FINAL SOLICITADO: TEXTO 18 PX Y ALTURA UNIFORME
   Todos los controles pulsables de fondo claro comparten altura.
   ========================================================== */
:root {
  --m3-uniform-button-height: 64px;
  --m3-uniform-button-font: 18px;
}

html body .p2-command-center .botones {
  grid-auto-rows: var(--m3-uniform-button-height) !important;
}

html body .p2-command-center .botones > button,
html body .options-panel > button,
html body .trend-link,
html body .top-links button,
html body .favorites-action-button,
html body .favorites-share-button,
html body .favorite-item-label,
html body #description.p2-hero-card .guess-buttons .stremio-button,
html body #description.p2-hero-card .stremio-button {
  box-sizing: border-box !important;
  min-height: var(--m3-uniform-button-height) !important;
  height: var(--m3-uniform-button-height) !important;
  max-height: var(--m3-uniform-button-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--m3-uniform-button-font) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

html body .p2-command-center .botones > button,
html body .options-panel > button,
html body .trend-link,
html body .top-links button,
html body #description.p2-hero-card .guess-buttons .stremio-button,
html body #description.p2-hero-card .stremio-button {
  display: inline-flex !important;
  align-items: center !important;
}

html body .trend-link {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body .top-links button {
  justify-content: center !important;
  text-align: center !important;
}

html body .top-links li button:first-child {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* El texto auxiliar de “Reparto y equipo técnico” crece sin competir
   con la etiqueta principal ni alterar la altura común. */
html body .p2-command-center .botones > button small,
html body .p2-command-center .botones > button span small {
  font-size: 15px !important;
  line-height: 1.05 !important;
}

html body .options-panel {
  grid-auto-rows: var(--m3-uniform-button-height) !important;
}

@media (max-width: 600px) {
  :root {
    --m3-uniform-button-height: 58px;
    --m3-uniform-button-font: 16px;
  }

  html body .p2-command-center .botones > button small,
  html body .p2-command-center .botones > button span small {
    font-size: 13px !important;
  }
}

/* ==========================================================
   CORRECCIÓN FINAL: CENTRADO VERTICAL, AJUSTE MÓVIL Y ENLACES VERDES
   ========================================================== */
:root {
  --m3-uniform-button-height: 72px;
  --m3-uniform-button-font: 18px;
  --m3-action-green: #22c55e;
  --m3-action-green-hover: #16a34a;
  --m3-action-green-text: #052e16;
}

/* Una sola altura y una sola alineación para todos los botones claros. */
html body .p2-command-center .botones {
  grid-auto-rows: var(--m3-uniform-button-height) !important;
  align-items: stretch !important;
}

html body .p2-command-center .botones > button,
html body .options-panel > button,
html body .trend-link,
html body .top-links button,
html body .favorites-action-button,
html body .favorites-share-button,
html body .favorites-clear-button,
html body .favorite-item-label,
html body #description.p2-hero-card .guess-buttons .stremio-button,
html body #description.p2-hero-card .stremio-button {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  min-height: var(--m3-uniform-button-height) !important;
  height: var(--m3-uniform-button-height) !important;
  max-height: var(--m3-uniform-button-height) !important;
  padding: 7px 16px !important;
  margin: 0 !important;
  font-size: var(--m3-uniform-button-font) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* Neutraliza cualquier alineación particular heredada. */
html body .p2-command-center .botones > .boton-reddit-opcion,
html body .p2-command-center .botones > button[data-help="locations"],
html body .p2-command-center .botones > .fila1,
html body .p2-command-center .botones > .fila2,
html body .p2-command-center .botones > .fila3,
html body #btn-venir-movie,
html body #btn-venir-show {
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  transform: none !important;
}

/* El texto y los elementos internos participan en el centrado, sin desplazamientos. */
html body .p2-command-center .botones > button > span,
html body .p2-command-center .botones > button > small,
html body .options-panel > button > span,
html body .trend-link > span,
html body .top-links button > span {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  line-height: inherit !important;
}

html body .p2-command-center .botones > button small,
html body .p2-command-center .botones > button span small {
  font-size: 15px !important;
  line-height: 1.08 !important;
}

/* Tendencias y Top 10: mismo centrado y altura, con su alineación prevista. */
html body .trend-link {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
html body .top-links button {
  justify-content: center !important;
  text-align: center !important;
}
html body .top-links li button:first-child {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body .options-panel {
  grid-auto-rows: var(--m3-uniform-button-height) !important;
}

/* Ko-fi y Dijugar: verde vivo, visible y con contraste alto. */
html body .support-link,
html body .mid-welcome-links a[href*="ko-fi.com"],
html body .mid-welcome-links a[href*="dijugar.com"],
html body a[href*="ko-fi.com"].support-link,
html body a[href*="dijugar.com"] {
  color: var(--m3-action-green-text) !important;
  background: var(--m3-action-green) !important;
  background-color: var(--m3-action-green) !important;
  background-image: none !important;
  border: 1px solid #15803d !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

html body .support-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 9px 16px !important;
}

html body .mid-welcome-links a[href*="ko-fi.com"],
html body .mid-welcome-links a[href*="dijugar.com"] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 4px 9px !important;
}

html body .support-link:hover,
html body .mid-welcome-links a[href*="ko-fi.com"]:hover,
html body .mid-welcome-links a[href*="dijugar.com"]:hover,
html body a[href*="dijugar.com"]:hover {
  color: #ffffff !important;
  background: var(--m3-action-green-hover) !important;
  background-color: var(--m3-action-green-hover) !important;
}

@media (max-width: 600px) {
  :root {
    --m3-uniform-button-height: 84px;
    --m3-uniform-button-font: 16px;
  }

  html body .p2-command-center .botones > button,
  html body .options-panel > button,
  html body .trend-link,
  html body .top-links button,
  html body .favorites-action-button,
  html body .favorites-share-button,
  html body .favorites-clear-button,
  html body .favorite-item-label,
  html body #description.p2-hero-card .guess-buttons .stremio-button,
  html body #description.p2-hero-card .stremio-button {
    padding: 8px 11px !important;
    line-height: 1.14 !important;
    overflow: visible !important;
  }

  html body .p2-command-center .botones > button small,
  html body .p2-command-center .botones > button span small {
    font-size: 13px !important;
  }
}

/* Autoridad final sobre reglas antiguas por ID: conserva 18 px/16 px y altura común. */
html body #btn-where,
html body #btn-trailer,
html body #btn-bso,
html body #btn-review,
html body #btn-bloopers,
html body #btn-ficha,
html body #btn-fullcredits,
html body #btn-filmaffinity,
html body #btn-trakt,
html body #btn-omdb,
html body #btn-tmdb,
html body #btn-trivia,
html body #btn-makingof,
html body #btn-people,
html body #btn-awards,
html body #btn-critics,
html body #btn-userreviews,
html body #btn-imagenes,
html body #btn-canciones,
html body #btn-guion,
html body #btn-guion2,
html body #btn-guion3,
html body #btnSimilar,
html body #btn-clips,
html body #btn-clips2,
html body #btn-stremio,
html body #btn-venir-movie,
html body #btn-venir-show {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: var(--m3-uniform-button-height) !important;
  height: var(--m3-uniform-button-height) !important;
  max-height: var(--m3-uniform-button-height) !important;
  padding: 7px 16px !important;
  margin: 0 !important;
  font-size: var(--m3-uniform-button-font) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
  vertical-align: middle !important;
}

html body .p2-command-center.p2-command-center .botones.botones > button.boton-reddit-opcion,
html body .p2-command-center.p2-command-center .botones.botones > button[data-help="locations"],
html body .p2-command-center.p2-command-center .botones.botones > button.fila1,
html body .p2-command-center.p2-command-center .botones.botones > button.fila2,
html body .p2-command-center.p2-command-center .botones.botones > button.fila3 {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: var(--m3-uniform-button-height) !important;
  height: var(--m3-uniform-button-height) !important;
  max-height: var(--m3-uniform-button-height) !important;
  padding: 7px 16px !important;
  margin: 0 !important;
  font-size: var(--m3-uniform-button-font) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* ==========================================================
   TOP 10 POR PLATAFORMA: TARJETAS UNIFORMES Y LEGIBLES
   Nombre a ancho completo y dos acciones iguales debajo.
   ========================================================== */
html body .top-links {
  align-items: stretch !important;
  gap: 12px !important;
}

html body .top-links li {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 72px 56px !important;
  grid-template-areas:
    "platform platform"
    "movies shows" !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 156px !important;
  min-height: 156px !important;
  max-height: 156px !important;
  padding: 10px !important;
}

html body .top-links li > button {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body .top-links li > button:first-child {
  grid-area: platform !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 8px 12px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  justify-content: center !important;
  text-align: center !important;
}

html body .top-links li > button:nth-child(2) {
  grid-area: movies !important;
}

html body .top-links li > button:nth-child(3) {
  grid-area: shows !important;
}

html body .top-links li > button:nth-child(2),
html body .top-links li > button:nth-child(3) {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 600px) {
  html body .top-links li {
    grid-template-rows: 68px 54px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  html body .top-links li > button:first-child {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    font-size: 17px !important;
  }

  html body .top-links li > button:nth-child(2),
  html body .top-links li > button:nth-child(3) {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    font-size: 24px !important;
  }
}