/* Movies in Detail — portada de descubrimiento visual */
.p2-command-center {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* La botonera histórica sigue en el DOM como capa de compatibilidad para la ficha. */
html body .p2-command-center > #ayuda-botones,
html body .p2-command-center > .botones,
html body #opcionesImagenes {
  display: none !important;
}

.p2-command-center .midfv-launch-wrap {
  margin: 0 !important;
}

.mid-discovery {
  width: min(100%, 1480px);
  margin: 28px auto;
  padding: 0 18px;
  box-sizing: border-box;
}

.mid-discovery-intro {
  margin: 0 0 18px;
}

.mid-discovery-kicker {
  margin: 0 0 5px;
  color: #c4b5fd;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mid-discovery-intro h2 {
  margin: 0;
  color: var(--text, #f7f7fb);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.mid-discovery-intro > p:last-child {
  max-width: 670px;
  margin: 8px 0 0;
  color: var(--text-muted, rgba(255,255,255,.62));
  font-size: .96rem;
  line-height: 1.5;
}

.mid-shelf {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(30,41,59,.78), rgba(9,14,25,.9));
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}

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

.mid-shelf-head > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.mid-shelf-head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.mid-shelf-icon {
  display: grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(124,58,237,.2);
  color: #ddd6fe;
  font-size: .92rem;
}

.mid-shelf-note {
  flex: 0 0 auto;
  color: rgba(255,255,255,.48);
  font-size: .75rem;
  font-weight: 700;
}

.mid-card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  grid-template-rows: 1fr;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.5) transparent;
  overscroll-behavior-inline: contain;
}

.mid-card-rail > * {
  scroll-snap-align: start;
}

.mid-title-card {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: #111827;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(0,0,0,.2);
  -webkit-tap-highlight-color: transparent;
}

.mid-title-card:focus-visible {
  outline: 3px solid #a78bfa;
  outline-offset: 2px;
}

.mid-title-card-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, #283247, #111827);
}

.mid-title-card-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mid-title-card-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(255,255,255,.7);
  font-size: 2rem;
}

.mid-title-card-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  min-width: 29px;
  height: 29px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  background: rgba(5,8,15,.82);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
}

.mid-title-card-copy {
  display: flex;
  min-height: 86px;
  padding: 11px;
  flex-direction: column;
  box-sizing: border-box;
}

.mid-title-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: .9rem;
  line-height: 1.22;
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mid-title-card-meta {
  display: flex;
  margin-top: auto;
  padding-top: 9px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  font-weight: 700;
}

.mid-title-card-rating {
  color: #fde68a;
}

.mid-card-placeholder {
  min-height: 310px;
  border-radius: 15px;
  background: linear-gradient(100deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.09) 42%, rgba(255,255,255,.045) 60%);
  background-size: 220% 100%;
  animation: midSkeleton 1.35s ease-in-out infinite;
}

.mid-card-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 34px 12px;
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  text-align: center;
}

.mid-platform-tabs {
  display: flex;
  gap: 8px;
  margin: -2px 0 13px;
  padding: 2px 1px 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mid-platform-tabs::-webkit-scrollbar { display: none; }

.mid-platform-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.72);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.mid-platform-tab[aria-selected="true"] {
  border-color: rgba(196,181,253,.7);
  background: #ede9fe;
  color: #1e1b4b;
}

html[data-theme="light"] .mid-discovery-intro h2 { color: #171923; }
html[data-theme="light"] .mid-discovery-intro > p:last-child { color: #596273; }
html[data-theme="light"] .mid-discovery-kicker { color: #6d28d9; }
html[data-theme="light"] .mid-shelf {
  border-color: rgba(30,41,59,.12);
  background: linear-gradient(145deg, #fff, #f4f6fb);
  box-shadow: 0 10px 28px rgba(30,41,59,.08);
}
html[data-theme="light"] .mid-shelf-head h3 { color: #1b2330; }
html[data-theme="light"] .mid-shelf-note { color: #64748b; }
html[data-theme="light"] .mid-shelf-icon { background: #ede9fe; color: #5b21b6; }
html[data-theme="light"] .mid-title-card { border-color: rgba(30,41,59,.12); background: #fff; color: #172033; }
html[data-theme="light"] .mid-title-card-copy strong { color: #172033; }
html[data-theme="light"] .mid-title-card-meta { color: #64748b; }
html[data-theme="light"] .mid-title-card-rating { color: #9a5b00; }
html[data-theme="light"] .mid-platform-tab { border-color: rgba(30,41,59,.14); background: #fff; color: #475569; }
html[data-theme="light"] .mid-card-message { color: #64748b; }

/* El bloque histórico tenía reglas !important que dejaban texto claro sobre fondo claro. */
html body #did-you-know.didyouknow {
  display: block !important;
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 20px auto !important;
  padding: clamp(24px, 4vw, 44px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(167,139,250,.24) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(124,58,237,.28), transparent 38%),
    radial-gradient(circle at 88% 88%, rgba(14,165,233,.20), transparent 42%),
    #0d1422 !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.15) !important;
}

html body #did-you-know .didyouknow-content {
  width: 100% !important;
  max-width: 760px !important;
}

html body #did-you-know .didyouknow-kicker { color: #a7dcff !important; }
html body #did-you-know h2 { color: #fff !important; }
html body #did-you-know .didyouknow-text { color: rgba(255,255,255,.88) !important; }

html[data-theme="light"] body #did-you-know.didyouknow {
  border-color: rgba(109,40,217,.16) !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(124,58,237,.14), transparent 38%),
    radial-gradient(circle at 88% 88%, rgba(14,165,233,.12), transparent 42%),
    #f8f7ff !important;
  color: #172033 !important;
  box-shadow: 0 12px 28px rgba(30,41,59,.08) !important;
}

html[data-theme="light"] body #did-you-know .didyouknow-kicker { color: #0369a1 !important; }
html[data-theme="light"] body #did-you-know h2 { color: #171923 !important; }
html[data-theme="light"] body #did-you-know .didyouknow-text { color: #475569 !important; }

@keyframes midSkeleton {
  to { background-position: -120% 0; }
}

@media (min-width: 900px) {
  .mid-card-rail { grid-auto-columns: 158px; }
  .mid-title-card { transition: transform .18s ease, border-color .18s ease; }
  .mid-title-card:hover { transform: translateY(-3px); border-color: rgba(196,181,253,.55); }
}

@media (max-width: 620px) {
  .mid-discovery { margin-top: 20px; padding: 0 10px; }
  .mid-discovery-intro { padding: 0 3px; }
  .mid-discovery-intro > p:last-child { font-size: .85rem; }
  .mid-shelf { margin-bottom: 12px; padding: 13px 11px 10px; border-radius: 16px; }
  .mid-shelf-head { margin-bottom: 10px; }
  .mid-shelf-note { display: none; }
  .mid-card-rail { grid-auto-columns: 132px; gap: 9px; margin-right: -11px; padding-right: 11px; }
  .mid-title-card { border-radius: 13px; }
  .mid-title-card-copy { min-height: 80px; padding: 9px; }
  .mid-title-card-copy strong { font-size: .82rem; }
  .mid-title-card-meta { font-size: .67rem; }
  .mid-card-placeholder { min-height: 278px; }
  .mid-platform-tab { min-height: 34px; padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mid-card-placeholder { animation: none; }
  .mid-title-card { transition: none; }
}

/* =========================================================
   V4 · MIGRACIÓN VISUAL AISLADA SOBRE LA UI REAL
   Solo CSS. Conserva DOM, IDs, data-*, onclick, APIs y flujos existentes.
   ========================================================= */
:root {
  --v4-bg: #0f1115;
  --v4-surface: #17191e;
  --v4-surface-2: #20232a;
  --v4-surface-3: #292d35;
  --v4-text: #f5f6f8;
  --v4-muted: #9aa0aa;
  --v4-line: rgba(255,255,255,.10);
  --v4-glass: rgba(24,27,33,.82);
  --v4-glass-border: rgba(255,255,255,.10);
  --v4-accent: #9aa6ff;
  --v4-shadow: 0 18px 52px rgba(0,0,0,.22);
}

html[data-theme="light"] {
  --v4-bg: #f4f5f7;
  --v4-surface: #ffffff;
  --v4-surface-2: #e9ebef;
  --v4-surface-3: #dfe2e7;
  --v4-text: #101114;
  --v4-muted: #686d75;
  --v4-line: rgba(16,17,20,.10);
  --v4-glass: rgba(250,251,252,.84);
  --v4-glass-border: rgba(255,255,255,.74);
  --v4-accent: #7788ff;
  --v4-shadow: 0 18px 52px rgba(16,20,32,.09);
}

html body {
  padding: 0 14px 28px !important;
  background: var(--v4-bg) !important;
  background-image:
    radial-gradient(circle at 12% 0%, color-mix(in srgb,var(--v4-accent) 8%,transparent), transparent 32rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb,var(--v4-accent) 5%,transparent), transparent 34rem) !important;
  color: var(--v4-text) !important;
  letter-spacing: -.012em !important;
}

html body::before,
html body::after { display: none !important; }

html body .p2-page {
  width: 100% !important;
  max-width: 1480px !important;
  padding-top: 84px !important;
}

/* Barra superior real convertida en shell V4 sin tocar su HTML. */
html body .p2-hero-stage > .topbar {
  position: fixed !important;
  z-index: 100000 !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 20px), 1280px) !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 7px 250px 7px 14px !important;
  display: grid !important;
  grid-template-columns: auto minmax(280px, 680px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  overflow: visible !important;
  border: 1px solid var(--v4-glass-border) !important;
  border-radius: 18px !important;
  background: var(--v4-glass) !important;
  box-shadow: 0 10px 32px color-mix(in srgb,var(--v4-text) 8%,transparent) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

html body .p2-hero-stage > .topbar::before,
html body .p2-hero-stage > .topbar::after { display: none !important; }

html body .p2-hero-stage > .topbar .brand-link {
  width: auto !important;
  margin: 0 !important;
  align-self: center !important;
}

html body .p2-hero-stage > .topbar .brand-link img {
  display: block !important;
  width: 188px !important;
  max-width: 188px !important;
  height: auto !important;
  margin: 0 !important;
}

html body .p2-hero-stage > .topbar .entrada-con-borrar {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 !important;
  justify-self: end !important;
}

html body .p2-hero-stage > .topbar .entrada-con-borrar input {
  height: 44px !important;
  padding: 0 44px 0 15px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb,var(--v4-surface) 88%,transparent) !important;
  color: var(--v4-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent) !important;
  font-size: .92rem !important;
}

html body .p2-hero-stage > .topbar .borrar-x {
  top: 22px !important;
  right: 6px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: var(--v4-surface-2) !important;
  border-color: var(--v4-line) !important;
  box-shadow: none !important;
}

/* Controles superiores integrados visualmente en el mismo shell. */
html body .theme-toggle,
html body .language-switcher,
html body .info-toggle {
  top: max(17px, calc(env(safe-area-inset-top) + 7px)) !important;
  min-height: 44px !important;
  height: 44px !important;
  border: 1px solid var(--v4-line) !important;
  background: color-mix(in srgb,var(--v4-surface-2) 78%,transparent) !important;
  color: var(--v4-text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html body .theme-toggle {
  right: max(18px, calc((100vw - 1280px)/2 + 10px)) !important;
  width: 70px !important;
  padding: 3px !important;
  border-radius: 13px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  font-size: 0 !important;
}

html body .theme-toggle::before,
html body .theme-toggle::after {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1;
  opacity: .42;
}
html body .theme-toggle::before { content: "☀"; }
html body .theme-toggle::after { content: "☾"; }
html[data-theme="light"] body .theme-toggle::before,
html[data-theme="dark"] body .theme-toggle::after {
  background: var(--v4-surface) !important;
  opacity: 1 !important;
  box-shadow: 0 3px 10px color-mix(in srgb,var(--v4-text) 10%,transparent) !important;
}

html body .language-switcher {
  right: max(94px, calc((100vw - 1280px)/2 + 86px)) !important;
  min-width: 112px !important;
  width: 112px !important;
  padding: 0 9px !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 13px !important;
}
html body .language-select {
  max-width: 72px !important;
  color: var(--v4-text) !important;
  font-size: .78rem !important;
  font-weight: 760 !important;
}

html body .info-toggle {
  left: auto !important;
  right: max(212px, calc((100vw - 1280px)/2 + 204px)) !important;
  width: 40px !important;
  min-width: 40px !important;
  border-radius: 13px !important;
}

/* Hero V4: impacto contenido y misma lógica real del juego. */
html body .p2-hero-stage {
  display: block !important;
  margin: 18px auto 26px !important;
}

html body main.p2-page #description.p2-hero-card {
  display: grid !important;
  grid-template-columns: minmax(0,.82fr) minmax(360px,1.18fr) !important;
  grid-template-areas:
    "headline image"
    "lead image"
    "gamehead image"
    "gameform image" !important;
  gap: 13px 34px !important;
  min-height: 0 !important;
  padding: clamp(30px,3.5vw,48px) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 24px !important;
  background: var(--v4-surface) !important;
  box-shadow: var(--v4-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  color: var(--v4-text) !important;
}

html body main.p2-page #description.p2-hero-card::before {
  content: "MOVIES IN DETAIL" !important;
  left: clamp(30px,3.5vw,48px) !important;
  top: 25px !important;
  color: var(--v4-accent) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  opacity: .9 !important;
}
html body main.p2-page #description.p2-hero-card::after { display: none !important; }

html body main.p2-page #description.p2-hero-card h1 {
  grid-area: headline !important;
  align-self: end !important;
  max-width: 620px !important;
  margin: 50px 0 0 !important;
  color: var(--v4-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.7rem,5vw,4.8rem) !important;
  line-height: .94 !important;
  letter-spacing: -.067em !important;
  font-weight: 820 !important;
}
html body main.p2-page #description.p2-hero-card h1::after { display: none !important; }

html body main.p2-page #description.p2-hero-card p {
  grid-area: lead !important;
  align-self: start !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v4-muted) !important;
  font-size: clamp(.95rem,1.35vw,1.12rem) !important;
  line-height: 1.52 !important;
}

html body main.p2-page #description.p2-hero-card .guess-image {
  grid-area: image !important;
  align-self: stretch !important;
  width: 100% !important;
  height: clamp(330px,31vw,420px) !important;
  min-height: 0 !important;
  max-height: 420px !important;
  object-fit: cover !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 42px color-mix(in srgb,var(--v4-text) 14%,transparent) !important;
  filter: saturate(.9) contrast(1.02) !important;
  opacity: 1 !important;
  animation: none !important;
}

html body main.p2-page #description .guess-buttons {
  grid-area: gamehead !important;
  margin: 7px 0 0 !important;
  align-self: end !important;
}
html body main.p2-page #description .guess-form {
  grid-area: gameform !important;
  margin: 0 !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 9px !important;
}
html body main.p2-page #description .guess-buttons::before,
html body main.p2-page #description .guess-form::after { display: none !important; }

html body main.p2-page #description .guess-title {
  min-height: 40px !important;
  padding: 0 15px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  background: var(--v4-text) !important;
  color: var(--v4-bg) !important;
  box-shadow: none !important;
  font-size: .84rem !important;
  animation: none !important;
}

html body main.p2-page #description #userGuess,
html body main.p2-page #description .guess-form button {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 13px !important;
  font-size: .88rem !important;
}
html body main.p2-page #description #userGuess {
  padding: 0 14px !important;
  border: 1px solid var(--v4-line) !important;
  background: var(--v4-surface-2) !important;
  color: var(--v4-text) !important;
  box-shadow: none !important;
}
html body main.p2-page #description .guess-form button {
  padding: 0 16px !important;
  border: 1px solid var(--v4-text) !important;
  background: var(--v4-text) !important;
  color: var(--v4-bg) !important;
  box-shadow: none !important;
}

/* Descubrimiento: conserva densidad real, cambia solo el lenguaje visual. */
html body .mid-discovery {
  width: min(100%,1480px) !important;
  margin: 30px auto !important;
  padding: 0 4px !important;
}
html body .mid-discovery-kicker { color: var(--v4-accent) !important; }
html body .mid-discovery-intro h2 { color: var(--v4-text) !important; }
html body .mid-discovery-intro > p:last-child { color: var(--v4-muted) !important; }
html body .mid-shelf {
  margin-bottom: 12px !important;
  padding: 14px 14px 15px !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px !important;
  background: var(--v4-surface) !important;
  box-shadow: 0 10px 28px color-mix(in srgb,var(--v4-text) 6%,transparent) !important;
}
html body .mid-shelf-head { margin-bottom: 11px !important; }
html body .mid-shelf-head h3 { color: var(--v4-text) !important; font-size: .88rem !important; }
html body .mid-shelf-note { color: var(--v4-muted) !important; }
html body .mid-shelf-icon {
  width: 29px !important;
  height: 29px !important;
  flex-basis: 29px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb,var(--v4-accent) 14%,var(--v4-surface-2)) !important;
  color: var(--v4-accent) !important;
}
html body .mid-card-rail {
  grid-auto-columns: 148px !important;
  gap: 12px !important;
  padding-bottom: 6px !important;
  scrollbar-color: color-mix(in srgb,var(--v4-accent) 46%,transparent) transparent !important;
}
html body .mid-title-card {
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  background: var(--v4-surface) !important;
  color: var(--v4-text) !important;
  box-shadow: 0 7px 18px color-mix(in srgb,var(--v4-text) 8%,transparent) !important;
}
html body .mid-title-card-copy {
  min-height: 78px !important;
  padding: 9px !important;
}
html body .mid-title-card-copy strong { color: var(--v4-text) !important; font-size: .82rem !important; }
html body .mid-title-card-meta { color: var(--v4-muted) !important; font-size: .68rem !important; padding-top: 7px !important; }
html body .mid-platform-tab {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--v4-line) !important;
  background: var(--v4-surface) !important;
  color: var(--v4-muted) !important;
}
html body .mid-platform-tab[aria-selected="true"] {
  border-color: var(--v4-text) !important;
  background: var(--v4-text) !important;
  color: var(--v4-bg) !important;
}

/* Did You Know en el mismo sistema visual y con altura contenida. */
html body #did-you-know.didyouknow {
  width: min(100%,1180px) !important;
  max-width: 1180px !important;
  margin: 22px auto !important;
  padding: clamp(25px,3vw,38px) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb,var(--v4-accent) 14%,transparent), transparent 34%),
    var(--v4-surface) !important;
  color: var(--v4-text) !important;
  box-shadow: var(--v4-shadow) !important;
}
html body #did-you-know .didyouknow-kicker { color: var(--v4-accent) !important; }
html body #did-you-know h2 { color: var(--v4-text) !important; font-size: clamp(2rem,4vw,3.4rem) !important; }
html body #did-you-know .didyouknow-text { color: var(--v4-muted) !important; }

/* Ficha completa: se mantiene la arquitectura real y solo se calibra a V4. */
html body .midfv-overlay { background: #0f1115 !important; }
html body .midfv-dossier { background: #0f1115 !important; }
html body .midfv-hero { min-height: 410px !important; }
html body .midfv-hero-inner {
  width: min(calc(100% - 48px),1010px) !important;
  grid-template-columns: 165px minmax(0,1fr) !important;
  gap: 30px !important;
  padding: max(76px,calc(env(safe-area-inset-top) + 64px)) 0 40px !important;
}
html body .midfv-poster { border-radius: 18px !important; }
html body .midfv-hero-copy h1 {
  font-size: clamp(2.6rem,5.2vw,4.15rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}
html body .midfv-meta { margin-top: 12px !important; font-size: .88rem !important; }
html body .midfv-genres { margin-top: 5px !important; font-size: .82rem !important; }
html body .midfv-hero-actions { margin-top: 18px !important; gap: 7px !important; }
html body .midfv-action { min-height: 40px !important; padding: 9px 12px !important; border-radius: 12px !important; }
html body .midfv-nav {
  gap: 4px !important;
  padding: 8px max(18px,calc((100vw - 1020px)/2)) !important;
  background: rgba(15,17,21,.9) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html body .midfv-nav a { padding: 8px 10px !important; border-radius: 11px !important; font-size: .75rem !important; }
html body .midfv-main {
  width: min(calc(100% - 48px),1010px) !important;
  padding-top: 6px !important;
}
html body .midfv-section { padding: clamp(30px,4.2vw,48px) 0 !important; }
html body .midfv-section-head { margin-bottom: 18px !important; }
html body .midfv-section-head h2 { font-size: clamp(1.5rem,3vw,2.25rem) !important; }
html body .midfv-overview { font-size: clamp(.96rem,1.6vw,1.08rem) !important; line-height: 1.65 !important; }
html body .midfv-cast-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 9px !important; }
html body .midfv-provider-grid,
html body .midfv-rating-grid,
html body .midfv-action-grid { gap: 8px !important; }
html body .midfv-gallery { gap: 8px !important; }

/* Accesibilidad e interacción: compacto visualmente, 44 px en táctil. */
html body :where(button,a,input,select):focus-visible {
  outline: 3px solid color-mix(in srgb,var(--v4-accent) 74%,#fff 26%) !important;
  outline-offset: 3px !important;
}
html body button,
html body a,
html body input,
html body select { touch-action: manipulation; }

@media (hover:hover) {
  html body .mid-title-card:hover {
    transform: translateY(-3px) scale(1.01) !important;
    border-color: color-mix(in srgb,var(--v4-accent) 42%,var(--v4-line)) !important;
    box-shadow: 0 12px 26px color-mix(in srgb,var(--v4-text) 11%,transparent) !important;
  }
}

@media (max-width: 900px) {
  html body .p2-page { padding-top: 84px !important; }
  html body .p2-hero-stage > .topbar {
    width: calc(100% - 18px) !important;
    padding-right: 232px !important;
    grid-template-columns: auto minmax(220px,1fr) !important;
  }
  html body .p2-hero-stage > .topbar .brand-link img { width: 154px !important; max-width: 154px !important; }
  html body .language-switcher { width: 100px !important; min-width: 100px !important; right: 90px !important; }
  html body .info-toggle { right: 196px !important; }
  html body .theme-toggle { right: 14px !important; }
  html body main.p2-page #description.p2-hero-card {
    grid-template-columns: minmax(0,.88fr) minmax(300px,1.12fr) !important;
    gap: 12px 24px !important;
  }
  html body .mid-card-rail { grid-auto-columns: 138px !important; }
  html body .midfv-hero-inner { grid-template-columns: 140px minmax(0,1fr) !important; gap: 23px !important; }
  html body .midfv-cast-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}

@media (max-width: 680px) {
  html body { padding-left: 10px !important; padding-right: 10px !important; }
  html body .p2-page { padding-top: 126px !important; }
  html body .p2-hero-stage > .topbar {
    min-height: 104px !important;
    padding: 7px 158px 7px 11px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 39px 44px !important;
    gap: 5px !important;
  }
  html body .p2-hero-stage > .topbar .brand-link img { width: 134px !important; max-width: 134px !important; }
  html body .p2-hero-stage > .topbar .entrada-con-borrar {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }
  html body .theme-toggle { top: max(17px,calc(env(safe-area-inset-top) + 7px)) !important; right: 13px !important; }
  html body .language-switcher {
    top: max(17px,calc(env(safe-area-inset-top) + 7px)) !important;
    right: 89px !important;
    width: 62px !important;
    min-width: 62px !important;
    padding: 0 5px !important;
  }
  html body .language-switcher-icon { display: none !important; }
  html body .language-select { max-width: 52px !important; font-size: .72rem !important; }
  html body .info-toggle { top: max(17px,calc(env(safe-area-inset-top) + 7px)) !important; right: 157px !important; }
  html body main.p2-page #description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "headline"
      "lead"
      "gamehead"
      "gameform" !important;
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 20px !important;
  }
  html body main.p2-page #description.p2-hero-card::before { left: 18px !important; top: 18px !important; }
  html body main.p2-page #description.p2-hero-card .guess-image {
    height: 230px !important;
    max-height: 230px !important;
    border-radius: 16px !important;
  }
  html body main.p2-page #description.p2-hero-card h1 {
    margin-top: 12px !important;
    font-size: clamp(2.15rem,10.5vw,3.35rem) !important;
  }
  html body main.p2-page #description.p2-hero-card p { font-size: .94rem !important; line-height: 1.5 !important; }
  html body main.p2-page #description .guess-form { grid-template-columns: 1fr auto !important; }
  html body .mid-discovery { padding: 0 !important; }
  html body .mid-shelf { padding: 12px 11px 10px !important; border-radius: 16px !important; }
  html body .mid-card-rail {
    grid-auto-columns: 118px !important;
    gap: 9px !important;
    margin-right: -11px !important;
    padding-right: 11px !important;
    scrollbar-width: none !important;
  }
  html body .mid-card-rail::-webkit-scrollbar { display: none !important; }
  html body .mid-title-card-copy { min-height: 72px !important; padding: 8px !important; }
  html body #did-you-know.didyouknow { padding: 24px !important; border-radius: 18px !important; }
  html body .midfv-hero { min-height: auto !important; }
  html body .midfv-hero-inner {
    width: calc(100% - 30px) !important;
    grid-template-columns: 92px minmax(0,1fr) !important;
    gap: 15px !important;
    padding-bottom: 26px !important;
  }
  html body .midfv-hero-copy h1 { font-size: clamp(2rem,10vw,2.8rem) !important; }
  html body .midfv-main { width: calc(100% - 28px) !important; }
  html body .midfv-section { padding: 28px 0 !important; }
  html body .midfv-cast-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (pointer: coarse) {
  html body .theme-toggle,
  html body .language-switcher,
  html body .info-toggle,
  html body .mid-platform-tab,
  html body .midfv-action,
  html body .midfv-nav a { min-height: 44px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html body .mid-title-card,
  html body main.p2-page #description .guess-title { animation: none !important; transition: none !important; }
}

/* V4.1 · feedback visual: selector siempre visible y pista inequívoca del juego. */
html body #themeToggle.theme-toggle {
  position: fixed !important;
  z-index: 2000500 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}
html.midfv-open body #themeToggle.theme-toggle { display: none !important; }

html body main.p2-page #description .guess-buttons {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
}
html body main.p2-page #description .guess-buttons::after {
  content: "◉  The image is your clue";
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb,var(--v4-accent) 34%,var(--v4-line));
  border-radius: 999px;
  background: color-mix(in srgb,var(--v4-accent) 10%,var(--v4-surface));
  color: var(--v4-text);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: -.01em;
}
html[lang^="es"] body main.p2-page #description .guess-buttons::after { content: "◉  La imagen es la pista"; }
html[lang^="de"] body main.p2-page #description .guess-buttons::after { content: "◉  Das Bild ist dein Hinweis"; }
html[lang^="fr"] body main.p2-page #description .guess-buttons::after { content: "◉  L’image est votre indice"; }
html[lang^="ja"] body main.p2-page #description .guess-buttons::after { content: "◉  画像がヒントです"; }
html[lang^="sk"] body main.p2-page #description .guess-buttons::after { content: "◉  Obrázok je tvoja nápoveda"; }
html[lang^="zh"] body main.p2-page #description .guess-buttons::after { content: "◉  图片就是线索"; }

@media (max-width: 680px) {
  html body #themeToggle.theme-toggle {
    top: max(17px,calc(env(safe-area-inset-top) + 7px)) !important;
    right: 13px !important;
  }
  html body main.p2-page #description .guess-buttons::after {
    min-height: 34px;
    font-size: .74rem;
  }
}

/* =========================================================
   V4.2 · HERO + INTERACCIÓN FICHA (feedback iPad)
   Solo presentación. No cambia eventos, datos ni APIs.
   ========================================================= */

/* Fila 1: fotograma y juego. Filas inferiores: explicación a ancho completo. */
html body main.p2-page section#description.p2-hero-card {
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr) !important;
  grid-template-areas:
    "image gamehead"
    "image gameform"
    "headline headline"
    "lead lead" !important;
  column-gap: clamp(22px, 2.8vw, 38px) !important;
  row-gap: 12px !important;
  align-items: start !important;
}

html body main.p2-page section#description.p2-hero-card .guess-image {
  grid-area: image !important;
  align-self: stretch !important;
  height: clamp(300px, 28vw, 390px) !important;
  max-height: 390px !important;
  object-fit: cover !important;
}

html body main.p2-page section#description.p2-hero-card .guess-buttons {
  grid-area: gamehead !important;
  align-self: end !important;
  margin: 0 !important;
  padding-top: clamp(34px, 4vw, 58px) !important;
}

html body main.p2-page section#description.p2-hero-card .guess-form {
  grid-area: gameform !important;
  align-self: start !important;
  width: 100% !important;
  margin: 0 !important;
}

html body main.p2-page section#description.p2-hero-card h1 {
  grid-area: headline !important;
  max-width: none !important;
  width: 100% !important;
  margin: clamp(14px, 2vw, 24px) 0 0 !important;
  font-size: clamp(2.55rem, 4.8vw, 4.65rem) !important;
}

html body main.p2-page section#description.p2-hero-card > p[data-i18n="intro_paragraph"] {
  grid-area: lead !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 !important;
  font-size: clamp(.96rem, 1.25vw, 1.08rem) !important;
}

/* La columna de juego se lee como un único bloque, sin añadir una tarjeta gigante. */
html body main.p2-page section#description.p2-hero-card .guess-title {
  flex: 0 0 auto !important;
}
html body main.p2-page section#description.p2-hero-card .guess-buttons::after {
  flex: 0 1 auto !important;
}
html body main.p2-page section#description.p2-hero-card .guess-form #result {
  grid-column: 1 / -1 !important;
}

/*
  Los handlers de full-view sí están enlazados. El problema observado es de
  apilado: la ficha está en 2.000.000 y los modales heredados en 350.000.
  Cuando una acción abre uno de esos modales, se mostraba detrás de la ficha.
*/
html.midfv-open body > .wm-overlay,
html.midfv-open body > .wtw-overlay,
html.midfv-open body > #modalFicha,
html.midfv-open body > #modalImagen,
html.midfv-open body > #modalYoutube,
html.midfv-open body > #modalPeople,
html.midfv-open body > #modalTrailer,
html.midfv-open body > #modalLocalizaciones,
html.midfv-open body > .modal:not(#midFullView) {
  z-index: 2001000 !important;
  pointer-events: auto !important;
}

html.midfv-open body > #modalFicha button.close-ficha,
html.midfv-open body > .wm-overlay :is(button,a,input,select,textarea),
html.midfv-open body > .wtw-overlay :is(button,a,input,select,textarea),
html.midfv-open body > #modalImagen :is(button,a,img),
html.midfv-open body > #modalYoutube :is(button,a,iframe),
html.midfv-open body > #modalPeople :is(button,a,span,input,select,textarea),
html.midfv-open body > #modalTrailer :is(button,a,iframe),
html.midfv-open body > #modalLocalizaciones :is(button,a,input,select,textarea) {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Las capas estrictamente decorativas nunca interceptan el toque. */
html.midfv-open body #midFullView .midfv-hero::after,
html.midfv-open body #midFullView .midfv-hero-shade {
  pointer-events: none !important;
}

/* Controles reales de la ficha siempre por encima de sus fondos decorativos. */
html.midfv-open body #midFullView .midfv-close,
html.midfv-open body #midFullView .midfv-action,
html.midfv-open body #midFullView .midfv-nav a,
html.midfv-open body #midFullView .midfv-provider,
html.midfv-open body #midFullView .midfv-gallery-item,
html.midfv-open body #midFullView .midfv-recommend,
html.midfv-open body #midFullView .midfv-choice,
html.midfv-open body #midFullView .midfv-retry {
  position: relative !important;
  z-index: 7 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 900px) {
  html body main.p2-page section#description.p2-hero-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr) !important;
    column-gap: 22px !important;
  }
  html body main.p2-page section#description.p2-hero-card .guess-image {
    height: clamp(275px, 35vw, 350px) !important;
  }
}

@media (max-width: 680px) {
  html body main.p2-page section#description.p2-hero-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "gamehead"
      "gameform"
      "headline"
      "lead" !important;
    gap: 10px !important;
  }
  html body main.p2-page section#description.p2-hero-card .guess-image {
    height: 230px !important;
    max-height: 230px !important;
  }
  html body main.p2-page section#description.p2-hero-card .guess-buttons {
    padding-top: 4px !important;
  }
  html body main.p2-page section#description.p2-hero-card h1 {
    margin-top: 16px !important;
  }
}

@media (max-width: 430px) {
  html body main.p2-page section#description.p2-hero-card .guess-form {
    grid-template-columns: 1fr !important;
  }
  html body main.p2-page section#description.p2-hero-card .guess-form button {
    width: 100% !important;
  }
}

/* =========================================================
   V4.3 · CABECERA + ACCESO A FICHA COMPACTOS EN MÓVIL
   Corrige el panel flotante desproporcionado visto en iPhone.
   Solo layout; conserva DOM, IDs, eventos y lógica.
   ========================================================= */
@media (max-width: 520px) {
  html body .p2-page {
    padding-top: 112px !important;
  }

  html body .p2-hero-stage > .topbar {
    width: calc(100% - 16px) !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 6px 9px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 34px 42px !important;
    gap: 5px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html body .p2-hero-stage > .topbar .brand-link {
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
    max-width: 128px !important;
  }

  html body .p2-hero-stage > .topbar .brand-link img {
    width: 128px !important;
    max-width: 128px !important;
  }

  html body .p2-hero-stage > .topbar .entrada-con-borrar {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .p2-hero-stage > .topbar .entrada-con-borrar input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 42px 0 12px !important;
    font-size: .84rem !important;
  }

  html body .p2-hero-stage > .topbar .borrar-x {
    top: 21px !important;
    right: 5px !important;
    width: 30px !important;
    height: 30px !important;
  }

  html body #themeToggle.theme-toggle {
    top: max(15px, calc(env(safe-area-inset-top) + 5px)) !important;
    right: 12px !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body .language-switcher {
    top: max(15px, calc(env(safe-area-inset-top) + 5px)) !important;
    right: 84px !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
  }

  html body .language-select {
    max-width: 50px !important;
    font-size: .68rem !important;
  }

  html body .info-toggle {
    top: max(15px, calc(env(safe-area-inset-top) + 5px)) !important;
    right: 148px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body .p2-command-center {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 10px 0 16px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .p2-command-center .midfv-launch-wrap {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .p2-command-center .midfv-launch {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    gap: 9px !important;
    align-items: center !important;
    border-radius: 14px !important;
  }

  html body .p2-command-center .midfv-new-badge {
    width: auto !important;
    max-width: none !important;
    padding: 4px 6px !important;
    font-size: .54rem !important;
    white-space: nowrap !important;
  }

  html body .p2-command-center .midfv-launch-copy {
    min-width: 0 !important;
    width: auto !important;
  }

  html body .p2-command-center .midfv-launch-title,
  html body .p2-command-center .midfv-launch-sub {
    width: auto !important;
    max-width: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  html body .p2-command-center .midfv-launch-title {
    font-size: .9rem !important;
    line-height: 1.15 !important;
  }

  html body .p2-command-center .midfv-launch-sub {
    margin-top: 2px !important;
    font-size: .68rem !important;
    line-height: 1.24 !important;
  }

  html body .p2-command-center .midfv-launch-arrow {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 390px) {
  html body .p2-hero-stage > .topbar .brand-link,
  html body .p2-hero-stage > .topbar .brand-link img {
    width: 116px !important;
    max-width: 116px !important;
  }

  html body .info-toggle {
    right: 144px !important;
    width: 34px !important;
    min-width: 34px !important;
  }

  html body .language-switcher {
    right: 80px !important;
    width: 58px !important;
    min-width: 58px !important;
  }

  html body #themeToggle.theme-toggle {
    right: 9px !important;
    width: 64px !important;
    min-width: 64px !important;
  }
}