:root{--red:#f5313a;--red-hot:#ff5a4f;--red-deep:#a10c15;--bronze:#e0ad66;--bronze-2:#b9772f;--ink:#080405;--panel-top:#1d0a0d;--panel-bot:#0c0406;--text:#f6eef0;--muted:#9c868a;--silver:#d7dbe4}.stage{container-type:inline-size;container-name:vip-card;perspective:1100px;width:100%;height:100%;max-width:100%;position:relative;overflow:visible}.stage,.stage *{box-sizing:border-box}.stage .vfc-interactive-link{display:block;height:100%;text-decoration:none;color:inherit}.stage .card{position:relative;width:100%;height:100%;border-radius:22px;overflow:visible;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.18,.7,.2,1);cursor:pointer;background:linear-gradient(155deg,var(--panel-top),var(--panel-bot) 70%);border:1px solid rgba(245,49,58,.35);box-shadow:inset 0 1px 0 rgba(255,120,120,.1),0 30px 60px -25px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 0 42px -14px rgba(245,49,58,.55);will-change:transform;aspect-ratio:440/300}@media screen and (max-width:1250px)and (min-width:624px){.stage .card{aspect-ratio:440/360}}.stage .card.is-hover{transition:transform .08s ease-out}.stage .fx{position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none;z-index:1}.stage .fx__glow{position:absolute;width:340px;height:340px;left:-70px;top:-120px;background:radial-gradient(closest-side,rgba(245,49,58,.55),rgba(245,49,58,0) 70%);filter:blur(6px);transform:translate(calc(var(--px, 0) * -26px),calc(var(--py, 0) * -26px));transition:transform .3s ease-out}.stage .fx__holo{position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px);mix-blend-mode:overlay;opacity:.35}.stage .fx__sheen{inset:-40% -10%;background:linear-gradient(115deg,transparent 30%,rgba(255,235,225,.1) 45%,rgba(255,255,255,.42) 50%,rgba(255,235,225,.1) 55%,transparent 70%);transform:translateX(-40%);animation:sweep 6.5s ease-in-out infinite}.stage .fx__glare,.stage .fx__sheen{position:absolute;opacity:0;mix-blend-mode:screen}.stage .fx__glare{inset:0;background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),rgba(255,220,210,.1) 35%,transparent 60%);transition:opacity .3s ease}.stage .card.is-hover .fx__glare{opacity:1}.stage .card.is-hover .fx__sheen{animation-duration:3.2s}.stage .fx__edge{position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,180,180,.75),transparent)}.stage .content{position:relative;height:100%;padding:24px 26px 22px;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(24px);z-index:2;font-family:Inter,system-ui,sans-serif}.stage .head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:calc(100% - 100px);width:100%}.stage .avatar{position:relative;width:60px;height:60px;flex:0 0 auto;border-radius:50%;padding:2px;background:var(--red);box-shadow:0 0 18px -4px rgba(245,49,58,.7)}.stage .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid #12070a}.stage .id{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1;overflow:hidden}.stage .name{font-weight:700;font-size:24px;line-height:1.1;letter-spacing:.5px;color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.6);margin:0;width:100%}.stage .name,.stage .vfc-rank-badge{font-family:Chakra Petch,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.stage .vfc-rank-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border-radius:999px;font-weight:800;font-size:12px;line-height:1.3;letter-spacing:.2px;text-transform:uppercase;color:#f2d58d;background:#242020;border:1px solid rgba(234,191,97,.19)}.stage .vfc-rank-badge__spark{flex-shrink:0;width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#fff0ae,#a66e18);font-size:0;line-height:0;color:rgba(0,0,0,0)}.stage .prog{margin-top:auto}.stage .prog__top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:9px}.stage .prog__label{font-size:10.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}.stage .prog__pct{font-family:Chakra Petch,sans-serif;font-weight:700;font-size:28px;line-height:.9;color:#fff;letter-spacing:.5px;text-shadow:0 0 20px rgba(245,49,58,.45)}.stage .bar{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);overflow:hidden}.stage .bar__fill{position:absolute;inset:0;right:auto;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red-deep),var(--red) 55%,var(--red-hot));box-shadow:0 0 14px -1px rgba(245,49,58,.9);transition:width .6s cubic-bezier(.4,0,.2,1);overflow:hidden}.stage .bar__fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:barShine 2.6s ease-in-out infinite}.stage .prog__next{margin-top:10px;text-align:right;font-size:12px;color:var(--muted)}.stage .prog__next b{color:var(--silver);font-weight:600}.stage .medallion{position:absolute;top:-28px;right:-12px;width:160px;height:160px;transform:translate3d(calc(var(--px, 0) * 26px),calc(var(--py, 0) * 20px),78px);transition:transform .3s ease-out;pointer-events:none;z-index:10}.stage .medallion__float{width:100%;height:100%;animation:float 5.5s ease-in-out infinite;filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));position:relative}.stage .medallion__aura{inset:0;opacity:.95}.stage .medallion__aura,.stage .medallion__elf{position:absolute;background-repeat:no-repeat;background-position:50%;background-size:contain}.stage .medallion__elf{left:50%;top:52%;width:110px;height:128px;transform:translate(-50%,-50%)}@keyframes sweep{0%,to{transform:translateX(-55%);opacity:0}45%{opacity:.3}50%{transform:translateX(55%);opacity:.32}60%{opacity:0}}@keyframes barShine{0%{transform:translateX(-100%)}55%,to{transform:translateX(220%)}}@keyframes float{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@media(max-width:480px){.stage .name{font-size:20px}.stage .medallion{width:130px;height:130px;top:-18px}.stage .medallion__elf{width:90px;height:106px}.stage .prog__pct{font-size:24px}}@media screen and (max-width:1280px){@container vip-card (max-width: 300px){.stage .card{aspect-ratio:440/300}.stage .medallion{display:none}.stage .head{max-width:100%;align-items:flex-start}.stage .avatar{width:48px;height:48px}.stage .name{overflow:visible;overflow-wrap:anywhere;font-size:18px;line-height:1.2}.stage .name,.stage .vfc-rank-badge{white-space:normal;text-overflow:unset}.stage .vfc-rank-badge{margin-top:2px;min-height:24px;padding:0 8px;font-size:11px;letter-spacing:.2px;overflow:visible;line-height:1.25}.stage .content{padding:18px 16px 16px;gap:10px}.stage .prog__pct{font-size:22px}}}@media(prefers-reduced-motion:reduce){.stage .card,.stage .fx__glow,.stage .medallion{transition:none}.stage .bar__fill:after,.stage .fx__sheen,.stage .medallion__float{animation:none}.stage .fx__sheen{opacity:.12;transform:none}}