/* v26: independently replaceable visual layers */
.vip-showcase { background:#151080 url('assets/components/vip-background.svg') center/100% 100% no-repeat; min-height:100dvh; padding:28px 0 max(18px,env(safe-area-inset-bottom)); }
.vip-showcase .vip-head { margin:12px auto 0; width:86%; }
.vip-showcase .vip-head h1 { font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:-.075em; font-size:clamp(38px,12.6vw,78px); line-height:.91; }
.vip-arrow { display:inline-block; font-size:.66em; vertical-align:12%; margin-left:3px; }
.vip-showcase .vip-head p { margin:18px 0 0; line-height:1.45; }
.vip-emblem { width:min(72vw,400px); aspect-ratio:1; position:relative; margin:19px auto 0; flex:none; }
.vip-go { width:100%; height:100%; object-fit:contain; display:block; animation:vip-hover 4s ease-in-out infinite; }
.vip-star { position:absolute; top:4%; right:7%; width:19%; height:auto; filter:drop-shadow(0 0 18px #ffe15f66); animation:vip-star 4s ease-in-out infinite; }
.vip-pagination { display:flex; justify-content:center; align-items:center; gap:9px; margin:15px 0 24px; }
.vip-pagination i { width:4px; height:4px; border-radius:100%; background:#a3acff70; }
.vip-pagination i:first-child { width:24px; height:4px; border-radius:5px; background:white; }
.vip-showcase .vip-options { margin-top:auto; }
.vip-showcase .vip-option { padding:10px 19px; min-height:64px; border-radius:15px; clip-path:none; background:#b4b6ff28; border:1px solid transparent; }
.vip-showcase .vip-option:has(input:checked) { background:#c1c8ff38; border-color:#c7d0ff42; }
.vip-showcase .vip-option input { appearance:none; border:2px solid #ffffff70; width:24px; height:24px; border-radius:50%; position:relative; flex:none; }
.vip-showcase .vip-option input:checked { background:#fff; border-color:#fff; }
.vip-showcase .vip-option input:checked::after { content:""; display:block; position:absolute; width:9px; height:5px; border-left:3px solid #6660d9; border-bottom:3px solid #6660d9; transform:rotate(-45deg); left:4px; top:5px; }
.vip-showcase .vip-continue { min-height:58px; margin-top:15px; }
.vip-showcase .vip-close { top:12px; right:5%; }
.medal-component { width:58px; height:58px; position:relative; display:grid; place-items:center; color:#fff; }
.medal-component img { position:absolute; inset:0; width:100%; height:100%; }
.medal-component b { position:relative; font-size:18px; font-weight:800; margin-top:-7%; text-shadow:0 1px 2px #000; }
.medal-component sup { font-size:8px; vertical-align:super; margin-left:1px; }
.rank-podium-player.rank-1 .medal-component { width:69px; height:69px; }
.rank-list .medal-component { width:39px; height:39px; }
.rank-list .medal-component b { font-size:13px; }
.rank-list .medal-component sup { font-size:6px; }
.cyber-detail .wheel-stage { border:0; box-shadow:none; margin-top:35px; }
.cyber-detail .spin-rim { position:absolute; width:112%; height:112%; max-width:none; inset:-6%; pointer-events:none; z-index:2; }
.cyber-detail .spin-lights { display:none; }
.cyber-detail .wheel-pointer { background:transparent url('assets/components/pointer.svg') center/contain no-repeat; clip-path:none; width:44px; height:64px; top:-44px; filter:drop-shadow(0 0 5px #d950fd); }
.cyber-detail .spin-actions .btn { border:0; border-radius:0; clip-path:none; background:transparent url('assets/components/button-cyan.svg') center/100% 100% no-repeat; box-shadow:none; padding:13px 22px; }
.cyber-detail .spin-actions .btn--gold { background-image:url('assets/components/button-violet.svg'); }
.cyber-detail .spin-actions .btn:focus-visible { outline:2px solid white; outline-offset:4px; }
@keyframes vip-hover { 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes vip-star { 50% { transform:rotate(12deg) scale(1.05); } }
@media(max-height:740px) { .vip-showcase { padding-top:21px; } .vip-emblem { width:min(58vw,240px); margin-top:10px; } .vip-pagination { margin:5px 0 13px; } .vip-showcase .vip-terms { padding:8px 0 10px; } }
@media(prefers-reduced-motion:reduce) { .vip-go,.vip-star { animation:none; } }
.cyber-detail .row-x { position:absolute; top:16px; right:20px; width:30px; margin:0; padding:0; border:0; background:none; z-index:6; }
.cyber-detail .row-x .page-sub { display:none; }
.cyber-detail .cyber-wordmark { margin-bottom:40px; }
.cyber-detail .wheel-stage { margin-bottom:35px; }
@media(max-width:440px) { .cyber-detail { padding:18px 20px 25px; } .cyber-detail .spin-actions .btn { min-height:58px; font-size:18px; } .cyber-detail .cyber-wallet { margin-top:14px; } }