/* Clube VIP (client/vip.mjs): herói, benefícios, planos, cor do nome e baú mensal. */
.vipclub { width: min(1180px, 97vw); max-height: 95vh; }
.vipclub .wbody { padding: 14px 16px; overflow: auto; }
.vipclub .vcnote { font-size: 11.5px; color: var(--muted, #9fb0bd); }

.vcgrid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 16px; }
.vcsec { margin: 0 0 8px; font: 600 14px Georgia, serif; font-variant: small-caps; letter-spacing: .1em; color: #e8c872; display: flex; align-items: center; gap: 8px; }
.vcsec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #2f5468, transparent); }
.vcright > .vcsec:not(:first-child) { margin-top: 12px; }

/* herói */
.vchero { position: relative; border-radius: 12px; padding: 16px; text-align: center; overflow: hidden; align-self: start;
  background: radial-gradient(ellipse at 50% 20%, rgb(255 200 90 / 22%), transparent 60%), linear-gradient(#1e1a10, #0f0d08); border: 1px solid #6d5520; }
.vchero > * { position: relative; }
.vchero .vcrays { position: absolute; left: 50%; top: 100px; width: 420px; height: 420px; margin: -210px; opacity: .25; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 220 140 / 50%) 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000, transparent 65%); mask: radial-gradient(circle, #000, transparent 65%); animation: vcspin 40s linear infinite; }
@keyframes vcspin { to { transform: rotate(1turn); } }
.vccrown { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 70%)); animation: vcfloat 3s ease-in-out infinite; }
@keyframes vcfloat { 50% { transform: translateY(-5px); } }
.vchero h3 { margin: 4px 0 2px; font: 700 22px Georgia, serif; font-variant: small-caps; letter-spacing: .08em; color: #ffe7a3; }
.vcst { color: #7ee2a0; font-weight: 700; }
.vcst.off { color: #9fb0bd; }
.vcbar { height: 10px; border-radius: 99px; background: #0a0f14; border: 1px solid #3a2f14; overflow: hidden; margin: 10px 0 4px; }
.vcbar i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #b8923a, #ffe7a3); box-shadow: 0 0 10px rgb(255 220 140 / 60%); }
.vcfree { margin-top: 12px; padding: 10px; border-radius: 10px; background: rgb(0 0 0 / 35%); border: 1px solid #3a2f14; text-align: left; display: flex; gap: 10px; align-items: center; }
.vcfree img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.vccmp { margin-top: 12px; display: grid; grid-template-columns: 1fr 64px 84px; font-size: 12px; text-align: left; border: 1px solid #1f3446; border-radius: 10px; overflow: hidden; }
.vccmp > span { padding: 5px 8px; border-bottom: 1px solid #16242f; background: #0a141c; }
.vccmp > span:nth-child(3n+2), .vccmp > span:nth-child(3n) { text-align: center; }
.vccmp .h { font-weight: 800; color: #e8c872; background: #0d1821; }
.vccmp .ok { color: #7ee2a0; font-weight: 800; }

/* benefícios */
.vcperks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vcperk { position: relative; padding: 10px 8px; border-radius: 10px; background: linear-gradient(#13212e, #0b151e); border: 1px solid #1f3446; text-align: center; }
.vcperk.n { border-color: #6d5520; background: linear-gradient(#211c10, #0f0d08); }
.vcperk .ic { width: 52px; height: 52px; margin: 0 auto 4px; display: grid; place-items: center; }
.vcperk b { display: block; font-size: 12.5px; }
.vcperk small { display: block; color: #9fb0bd; font-size: 11px; line-height: 1.3; }
.vcnew { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border-radius: 4px; font: 800 9px/1.4 "Segoe UI", sans-serif; letter-spacing: .06em; color: #1a1205; background: linear-gradient(#ffe7a3, #e8c872); }
.vcnew.soon { color: #e2d0ff; background: #2a1f44; border: 1px solid #5a3f8a; }

/* planos */
.vcplans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 8px; }
.vcplan { position: relative; padding: 14px 12px 12px; border-radius: 12px; background: linear-gradient(#13212e, #0b151e); border: 1px solid #1f3446; display: grid; gap: 6px; justify-items: center; text-align: center; }
.vcplan.hot { border-color: #e8c872; box-shadow: 0 0 0 1px rgb(232 200 114 / 30%), 0 0 22px rgb(232 200 114 / 20%); background: linear-gradient(#262014, #110e08); }
.vcplan .rib { position: absolute; top: -9px; padding: 2px 10px; border-radius: 99px; font: 800 10px/1.5 "Segoe UI", sans-serif; letter-spacing: .08em; color: #1a1205; background: linear-gradient(#ffe7a3, #e8c872); }
.vcplan .rib.sub { background: linear-gradient(#e2d0ff, #a77bff); }
.vcplan .d { font: 800 26px/1 "Segoe UI", sans-serif; color: #ffe7a3; }
.vcplan .d small { font-size: 13px; color: #9fb0bd; font-weight: 600; }
.vcplan .p { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; }
.vcplan .p s { color: #9fb0bd; font-weight: 600; font-size: 12px; margin-right: 2px; }
.vcplan .p .dicon, .vcplan .p .dicon svg { width: 16px; height: 16px; }
.vcplan .per { font-size: 11px; color: #9fb0bd; }
.vcplan.sub { border-style: dashed; border-color: #5a3f8a; background: linear-gradient(#1b1528, #0e0b16); }
.vcplan button { min-width: 140px; white-space: nowrap; }
.vipclub button.vcghost { color: #e8c872; background: rgb(232 200 114 / 8%); border: 1px solid #a8873a; }
.vipclub button.vcoff { color: #9fb0bd; background: #13202b; border: 1px dashed #3a4858; cursor: not-allowed; }

/* seus benefícios */
.vcmine { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.vcbox { padding: 10px 12px; border-radius: 12px; background: rgb(0 0 0 / 25%); border: 1px solid #1f3446; }
.vccolors { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.vipclub .vccolor { min-height: 28px; padding: 3px 8px; border-radius: 8px; border: 1px solid #1f3446; background: #0a141c; font: 800 12.5px "Segoe UI", sans-serif; text-align: left; overflow: hidden; }
.vipclub .vccolor span { color: var(--n, #ffd76a); text-shadow: 0 1px 0 #000, 0 0 8px color-mix(in srgb, var(--n, #ffd76a) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vipclub .vccolor.rainbow span { background: linear-gradient(90deg, #ff8fb1, #ffd76a, #7ee2a0, #6ef0ff, #c6a2ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.vipclub .vccolor.plain { grid-column: 1 / -1; color: #9fb0bd; font-weight: 700; font-size: 11.5px; text-align: center; }
.vipclub .vccolor.on { border-color: #e8c872; box-shadow: 0 0 0 1px rgb(232 200 114 / 35%); }
.vipclub .vccolor:disabled { opacity: .55; cursor: not-allowed; }
.vcchest { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-content: start; }
.vcchest button { margin-top: 8px; }
.vipclub button.vcready { position: relative; }
.vipclub button.vcready::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 14px rgb(255 220 140 / 75%); opacity: 0; animation: vcready 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes vcready { 50% { opacity: 1; } }
.vcloot { grid-column: 1 / -1; }
.vclhead { display: flex; gap: 12px; align-items: center; }
.vcltitle { flex: 1; }
.vipclub .vcswitch { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid #3a4858; background: #0a141c; color: #9fb0bd; font: 800 12px "Segoe UI", sans-serif; }
.vcswitch i { position: relative; width: 34px; height: 18px; border-radius: 99px; background: #1f3446; }
.vcswitch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9fb0bd; transition: transform .18s ease; }
.vipclub .vcswitch.on { border-color: #4f9a62; color: #7ee2a0; }
.vcswitch.on i { background: #2c6a3e; }
.vcswitch.on i::after { transform: translateX(16px); background: #d6ffe2; }
.vipclub .vcswitch:disabled { opacity: .55; cursor: not-allowed; }
.vclrows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.vcloot.off .vclrows { opacity: .6; }
.vclrow { padding: 8px; border-radius: 10px; background: #0a141c; border: 1px solid #1f3446; border-top: 3px solid var(--t); display: grid; gap: 6px; }
.vcltier b { display: block; color: var(--t); font-size: 13px; }
.vcltier small { display: block; color: #9fb0bd; font-size: 11px; line-height: 1.3; min-height: 2.6em; }
.vclseg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid #1f3446; }
.vipclub .vclseg button { flex: 1; min-height: 26px; padding: 2px 4px; border: 0; border-radius: 0; background: #0d1821; color: #9fb0bd; font: 700 11.5px "Segoe UI", sans-serif; }
.vipclub .vclseg button + button { border-left: 1px solid #1f3446; }
.vipclub .vclseg button.on { background: color-mix(in srgb, var(--t) 30%, #0d1821); color: #fff; }
.vipclub .vclseg button:disabled { cursor: not-allowed; }
.outcome .chips .chip.sold { border-color: rgb(232 200 114 / 45%); color: #ffe7a3; }
.outcome .lootsold { color: #ffe7a3; }
.vcsoon { margin: 8px 0 0; padding-left: 18px; font-size: 12px; display: grid; gap: 4px; }

/* ícones pintados (client/item-art.mjs) */
.itemart { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; }
.itemart::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--h) / 38%), transparent 68%); }
.itemart img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 55%)); animation: itemart-bob 3.2s ease-in-out var(--d, 0s) infinite; }
@keyframes itemart-bob { 50% { transform: translateY(-3px); } }
.vipcard .vthumb .itemart { --s: 76px; }
@media (max-width: 1100px) {
  .vcgrid { grid-template-columns: 1fr; }
  .vcperks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .vcplans, .vcmine, .vclrows { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vchero .vcrays, .vccrown, .vipclub button.vcready::after { animation: none; }
  .vcswitch i::after { transition: none; }
  .itemart img { animation: none; }
}