/* GoFun VIP: all existing levels stay visible; only desktop receives animated decoration. */
.vip-progress-panel{position:relative;margin:-8px 0 28px;padding:27px 28px 25px;border:1px solid #345d55;border-radius:14px;background:radial-gradient(ellipse at 90% 0,#18504640,transparent 60%),linear-gradient(125deg,#202c29,#202523 65%,#242825);color:#e8f4ef}
.vip-progress-summary{display:flex;align-items:center;gap:20px;margin-bottom:21px;min-width:0}
.vip-current-badge{display:grid;place-items:center;flex:0 0 82px;width:82px;height:82px;position:relative;color:var(--vip-metal,#d8a075)}
.vip-current-badge .vip-emblem{width:76px;height:76px}
.vip-emblem{display:inline-grid;place-items:center;color:var(--vip-metal,#d8a075);width:48px;height:48px;position:relative;flex-shrink:0}
.vip-emblem svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 6px #0008)}
.vip-emblem .vip-rank-label{font-family:Figtree,sans-serif;font-size:13px;font-weight:850;letter-spacing:.3px;dominant-baseline:middle;text-anchor:middle}
.vip-progress-copy{flex:1;min-width:0}
.vip-progress-copy h3{font-size:23px;margin:0 0 8px;line-height:1.3;font-weight:800}
.vip-progress-copy p{font-size:12px;color:#a8c0b7;margin:0;line-height:1.7}
.vip-progress-numbers{display:flex;flex-direction:column;gap:7px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.vip-progress-numbers strong{font-size:23px;line-height:1.2;color:#9cffe0}
.vip-progress-numbers small{font-size:11px;line-height:1.5;color:#9eb8ae}
.vip-progress-track{height:12px;border-radius:9px;background:#101b17;border:1px solid #385347;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px #0006}
.vip-progress-fill{display:block;height:100%;width:var(--vip-progress,0%);max-width:100%;border-radius:inherit;background:linear-gradient(90deg,#139e87,#54f2b8 64%,#baffcf);box-shadow:0 0 18px #38f5bd55;position:relative;overflow:hidden}
.vip-progress-labels{display:flex;justify-content:space-between;gap:16px;margin-top:10px;color:#93afa2;font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
.vip-levels-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:26px 0 15px}
.vip-levels-heading h3{font-size:17px;line-height:1.4;margin:0;color:#e3f3ea}
.vip-levels-heading>span{font-size:11px;color:#88aa98;line-height:1.5}
.vip-levels-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:4px 0 8px}
.vip-level-stop{position:relative;display:flex;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:9px;text-align:center;padding:15px 5px 13px;border:1px solid #3d4941;border-radius:10px;background:linear-gradient(150deg,#30382f,#202722);color:#cad3ca;isolation:isolate}
.vip-level-stop>.vip-emblem{width:47px;height:47px}
.vip-level-stop>strong{font-size:10px;font-weight:750;line-height:1.4;color:#d4ded7;white-space:nowrap}
.vip-level-stop>small{font-size:9px;font-variant-numeric:tabular-nums;line-height:1.4;color:#8a9e91;white-space:nowrap}
.vip-level-stop.is-locked{background:linear-gradient(150deg,#2b302b,#222624);border-color:#3d443f}
.vip-level-stop.is-locked .vip-emblem{opacity:.72}
.vip-level-stop.is-complete{border-color:#698b69;background:linear-gradient(150deg,#314b36,#23352a)}
.vip-level-stop.is-current{border-color:#85e7bc;background:linear-gradient(150deg,#315742,#223c32);box-shadow:0 0 0 1px #7affc81c,inset 0 0 24px #54ffc50b}
.vip-level-stop.is-current>strong{color:#c4ffe0}
.vip-level-stop.is-current>small{color:#9ddbbd}
.vip-level-stop.is-current .vip-emblem{opacity:1}
.vip-level-stop[aria-current="step"]:after{content:'';position:absolute;bottom:0;left:30%;right:30%;height:2px;background:#8cffc4;box-shadow:0 0 12px #4fffc7;border-radius:2px;pointer-events:none}
.vip-level-stop:focus-visible{outline:2px solid #a6ffdc;outline-offset:4px}
.vip-selected-detail{display:flex;align-items:center;gap:18px;padding:22px;margin:15px 0 24px;border:1px solid #47674f;border-radius:12px;background:linear-gradient(125deg,#27382b,#242d26);color:#d7e7da}
.vip-selected-detail .vip-emblem{width:66px;height:66px;flex:0 0 66px}
.vip-selected-detail strong{display:block;font-size:19px;line-height:1.4;color:#e0f7e3}
.vip-selected-detail p{font-size:12px;line-height:1.8;margin:7px 0 0;color:#9cb9a2;font-variant-numeric:tabular-nums}
.vip-benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:761px){
 .vip-progress-panel{animation:vip-panel-enter .65s cubic-bezier(.2,.8,.2,1) both}
 .vip-current-badge:before{content:'';position:absolute;inset:-4px;border:1px solid #83ffbf40;border-radius:50%;box-shadow:0 0 20px #4fffc219;animation:vip-current-orbit 7s linear infinite;pointer-events:none;border-left-color:#9cffdc;border-right-color:#9cffdc}
 .vip-current-badge .vip-emblem{animation:vip-badge-float 4.6s ease-in-out infinite}
 .vip-progress-fill{transition:width .9s cubic-bezier(.2,.8,.2,1)}
 .vip-progress-fill:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 10%,#e6fff133 38%,#ffffffbd 51%,#d5ffe633 64%,transparent 85%);transform:translateX(-130%);animation:vip-progress-sweep 3.8s ease-in-out infinite;pointer-events:none}
 .vip-level-stop{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s,background .35s}
 .vip-level-stop .vip-emblem{transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s,opacity .3s}
 .vip-level-stop:is(:hover,:focus-visible){transform:translateY(-5px);border-color:var(--vip-metal,#8cffcc);box-shadow:0 9px 21px #0004,inset 0 0 21px #7affbd09;background:linear-gradient(150deg,#374237,#263329)}
 .vip-level-stop:is(:hover,:focus-visible) .vip-emblem{transform:translateY(-2px) scale(1.1) rotate(-4deg);filter:drop-shadow(0 0 10px var(--vip-metal,#8cffcc));opacity:1}
 .vip-level-stop.is-current:before{content:'';position:absolute;inset:4px;border:1px solid #83ffbd25;border-radius:7px;animation:vip-current-aura 4.2s ease-in-out infinite;pointer-events:none}
 .vip-selected-detail .vip-emblem{animation:vip-badge-float 5.8s ease-in-out infinite}
 .motion-paused .vip-progress-panel,.motion-paused .vip-current-badge:before,.motion-paused .vip-current-badge .vip-emblem,.motion-paused .vip-progress-fill:after,.motion-paused .vip-level-stop:before,.motion-paused .vip-selected-detail .vip-emblem,.tech-offscreen .vip-progress-panel,.tech-offscreen .vip-current-badge:before,.tech-offscreen .vip-current-badge .vip-emblem,.tech-offscreen .vip-progress-fill:after,.tech-offscreen .vip-level-stop:before,.tech-offscreen .vip-selected-detail .vip-emblem{animation-play-state:paused!important}
}
@media(min-width:1000px){.vip-levels-rail{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:1300px){.vip-levels-rail{grid-template-columns:repeat(15,minmax(0,1fr));gap:7px}.vip-level-stop{padding-inline:3px}.vip-level-stop>.vip-emblem{width:43px;height:43px}.vip-level-stop>strong{font-size:10px}.vip-level-stop>small{font-size:8px}}
@media(min-width:1150px){.vip-benefits-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@keyframes vip-panel-enter{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vip-current-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes vip-badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes vip-progress-sweep{0%,15%{transform:translateX(-130%)}65%,100%{transform:translateX(130%)}}
@keyframes vip-current-aura{0%,100%{opacity:.35;box-shadow:inset 0 0 12px #6cffab00}50%{opacity:1;box-shadow:inset 0 0 18px #6cffab11}}
@media(max-width:760px){
 .vip-progress-panel{padding:20px 16px;margin-top:0}
 .vip-progress-summary{gap:12px;flex-wrap:wrap}
 .vip-current-badge{width:62px;height:62px;flex-basis:62px}.vip-current-badge .vip-emblem{width:58px;height:58px}
 .vip-progress-copy h3{font-size:20px}.vip-progress-copy p{font-size:11px}
 .vip-progress-numbers{width:100%;text-align:left;gap:4px;margin-top:3px}.vip-progress-numbers strong{font-size:20px}
 .vip-progress-labels{font-size:10px}.vip-levels-heading{margin-top:21px;align-items:flex-start}.vip-levels-heading>span{font-size:10px;text-align:right}
 .vip-levels-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.vip-level-stop{padding:13px 4px}.vip-level-stop>strong{font-size:11px}.vip-level-stop>small{font-size:9px}
 .vip-selected-detail{padding:17px;gap:13px}.vip-selected-detail .vip-emblem{width:54px;height:54px;flex-basis:54px}.vip-selected-detail strong{font-size:17px}
 .vip-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .vip-progress-panel,.vip-current-badge:before,.vip-current-badge .vip-emblem,.vip-progress-fill,.vip-progress-fill:after,.vip-level-stop,.vip-level-stop:before,.vip-level-stop .vip-emblem,.vip-selected-detail .vip-emblem{animation:none!important;transition:none!important;transform:none!important}
 .vip-current-badge:before,.vip-progress-fill:after,.vip-level-stop.is-current:before{display:none}
}

@media(min-width:761px){
 .vip-progress-fill{transform-origin:left;animation:vip-progress-fill-in .9s cubic-bezier(.2,.8,.2,1) both}
 .vip-level-stop.is-selected{border-color:var(--vip-metal,#8cffcc);box-shadow:0 0 0 1px var(--vip-metal,#8cffcc),0 0 18px #67ffd018}
 .motion-paused .vip-progress-fill{animation-play-state:paused}
}
@keyframes vip-progress-fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.vip-progress-fill{animation:none!important;transform:none!important}}

/* Reset legacy pages.css .vip-emblem flex/round frame so new badges retain their own dimensions. */
.vip-progress-panel .vip-emblem{box-sizing:border-box;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:0;background:none;min-height:0;min-width:0}
.vip-progress-panel .vip-emblem:before,.vip-progress-panel .vip-emblem:after{content:none;display:none}
.vip-progress-panel .vip-current-badge>.vip-emblem{width:76px;height:76px}
.vip-progress-panel .vip-level-stop>.vip-emblem{width:47px;height:47px;flex-basis:auto}
.vip-level-stop{font:inherit;cursor:pointer;min-height:124px;box-sizing:border-box;appearance:none}
@media(min-width:1300px){.vip-progress-panel .vip-level-stop>.vip-emblem{width:43px;height:43px}.vip-level-stop{min-height:118px}}
@media(max-width:760px){.vip-progress-panel .vip-current-badge>.vip-emblem{width:58px;height:58px}}

.vip-level-stop.is-selected .vip-emblem{opacity:1}