/* THE VAULT (static/js/sys/vault.js): the hangar of caches, the collection, the Workshop, the seal, the
   ceremony, and the nameplates and titles it puts on names. The BRUNET COMMAND holo language at full
   volume: mono type, glass panels, scan lines, holo cyan and amber, and one colour per rarity.
   Looping animations run only on small elements or inside the ceremony, never on a big panel. */
:root {
  --r-common: #a9bccd; --r-rare: #4fe3ff; --r-epic: #b06bff; --r-legendary: #ffc23d; --r-mythic: #ff4fd8;
  --prism: linear-gradient(90deg, #ff4f6a, #ffb020, #fff36a, #4fff9a, #4fe3ff, #7a6aff, #ff4fd8, #ff4f6a);
}
.r-common { --rc: var(--r-common); } .r-rare { --rc: var(--r-rare); } .r-epic { --rc: var(--r-epic); }
.r-legendary { --rc: var(--r-legendary); } .r-mythic { --rc: var(--r-mythic); }

/* ---------------------------------------------------------------- nameplates and titles (chat, profile, OPS) */
.np { font-weight: 700; }
.np-slate { color: #b8c6d4; } .np-sand { color: #e6cf98; } .np-steel { color: #c4ccd6; text-shadow: 0 1px 0 #23303d; }
.np-olive { color: #a7b86a; } .np-dusk { color: #b9a6e6; }
.np-ember { color: #ff8a30; } .np-frost { color: #9fe8ff; } .np-lime { color: #9dff6a; } .np-rose { color: #ff8ac0; }
.np-sunset, .np-aurora, .np-toxic, .np-blood, .np-holo, .np-gilded, .np-plasma, .np-prism, .np-glitch { -webkit-background-clip: text; background-clip: text; color: transparent; }
.np-sunset { background-image: linear-gradient(90deg, #ffb020, #ff5a8a); }
.np-aurora { background-image: linear-gradient(90deg, #4fe3ff, #9a6aff); }
.np-toxic { background-image: linear-gradient(90deg, #b6ff3a, #2bd6b8); }
.np-blood { background-image: linear-gradient(90deg, #ff4a4a, #a00030); }
.np-holo { background-image: linear-gradient(100deg, #4fe3ff 20%, #e9fdff 40%, #4fe3ff 60%); background-size: 220% 100%; animation: npShine 3.2s linear infinite; text-shadow: none; filter: drop-shadow(0 0 4px rgba(79, 227, 255, .45)); }
.np-gilded { background-image: linear-gradient(100deg, #c98a1a 15%, #fff1b0 38%, #ffc23d 55%, #c98a1a 80%); background-size: 220% 100%; animation: npShine 2.6s linear infinite; filter: drop-shadow(0 0 4px rgba(255, 194, 61, .45)); }
.np-plasma { background-image: linear-gradient(90deg, #ff4fd8, #7a3aff, #4fe3ff, #ff4fd8); background-size: 300% 100%; animation: npShine 4s linear infinite; filter: drop-shadow(0 0 5px rgba(176, 107, 255, .55)); }
.np-prism { background-image: var(--prism); background-size: 300% 100%; animation: npShine 3s linear infinite; filter: drop-shadow(0 0 5px rgba(255, 79, 216, .45)); }
.np-glitch { background-image: linear-gradient(90deg, #e9fdff, #e9fdff); position: relative; animation: npGlitch 2.4s steps(1) infinite; }
@keyframes npShine { to { background-position: -220% 0; } }
@keyframes npGlitch { 0%, 86%, 100% { text-shadow: none; filter: none; } 88% { filter: drop-shadow(2px 0 0 #ff2a6a) drop-shadow(-2px 0 0 #2ae9ff); } 92% { filter: drop-shadow(-2px 0 0 #ff2a6a) drop-shadow(2px 0 0 #2ae9ff); } 95% { filter: none; } }
.np-title { display: inline-block; margin-left: 6px; padding: 0 6px; font: 700 9px/15px var(--mono); letter-spacing: .14em; vertical-align: 1px;
  color: var(--rc, #9fb3c8); border: 1px solid currentColor; border-radius: 3px; background: rgba(6, 10, 18, .6); }
@media (prefers-reduced-motion: reduce) { .np-holo, .np-gilded, .np-plasma, .np-prism, .np-glitch { animation: none; } }

/* insignia beside a name, the pilot card, PROFILE, finishers, drawn art */
.np-ins { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; filter: drop-shadow(0 0 3px rgba(79, 227, 255, .35)); }
.np-title.r-rare { color: var(--r-rare); } .np-title.r-epic { color: var(--r-epic); } .np-title.r-legendary { color: var(--r-legendary); box-shadow: 0 0 6px rgba(255, 194, 61, .35); }
.np-title.r-mythic { color: var(--r-mythic); border-image: var(--prism) 1; }
[data-pilot] { cursor: pointer; }
.vx-pilot { position: fixed; z-index: 66; width: 300px; padding: 12px 14px; border: 1px solid var(--holo-dim); border-radius: 8px; background: rgba(6, 10, 18, .96);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 20px rgba(79, 227, 255, .12); font-family: var(--mono); color: #e9f4fa; }
.vx-pilot.hidden { display: none; }
.vx-px { position: absolute; top: 6px; right: 6px; padding: 0 6px; }
.vx-pc { display: grid; grid-template-columns: 56px 1fr 52px; gap: 10px; align-items: center; margin-bottom: 10px; }
.vx-pi { width: 56px; height: 56px; } .vx-pi.none { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--holo-dim); border: 1px dashed var(--holo-dim); border-radius: 50%; }
.vx-ps { width: 52px; height: 52px; }
.vx-pn { font-size: 15px; }
.vx-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vx-shelf > div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--rc, #a9bccd) 50%, transparent); border-radius: 6px; background: #0a121c; overflow: hidden; }
.vx-shelf img, .vx-shelf svg { width: 90%; height: 90%; }
.vx-shelf.big { max-width: 520px; }
.vx-svg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.vx-svg svg { width: auto; height: 100%; max-width: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.vx-svg.tall svg { height: 100%; }
.pf-vault { margin-bottom: 12px; }
.pf-wear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pf-w { padding: 8px 6px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); border-radius: 8px; text-align: center; background: #0a121c; }
.pf-w .vx-art { height: 64px; }
.pf-w em { display: block; font: 9px var(--mono); letter-spacing: .14em; color: var(--holo); font-style: normal; margin-top: 4px; }
.pf-w b { display: block; font: 700 10px var(--mono); color: #e9f4fa; }
.vx-fin { position: fixed; inset: 0; z-index: 72; pointer-events: none; }
.vx-fin canvas { width: 100%; height: 100%; }
.vx-fin-t { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font: 700 52px var(--mono); letter-spacing: .3em; color: #fff; text-shadow: 0 0 24px var(--holo);
  animation: vxFinT 2.4s ease-out forwards; }
.vx-fin-t.goldrush { color: #ffe08a; text-shadow: 0 0 26px #ffc23d; } .vx-fin-t.aurora { color: #c9ffd0; text-shadow: 0 0 26px #7dff8a; }
.vx-fin-t.glitch { color: #fff; animation: vxFinT 2.4s ease-out forwards, npGlitch .6s steps(1) infinite; } .vx-fin-t.supernova { color: #fff6d0; text-shadow: 0 0 30px #ff8a30; }
@keyframes vxFinT { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.bet-card.back[style*="background-image"] { border-color: #4fe3ff66; }
.blip img.blip-ship { border-radius: 0; background: none; transform: rotate(0deg); filter: drop-shadow(0 0 4px rgba(79, 227, 255, .6)); }
@media (max-width: 820px) { .pf-wear { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vx-fin-t { font-size: 30px; } }

/* ---------------------------------------------------------------- the tab */
#tab-vault .vx-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.vx-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vx-stat { display: flex; flex-direction: column; font-family: var(--mono); }
.vx-stat em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--holo); }
.vx-stat b { font-size: 20px; color: var(--amber); line-height: 1.1; }
.vx-stat span { font-size: 10px; color: #8ea0ad; }
.vx-pity { display: grid; gap: 4px; min-width: 220px; font: 10px var(--mono); letter-spacing: .1em; color: #b9c7d2; }
.vx-pity i { display: block; height: 5px; border-radius: 3px; background: #142130; overflow: hidden; }
.vx-pity i u { display: block; height: 100%; background: linear-gradient(90deg, var(--r-epic), var(--r-legendary)); }

.vx-hangar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.vx-bay { position: relative; padding: 14px 12px 12px; border: 1px solid var(--holo-dim); border-radius: 8px; overflow: hidden; text-align: center;
  background: radial-gradient(120% 80% at 50% 100%, rgba(79, 227, 255, .12), transparent 60%), linear-gradient(#0b1520, #070d15); }
.vx-bay::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(79, 227, 255, .045) 0 1px, transparent 1px 4px); pointer-events: none; }
.vx-bay h4 { margin: 0 0 2px; font: 700 12px var(--mono); letter-spacing: .18em; color: #e9f4fa; }
.vx-bay p { margin: 0 0 8px; font: 10px var(--mono); color: #7f93a3; min-height: 26px; }
.vx-bay .vx-n { font: 700 34px var(--mono); color: var(--amber); text-shadow: 0 0 14px rgba(255, 176, 32, .35); }
.vx-bay.empty .vx-n { color: #3b4b5a; text-shadow: none; }
.vx-bay .quick { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.vx-bay button { font: 700 11px var(--mono); letter-spacing: .12em; }
.vx-bay button.vx-open { background: linear-gradient(#ffb020, #e07a00); color: #140a00; border-color: #ffcf66; box-shadow: 0 0 14px rgba(255, 176, 32, .35); }
.vx-bay button:disabled { opacity: .35; box-shadow: none; }
/* (the cases' card) TO LONG STREET is a link styled as the bay's amber key (it was the browser's purple underline) */
.vx-bay .quick { flex-wrap: wrap; align-items: stretch; }
.vx-bay a.vx-open { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid #ffcf66; border-radius: 3px; background: linear-gradient(#ffb020, #e07a00); color: #140a00; font: 700 11px var(--mono); letter-spacing: .12em; text-decoration: none; box-shadow: 0 0 14px rgba(255, 176, 32, .35); }
.vx-bay a.vx-open:hover, .vx-bay a.vx-open:focus-visible { filter: brightness(1.12); outline: none; }
.vx-bay a.vx-open:visited { color: #140a00; }
/* a little cache on its pad, gently turning (small, so it may loop) */
.vx-mini { position: relative; width: 70px; height: 70px; margin: 4px auto 6px; perspective: 400px; }
.vx-mini .vx-cube { --s: 46px; position: absolute; left: 12px; top: 6px; animation: vxTurn 9s linear infinite; }
.vx-bay.empty .vx-mini .vx-cube { animation: none; opacity: .25; }
.vx-mini::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 10px; border-radius: 50%; background: radial-gradient(rgba(79, 227, 255, .5), transparent 70%); }
@keyframes vxTurn { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }

/* the cube, shared by the bays and the ceremony */
.vx-cube { --s: 180px; --c: var(--holo); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; }
.vx-cube > i { position: absolute; inset: 0; border: 2px solid var(--c); background: linear-gradient(135deg, rgba(79, 227, 255, .14), rgba(8, 16, 26, .92) 60%);
  box-shadow: inset 0 0 calc(var(--s) * .2) rgba(79, 227, 255, .18), 0 0 calc(var(--s) * .08) var(--c); display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: calc(var(--s) * .38); color: var(--c); backface-visibility: visible; }
.vx-cube > i::after { content: ""; position: absolute; inset: 14%; border: 1px dashed rgba(255, 255, 255, .18); }
.vx-cube > i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.vx-cube > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.vx-cube > i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.vx-cube > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.vx-cube > i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.vx-cube > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.vx-log { display: grid; gap: 4px; }
.vx-log div { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; font: 11px var(--mono); padding: 3px 6px; border-left: 2px solid var(--rc); background: rgba(255, 255, 255, .02); }
.vx-log b { color: var(--rc); } .vx-log em { font-style: normal; color: #7f93a3; }

/* the collection */
.vx-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.vx-filters button { font: 700 10px var(--mono); letter-spacing: .12em; padding: 4px 8px; }
.vx-filters button.on { background: var(--holo); color: #04060b; }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vx-item { position: relative; padding: 10px 8px 8px; border-radius: 8px; text-align: center; cursor: pointer; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), #0a121c; transition: transform .15s, box-shadow .15s; }
.vx-item:hover { transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); }
.vx-item.locked { filter: grayscale(.85) brightness(.55); }
.vx-item.locked .vx-art { opacity: .35; }
.vx-item.worn::before { content: "WORN"; position: absolute; top: 5px; right: 5px; font: 700 8px var(--mono); letter-spacing: .14em; color: #04060b; background: var(--rc); padding: 1px 4px; border-radius: 2px; }
.vx-item b { display: block; font: 700 11px var(--mono); color: #e9f4fa; margin-top: 6px; line-height: 1.25; }
.vx-item em { display: block; font: 9px var(--mono); letter-spacing: .14em; color: var(--rc); font-style: normal; margin-top: 2px; }
.vx-item.r-legendary { box-shadow: 0 0 10px rgba(255, 194, 61, .18); } .vx-item.r-mythic { border-image: var(--prism) 1; }
.vx-art { height: 56px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.vx-art .sw { width: 52px; height: 30px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); }
.vx-art .ring { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--c, #fff); box-shadow: 0 0 10px var(--c, #fff); }
.vx-art .ring.prism { border-color: transparent; background: conic-gradient(#ff4f6a, #ffb020, #4fff9a, #4fe3ff, #7a6aff, #ff4fd8, #ff4f6a) border-box; -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); }
.vx-art .plaque { font: 700 10px var(--mono); letter-spacing: .14em; padding: 5px 8px; border: 1px solid var(--rc); color: var(--rc); background: rgba(0, 0, 0, .3); max-width: 108px; }
.vx-art .plate { font: 700 16px var(--mono); }
.vx-sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vx-set { font: 10px var(--mono); color: #b9c7d2; letter-spacing: .1em; }
.vx-set i { display: block; height: 4px; background: #142130; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.vx-set i u { display: block; height: 100%; background: var(--holo); }

/* item detail (the Workshop and the collection) */
.vx-detail { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.vx-detail .vx-item { cursor: default; }
.vx-detail .vx-art { height: 110px; font-size: 64px; }
.vx-detail p { margin: 4px 0; }
.vx-seal code { display: block; word-break: break-all; font: 11px var(--mono); color: var(--holo); padding: 6px 8px; background: rgba(79, 227, 255, .05); border: 1px solid var(--holo-dim); }
.vx-seal .ok { color: #7dff8a; } .vx-seal .bad { color: #ff8a7a; }
.vx-badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--amber); color: #140a00; font: 700 10px/16px var(--mono); text-align: center; }
.vx-badge:empty { display: none; }

@media (max-width: 820px) {
  .vx-hangar, .vx-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-vault .vx-head { grid-template-columns: 1fr; }
  .vx-detail { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the ceremony */
.vx-stage { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1100px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(20, 40, 60, .55), rgba(2, 4, 8, .96) 70%), #02040a; font-family: var(--mono); color: #e9f4fa; user-select: none; }
.vx-stage.hidden { display: none; }
.vx-stage::before { content: ""; position: absolute; inset: -50%; background:
  linear-gradient(rgba(79, 227, 255, .07) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(79, 227, 255, .07) 1px, transparent 1px) 0 0 / 46px 46px;
  transform: rotateX(62deg) translateY(10%); animation: vxGrid 6s linear infinite; mask-image: radial-gradient(closest-side, #000, transparent); }
@keyframes vxGrid { to { background-position: 0 46px, 0 0; } }
.vx-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.vx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.vx-top { position: absolute; top: 18px; left: 0; right: 0; text-align: center; z-index: 5; }
.vx-top .k { font-size: 11px; letter-spacing: .4em; color: var(--holo); }
.vx-top .t { font-size: 22px; font-weight: 700; letter-spacing: .2em; margin-top: 4px; }
.vx-skip { position: absolute; top: 16px; right: 18px; z-index: 6; font: 700 11px var(--mono) !important; letter-spacing: .16em; }
.vx-rig { position: relative; z-index: 2; width: 420px; height: 420px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.vx-rig .vx-cube { --s: 190px; }
/* the dock (a wrapper: slides in, shakes while you charge) and the cube inside it (turns) never fight over transform */
.vx-dockw { transform-style: preserve-3d; }
.vx-dockw.dock { animation: vxDock 1.1s cubic-bezier(.2, .9, .25, 1.05) both; }
@keyframes vxDock { from { transform: translateY(-120vh) rotateZ(-25deg) scale(.55); } to { transform: none; } }
.vx-rig .vx-cube { animation: vxIdle 7s linear infinite; }
@keyframes vxIdle { from { transform: rotateX(-18deg) rotateY(25deg); } to { transform: rotateX(-18deg) rotateY(385deg); } }
.vx-dockw.charge { animation: vxCharge .08s linear infinite; }
@keyframes vxCharge { 0% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--sh) * 1px), calc(var(--sh) * -1px)); }
  50% { transform: translate(calc(var(--sh) * -1px), 0); } 75% { transform: translate(0, calc(var(--sh) * 1px)); } }
.vx-rig .vx-cube.burst { animation: none; transform: rotateX(-18deg) rotateY(25deg); }
.vx-rig .vx-cube.burst > i { transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .7s; opacity: 0; }
.vx-rig .vx-cube.burst > i:nth-child(1) { transform: translateZ(600px) rotateX(40deg); } .vx-rig .vx-cube.burst > i:nth-child(2) { transform: rotateY(180deg) translateZ(600px); }
.vx-rig .vx-cube.burst > i:nth-child(3) { transform: rotateY(90deg) translateZ(600px) rotateZ(30deg); } .vx-rig .vx-cube.burst > i:nth-child(4) { transform: rotateY(-90deg) translateZ(600px); }
.vx-rig .vx-cube.burst > i:nth-child(5) { transform: rotateX(90deg) translateZ(600px); } .vx-rig .vx-cube.burst > i:nth-child(6) { transform: rotateX(-90deg) translateZ(600px); }
.vx-beam { position: absolute; left: 10%; right: 10%; height: 4px; top: 50%; z-index: 4; border-radius: 4px; background: var(--bc, var(--holo));
  box-shadow: 0 0 18px 6px var(--bc, var(--holo)), 0 0 60px 10px color-mix(in srgb, var(--bc, #4fe3ff) 50%, transparent); opacity: 0; pointer-events: none; }
.vx-beam.on { animation: vxScan 1.15s ease-in-out infinite alternate; opacity: 1; }
@keyframes vxScan { from { top: 22%; } to { top: 78%; } }
.vx-tease { position: absolute; bottom: 70px; left: 0; right: 0; text-align: center; z-index: 5; font-size: 12px; letter-spacing: .5em; color: var(--bc, var(--holo)); text-shadow: 0 0 12px var(--bc, var(--holo)); }
.vx-hold { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; width: 300px; padding: 12px 16px; text-align: center; border: 1px solid var(--holo-dim);
  background: rgba(6, 12, 20, .8); border-radius: 6px; font: 700 12px var(--mono); letter-spacing: .3em; color: var(--holo); cursor: pointer; touch-action: none; }
.vx-hold i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--bc, var(--holo)); box-shadow: 0 0 10px var(--bc, var(--holo)); }
.vx-hold.hidden { display: none; }
.vx-shock { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 3px solid var(--bc, #fff); z-index: 4; pointer-events: none; animation: vxShock .8s ease-out forwards; }
@keyframes vxShock { to { transform: scale(60); opacity: 0; border-width: 1px; } }
.vx-rays { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--bc, #ffc23d) 35%, transparent) 0 6deg, transparent 6deg 18deg); mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); animation: vxSpin 24s linear infinite; }
.vx-rays.on { opacity: 1; }
@keyframes vxSpin { to { transform: rotate(360deg); } }

/* the cards */
.vx-cards { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vx-card { --w: 230px; position: absolute; width: var(--w); height: calc(var(--w) * 1.42); transform-style: preserve-3d; pointer-events: auto;
  transition: transform .75s cubic-bezier(.2, .9, .25, 1.1), left .6s, top .6s; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--a, 0deg)) rotateY(180deg) scale(var(--sc, 1)); }
.vx-card.up { transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--a, 0deg)) rotateY(0deg) scale(var(--sc, 1)); }
.vx-card.hero { --sc: 1.18; z-index: 3; }
.vx-card > div { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; overflow: hidden; }
.vx-card .back { transform: rotateY(180deg); border: 2px solid var(--holo-dim); background:
  repeating-linear-gradient(45deg, rgba(79, 227, 255, .06) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 50%, #12304a, #060c14 70%);
  display: flex; align-items: center; justify-content: center; font-size: 54px; color: var(--holo); text-shadow: 0 0 18px var(--holo); }
.vx-card .front { border: 2px solid var(--rc); background: radial-gradient(90% 60% at 50% 32%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), linear-gradient(#0e1a27, #070d15);
  box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 30px color-mix(in srgb, var(--rc) 18%, transparent); display: flex; flex-direction: column; align-items: center; padding: 14px 12px; text-align: center; }
.vx-card.r-mythic .front { border-color: transparent; background: radial-gradient(90% 60% at 50% 32%, rgba(255, 79, 216, .3), transparent 70%), linear-gradient(#0e1a27, #070d15) padding-box, var(--prism) border-box; }
.vx-card .front .rk { font-size: 10px; letter-spacing: .4em; color: var(--rc); }
.vx-card .front .vx-art { height: 140px; font-size: 76px; margin: 8px 0; }
.vx-card .front h3 { margin: 0; font: 700 16px var(--mono); letter-spacing: .08em; }
.vx-card .front .meta { font-size: 10px; color: #8ea0ad; letter-spacing: .1em; margin-top: 6px; }
.vx-card .front .stamp { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: .2em; padding: 4px 8px; border-radius: 3px; }
.vx-card .front .stamp.new { background: var(--rc); color: #04060b; }
.vx-card .front .stamp.dup { border: 1px dashed #8ea0ad; color: #b9c7d2; }
/* foil on the rare ones */
.vx-card.r-epic .front::after, .vx-card.r-legendary .front::after, .vx-card.r-mythic .front::after { content: ""; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .05) 52%, transparent 60%); animation: vxFoil 2.8s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes vxFoil { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.vx-card.r-mythic .front h3 { animation: npGlitch 1.8s steps(1) infinite; }
.vx-banner { position: absolute; top: 14%; left: 0; right: 0; z-index: 5; text-align: center; font: 700 44px var(--mono); letter-spacing: .3em; color: var(--bc); text-shadow: 0 0 24px var(--bc);
  opacity: 0; transform: scale(2.4); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; pointer-events: none; }
.vx-banner.on { opacity: 1; transform: scale(1); }
.vx-banner.mythic { background: var(--prism); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: npShine 2s linear infinite; text-shadow: none; filter: drop-shadow(0 0 16px rgba(255, 79, 216, .6)); }
.vx-actions { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 6; display: flex; gap: 10px; justify-content: center; }
.vx-actions button { font: 700 12px var(--mono) !important; letter-spacing: .18em; padding: 10px 18px; }
.vx-actions .vx-wear { background: linear-gradient(#ffb020, #e07a00); color: #140a00; border-color: #ffcf66; }
.vx-summary { position: absolute; bottom: 80px; left: 0; right: 0; z-index: 5; text-align: center; font-size: 12px; letter-spacing: .14em; color: #b9c7d2; }
.vx-summary b { color: var(--amber); }
.vx-stage .shake { animation: vxShake .45s; }
@keyframes vxShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-9px, 4px); } 40% { transform: translate(8px, -6px); } 60% { transform: translate(-6px, 6px); } 80% { transform: translate(5px, -3px); } }
@media (max-width: 820px) { .vx-rig { width: 300px; height: 300px; } .vx-rig .vx-cube { --s: 140px; } .vx-card { --w: 180px; } .vx-banner { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .vx-stage::before, .vx-rays, .vx-card .front::after { animation: none; } }
/* polish: the card's art reads at a glance, one primary action */
.vx-card .front .vx-art .plate { font-size: 34px; }
.vx-card .front .vx-art .plaque { font-size: 15px; padding: 8px 12px; max-width: none; }
.vx-card .front .vx-art .sw { width: 120px; height: 64px; }
.vx-card .front .vx-art .ring { width: 90px; height: 90px; border-width: 7px; }
.vx-card .front .rk { letter-spacing: .25em; white-space: nowrap; }
.vx-actions button:not(.vx-wear) { background: rgba(6, 12, 20, .7) !important; color: var(--holo) !important; border: 1px solid var(--holo-dim) !important; }
.vx-skip { background: rgba(6, 12, 20, .7) !important; color: var(--holo) !important; border: 1px solid var(--holo-dim) !important; }
/* card text scales with the card, so a fan of six on a laptop still reads */
.vx-card .front { padding: calc(var(--w) * .06) calc(var(--w) * .05); }
.vx-card .front .rk { font-size: max(8px, calc(var(--w) * .042)); }
.vx-card .front h3 { font-size: max(11px, calc(var(--w) * .07)); }
.vx-card .front .meta { font-size: max(8px, calc(var(--w) * .04)); }
.vx-card .front .stamp { font-size: max(8px, calc(var(--w) * .046)); }
.vx-card .front .vx-art { height: calc(var(--w) * .6); font-size: calc(var(--w) * .33); }
.vx-shelf > span { grid-column: 1 / -1; }
.pf-vault { padding: 12px 14px; }

/* ---- PHASE 3: perks, unlocks, the Black Site ---- */
.vx-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.vx-perk { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--holo-dim); border-radius: 6px; background: rgba(6, 12, 20, .6); }
.vx-perk.locked { opacity: .62; }
.vx-perk.on { border-color: var(--amber); box-shadow: 0 0 14px var(--glow); }
.vx-perk .vx-art { position: relative; width: 84px; height: 84px; }
.vx-perk .vx-art svg { width: 84px; height: 84px; }
.vx-perk .vx-x { position: absolute; right: -2px; bottom: -2px; font: 700 13px var(--mono); color: var(--amber); background: rgba(5, 8, 14, .9); border: 1px solid var(--amber); border-radius: 4px; padding: 0 5px; }
.vx-perk em { font-style: normal; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--mute); }
.vx-perk p { margin: 4px 0 6px; font-size: 12px; }
.vx-perk .ok, .vx-detail .ok { color: #7dff8a; }
.vx-unlocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vx-unlock { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.vx-unlock h3 { margin: 2px 0 4px; font: 700 16px var(--mono); letter-spacing: .12em; color: var(--amber); }
.vx-unlock:not(.open) { filter: saturate(.4); }
.vx-unlock:not(.open) h3 { color: var(--mute); }
.vx-bar { display: block; height: 5px; margin: 6px 0 2px; background: rgba(79, 227, 255, .1); border-radius: 3px; overflow: hidden; }
.vx-bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--holo), var(--amber)); }
.vx-bs-btn { color: #ff4fd8 !important; }
.vx-bs-card { border-color: #ff4fd8; background: repeating-linear-gradient(135deg, rgba(255, 79, 216, .05) 0 8px, transparent 8px 16px), rgba(8, 4, 12, .9); }
.vx-bs-card .label { color: #ff4fd8; }
@media (max-width: 560px) { .vx-perk { grid-template-columns: 64px 1fr; } .vx-perk .vx-art, .vx-perk .vx-art svg { width: 64px; height: 64px; } .vx-unlock { grid-template-columns: 72px 1fr; } }

/* NIGHT OPS: the red night-vision deck astronomers keep their eyes dark-adapted with (an unlock, never sold) */
:root.night-ops { --holo: #ff5a4a; --holo-dim: rgba(255, 90, 74, .2); --hub-bg: rgba(10, 3, 3, .92); --text: #ffcfc6; --mute: #8a4a42; --bg: #050101; --card: rgba(18, 6, 6, .88); --line: #3a1410; }
:root.night-ops body { background: #050101; }

/* ---- PHASE 4: the CODEX binder ---- */
.vx-csets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.vx-cset { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 8px 10px 10px !important; overflow: hidden; text-align: left;
  background: rgba(6, 12, 20, .7) !important; color: var(--holo) !important; border: 1px solid var(--holo-dim) !important; border-radius: 6px !important; box-shadow: none !important; }
.vx-cset b { font: 700 11px var(--mono); letter-spacing: .12em; }
.vx-cset em { font-style: normal; font: 700 10px var(--mono); color: var(--mute); }
.vx-cset i { font: 700 8px var(--mono); letter-spacing: .14em; color: var(--amber); font-style: normal; }
.vx-cset u { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--holo), var(--amber)); }
.vx-cset.on { border-color: var(--amber) !important; box-shadow: 0 0 12px var(--glow) !important; color: var(--amber) !important; }
.vx-cset.done b { color: #ffc23d; }
.vx-creward { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 8px 10px; margin-bottom: 12px; border: 1px dashed var(--holo-dim); border-radius: 6px; }
.vx-creward.done { border-style: solid; border-color: #ffc23d; }
.vx-creward p { margin: 2px 0 0; font-size: 12px; }
.vx-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vx-ccard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 100 / 140; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; transition: transform .15s; }
.vx-ccard:hover { transform: translateY(-3px) scale(1.03); }
.vx-ccard .vx-svg, .vx-ccard .vx-svg svg { width: 100%; height: 100%; }
.vx-ccard.on { filter: drop-shadow(0 0 10px var(--amber)); }
.vx-ccard.missing { border: 1px dashed rgba(169, 188, 205, .25) !important; border-radius: 8px; background: rgba(6, 11, 18, .7) !important; }
.vx-ccard.missing b { font: 700 9px var(--mono); letter-spacing: .08em; color: var(--mute); text-align: center; padding: 0 6px; }
.vx-ccard.missing em { font-style: normal; font: 700 8px var(--mono); letter-spacing: .14em; color: #4a5866; }
.vx-cblank { font: 700 34px var(--mono); color: #2a3642; }
.vx-cblank.big { font-size: 90px; display: grid; place-items: center; width: 186px; height: 260px; border: 1px dashed #2a3642; border-radius: 12px; }
.vx-cview { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 10px; margin-bottom: 14px; border: 1px solid var(--holo-dim); border-radius: 8px; background: rgba(6, 12, 20, .6); }
.vx-cview h3 { margin: 4px 0 6px; font: 700 18px var(--mono); letter-spacing: .1em; color: var(--amber); }
.vx-cview .vx-cbig svg { width: 186px; height: 260px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.vx-cview.r-legendary .vx-cbig svg, .vx-cview.r-mythic .vx-cbig svg { filter: drop-shadow(0 0 16px rgba(255, 194, 61, .45)); }
.ring.codex { display: inline-block; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px #4fe3ff, 0 0 12px #4fe3ff; animation: codexfr2 4s ease-in-out infinite; }
@keyframes codexfr2 { 50% { box-shadow: 0 0 0 3px #ffc23d, 0 0 14px #ffc23d; } }
@media (max-width: 560px) { .vx-cview { grid-template-columns: 1fr; justify-items: center; } .vx-cgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
.vx-season { color: var(--amber); }

/* ---- PHASE 5: the squad ---- */
.vx-fits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.vx-fit { padding: 10px; border: 1px solid var(--holo-dim); border-radius: 8px; background: rgba(6, 12, 20, .65); display: flex; flex-direction: column; gap: 8px; }
.vx-fit.mine { border-color: var(--amber); box-shadow: 0 0 12px var(--glow); }
.vx-fit.me { border-style: dashed; }
.vx-fit-h { display: grid; grid-template-columns: 40px 1fr 44px; gap: 8px; align-items: center; min-height: 44px; }
.vx-fit-i { width: 40px; height: 40px; } .vx-fit-s { width: 44px; height: 44px; }
.vx-fit .vx-shelf { min-height: 52px; }
.vx-fit-f { display: flex; align-items: center; gap: 6px; }
.vx-fit-f b { font: 700 20px var(--mono); color: var(--amber); }
.vx-fit-f span { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--mute); flex: 1; }
.vx-fit-f em { font-style: normal; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--holo); }
.vx-bar.big { height: 9px; margin: 8px 0 4px; }
.vx-tros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.vx-tro { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border-radius: 6px; }
.vx-tro svg { width: 72px; height: 72px; }
.vx-tro.locked svg { opacity: .3; filter: grayscale(1); }
.vx-tro b { font: 700 10px var(--mono); letter-spacing: .06em; }
.vx-tro em { font-style: normal; font: 700 8px var(--mono); letter-spacing: .14em; color: var(--mute); }

/* THE ARMORY (vault.js paintArmory, ArmoryArt): the case bay, the case's insides, your skins, the crafting */
.vx-svg.wide svg { width: 100%; height: auto; max-width: 220px; }
.vx-casebay .vx-mini svg { width: 96px; height: auto; }
.vx-casehero { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 16px; align-items: center; }
.vx-casehero svg { width: 100%; height: auto; max-width: 220px; margin: 0 auto; display: block; }
.vx-inside { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.vx-odds { border-left: 3px solid var(--rc, #9aa4b4); padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; font: 11px var(--mono); color: #b8c6d2; }
.vx-odds em { font-style: normal; font-weight: 700; color: var(--rc, #9aa4b4); letter-spacing: .12em; }
.vx-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vx-skin { border: 1px solid var(--holo-dim); border-top: 2px solid var(--rc, #9aa4b4); border-radius: 6px; padding: 10px; background: rgba(6, 12, 20, .65); display: flex; flex-direction: column; gap: 4px; }
.vx-skin.on { box-shadow: 0 0 0 1px var(--rc, #9aa4b4) inset; }
.vx-skin b { font: 700 11px var(--mono); color: var(--rc, #e9f4fa); letter-spacing: .06em; }
.vx-skin small { font: 10px var(--mono); color: #7f93a3; }
.vx-skin small i { color: var(--amber); font-style: normal; }
.vx-skcrafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.vx-skcraft { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-left: 3px solid var(--rc, #9aa4b4) !important; text-align: left; }
.vx-skcraft b { color: var(--rc, #e9f4fa); }
.vx-skcraft span { font-size: 10px; opacity: .8; }
@media (max-width: 620px) { .vx-casehero { grid-template-columns: 1fr; } }

/* (ARMORY v2) THE LOCKER at a glance on the ARMORY tab */
.vx-locker .vx-lstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0; }
.vx-locker .vx-lstats div { padding: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.vx-locker .vx-lstats b { display: block; font: 700 16px var(--mono); color: var(--holo, #e9f4fa); }
.vx-locker .vx-lstats small { font: 9px var(--mono); letter-spacing: .12em; opacity: .7; }
.vx-locker .vx-cols { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 10px; }
.vx-colbar { display: grid; grid-template-columns: 160px 1fr 60px; gap: 10px; align-items: center; font: 10px var(--mono); letter-spacing: .1em; }
.vx-colbar i { height: 6px; background: rgba(255,255,255,.06); position: relative; }
.vx-colbar u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber, #ffb347); }
.vx-colbar b { text-align: right; }
@media (max-width: 760px) { .vx-locker .vx-lstats { grid-template-columns: repeat(2, 1fr); } .vx-colbar { grid-template-columns: 110px 1fr 50px; } }