/* 15.1.42.20 — autoridad responsive única de la selección de modos.
   Tres tarjetas centradas sin carrusel; columna vertical sólo cuando el ancho
   real ya no permite tres previews legibles. */

#screenSelect .modeFamilyScreen15117 {
  width: 100%;
  max-width: 1460px;
  min-width: 0;
  margin: 0 auto;
  gap: clamp(8px, 1.2vw, 18px);
}

#screenSelect .modeSelectMasthead15119 {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(36px, 1fr) minmax(0, auto) minmax(36px, 1fr);
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  padding-inline: clamp(0px, 1vw, 10px);
  text-align: center;
}

#screenSelect .modeSelectMasthead15119 > div { min-width: 0; }
#screenSelect .modeMastLine15119 { height: 5px; }

#screenSelect .modeFamilyCards15117,
#screenSelect .modeFamilyCards15117.threeModes {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.15vw, 18px);
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
  touch-action: pan-y;
}

#screenSelect .modeFamilyCards15117.twoModes15117 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#screenSelect .modeFamilyCard15117 {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-self: stretch;
  overflow: hidden;
  border-radius: 9px;
  clip-path: none;
  scroll-snap-align: none;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

#screenSelect .modeFamilyCard15117::before {
  width: 3px;
  opacity: .9;
}

#screenSelect .modeFamilyCard15117:not(:disabled) { cursor: pointer; }

#screenSelect .modeFamilyCard15117:not(:disabled):hover,
#screenSelect .modeFamilyCard15117:not(:disabled):focus-visible {
  transform: translateY(-4px);
}

#screenSelect .modeFamilyArt15117 {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#screenSelect .modePreviewSceneCanvas15115 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: #080d13;
}

#screenSelect .modeFamilyCopy15117 {
  position: relative;
  min-width: 0;
  min-height: 128px;
  height: 100%;
  padding: 16px 20px 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  overflow: hidden;
}

#screenSelect .modeFamilyCopy15117 small,
#screenSelect .modeFamilyCopy15117 strong,
#screenSelect .modeFamilyCopy15117 p { grid-column: 1 / -1; }

#screenSelect .modeFamilyCopy15117 p {
  min-width: 0;
  min-height: 2.45em;
  margin-bottom: 0;
}

#screenSelect .modeLockedHint15117 {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .16);
  color: #e2e8f0;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-align: right;
}

#screenSelect .modeUnavailable15117 {
  cursor: default;
  opacity: .82;
  filter: saturate(.78);
}

#screenSelect .modeUnavailable15117::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0 68%, rgba(2, 6, 12, .35) 68% 100%);
}

@media (min-width: 720px) and (max-width: 980px) {
  #screenSelect .modeFamilyScreen15117 { gap: 7px; }
  #screenSelect .modeFamilyCards15117,
  #screenSelect .modeFamilyCards15117.threeModes { gap: clamp(6px, .9vw, 9px); }
  #screenSelect .modeFamilyCopy15117 {
    min-height: 82px;
    padding: 8px 9px 9px 10px;
  }
  #screenSelect .modeFamilyCopy15117 small { font-size: clamp(7px, 1.7dvh, 9px); letter-spacing: .11em; }
  #screenSelect .modeFamilyCopy15117 strong { font-size: clamp(16px, 4.4dvh, 23px); line-height: 1; }
  #screenSelect .modeFamilyCopy15117 p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    margin-top: 3px;
    font-size: clamp(8px, 1.8dvh, 11px);
    line-height: 1.15;
  }
  #screenSelect .modeLockedHint15117 {
    margin-top: 3px;
    padding-top: 3px;
    font-size: 7px;
    line-height: 1;
  }
  #screenSelect .modeCardSlash15119 { display: none; }
}

@media (max-height: 480px) and (min-width: 720px) {
  #screenSelect .modeSelectMasthead15119 { display: none; }
}

@media (max-width: 719px) {
  #screenSelect .modeSelectMasthead15119 {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 7px;
  }
  #screenSelect .modeMastLine15119 { display: none; }
  #screenSelect .modeFamilyCards15117,
  #screenSelect .modeFamilyCards15117.threeModes,
  #screenSelect .modeFamilyCards15117.twoModes15117 {
    width: min(100%, 640px);
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 12px;
    margin-inline: auto;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
  }
  #screenSelect .modeFamilyCopy15117 { min-height: 0; }
}