/* ================================================================
   BOMBARERA SKINS V94 — COMPACT HERO SHOWCASE
   Replaces the oversized three-panel skin preview with a focused,
   rarity-aware two-column hero dossier. No carousel/navigation.
   ================================================================ */

body[data-ui-context="skins"] .skins-v94__detail-layer{
  padding:clamp(16px,2.2vw,34px)!important;
  background:
    radial-gradient(circle at 22% 42%,color-mix(in srgb,var(--skin-accent) 13%,transparent),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(142,84,255,.11),transparent 26%),
    linear-gradient(135deg,rgba(2,10,25,.91),rgba(5,18,42,.94) 52%,rgba(17,10,43,.94))!important;
  backdrop-filter:blur(18px) saturate(132%)!important;
}

body[data-ui-context="skins"] .skins-v94__detail{
  --v94-rarity:#65dcff;
  position:relative!important;
  width:min(1180px,calc(100vw - 64px))!important;
  height:min(650px,calc(100dvh - 76px))!important;
  min-height:540px!important;
  display:grid!important;
  grid-template-columns:minmax(390px,.86fr) minmax(500px,1.14fr)!important;
  grid-template-rows:1fr!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--v94-rarity) 46%,rgba(255,255,255,.10))!important;
  border-radius:28px!important;
  background:linear-gradient(145deg,rgba(8,25,52,.98),rgba(4,13,31,.99))!important;
  box-shadow:0 34px 90px rgba(0,0,0,.58),0 0 52px color-mix(in srgb,var(--v94-rarity) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body[data-ui-context="skins"] .skins-v94__detail--common{--v94-rarity:#65dcff}
body[data-ui-context="skins"] .skins-v94__detail--rare{--v94-rarity:#46a7ff}
body[data-ui-context="skins"] .skins-v94__detail--epic{--v94-rarity:#bd62ff}
body[data-ui-context="skins"] .skins-v94__detail--legendary{--v94-rarity:#ffc84a}

body[data-ui-context="skins"] .skins-v94__detail::before{
  content:"";position:absolute;z-index:12;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--v94-rarity),var(--skin-accent-2),transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--v94-rarity) 45%,transparent)
}
body[data-ui-context="skins"] .skins-v94__close{
  top:14px!important;right:14px!important;width:40px!important;height:40px!important;border-radius:12px!important;
  background:rgba(5,17,36,.72)!important;backdrop-filter:blur(10px);font-size:27px!important
}

/* Character is the visual anchor, but the stage no longer wastes half the screen. */
body[data-ui-context="skins"] .skins-v94__stage{
  grid-column:1!important;grid-row:1!important;position:relative!important;min-width:0!important;min-height:0!important;
  border:0!important;border-right:1px solid color-mix(in srgb,var(--v94-rarity) 22%,rgba(255,255,255,.05))!important;
  border-radius:0!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--v94-rarity) 24%,transparent),transparent 31%),
    radial-gradient(circle at 50% 82%,color-mix(in srgb,var(--skin-accent-2) 12%,transparent),transparent 38%),
    linear-gradient(180deg,color-mix(in srgb,var(--v94-rarity) 7%,#0a1d3a),#061226 72%,#040d1d)!important;
  box-shadow:none!important
}
body[data-ui-context="skins"] .skins-v94__detail--epic .skins-v94__stage{background:radial-gradient(circle at 50% 42%,rgba(189,98,255,.25),transparent 31%),radial-gradient(circle at 30% 78%,rgba(255,67,194,.10),transparent 35%),linear-gradient(180deg,#17123d,#090f29 72%,#060b1d)!important}
body[data-ui-context="skins"] .skins-v94__detail--legendary .skins-v94__stage{background:radial-gradient(circle at 50% 42%,rgba(255,200,74,.27),transparent 31%),radial-gradient(circle at 50% 76%,rgba(255,120,35,.10),transparent 36%),linear-gradient(180deg,#28200f,#0d1725 70%,#070d17)!important}
body[data-ui-context="skins"] .skins-v94__stage::before{
  content:attr(data-hero-name)!important;z-index:1!important;top:15%!important;left:50%!important;width:94%!important;
  font-size:clamp(52px,5vw,78px)!important;color:color-mix(in srgb,var(--v94-rarity) 9%,transparent)!important;opacity:1!important
}
body[data-ui-context="skins"] .skins-v94__stage::after{left:10%!important;right:10%!important;bottom:12%!important;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v94-rarity) 58%,transparent),transparent)!important}
body[data-ui-context="skins"] .skins-v94__stage .skins-v77__stage-grid{inset:50% 0 0!important;opacity:.13!important;background-size:38px 38px!important}
body[data-ui-context="skins"] .skins-v94__stage .skins-v77__stage-glow{left:13%!important;right:13%!important;top:20%!important;bottom:15%!important;opacity:.82}
body[data-ui-context="skins"] .skins-v94__stage canvas{position:absolute!important;z-index:4!important;inset:7% 4% 10%!important;width:92%!important;height:83%!important;display:block!important}
body[data-ui-context="skins"] .skins-v94__stage .skins-v77__pedestal{left:19%!important;right:19%!important;bottom:8.5%!important;height:11%!important}
body[data-ui-context="skins"] .skins-v94__stage-orbit{position:absolute;z-index:2;left:50%;top:46%;width:min(66%,310px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--v94-rarity) 18%,transparent);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 28px color-mix(in srgb,var(--v94-rarity) 4%,transparent),0 0 0 58px color-mix(in srgb,var(--v94-rarity) 2%,transparent);pointer-events:none}
body[data-ui-context="skins"] .skins-v94__stage-topline{position:absolute;z-index:8;top:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
body[data-ui-context="skins"] .skins-v94__stage-topline>span:last-child{color:#9cb0c7;font:900 9px/1 'Exo 2',sans-serif;letter-spacing:.09em;text-transform:uppercase}
body[data-ui-context="skins"] .skins-v94__stage .skins-v77__detail-rarity{min-height:25px!important;font-size:9px!important;background:color-mix(in srgb,var(--v94-rarity) 12%,rgba(4,13,28,.80))!important;color:var(--v94-rarity)!important;border-color:color-mix(in srgb,var(--v94-rarity) 38%,transparent)!important}
body[data-ui-context="skins"] .skins-v94__stage-caption{position:absolute;z-index:7;left:22px;right:22px;bottom:18px;display:flex;align-items:end;justify-content:space-between;gap:12px;pointer-events:none}
body[data-ui-context="skins"] .skins-v94__stage-caption small{color:#6f879f;font:900 8px/1 'Exo 2',sans-serif;letter-spacing:.12em}
body[data-ui-context="skins"] .skins-v94__stage-caption strong{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--v94-rarity) 78%,white);font:1000 13px/1 'Exo 2',sans-serif;text-transform:uppercase;letter-spacing:.03em}

/* Information is one coherent dossier instead of two empty side panels. */
body[data-ui-context="skins"] .skins-v94__profile{
  grid-column:2!important;grid-row:1!important;min-width:0;min-height:0;display:flex;flex-direction:column;
  padding:clamp(26px,2.4vw,36px);padding-right:clamp(28px,3vw,48px);
  background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--v94-rarity) 8%,transparent),transparent 34%),linear-gradient(180deg,rgba(9,25,51,.97),rgba(5,15,33,.98))
}
body[data-ui-context="skins"] .skins-v94__profile-head{padding-right:34px}
body[data-ui-context="skins"] .skins-v94__kicker{display:flex;align-items:center;gap:8px;color:var(--v94-rarity);font:1000 9px/1 'Exo 2',sans-serif;letter-spacing:.11em;text-transform:uppercase}
body[data-ui-context="skins"] .skins-v94__kicker i{width:4px;height:4px;border-radius:50%;background:var(--v94-rarity);box-shadow:0 0 9px var(--v94-rarity)}
body[data-ui-context="skins"] .skins-v94__profile-head h2{margin:10px 0 7px!important;color:#fff;font:1000 clamp(34px,3.1vw,48px)/.96 'Exo 2',sans-serif!important;letter-spacing:-.045em!important}
body[data-ui-context="skins"] .skins-v94__profile-head>p{max-width:640px;margin:0;color:#aebfd2;font:700 13px/1.48 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v94__feature-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(150px,.55fr);gap:10px;margin-top:18px}
body[data-ui-context="skins"] .skins-v94__skill-card{margin:0!important;min-height:88px!important;padding:12px!important;border-radius:15px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--v94-rarity) 9%,rgba(8,22,45,.86)),rgba(8,22,45,.76))!important}
body[data-ui-context="skins"] .skins-v94__skill-card span{font-size:8px!important}
body[data-ui-context="skins"] .skins-v94__skill-card strong{font-size:12.5px!important}
body[data-ui-context="skins"] .skins-v94__skill-card p{font-size:10px!important;line-height:1.3!important}
body[data-ui-context="skins"] .skins-v94__rank-card{margin:0!important;min-height:88px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;padding:12px 14px!important;border-color:color-mix(in srgb,var(--v94-rarity) 22%,transparent)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--v94-rarity) 8%,rgba(10,24,45,.82)),rgba(6,17,35,.78))!important}
body[data-ui-context="skins"] .skins-v94__rank-card span{font-size:8px!important;color:#8fa3b9!important}
body[data-ui-context="skins"] .skins-v94__rank-card strong{grid-column:auto!important;grid-row:auto!important;align-self:auto!important;color:var(--v94-rarity)!important;font-size:15px!important}
body[data-ui-context="skins"] .skins-v94__rank-card small{font-size:9px!important;color:#9fb1c5!important}

body[data-ui-context="skins"] .skins-v94__combat{margin-top:12px;padding:13px 14px 14px;border:1px solid rgba(111,193,239,.13);border-radius:17px;background:rgba(4,15,33,.46)}
body[data-ui-context="skins"] .skins-v94__power-head{padding:0 0 9px!important;border-bottom:1px solid rgba(122,200,245,.11)!important}
body[data-ui-context="skins"] .skins-v94__power-head>div{display:grid;gap:4px}
body[data-ui-context="skins"] .skins-v94__power-head small{color:#7189a2;font:900 7px/1 'Exo 2',sans-serif;letter-spacing:.13em}
body[data-ui-context="skins"] .skins-v94__power-head span{font-size:11px!important;letter-spacing:.08em!important}
body[data-ui-context="skins"] .skins-v94__power-head strong{width:38px!important;height:38px!important;border-radius:11px!important;font-size:18px!important;background:linear-gradient(145deg,var(--v94-rarity),var(--skin-accent-2))!important}
body[data-ui-context="skins"] .skins-v94__metrics{grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important}
body[data-ui-context="skins"] .skins-v94__metrics .skins-locker-v7__metric{grid-template-columns:72px minmax(0,1fr) 16px!important;min-height:34px!important;padding:6px 7px!important;border-radius:10px!important}
body[data-ui-context="skins"] .skins-v94__metrics .skins-locker-v7__metric>span{font-size:9px!important}
body[data-ui-context="skins"] .skins-v94__metrics .skins-ref-v12__metric-track{height:9px!important}
body[data-ui-context="skins"] .skins-v94__metrics .skins-ref-v12__metric-value{font-size:10px!important}

body[data-ui-context="skins"] .skins-v94__footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,.72fr);gap:10px;align-items:end;margin-top:auto;padding-top:12px}
body[data-ui-context="skins"] .skins-v94__tip{margin:0!important;min-height:58px!important;align-items:center!important;padding:9px 10px!important}
body[data-ui-context="skins"] .skins-v94__tip p{font-size:9.5px!important;line-height:1.35!important}
body[data-ui-context="skins"] .skins-v94__purchase{margin:0!important;padding:0!important;gap:6px!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__price{min-height:34px!important;border-radius:10px!important;padding:0 10px!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__price span{font-size:7.5px!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__price strong{font-size:13px!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__cta{min-height:44px!important;border-radius:12px!important;font-size:12px!important;box-shadow:0 4px 0 #b87717,0 10px 22px rgba(255,188,52,.13)!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__cta.is-equip{box-shadow:0 4px 0 #21865f,0 10px 22px rgba(69,217,155,.13)!important}
body[data-ui-context="skins"] .skins-v94__purchase .skins-locker-v7__cta.is-active{box-shadow:none!important}

/* Laptop / shorter desktop: preserve readable text; compress space, not typography. */
@media (max-width:1180px), (max-height:760px){
  body[data-ui-context="skins"] .skins-v94__detail{width:min(1080px,calc(100vw - 34px))!important;height:min(590px,calc(100dvh - 34px))!important;min-height:500px!important;grid-template-columns:minmax(350px,.82fr) minmax(480px,1.18fr)!important}
  body[data-ui-context="skins"] .skins-v94__profile{padding:22px 28px 20px 24px}
  body[data-ui-context="skins"] .skins-v94__profile-head h2{font-size:34px!important;margin-top:8px!important}
  body[data-ui-context="skins"] .skins-v94__profile-head>p{font-size:12px;line-height:1.4}
  body[data-ui-context="skins"] .skins-v94__feature-row{margin-top:12px}
  body[data-ui-context="skins"] .skins-v94__skill-card,body[data-ui-context="skins"] .skins-v94__rank-card{min-height:78px!important}
  body[data-ui-context="skins"] .skins-v94__combat{margin-top:9px;padding:10px 12px}
  body[data-ui-context="skins"] .skins-v94__footer{padding-top:9px}
}

@media (max-width:900px){
  body[data-ui-context="skins"] .skins-v94__detail-layer{position:fixed!important;inset:0!important;overflow:auto!important;place-items:start center!important;padding:12px!important}
  body[data-ui-context="skins"] .skins-v94__detail{width:min(720px,100%)!important;height:auto!important;min-height:0!important;grid-template-columns:1fr!important;grid-template-rows:380px auto!important;border-radius:22px!important}
  body[data-ui-context="skins"] .skins-v94__stage{grid-column:1!important;grid-row:1!important;border-right:0!important;border-bottom:1px solid color-mix(in srgb,var(--v94-rarity) 22%,rgba(255,255,255,.05))!important}
  body[data-ui-context="skins"] .skins-v94__stage canvas{inset:5% 16% 8%!important;width:68%!important;height:87%!important}
  body[data-ui-context="skins"] .skins-v94__stage::before{font-size:64px!important;top:13%!important}
  body[data-ui-context="skins"] .skins-v94__profile{grid-column:1!important;grid-row:2!important;padding:24px!important}
  body[data-ui-context="skins"] .skins-v94__profile-head h2{font-size:36px!important}
}

@media (max-width:620px){
  body[data-ui-context="skins"] .skins-v94__detail-layer{padding:7px!important}
  body[data-ui-context="skins"] .skins-v94__detail{grid-template-rows:330px auto!important;border-radius:18px!important}
  body[data-ui-context="skins"] .skins-v94__profile{padding:18px 14px 16px!important}
  body[data-ui-context="skins"] .skins-v94__profile-head{padding-right:38px}
  body[data-ui-context="skins"] .skins-v94__profile-head h2{font-size:31px!important}
  body[data-ui-context="skins"] .skins-v94__profile-head>p{font-size:12px}
  body[data-ui-context="skins"] .skins-v94__feature-row{grid-template-columns:1fr!important}
  body[data-ui-context="skins"] .skins-v94__rank-card{min-height:70px!important}
  body[data-ui-context="skins"] .skins-v94__metrics{grid-template-columns:1fr!important}
  body[data-ui-context="skins"] .skins-v94__footer{grid-template-columns:1fr!important}
  body[data-ui-context="skins"] .skins-v94__tip{display:none!important}
  body[data-ui-context="skins"] .skins-v94__stage-caption small{display:none}
  body[data-ui-context="skins"] .skins-v94__stage-caption strong{max-width:100%}
}

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