/* ========================================================================
   Ambientación de pantallas — placas ImageGen + UI RTX
   Las placas son estáticas y se cargan como una sola capa por pantalla. Los
   únicos movimientos de este acabado son pequeños barridos en transform y
   opacity; no hay blur animado ni filtros grandes para el WebView.
   ======================================================================== */

.screen[data-screen="army"],
.screen[data-screen="campaign"],
.screen[data-screen="play"],
.screen[data-screen="pvp_raid"]{
  --screen-rgb: 43, 185, 255;
  --screen-plate: url("../media/ui/screen-arsenal-bg.webp");
}

.screen[data-screen="shop"],
.screen[data-screen="battlepass"]{
  --screen-rgb: 255, 190, 62;
  --screen-plate: url("../media/ui/screen-vault-bg.webp");
}

.screen[data-screen="world"],
.screen[data-screen="ranking"],
.screen[data-screen="research"],
.screen[data-screen="modos"],
.screen[data-screen="rampas"]{
  --screen-rgb: 83, 185, 255;
  --screen-plate: url("../media/ui/screen-deck-bg.webp");
}

.screen[data-screen="dna_lab"],
.screen[data-screen="dnalab"],
.screen[data-screen="dna_merge"]{
  --screen-rgb: 42, 239, 217;
  --screen-plate: url("../media/ui/screen-deck-bg.webp");
}

.screen[data-screen="beasts"],
.screen[data-screen="quests"]{
  --screen-rgb: 205, 102, 255;
  --screen-plate: url("../media/ui/screen-deck-bg.webp");
}

.screen[data-screen="army"],
.screen[data-screen="campaign"],
.screen[data-screen="play"],
.screen[data-screen="pvp_raid"],
.screen[data-screen="shop"],
.screen[data-screen="battlepass"],
.screen[data-screen="world"],
.screen[data-screen="ranking"],
.screen[data-screen="research"],
.screen[data-screen="modos"],
.screen[data-screen="rampas"],
.screen[data-screen="dna_lab"],
.screen[data-screen="dnalab"],
.screen[data-screen="dna_merge"],
.screen[data-screen="beasts"],
.screen[data-screen="quests"]{
  position: absolute;
  isolation: isolate;
  overflow: hidden;
  background-color: #020711;
  background-image:
    linear-gradient(180deg, rgba(2, 7, 17, .30) 0%, rgba(2, 7, 17, .62) 56%, rgba(2, 7, 17, .96) 100%),
    linear-gradient(90deg, rgba(var(--screen-rgb), .15), transparent 30%, transparent 70%, rgba(var(--screen-rgb), .11)),
    var(--screen-plate);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* PVP construye su escena con un background inline; la placa sigue siendo la
   misma capa de ambientación y debe ganar a ese color base. */
.screen[data-screen="pvp_raid"]{
  background-image:
    linear-gradient(180deg, rgba(22, 3, 22, .26) 0%, rgba(2, 7, 17, .70) 58%, rgba(2, 7, 17, .97) 100%),
    linear-gradient(90deg, rgba(255, 59, 92, .15), transparent 32%, transparent 68%, rgba(83, 185, 255, .10)),
    var(--screen-plate) !important;
}

/* Velo sobre el centro para separar el texto de la ilustración sin borrar la
   textura de los bordes. Es una transición estática, no un filtro de GPU. */
.screen[data-screen="army"]::before,
.screen[data-screen="campaign"]::before,
.screen[data-screen="play"]::before,
.screen[data-screen="pvp_raid"]::before,
.screen[data-screen="shop"]::before,
.screen[data-screen="battlepass"]::before,
.screen[data-screen="world"]::before,
.screen[data-screen="ranking"]::before,
.screen[data-screen="research"]::before,
.screen[data-screen="modos"]::before,
.screen[data-screen="rampas"]::before,
.screen[data-screen="dna_lab"]::before,
.screen[data-screen="dnalab"]::before,
.screen[data-screen="dna_merge"]::before,
.screen[data-screen="beasts"]::before,
.screen[data-screen="quests"]::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(var(--screen-rgb), .12), transparent 45%),
    linear-gradient(90deg, transparent 0 7%, rgba(var(--screen-rgb), .045) 7.1%, transparent 7.3% 92.7%, rgba(var(--screen-rgb), .045) 92.9%, transparent 93%);
}

.screen[data-screen="army"] > *,
.screen[data-screen="campaign"] > *,
.screen[data-screen="play"] > *,
.screen[data-screen="pvp_raid"] > *,
.screen[data-screen="shop"] > *,
.screen[data-screen="battlepass"] > *,
.screen[data-screen="world"] > *,
.screen[data-screen="ranking"] > *,
.screen[data-screen="research"] > *,
.screen[data-screen="modos"] > *,
.screen[data-screen="rampas"] > *,
.screen[data-screen="dna_lab"] > *,
.screen[data-screen="dnalab"] > *,
.screen[data-screen="dna_merge"] > *,
.screen[data-screen="beasts"] > *,
.screen[data-screen="quests"] > *{
  position: relative;
  z-index: 1;
}

/* Cabecera tipo placa: conserva el HTML y le da una jerarquía visual clara. */
.screen[data-screen] .screen-header{
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  margin: 8px 10px 0 !important;
  padding: 11px 14px 9px !important;
  min-height: 49px;
  overflow: hidden;
  border: 1px solid rgba(var(--screen-rgb), .52);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(var(--screen-rgb), .12), transparent 28%, transparent 72%, rgba(var(--screen-rgb), .12)),
    linear-gradient(180deg, rgba(11, 29, 55, .93), rgba(4, 11, 27, .92));
  box-shadow: 0 0 18px rgba(var(--screen-rgb), .18), inset 0 1px rgba(235, 255, 255, .24), inset 0 -3px rgba(0, 0, 0, .34);
}
.screen[data-screen] .screen-header::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(var(--screen-rgb), .22);
  border-radius: 10px;
  pointer-events: none;
}
.screen[data-screen] .screen-header::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 20%;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translate3d(-150%, 0, 0) skewX(-18deg);
  animation: screenHeaderSweep 6.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.screen[data-screen] .screen-header > *{ position: relative; z-index: 2; }
.screen[data-screen] .screen-header [style*="font-size:18px"]{
  color: #f1fbff;
  text-shadow: 0 0 10px rgba(var(--screen-rgb), .58), 0 2px 2px #000;
}
.screen[data-screen] .screen-header [style*="font-size:11.5px"]{
  color: rgba(211, 233, 255, .72) !important;
  letter-spacing: .65px;
}
@keyframes screenHeaderSweep{
  0%, 70%{ opacity: 0; transform: translate3d(-150%, 0, 0) skewX(-18deg); }
  77%{ opacity: .52; }
  92%{ opacity: .06; }
  96%, 100%{ opacity: 0; transform: translate3d(620%, 0, 0) skewX(-18deg); }
}

.screen[data-screen] .screen-body{
  position: relative;
  z-index: 1;
  padding: 10px 10px 22px;
  background: linear-gradient(180deg, rgba(1, 6, 17, .10), rgba(1, 5, 14, .28));
}

/* Superficie común de tarjetas y listas. El contraste viene del marco y de la
   placa de fondo, sin animar sombras ni filtros grandes. */
.screen[data-screen] .panel,
.screen[data-screen] .card,
.screen[data-screen] .list-row,
.screen[data-screen] .offer,
.screen[data-screen] .event-card,
.screen[data-screen] .quest-row,
.screen[data-screen] .rank-row,
.screen[data-screen] .stage-row,
.screen[data-screen] .tech-node,
.screen[data-screen] .beast-card,
.screen[data-screen] .incubator-card,
.screen[data-screen] .dna-lab-card{
  border-color: rgba(var(--screen-rgb), .30);
  background:
    linear-gradient(90deg, rgba(var(--screen-rgb), .055) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, rgba(14, 28, 54, .86), rgba(4, 11, 26, .90));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .36), 0 0 12px rgba(var(--screen-rgb), .08), inset 0 1px rgba(215, 249, 255, .10);
}
.screen[data-screen] .panel-title{
  color: #d8edff;
  text-shadow: 0 0 8px rgba(var(--screen-rgb), .42);
}
.screen[data-screen] .panel-title::before{
  background: linear-gradient(180deg, #efffff, rgba(var(--screen-rgb), 1));
  box-shadow: 0 0 9px rgba(var(--screen-rgb), .82);
}

/* Pestañas de navegación con el mismo chaflán que los CTA RTX. */
.screen[data-screen] .tab{
  position: relative;
  border-radius: 0 !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  background: rgba(3, 12, 29, .70) !important;
  border-color: rgba(var(--screen-rgb), .34) !important;
  text-shadow: 0 0 7px rgba(var(--screen-rgb), .4);
}
.screen[data-screen] .tab.active{
  color: #f2ffff !important;
  background: linear-gradient(180deg, rgba(var(--screen-rgb), .52), rgba(5, 51, 78, .82)) !important;
  border-color: rgba(var(--screen-rgb), .82) !important;
  box-shadow: 0 0 12px rgba(var(--screen-rgb), .27), inset 0 1px rgba(255, 255, 255, .30);
}

/* Los CTA de cada sección heredan el chaflán de las islas y la ruleta. El
   barrido que ya aporta holo.css queda dentro de este recorte. */
.screen[data-screen] .btn:not(.btn-asalto){
  border-radius: 0 !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: 0 0 10px rgba(var(--screen-rgb), .22), inset 0 1px rgba(255,255,255,.34), inset 0 -3px rgba(0,0,0,.34) !important;
}

@media (prefers-reduced-motion: reduce){
  .screen[data-screen] .screen-header::after{ animation: none !important; opacity: 0 !important; }
}

@media (max-width: 380px){
  .screen[data-screen] .screen-header{ margin-left: 7px !important; margin-right: 7px !important; }
}