/* ========================================================================
   BOMBARERA SKINS V81 — EQUIPPED HERO SPOTLIGHT
   A dedicated top block makes the currently equipped skin immediately clear
   without changing the catalog-first flow introduced in V77–V80.
   ======================================================================== */

body[data-ui-context="skins"] .skins-v77__collection{
  grid-template-rows:auto auto auto minmax(0,1fr)!important;
}

/* Compact utility at the far right of the local skins header. */
body[data-ui-context="skins"] .skins-v81__top-collection{
  flex:0 0 auto;min-width:154px;height:46px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;
  padding:5px 12px 5px 7px;border:1px solid rgba(106,217,255,.23);border-radius:14px;
  background:linear-gradient(135deg,rgba(29,116,158,.16),rgba(8,23,44,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-ui-context="skins"] .skins-v81__top-collection-icon{
  width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,rgba(74,210,255,.16),rgba(160,95,255,.16));color:#76e5ff;
}
body[data-ui-context="skins"] .skins-v81__top-collection-svg{width:17px;height:17px}
body[data-ui-context="skins"] .skins-v81__top-collection>span:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}
body[data-ui-context="skins"] .skins-v81__top-collection small{font:1000 7px/1 'Exo 2',sans-serif;letter-spacing:.13em;color:#79afc3}
body[data-ui-context="skins"] .skins-v81__top-collection strong{font:1000 14px/1 'Exo 2',sans-serif;color:#f4fbff}
body[data-ui-context="skins"] .skins-v81__top-collection strong em{font:900 9px/1 'Exo 2',sans-serif;font-style:normal;color:#7890a9}

/* Selected skin spotlight. */
body[data-ui-context="skins"] .skins-v81__equipped{
  --equipped-accent:#65dcff;--equipped-accent-2:#8f69ff;
  position:relative;isolation:isolate;min-width:0;min-height:142px;overflow:hidden;
  display:grid;grid-template-columns:176px minmax(250px,1fr) minmax(220px,290px) 126px;align-items:stretch;gap:14px;
  padding:10px 12px;border:1px solid color-mix(in srgb,var(--equipped-accent) 32%,rgba(117,200,244,.18));border-radius:22px;
  background:
    radial-gradient(circle at 9% 50%,color-mix(in srgb,var(--equipped-accent) 22%,transparent),transparent 28%),
    radial-gradient(circle at 78% 0%,color-mix(in srgb,var(--equipped-accent-2) 15%,transparent),transparent 32%),
    linear-gradient(110deg,rgba(12,34,63,.98),rgba(7,22,45,.97) 55%,rgba(10,19,42,.98));
  box-shadow:0 18px 38px rgba(0,5,18,.28),inset 0 1px 0 rgba(255,255,255,.075);
}
body[data-ui-context="skins"] .skins-v81__equipped::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--equipped-accent) 7%,transparent),transparent 31%,transparent 70%,color-mix(in srgb,var(--equipped-accent-2) 5%,transparent));
}
body[data-ui-context="skins"] .skins-v81__equipped::after{
  content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--equipped-accent),color-mix(in srgb,var(--equipped-accent-2) 75%,white 5%),transparent);opacity:.8;
  box-shadow:0 0 18px color-mix(in srgb,var(--equipped-accent) 38%,transparent);
}

body[data-ui-context="skins"] .skins-v81__equipped-stage{
  position:relative;min-width:0;overflow:hidden;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--equipped-accent) 24%,rgba(255,255,255,.05));
  background:linear-gradient(180deg,rgba(18,51,88,.60),rgba(4,15,32,.72));
}
body[data-ui-context="skins"] .skins-v81__equipped-halo{
  position:absolute;z-index:0;inset:5% 5% 2%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--equipped-accent) 28%,transparent),transparent 66%);filter:blur(4px);
}
body[data-ui-context="skins"] .skins-v81__equipped-stage canvas{
  position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;pointer-events:none;
}
body[data-ui-context="skins"] .skins-v81__equipped-pedestal{
  position:absolute;z-index:1;left:21%;right:21%;bottom:9px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--equipped-accent) 44%,rgba(0,0,0,.58)),rgba(0,0,0,0) 72%);
}

body[data-ui-context="skins"] .skins-v81__equipped-copy{
  min-width:0;display:flex;flex-direction:column;justify-content:center;padding:3px 2px;
}
body[data-ui-context="skins"] .skins-v81__equipped-label{
  display:flex;align-items:center;gap:7px;margin-bottom:5px;color:#7af0b6;font:1000 8px/1 'Exo 2',sans-serif;letter-spacing:.14em;
}
body[data-ui-context="skins"] .skins-v81__equipped-label>span{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:rgba(104,239,177,.10);border:1px solid rgba(104,239,177,.16)}
body[data-ui-context="skins"] .skins-v81__equipped-check{width:12px;height:12px}
body[data-ui-context="skins"] .skins-v81__equipped-name-row{display:flex;align-items:center;gap:10px;min-width:0}
body[data-ui-context="skins"] .skins-v81__equipped-name-row h2{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;color:#fff;
  font:1000 clamp(23px,1.75vw,32px)/1 'Exo 2',sans-serif;letter-spacing:-.035em;text-shadow:0 8px 22px rgba(0,0,0,.26);
}
body[data-ui-context="skins"] .skins-v81__equipped-rarity{
  flex:0 0 auto;min-height:23px;display:inline-flex;align-items:center;padding:0 8px;border-radius:8px;
  border:1px solid rgba(120,220,255,.22);background:rgba(8,25,47,.74);color:#8fe8ff;font:1000 7px/1 'Exo 2',sans-serif;letter-spacing:.08em;
}
body[data-ui-context="skins"] .skins-v81__equipped-rarity--rare{color:#65e7ff;border-color:rgba(101,231,255,.30)}
body[data-ui-context="skins"] .skins-v81__equipped-rarity--epic{color:#d79aff;border-color:rgba(215,154,255,.30)}
body[data-ui-context="skins"] .skins-v81__equipped-rarity--legendary{color:#ffd46a;border-color:rgba(255,212,106,.34);background:rgba(64,45,16,.42)}
body[data-ui-context="skins"] .skins-v81__equipped-role{margin:4px 0 8px;color:#9fb5cb;font:900 9px/1.2 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v81__equipped-skill{
  min-width:0;max-width:510px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center;
  padding:7px 10px;border:1px solid color-mix(in srgb,var(--equipped-accent) 20%,rgba(255,255,255,.05));border-radius:12px;background:rgba(3,13,29,.46);
}
body[data-ui-context="skins"] .skins-v81__equipped-skill>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--equipped-accent) 12%,rgba(8,20,39,.8));color:var(--equipped-accent)}
body[data-ui-context="skins"] .skins-v81__equipped-skill-icon{width:17px;height:17px}
body[data-ui-context="skins"] .skins-v81__equipped-skill>div{min-width:0;display:flex;flex-direction:column;gap:3px}
body[data-ui-context="skins"] .skins-v81__equipped-skill small{font:1000 7px/1 'Exo 2',sans-serif;letter-spacing:.11em;color:#7790a8}
body[data-ui-context="skins"] .skins-v81__equipped-skill strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8f4ff;font:1000 11px/1.1 'Exo 2',sans-serif}

body[data-ui-context="skins"] .skins-v81__equipped-profile{
  min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 12px;border-radius:15px;
  border:1px solid rgba(115,203,246,.13);background:rgba(3,13,29,.38);
}
body[data-ui-context="skins"] .skins-v81__equipped-profile-title{font:1000 7px/1 'Exo 2',sans-serif;letter-spacing:.14em;color:#7f98b2}
body[data-ui-context="skins"] .skins-v81__mini-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
body[data-ui-context="skins"] .skins-v81__mini-metric{min-width:0;display:flex;flex-direction:column;gap:5px}
body[data-ui-context="skins"] .skins-v81__mini-metric>span{font:900 8px/1 'Exo 2',sans-serif;color:#b7c8d8}
body[data-ui-context="skins"] .skins-v81__mini-metric>i{height:5px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
body[data-ui-context="skins"] .skins-v81__mini-metric>i b{display:block;border-radius:999px;background:#18304d}
body[data-ui-context="skins"] .skins-v81__mini-metric>i b.is-on{background:linear-gradient(90deg,var(--equipped-accent),color-mix(in srgb,var(--equipped-accent-2) 75%,white 5%));box-shadow:0 0 8px color-mix(in srgb,var(--equipped-accent) 28%,transparent)}

body[data-ui-context="skins"] .skins-v81__equipped-open{
  align-self:center;width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 13px;
  border:1px solid color-mix(in srgb,var(--equipped-accent) 52%,rgba(255,255,255,.08));border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--equipped-accent) 28%,#0a2842),color-mix(in srgb,var(--equipped-accent-2) 24%,#10203a));
  color:#fff;font:1000 9px/1 'Exo 2',sans-serif;letter-spacing:.07em;
  box-shadow:0 12px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
body[data-ui-context="skins"] .skins-v81__equipped-open:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 16px 30px rgba(0,0,0,.24),0 0 22px color-mix(in srgb,var(--equipped-accent) 13%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
body[data-ui-context="skins"] .skins-v81__equipped-open-icon{font:1000 24px/1 'Exo 2',sans-serif;font-style:normal;color:var(--equipped-accent)}

/* With the equipped hero already visible, the collection heading can be tighter. */
body[data-ui-context="skins"] .skins-v77__intro{min-height:68px!important}
body[data-ui-context="skins"] .skins-v77__intro h1{font-size:clamp(27px,2vw,38px)!important}
body[data-ui-context="skins"] .skins-v77__intro p{margin-top:5px!important}

@media (max-width:1250px){
  body[data-ui-context="skins"] .skins-v81__equipped{grid-template-columns:150px minmax(240px,1fr) minmax(200px,250px) 112px;gap:10px;min-height:132px}
  body[data-ui-context="skins"] .skins-v81__equipped-profile{padding-inline:9px}
  body[data-ui-context="skins"] .skins-v81__mini-metrics{gap:7px 8px}
}
@media (max-width:980px){
  body[data-ui-context="skins"] .skins-v81__equipped{grid-template-columns:138px minmax(0,1fr) 112px;min-height:128px}
  body[data-ui-context="skins"] .skins-v81__equipped-profile{display:none}
  body[data-ui-context="skins"] .skins-v81__equipped-skill{max-width:none}
}
@media (max-width:760px){
  body[data-ui-context="skins"] .skins-v81__top-collection{display:none}
  body[data-ui-context="skins"] .skins-v81__equipped{grid-template-columns:112px minmax(0,1fr);grid-template-rows:minmax(112px,auto) 42px;min-height:164px;padding:8px;gap:8px}
  body[data-ui-context="skins"] .skins-v81__equipped-stage{grid-row:1}
  body[data-ui-context="skins"] .skins-v81__equipped-copy{grid-row:1;padding-right:2px}
  body[data-ui-context="skins"] .skins-v81__equipped-open{grid-column:1/-1;grid-row:2;height:42px}
  body[data-ui-context="skins"] .skins-v81__equipped-name-row{align-items:flex-start;flex-direction:column;gap:5px}
  body[data-ui-context="skins"] .skins-v81__equipped-name-row h2{font-size:22px}
  body[data-ui-context="skins"] .skins-v81__equipped-role{margin-bottom:6px}
  body[data-ui-context="skins"] .skins-v81__equipped-skill{grid-template-columns:27px minmax(0,1fr);gap:7px;padding:6px 8px}
  body[data-ui-context="skins"] .skins-v81__equipped-skill>span{width:27px;height:27px}
  body[data-ui-context="skins"] .skins-v77__intro{min-height:62px!important}
  body[data-ui-context="skins"] .skins-v77__intro p{display:none}
}
@media (max-width:440px){
  body[data-ui-context="skins"] .skins-v81__equipped{grid-template-columns:94px minmax(0,1fr);min-height:154px;border-radius:18px}
  body[data-ui-context="skins"] .skins-v81__equipped-label{font-size:7px}
  body[data-ui-context="skins"] .skins-v81__equipped-name-row h2{font-size:19px}
  body[data-ui-context="skins"] .skins-v81__equipped-skill small{display:none}
  body[data-ui-context="skins"] .skins-v81__equipped-skill strong{font-size:9px}
}