/* winnerZ v63 polish layer: refined game cards, auth, settings and cosmetic VIP UI. */
:root{
  --wz63-bg:#070d12;
  --wz63-panel:#0d1820;
  --wz63-panel2:#101e27;
  --wz63-line:#1b313c;
  --wz63-line2:#274553;
  --wz63-text:#f4f8f8;
  --wz63-muted:#7f949e;
  --wz63-soft:#a8bac1;
  --wz63-accent:#37e39d;
  --wz63-accent2:#20b67d;
  --wz63-shadow:0 20px 60px rgba(0,0,0,.34);
}

/* ---------- lobby/game cards ---------- */
.ref-gcard{
  position:relative!important;
  background:linear-gradient(180deg,#0d1b24,#0a151c)!important;
  border:1px solid rgba(86,122,136,.18)!important;
  border-radius:13px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}
.ref-gcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .22s ease;background:linear-gradient(135deg,rgba(55,227,157,.06),transparent 36%,rgba(255,255,255,.025));}
.ref-gcard:hover{transform:translateY(-4px)!important;border-color:rgba(55,227,157,.28)!important;box-shadow:0 16px 34px rgba(0,0,0,.28)!important}
.ref-gcard:hover::after{opacity:1}
.ref-gcard-art{position:relative!important;overflow:hidden!important;aspect-ratio:1.46/1!important;background:#081117!important}
.ref-gcard-image{transform:scale(1.001);filter:saturate(.92) contrast(1.02);transition:transform .36s cubic-bezier(.2,.7,.2,1),filter .36s ease!important}
.ref-gcard:hover .ref-gcard-image{transform:scale(1.055);filter:saturate(1.07) contrast(1.04)!important}
.ref-gcard-sheen{background:linear-gradient(180deg,rgba(4,9,13,.03) 15%,rgba(4,9,13,.13) 48%,rgba(4,9,13,.84) 100%)!important}
.ref-card-badges{top:10px!important;left:10px!important;gap:6px!important}
.ref-card-badge{height:22px!important;padding:0 8px!important;display:inline-flex!important;align-items:center!important;border-radius:999px!important;font-size:7px!important;font-weight:900!important;letter-spacing:.09em!important;border:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(8px)!important}
.ref-card-badge.live{background:rgba(8,20,25,.72)!important;color:#bff7de!important;border-color:rgba(55,227,157,.26)!important}
.ref-card-badge.hot{background:rgba(89,51,34,.78)!important;color:#ffd6ae!important;border-color:rgba(224,159,87,.24)!important}
.ref-card-badge.new{background:rgba(23,58,74,.78)!important;color:#cdeeff!important;border-color:rgba(100,175,211,.24)!important}
.gfav{width:31px!important;height:31px!important;top:10px!important;right:10px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(6,12,16,.46)!important;backdrop-filter:blur(7px)!important;border-radius:9px!important;color:#d3dfe2!important;transition:all .18s ease!important}
.gfav:hover{transform:translateY(-1px)!important;background:rgba(8,18,23,.82)!important;border-color:rgba(55,227,157,.24)!important}
.gfav.fav{color:#7cf3bf!important;border-color:rgba(55,227,157,.28)!important;background:rgba(13,56,43,.54)!important}
.ref-play-overlay{bottom:12px!important;left:12px!important;right:12px!important;height:38px!important;padding:0 12px!important;border-radius:10px!important;background:rgba(7,16,21,.72)!important;border:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(8px)!important;opacity:0;transform:translateY(4px);transition:all .18s ease!important}
.ref-gcard:hover .ref-play-overlay{opacity:1;transform:none}
.ref-play-icon{width:24px!important;height:24px!important;border-radius:7px!important;background:var(--wz63-accent)!important;color:#052217!important;display:grid!important;place-items:center!important}
.ref-play-overlay>span:last-child{font-size:9px!important;font-weight:850!important;color:#f4f8f7!important;letter-spacing:.01em!important}
.ref-gcard-meta{padding:11px 11px 12px!important;min-height:70px!important;background:linear-gradient(180deg,#0c1921,#0a151c)!important;border-top:1px solid rgba(255,255,255,.03)!important}
.ref-gcard-name{font-size:11px!important;font-weight:860!important;letter-spacing:-.01em!important}
.ref-gcard-prov{font-size:8px!important;color:#748b95!important;margin-top:4px!important}
.ref-gcard-prov .ref-card-dot{opacity:.55;margin:0 4px!important}
.ref-gcard-cat{margin-top:6px!important;align-self:flex-start!important;padding:4px 7px!important;color:#8ba0aa!important;background:#0e222c!important;border-color:#1d3a47!important;font-size:7px!important}

/* game room shell */
body.on-game .game-view{max-width:1540px!important;margin-inline:auto!important}
body.on-game .game-topbar{border-radius:13px!important;border:1px solid #1c333e!important;background:linear-gradient(180deg,#0e1a22,#0b161c)!important;box-shadow:0 14px 30px rgba(0,0,0,.16)!important;padding:12px 14px!important}
body.on-game #gameContainer{margin-top:13px!important}
.game-recommendations{margin-top:18px!important}
.game-recommendations .ref-gcard{min-height:0!important}

/* ---------- auth ---------- */
#authModal .modal-content{width:min(720px,calc(100vw - 32px))!important;padding:0!important;overflow:hidden!important;background:#0b1720!important;border:1px solid #234250!important;border-radius:18px!important;box-shadow:var(--wz63-shadow)!important}
#authModal .modal-close{z-index:4!important;width:34px!important;height:34px!important;border-radius:9px!important;background:rgba(7,15,20,.62)!important;border:1px solid rgba(255,255,255,.08)!important}
.auth-layout-v63{display:grid;grid-template-columns:1.05fr .95fr;min-height:470px}
.auth-showcase-v63{position:relative;padding:34px;background:radial-gradient(circle at 20% 10%,rgba(55,227,157,.15),transparent 38%),linear-gradient(150deg,#0b1d26,#071015 70%);border-right:1px solid #1b343f;overflow:hidden}
.auth-showcase-v63::after{content:"";position:absolute;right:-90px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(55,227,157,.18),transparent 66%);filter:blur(4px)}
.auth-brand-lockup-v63{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;letter-spacing:-.05em}
.auth-showcase-v63 h3{font-size:29px;line-height:1.02;letter-spacing:-.045em;margin:84px 0 12px;max-width:330px}
.auth-showcase-v63 p{max-width:330px;color:#8fa4ad;font-size:11px;line-height:1.65;margin:0}
.auth-feature-list-v63{display:grid;gap:9px;margin-top:26px}
.auth-feature-v63{display:flex;align-items:center;gap:10px;color:#d6e3e7;font-size:9px;font-weight:760}
.auth-feature-icon-v63{width:27px;height:27px;border-radius:8px;background:#102731;border:1px solid #1d4452;color:#64efb6;display:grid;place-items:center}
.auth-form-v63{padding:34px 32px;background:#0d1820}
.auth-form-v63 h2{font-size:25px!important;letter-spacing:-.045em!important;margin:0 0 8px!important}
.auth-form-v63 .modal-sub{font-size:9px!important;line-height:1.6!important;color:#7d939e!important;margin-bottom:18px!important}
.auth-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;padding:4px!important;border:1px solid #203b47!important;background:#0a151c!important;border-radius:10px!important;margin-bottom:18px!important}
.auth-tab{height:34px!important;border-radius:7px!important;color:#7f959f!important;background:transparent!important;border:0!important;font-size:9px!important;font-weight:850!important}
.auth-tab.active{background:#152730!important;color:#eff6f8!important;box-shadow:inset 0 0 0 1px rgba(55,227,157,.13)!important}
.auth-field-v63{position:relative!important;margin-bottom:13px!important}
.auth-field-v63>label{font-size:8px!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#78909a!important;font-weight:800!important;margin-bottom:6px!important;display:block!important}
.auth-input-wrap-v63{position:relative!important}
.auth-input-wrap-v63 .ui-icon{position:absolute!important;left:11px!important;top:50%!important;transform:translateY(-50%)!important;color:#69818b!important;width:14px!important;height:14px!important;pointer-events:none!important}
.auth-input-wrap-v63 .bet-input{padding-left:36px!important;padding-right:40px!important;height:42px!important;border-radius:10px!important;background:#09141b!important;border:1px solid #1f3945!important;color:#edf5f6!important}
.auth-input-wrap-v63 .bet-input:focus{border-color:rgba(55,227,157,.4)!important;box-shadow:0 0 0 3px rgba(55,227,157,.07)!important}
.auth-pass-toggle-v63{position:absolute!important;right:6px!important;top:6px!important;width:30px!important;height:30px!important;border-radius:7px!important;background:#10232b!important;border:1px solid #1d3945!important;color:#79919b!important}
.auth-form-v63 .btn-primary{height:43px!important;border-radius:10px!important;font-size:10px!important;font-weight:900!important;margin-top:4px!important}
.auth-helper-row-v63{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:8px;color:#6f858f}
.auth-secure-v63{display:flex;align-items:center;gap:6px}
.auth-strength-v63{height:3px;background:#14232c;border-radius:999px;overflow:hidden;margin-top:7px}
.auth-strength-v63 span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d69b68,#e5c35b,#37e39d);transition:width .2s ease}

/* ---------- settings ---------- */
#settingsModal .modal-content{width:min(900px,calc(100vw - 30px))!important;max-height:min(780px,calc(100vh - 24px))!important;border-radius:18px!important;background:#0b161e!important;border:1px solid #223e4a!important;box-shadow:var(--wz63-shadow)!important;overflow:auto!important}
.settings-v45{padding:0!important}
.settings-hero{padding:24px 26px 20px!important;background:linear-gradient(180deg,#0f1e27,#0c171f)!important}
.settings-kicker{font-size:8px!important;letter-spacing:.14em!important;color:#5e7b86!important;font-weight:900!important}
.settings-hero h2{font-size:27px!important;letter-spacing:-.045em!important;margin:5px 0 6px!important}
.settings-current-pill{align-self:flex-start!important;border-radius:999px!important;border:1px solid #23424e!important;background:#0a151c!important;color:#93a7af!important;font-size:8px!important;padding:7px 10px!important}
.settings-tabs-v45{padding:10px 12px!important;background:#09131a!important;border-bottom:1px solid #1a313b!important;display:flex!important;gap:5px!important;position:sticky!important;top:0!important;z-index:2!important}
.settings-tab-v45{height:33px!important;padding:0 12px!important;border-radius:8px!important;border:1px solid transparent!important;background:transparent!important;color:#748b95!important;font-size:8px!important;font-weight:860!important}
.settings-tab-v45:hover{background:#0e2029!important;color:#d9e5e7!important}
.settings-tab-v45.active{background:#10262f!important;border-color:#234451!important;color:#dffbf1!important;box-shadow:inset 0 0 0 1px rgba(55,227,157,.08)!important}
.settings-section-v45{padding:16px 20px 6px!important}
.settings-grid-v45{grid-template-columns:1fr 1fr!important;gap:10px!important}
.setting-card-v45{padding:15px!important;min-height:76px!important;border-radius:11px!important;background:linear-gradient(180deg,#0d1a22,#0b161d)!important;border:1px solid #1c3540!important;box-shadow:none!important}
.setting-card-v45:hover{border-color:#294a58!important;background:#0e1d25!important}
.setting-card-v45 b{font-size:9px!important;color:#e6eef0!important}
.setting-card-v45 small{font-size:8px!important;line-height:1.45!important;color:#728a94!important}
.setting-select-v45{height:34px!important;border-radius:8px!important;border:1px solid #23424e!important;background:#08141a!important;color:#d7e2e5!important;font-size:8px!important;padding:0 9px!important}
.settings-note-v45{margin:6px 20px 8px!important;border-radius:10px!important;border:1px solid #1c3540!important;background:#09151c!important;padding:11px 12px!important;display:flex!important;gap:9px!important;align-items:center!important}
.settings-note-v45 strong{color:#bcd0d7!important;font-size:8px!important}.settings-note-v45 span{color:#6e858f!important;font-size:8px!important}
.settings-footer-v45{padding:14px 20px 18px!important;border-top:1px solid #1a313b!important;display:flex!important;justify-content:space-between!important;gap:10px!important;position:sticky!important;bottom:0!important;background:rgba(11,22,30,.95)!important;backdrop-filter:blur(8px)!important}
.settings-footer-v45 .btn-primary,.settings-footer-v45 .btn-secondary{height:38px!important;border-radius:9px!important;font-size:9px!important}

/* ---------- cosmetic VIP club ---------- */
#view-vip .page-title{margin-bottom:15px!important}
.vip-hero{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(300px,.95fr)!important;gap:14px!important;align-items:stretch!important;padding:0!important;background:transparent!important;border:0!important}
.vip-current{padding:22px!important;border-radius:16px!important;background:radial-gradient(circle at 10% 0%,rgba(55,227,157,.10),transparent 36%),linear-gradient(145deg,#10232b,#0b171f)!important;border:1px solid #23434f!important;box-shadow:0 16px 36px rgba(0,0,0,.18)!important}
.vip-current .avatar-xl{width:58px!important;height:58px!important;border-radius:15px!important;background:#122730!important;border:1px solid #2a4c58!important}
.vip-name-row{align-items:center!important;gap:8px!important}
.vip-user{font-size:17px!important;font-weight:900!important;letter-spacing:-.03em!important}
.vip-progress{height:8px!important;background:#142a32!important;border-radius:999px!important;margin-top:16px!important;overflow:hidden!important}
.vip-prog-fill{background:linear-gradient(90deg,#2edc96,#6ef2bd)!important}
.vip-prog-label{font-size:8px!important;color:#78909a!important;margin-top:8px!important}
.vip-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;padding:0!important;background:transparent!important}
.vstat{padding:15px!important;border-radius:13px!important;background:#0d1921!important;border:1px solid #1d3641!important;min-height:92px!important}
.vstat-v{font-size:17px!important;font-weight:900!important;color:#f0f5f6!important}
.vstat-l{font-size:7px!important;color:#718891!important;letter-spacing:.08em!important;text-transform:uppercase!important;margin-top:6px!important}
.vip-sub{font-size:12px!important;letter-spacing:-.02em!important;color:#e7eff0!important;margin:22px 0 10px!important}
.tier-ladder{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.tier-card{padding:13px!important;border-radius:12px!important;background:linear-gradient(180deg,#0d1a22,#0a151c)!important;border:1px solid #1b343f!important;transition:transform .18s ease,border-color .18s ease!important}
.tier-card:hover{transform:translateY(-2px)!important;border-color:#2a4b58!important}
.tier-card.current{border-color:rgba(55,227,157,.38)!important;background:linear-gradient(180deg,#0f231f,#0a171a)!important;box-shadow:inset 0 0 0 1px rgba(55,227,157,.08)!important}
.tier-rank{font-size:7px!important;color:#617983!important;letter-spacing:.09em!important}
.tier-name{font-size:11px!important;font-weight:900!important;color:#edf4f5!important;margin-top:10px!important}
.tier-need{font-size:7px!important;color:#6e858e!important;margin-top:3px!important}
.tier-perks{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:10px!important}
.tier-perks span{font-size:7px!important;color:#95a9b0!important;background:#10232b!important;border:1px solid #1b3642!important;border-radius:999px!important;padding:4px 6px!important}
.tier-perks span:first-child{color:#b8f8de!important;border-color:rgba(55,227,157,.18)!important;background:rgba(55,227,157,.055)!important}
.missions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
.mission{padding:14px!important;background:#0d1921!important;border:1px solid #1b343f!important;border-radius:11px!important}
.mission .m-title{font-size:9px!important;color:#e6eef0!important;font-weight:820!important}
.mission .m-reward{font-size:8px!important;color:#6f858f!important;margin-top:6px!important}
.m-bar{height:6px!important;background:#142830!important;border-radius:999px!important;margin-top:12px!important}
.m-fill{background:linear-gradient(90deg,#2edc96,#5ce2b0)!important}
.m-right>span{font-size:7px!important;color:#8aa0a8!important}
.mission-claim,.mission-done{margin-top:9px!important}
.mission-claim{height:31px!important;border-radius:8px!important;background:#10282e!important;color:#bff8de!important;border:1px solid rgba(55,227,157,.22)!important;font-size:8px!important;font-weight:850!important}
.mission-done{font-size:8px!important;color:#6b9d87!important}

@media(max-width:840px){
  .auth-layout-v63{grid-template-columns:1fr}.auth-showcase-v63{display:none}
  .vip-hero{grid-template-columns:1fr!important}.tier-ladder{grid-template-columns:repeat(2,minmax(0,1fr))!important}.missions{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .settings-grid-v45{grid-template-columns:1fr!important}.settings-footer-v45{position:static!important}.settings-tabs-v45{overflow:auto}.settings-tab-v45{white-space:nowrap}
  .tier-ladder{grid-template-columns:1fr!important}.vip-stats{grid-template-columns:1fr 1fr!important}
}
@media(prefers-reduced-motion:reduce){.ref-gcard,.ref-gcard::after,.ref-gcard-image,.ref-play-overlay,.tier-card{transition:none!important}.ref-gcard:hover{transform:none!important}}
.ref-gcard-mini-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.ref-gcard-mini-meta span{font-size:6px;color:#6f858e;border:1px solid #17323e;border-radius:999px;padding:3px 5px;background:#0a1820;letter-spacing:.04em}.vip-club-note{margin-top:15px;padding:10px 11px;border-radius:10px;border:1px solid rgba(55,227,157,.12);background:rgba(55,227,157,.045);color:#769089;font-size:8px;line-height:1.55}.settings-overview-v63{margin:10px 20px 0!important;justify-content:space-between!important}.settings-overview-v63 button{margin-left:auto;height:30px!important;padding:0 10px!important;font-size:8px!important;border-radius:8px!important}
@media(max-width:640px){.settings-overview-v63{flex-wrap:wrap!important}.settings-overview-v63 button{width:100%;margin-left:0!important}}
.vip-identity-row{display:flex;align-items:center;gap:14px}.vip-current-info{min-width:0;flex:1}