/* ========================================================================
   BOMBARERA SKINS V77 — COLLECTION FIRST / HERO DETAIL
   Catalog-first UX inspired by proven hero-select patterns, rebuilt in the
   Bombarera visual language. Loaded after legacy skins.css as the live layer.
   ======================================================================== */

body[data-ui-context="skins"] .screen--skins .skins-content{
  padding:12px!important;
  overflow:hidden!important;
}
body[data-ui-context="skins"] .skins-v77,
body[data-ui-context="skins"] .skins-v77 *{box-sizing:border-box}
body[data-ui-context="skins"] .skins-v77{
  --v77-cyan:#62e7ff;
  --v77-blue:#3d8dff;
  --v77-violet:#9d67ff;
  --v77-pink:#ff63c7;
  --v77-gold:#ffd166;
  --v77-green:#68efb1;
  --v77-panel:rgba(8,20,42,.91);
  --v77-panel-2:rgba(11,27,54,.84);
  --v77-line:rgba(113,208,255,.22);
  --v77-text:#f7fbff;
  --v77-muted:#a8bbd2;
  position:relative;
  width:min(1640px,100%);
  height:100%;
  min-height:0;
  margin:0 auto;
  display:grid;
  grid-template-rows:68px minmax(0,1fr);
  gap:10px;
  color:var(--v77-text);
  font-family:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  isolation:isolate;
}
body[data-ui-context="skins"] .skins-v77::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%,rgba(52,198,255,.18),transparent 28%),
    radial-gradient(circle at 83% 18%,rgba(169,89,255,.16),transparent 31%),
    radial-gradient(circle at 55% 96%,rgba(255,78,178,.08),transparent 30%);
}

/* topbar */
body[data-ui-context="skins"] .skins-v77__topbar{
  min-width:0;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px 10px;
  border:1px solid var(--v77-line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(11,27,55,.96),rgba(5,14,31,.95));
  box-shadow:0 14px 36px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(130%);
}
body[data-ui-context="skins"] .skins-v77__topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
body[data-ui-context="skins"] .skins-v77__back{
  height:46px;min-width:98px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(122,205,255,.26);border-radius:14px;background:rgba(4,15,33,.78);color:#f3f9ff;text-decoration:none;
  font:1000 13px/1 'Exo 2',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.18s ease;
}
body[data-ui-context="skins"] .skins-v77__back:hover{transform:translateY(-1px);border-color:rgba(99,224,255,.55);background:rgba(10,31,58,.92)}
body[data-ui-context="skins"] .skins-v77__back-icon{width:18px;height:18px}
body[data-ui-context="skins"] .skins-v77__divider{width:1px;height:34px;background:linear-gradient(transparent,rgba(120,208,255,.36),transparent)}
body[data-ui-context="skins"] .skins-v77__title-lockup{display:flex;align-items:center;gap:10px;min-width:0}
body[data-ui-context="skins"] .skins-v77__title-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#73e8ff;
  border:1px solid rgba(91,221,255,.35);background:linear-gradient(145deg,rgba(38,162,220,.28),rgba(87,67,205,.22));
  box-shadow:0 0 24px rgba(67,203,255,.10),inset 0 1px 0 rgba(255,255,255,.08)
}
body[data-ui-context="skins"] .skins-v77__title-svg{width:23px;height:23px}
body[data-ui-context="skins"] .skins-v77__title-lockup>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-ui-context="skins"] .skins-v77__title-lockup strong{font:1000 20px/1 'Exo 2',sans-serif;letter-spacing:.02em}
body[data-ui-context="skins"] .skins-v77__title-lockup small{font:900 8px/1.1 'Exo 2',sans-serif;letter-spacing:.14em;color:#79dcff;white-space:nowrap}
body[data-ui-context="skins"] .skins-v77__wallet{
  min-width:140px;height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:15px;
  border:1px solid rgba(255,208,92,.30);background:linear-gradient(180deg,rgba(48,38,20,.72),rgba(11,22,39,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
body[data-ui-context="skins"] .skins-v77__wallet-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,202,65,.12);color:#ffd45d}
body[data-ui-context="skins"] .skins-v77__coin-svg{width:21px;height:21px}
body[data-ui-context="skins"] .skins-v77__wallet>span:last-child{display:flex;flex-direction:column;gap:2px}
body[data-ui-context="skins"] .skins-v77__wallet small{font:900 8px/1 'Exo 2',sans-serif;letter-spacing:.12em;color:#bcae8d}
body[data-ui-context="skins"] .skins-v77__wallet strong{font:1000 17px/1 'Exo 2',sans-serif;color:#fff4bf}

/* collection */
body[data-ui-context="skins"] .skins-v77__collection{
  min-height:0;overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:14px;
  border:1px solid var(--v77-line);border-radius:24px;
  background:
    linear-gradient(180deg,rgba(8,22,48,.90),rgba(4,12,28,.96)),
    radial-gradient(circle at 80% 10%,rgba(118,78,255,.15),transparent 36%);
  box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);
}
body[data-ui-context="skins"] .skins-v77__intro{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}
body[data-ui-context="skins"] .skins-v77__intro>div:first-child{min-width:0}
body[data-ui-context="skins"] .skins-v77__eyebrow{display:block;margin-bottom:5px;color:#73e8ff;font:1000 9px/1 'Exo 2',sans-serif;letter-spacing:.14em}
body[data-ui-context="skins"] .skins-v77__intro h1{margin:0;font:1000 clamp(25px,2.1vw,38px)/.98 'Exo 2',sans-serif;letter-spacing:-.04em;color:#fff}
body[data-ui-context="skins"] .skins-v77__intro p{margin:7px 0 0;max-width:760px;color:#aebed1;font:800 12px/1.35 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__collection-stat{
  flex:0 0 238px;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 10px;align-items:center;
  padding:10px 12px;border:1px solid rgba(111,213,255,.20);border-radius:16px;background:rgba(5,17,37,.66)
}
body[data-ui-context="skins"] .skins-v77__collection-stat>span{grid-row:1;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,rgba(63,205,255,.19),rgba(161,90,255,.20));color:#78e8ff}
body[data-ui-context="skins"] .skins-v77__stat-icon{width:22px;height:22px}
body[data-ui-context="skins"] .skins-v77__collection-stat>div{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
body[data-ui-context="skins"] .skins-v77__collection-stat small{font:900 8px/1 'Exo 2',sans-serif;letter-spacing:.1em;color:#93a8c1}
body[data-ui-context="skins"] .skins-v77__collection-stat strong{font:1000 19px/1 'Exo 2',sans-serif;color:#fff}
body[data-ui-context="skins"] .skins-v77__collection-stat strong em{font:900 11px/1 'Exo 2',sans-serif;font-style:normal;color:#8298b1}
body[data-ui-context="skins"] .skins-v77__collection-stat>i{grid-column:1/-1;height:5px;overflow:hidden;border-radius:999px;background:#142844}
body[data-ui-context="skins"] .skins-v77__collection-stat>i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5fe7ff,#9d6cff,#ff67c9);box-shadow:0 0 14px rgba(100,221,255,.32)}

body[data-ui-context="skins"] .skins-v77__filters{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;padding:5px;border:1px solid rgba(110,194,255,.15);border-radius:15px;background:rgba(3,13,29,.55);scrollbar-width:none}
body[data-ui-context="skins"] .skins-v77__filters::-webkit-scrollbar{display:none}
body[data-ui-context="skins"] .skins-v77__filter{
  flex:0 0 auto;min-width:104px;height:36px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid transparent;border-radius:11px;
  background:rgba(16,31,54,.72);color:#aebdd0;font:900 11px/1 'Exo 2',sans-serif;transition:.16s ease
}
body[data-ui-context="skins"] .skins-v77__filter span{min-width:22px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.06);font-size:9px;color:#879db7}
body[data-ui-context="skins"] .skins-v77__filter:hover{color:#fff;border-color:rgba(102,221,255,.25);transform:translateY(-1px)}
body[data-ui-context="skins"] .skins-v77__filter.is-active{color:#fff;border-color:rgba(98,231,255,.46);background:linear-gradient(135deg,rgba(35,139,199,.30),rgba(99,70,194,.28));box-shadow:0 0 20px rgba(65,202,255,.10),inset 0 1px 0 rgba(255,255,255,.07)}
body[data-ui-context="skins"] .skins-v77__filter.is-active span{background:#65ddff;color:#07101d}

body[data-ui-context="skins"] .skins-v77__grid-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:3px 5px 8px 2px;scrollbar-width:thin;scrollbar-color:rgba(92,211,255,.35) rgba(8,22,42,.35)}
body[data-ui-context="skins"] .skins-v77__grid-scroll::-webkit-scrollbar{width:8px}
body[data-ui-context="skins"] .skins-v77__grid-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(92,211,255,.30)}
body[data-ui-context="skins"] .skins-v77__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-content:start}
body[data-ui-context="skins"] .skins-v77__card{
  --card-accent:#65dcff;--card-accent-2:#7b7cff;
  position:relative;min-width:0;height:218px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:0;
  border:1px solid color-mix(in srgb,var(--card-accent) 34%,rgba(105,184,232,.18));border-radius:18px;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--card-accent) 13%,transparent),transparent 46%),
    linear-gradient(180deg,rgba(19,38,67,.92),rgba(7,18,36,.98));
  color:#fff;text-align:left;box-shadow:0 12px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
body[data-ui-context="skins"] .skins-v77__card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--card-accent),var(--card-accent-2));opacity:.9;box-shadow:0 0 16px var(--card-accent)}
body[data-ui-context="skins"] .skins-v77__card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--card-accent) 72%,white 5%);box-shadow:0 18px 34px rgba(0,0,0,.28),0 0 24px color-mix(in srgb,var(--card-accent) 14%,transparent)}
body[data-ui-context="skins"] .skins-v77__card.is-active{border-color:#6ff0ae;box-shadow:0 0 0 1px rgba(111,240,174,.18),0 15px 32px rgba(0,0,0,.24)}
body[data-ui-context="skins"] .skins-v77__card-top{position:absolute;z-index:5;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
body[data-ui-context="skins"] .skins-v77__card-rarity,.skins-v77__new{min-height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;background:rgba(4,12,25,.76);border:1px solid rgba(255,255,255,.10);font:1000 7.5px/1 'Exo 2',sans-serif;letter-spacing:.08em;color:var(--card-accent);backdrop-filter:blur(8px)}
body[data-ui-context="skins"] .skins-v77__new{margin-left:auto;color:#08111f;background:#ffd166;border-color:#ffe9a6}
body[data-ui-context="skins"] .skins-v77__portrait{position:relative;grid-row:1/3;min-height:132px;overflow:hidden}
body[data-ui-context="skins"] .skins-v77__portrait-glow{position:absolute;inset:18% 10% 0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 20%,transparent),transparent 67%);filter:blur(4px)}
body[data-ui-context="skins"] .skins-v77__portrait canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body[data-ui-context="skins"] .skins-v77__card-copy{position:relative;z-index:4;display:flex;align-items:baseline;gap:7px;padding:7px 10px 4px;background:linear-gradient(180deg,rgba(6,16,32,.12),rgba(6,16,32,.86))}
body[data-ui-context="skins"] .skins-v77__card-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:1000 14px/1 'Exo 2',sans-serif;color:#fff}
body[data-ui-context="skins"] .skins-v77__card-copy small{margin-left:auto;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 8.5px/1 'Exo 2',sans-serif;color:#8fa7c1}
body[data-ui-context="skins"] .skins-v77__card-bottom{position:relative;z-index:4;min-height:34px;display:grid;grid-template-columns:18px auto 1fr;align-items:center;gap:5px;padding:0 10px 8px;background:#071225;color:#ffd166}
body[data-ui-context="skins"] .skins-v77__card-bottom>span{display:grid;place-items:center;color:currentColor}
body[data-ui-context="skins"] .skins-v77__status-icon{width:14px;height:14px}
body[data-ui-context="skins"] .skins-v77__card-bottom b{font:1000 10px/1 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__card-bottom em{justify-self:end;font:900 8px/1 'Exo 2',sans-serif;font-style:normal;letter-spacing:.08em;color:#6edfff}
body[data-ui-context="skins"] .skins-v77__card-bottom.is-owned{color:#69e9b0}
body[data-ui-context="skins"] .skins-v77__card-bottom.is-active{color:#7affba}
body[data-ui-context="skins"] .skins-v77__empty{padding:40px;text-align:center;color:#9eb2c9;font-weight:900}

/* hero detail layer */
body[data-ui-context="skins"] .skins-v77__detail-layer{
  position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:10px;
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--skin-accent) 15%,transparent),transparent 36%),
    linear-gradient(135deg,rgba(2,12,30,.95),rgba(5,22,51,.96) 50%,rgba(20,12,50,.96));
  backdrop-filter:blur(13px) saturate(125%);animation:skinsV77Fade .18s ease-out both
}
@keyframes skinsV77Fade{from{opacity:0}to{opacity:1}}
body[data-ui-context="skins"] .skins-v77__detail{
  position:relative;width:min(1500px,100%);height:min(780px,100%);min-height:0;display:grid;grid-template-columns:minmax(250px,.78fr) minmax(390px,1.18fr) minmax(260px,.82fr);gap:12px;padding:14px;
  border:1px solid color-mix(in srgb,var(--skin-accent) 38%,rgba(255,255,255,.12));border-radius:26px;
  background:
    linear-gradient(180deg,rgba(12,30,61,.92),rgba(5,15,34,.97)),
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--skin-accent) 12%,transparent),transparent 42%);
  box-shadow:0 32px 90px rgba(0,0,0,.55),0 0 50px color-mix(in srgb,var(--skin-accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
  animation:skinsV77Pop .22s cubic-bezier(.2,.8,.2,1) both
}
@keyframes skinsV77Pop{from{opacity:0;transform:scale(.975) translateY(8px)}to{opacity:1;transform:none}}
body[data-ui-context="skins"] .skins-v77__detail-close{position:absolute;z-index:20;top:12px;right:12px;width:42px;height:42px;border:1px solid rgba(146,210,255,.28);border-radius:13px;background:rgba(5,17,36,.82);color:#d9efff;font:500 30px/1 'Exo 2',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
body[data-ui-context="skins"] .skins-v77__detail-close:hover{background:rgba(24,54,83,.92);color:#fff;border-color:#69dfff}
body[data-ui-context="skins"] .skins-v77__detail-info,
body[data-ui-context="skins"] .skins-v77__detail-stats{min-width:0;min-height:0;overflow:auto;padding:18px;border:1px solid rgba(113,195,242,.15);border-radius:20px;background:linear-gradient(180deg,rgba(8,23,48,.80),rgba(5,15,33,.88));scrollbar-width:thin}
body[data-ui-context="skins"] .skins-v77__detail-info{display:flex;flex-direction:column;align-items:flex-start}
body[data-ui-context="skins"] .skins-v77__detail-rarity{min-height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--skin-accent) 45%,transparent);background:color-mix(in srgb,var(--skin-accent) 10%,rgba(5,14,31,.85));color:var(--skin-accent);font:1000 8px/1 'Exo 2',sans-serif;letter-spacing:.12em}
body[data-ui-context="skins"] .skins-v77__detail-info h2{margin:14px 0 3px;max-width:100%;font:1000 clamp(30px,3vw,48px)/.92 'Exo 2',sans-serif;letter-spacing:-.05em;color:#fff}
body[data-ui-context="skins"] .skins-v77__detail-role{margin:5px 0 0;color:#72ddff;font:1000 10px/1.2 'Exo 2',sans-serif;letter-spacing:.08em;text-transform:uppercase}
body[data-ui-context="skins"] .skins-v77__detail-desc{margin:18px 0;color:#b6c5d8;font:800 13px/1.48 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__rank-card{width:100%;margin-top:auto;padding:12px 13px;border:1px solid rgba(255,209,102,.22);border-radius:15px;background:linear-gradient(135deg,rgba(255,198,66,.10),rgba(84,53,120,.14));display:grid;grid-template-columns:1fr auto;gap:5px 8px}
body[data-ui-context="skins"] .skins-v77__rank-card span{font:1000 8px/1 'Exo 2',sans-serif;letter-spacing:.12em;color:#b6a57f}
body[data-ui-context="skins"] .skins-v77__rank-card strong{grid-column:2;grid-row:1/3;align-self:center;font:1000 16px/1 'Exo 2',sans-serif;color:#ffe08a}
body[data-ui-context="skins"] .skins-v77__rank-card small{font:800 9px/1.25 'Exo 2',sans-serif;color:#aebed0}
body[data-ui-context="skins"] .skins-v77__skill-card{width:100%;margin-top:10px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--skin-accent) 28%,transparent);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--skin-accent) 10%,rgba(8,22,45,.86)),rgba(8,22,45,.82))}
body[data-ui-context="skins"] .skins-v77__skill-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--skin-accent) 15%,rgba(4,14,30,.9));color:var(--skin-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
body[data-ui-context="skins"] .skins-v77__skill-svg{width:24px;height:24px}
body[data-ui-context="skins"] .skins-v77__skill-card>div:last-child{min-width:0}
body[data-ui-context="skins"] .skins-v77__skill-card span{display:block;margin-bottom:4px;color:#88a1bb;font:1000 7.5px/1 'Exo 2',sans-serif;letter-spacing:.1em}
body[data-ui-context="skins"] .skins-v77__skill-card strong{display:block;color:#fff;font:1000 12px/1.18 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__skill-card p{margin:5px 0 0;color:#aebfd2;font:800 9.5px/1.35 'Exo 2',sans-serif}

body[data-ui-context="skins"] .skins-v77__detail-stage{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--skin-accent) 28%,rgba(255,255,255,.08));border-radius:22px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--skin-accent) 19%,transparent),transparent 39%),linear-gradient(180deg,rgba(9,30,63,.74),rgba(4,15,34,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body[data-ui-context="skins"] .skins-v77__stage-glow{position:absolute;left:15%;right:15%;top:18%;bottom:10%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--skin-accent) 24%,transparent),transparent 67%);filter:blur(12px);animation:skinsV77Glow 3.8s ease-in-out infinite}
@keyframes skinsV77Glow{50%{transform:scale(1.06);opacity:.75}}
body[data-ui-context="skins"] .skins-v77__stage-grid{position:absolute;inset:48% 0 0;opacity:.18;background-image:linear-gradient(rgba(101,220,255,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(101,220,255,.20) 1px,transparent 1px);background-size:34px 34px;transform:perspective(300px) rotateX(60deg) scale(1.25);transform-origin:center top;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
body[data-ui-context="skins"] .skins-v77__stage-badge{position:absolute;z-index:5;top:16px;left:50%;transform:translateX(-50%);min-height:26px;display:flex;align-items:center;padding:0 11px;border:1px solid color-mix(in srgb,var(--skin-accent) 35%,transparent);border-radius:999px;background:rgba(4,13,28,.62);color:var(--skin-accent);font:1000 8px/1 'Exo 2',sans-serif;letter-spacing:.12em;backdrop-filter:blur(8px)}
body[data-ui-context="skins"] .skins-v77__detail-stage canvas{position:absolute;z-index:4;inset:0;width:100%;height:100%;display:block}
body[data-ui-context="skins"] .skins-v77__hero-nav{position:absolute;z-index:9;top:50%;width:42px;height:64px;margin-top:-32px;border:1px solid rgba(130,213,255,.28);border-radius:14px;background:rgba(5,17,37,.68);color:#e8f7ff;font:900 30px/1 'Exo 2',sans-serif;backdrop-filter:blur(8px);transition:.16s ease}
body[data-ui-context="skins"] .skins-v77__hero-nav:hover{background:color-mix(in srgb,var(--skin-accent) 20%,rgba(5,17,37,.88));border-color:var(--skin-accent);transform:scale(1.04)}
body[data-ui-context="skins"] .skins-v77__hero-nav.is-prev{left:12px}
body[data-ui-context="skins"] .skins-v77__hero-nav.is-next{right:12px}
body[data-ui-context="skins"] .skins-v77__pedestal{position:absolute;z-index:3;left:16%;right:16%;bottom:5.5%;height:13%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--skin-accent) 32%,rgba(28,50,75,.9)) 0%,rgba(12,25,45,.92) 52%,rgba(3,10,23,.1) 70%);border-top:1px solid color-mix(in srgb,var(--skin-accent) 38%,transparent);box-shadow:0 -10px 35px color-mix(in srgb,var(--skin-accent) 12%,transparent)}
body[data-ui-context="skins"] .skins-v77__swipe-hint{position:absolute;z-index:8;bottom:12px;left:50%;transform:translateX(-50%);color:#7e97b1;font:900 8px/1 'Exo 2',sans-serif;letter-spacing:.08em;white-space:nowrap}

body[data-ui-context="skins"] .skins-v77__detail-stats{display:flex;flex-direction:column;padding-top:58px}
body[data-ui-context="skins"] .skins-v77__power-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(122,200,245,.14)}
body[data-ui-context="skins"] .skins-v77__power-head span{font:1000 11px/1 'Exo 2',sans-serif;letter-spacing:.10em;color:#fff}
body[data-ui-context="skins"] .skins-v77__power-head strong{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,var(--skin-accent),var(--skin-accent-2));color:#07111e;font:1000 20px/1 'Exo 2',sans-serif;box-shadow:0 0 20px color-mix(in srgb,var(--skin-accent) 24%,transparent)}
body[data-ui-context="skins"] .skins-v77__metrics{display:grid;gap:10px;margin-top:14px}
body[data-ui-context="skins"] .skins-v77__metrics .skins-locker-v7__metric{display:grid;grid-template-columns:88px minmax(0,1fr) 20px;align-items:center;gap:8px;min-height:38px;padding:7px 8px;border:1px solid rgba(112,194,239,.12);border-radius:12px;background:rgba(5,16,35,.58)}
body[data-ui-context="skins"] .skins-v77__metrics .skins-locker-v7__metric>span{display:flex;align-items:center;gap:6px;color:#c9d8e8;font:900 10px/1 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__metrics .skins-locker-v7__metric>span i{width:20px;height:20px;display:grid;place-items:center;color:var(--skin-accent)}
body[data-ui-context="skins"] .skins-v77__metrics .skins-locker-v7__metric-icon{width:17px;height:17px}
body[data-ui-context="skins"] .skins-v77__metrics .skins-ref-v12__metric-track{height:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:none}
body[data-ui-context="skins"] .skins-v77__metrics .skins-ref-v12__metric-track b{height:100%;border-radius:3px;background:#1a304d;border:1px solid rgba(255,255,255,.03)}
body[data-ui-context="skins"] .skins-v77__metrics .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) 22%,transparent)}
body[data-ui-context="skins"] .skins-v77__metrics .skins-ref-v12__metric-value{color:#fff;font:1000 11px/1 'Exo 2',sans-serif;text-align:right}
body[data-ui-context="skins"] .skins-v77__tip{display:grid;grid-template-columns:30px 1fr;gap:8px;margin-top:12px;padding:10px;border:1px solid rgba(101,220,255,.14);border-radius:13px;background:rgba(10,32,56,.55)}
body[data-ui-context="skins"] .skins-v77__tip>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(101,220,255,.09);color:#65dcff}
body[data-ui-context="skins"] .skins-v77__tip-icon{width:17px;height:17px}
body[data-ui-context="skins"] .skins-v77__tip p{margin:0;color:#9fb3c9;font:800 9px/1.35 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__tip b{color:#dff7ff}
body[data-ui-context="skins"] .skins-v77__purchase{margin-top:auto;padding-top:14px;display:grid;grid-template-columns:1fr;gap:8px}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__price{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid rgba(255,209,102,.20);border-radius:13px;background:rgba(36,31,24,.48)}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__price span{font:1000 8px/1 'Exo 2',sans-serif;letter-spacing:.1em;color:#9f9279}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__price strong{display:flex;align-items:center;gap:5px;color:#ffe188;font:1000 15px/1 'Exo 2',sans-serif}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__inline-icon{width:18px;height:18px}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta{width:100%;min-height:52px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffe173,#ffc247);color:#261b04;font:1000 13px/1 'Exo 2',sans-serif;box-shadow:0 6px 0 #b87717,0 14px 26px rgba(255,188,52,.16);transition:.14s ease}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.05)}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta.is-equip{background:linear-gradient(180deg,#72f4c0,#45d99b);box-shadow:0 6px 0 #21865f,0 14px 26px rgba(69,217,155,.16)}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta.is-active{background:linear-gradient(180deg,#2a405b,#1c2d43);color:#78f0b6;box-shadow:none;border:1px solid rgba(104,239,177,.22)}
body[data-ui-context="skins"] .skins-v77__purchase .skins-locker-v7__cta.is-locked{background:linear-gradient(180deg,#26374d,#1b293c);color:#7f94aa;box-shadow:none}

/* celebration / toast stays above detail */
body[data-ui-context="skins"] .skins-v77 .shop-celebration{z-index:14}
body[data-ui-context="skins"] .skins-toast{z-index:9999}

/* responsive */
@media (max-width:1360px){
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-ui-context="skins"] .skins-v77__card{height:205px}
  body[data-ui-context="skins"] .skins-v77__detail{grid-template-columns:minmax(230px,.72fr) minmax(360px,1.15fr) minmax(250px,.78fr)}
  body[data-ui-context="skins"] .skins-v77__detail-info,body[data-ui-context="skins"] .skins-v77__detail-stats{padding:14px}
}
@media (max-width:1050px){
  body[data-ui-context="skins"]{overflow:auto!important}
  body[data-ui-context="skins"] .app{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  body[data-ui-context="skins"] .screen--skins:not(.hidden){height:auto!important;min-height:100dvh!important;overflow:visible!important}
  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-v77{height:auto;min-height:calc(100dvh - 24px);grid-template-rows:auto auto}
  body[data-ui-context="skins"] .skins-v77__collection{overflow:visible;grid-template-rows:auto auto auto}
  body[data-ui-context="skins"] .skins-v77__grid-scroll{overflow:visible}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-ui-context="skins"] .skins-v77__detail-layer{position:fixed;inset:0;overflow:auto;place-items:start center;padding:10px}
  body[data-ui-context="skins"] .skins-v77__detail{height:auto;min-height:calc(100dvh - 20px);grid-template-columns:1fr 1.12fr;grid-template-rows:minmax(480px,58vh) auto}
  body[data-ui-context="skins"] .skins-v77__detail-stage{grid-column:2;grid-row:1}
  body[data-ui-context="skins"] .skins-v77__detail-info{grid-column:1;grid-row:1}
  body[data-ui-context="skins"] .skins-v77__detail-stats{grid-column:1/-1;grid-row:2;padding-top:16px;overflow:visible}
  body[data-ui-context="skins"] .skins-v77__metrics{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body[data-ui-context="skins"] .screen--skins .skins-content{padding:7px!important}
  body[data-ui-context="skins"] .skins-v77{gap:7px}
  body[data-ui-context="skins"] .skins-v77__topbar{height:auto;min-height:62px;padding:7px;border-radius:16px}
  body[data-ui-context="skins"] .skins-v77__back{min-width:44px;width:44px;padding:0}
  body[data-ui-context="skins"] .skins-v77__back span{display:none}
  body[data-ui-context="skins"] .skins-v77__divider{display:none}
  body[data-ui-context="skins"] .skins-v77__title-lockup small{display:none}
  body[data-ui-context="skins"] .skins-v77__title-lockup strong{font-size:17px}
  body[data-ui-context="skins"] .skins-v77__title-icon{width:38px;height:38px}
  body[data-ui-context="skins"] .skins-v77__wallet{min-width:108px;height:44px;padding:0 9px}
  body[data-ui-context="skins"] .skins-v77__wallet-icon{width:27px;height:27px}
  body[data-ui-context="skins"] .skins-v77__collection{padding:10px;border-radius:18px}
  body[data-ui-context="skins"] .skins-v77__intro{align-items:flex-start}
  body[data-ui-context="skins"] .skins-v77__intro p{font-size:11px}
  body[data-ui-context="skins"] .skins-v77__collection-stat{flex-basis:148px;grid-template-columns:34px minmax(0,1fr);padding:8px}
  body[data-ui-context="skins"] .skins-v77__collection-stat>span{width:34px;height:34px}
  body[data-ui-context="skins"] .skins-v77__collection-stat small{display:none}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body[data-ui-context="skins"] .skins-v77__card{height:205px;border-radius:15px}
  body[data-ui-context="skins"] .skins-v77__detail{grid-template-columns:1fr;grid-template-rows:auto 440px auto;padding:9px;border-radius:20px}
  body[data-ui-context="skins"] .skins-v77__detail-info{grid-column:1;grid-row:1;padding:14px;padding-right:54px;overflow:visible}
  body[data-ui-context="skins"] .skins-v77__detail-stage{grid-column:1;grid-row:2;min-height:440px}
  body[data-ui-context="skins"] .skins-v77__detail-stats{grid-column:1;grid-row:3;padding:14px;overflow:visible}
  body[data-ui-context="skins"] .skins-v77__detail-desc{margin:10px 0}
  body[data-ui-context="skins"] .skins-v77__rank-card{margin-top:4px}
  body[data-ui-context="skins"] .skins-v77__metrics{grid-template-columns:1fr}
}
@media (max-width:520px){
  body[data-ui-context="skins"] .skins-v77__intro{display:block}
  body[data-ui-context="skins"] .skins-v77__collection-stat{margin-top:10px;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto}
  body[data-ui-context="skins"] .skins-v77__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body[data-ui-context="skins"] .skins-v77__card{height:190px}
  body[data-ui-context="skins"] .skins-v77__card-copy{display:block}
  body[data-ui-context="skins"] .skins-v77__card-copy small{display:block;margin:4px 0 0;max-width:100%}
  body[data-ui-context="skins"] .skins-v77__card-bottom em{display:none}
  body[data-ui-context="skins"] .skins-v77__detail-stage{min-height:390px}
  body[data-ui-context="skins"] .skins-v77__detail{grid-template-rows:auto 390px auto}
  body[data-ui-context="skins"] .skins-v77__hero-nav{width:36px;height:54px;margin-top:-27px}
}
@media (max-width:390px){
  body[data-ui-context="skins"] .skins-v77__wallet small{display:none}
  body[data-ui-context="skins"] .skins-v77__wallet{min-width:86px}
  body[data-ui-context="skins"] .skins-v77__title-icon{display:none}
  body[data-ui-context="skins"] .skins-v77__filter{min-width:88px}
  body[data-ui-context="skins"] .skins-v77__card{height:182px}
  body[data-ui-context="skins"] .skins-v77__card-copy strong{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  body[data-ui-context="skins"] .skins-v77__detail-layer,
  body[data-ui-context="skins"] .skins-v77__detail,
  body[data-ui-context="skins"] .skins-v77__stage-glow{animation:none!important}
  body[data-ui-context="skins"] .skins-v77__card,
  body[data-ui-context="skins"] .skins-v77__back,
  body[data-ui-context="skins"] .skins-v77__hero-nav{transition:none!important}
}