/* Catbet VIP room keeps the site's black and gold UI while using Klasroyal's six-section modal flow. */
.modal-box.member-vip-modal{width:min(1200px,calc(100vw - 32px));height:min(700px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;overflow:hidden;border:1px solid #5b492a;border-radius:18px;background:#0c0c0c;box-shadow:0 32px 100px #000c}
.member-vip-modal .modal-content{height:100%}
.member-vip-modal .modal-close{top:10px;right:12px;width:38px;height:38px;border:1px solid #8c764d;background:#090909d9}
.member-vip-room{--cvr-gold:#d8ae46;--cvr-soft:#f2d48a;position:relative;display:grid;grid-template-columns:205px minmax(0,1fr);height:100%;min-width:0;overflow:hidden;color:#f5f4ef;background:linear-gradient(90deg,#08080826,#0909090d),url(/assets/vip/catbet-vip-background-desktop.webp) center/cover no-repeat;font-family:var(--font)}
.member-vip-room::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#09090926 0%,transparent 30%,#08080814 100%);z-index:0}
.cvr-rail,.cvr-main{position:relative;z-index:1;min-height:0}
.cvr-rail{display:flex;flex-direction:column;gap:15px;padding:22px 11px 18px;background:#08080880;border-right:1px solid #d8ae4633;backdrop-filter:blur(15px)}
.cvr-brand{display:flex;align-items:center;gap:9px;padding:2px 8px 11px;color:var(--cvr-soft);font-size:17px;font-weight:800;letter-spacing:.2px}
.cvr-brand .ico,.cvr-brand svg{width:24px;height:24px}
.cvr-identity{display:flex;align-items:center;gap:9px;padding:11px 7px;border-top:1px solid #d8ae4624;border-bottom:1px solid #d8ae4624;min-width:0}
.cvr-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #d8ae4666;border-radius:50%;color:var(--cvr-gold);background:#d8ae4610}
.cvr-avatar .ico,.cvr-avatar svg{width:19px;height:19px}
.cvr-identity strong,.cvr-identity small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cvr-identity strong{font-size:13px}.cvr-identity small{font-size:10px;color:#b7b1a6;margin-top:3px}
.cvr-rail nav{display:grid;gap:5px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d8ae4655 transparent}
.cvr-nav-item{display:flex;align-items:center;gap:12px;min-height:45px;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#b7b3ab;font:600 13px var(--font);text-align:left;cursor:pointer}
.cvr-nav-item .ico,.cvr-nav-item svg{width:19px;height:19px;flex:none;color:#c59a3b}
.cvr-nav-item.active,.cvr-nav-item:hover{background:#d8ae4617;border-color:#d8ae4647;color:#fff}
.cvr-main{display:flex;flex-direction:column;padding:0 13px 0 25px;overflow:hidden}
.cvr-panel{height:100%;overflow-y:auto;overflow-x:hidden;padding:28px 40px 28px 0;scrollbar-width:thin;scrollbar-color:#d8ae466b transparent}
.cvr-mobile-head{display:none}
.cvr-heading{margin:0 0 19px;padding-right:18px}
.cvr-heading h2{margin:0;color:#fff;font-size:29px;font-weight:750;letter-spacing:-.5px;line-height:1.16}
.cvr-heading p{max-width:64ch;margin:7px 0 0;color:#c0b9ae;font-size:13px;line-height:1.45}
.cvr-lobby{display:grid;grid-template-columns:minmax(0,1fr) 290px;position:relative;min-height:348px;padding:24px 0 17px 24px;overflow:hidden;border:1px solid #d8ae4636;border-radius:16px;background:radial-gradient(ellipse at 83% 50%,#c99c3740,transparent 42%),linear-gradient(110deg,#10100fc2 0%,#17140e82 64%,#12110d4c 100%)}
.cvr-lobby-copy{position:relative;z-index:1;max-width:520px}
.cvr-kicker{margin:0 0 4px;color:var(--cvr-gold);font-size:12px;font-weight:700}
.cvr-lobby h3{margin:0;color:#fff;font-size:42px;line-height:1.05;letter-spacing:-1px}
.cvr-lobby-copy>p:not(.cvr-kicker){max-width:45ch;color:#c5c2bc;font-size:13px;line-height:1.5}
.cvr-lobby-panther{align-self:end;justify-self:center;width:280px;height:300px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 22px #000b)}
.cvr-progress{max-width:460px;margin-top:20px}
.cvr-progress>div:first-child{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font-size:12px;color:#dfd8c8}
.cvr-progress strong{color:var(--cvr-soft);font-size:15px}.cvr-progress small{grid-column:1/-1;color:#aaa59b}
.cvr-progress-track{height:8px;margin-top:9px;overflow:hidden;border:1px solid #d8ae4640;border-radius:30px;background:#070707}
.cvr-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#846018,#e5bd64)}
.cvr-lobby-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}
.cvr-lobby-actions button,.cvr-store-item button,.cvr-wheel-info button,.cvr-confirm button,.cvr-loading button{min-height:38px;padding:8px 14px;border:1px solid #d8ae4670;border-radius:6px;background:#d8ae46;color:#15110a;font:700 12px var(--font);cursor:pointer}
.cvr-lobby-actions button+button{background:#111;color:var(--cvr-soft)}
.cvr-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.cvr-overview>div{padding:15px 17px;border:1px solid #d8ae462e;border-radius:10px;background:#10101090}
.cvr-overview span,.cvr-overview strong{display:block}.cvr-overview span{font-size:11px;color:#aaa59b}.cvr-overview strong{margin-top:5px;color:var(--cvr-soft);font-size:20px}
.cvr-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cvr-level-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;min-height:74px;padding:5px 5px 0}
.cvr-level-progress{width:min(480px,65%);color:#e9e2d4;font-size:12px}
.cvr-level-progress-top,.cvr-level-progress-bottom{display:flex;justify-content:space-between;gap:15px}
.cvr-level-progress-top strong{color:#efd078}.cvr-level-progress-bottom{margin-top:7px;font-size:11px;color:#c5bda9}
.cvr-level-progress-bar{height:22px;margin-top:4px;border:1px solid #d8ae462c;border-radius:3px;background:#ffffff10;overflow:hidden}
.cvr-level-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#ad842d,#e2bd68)}
.cvr-level-points{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #d8ae4636;border-radius:9px;background:#17130f8c;font-size:13px;white-space:nowrap}
.cvr-level-points .ico,.cvr-level-points svg{width:19px;height:19px;color:#d8ae46}.cvr-level-points strong{color:#f2d48a}
.cvr-coverflow-stage{position:relative;height:526px;overflow:clip;overflow-anchor:none;perspective:1100px;touch-action:pan-y;isolation:isolate}
.cvr-level-track{position:relative;width:100%;height:100%;transform-style:preserve-3d;overflow:visible}
.cvr-level-card{position:absolute;top:15px;left:50%;z-index:var(--cvr-z);display:flex;flex-direction:column;align-items:center;width:278px;height:490px;padding:9px 12px 15px;border:1px solid #d8ae4638;border-radius:19px;background:#17140e75;color:#f5f4ef;opacity:var(--cvr-opacity);visibility:visible;cursor:pointer;transform:translateX(calc(-50% + var(--cvr-x))) translateZ(var(--cvr-depth)) rotateY(var(--cvr-yaw)) scale(var(--cvr-scale));transition:transform .4s cubic-bezier(.2,.7,.25,1),opacity .35s,border-color .35s,background .35s;backface-visibility:hidden;overflow:hidden}
.cvr-level-card[data-cvr-hidden=true]{visibility:hidden;pointer-events:none}
.cvr-level-card.selected{border-color:#d8ae46a6;background:#221b128c;box-shadow:inset 0 1px #fff2,0 24px 48px #0005}
.cvr-level-card.current::after{display:none}
.cvr-level-art{display:flex;flex:0 0 358px;align-items:end;justify-content:center;width:252px;height:358px;overflow:visible}
.cvr-level-art img{display:block;width:252px;height:358px;object-fit:contain;object-position:center bottom;transform:none;user-select:none;-webkit-user-drag:none}
.cvr-level-card .cvr-level-name{max-width:100%;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.3}
.cvr-level-range-label{margin-top:4px;color:#9d9a94;font-size:10px;letter-spacing:.04em}
.cvr-level-range{margin-top:3px;color:#e0c890;font-size:16px}
.cvr-level-card em{margin-top:auto;color:#bcb6a9;font-size:11px;font-style:normal}
.cvr-level-card.current em{color:#e9c873}
.cvr-level-controls{position:relative;z-index:105;display:flex;align-items:center;justify-content:center;gap:18px;min-height:43px;margin:0;padding:2px 10px 5px;color:#c8c1b5;font-size:12px}
.cvr-level-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #d8ae4644;border-radius:50%;color:#e9d39d;background:#ffffff0d;cursor:pointer}
.cvr-level-controls button:disabled{opacity:.28;cursor:default}.cvr-level-controls .ico,.cvr-level-controls svg{width:17px;height:17px}
.cvr-level-controls span{min-width:142px;text-align:center}
.cvr-level-card:focus-visible,.cvr-level-controls button:focus-visible{outline:2px solid #f2d48a;outline-offset:3px}
.cvr-store-filters{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px}
.cvr-store-filters button{flex:none;padding:8px 12px;border:1px solid #d8ae4640;border-radius:6px;background:#0e0e0e;color:#c2b8a7;cursor:pointer}
.cvr-store-filters button[aria-pressed=true]{border-color:#d8ae46;background:#d8ae461b;color:#f6dda5}
.cvr-store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cvr-store-item{display:flex;flex-direction:column;min-height:168px;padding:15px;border:1px solid #d8ae4633;border-radius:12px;background:#151310ad}
.cvr-store-icon{color:#d8ae46}.cvr-store-icon .ico,.cvr-store-icon svg{width:24px;height:24px}
.cvr-store-item h3{margin:10px 0 3px;font-size:14px}.cvr-store-item p{margin:0 0 12px;color:#c7bca7;font-size:12px}
.cvr-store-item button{align-self:flex-start;margin-top:auto}.cvr-store-item button:disabled,.cvr-wheel-info button:disabled{opacity:.47;cursor:not-allowed}
.cvr-wheel-layout{display:grid;grid-template-columns:minmax(240px,370px) minmax(0,1fr);align-items:center;gap:26px}
.cvr-wheel-wrap{position:relative;width:min(100%,365px);aspect-ratio:1;padding:12px;border:1px solid #d8ae4650;border-radius:50%;background:#080808;box-shadow:0 0 0 8px #d8ae4610}
.cvr-wheel-pointer{position:absolute;z-index:2;top:0;left:50%;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:24px solid #f2d48a;transform:translateX(-50%)}
.cvr-wheel-disc{position:relative;width:100%;height:100%;border:7px solid #d8ae46;border-radius:50%;box-shadow:inset 0 0 0 3px #100d09}
.cvr-wheel-disc::before{content:"";position:absolute;inset:10%;border:1px dashed #f2d48a88;border-radius:50%}
.cvr-wheel-center{position:absolute;inset:37%;display:grid;place-items:center;border:4px solid #d8ae46;border-radius:50%;background:#0b0b0b;color:#f2d48a}
.cvr-wheel-center .ico,.cvr-wheel-center svg{width:27px;height:27px}
.cvr-wheel-info{padding:20px;border:1px solid #d8ae4630;border-radius:12px;background:#151310ad}
.cvr-wheel-info p{display:flex;justify-content:space-between;gap:10px;color:#c6beb2}.cvr-wheel-info strong{color:#f2d48a}
.cvr-wheel-info ul{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;padding:12px 0 12px 17px;color:#c8bba6;font-size:11px}
.cvr-wheel-info button{margin-top:4px}.cvr-wheel-info small{display:block;margin-top:10px;color:#bbb3a6}
.cvr-wheel-result{display:block!important;color:#f2d48a!important;font-weight:700}
.cvr-leader-list{list-style:none;padding:0;margin:0;max-width:760px}
.cvr-leader-list li{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid #d8ae4625;background:#1513109e}
.cvr-leader-list li:nth-child(-n+3){background:#d8ae4610}.cvr-leader-rank{display:grid;place-items:center;width:25px;height:25px;border:1px solid #d8ae4655;border-radius:50%;color:#d8ae46;font-size:11px}.cvr-leader-list strong{font-size:13px}.cvr-leader-list li>span:last-child{color:#f2d48a;font-size:13px}
.cvr-empty,.cvr-terms{max-width:720px;padding:18px 22px;border:1px solid #d8ae4630;border-radius:11px;background:#151310ad;color:#c9c4ba;line-height:1.6}
.cvr-terms p{margin:0;padding:12px 0;border-bottom:1px solid #d8ae4620}.cvr-terms p:last-child{border:0}.cvr-terms strong{color:#f2d48a}
.cvr-confirm{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:#000b;backdrop-filter:blur(4px)}
.cvr-confirm>div{width:min(390px,calc(100% - 28px));padding:22px;border:1px solid #d8ae4685;border-radius:13px;background:#111}
.cvr-confirm h3{margin:0 0 9px}.cvr-confirm p{color:#c9c4ba}.cvr-confirm button{margin-right:8px}.cvr-confirm button[data-cvr-cancel]{background:#111;color:#f2d48a}
.cvr-loading{display:grid;place-content:center;gap:15px;height:100%;min-height:250px;padding:25px;color:#f2d48a;text-align:center}
.member-vip-room button:focus-visible{outline:2px solid #ffe6a7;outline-offset:2px}
@media(max-width:919px){
  .modal-box.member-vip-modal{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .member-vip-modal .modal-close{top:8px;right:9px}
  .member-vip-room{display:flex;flex-direction:column;min-height:0}
  .cvr-rail{display:block;flex:none;padding:10px 52px 0 12px;border-right:0;border-bottom:1px solid #d8ae4633;background:#080808ab}
  .cvr-brand,.cvr-identity{display:none}
  .cvr-rail nav{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .cvr-nav-item{flex:none;min-height:42px;padding:7px 10px;font-size:12px;white-space:nowrap}
  .cvr-nav-item .ico,.cvr-nav-item svg{width:16px;height:16px}
  .cvr-main{flex:1;padding:0 12px;min-height:0}
  .cvr-mobile-head{display:flex;align-items:center;gap:10px;padding:13px 42px 7px 4px;color:#f2d48a;font-size:12px}
  .cvr-mobile-head strong{font-size:14px}.cvr-mobile-head span{color:#b4aba0}
  .cvr-panel{padding:10px 2px calc(24px + env(safe-area-inset-bottom,0px))}
  .cvr-heading h2{font-size:24px}.cvr-heading p{font-size:12px}
  .cvr-lobby{grid-template-columns:minmax(0,1fr) 115px;min-height:300px;padding:18px 0 15px 16px}
  .cvr-lobby h3{font-size:30px}.cvr-lobby-copy>p:not(.cvr-kicker){font-size:12px}
  .cvr-lobby-panther{width:135px;height:215px;align-self:end}
  .cvr-progress{margin-top:12px}.cvr-progress strong{font-size:13px}
  .cvr-lobby-actions{margin-top:13px}.cvr-lobby-actions button{font-size:11px;padding:7px 10px}
  .cvr-overview{gap:6px}.cvr-overview>div{padding:10px}.cvr-overview span{font-size:10px}.cvr-overview strong{font-size:15px}
  .cvr-level-summary{min-height:94px;flex-wrap:wrap;gap:5px}.cvr-level-progress{order:2;width:100%;font-size:11px}.cvr-level-points{order:1;margin-left:auto;padding:5px 8px;font-size:11px}.cvr-level-points .ico,.cvr-level-points svg{width:15px;height:15px}
  .cvr-coverflow-stage{height:500px;perspective:800px}.cvr-level-card{width:244px;height:456px;transform:translateX(calc(-50% + var(--cvr-x-mobile))) translateZ(var(--cvr-depth)) rotateY(var(--cvr-yaw)) scale(var(--cvr-scale))}.cvr-level-art{flex-basis:324px;width:220px;height:324px}.cvr-level-art img{width:220px;height:324px}
  .cvr-store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cvr-store-item{min-height:150px;padding:11px}.cvr-store-item h3{font-size:12px}
  .cvr-wheel-layout{display:flex;flex-direction:column;gap:15px}.cvr-wheel-wrap{max-width:290px}.cvr-wheel-info{width:100%}
}
@media(max-width:380px){.cvr-lobby{grid-template-columns:minmax(0,1fr) 90px}.cvr-lobby-panther{width:100px}.cvr-overview{grid-template-columns:1fr 1fr}.cvr-overview>div:last-child{grid-column:1/-1}.cvr-store-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.cvr-level-card,.cvr-wheel-disc{transition:none!important}}

@media(max-width:919px){.member-vip-room{background-image:linear-gradient(90deg,#08080829,#09090916),url(/assets/vip/catbet-vip-background-mobile.webp);background-position:center;background-size:cover}}

/* Keep the gallery and panther visible while protecting text contrast. */
.cvr-lobby-panther{transform:scale(1.16);transform-origin:center bottom;filter:drop-shadow(0 10px 22px #0007) drop-shadow(0 0 12px #d8ae4638)}
.cvr-level-art img{filter:drop-shadow(0 8px 10px #0006)}