/*
 * Superficies premium compartidas.
 *
 * Todas las pantallas se montan dentro de `.screen[data-screen]`, pero varios
 * componentes especiales (tienda, ranking, ADN, Bestias y modos) tienen sus
 * propias clases. Esta capa les da el mismo lenguaje de chapa técnica sin
 * añadir filtros ni animaciones de repintado: es segura para el WebView de
 * Capacitor y conserva las animaciones de contenido que ya existen.
 */

:root{
  --rtx-panel-line: rgba(125, 220, 255, .24);
  --rtx-panel-hi: rgba(220, 251, 255, .14);
  --rtx-panel-shadow: 0 12px 26px rgba(0,0,0,.42), 0 0 18px rgba(0,184,255,.10), inset 0 1px 0 var(--rtx-panel-hi);
}

/* Placa común: textura de rejilla fina, profundidad y filo interior. */
.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] .modo-card,
.screen[data-screen] .bend-card,
.screen[data-screen] .skin-card,
.screen[data-screen] .dna-card,
.screen[data-screen] .dna-hero-panel,
.screen[data-screen] .beast-hero,
.screen[data-screen] .beast-card,
.screen[data-screen] .incubator-card,
.screen[data-screen] .beast-skills-panel,
.screen[data-screen] .rk-list-panel,
.screen[data-screen] .rk-row,
.screen[data-screen] .rk-prize-row,
.screen[data-screen] .roulette-promo-card,
.screen[data-screen] .bp-tier,
.screen[data-screen] .bp-cell{
  position:relative;
  isolation:isolate;
  border:1px solid var(--rtx-panel-line);
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(134,222,255,.055) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, rgba(18,39,73,.92), rgba(4,11,27,.96));
  box-shadow:var(--rtx-panel-shadow);
}

/* Un chaflán pequeño hace que tarjetas y cuadros se lean como piezas del HUD. */
.screen[data-screen] .panel,
.screen[data-screen] .offer,
.screen[data-screen] .event-card,
.screen[data-screen] .modo-card,
.screen[data-screen] .bend-card,
.screen[data-screen] .dna-hero-panel,
.screen[data-screen] .beast-hero,
.screen[data-screen] .beast-skills-panel,
.screen[data-screen] .rk-list-panel,
.screen[data-screen] .roulette-promo-card{
  border-radius:0;
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.screen[data-screen] .panel-title,
.screen[data-screen] .shop-hero h2,
.screen[data-screen] .beast-name,
.screen[data-screen] .dna-card-name,
.screen[data-screen] .rk-win-t{
  text-shadow:0 0 10px rgba(89,214,255,.42), 0 2px 0 rgba(0,0,0,.45);
}

/* TIENDA: la cabecera y cada oferta tienen lectura de escaparate premium. */
.screen[data-screen="shop"] .shop-hero{
  border-radius:0;
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background:
    linear-gradient(90deg, rgba(255,211,78,.10) 1px, transparent 1px) 0 0 / 20px 100%,
    linear-gradient(135deg, rgba(255,153,24,.34), rgba(87,23,80,.36) 52%, rgba(8,17,43,.96));
  border-color:rgba(255,211,78,.62);
  box-shadow:0 12px 30px rgba(0,0,0,.44), 0 0 24px rgba(255,154,35,.22), inset 0 1px rgba(255,244,185,.42);
}
.screen[data-screen="shop"] .offer{
  border-color:rgba(255,211,78,.28);
  background:
    linear-gradient(90deg, rgba(255,211,78,.045) 1px, transparent 1px) 0 0 / 16px 100%,
    linear-gradient(160deg, rgba(40,38,69,.96), rgba(10,14,31,.98));
}
.screen[data-screen="shop"] .offer .price,
.screen[data-screen="shop"] .vip-card .btn,
.screen[data-screen="shop"] .offer > .btn{
  border-radius:0;
  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);
}
.screen[data-screen="shop"] .vip-card{
  border-color:rgba(205,166,255,.58);
  background:
    linear-gradient(90deg, rgba(219,177,255,.055) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(135deg, rgba(67,37,119,.92), rgba(12,14,42,.98));
  box-shadow:0 12px 28px rgba(0,0,0,.45), 0 0 22px rgba(180,122,255,.20), inset 0 1px rgba(255,255,255,.18);
}

/* Placas pequeñas que no pasan por `.panel` pero aparecen en casi todas las
   pantallas. */
.screen[data-screen] .rk-cut,
.screen[data-screen] .rk-me,
.screen[data-screen] .rk-win-frame,
.screen[data-screen] .beast-actions-row,
.screen[data-screen] .incubator-slots-list,
.screen[data-screen] .mh-dna,
.screen[data-screen] .mh-dna-choice-box,
.screen[data-screen] .tabs{
  border-color:rgba(119,221,255,.24);
}
.screen[data-screen] .rk-cut,
.screen[data-screen] .rk-win-frame,
.screen[data-screen] .mh-dna-choice-box{
  background:
    linear-gradient(90deg, rgba(92,212,255,.05) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, rgba(13,34,63,.90), rgba(4,11,27,.96));
  box-shadow:0 8px 20px rgba(0,0,0,.34), inset 0 1px rgba(224,253,255,.12);
}

/* POPUPS Y CARTELES DE CONFIRMACIÓN */
.popup-bg{
  background:rgba(2,6,16,.86);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.popup{
  position:relative;
  isolation:isolate;
  border-radius:0;
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border:1px solid rgba(110,222,255,.56);
  background:
    linear-gradient(90deg, rgba(92,215,255,.055) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(165deg, rgba(21,40,76,.98), rgba(5,10,25,.99) 64%);
  box-shadow:0 20px 50px rgba(0,0,0,.64), 0 0 26px rgba(0,190,255,.18), inset 0 1px rgba(234,254,255,.28);
}
.popup::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(116,229,255,.16);
  clip-path:inherit;
  pointer-events:none;
  z-index:0;
}
.popup > *{ position:relative; z-index:1; }
.popup-head{
  min-height:52px;
  padding:13px 16px;
  border-bottom:1px solid rgba(116,229,255,.25);
  background:
    linear-gradient(90deg, rgba(114,225,255,.08) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, rgba(26,53,93,.92), rgba(10,21,47,.78));
}
.popup-head h3{ color:#eafaff; text-shadow:0 0 10px rgba(98,220,255,.48); }
.popup-body{ background:linear-gradient(180deg, rgba(3,10,25,.16), rgba(2,6,16,.30)); }
.popup-foot{
  padding:12px 16px 14px;
  border-top:1px solid rgba(116,229,255,.24);
  background:rgba(3,10,24,.48);
}
.popup-foot > .btn,
.popup-close{
  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);
}
.popup-foot > .btn{
  min-height:42px;
  border:1px solid rgba(124,223,255,.42) !important;
  box-shadow:0 0 14px rgba(0,184,255,.13), inset 0 1px rgba(255,255,255,.24), inset 0 -3px rgba(0,0,0,.28) !important;
}
.popup-foot > .btn.action,
.popup-foot > .btn.premium{
  border-color:rgba(57,255,136,.66) !important;
  background:linear-gradient(180deg, rgba(42,214,143,.95), rgba(6,104,75,.98)) !important;
  color:#effff7 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72), 0 0 8px rgba(120,255,204,.36);
  box-shadow:0 0 18px rgba(57,255,136,.22), inset 0 1px rgba(228,255,241,.52), inset 0 -3px rgba(0,38,29,.38) !important;
}
.popup-foot > .btn.ghost{
  background:linear-gradient(180deg, rgba(29,49,79,.96), rgba(9,17,34,.98)) !important;
  color:#c9d8eb !important;
}
.popup.result{
  border-color:rgba(255,211,78,.68);
  box-shadow:0 20px 54px rgba(0,0,0,.68), 0 0 30px rgba(255,172,31,.23), inset 0 1px rgba(255,244,191,.32);
}
.popup.result .popup-foot{ border-top-color:rgba(255,211,78,.34); }
.popup.roulette-reward-popup{
  /* La ruleta tiene su propia placa fotográfica; la capa común no debe
     convertirla en otro tipo de modal. */
  border-radius:var(--r-xl);
  clip-path:none;
}
.popup.roulette-reward-popup::before{ display:none; }
.popup-close{
  width:32px; height:32px;
  border-color:rgba(135,220,255,.38);
  background:rgba(8,20,42,.76);
  color:#cdefff;
}

/* El barrido de un cuadro se mueve en el compositor; sólo hay uno por popup. */
.popup:not(.roulette-reward-popup)::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-35%; width:18%;
  background:linear-gradient(100deg, transparent, rgba(198,248,255,.18), transparent);
  transform:skewX(-18deg) translate3d(0,0,0);
  animation:rtxPopupSweep 7s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes rtxPopupSweep{
  0%,72%{ opacity:0; transform:skewX(-18deg) translate3d(0,0,0); }
  78%{ opacity:.7; }
  92%,100%{ opacity:0; transform:skewX(-18deg) translate3d(760%,0,0); }
}

/* Modal de recompensa diaria (vive fuera de #popup-layer). */
.daily-reward-layer{
  background:rgba(2,6,16,.88) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.daily-reward-card{
  position:relative;
  isolation:isolate;
  border-radius:0 !important;
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background:
    linear-gradient(90deg, rgba(57,255,136,.055) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(165deg, rgba(13,55,65,.98), rgba(5,12,28,.99) 66%) !important;
  border:1px solid rgba(57,255,136,.68) !important;
  box-shadow:0 22px 56px rgba(0,0,0,.68), 0 0 28px rgba(57,255,136,.20), inset 0 1px rgba(222,255,235,.34) !important;
}
.daily-reward-card::before{
  content:""; position:absolute; inset:6px; pointer-events:none; z-index:0;
  border:1px solid rgba(74,238,177,.20);
  clip-path:inherit;
}
.daily-reward-card > *{ position:relative; z-index:1; }
.daily-reward-card .dm-cell{
  border-radius:0 !important;
  background:
    linear-gradient(90deg, rgba(120,220,255,.05) 1px, transparent 1px) 0 0 / 14px 100%,
    linear-gradient(180deg, rgba(24,39,70,.94), rgba(8,15,33,.98)) !important;
  border-color:rgba(132,199,235,.24) !important;
  box-shadow:inset 0 1px rgba(232,249,255,.10), 0 5px 12px rgba(0,0,0,.24);
}
.daily-reward-card .dm-cell.dm-today{
  background:
    linear-gradient(90deg, rgba(57,255,136,.07) 1px, transparent 1px) 0 0 / 14px 100%,
    linear-gradient(160deg, rgba(28,123,93,.86), rgba(7,45,45,.98)) !important;
  border-color:#39ff88 !important;
  box-shadow:0 0 18px rgba(57,255,136,.28), inset 0 1px rgba(235,255,244,.45) !important;
}
.daily-reward-card .dm-cell.dm-big{ border-color:rgba(255,211,78,.46) !important; }
.daily-reward-card .dm-header h2{ text-shadow:0 0 12px rgba(57,255,136,.42) !important; }

/* Arte promocional en ofertas y núcleos: la imagen da contexto sin robar
   legibilidad al precio. Sólo se anima con transform/opacity para WebView. */
.store-offer,.shop-hero{position:relative;isolation:isolate;overflow:hidden}
.store-offer > *:not(.store-offer-art),.shop-hero > *:not(.store-hero-art){position:relative;z-index:1}
.store-offer-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.2;mix-blend-mode:screen;pointer-events:none;user-select:none;-webkit-user-drag:none;transform:scale(1.04);animation:storeArtDrift 8s ease-in-out infinite alternate}
.store-offer-art::after{content:""}
.store-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:.22;mix-blend-mode:screen;pointer-events:none;user-select:none;-webkit-user-drag:none;transform:scale(1.03);animation:storeArtDrift 10s ease-in-out infinite alternate}
.store-offer .price{position:relative;z-index:2}
@keyframes storeArtDrift{from{transform:scale(1.04) translate3d(0,0,0);opacity:.16}to{transform:scale(1.08) translate3d(0,-2px,0);opacity:.24}}

@media (prefers-reduced-motion:reduce){
  .popup:not(.roulette-reward-popup)::after{ animation:none; opacity:0; }
  .store-offer-art,.store-hero-art{animation:none;transform:none}
}

/* Identidad visual del ejército: robots y bosses del propio universo del juego. */
.army-cast-panel{
  position:relative; isolation:isolate; overflow:hidden; min-height:148px; margin:0 0 12px;
  display:grid; grid-template-columns:112px minmax(0,1fr) 108px; align-items:end; gap:4px;
  padding:12px 10px 10px; border:1px solid rgba(76,210,255,.38); border-radius:16px;
  background:radial-gradient(circle at 50% 20%,rgba(42,167,255,.22),transparent 48%),linear-gradient(135deg,rgba(7,17,40,.98),rgba(5,8,22,.96));
  box-shadow:inset 0 1px rgba(228,250,255,.2),0 12px 28px rgba(0,0,0,.35),0 0 24px rgba(0,167,255,.12);
}
.army-cast-panel::before{content:"";position:absolute;inset:0;z-index:0;opacity:.25;background:linear-gradient(90deg,transparent 49%,rgba(97,218,255,.16) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(97,218,255,.12) 50%,transparent 51%);background-size:34px 34px;pointer-events:none}.army-cast-panel>*{position:relative;z-index:1}
.army-cast-art{position:relative;height:142px;align-self:end;pointer-events:none}
.army-cast-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 8px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(40,206,255,.38));animation:castFloat 4.2s ease-in-out infinite}
.army-cast-army img{animation-delay:-1.4s}
.army-cast-copy{position:relative;z-index:1;align-self:center;padding:4px 2px;text-align:center}
.army-cast-kicker{display:block;color:#5fe4ff;font-size:9px;letter-spacing:2px;font-weight:950}
.army-cast-copy h2{margin:3px 0 4px;font-size:20px;letter-spacing:1.5px;text-shadow:0 0 12px rgba(60,213,255,.4)}
.army-cast-copy p{margin:0 auto;color:var(--tx-mid);font-size:10px;line-height:1.35;max-width:230px}
.army-cast-tags{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:8px}.army-cast-tags span{padding:4px 6px;border:1px solid rgba(73,207,255,.32);border-radius:999px;color:#cceeff;background:rgba(6,28,54,.72);font-size:8px;font-weight:900}.army-cast-tags svg{width:11px;height:11px;vertical-align:-2px;color:#53e8ff}
.boss-cast-head{position:relative;min-height:64px;display:flex;align-items:flex-start;justify-content:space-between;overflow:hidden}.boss-cast-art{width:108px;height:78px;object-fit:contain;object-position:center bottom;margin:-10px 0 -4px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,81,42,.28));animation:castFloat 4.6s ease-in-out infinite;pointer-events:none}
@keyframes castFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}
@media (max-width:430px){.army-cast-panel{grid-template-columns:78px minmax(0,1fr) 76px;min-height:125px;padding:8px 5px}.army-cast-art{height:118px}.army-cast-copy h2{font-size:16px}.army-cast-copy p{font-size:9px}.army-cast-tags span{font-size:7px;padding:3px 5px}.boss-cast-art{width:86px;height:66px}}
@media (prefers-reduced-motion:reduce){.army-cast-art img,.boss-cast-art{animation:none}}