/* ================================================================
   BOMBARERA SKINS V107 — MODAL FOCUS / ENERGY FRAME
   The V106 clean dossier remains the only modal surface. This layer
   adds contrast, depth and Bombarera cyan/violet/magenta atmosphere
   so the dossier reads clearly above the skins catalogue.
   ================================================================ */

/* Full-screen layer is atmosphere only — never a second panel. */
body[data-ui-context="skins"] .skins-v94__detail-layer{
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 28%,rgba(42,213,255,.12),transparent 27%),
    radial-gradient(circle at 84% 72%,rgba(201,70,255,.13),transparent 30%),
    linear-gradient(135deg,rgba(1,6,18,.58),rgba(3,10,27,.70) 48%,rgba(12,5,31,.64))!important;
  -webkit-backdrop-filter:blur(7px) brightness(.50) saturate(.72)!important;
  backdrop-filter:blur(7px) brightness(.50) saturate(.72)!important;
}

/* Soft Bombarera aura behind the dossier — glow only, no rectangle. */
body[data-ui-context="skins"] .skins-v94__detail-layer::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:min(1260px,86vw);
  height:min(720px,82dvh);
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:34px;
  background:
    radial-gradient(ellipse at 18% 50%,rgba(48,215,255,.24),transparent 45%),
    radial-gradient(ellipse at 82% 42%,rgba(137,84,255,.22),transparent 45%),
    radial-gradient(ellipse at 66% 92%,rgba(255,68,181,.16),transparent 42%);
  filter:blur(42px);
  opacity:.82;
  animation:skinsV107Aura 4.8s ease-in-out infinite;
}

body[data-ui-context="skins"] .skins-v94__detail{
  z-index:1!important;
  border:1px solid color-mix(in srgb,var(--v94-rarity) 72%,rgba(138,101,255,.42))!important;
  outline:1px solid rgba(97,220,255,.13)!important;
  outline-offset:5px!important;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--v94-rarity) 10%,transparent),transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(153,72,255,.08),transparent 34%),
    linear-gradient(145deg,#071a35 0%,#041126 54%,#071126 100%)!important;
  box-shadow:
    0 38px 110px rgba(0,0,0,.88),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 30px color-mix(in srgb,var(--v94-rarity) 24%,transparent),
    0 0 76px rgba(101,94,255,.17),
    0 0 118px rgba(229,64,196,.08),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 38px rgba(35,173,255,.035)!important;
}

/* Fine luminous inner frame gives the dossier a deliberate game-UI edge. */
body[data-ui-context="skins"] .skins-v94__detail::after{
  content:"";
  position:absolute;
  z-index:13;
  inset:6px;
  border:1px solid rgba(116,218,255,.07);
  border-radius:22px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(164,91,255,.025),
    inset 0 0 28px rgba(64,195,255,.025);
}

/* Keep the two halves darker than the page so content reads immediately. */
body[data-ui-context="skins"] .skins-v94__stage{
  background:
    radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--v94-rarity) 29%,transparent),transparent 31%),
    radial-gradient(circle at 50% 82%,rgba(94,74,255,.13),transparent 39%),
    linear-gradient(180deg,#0a2345 0%,#06152d 68%,#030b19 100%)!important;
  border-right-color:color-mix(in srgb,var(--v94-rarity) 32%,rgba(255,255,255,.06))!important;
}
body[data-ui-context="skins"] .skins-v94__detail--epic .skins-v94__stage{
  background:radial-gradient(circle at 50% 42%,rgba(189,98,255,.30),transparent 31%),radial-gradient(circle at 30% 78%,rgba(255,67,194,.13),transparent 35%),linear-gradient(180deg,#17123d,#080d24 72%,#030817)!important;
}
body[data-ui-context="skins"] .skins-v94__detail--legendary .skins-v94__stage{
  background:radial-gradient(circle at 50% 42%,rgba(255,200,74,.31),transparent 31%),radial-gradient(circle at 50% 76%,rgba(255,120,35,.13),transparent 36%),linear-gradient(180deg,#2a210d,#0b1524 70%,#040a13)!important;
}
body[data-ui-context="skins"] .skins-v94__profile{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--v94-rarity) 11%,transparent),transparent 34%),
    radial-gradient(circle at 72% 100%,rgba(144,75,255,.07),transparent 34%),
    linear-gradient(180deg,#071b38 0%,#041126 58%,#030c1c 100%)!important;
}

/* Brighter close control so it belongs to the raised surface. */
body[data-ui-context="skins"] .skins-v94__close{
  border-color:color-mix(in srgb,var(--v94-rarity) 52%,rgba(255,255,255,.16))!important;
  background:linear-gradient(145deg,rgba(13,39,69,.96),rgba(5,16,36,.96))!important;
  color:#eaf8ff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.36),0 0 18px color-mix(in srgb,var(--v94-rarity) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body[data-ui-context="skins"] .skins-v94__close:hover{
  border-color:#78e7ff!important;
  background:linear-gradient(145deg,rgba(30,88,122,.98),rgba(15,35,69,.98))!important;
  box-shadow:0 8px 26px rgba(0,0,0,.38),0 0 22px rgba(84,221,255,.22)!important;
}

@keyframes skinsV107Aura{
  0%,100%{opacity:.70;transform:translate(-50%,-50%) scale(.985)}
  50%{opacity:.92;transform:translate(-50%,-50%) scale(1.015)}
}

@media (max-width:900px){
  body[data-ui-context="skins"] .skins-v94__detail-layer{
    -webkit-backdrop-filter:blur(5px) brightness(.48) saturate(.70)!important;
    backdrop-filter:blur(5px) brightness(.48) saturate(.70)!important;
  }
  body[data-ui-context="skins"] .skins-v94__detail-layer::before{
    width:94vw;height:88dvh;filter:blur(30px);
  }
  body[data-ui-context="skins"] .skins-v94__detail::after{border-radius:17px}
}

@media (max-width:620px){
  body[data-ui-context="skins"] .skins-v94__detail-layer::before{width:98vw;height:94dvh;filter:blur(24px)}
  body[data-ui-context="skins"] .skins-v94__detail{outline-offset:3px!important}
}

@media (prefers-reduced-motion:reduce){
  body[data-ui-context="skins"] .skins-v94__detail-layer::before{animation:none!important}
}