/* ========================================================================
   BOMBARERA SKINS — V33 SINGLE LIVE UI
   One runtime stylesheet for the full-character collection.
   Old skins-v7 / reference-v12 / reference-v122 remain historical only.
   ======================================================================== */

:root{
  --skins-font:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --skins-display:'Exo 2','Exo 2',system-ui,sans-serif;
  --skins-bg:#050b17;
  --skins-panel:rgba(7,18,38,.92);
  --skins-panel-soft:rgba(10,24,49,.78);
  --skins-line:rgba(112,199,255,.22);
  --skins-line-strong:rgba(114,218,255,.42);
  --skins-text:#f7fbff;
  --skins-muted:#aebfd4;
  --skins-cyan:#63ddff;
  --skins-gold:#ffc765;
  --skins-green:#75f3aa;
  --skins-pink:#ff71c8;
  --skins-radius:24px;
  --skins-shadow:0 22px 60px rgba(0,0,0,.38);
}

body[data-ui-context="skins"]{
  overflow:hidden!important;
  background:var(--skins-bg)!important;
}
body[data-ui-context="skins"] .header{display:none!important}
body[data-ui-context="skins"] .app{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
}
body[data-ui-context="skins"] .screen--skins:not(.hidden){
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  background:
    radial-gradient(circle at 18% 34%,rgba(42,200,255,.14),transparent 30%),
    radial-gradient(circle at 78% 20%,rgba(151,86,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(3,9,20,.36),rgba(3,9,20,.88)),
    url('/assets/menu/generated/skins-card-bg-v14.webp') center/cover no-repeat!important;
}
body[data-ui-context="skins"] .screen--skins > .campaign-header{display:none!important}
body[data-ui-context="skins"] .screen--skins .skins-content{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:16px!important;
  overflow:hidden!important;
}

body[data-ui-context="skins"] .skins-ref-v12,
body[data-ui-context="skins"] .skins-ref-v12 *{box-sizing:border-box}
body[data-ui-context="skins"] .skins-ref-v12{
  --skin-accent:#65dcff;
  --skin-accent-2:#7b7cff;
  position:relative;
  width:min(1600px,100%);
  height:100%;
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-rows:72px minmax(0,1fr);
  gap:14px;
  color:var(--skins-text);
  font-family:var(--skins-font);
}

/* -------------------- topbar -------------------- */
body[data-ui-context="skins"] .skins-ref-v12__topbar{
  min-width:0;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 12px;
  border:1px solid var(--skins-line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(8,20,43,.94),rgba(5,13,29,.92));
  box-shadow:0 14px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(125%);
}
body[data-ui-context="skins"] .skins-ref-v12__topbar-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
body[data-ui-context="skins"] .skins-ref-v12__back{
  width:auto;
  min-width:96px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(130,205,255,.24);
  border-radius:14px;
  background:rgba(6,17,37,.78);
  color:#eff8ff;
  text-decoration:none;
  font:900 13px/1 var(--skins-font);
}
body[data-ui-context="skins"] .skins-ref-v12__back-icon{width:18px;height:18px}
body[data-ui-context="skins"] .skins-ref-v12__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
body[data-ui-context="skins"] .brand-lockup--skins{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  border-radius:12px;
  border:1px solid rgba(99,213,255,.54);
  background:linear-gradient(180deg,rgba(15,61,104,.92),rgba(5,22,49,.98));
}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark img{width:30px;height:30px;display:block}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{
  display:flex;
  align-items:baseline;
  font:1000 26px/.9 var(--skins-font);
  letter-spacing:-.05em;
}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word b{color:#fff}
body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word em{font-style:normal;color:#67ddff}
body[data-ui-context="skins"] .skins-ref-v12__brand-divider{
  width:1px;
  height:34px;
  background:linear-gradient(180deg,transparent,rgba(126,205,255,.34),transparent);
}
body[data-ui-context="skins"] .skins-ref-v12__section-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(113,210,255,.34);
  background:linear-gradient(180deg,rgba(48,142,188,.25),rgba(6,25,52,.78));
  color:#74e6ff;
}
body[data-ui-context="skins"] .skins-ref-v12__section-svg{width:22px;height:22px}
body[data-ui-context="skins"] .skins-ref-v12__section-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-ui-context="skins"] .skins-ref-v12__section-copy strong{
  font:1000 20px/1 var(--skins-display);
  letter-spacing:.02em;
  color:#fff;
}
body[data-ui-context="skins"] .skins-ref-v12__section-copy small{
  font:900 9px/1 var(--skins-display);
  letter-spacing:.14em;
  color:#7edfff;
}
body[data-ui-context="skins"] .skins-ref-v12__top-stats{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
body[data-ui-context="skins"] .skins-ref-v12__top-stat{
  min-width:132px;
  height:46px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(116,196,255,.20);
  background:linear-gradient(180deg,rgba(8,23,49,.90),rgba(5,14,31,.96));
}
body[data-ui-context="skins"] .skins-ref-v12__top-stat--coins{border-color:rgba(255,207,94,.28)}
body[data-ui-context="skins"] .skins-ref-v12__top-stat--opened{border-color:rgba(108,232,164,.24)}
body[data-ui-context="skins"] .skins-ref-v12__top-icon{width:24px;height:24px}
body[data-ui-context="skins"] .skins-ref-v12__top-stat span{display:flex;flex-direction:column;gap:2px;min-width:0}
body[data-ui-context="skins"] .skins-ref-v12__top-stat small{
  font:900 8px/1 var(--skins-display);
  letter-spacing:.10em;
  color:#93a9c2;
}
body[data-ui-context="skins"] .skins-ref-v12__top-stat strong{
  font:1000 16px/1 var(--skins-font);
  color:#fff;
  white-space:nowrap;
}

/* -------------------- main layout -------------------- */
body[data-ui-context="skins"] .skins-ref-v12__layout{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(390px,.88fr) minmax(610px,1.32fr);
  gap:14px;
}
body[data-ui-context="skins"] .skins-ref-v12__hero-panel,
body[data-ui-context="skins"] .skins-ref-v12__catalog{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--skins-line);
  border-radius:var(--skins-radius);
  background:linear-gradient(180deg,rgba(8,21,45,.94),rgba(4,12,28,.96));
  box-shadow:var(--skins-shadow),inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-ui-context="skins"] .skins-ref-v12__hero-panel{
  display:grid;
  grid-template-rows:auto minmax(210px,1fr) auto auto auto;
  gap:9px;
  padding:14px;
}
body[data-ui-context="skins"] .skins-locker-v7__selected-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--skin-accent) 16%,transparent),transparent 40%),
    linear-gradient(160deg,color-mix(in srgb,var(--skin-accent-2) 7%,transparent),transparent 45%);
}
body[data-ui-context="skins"] .skins-ref-v12__hero-panel > *{position:relative;z-index:1}
body[data-ui-context="skins"] .skins-ref-v12__hero-head{
  min-height:64px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
body[data-ui-context="skins"] .skins-ref-v12__hero-title{min-width:0}
body[data-ui-context="skins"] .skins-ref-v12__hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
body[data-ui-context="skins"] .skins-locker-v7__rarity,
body[data-ui-context="skins"] .skins-ref-v12__style-chip,
body[data-ui-context="skins"] .skins-ref-v12__hero-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(3,11,26,.72);
  color:#d9e9fa;
  font:1000 8px/1 var(--skins-display);
  letter-spacing:.08em;
  white-space:nowrap;
}
body[data-ui-context="skins"] .skins-locker-v7__rarity{color:var(--skin-accent);border-color:color-mix(in srgb,var(--skin-accent) 36%,transparent)}
body[data-ui-context="skins"] .skins-ref-v12__hero-state{color:#80efb0;border-color:rgba(104,236,167,.26)}
body[data-ui-context="skins"] .skins-ref-v12__hero-title h1{
  margin:0;
  font:1000 clamp(28px,2.2vw,42px)/.95 var(--skins-font);
  letter-spacing:-.045em;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-ui-context="skins"] .skins-ref-v12__hero-title p{
  margin:7px 0 0;
  display:flex;
  align-items:center;
  gap:6px;
  font:800 12px/1.2 var(--skins-font);
  color:#b8cae0;
}
body[data-ui-context="skins"] .skins-ref-v12__role-icon{width:15px;height:15px;color:var(--skin-accent)}

/* -------------------- character stage -------------------- */
body[data-ui-context="skins"] .skins-ref-v12__stage{
  position:relative!important;
  min-height:210px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--skin-accent) 28%,rgba(118,195,255,.12));
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(7,18,39,.40),rgba(3,9,22,.86)),
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--skin-accent) 22%,transparent),transparent 48%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-ui-context="skins"] .skins-locker-v7__stage-light{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 26%,color-mix(in srgb,var(--skin-accent) 24%,transparent),transparent 42%);
}
body[data-ui-context="skins"] .skins-locker-v7__stage-rings,
body[data-ui-context="skins"] .skins-locker-v7__stage-atmosphere,
body[data-ui-context="skins"] .skins-ref-v12__stage-architecture{position:absolute;inset:0;pointer-events:none}
body[data-ui-context="skins"] .skins-locker-v7__stage-rings i{
  position:absolute;left:50%;top:50%;border:1px solid color-mix(in srgb,var(--skin-accent) 28%,transparent);border-radius:50%;transform:translate(-50%,-50%);
}
body[data-ui-context="skins"] .skins-locker-v7__stage-rings i:nth-child(1){width:46%;aspect-ratio:1}
body[data-ui-context="skins"] .skins-locker-v7__stage-rings i:nth-child(2){width:64%;aspect-ratio:1;opacity:.55}
body[data-ui-context="skins"] .skins-locker-v7__stage-rings i:nth-child(3){width:82%;aspect-ratio:1;opacity:.25}
body[data-ui-context="skins"] .skins-locker-v7__stage-rarity{
  position:absolute;right:12px;top:12px;z-index:4;
  font:1000 9px/1 var(--skins-display);letter-spacing:.12em;color:color-mix(in srgb,var(--skin-accent) 86%,white);
  opacity:.72;
}
body[data-ui-context="skins"] .skins-ref-v12__stage canvas#shopPreviewCanvas{
  position:absolute!important;
  left:50%!important;
  bottom:-2%!important;
  width:auto!important;
  height:94%!important;
  max-width:82%!important;
  transform:translateX(-50%)!important;
  z-index:3!important;
}
body[data-ui-context="skins"] .skins-locker-v7__hero-nav{
  position:absolute!important;
  top:50%!important;
  z-index:8!important;
  width:42px!important;
  height:54px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(128,205,255,.24)!important;
  border-radius:14px!important;
  background:rgba(5,16,35,.76)!important;
  color:#eaf7ff!important;
  font:900 26px/1 var(--skins-font)!important;
  cursor:var(--bm-cursor-action)!important;
  transform:translateY(-50%)!important;
}
body[data-ui-context="skins"] .skins-locker-v7__hero-nav.is-prev{left:10px!important}
body[data-ui-context="skins"] .skins-locker-v7__hero-nav.is-next{right:10px!important}
body[data-ui-context="skins"] .skins-locker-v7__pedestal{
  position:absolute!important;left:50%!important;bottom:3%!important;width:54%!important;height:28px!important;transform:translateX(-50%)!important;
  border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--skin-accent) 30%,rgba(60,140,255,.15)),transparent 70%);filter:blur(2px);
}
body[data-ui-context="skins"] .skins-locker-v7__preview-hint{
  position:absolute!important;left:50%!important;bottom:8px!important;z-index:7!important;transform:translateX(-50%)!important;
  color:#91a9c1!important;font:900 8px/1 var(--skins-display)!important;letter-spacing:.08em!important;white-space:nowrap;
}

/* -------------------- ability / metrics / purchase -------------------- */
body[data-ui-context="skins"] .skins-ref-v12__ability{
  min-height:64px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:9px 11px;
  border:1px solid rgba(120,196,255,.15);
  border-radius:16px;
  background:rgba(5,15,33,.64);
}
body[data-ui-context="skins"] .skins-locker-v7__ability-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  border:1px solid color-mix(in srgb,var(--skin-accent) 34%,transparent);background:color-mix(in srgb,var(--skin-accent) 9%,rgba(6,17,36,.90));color:var(--skin-accent);
}
body[data-ui-context="skins"] .skins-ref-v12__ability span{display:block;font:1000 8px/1 var(--skins-display);letter-spacing:.10em;color:#87a0ba}
body[data-ui-context="skins"] .skins-ref-v12__ability strong{display:block;margin-top:3px;font:1000 14px/1 var(--skins-font);color:#fff}
body[data-ui-context="skins"] .skins-ref-v12__ability p{margin:4px 0 0;font:800 10px/1.2 var(--skins-font);color:#b8c8d9}
body[data-ui-context="skins"] .skins-ref-v12__metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  min-height:60px;
}
body[data-ui-context="skins"] .skins-locker-v7__metric{
  display:grid;
  grid-template-columns:78px minmax(50px,1fr) 18px;
  align-items:center;
  gap:7px;
}
body[data-ui-context="skins"] .skins-locker-v7__metric > span{display:flex;align-items:center;gap:5px;font:900 10px/1 var(--skins-font);color:#c7d6e7}
body[data-ui-context="skins"] .skins-locker-v7__metric > span i{display:grid;place-items:center;width:18px;height:18px;color:var(--skin-accent)}
body[data-ui-context="skins"] .skins-locker-v7__metric-icon{width:14px;height:14px}
body[data-ui-context="skins"] .skins-ref-v12__metric-track{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
body[data-ui-context="skins"] .skins-ref-v12__metric-track b{height:7px;border-radius:999px;background:rgba(116,142,169,.18)}
body[data-ui-context="skins"] .skins-ref-v12__metric-track b.is-on{background:linear-gradient(90deg,var(--skin-accent),var(--skin-accent-2));box-shadow:0 0 8px color-mix(in srgb,var(--skin-accent) 28%,transparent)}
body[data-ui-context="skins"] .skins-ref-v12__metric-value{font:1000 10px/1 var(--skins-font);color:#fff;text-align:right}
body[data-ui-context="skins"] .skins-ref-v12__purchase{
  min-height:52px;
  display:grid;
  grid-template-columns:minmax(110px,.6fr) minmax(150px,1fr);
  gap:9px;
}
body[data-ui-context="skins"] .skins-locker-v7__price,
body[data-ui-context="skins"] .skins-locker-v7__cta{
  min-height:52px;
  border-radius:15px;
}
body[data-ui-context="skins"] .skins-locker-v7__price{
  display:flex;flex-direction:column;justify-content:center;padding:0 13px;border:1px solid rgba(119,194,255,.16);background:rgba(5,15,34,.72);
}
body[data-ui-context="skins"] .skins-locker-v7__price span{font:1000 8px/1 var(--skins-display);letter-spacing:.10em;color:#849ab2}
body[data-ui-context="skins"] .skins-locker-v7__price strong{display:flex;align-items:center;gap:6px;margin-top:4px;font:1000 17px/1 var(--skins-font);color:#fff}
body[data-ui-context="skins"] .skins-locker-v7__inline-icon{width:16px;height:16px;color:#ffd05e}
body[data-ui-context="skins"] .skins-locker-v7__cta{
  border:1px solid color-mix(in srgb,var(--skin-accent) 38%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--skin-accent) 55%,#132550),color-mix(in srgb,var(--skin-accent-2) 45%,#15213f));
  color:#fff;font:1000 13px/1 var(--skins-display);letter-spacing:.04em;cursor:var(--bm-cursor-action)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);
}
body[data-ui-context="skins"] .skins-locker-v7__cta.is-active,
body[data-ui-context="skins"] .skins-locker-v7__cta.is-locked{opacity:.66;cursor:var(--bm-cursor-default)!important}

/* -------------------- catalog -------------------- */
body[data-ui-context="skins"] .skins-ref-v12__catalog{
  display:grid;
  grid-template-rows:auto 44px minmax(0,1fr) 38px;
  gap:10px;
  padding:14px;
}
body[data-ui-context="skins"] .skins-ref-v12__catalog-head{min-width:0}
body[data-ui-context="skins"] .skins-locker-v7__catalog-title h2{
  margin:0;font:1000 clamp(28px,2.2vw,40px)/.95 var(--skins-font);letter-spacing:-.045em;color:#fff;
}
body[data-ui-context="skins"] .skins-locker-v7__catalog-title p{
  margin:6px 0 0;max-width:60ch;font:800 11px/1.3 var(--skins-font);color:#aebed0;
}
body[data-ui-context="skins"] .skins-ref-v12__collection-progress{
  width:min(300px,52%);height:5px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(112,144,177,.16);
}
body[data-ui-context="skins"] .skins-ref-v12__collection-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#63ddff,#7f82ff);box-shadow:0 0 12px rgba(99,221,255,.24)}
body[data-ui-context="skins"] .skins-ref-v12__filters{
  min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:5px;border-radius:14px;border:1px solid rgba(112,191,255,.14);background:rgba(4,13,29,.60);
}
body[data-ui-context="skins"] .skins-locker-v7__filter{
  min-width:0;height:32px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 7px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9eb2c8;cursor:var(--bm-cursor-action)!important;
}
body[data-ui-context="skins"] .skins-locker-v7__filter strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:1000 9px/1 var(--skins-display);letter-spacing:.04em}
body[data-ui-context="skins"] .skins-locker-v7__filter span{min-width:19px;height:18px;display:grid;place-items:center;border-radius:999px;background:rgba(119,160,200,.14);font:1000 9px/1 var(--skins-font);color:#c8d8e8}
body[data-ui-context="skins"] .skins-locker-v7__filter.is-active{border-color:rgba(102,217,255,.30);background:linear-gradient(180deg,rgba(46,145,190,.24),rgba(11,44,72,.38));color:#ecfbff}
body[data-ui-context="skins"] .skins-ref-v12__grid-wrap{min-height:0;overflow:hidden}
body[data-ui-context="skins"] .skins-ref-v12__grid{
  height:100%;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;
}
body[data-ui-context="skins"] .skins-locker-v7__card{
  --card-accent:#65dcff;position:relative;min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(72px,1fr) auto 26px;padding:0;border:1px solid rgba(114,191,255,.17);border-radius:17px;background:linear-gradient(180deg,rgba(10,25,52,.88),rgba(5,14,31,.98));color:#fff;text-align:left;cursor:var(--bm-cursor-action)!important;box-shadow:0 10px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.04);
}
body[data-ui-context="skins"] .skins-locker-v7__card.is-selected{border-color:color-mix(in srgb,var(--card-accent) 68%,white 4%);box-shadow:0 0 0 1px color-mix(in srgb,var(--card-accent) 24%,transparent),0 12px 26px rgba(0,0,0,.25)}
body[data-ui-context="skins"] .skins-locker-v7__card.is-active{border-color:rgba(105,239,161,.48)}
body[data-ui-context="skins"] .skins-locker-v7__card-rarity{
  position:absolute;z-index:4;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;min-height:21px;padding:0 7px;border-radius:999px;background:rgba(3,11,26,.76);border:1px solid color-mix(in srgb,var(--card-accent) 30%,transparent);font:1000 7px/1 var(--skins-display);letter-spacing:.06em;color:color-mix(in srgb,var(--card-accent) 80%,white);
}
body[data-ui-context="skins"] .skins-locker-v7__card-portrait{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--card-accent) 18%,transparent),transparent 52%)}
body[data-ui-context="skins"] .skins-locker-v7__card-portrait canvas{width:100%!important;height:100%!important;display:block;object-fit:contain}
body[data-ui-context="skins"] .skins-locker-v7__card-copy{min-width:0;padding:7px 9px 6px;border-top:1px solid rgba(255,255,255,.04);background:rgba(4,12,27,.72)}
body[data-ui-context="skins"] .skins-locker-v7__card-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:1000 13px/1 var(--skins-font);color:#fff}
body[data-ui-context="skins"] .skins-locker-v7__card-copy small{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 9px/1 var(--skins-font);color:#9fb3c9}
body[data-ui-context="skins"] .skins-locker-v7__card-copy em{display:none}
body[data-ui-context="skins"] .skins-locker-v7__card-status{min-width:0;height:26px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px;border-top:1px solid rgba(255,255,255,.04);background:rgba(3,10,23,.88);font:1000 8px/1 var(--skins-display);letter-spacing:.04em;color:#c8d8e7}
body[data-ui-context="skins"] .skins-locker-v7__card-status.is-owned{color:#75eab0}
body[data-ui-context="skins"] .skins-locker-v7__card-status.is-active{color:#8df5ba;background:rgba(17,71,50,.32)}
body[data-ui-context="skins"] .skins-locker-v7__status-icon{width:12px;height:12px}
body[data-ui-context="skins"] .skins-locker-v7__empty{display:grid;place-items:center;height:100%;color:#a9bbcf;font:900 13px/1.2 var(--skins-font)}
body[data-ui-context="skins"] .skins-ref-v12__pager{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px}
body[data-ui-context="skins"] .skins-ref-v12__pager > button,
body[data-ui-context="skins"] .skins-locker-v7__pager-dots button{
  width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(117,194,255,.17);border-radius:9px;background:rgba(6,17,36,.74);color:#afc2d6;font:1000 10px/1 var(--skins-font);cursor:var(--bm-cursor-action)!important;
}
body[data-ui-context="skins"] .skins-locker-v7__pager-dots{display:flex;align-items:center;gap:5px}
body[data-ui-context="skins"] .skins-locker-v7__pager-dots button.is-active{border-color:rgba(101,220,255,.38);background:rgba(28,101,139,.38);color:#fff}
body[data-ui-context="skins"] .skins-ref-v12__pager button:disabled{opacity:.34;cursor:var(--bm-cursor-default)!important}

/* -------------------- feedback / errors -------------------- */
.skins-toast{
  position:fixed;z-index:500;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;padding:12px 18px;border:1px solid rgba(111,212,255,.26);border-radius:14px;background:rgba(5,15,32,.96);box-shadow:0 16px 40px rgba(0,0,0,.34);color:#fff;font:900 13px/1.2 var(--skins-font);transition:opacity .18s ease,transform .18s ease;
}
.skins-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.skins-render-error{min-height:320px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:#fff}
.skins-render-error strong{font:1000 22px/1 var(--skins-font)}
.skins-render-error span{font:800 13px/1.4 var(--skins-font);color:#aebed0}

/* -------------------- interactions / accessibility -------------------- */
@media (hover:hover) and (pointer:fine){
  body[data-ui-context="skins"] .skins-ref-v12__back,
  body[data-ui-context="skins"] .skins-locker-v7__filter,
  body[data-ui-context="skins"] .skins-locker-v7__card,
  body[data-ui-context="skins"] .skins-locker-v7__hero-nav,
  body[data-ui-context="skins"] .skins-locker-v7__cta,
  body[data-ui-context="skins"] .skins-ref-v12__pager button{
    transition:border-color .16s ease,filter .16s ease,background .16s ease,box-shadow .16s ease!important;
    transform:none!important;
  }
  body[data-ui-context="skins"] .skins-ref-v12__back:hover,
  body[data-ui-context="skins"] .skins-locker-v7__filter:hover,
  body[data-ui-context="skins"] .skins-locker-v7__card:hover,
  body[data-ui-context="skins"] .skins-locker-v7__hero-nav:hover,
  body[data-ui-context="skins"] .skins-locker-v7__cta:hover:not(:disabled),
  body[data-ui-context="skins"] .skins-ref-v12__pager button:hover:not(:disabled){filter:brightness(1.08)}
}
body[data-ui-context="skins"] button:focus-visible,
body[data-ui-context="skins"] a:focus-visible{
  outline:3px solid rgba(108,221,255,.72)!important;
  outline-offset:2px!important;
}

/* 1366x768 / browser viewport around 1366x640 */
@media (max-height:720px) and (min-width:1051px){
  body[data-ui-context="skins"] .screen--skins .skins-content{padding:10px!important}
  body[data-ui-context="skins"] .skins-ref-v12{grid-template-rows:60px minmax(0,1fr);gap:9px}
  body[data-ui-context="skins"] .skins-ref-v12__topbar{height:60px;padding:7px 9px;border-radius:18px}
  body[data-ui-context="skins"] .skins-ref-v12__back{height:40px;min-width:86px;font-size:11px}
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark{width:34px;height:34px;flex-basis:34px}
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__mark img{width:25px;height:25px}
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{font-size:22px}
  body[data-ui-context="skins"] .skins-ref-v12__section-icon{width:36px;height:36px}
  body[data-ui-context="skins"] .skins-ref-v12__section-copy strong{font-size:17px}
  body[data-ui-context="skins"] .skins-ref-v12__top-stat{height:40px;min-width:115px;padding:0 9px}
  body[data-ui-context="skins"] .skins-ref-v12__layout{grid-template-columns:minmax(350px,.84fr) minmax(570px,1.36fr);gap:9px}
  body[data-ui-context="skins"] .skins-ref-v12__hero-panel{grid-template-rows:auto minmax(160px,1fr) 54px 48px 44px;gap:6px;padding:9px;border-radius:18px}
  body[data-ui-context="skins"] .skins-ref-v12__hero-head{min-height:52px}
  body[data-ui-context="skins"] .skins-ref-v12__hero-title h1{font-size:28px}
  body[data-ui-context="skins"] .skins-ref-v12__stage{min-height:160px;border-radius:16px}
  body[data-ui-context="skins"] .skins-ref-v12__ability{min-height:54px;padding:6px 8px;grid-template-columns:36px minmax(0,1fr)}
  body[data-ui-context="skins"] .skins-locker-v7__ability-icon{width:34px;height:34px}
  body[data-ui-context="skins"] .skins-ref-v12__ability p{display:none}
  body[data-ui-context="skins"] .skins-ref-v12__metrics{min-height:48px;gap:4px 8px}
  body[data-ui-context="skins"] .skins-locker-v7__metric{grid-template-columns:66px minmax(40px,1fr) 15px;gap:5px}
  body[data-ui-context="skins"] .skins-locker-v7__metric > span{font-size:10px}
  body[data-ui-context="skins"] .skins-ref-v12__purchase{min-height:44px}
  body[data-ui-context="skins"] .skins-locker-v7__price,body[data-ui-context="skins"] .skins-locker-v7__cta{min-height:44px}
  body[data-ui-context="skins"] .skins-ref-v12__catalog{grid-template-rows:50px 38px minmax(0,1fr) 32px;gap:7px;padding:9px;border-radius:18px}
  body[data-ui-context="skins"] .skins-locker-v7__catalog-title h2{font-size:28px}
  body[data-ui-context="skins"] .skins-locker-v7__catalog-title p{display:none}
  body[data-ui-context="skins"] .skins-ref-v12__collection-progress{margin-top:6px;height:4px}
  body[data-ui-context="skins"] .skins-ref-v12__filters{height:38px;padding:4px;gap:4px}
  body[data-ui-context="skins"] .skins-locker-v7__filter{height:28px;padding:0 5px}
  body[data-ui-context="skins"] .skins-locker-v7__filter strong{font-size:10px}
  body[data-ui-context="skins"] .skins-ref-v12__grid{gap:6px}
  body[data-ui-context="skins"] .skins-locker-v7__card-copy{padding:5px 7px}
  body[data-ui-context="skins"] .skins-locker-v7__card-copy strong{font-size:11px}
  body[data-ui-context="skins"] .skins-locker-v7__card-copy small{font-size:10px}
  body[data-ui-context="skins"] .skins-locker-v7__card-status{height:23px;font-size:10px}
  body[data-ui-context="skins"] .skins-ref-v12__pager{min-height:32px}
  body[data-ui-context="skins"] .skins-ref-v12__pager > button,body[data-ui-context="skins"] .skins-locker-v7__pager-dots button{width:26px;height:26px}
}

/* Narrow desktop fallback: preserve readability; page can scroll instead of squeeze. */
@media (max-width:1050px){
  body[data-ui-context="skins"]{overflow:auto!important}
  body[data-ui-context="skins"] .app,body[data-ui-context="skins"] .screen--skins:not(.hidden),body[data-ui-context="skins"] .screen--skins .skins-content{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  body[data-ui-context="skins"] .skins-ref-v12{height:auto;min-height:100dvh;grid-template-rows:auto auto}
  body[data-ui-context="skins"] .skins-ref-v12__topbar{height:auto;min-height:70px;flex-wrap:wrap}
  body[data-ui-context="skins"] .skins-ref-v12__layout{grid-template-columns:1fr;grid-template-rows:auto auto}
  body[data-ui-context="skins"] .skins-ref-v12__hero-panel{min-height:700px;grid-template-rows:auto 390px auto auto auto}
  body[data-ui-context="skins"] .skins-ref-v12__catalog{min-height:760px;grid-template-rows:auto auto 1fr auto}
  body[data-ui-context="skins"] .skins-ref-v12__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,180px)}
}

@media (prefers-reduced-motion:reduce){
  body[data-ui-context="skins"] .skins-ref-v12 *,
  body[data-ui-context="skins"] .skins-ref-v12 *::before,
  body[data-ui-context="skins"] .skins-ref-v12 *::after{animation:none!important;transition:none!important}
}
\n\n/* V48 — definitive modern skins isolation.\n   Old global/legacy sheets used .skins-locker-v7 as the two-column grid itself.\n   V12 uses a topbar + nested .skins-ref-v12__layout, so reset that obsolete contract. */\nbody[data-ui-context="skins"] #screenSkins .skins-locker-v7.skins-ref-v12{\n  width:100% !important; height:100% !important; min-height:0 !important;\n  display:grid !important; grid-template-columns:minmax(0,1fr) !important;\n  grid-template-rows:72px minmax(0,1fr) !important; gap:14px !important;\n  overflow:hidden !important; padding:0 !important;\n}\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__topbar{\n  grid-column:1 !important; grid-row:1 !important; width:100% !important; min-width:0 !important;\n}\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__layout{\n  grid-column:1 !important; grid-row:2 !important; width:100% !important; height:100% !important; min-height:0 !important;\n  display:grid !important; grid-template-columns:minmax(390px,.88fr) minmax(610px,1.32fr) !important;\n  grid-template-rows:minmax(0,1fr) !important; gap:14px !important; overflow:hidden !important;\n}\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{\n  grid-column:1 !important; height:100% !important; min-height:0 !important;\n  display:grid !important; grid-template-rows:auto minmax(210px,1fr) auto auto auto !important;\n}\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{\n  grid-column:2 !important; height:100% !important; min-height:0 !important;\n  display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto !important;\n}\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__stage,\nbody[data-ui-context="skins"] #screenSkins .skins-ref-v12__grid-wrap{min-height:0 !important; overflow:hidden !important;}\n@media (max-width:1050px){\n body[data-ui-context="skins"] #screenSkins .skins-locker-v7.skins-ref-v12{height:auto !important;grid-template-rows:auto auto !important;overflow:visible !important}\n body[data-ui-context="skins"] #screenSkins .skins-ref-v12__layout{height:auto !important;grid-template-columns:1fr !important;grid-template-rows:auto auto !important;overflow:visible !important}\n body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel,\n body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{grid-column:1 !important;height:auto !important}\n}\n
/* V49 — responsive collection pass. Keeps the showroom readable from large
   desktop down to phone widths without squeezing controls or skin cards. */
@media (max-width:1360px) and (min-width:1051px){
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__layout{grid-template-columns:minmax(340px,.82fr) minmax(540px,1.38fr)!important;gap:10px!important}
  body[data-ui-context="skins"] .skins-ref-v12__topbar{padding-inline:10px}
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{font-size:20px}
  body[data-ui-context="skins"] .skins-ref-v12__section-copy small{display:none}
  body[data-ui-context="skins"] .skins-ref-v12__top-stat{min-width:108px}
  body[data-ui-context="skins"] .skins-ref-v12__grid{gap:8px}
}
@media (max-width:1050px){
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__layout{gap:14px!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:640px!important;grid-template-rows:auto 340px auto auto auto!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:720px!important}
  body[data-ui-context="skins"] .skins-ref-v12__topbar{gap:8px;padding:9px!important}
  body[data-ui-context="skins"] .skins-ref-v12__topbar-left{min-width:0;flex:1 1 500px}
  body[data-ui-context="skins"] .skins-ref-v12__top-stats{margin-left:auto}
}
@media (max-width:760px){
  body[data-ui-context="skins"] .screen--skins .skins-content{padding:8px!important}
  body[data-ui-context="skins"] #screenSkins .skins-locker-v7.skins-ref-v12{gap:8px!important}
  body[data-ui-context="skins"] .skins-ref-v12__topbar{align-items:stretch!important;border-radius:16px!important}
  body[data-ui-context="skins"] .skins-ref-v12__topbar-left{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px!important;width:100%}
  body[data-ui-context="skins"] .skins-ref-v12__back{min-width:72px!important;padding:0 10px!important}
  body[data-ui-context="skins"] .skins-ref-v12__brand{min-width:0!important}
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{font-size:17px!important}
  body[data-ui-context="skins"] .skins-ref-v12__section-copy strong{font-size:15px!important}
  body[data-ui-context="skins"] .skins-ref-v12__top-stats{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:7px!important}
  body[data-ui-context="skins"] .skins-ref-v12__top-stat{min-width:0!important;width:100%!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:600px!important;grid-template-rows:auto 300px auto auto auto!important;padding:10px!important}
  body[data-ui-context="skins"] .skins-ref-v12__hero-title h1{font-size:30px!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:690px!important;padding:10px!important}
  body[data-ui-context="skins"] .skins-ref-v12__filters{overflow-x:auto!important;justify-content:flex-start!important;scrollbar-width:none}
  body[data-ui-context="skins"] .skins-locker-v7__filter{flex:0 0 auto!important;min-width:94px!important}
  body[data-ui-context="skins"] .skins-ref-v12__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:178px!important}
  body[data-ui-context="skins"] .skins-locker-v7__pager-dots{max-width:72vw;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none}
}
@media (max-width:480px){
  body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{display:none!important}
  body[data-ui-context="skins"] .skins-ref-v12__brand-divider{display:none!important}
  body[data-ui-context="skins"] .skins-ref-v12__section-icon{width:34px!important;height:34px!important}
  body[data-ui-context="skins"] .skins-ref-v12__hero-head{gap:6px!important}
  body[data-ui-context="skins"] .skins-ref-v12__hero-state{font-size:9px!important;padding:6px 8px!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:570px!important;grid-template-rows:auto 270px auto auto auto!important}
  body[data-ui-context="skins"] .skins-ref-v12__metrics{grid-template-columns:1fr!important}
  body[data-ui-context="skins"] .skins-ref-v12__purchase{grid-template-columns:1fr!important}
  body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:660px!important}
  body[data-ui-context="skins"] .skins-ref-v12__grid{grid-auto-rows:166px!important;gap:7px!important}
  body[data-ui-context="skins"] .skins-locker-v7__card-copy em{display:none!important}
}


/* V49 — adaptive catalog + stronger skin identity */
body[data-ui-context="skins"] .skins-locker-v7__card::before{
  content:"";position:absolute;z-index:3;inset:0 auto 0 0;width:4px;background:var(--card-accent);box-shadow:0 0 14px var(--card-accent);opacity:.82
}
body[data-ui-context="skins"] .skins-locker-v7__card-portrait::after{
  content:"";position:absolute;inset:auto 8% 0;height:38%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--card-accent) 15%,transparent));border-radius:50% 50% 0 0
}
@media (max-width:1050px){
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__topbar{gap:10px!important;padding:10px!important}
 body[data-ui-context="skins"] .skins-ref-v12__top-stats{margin-left:auto}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:620px!important;grid-template-rows:auto 330px auto auto auto!important}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:620px!important}
 body[data-ui-context="skins"] .skins-ref-v12__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(190px,1fr))!important}
}
@media (max-width:760px){
 body[data-ui-context="skins"] .screen--skins .skins-content{padding:8px!important}
 body[data-ui-context="skins"] #screenSkins .skins-locker-v7.skins-ref-v12{gap:8px!important}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__topbar{align-items:stretch!important}
 body[data-ui-context="skins"] .skins-ref-v12__topbar-left{width:100%;min-width:0}
 body[data-ui-context="skins"] .skins-ref-v12__brand{min-width:0;flex:1}
 body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{font-size:18px}
 body[data-ui-context="skins"] .skins-ref-v12__section-copy small{display:none}
 body[data-ui-context="skins"] .skins-ref-v12__top-stats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
 body[data-ui-context="skins"] .skins-ref-v12__top-stat{min-width:0!important;width:100%}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:560px!important;grid-template-rows:auto 290px auto auto auto!important;padding:10px!important}
 body[data-ui-context="skins"] .skins-ref-v12__hero-title h1{font-size:30px!important}
 body[data-ui-context="skins"] .skins-ref-v12__metrics{grid-template-columns:1fr!important}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:650px!important;padding:10px!important}
 body[data-ui-context="skins"] .skins-ref-v12__filters{display:flex!important;overflow-x:auto!important;scrollbar-width:none;padding:5px!important}
 body[data-ui-context="skins"] .skins-ref-v12__filters::-webkit-scrollbar{display:none}
 body[data-ui-context="skins"] .skins-locker-v7__filter{flex:0 0 auto;min-width:92px!important}
 body[data-ui-context="skins"] .skins-ref-v12__collection-progress{width:100%!important}
}
@media (max-width:520px){
 body[data-ui-context="skins"] .skins-ref-v12__back{min-width:72px!important;padding:0 10px!important}
 body[data-ui-context="skins"] .brand-lockup--skins .brand-lockup__word{display:none}
 body[data-ui-context="skins"] .skins-ref-v12__brand-divider{display:none}
 body[data-ui-context="skins"] .skins-ref-v12__section-copy b{font-size:15px!important}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__hero-panel{min-height:520px!important;grid-template-rows:auto 250px auto auto auto!important}
 body[data-ui-context="skins"] .skins-ref-v12__hero-head{align-items:flex-start!important}
 body[data-ui-context="skins"] .skins-ref-v12__hero-title h1{font-size:27px!important}
 body[data-ui-context="skins"] #screenSkins .skins-ref-v12__catalog{min-height:900px!important}
 body[data-ui-context="skins"] .skins-ref-v12__grid{grid-template-columns:1fr!important;grid-template-rows:repeat(3,240px)!important}
 body[data-ui-context="skins"] .skins-locker-v7__card-copy strong{font-size:14px!important}
 body[data-ui-context="skins"] .skins-ref-v12__pager{overflow-x:auto;justify-content:flex-start!important;padding-bottom:3px}
}