/* Equipment of a character (Ranking profile, Mercado character cards): a paper doll like the game's character window.
   Markup: assets/modules/ranking.php ajax=equip. The item window floats over the page (assets/js/south-era-gear.js). */
html .rank-equip-stage.se-gear {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  width: min(100%, 420px); height: auto; aspect-ratio: auto; margin: 0 auto; padding: 14px;
  border: 1px solid #d9bc8440; border-radius: 20px;
  background: radial-gradient(70% 60% at 50% 45%, #f0b54a14, transparent 70%), linear-gradient(180deg, #17141bf2, #0d0b10f2);
  box-shadow: 0 20px 50px #0009, inset 0 1px 0 #ffffff0d;
}
.se-gear-slot {
  --glow: #d9bc8433;
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; overflow: hidden;
  border: 1px solid var(--glow); border-radius: 14px;
  background: radial-gradient(60% 60% at 50% 45%, #2a231a, #0e0c11 75%);
  box-shadow: inset 0 0 0 1px #0008, inset 0 -18px 30px #0007;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.se-gear-art { position: relative; display: block; width: 78%; height: 78%; pointer-events: none; }
.se-gear-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px #000c); }
.se-gear-slot > img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 6px 10px #000c); pointer-events: none; }

/* Shine like the game (client RenderPartObjectEffect), cut to the item's own shape: .se-gear-shine is masked by the
   picture itself (inline style). Colours per item (south-era-item-glow.json): --g1 chrome, --g2 second chrome, --g3 ancient.
   +7/8 chrome c1 · +9/10 chrome + metal c1 · +11/12 adds chrome2 in c2 · +13/14/15 chrome4 in c2 (the +13 passes).
   Excellent items pulse (L, .3L, 1-L); ancient non-excellent items pulse c3 — at any level. */
.se-gear-shine { position: absolute; inset: 0; pointer-events: none; }
.se-gear-shine::before, .se-gear-shine::after { content: ''; position: absolute; inset: 0; }
/* Chrome: a moving glint in c1 (and c2 from +11) over a tint. */
.se-gear-slot[data-glow] .se-gear-shine::after {
  background: linear-gradient(115deg, transparent 36%, rgb(var(--g1) / var(--ga)) 45%, rgb(255 255 255 / var(--gw)) 50%, rgb(var(--gx, var(--g1)) / var(--ga)) 55%, transparent 64%) 0 0 / 300% 300%;
  mix-blend-mode: screen; animation: se-gear-glint var(--gs) linear infinite;
}
.se-gear-slot[data-glow] .se-gear-shine::before { background: rgb(var(--g1) / var(--gt)); mix-blend-mode: screen; }
@keyframes se-gear-glint { from { background-position: 100% 100%; } to { background-position: 0 0; } }
.se-gear-slot[data-glow="7"] { --gt: .12; --ga: .40; --gw: .22; --gs: 3.6s; }
.se-gear-slot[data-glow="9"] { --gt: .22; --ga: .55; --gw: .30; --gs: 3s; }
.se-gear-slot[data-glow="11"] { --gt: .26; --ga: .62; --gw: .38; --gs: 2.6s; --gx: var(--g2); }
.se-gear-slot[data-glow="11"] .se-gear-shine::before { background: linear-gradient(160deg, rgb(var(--g1) / .26), rgb(var(--g2) / .22)); }
.se-gear-slot[data-glow="13"] { --gt: .3; --ga: .72; --gw: .5; --gs: 2.2s; --gx: var(--g2); }
.se-gear-slot[data-glow="13"] .se-gear-shine::before { background: linear-gradient(160deg, rgb(var(--g2) / .34), rgb(var(--g1) / .3) 60%, rgb(var(--g2) / .3)); }
.se-gear-slot[data-glow="13"] .se-gear-art img { filter: drop-shadow(0 6px 10px #000c) drop-shadow(0 0 7px rgb(var(--g1) / .45)); }
/* Excellent: bright pass whose colour runs red-violet-blue; ancient (not excellent): c3 breathing. */
.se-gear-slot[data-fx="exc"] .se-gear-shine { mix-blend-mode: screen; animation: se-gear-exc 6.3s ease-in-out infinite; }
@keyframes se-gear-exc { 0%, 100% { background-color: rgb(255 77 0 / .16); } 25%, 75% { background-color: rgb(128 38 128 / .18); } 50% { background-color: rgb(0 0 255 / .22); } }
.se-gear-slot[data-fx="anc"] .se-gear-shine { mix-blend-mode: screen; animation: se-gear-anc 6.3s ease-in-out infinite; }
@keyframes se-gear-anc { 0%, 100% { background-color: rgb(var(--g3) / .08); } 50% { background-color: rgb(var(--g3) / .34); } }
@media (prefers-reduced-motion: reduce) {
  .se-gear-shine, .se-gear-shine::before, .se-gear-shine::after { animation: none !important; }
}
.se-gear-slot.has-item { cursor: pointer; outline: none; }
.se-gear-slot.has-item:hover, .se-gear-slot.has-item:focus-visible, .se-gear-slot.has-item.is-open {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--glow) 100%, #fff 0%); box-shadow: 0 0 0 1px var(--glow), 0 10px 26px #000a, 0 0 24px color-mix(in srgb, var(--glow) 60%, transparent);
}
/* Border = colour of the item's name in the game (excellent green, ancient, socket violet, +7 yellow...). */
.se-gear-slot[data-tc="3"] { --glow: #ffcc1999; }
.se-gear-slot[data-tc="4"], .se-gear-slot[data-tc="9"] { --glow: #19c81caa; }
.se-gear-slot[data-tc="1"] { --glow: #7fb2ffaa; }
.se-gear-slot[data-tc="12"], .se-gear-slot[data-tc="14"] { --glow: #b266ffaa; }
.se-gear-slot[data-tc="16"], .se-gear-slot[data-tc="19"], .se-gear-slot[data-tc="17"] { --glow: #00d0e0aa; }
.se-gear-slot[data-tc="13"] { --glow: #e56b0aaa; }
.se-gear-lvl {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(180deg, #ffc44d, #f08a12); color: #2b1503; font: 900 11px/16px Manrope, Arial, sans-serif;
  box-shadow: 0 2px 6px #0009;
}
.se-gear-label {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font: 800 10px/1.2 Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8f887c;
}
.se-gear-slot.is-empty { border-style: dashed; border-color: #ffffff17; background: #0d0c1080; box-shadow: none; }
.se-gear-slot.is-empty .se-gear-label { position: static; color: #5d5850; }
/* The item window lives inside each slot as data; the visible one is the floating copy. */
html .se-gear .rank-equip-tip { display: none !important; }
#se-gear-float { position: fixed; z-index: 10050; max-width: min(330px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #5d5a52 transparent; }
#se-gear-float[hidden] { display: none; }
@media (max-width: 420px) {
  html .rank-equip-stage.se-gear { gap: 7px; padding: 10px; border-radius: 16px; }
  .se-gear-label { font-size: 9px; letter-spacing: .04em; }
}
/* The floating copy is the visible window: older page styles for .rank-equip-tip (hidden, absolute) never apply to it. */
#se-gear-float > .rank-equip-tip { display: block !important; position: static !important; inset: auto !important; transform: none !important; z-index: auto !important; margin: 0 !important; }