:root {
  --bg: #07111f;
  --bg-2: #0d1d33;
  --panel: rgba(8, 18, 36, 0.72);
  --line: rgba(255,255,255,.12);
  --text: #f8fafc;
  --muted: #9fb0cb;
  --gold: #ffd76a;
  --gold-2: #ffb703;
  --green: #34d399;
  --red: #fb7185;
  --shadow: 0 22px 60px rgba(0,0,0,.35);
  --radius: 28px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;min-height:100%;font-family:'Inter','Poppins',sans-serif;color:var(--text)}
body{background:var(--bg);overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none !important}
.page-bg,.page-noise{position:fixed;inset:0;pointer-events:none}
.page-bg{background:
  radial-gradient(circle at 15% 20%, rgba(255,183,3,.18), transparent 24%),
  radial-gradient(circle at 85% 15%, rgba(52,211,153,.12), transparent 25%),
  radial-gradient(circle at 50% 80%, rgba(59,130,246,.16), transparent 30%),
  linear-gradient(180deg, rgba(7,17,31,.48), rgba(7,17,31,.78)),
  url('assets/bgdesktop.jpg') center/cover no-repeat;
  transform:scale(1.03);
}
.page-noise{opacity:.1;background-image:radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);background-size:18px 18px;mix-blend-mode:soft-light}
.screen{position:fixed;inset:0;padding:20px;display:none;align-items:center;justify-content:center;overflow:auto}
.screen.active{display:flex}
.glass-card{background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);position:relative;overflow:hidden}
.ambient{position:absolute;border-radius:999px;filter:blur(8px);opacity:.5;pointer-events:none}
.ambient-a{width:260px;height:260px;background:rgba(255,183,3,.14);top:7%;left:5%}
.ambient-b{width:320px;height:320px;background:rgba(59,130,246,.14);right:6%;bottom:10%}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.76rem;font-weight:800;letter-spacing:.12em;color:#d8e6ff;text-transform:uppercase}
.brand-copy h1,.login-top h2,.stage-head h2,.modal-head h3,.reward-top h3{margin:14px 0 10px;font-size:clamp(1.85rem,3vw,2.75rem);line-height:1.05}
.instruction,.login-top p{margin:0;color:var(--muted);line-height:1.7}

.auth-screen{align-items:center}
.auth-wrap{width:min(460px,100%);display:grid;gap:18px;position:relative;z-index:2}
.auth-wrap-single{justify-items:center}
.login-logo-box{width:min(280px,70vw);display:grid;place-items:center;padding:8px 0}
.main-event-logo{width:100%;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.login-card{width:100%;padding:28px;background:linear-gradient(180deg, rgba(11,24,47,.86), rgba(9,17,31,.94))}
.login-card-shine{position:absolute;inset:-1px;background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.12) 50%, transparent 75%);transform:translateX(-140%);animation:shine 7s linear infinite}
.login-top{position:relative;z-index:1;margin-bottom:22px;text-align:center}
.field{display:block;margin-bottom:16px}
.field>span{display:block;margin-bottom:8px;color:#dce8fb;font-weight:700;font-size:.95rem}
.field-box{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:0 16px;min-height:58px;transition:.25s ease}
.field-box:focus-within{border-color:rgba(255,215,106,.6);box-shadow:0 0 0 4px rgba(255,215,106,.12)}
.field-box i{color:#c8d8f1}
.field-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:1rem}
.field-box input::placeholder{color:#90a4c3}
.action-buttons{display:flex;gap:12px;margin-top:18px}.two-col>*{flex:1}.single-col>*{width:100%}
.btn{min-height:54px;padding:0 18px;border:0;border-radius:18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#1a1204;background:linear-gradient(180deg, #ffe08a, #ffbe2e);box-shadow:0 14px 30px rgba(255,190,46,.25)}
.btn-secondary{color:#fff;background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.14)}
.btn-ghost{color:#e8f0ff;background:linear-gradient(180deg, rgba(20,111,255,.28), rgba(20,111,255,.16));border:1px solid rgba(122,178,255,.25)}

.game-screen{padding:14px}
.game-shell{width:min(1180px,100%);display:grid;gap:14px}
.compact-shell{align-content:start}
.game-topbar{padding:12px 14px;background:linear-gradient(180deg, rgba(6,15,29,.72), rgba(8,18,36,.88))}
.topbar-track{display:flex;align-items:stretch;gap:12px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.topbar-track::-webkit-scrollbar{display:none}
.topbar-item{flex:0 0 auto}
.player-chip,.stat-card{min-height:72px;padding:12px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;color:#fff}
.player-chip{min-width:210px}
.player-avatar{width:48px;height:48px;border-radius:16px;background:linear-gradient(180deg, #243b63, #16253f);display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.player-meta{min-width:0}.player-meta .chip-label,.stat-label{display:block;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.player-meta strong,.stat-card strong{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-card{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04))}
.history-btn .stat-icon{color:#8ab4ff}.logout-btn .stat-icon{color:#ffb0b9}.key-counter .stat-icon{color:var(--gold)}
.stat-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08)}

.cards-stage{background:linear-gradient(180deg, rgba(8,18,36,.82), rgba(9,20,40,.64));padding:18px 18px 20px}
.compact-stage{width:min(920px,100%);justify-self:center;margin-top:18px}
.stage-head{text-align:center;max-width:680px;margin:0 auto 14px}
.stage-head h2{font-size:clamp(1.35rem,2.4vw,2rem);margin-bottom:8px}
.compact-cards{display:grid;gap:18px;justify-content:center}
.six-cards{grid-template-columns:repeat(3, minmax(150px,1fr));max-width:700px;margin:0 auto}
.pick-card{appearance:none;background:transparent;border:0;padding:0;position:relative;perspective:1800px;aspect-ratio:.72/1;min-height:176px;width:min(100%,172px);isolation:isolate;justify-self:center;transform:translateY(0);animation:cardFloat 3.8s ease-in-out infinite}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.35s cubic-bezier(.16,1,.3,1), filter .45s ease;filter:drop-shadow(0 18px 34px rgba(0,0,0,.38))}
.pick-card:hover .card-inner{transform:translateY(-10px) rotateX(8deg)}
.card-face{position:absolute;inset:0;border-radius:28px;backface-visibility:hidden;overflow:hidden;padding:16px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.16)}
.card-face::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg, rgba(255,255,255,.20), transparent 40%, rgba(255,255,255,.06) 70%);pointer-events:none}
.card-face::after{content:'';position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.card-back{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -40px 60px rgba(0,0,0,.22)}
.palette-1 .card-back{background:linear-gradient(180deg,#2d1d7c,#140d3e),radial-gradient(circle at top left,rgba(148,163,255,.28),transparent 30%)}
.palette-2 .card-back{background:linear-gradient(180deg,#004e7a,#082136),radial-gradient(circle at top left,rgba(103,232,249,.26),transparent 30%)}
.palette-3 .card-back{background:linear-gradient(180deg,#7a113a,#320718),radial-gradient(circle at top left,rgba(251,113,133,.28),transparent 30%)}
.palette-4 .card-back{background:linear-gradient(180deg,#17594b,#09251f),radial-gradient(circle at top left,rgba(52,211,153,.28),transparent 30%)}
.palette-5 .card-back{background:linear-gradient(180deg,#774208,#311802),radial-gradient(circle at top left,rgba(251,191,36,.28),transparent 30%)}
.palette-6 .card-back{background:linear-gradient(180deg,#4b1c56,#18071e),radial-gradient(circle at top left,rgba(244,114,182,.26),transparent 30%)}
.card-front{transform:rotateY(180deg);background:linear-gradient(180deg, rgba(255,244,215,.98), rgba(255,214,116,.98));color:#251200}
.card-top,.card-bottom{font-size:.82rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;position:relative;z-index:1}
.card-center{font-size:clamp(2.4rem,4vw,3.9rem);font-weight:800;line-height:1;display:grid;place-items:center;position:relative;z-index:1;text-shadow:0 10px 20px rgba(255,255,255,.08)}
.pick-card::before{content:'';position:absolute;inset:-7px;border-radius:30px;background:radial-gradient(circle at 50% 0%, rgba(255,215,106,.34), transparent 55%);opacity:0;transition:.3s;z-index:-1}
.pick-card:hover::before,.pick-card.opening::before{opacity:1}
.pick-card.opening .card-inner{transform:rotateY(180deg) scale(1.06)}
.pick-card.opening .card-front{background:linear-gradient(180deg,#fff5d6,#ffca5c);box-shadow:0 0 0 1px rgba(255,244,205,.8),0 0 30px rgba(255,195,74,.45), inset 0 1px 0 rgba(255,255,255,.6)}
.pick-card.opening.palette-1 .card-front{background:linear-gradient(180deg,#efe8ff,#9f85ff);color:#1f0d55}
.pick-card.opening.palette-2 .card-front{background:linear-gradient(180deg,#e1fbff,#5be4ff);color:#05384b}
.pick-card.opening.palette-3 .card-front{background:linear-gradient(180deg,#ffe1ea,#ff7d9f);color:#591028}
.pick-card.opening.palette-4 .card-front{background:linear-gradient(180deg,#e2fff3,#5ee0a8);color:#0d4534}
.pick-card.opening.palette-5 .card-front{background:linear-gradient(180deg,#fff3d6,#ffbf54);color:#633300}
.pick-card.opening.palette-6 .card-front{background:linear-gradient(180deg,#ffe4f1,#f586c0);color:#4f1236}
.pick-card.disabled{opacity:.44;pointer-events:none}
.pick-card.disabled .card-inner{filter:grayscale(.15) brightness(.8) drop-shadow(0 10px 20px rgba(0,0,0,.24))}
.pick-card.shaking .card-inner{animation:cardShake .6s ease-in-out}

.modal-overlay{position:fixed;inset:0;background:rgba(2,8,20,.68);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:18px;z-index:70}
.modal-overlay.active{display:flex}
.modal-card{width:min(780px,100%);max-height:min(88vh,860px);overflow:hidden;padding:24px;background:linear-gradient(180deg, rgba(10,22,41,.9), rgba(8,18,36,.96))}
.history-modal-card{width:min(760px,100%)}
.modal-head{padding-right:32px;margin-bottom:18px}.modal-head h3{font-size:1.8rem;margin-top:10px}
.modal-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:14px;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:1.8rem;line-height:1}
.prize-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;max-height:62vh;overflow:auto;padding-right:4px}
.prize-item{padding:14px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);text-align:center}
.prize-image{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.03);padding:10px;margin-bottom:10px}.prize-name{font-weight:700;color:#f8fafc}
.history-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.04)}
.history-table{width:100%;border-collapse:collapse}.history-table thead th{position:sticky;top:0;background:rgba(9,18,34,.96);padding:14px;color:#b2c2dd;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;text-align:left}.history-table tbody td{padding:16px 14px;border-top:1px solid rgba(255,255,255,.06);vertical-align:top}.history-reward{font-weight:700;color:#f8fafc}.history-code{margin-top:6px;color:#7bdcb5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.79rem}
.modal-actions{display:flex;justify-content:center;margin-top:18px}
.reward-overlay{z-index:90}.reward-card{width:min(520px,100%);padding:28px;text-align:center;background:linear-gradient(180deg, rgba(9,22,43,.94), rgba(8,18,36,.98))}
.reward-glow{position:absolute;inset:auto auto 0 50%;width:320px;height:320px;background:radial-gradient(circle, rgba(255,215,106,.22), transparent 65%);transform:translateX(-50%);pointer-events:none}
.reward-visual{width:180px;height:180px;border-radius:32px;margin:20px auto 16px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12);font-size:4.6rem;overflow:hidden}
.reward-visual img{width:100%;height:100%;object-fit:contain;padding:16px}.reward-name{font-size:1.8rem;font-weight:800;color:#ffe7ad}.reward-code-box{margin-top:16px;padding:16px;border-radius:22px;border:1px solid rgba(52,211,153,.24);background:rgba(52,211,153,.08)}
.reward-code-label{display:block;color:#b8eed8;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}.reward-code-box strong{display:block;margin:8px 0;font-size:1.45rem;letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#d2ffe8}.reward-code-box small{color:#a6c4b4}
#confettiCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.toast-container{position:fixed;top:20px;right:20px;z-index:100;display:grid;gap:10px;max-width:min(92vw,380px)}
.toast{padding:14px 16px;border-radius:18px;background:rgba(9,18,34,.92);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow);animation:toastIn .3s ease;color:#e5efff}
.maintenance-screen{background:rgba(2,8,20,.86);z-index:120}.maintenance-card{padding:34px;text-align:center;max-width:480px}.maintenance-icon{width:90px;height:90px;border-radius:28px;display:grid;place-items:center;margin:0 auto 18px;background:rgba(255,215,106,.14);font-size:2.6rem;color:var(--gold);animation:spin 6s linear infinite}
.snow-container,.sunburst,.header-logo-container,.choice-banner,.sponsor-logo,.confirm-overlay,.brand-panel,.hero-panel{display:none !important}

@keyframes shine{to{transform:translateX(140%)}}
@keyframes cardShake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width: 900px){
  html,body{overflow:auto}
  .screen{padding:12px;align-items:flex-start}
  .auth-screen{padding-top:22px;padding-bottom:22px}
  .login-card{padding:22px}
  .main-event-logo{max-width:240px}
  .game-screen{padding:10px}
  .game-shell{gap:12px}
  .game-topbar{position:sticky;top:10px;z-index:5}
  .topbar-track{gap:10px}
  .player-chip,.stat-card{min-height:64px;padding:12px 14px;border-radius:18px}
  .player-chip{min-width:184px}
  .stat-icon{width:34px;height:34px;border-radius:12px}
  .compact-stage{width:100%;padding:16px 12px 18px}
  .stage-head{margin-bottom:12px}
  .stage-head h2{font-size:1.3rem}
  .six-cards{max-width:560px;gap:12px}
  .pick-card{width:min(100%,148px);min-height:158px}
  .card-face{padding:12px;border-radius:22px}.card-center{font-size:2.2rem}.card-top,.card-bottom{font-size:.72rem;letter-spacing:.15em}
  .modal-card{padding:18px;border-radius:24px}.prize-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;max-height:58vh}.reward-card{padding:22px}.reward-visual{width:150px;height:150px;border-radius:24px}.reward-name{font-size:1.45rem}.toast-container{left:12px;right:12px;top:12px;max-width:none}
}
@media (max-width: 560px){
  .screen{padding:10px}
  .login-logo-box{width:min(220px,68vw)}
  .action-buttons.two-col{display:grid;grid-template-columns:1fr}
  .compact-stage{padding:14px 10px 16px}
  .six-cards{grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px}
  .pick-card{width:100%;min-height:unset;aspect-ratio:.68/1}
  .reward-top h3,.modal-head h3{font-size:1.35rem}
  .field-box{min-height:54px;border-radius:16px;padding:0 14px}
  .btn{min-height:50px;border-radius:16px}
  .modal-close{top:10px;right:10px;width:38px;height:38px;border-radius:12px}
}


/* Premium refresh */
.auth-wrap{width:min(500px,100%)}
.login-logo-box{position:relative}
.login-logo-box::before{content:'';position:absolute;inset:6% 14%;background:radial-gradient(circle, rgba(255,215,106,.28), transparent 65%);filter:blur(28px);z-index:-1}
.main-event-logo{filter:drop-shadow(0 22px 42px rgba(0,0,0,.44)) drop-shadow(0 0 28px rgba(255,215,106,.2))}
.login-card{padding:34px;background:linear-gradient(160deg, rgba(18,32,61,.96), rgba(8,16,31,.95) 56%, rgba(31,15,54,.92));border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1);animation:loginLuxuryFloat 5.6s ease-in-out infinite}
.login-card::before{content:'';position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);background:radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 30%),radial-gradient(circle at bottom right, rgba(255,215,106,.18), transparent 28%),radial-gradient(circle at center top, rgba(129,140,248,.12), transparent 36%);pointer-events:none}
.login-card::after{content:'';position:absolute;inset:-30% -10%;background:conic-gradient(from 180deg, transparent, rgba(255,215,106,.08), transparent 30%, rgba(255,255,255,.04), transparent 58%, rgba(139,92,246,.08), transparent 80%);animation:auroraSpin 12s linear infinite;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.login-top .eyebrow,.stage-head .eyebrow,.modal-head .eyebrow,.reward-top .eyebrow{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.15)}
.login-top h2{letter-spacing:-.03em}
.login-top p{max-width:360px;margin:0 auto}
.field-box{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:auto -35% 0 auto;width:54%;height:160%;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.36) 48%, transparent 100%);transform:translateX(160%) rotate(16deg);transition:transform .55s ease;pointer-events:none}
.btn:hover::after{transform:translateX(-240%) rotate(16deg)}
.btn-submit{box-shadow:0 16px 34px rgba(255,190,46,.32), inset 0 1px 0 rgba(255,255,255,.48)}
.btn-prize,.btn-telegram{animation:luxFloat 3.2s ease-in-out infinite;isolation:isolate}
.btn-telegram{animation-delay:.55s}
.btn-prize::before,.btn-telegram::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(90deg, rgba(255,215,106,.12), rgba(255,255,255,.06), rgba(123,220,181,.16));opacity:.95;z-index:-2}
.btn-prize span,.btn-telegram span,.btn-submit span{position:relative;z-index:1}
.btn-prize{background:linear-gradient(135deg, rgba(255,214,102,.24), rgba(255,255,255,.08) 52%, rgba(255,180,0,.18));border:1px solid rgba(255,221,132,.34);box-shadow:0 14px 30px rgba(255,183,3,.12)}
.btn-telegram{background:linear-gradient(135deg, rgba(76,159,255,.26), rgba(255,255,255,.08) 52%, rgba(118,188,255,.16));border:1px solid rgba(143,192,255,.3);box-shadow:0 14px 30px rgba(20,111,255,.14)}
.btn-prize:hover,.btn-telegram:hover{transform:translateY(-3px) scale(1.01)}
.game-topbar{padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.topbar-track-main{justify-content:center;flex-wrap:wrap;overflow:visible;padding-bottom:0}
.premium-chip,.bottom-action-btn{position:relative;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));box-shadow:0 16px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08)}
.premium-chip::before,.bottom-action-btn::before{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(145deg, rgba(255,255,255,.08), transparent 40%, rgba(255,215,106,.08));pointer-events:none}
.player-chip,.stat-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.player-chip{min-width:250px}
.key-counter{min-width:210px}
.cards-stage{background:linear-gradient(180deg, rgba(8,18,36,.82), rgba(9,20,40,.6));box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);margin-top:18px}
.game-bottom-bar{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px;position:sticky;bottom:0;z-index:6;padding:18px 0 max(10px, env(safe-area-inset-bottom));margin-top:12px}
.bottom-action-btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px;padding:12px 18px;border-radius:24px;color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.bottom-action-btn strong{display:block;font-size:1rem}
.bottom-action-btn .stat-label{margin-bottom:4px}
.bottom-action-btn .stat-icon{flex:0 0 auto}
.bottom-action-btn:hover{transform:translateY(-2px)}
.logout-btn,.history-btn{background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05))}
.prize-modal-content{width:min(900px,100%);background:linear-gradient(160deg, rgba(11,24,47,.95), rgba(8,18,36,.97) 56%, rgba(33,17,58,.94));}
.prize-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;align-items:start}
.prize-item{position:relative;padding:16px 14px 18px;background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.prize-item::before{content:'';position:absolute;inset:1px;border-radius:19px;background:radial-gradient(circle at top, rgba(255,215,106,.12), transparent 42%);pointer-events:none}
.prize-name{font-size:.95rem;line-height:1.4}
.reward-card{width:min(580px,100%);padding:34px 28px 30px;background:linear-gradient(165deg, rgba(23,13,51,.96), rgba(8,19,38,.98) 50%, rgba(38,20,6,.95));border:1px solid rgba(255,229,158,.22);box-shadow:0 36px 90px rgba(0,0,0,.5), 0 0 40px rgba(255,200,70,.08)}
.reward-card::before{content:'';position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);background:radial-gradient(circle at top center, rgba(255,255,255,.1), transparent 36%),radial-gradient(circle at bottom left, rgba(255,215,106,.16), transparent 26%),radial-gradient(circle at bottom right, rgba(255,95,143,.12), transparent 26%);pointer-events:none}
.reward-glow{width:460px;height:460px;background:radial-gradient(circle, rgba(255,215,106,.34), rgba(255,112,67,.16) 34%, rgba(244,114,182,.12) 48%, transparent 70%);bottom:-190px;filter:blur(2px)}
.reward-top{position:relative}
.reward-top::before,.reward-top::after{content:'✦';position:absolute;top:-10px;font-size:1.05rem;color:rgba(255,226,145,.8)}
.reward-top::before{left:18px}.reward-top::after{right:18px}
.reward-visual{position:relative;width:220px;height:220px;border-radius:40px;background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px rgba(0,0,0,.22);overflow:visible}
.reward-visual::before{content:'';position:absolute;inset:-12px;border-radius:48px;border:1px solid rgba(255,215,106,.32);opacity:.85;animation:haloPulse 2.8s ease-in-out infinite}
.reward-visual::after{content:'';position:absolute;inset:-28px;border-radius:50%;background:radial-gradient(circle, rgba(255,240,190,.22), transparent 62%);z-index:-1;animation:rewardAura 3.6s ease-in-out infinite}
.reward-name{font-size:1.95rem;letter-spacing:-.03em;text-shadow:0 10px 25px rgba(255,198,79,.16)}
.reward-code-box{background:linear-gradient(180deg, rgba(52,211,153,.11), rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.reward-visual-wrap,.reward-sparkles{position:absolute;inset:0}
.reward-visual-wrap{display:grid;place-items:center}
.reward-image,.reward-emoji{position:relative;z-index:2;max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(255,205,99,.28)) drop-shadow(0 0 24px rgba(255,222,138,.32));animation:rewardLevitate 3.2s ease-in-out infinite}
.reward-sparkles::before,.reward-sparkles::after{content:'✦ ✧ ✦';position:absolute;font-size:1.35rem;letter-spacing:18px;color:rgba(255,226,145,.92);text-shadow:0 0 18px rgba(255,215,106,.45);animation:sparkOrbit 4s linear infinite}
.reward-sparkles::before{top:10%;left:16%}
.reward-sparkles::after{right:10%;bottom:14%;animation-direction:reverse;animation-duration:5.2s}
.reward-overlay.active .reward-card{animation:rewardPop .8s cubic-bezier(.2,.9,.2,1.2)}
@keyframes luxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes loginLuxuryFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.005)}}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rewardLevitate{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}
@keyframes sparkOrbit{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(8deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes rewardAura{0%,100%{transform:scale(.95);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes rewardPop{0%{opacity:0;transform:translateY(18px) scale(.92)}100%{opacity:1;transform:none}}
@media (max-width: 900px){
  .topbar-track-main{justify-content:stretch;gap:12px}
  .player-chip,.key-counter{min-width:0;flex:1 1 220px}
  .cards-stage{margin-top:24px}
  .game-bottom-bar{gap:10px;padding-top:10px;margin-top:14px}
  .bottom-action-btn{min-height:62px;padding:12px 14px;border-radius:20px}
  .six-cards{grid-template-columns:repeat(3, minmax(132px,1fr));max-width:560px;gap:14px}
  .prize-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
  .prize-name{font-size:.85rem}
}
@media (max-width: 560px){
  .login-card{padding:24px 18px}
  .player-chip,.key-counter{flex:1 1 100%}
  .game-topbar{margin-bottom:6px}
  .cards-stage{margin-top:28px}
  .game-bottom-bar{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-top:18px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .bottom-action-btn{min-height:58px;padding:10px 12px;border-radius:18px;gap:10px}
  .bottom-action-btn strong{font-size:.9rem}
  .bottom-action-btn .stat-label{font-size:.68rem}
  .six-cards{grid-template-columns:repeat(3, minmax(0,1fr));max-width:100%;gap:10px}
  .pick-card{min-height:152px;width:100%}
  .prize-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:8px}
  .prize-item{padding:10px 8px 12px;border-radius:16px}
  .prize-image{border-radius:12px;padding:6px;margin-bottom:8px}
  .prize-name{font-size:.74rem}
  .reward-card{padding:26px 18px 20px}
  .reward-visual{width:188px;height:188px}
}


/* VIP Luxury upgrade */
:root{--vip-gold:#f4cf72;--vip-gold-2:#ffefba;--vip-dark:#05070e;--vip-dark-2:#120d06}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -8%, rgba(255,220,120,.13), transparent 32%),radial-gradient(circle at 12% 18%, rgba(255,209,102,.07), transparent 24%),radial-gradient(circle at 88% 16%, rgba(255,215,106,.05), transparent 22%);z-index:0}
.page-noise{opacity:.14;mix-blend-mode:soft-light}
.auth-wrap{position:relative}
.auth-wrap::before,.auth-wrap::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(16px);z-index:0}
.auth-wrap::before{width:180px;height:180px;left:-46px;top:20px;background:radial-gradient(circle, rgba(255,215,106,.16), transparent 66%);animation:vipOrb 6.4s ease-in-out infinite}
.auth-wrap::after{width:220px;height:220px;right:-70px;bottom:-28px;background:radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);animation:vipOrb 7.2s ease-in-out infinite reverse}
.login-card{overflow:hidden;background:linear-gradient(155deg, rgba(28,20,7,.97) 0%, rgba(12,15,25,.97) 38%, rgba(20,12,5,.98) 100%);border:1px solid rgba(244,207,114,.26);box-shadow:0 34px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,237,183,.04), inset 0 1px 0 rgba(255,245,217,.12);animation:loginLuxuryFloat 5.4s ease-in-out infinite, vipCardGlow 4.8s ease-in-out infinite alternate}
.login-card-shine{background:linear-gradient(120deg, transparent 22%, rgba(255,244,206,.14) 48%, rgba(255,214,102,.18) 50%, transparent 78%);animation:shine 5.8s linear infinite}
.login-card::before{background:radial-gradient(circle at 14% 10%, rgba(255,241,196,.14), transparent 26%),radial-gradient(circle at 78% 14%, rgba(244,207,114,.18), transparent 24%),radial-gradient(circle at 50% 105%, rgba(255,181,72,.12), transparent 34%)}
.login-card::after{inset:-35% -12%;background:conic-gradient(from 180deg, transparent, rgba(255,245,217,.04), transparent 25%, rgba(244,207,114,.14), transparent 44%, rgba(255,255,255,.06), transparent 62%, rgba(252,191,73,.10), transparent 82%);opacity:1;animation:auroraSpin 14s linear infinite}
.login-top h2{background:linear-gradient(180deg, #fff9ea, #f4cf72 75%, #d5a73a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.login-top p{color:#d9cfae}
.field > span{color:#f5deb0}
.field-box{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));border-color:rgba(244,207,114,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.12)}
.field-box:focus-within{border-color:rgba(244,207,114,.48);box-shadow:0 0 0 4px rgba(244,207,114,.08), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.22)}
.btn-submit{background:linear-gradient(180deg, #fff1bf, #f4cf72 56%, #d59f25);color:#2d1a00;border:1px solid rgba(255,238,180,.46);box-shadow:0 18px 34px rgba(212,159,37,.28), inset 0 1px 0 rgba(255,255,255,.7)}
.btn-prize,.btn-telegram{animation:luxFloat 2.8s ease-in-out infinite, vipPulse 3.4s ease-in-out infinite}
.btn-prize{background:linear-gradient(135deg, rgba(244,207,114,.28), rgba(255,255,255,.09) 52%, rgba(173,116,17,.22));border:1px solid rgba(255,226,145,.34);box-shadow:0 14px 34px rgba(212,159,37,.16)}
.btn-telegram{background:linear-gradient(135deg, rgba(244,207,114,.16), rgba(255,255,255,.08) 52%, rgba(89,53,11,.24));border:1px solid rgba(255,226,145,.24);box-shadow:0 14px 34px rgba(255,196,89,.12)}
.premium-chip,.bottom-action-btn,.cards-stage,.modal-card,.prize-item{border-color:rgba(244,207,114,.18)}
.premium-chip,.bottom-action-btn{background:linear-gradient(180deg, rgba(255,252,242,.08), rgba(255,214,102,.03));box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,249,232,.08), inset 0 0 0 1px rgba(255,224,138,.03)}
.player-avatar,.stat-icon{filter:drop-shadow(0 0 10px rgba(244,207,114,.18))}
.cards-stage{position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(8,10,15,.74), rgba(18,13,6,.54) 100%);box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,241,196,.06), inset 0 0 60px rgba(244,207,114,.04)}
.cards-stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top, rgba(244,207,114,.08), transparent 32%),linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%)}
.compact-stage{margin-top:26px}
.six-cards{gap:18px;max-width:740px}
.pick-card{transform-style:preserve-3d}
.pick-card:nth-child(1){animation-delay:0s}.pick-card:nth-child(2){animation-delay:.18s}.pick-card:nth-child(3){animation-delay:.36s}.pick-card:nth-child(4){animation-delay:.54s}.pick-card:nth-child(5){animation-delay:.72s}.pick-card:nth-child(6){animation-delay:.9s}
.pick-card::after{content:'';position:absolute;inset:auto 12% -8%;height:24px;border-radius:50%;background:radial-gradient(circle, rgba(0,0,0,.42), transparent 68%);filter:blur(8px);z-index:-2;opacity:.7;transform:translateZ(-1px)}
.card-inner{transition:transform 1.9s cubic-bezier(.14,.98,.14,1.01), filter .45s ease;filter:drop-shadow(0 24px 36px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(244,207,114,.06))}
.pick-card:hover .card-inner{transform:translateY(-14px) rotateX(12deg) rotateY(-3deg)}
.card-face{border:1px solid rgba(255,237,183,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 26px rgba(0,0,0,.18)}
.card-face::after{border-color:rgba(255,229,158,.18)}
.card-back{background-blend-mode:screen,normal;position:relative}
.card-back .card-center,.card-front .card-center{letter-spacing:.02em}
.card-back::after{box-shadow:inset 0 0 0 1px rgba(255,240,190,.08), 0 0 0 1px rgba(255,240,190,.03)}
.palette-1 .card-back{background:linear-gradient(180deg,#231402,#0d0a12), radial-gradient(circle at top left, rgba(244,207,114,.24), transparent 32%), radial-gradient(circle at bottom right, rgba(145,108,29,.18), transparent 28%)}
.palette-2 .card-back{background:linear-gradient(180deg,#1a1204,#0b0f16), radial-gradient(circle at top left, rgba(255,231,170,.24), transparent 32%), radial-gradient(circle at bottom right, rgba(124,91,20,.18), transparent 28%)}
.palette-3 .card-back{background:linear-gradient(180deg,#241006,#10070d), radial-gradient(circle at top left, rgba(255,203,115,.25), transparent 34%), radial-gradient(circle at bottom right, rgba(255,129,64,.10), transparent 28%)}
.palette-4 .card-back{background:linear-gradient(180deg,#191205,#070b10), radial-gradient(circle at top left, rgba(245,216,137,.22), transparent 34%), radial-gradient(circle at bottom right, rgba(123,88,16,.18), transparent 28%)}
.palette-5 .card-back{background:linear-gradient(180deg,#26190a,#120c06), radial-gradient(circle at top left, rgba(255,219,132,.26), transparent 34%), radial-gradient(circle at bottom right, rgba(160,103,20,.18), transparent 28%)}
.palette-6 .card-back{background:linear-gradient(180deg,#201507,#100b14), radial-gradient(circle at top left, rgba(255,221,147,.24), transparent 34%), radial-gradient(circle at bottom right, rgba(155,116,36,.18), transparent 28%)}
.card-front{background:linear-gradient(180deg, #fff7dc, #f4cf72 62%, #d59f25);color:#291700}
.pick-card.opening .card-inner{transform:rotateY(180deg) translateY(-8px) scale(1.09)}
.pick-card.opening::before{opacity:1;filter:blur(4px)}
.pick-card.opening .card-front{box-shadow:0 0 0 1px rgba(255,244,205,.85),0 0 38px rgba(255,195,74,.48), 0 0 70px rgba(255,216,128,.12), inset 0 1px 0 rgba(255,255,255,.7)}
.game-bottom-bar{margin-top:18px;padding-top:10px;padding-bottom:max(18px, env(safe-area-inset-bottom));}
.bottom-action-btn{min-height:72px;border-radius:26px}
.reward-card{overflow:hidden;background:linear-gradient(165deg, rgba(16,11,5,.98), rgba(19,12,4,.98) 26%, rgba(11,14,23,.99) 60%, rgba(20,11,5,.98));border:1px solid rgba(255,226,145,.28);box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 50px rgba(244,207,114,.10)}
.reward-card::after{content:'';position:absolute;inset:-10% -30%;pointer-events:none;background:conic-gradient(from 90deg, transparent, rgba(255,236,180,.06), transparent 22%, rgba(244,207,114,.09), transparent 54%, rgba(255,255,255,.04), transparent 84%);animation:auroraSpin 10s linear infinite}
.reward-glow{width:520px;height:520px;background:radial-gradient(circle, rgba(255,224,133,.42), rgba(255,152,80,.16) 34%, rgba(255,72,118,.14) 48%, transparent 72%);bottom:-225px;left:50%;transform:translateX(-50%)}
.reward-visual{background:radial-gradient(circle at 50% 22%, rgba(255,251,236,.18), rgba(255,255,255,.05) 42%, rgba(244,207,114,.08) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 48px rgba(0,0,0,.30), 0 0 44px rgba(244,207,114,.10)}
.reward-visual::before{border-color:rgba(255,226,145,.46)}
.reward-visual-wrap::before{content:'';position:absolute;inset:18px;border-radius:32px;background:radial-gradient(circle, rgba(255,221,145,.18), transparent 62%);filter:blur(6px)}
.reward-particle{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle, rgba(255,245,217,1), rgba(244,207,114,.72) 44%, rgba(244,207,114,0) 70%);box-shadow:0 0 18px rgba(244,207,114,.45);animation:rewardParticleDrift var(--duration,4.5s) ease-in-out infinite;animation-delay:var(--delay,0s);opacity:.85}
.reward-visual .reward-particle:nth-child(odd){width:7px;height:7px}
.reward-image,.reward-emoji{animation:rewardLevitate 3.2s ease-in-out infinite, vipPulse 2.8s ease-in-out infinite alternate}
.prize-modal-content,.history-modal-card{background:linear-gradient(160deg, rgba(16,10,5,.96), rgba(9,12,20,.98) 56%, rgba(22,13,5,.97))}
.prize-item{background:linear-gradient(180deg, rgba(255,248,229,.08), rgba(255,214,102,.04));box-shadow:inset 0 1px 0 rgba(255,245,217,.06), 0 14px 24px rgba(0,0,0,.14)}
.prize-image{background:radial-gradient(circle at 50% 30%, rgba(255,233,170,.18), rgba(255,255,255,.06) 50%, transparent 76%)}
@keyframes vipOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.08)}}
@keyframes vipCardGlow{0%{box-shadow:0 34px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,237,183,.04), inset 0 1px 0 rgba(255,245,217,.12)}100%{box-shadow:0 36px 110px rgba(0,0,0,.6), 0 0 40px rgba(244,207,114,.08), inset 0 1px 0 rgba(255,245,217,.14)}}
@keyframes vipPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(244,207,114,0))}50%{filter:drop-shadow(0 0 12px rgba(244,207,114,.22))}}
@keyframes rewardParticleDrift{0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:0}15%{opacity:.9}50%{transform:translate3d(var(--x,18px), calc(var(--y,-50px) * .6), 0) scale(1)}100%{transform:translate3d(calc(var(--x,18px) * 1.3), var(--y,-50px), 0) scale(.72);opacity:0}}
@media (max-width: 900px){
  .compact-stage{margin-top:32px}
  .topbar-track-main{margin-bottom:10px}
  .game-bottom-bar{margin-top:22px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media (max-width: 560px){
  .auth-wrap::before{left:-70px;top:30px}
  .auth-wrap::after{right:-90px;bottom:-40px}
  .login-card{padding:24px 16px 22px}
  .game-topbar{margin-bottom:12px}
  .topbar-track-main{gap:10px}
  .compact-stage{margin-top:36px}
  .cards-stage{padding-top:18px}
  .six-cards{gap:10px}
  .card-inner{transition-duration:2.05s}
  .game-bottom-bar{position:sticky;bottom:0;margin-top:26px;padding-top:14px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .bottom-action-btn{min-height:62px}
  .reward-card{padding:28px 18px 22px}
  .reward-glow{width:430px;height:430px;bottom:-185px}
}


/* Ultra VIP purple fan layout refinement */
:root{
  --vip-purple-1:#9b5cff;
  --vip-purple-2:#6f3cff;
  --vip-purple-3:#2b0d59;
  --vip-lilac:#e7d8ff;
}

/* reward popup: no solid card background, only blur overlay + glowing content */
.reward-overlay{
  background:rgba(5,8,18,.30);
  backdrop-filter:blur(18px) saturate(120%);
}
.reward-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  max-height:none;
}
.reward-card::before,
.reward-card::after{display:none !important}
.reward-top,.reward-name,.reward-code-box,.reward-actions{position:relative;z-index:2}
.reward-glow{
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(168,107,255,.26) 0%, rgba(255,213,94,.18) 24%, rgba(255,255,255,.08) 34%, transparent 68%);
  filter:blur(12px);
  bottom:auto; top:50%; transform:translate(-50%,-50%);
}
.reward-visual{
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.18), rgba(160,86,255,.12) 28%, rgba(255,214,102,.08) 55%, transparent 72%) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 70px rgba(155,92,255,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.reward-visual::before{
  content:'';position:absolute;inset:8% 14%;border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
  filter:blur(10px);animation:vipHalo 2.8s ease-in-out infinite alternate;pointer-events:none;
}
.reward-image,.reward-emoji{
  filter:drop-shadow(0 0 24px rgba(255,255,255,.32)) drop-shadow(0 0 28px rgba(167,94,255,.50)) drop-shadow(0 0 54px rgba(255,209,92,.30));
  animation:rewardLevitate 3.2s ease-in-out infinite, vipPulse 2.2s ease-in-out infinite alternate, rewardSwing 4.6s ease-in-out infinite;
}
.reward-name{
  text-shadow:0 0 18px rgba(255,215,106,.24), 0 0 28px rgba(168,107,255,.22);
}
.reward-code-box{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,232,173,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
}

/* mobile login buttons side by side */
@media (max-width: 560px){
  .action-buttons.two-col{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px}
  .action-buttons.two-col .btn span{font-size:.92rem}
}

/* fan-like premium playing cards */
.compact-stage{overflow:visible}
.compact-cards.six-cards{
  display:flex !important;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  max-width:1000px;
  min-height:330px;
  padding:14px 8px 10px;
}
.pick-card{
  width:min(17vw,168px);
  min-height:240px;
  aspect-ratio:.71/1;
  transform-origin:50% 88%;
  margin-inline:-28px;
}
.pick-card:nth-child(1){transform:translateY(18px) rotate(-20deg);z-index:1}
.pick-card:nth-child(2){transform:translateY(8px) rotate(-12deg);z-index:2}
.pick-card:nth-child(3){transform:translateY(-2px) rotate(-4deg);z-index:3}
.pick-card:nth-child(4){transform:translateY(-2px) rotate(4deg);z-index:4}
.pick-card:nth-child(5){transform:translateY(8px) rotate(12deg);z-index:5}
.pick-card:nth-child(6){transform:translateY(18px) rotate(20deg);z-index:6}
.pick-card{animation:cardFanFloat 4.6s ease-in-out infinite;animation-delay:var(--card-delay)}
.pick-card:hover{z-index:4}
.pick-card:hover .card-inner{transform:translateY(-14px) rotateX(10deg) scale(1.04)}
.pick-card::before{inset:-10px;border-radius:32px;background:radial-gradient(circle at 50% 5%, rgba(175,107,255,.36), transparent 58%), radial-gradient(circle at 50% 95%, rgba(255,219,120,.20), transparent 55%)}
.card-inner{transition:transform 1.9s cubic-bezier(.12,1,.22,1), filter .55s ease}
.card-face{
  border-radius:24px;
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 0 0 1px rgba(35,16,68,.62), 0 22px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.55);
}
.card-face::after{inset:9px;border-radius:18px;border:2px solid rgba(255,255,255,.88)}
.card-back{
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -50px 80px rgba(29,9,68,.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), transparent 32%),
    linear-gradient(180deg, #bb8cff 0%, #8f56ff 20%, #672cff 54%, #360c77 100%) !important;
}
.card-back::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 25%),
    linear-gradient(140deg, rgba(255,255,255,.24), transparent 32%, rgba(255,255,255,.10) 58%, transparent 72%);
}
.card-back .card-top,.card-back .card-bottom{color:#fff7ff;text-shadow:0 2px 10px rgba(0,0,0,.26)}
.card-back .card-top,.card-back .card-bottom{font-size:.9rem;letter-spacing:.24em}
.card-back .card-center{
  font-size:clamp(3.3rem,6vw,5rem);
  text-shadow:0 6px 22px rgba(255,255,255,.20), 0 0 18px rgba(255,255,255,.18);
}
.card-back .card-center::before,
.card-back .card-center::after,
.card-back .card-top::before,
.card-back .card-top::after,
.card-back .card-bottom::before,
.card-back .card-bottom::after{
  position:absolute;content:'♠';font-family:inherit;color:#fff;opacity:.95;
}
.card-back .card-top::before{left:-2px;top:10px;font-size:1.05rem}
.card-back .card-top::after{right:-2px;top:10px;font-size:1.05rem;content:'♥'}
.card-back .card-bottom::before{left:-2px;bottom:8px;font-size:1.05rem;content:'♣'}
.card-back .card-bottom::after{right:-2px;bottom:8px;font-size:1.05rem;content:'♦'}
.card-back .card-center::before{left:12%;top:14%;font-size:1.6rem;content:'♦'}
.card-back .card-center::after{right:12%;bottom:14%;font-size:1.6rem;content:'♣'}
.card-front{
  background:linear-gradient(180deg, #fffdf7 0%, #f8f1ff 55%, #ecd9ff 100%) !important;
  color:#3b156d;
}
.pick-card.opening .card-inner{transform:rotateY(180deg) scale(1.08)}
.pick-card.opening .card-front{
  box-shadow:0 0 0 1px rgba(255,255,255,.92), 0 0 28px rgba(168,107,255,.48), 0 0 48px rgba(255,218,114,.26), inset 0 1px 0 rgba(255,255,255,.92);
}
.pick-card.opening.palette-1 .card-front,
.pick-card.opening.palette-2 .card-front,
.pick-card.opening.palette-3 .card-front,
.pick-card.opening.palette-4 .card-front,
.pick-card.opening.palette-5 .card-front,
.pick-card.opening.palette-6 .card-front{
  background:linear-gradient(180deg, #fffefd 0%, #f4e9ff 38%, #d39cff 100%) !important;
  color:#541a8b;
}

/* spacing refinement */
@media (max-width: 900px){
  .compact-stage{margin-top:44px !important}
  .game-bottom-bar{margin-top:28px !important;padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important}
  .compact-cards.six-cards{min-height:250px;padding-top:8px}
  .pick-card{width:min(17vw,124px);min-height:205px;margin-inline:-24px}
  .pick-card:nth-child(1){transform:translateY(14px) rotate(-16deg);z-index:1}
  .pick-card:nth-child(2){transform:translateY(7px) rotate(-10deg);z-index:2}
  .pick-card:nth-child(3){transform:translateY(0) rotate(-4deg);z-index:3}
  .pick-card:nth-child(4){transform:translateY(0) rotate(4deg);z-index:4}
  .pick-card:nth-child(5){transform:translateY(7px) rotate(10deg);z-index:5}
  .pick-card:nth-child(6){transform:translateY(14px) rotate(16deg);z-index:6}
}
@media (max-width: 560px){
  .compact-cards.six-cards{min-height:220px;padding-top:6px}
  .pick-card{width:21vw;min-height:150px;margin-inline:-22px}
  .pick-card:nth-child(1){transform:translateY(14px) rotate(-15deg);z-index:1}
  .pick-card:nth-child(2){transform:translateY(7px) rotate(-9deg);z-index:2}
  .pick-card:nth-child(3){transform:translateY(0) rotate(-3deg);z-index:3}
  .pick-card:nth-child(4){transform:translateY(0) rotate(3deg);z-index:4}
  .pick-card:nth-child(5){transform:translateY(7px) rotate(9deg);z-index:5}
  .pick-card:nth-child(6){transform:translateY(14px) rotate(15deg);z-index:6}
  .card-face{padding:10px;border-radius:18px}
  .card-face::after{inset:7px;border-radius:13px}
  .card-back .card-top,.card-back .card-bottom{font-size:.62rem;letter-spacing:.15em}
  .card-back .card-center{font-size:2.35rem}
  .game-bottom-bar{margin-top:34px !important;padding-top:18px !important;padding-bottom:calc(42px + env(safe-area-inset-bottom)) !important}
}

@keyframes cardFanFloat{
  0%,100%{filter:drop-shadow(0 16px 26px rgba(0,0,0,.26))}
  50%{filter:drop-shadow(0 24px 38px rgba(0,0,0,.36))}
}
@keyframes vipHalo{from{transform:scale(.92);opacity:.55}to{transform:scale(1.08);opacity:1}}
@keyframes rewardSwing{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}


/* mobile refinement fix: lower login card, prevent game screen clipping, taller portrait cards, no stage box */
.game-screen{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.game-shell{min-height:max-content}
.cards-stage,
.compact-stage{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.cards-stage::before,
.cards-stage::after{display:none !important}
.cards-stage{padding:8px 0 0 !important}
.compact-stage{width:min(980px,100%);margin-top:22px !important}

.pick-card{
  width:min(16vw,150px);
  min-height:260px;
  aspect-ratio:.58/1;
}
.card-face{border-radius:22px}
.card-face::after{border-radius:16px}

@media (max-width: 900px){
  .auth-screen{align-items:flex-start !important;padding-top:max(44px, env(safe-area-inset-top) + 24px) !important;padding-bottom:26px !important}
  .auth-wrap{margin-top:18px}
  .login-logo-box{margin-top:6px}
  .login-card{margin-top:10px}

  .game-screen{align-items:flex-start !important;padding:12px 12px calc(24px + env(safe-area-inset-bottom)) !important}
  .game-shell,.compact-shell{width:min(100%, 560px);margin-inline:auto}
  .compact-shell{min-height:calc(100dvh - 24px);padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .game-topbar,.compact-stage,.game-bottom-bar{width:100%;margin-inline:auto}
  .game-topbar{margin-top:4px}
  .compact-stage{margin-top:26px !important}
  .game-bottom-bar{position:sticky;bottom:0;margin-top:24px !important}
  .compact-cards.six-cards{width:100%;min-height:290px;padding:8px 2px 0;overflow:visible;justify-content:center}
  .pick-card{width:min(16vw,118px);min-height:230px;aspect-ratio:.58/1;margin-inline:-22px}
}

@media (max-width: 560px){
  .auth-screen{padding-top:max(72px, env(safe-area-inset-top) + 42px) !important}
  .auth-wrap{margin-top:28px}
  .login-card{margin-top:14px}

  .game-screen{padding:12px 10px calc(28px + env(safe-area-inset-bottom)) !important}
  .game-shell,.compact-shell{width:min(100%, 460px);margin-inline:auto}
  .compact-shell{min-height:calc(100dvh - 24px);padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .topbar-track-main{gap:10px}
  .compact-stage{margin-top:22px !important}
  .cards-stage{padding-top:0 !important}
  .compact-cards.six-cards{width:100%;min-height:250px;max-width:100%;padding:4px 0 0;justify-content:center}
  .pick-card{width:21vw;min-height:182px;aspect-ratio:.56/1;margin-inline:-20px}
  .pick-card:nth-child(1){transform:translateY(10px) rotate(-13deg);z-index:1}
  .pick-card:nth-child(2){transform:translateY(5px) rotate(-8deg);z-index:2}
  .pick-card:nth-child(3){transform:translateY(0) rotate(-2.5deg);z-index:3}
  .pick-card:nth-child(4){transform:translateY(0) rotate(2.5deg);z-index:4}
  .pick-card:nth-child(5){transform:translateY(5px) rotate(8deg);z-index:5}
  .pick-card:nth-child(6){transform:translateY(10px) rotate(13deg);z-index:6}
  .card-face{padding:10px 9px;border-radius:17px}
  .card-face::after{inset:7px;border-radius:12px}
  .game-bottom-bar{margin-top:24px !important;padding-top:16px !important;padding-bottom:calc(36px + env(safe-area-inset-bottom)) !important}
}


/* v9 asset-based rotating card fan */
:root{--card-w-desktop:150px;--card-w-mobile:92px;--card-ratio:7/10}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;z-index:0}
.card-art-back{opacity:.98}
.card-art-front{opacity:.22;mix-blend-mode:screen}
.card-face > span,.card-face > .card-center{position:relative;z-index:2}
.card-back,.card-front{overflow:hidden}
.card-back::before{z-index:1}
.card-face::before,.card-face::after{z-index:1}

.compact-cards.six-cards{
  display:flex !important;justify-content:center;align-items:flex-end;gap:0;
  max-width:820px;min-height:320px;padding:10px 0 6px;
  animation:fanSweep 7.4s ease-in-out infinite;transform-origin:50% 92%;
}
.pick-card{
  width:min(16vw,var(--card-w-desktop));min-height:auto;height:auto;aspect-ratio:var(--card-ratio);
  margin-inline:-38px;transform-origin:50% 92%;animation:none !important;
}
.pick-card .card-inner{animation:cardBreath 4.2s ease-in-out infinite}
.pick-card:nth-child(1){--base-ty:16px;--base-rot:-19deg;z-index:1}
.pick-card:nth-child(2){--base-ty:8px;--base-rot:-11deg;z-index:2}
.pick-card:nth-child(3){--base-ty:1px;--base-rot:-3.5deg;z-index:3}
.pick-card:nth-child(4){--base-ty:1px;--base-rot:3.5deg;z-index:4}
.pick-card:nth-child(5){--base-ty:8px;--base-rot:11deg;z-index:5}
.pick-card:nth-child(6){--base-ty:16px;--base-rot:19deg;z-index:6}
.pick-card{transform:translateY(var(--base-ty)) rotate(var(--base-rot))}
.pick-card:hover,.pick-card:focus-visible{transform:translateY(calc(var(--base-ty) - 10px)) rotate(var(--base-rot)) scale(1.03);z-index:9}
.pick-card:hover .card-inner,.pick-card:focus-visible .card-inner{transform:translateY(-8px) rotateX(8deg) scale(1.04)}
.pick-card.opening{transform:translateY(calc(var(--base-ty) - 6px)) rotate(var(--base-rot)) scale(1.05);z-index:20}
.pick-card.opening .card-inner{animation:none;transform:rotateY(180deg) scale(1.08)}

.card-back{
  background:linear-gradient(180deg,#b98dff 0%,#8f56ff 20%,#6427f2 58%,#2a0a69 100%) !important;
}
.card-front{background:linear-gradient(180deg,#fffefd 0%,#f4e9ff 38%,#d39cff 100%) !important;color:#541a8b}

@keyframes fanSweep{
  0%,100%{transform:translateX(0) rotate(-2deg)}
  25%{transform:translateX(-10px) rotate(-6deg)}
  50%{transform:translateX(0) rotate(0deg)}
  75%{transform:translateX(10px) rotate(6deg)}
}
@keyframes cardBreath{
  0%,100%{filter:drop-shadow(0 16px 28px rgba(0,0,0,.28))}
  50%{filter:drop-shadow(0 22px 38px rgba(0,0,0,.36))}
}

@media (max-width: 900px){
  .compact-cards.six-cards{max-width:100%;min-height:280px;padding-top:4px}
  .pick-card{width:min(15.5vw,112px);margin-inline:-34px}
}
@media (max-width: 560px){
  .compact-cards.six-cards{min-height:220px;padding-top:2px;animation-duration:6.8s}
  .pick-card{width:22vw;max-width:96px;margin-inline:-30px;aspect-ratio:7/10}
  .pick-card:nth-child(1){--base-ty:11px;--base-rot:-16deg}
  .pick-card:nth-child(2){--base-ty:5px;--base-rot:-10deg}
  .pick-card:nth-child(3){--base-ty:0px;--base-rot:-3deg}
  .pick-card:nth-child(4){--base-ty:0px;--base-rot:3deg}
  .pick-card:nth-child(5){--base-ty:5px;--base-rot:10deg}
  .pick-card:nth-child(6){--base-ty:11px;--base-rot:16deg}
  .card-back .card-top,.card-back .card-bottom{font-size:.58rem;letter-spacing:.13em}
  .card-back .card-center{font-size:2rem}
}


/* ===== card fan rotation + mobile stability override ===== */
html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: calc(var(--app-vh, 1vh) * 100);
}

.game-screen,
.auth-screen,
.game-shell,
.compact-shell {
  min-height: calc(var(--app-vh, 1vh) * 100);
}

.cards-stage {
  overflow: visible;
}

.compact-cards.six-cards {
  --fan-swing: 0deg;
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0 !important;
  max-width: min(860px, 100%);
  min-height: 320px;
  padding: 12px 18px 20px;
  margin: 0 auto;
  perspective: 1800px;
  transform-style: preserve-3d;
  animation: cardsFanSweep 6.8s ease-in-out infinite;
}

.pick-card {
  --fan-rot: 0deg;
  --fan-ty: 0px;
  --fan-x: 0px;
  width: min(15.5vw, 150px);
  min-height: 212px;
  margin-inline: -20px;
  flex: 0 0 auto;
  transform-origin: center bottom;
  transform: translate3d(var(--fan-x), var(--fan-ty), 0) rotate(calc(var(--fan-rot) + var(--fan-swing)));
  transition: transform .55s cubic-bezier(.22,.9,.2,1), filter .35s ease, z-index .2s ease;
  will-change: transform;
  animation: none !important;
}

.pick-card .card-inner {
  animation: cardBreath 4.2s ease-in-out infinite;
}

.pick-card:hover,
.pick-card:focus-visible {
  transform: translate3d(var(--fan-x), calc(var(--fan-ty) - 14px), 0) rotate(calc(var(--fan-rot) + var(--fan-swing))) scale(1.04);
  z-index: 140 !important;
}

.pick-card:hover .card-inner,
.pick-card:focus-visible .card-inner {
  transform: translateY(-10px) rotateX(10deg) scale(1.04);
}

.cards-container.card-picked .pick-card:not(.selected) {
  opacity: .72;
  filter: saturate(.85) brightness(.9);
}

.pick-card.selected,
.pick-card.opening {
  transform: translate3d(var(--fan-x), calc(var(--fan-ty) - 64px), 0) rotate(0deg) scale(1.08) !important;
  z-index: 220 !important;
}

.pick-card.selected .card-inner,
.pick-card.opening .card-inner {
  animation: none;
}

.pick-card.opening .card-inner {
  transform: rotateY(180deg) translateY(-4px) scale(1.1) !important;
}

.pick-card.selected::before,
.pick-card.opening::before {
  opacity: 1;
  filter: blur(3px);
}

.pick-card.opening .card-front {
  box-shadow: 0 0 0 1px rgba(255,244,205,.85), 0 0 42px rgba(255,195,74,.48), 0 0 90px rgba(255,216,128,.16), inset 0 1px 0 rgba(255,255,255,.78);
}

@keyframes cardsFanSweep {
  0%, 100% { --fan-swing: -5deg; }
  50% { --fan-swing: 5deg; }
}

@media (prefers-reduced-motion: reduce) {
  .compact-cards.six-cards,
  .pick-card .card-inner {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .game-screen {
    padding-inline: 0;
  }

  .game-shell.compact-shell {
    padding: 10px 12px calc(96px + env(safe-area-inset-bottom));
  }

  .cards-stage.compact-stage {
    margin-top: 20px;
    padding: 18px 12px 14px;
    border-radius: 28px;
  }

  .compact-cards.six-cards {
    min-height: 240px;
    max-width: 100%;
    padding: 8px 0 10px;
  }

  .pick-card {
    width: min(24vw, 106px);
    min-height: 158px;
    aspect-ratio: .64 / 1;
    margin-inline: -16px;
  }

  .pick-card.selected,
  .pick-card.opening {
    transform: translate3d(var(--fan-x), calc(var(--fan-ty) - 44px), 0) rotate(0deg) scale(1.06) !important;
  }

  .card-top,
  .card-bottom {
    font-size: .72rem;
    letter-spacing: .14em;
  }

  .card-center {
    font-size: 2rem;
  }

  .game-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(6,9,15,0), rgba(6,9,15,.75) 28%, rgba(6,9,15,.94));
  }

  .bottom-action-btn {
    min-height: 60px;
    border-radius: 22px;
  }
}

/* v11 refinements: 9 rotating cards, fixed game viewport, faster fields */
.field {
  display: block;
}

.field-box {
  min-height: 62px;
  padding: 0 18px;
  gap: 14px;
  border-radius: 20px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.field-box i {
  flex: 0 0 22px;
  pointer-events: none;
}

.field-box input {
  min-height: 52px;
  width: 100%;
  padding: 0;
  font-size: 1rem;
  line-height: 1.2;
}

.field-box input::placeholder {
  font-size: .96rem;
}

.screen.game-screen {
  overflow: hidden !important;
  padding: 10px !important;
  align-items: center !important;
  justify-content: center !important;
}

.game-shell.compact-shell {
  height: min(100%, calc(var(--app-vh, 1vh) * 100 - 20px));
  max-height: calc(var(--app-vh, 1vh) * 100 - 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.cards-stage.compact-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}

.compact-cards.six-cards.nine-cards {
  animation: none !important;
  max-width: min(1120px, 100%);
  min-height: 350px;
  padding: 16px 24px 28px;
}

.pick-card {
  width: min(13.2vw, 132px);
  min-height: 198px;
  margin-inline: -26px;
}

.pick-card.selected,
.pick-card.opening {
  transform: translate3d(var(--fan-x), calc(var(--fan-ty) - 72px), 0) rotate(0deg) scale(1.09) !important;
}

.cards-container.card-picked .pick-card:not(.selected) {
  opacity: .58;
  filter: saturate(.72) brightness(.84);
}

.palette-7 .card-back {background:linear-gradient(180deg,#2d1d7c,#140d3e),radial-gradient(circle at top left,rgba(148,163,255,.28),transparent 30%)}
.palette-8 .card-back {background:linear-gradient(180deg,#004e7a,#082136),radial-gradient(circle at top left,rgba(103,232,249,.26),transparent 30%)}
.palette-9 .card-back {background:linear-gradient(180deg,#7a113a,#320718),radial-gradient(circle at top left,rgba(251,113,133,.28),transparent 30%)}
.pick-card.opening.palette-7 .card-front {background:linear-gradient(180deg,#efe8ff,#9f85ff);color:#1f0d55}
.pick-card.opening.palette-8 .card-front {background:linear-gradient(180deg,#e1fbff,#5be4ff);color:#05384b}
.pick-card.opening.palette-9 .card-front {background:linear-gradient(180deg,#ffe1ea,#ff7d9f);color:#591028}

@media (max-width: 767px) {
  html,
  body {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .screen.game-screen {
    padding: 8px !important;
  }

  .game-shell.compact-shell {
    width: 100%;
    height: calc(var(--app-vh, 1vh) * 100 - 16px);
    max-height: calc(var(--app-vh, 1vh) * 100 - 16px);
    padding: 8px 10px calc(86px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .game-topbar {
    margin-bottom: 0;
  }

  .cards-stage.compact-stage {
    width: 100%;
    padding: 14px 8px 10px;
    border-radius: 24px;
  }

  .compact-cards.six-cards.nine-cards {
    min-height: 228px;
    padding: 8px 0 10px;
    max-width: 100%;
  }

  .pick-card {
    width: min(22vw, 88px);
    min-height: 142px;
    aspect-ratio: .62 / 1;
    margin-inline: -18px;
  }

  .pick-card.selected,
  .pick-card.opening {
    transform: translate3d(var(--fan-x), calc(var(--fan-ty) - 48px), 0) rotate(0deg) scale(1.04) !important;
  }

  .field-box {
    min-height: 60px;
    padding: 0 16px;
    border-radius: 18px;
  }

  .field-box input {
    min-height: 50px;
    font-size: 16px;
  }
}


/* === v12 override: 6 cards, 2 rows, responsive === */
.cards-stage{overflow:visible;}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(150px, 1fr)) !important;
  gap:18px !important;
  max-width:min(760px, 100%) !important;
  width:100% !important;
  margin:0 auto !important;
  padding:8px 0 0 !important;
  min-height:auto !important;
  align-items:center;
  justify-items:center;
  perspective:none !important;
  overflow:visible !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  width:min(100%, 180px) !important;
  aspect-ratio: 0.72;
  min-height:0 !important;
  --fan-rot:0deg;
  --fan-ty:0px;
  --fan-x:0px;
  --base-rot:0deg;
  --base-ty:0px;
  transform:translate3d(0,0,0) rotate(0deg) !important;
  animation:none !important;
  transition:transform .35s ease, opacity .25s ease, filter .25s ease !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{opacity:.7;}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  animation:none !important;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .3s ease !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover{
  transform:translateY(-8px) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner{
  transform:none !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards.cards-animate-in .pick-card{
  animation:cardGridIn .6s cubic-bezier(.22,.9,.28,1) both;
  animation-delay:calc((var(--card-order) - 1) * 70ms);
}
.cards-container.card-picked .pick-card:not(.selected){
  opacity:.38 !important;
  transform:scale(.96) !important;
  filter:saturate(.7);
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-18px) scale(1.05) !important;
  z-index:30 !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.38)) drop-shadow(0 0 24px rgba(244,207,114,.14));
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  transform:rotateY(180deg) scale(1.05) !important;
}
@keyframes cardGridIn{
  0%{opacity:0;transform:translateY(26px) scale(.92);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width: 767px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(88px, 1fr)) !important;
    gap:12px !important;
    max-width:min(380px, 100%) !important;
    padding-top:4px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 112px) !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
    transform:translateY(-12px) scale(1.03) !important;
  }
}
@media (max-width: 420px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(76px, 1fr)) !important;
    gap:10px !important;
    max-width:100% !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 96px) !important;
  }
}

/* === v13 override: smoother/faster entrance + casino UI === */
:root{
  --casino-gold:#f4cf72;
  --casino-gold-strong:#ffde8a;
  --casino-green:#0f4d38;
  --casino-green-deep:#082d21;
  --casino-red:#7a1320;
}

body{
  background:
    radial-gradient(circle at top, rgba(255,223,136,.14), transparent 24%),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.06), transparent 16%),
    linear-gradient(180deg, #160a0d 0%, #081913 34%, #07110f 100%) !important;
}

.page-bg{
  background:
    radial-gradient(circle at 50% -5%, rgba(255,226,145,.18), transparent 24%),
    radial-gradient(circle at 10% 20%, rgba(153,20,36,.22), transparent 20%),
    radial-gradient(circle at 88% 18%, rgba(19,116,85,.20), transparent 18%),
    linear-gradient(180deg, rgba(14,6,9,.82), rgba(5,20,16,.90)) !important;
}

.page-noise{
  opacity:.18;
}

.game-shell.compact-shell{
  position:relative;
}

.game-shell.compact-shell::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:36px;
  pointer-events:none;
  border:1px solid rgba(255,226,145,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 60px rgba(244,207,114,.05);
}

.cards-stage.glass-card.compact-stage{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,240,190,.10), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(20,126,92,.18), transparent 62%),
    linear-gradient(180deg, rgba(10,33,25,.96), rgba(9,25,20,.98)) !important;
  border:1px solid rgba(255,222,138,.22) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.44),
    inset 0 0 0 2px rgba(255,226,145,.06),
    inset 0 0 80px rgba(36,123,91,.20),
    0 0 28px rgba(244,207,114,.06) !important;
}

.cards-stage.glass-card.compact-stage::after{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:28px;
  pointer-events:none;
  border:1px solid rgba(255,226,145,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.stage-head .eyebrow{
  color:var(--casino-gold-strong);
  letter-spacing:.28em;
}

.stage-head h2{
  color:#fff6de;
  text-shadow:0 2px 16px rgba(0,0,0,.28);
}

.stage-head .instruction{
  color:#e7d8b0;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  gap:20px !important;
  max-width:min(780px, 100%) !important;
  padding:14px 4px 6px !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  width:min(100%, 182px) !important;
  border-radius:28px;
  transform:translate3d(0,0,0) scale(1) !important;
  transition:transform .24s ease, opacity .24s ease, filter .24s ease !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
  inset:-10px;
  border-radius:34px;
  opacity:.92;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,228,145,.42), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(165,28,46,.20), transparent 54%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 28%);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.36)) drop-shadow(0 0 16px rgba(244,207,114,.08));
  transition:transform .72s cubic-bezier(.2,.88,.24,1), filter .24s ease !important;
}

.card-face{
  border-radius:26px !important;
}

.card-face::after{
  border-radius:22px !important;
}

.card-back{
  border:1px solid rgba(255,231,158,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,224,138,.12),
    0 18px 28px rgba(0,0,0,.20) !important;
  background-blend-mode:screen, normal;
}

.palette-1 .card-back,
.palette-4 .card-back{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,235,168,.22), transparent 38%),
    linear-gradient(180deg, #6c101f 0%, #3b0812 54%, #1a060d 100%) !important;
}

.palette-2 .card-back,
.palette-5 .card-back{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,236,175,.24), transparent 38%),
    linear-gradient(180deg, #145a42 0%, #0d3f2f 54%, #09241b 100%) !important;
}

.palette-3 .card-back,
.palette-6 .card-back{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,237,183,.24), transparent 38%),
    linear-gradient(180deg, #201625 0%, #120b18 56%, #09060e 100%) !important;
}

.card-top,
.card-bottom{
  color:#ffeab6 !important;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.card-back .card-center,
.card-front .card-center{
  text-shadow:0 2px 12px rgba(0,0,0,.24);
}

.card-back .card-center{
  color:#fff7e0 !important;
}

.card-front{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(180deg, #fff4d1 0%, #f4cf72 58%, #c98d15 100%) !important;
  border:1px solid rgba(255,242,194,.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -10px 18px rgba(140,87,0,.18),
    0 16px 24px rgba(0,0,0,.20) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  transform:translateY(-10px) scale(1.02) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible .card-inner{
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.42)) drop-shadow(0 0 20px rgba(244,207,114,.18));
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards.cards-animate-in .pick-card{
  animation:cardGridInCasino .46s cubic-bezier(.18,.86,.24,1) both !important;
  animation-delay:calc((var(--card-order) - 1) * 55ms) !important;
}

@keyframes cardGridInCasino{
  0%{opacity:0;transform:translateY(18px) scale(.94) rotateX(10deg);filter:blur(5px);}
  60%{opacity:1;transform:translateY(-4px) scale(1.015) rotateX(0deg);filter:blur(0);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}

.cards-container.card-picked .pick-card:not(.selected){
  opacity:.28 !important;
  filter:grayscale(.08) saturate(.55) brightness(.72);
  transform:scale(.95) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-20px) scale(1.06) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  transform:rotateY(180deg) scale(1.06) !important;
}

.bottom-action-btn,
.premium-chip,
.prize-item,
.modal-card,
.reward-card{
  border-color:rgba(255,226,145,.24) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(244,207,114,.05) !important;
}

.bottom-action-btn{
  background:linear-gradient(180deg, rgba(255,248,229,.08), rgba(255,214,102,.05)) !important;
}

.btn-submit,
.btn-prize,
.btn-telegram{
  box-shadow:0 16px 30px rgba(0,0,0,.20), 0 0 16px rgba(244,207,114,.08) !important;
}

@media (max-width: 767px){
  .cards-stage.glass-card.compact-stage{
    padding-inline:14px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(86px, 1fr)) !important;
    gap:12px !important;
    max-width:min(390px, 100%) !important;
    padding:10px 0 2px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 110px) !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
    transform:translateY(-12px) scale(1.04) !important;
  }
}

@media (max-width: 420px){
  .cards-stage.glass-card.compact-stage{
    border-radius:26px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(74px, 1fr)) !important;
    gap:9px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 94px) !important;
  }
}

/* Luxury casino upgrade */
:root{
  --lux-gold:#f7d27a;
  --lux-gold-2:#ffefba;
  --lux-gold-deep:#d7a42c;
  --lux-red:#7f1324;
  --lux-green:#0f4d36;
  --lux-black:#0f0b10;
}

.page-bg{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,215,106,.18), transparent 16%),
    radial-gradient(circle at 12% 18%, rgba(183,28,46,.22), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(24,96,67,.18), transparent 22%),
    linear-gradient(180deg, rgba(3,8,18,.3), rgba(4,10,18,.8)),
    url('assets/bgdesktop.jpg') center/cover no-repeat !important;
}

.cards-stage.glass-card.compact-stage{
  position:relative;
  background:
    radial-gradient(circle at 50% -5%, rgba(255,231,164,.12), transparent 28%),
    radial-gradient(circle at 0% 50%, rgba(136,19,39,.26), transparent 24%),
    radial-gradient(circle at 100% 50%, rgba(15,77,54,.22), transparent 24%),
    linear-gradient(180deg, rgba(8,34,26,.96) 0%, rgba(7,26,22,.98) 56%, rgba(4,16,14,.99) 100%) !important;
  border:1px solid rgba(255,220,133,.28) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,236,181,.06),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 2px rgba(255,214,110,.08),
    inset 0 0 46px rgba(255,214,110,.05) !important;
}

.cards-stage.glass-card.compact-stage::before{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:30px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,220,133,.18), transparent 14%, transparent 86%, rgba(255,220,133,.18)),
    linear-gradient(180deg, rgba(255,220,133,.18), transparent 18%, transparent 82%, rgba(255,220,133,.18));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:2px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.9;
}

.cards-stage.glass-card.compact-stage::after{
  content:'';
  position:absolute;
  inset:22px;
  border-radius:24px;
  pointer-events:none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(255,215,106,.08), transparent 58%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px);
  mix-blend-mode:screen;
  opacity:.48;
}

.stage-head .eyebrow{
  color:#fff1c9 !important;
  background:linear-gradient(180deg, rgba(112,20,36,.74), rgba(64,9,20,.88)) !important;
  border-color:rgba(255,223,143,.28) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.stage-head h2{
  color:#fff4d8;
  text-shadow:0 2px 0 rgba(71,33,2,.44), 0 12px 30px rgba(0,0,0,.28);
}

.stage-head .instruction{
  color:#d7decb !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  gap:20px 24px !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  isolation:isolate;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  bottom:-16px;
  height:24px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,0,0,.48), transparent 72%);
  filter:blur(6px);
  z-index:-2;
  opacity:.8;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.44)) drop-shadow(0 0 24px rgba(255,210,112,.08)) !important;
}

.card-face{
  overflow:hidden;
}

.card-face::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 22%, rgba(255,255,255,.05) 44%, transparent 60%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 28%) !important;
}

.card-face::after{
  border-color:rgba(255,235,173,.18) !important;
}

.card-back{
  position:relative;
}

.card-back::before,
.card-back::after,
.card-front::before,
.card-front::after{
  content:'';
  position:absolute;
  pointer-events:none;
}

.card-back::before{
  inset:13px;
  border-radius:18px;
  border:1px solid rgba(255,233,170,.14);
  background:
    radial-gradient(circle at center, transparent 58%, rgba(255,215,106,.06) 72%, transparent 73%),
    linear-gradient(45deg, transparent 47%, rgba(255,235,186,.07) 50%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(255,235,186,.07) 50%, transparent 53%);
}

.card-back::after{
  inset:22px;
  border-radius:16px;
  background:
    radial-gradient(circle at center, rgba(255,231,160,.08), transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(255,231,160,.08) 16px 18px, transparent 18px);
  opacity:.9;
}

.card-top,
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  letter-spacing:.22em !important;
}

.card-top::before,
.card-top::after,
.card-bottom::before,
.card-bottom::after{
  content:'♦';
  font-size:.68rem;
  color:rgba(255,226,143,.92);
  text-shadow:0 0 12px rgba(255,215,106,.18);
}

.card-back .card-center{
  position:relative;
  color:#fff4d3 !important;
  font-size:clamp(2.5rem,4vw,4rem) !important;
  text-shadow:0 2px 0 rgba(78,34,0,.24), 0 10px 26px rgba(0,0,0,.34) !important;
}

.card-back .card-center::before,
.card-back .card-center::after{
  content:'✦';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:.58em;
  color:rgba(255,224,137,.82);
  text-shadow:0 0 14px rgba(255,215,106,.18);
}

.card-back .card-center::before{left:-24px}
.card-back .card-center::after{right:-24px}

.card-front{
  color:#3f2300 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.52), transparent 22%),
    linear-gradient(180deg, #fff8e4 0%, #f8dd94 48%, #dfb24a 74%, #a86b10 100%) !important;
}

.card-front::before{
  inset:14px;
  border-radius:18px;
  border:1px solid rgba(120,68,8,.18);
  background:
    radial-gradient(circle at center, rgba(255,255,255,.20), transparent 44%),
    linear-gradient(45deg, transparent 47%, rgba(160,97,14,.08) 50%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, rgba(160,97,14,.08) 50%, transparent 53%);
}

.card-front::after{
  inset:auto 22px 20px 22px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(138,79,10,.26), transparent);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  transform:translateY(-12px) scale(1.028) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-22px) scale(1.075) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::before{
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,232,157,.54), transparent 42%),
    radial-gradient(circle at 50% 0%, rgba(255,236,182,.44), transparent 44%),
    radial-gradient(circle at 50% 100%, rgba(112,20,36,.28), transparent 58%) !important;
}

.cards-container.card-picked .pick-card:not(.selected){
  opacity:.22 !important;
  filter:grayscale(.15) saturate(.4) brightness(.62) !important;
}

.player-chip,
.stat-card,
.bottom-action-btn,
.modal-card,
.prize-item,
.reward-card,
.login-card{
  border-color:rgba(255,223,143,.24) !important;
}

.player-chip,
.stat-card,
.bottom-action-btn{
  background:linear-gradient(180deg, rgba(33,19,12,.38), rgba(10,25,19,.42)) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,216,116,.06),
    0 0 18px rgba(255,215,106,.04) !important;
}

.player-avatar,
.stat-icon{
  background:linear-gradient(180deg, rgba(111,22,40,.88), rgba(44,13,20,.96)) !important;
  color:#ffe8aa !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 18px rgba(0,0,0,.24);
}

.btn-submit,
.btn-prize,
.btn-telegram{
  border:1px solid rgba(255,232,170,.22);
}

.btn-submit{
  background:linear-gradient(180deg, #fff0bc 0%, #f3c95b 52%, #c68917 100%) !important;
  color:#351a00 !important;
}

.btn-prize,
.btn-telegram{
  color:#fff5d8 !important;
  background:linear-gradient(180deg, rgba(111,22,40,.92), rgba(52,11,19,.96)) !important;
}

.prize-modal-content,
.reward-card,
.history-card{
  background:linear-gradient(160deg, rgba(44,14,26,.96), rgba(12,25,22,.98) 54%, rgba(37,23,7,.96)) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.54), 0 0 34px rgba(255,215,106,.06) !important;
}

.reward-name,
.modal-head h3,
.history-head h3{
  color:#fff1ca !important;
}

@media (max-width: 767px){
  .cards-stage.glass-card.compact-stage::before{inset:10px;border-radius:24px}
  .cards-stage.glass-card.compact-stage::after{inset:16px;border-radius:20px}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{gap:12px 12px !important}
  .card-top,.card-bottom{letter-spacing:.14em !important}
  .card-top::before,.card-top::after,.card-bottom::before,.card-bottom::after{font-size:.55rem}
  .card-back .card-center::before{left:-16px}
  .card-back .card-center::after{right:-16px}
}

@media (max-width: 420px){
  .cards-stage.glass-card.compact-stage{padding-top:22px !important;padding-bottom:18px !important}
  .stage-head h2{font-size:1.22rem !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{transform:translateY(-14px) scale(1.05) !important}
}


/* Final responsive 6-card grid + luxury casino coin rain */
.game-screen{
  padding:clamp(12px,2vw,24px) !important;
  overflow:hidden !important;
  align-items:center !important;
  justify-content:center !important;
}
.game-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,220,120,.12), transparent 24%),
    radial-gradient(circle at 50% 68%, rgba(17,84,53,.24), transparent 40%),
    linear-gradient(180deg, rgba(9,12,20,.10), rgba(9,12,20,.34));
  pointer-events:none;
}
.game-shell{
  position:relative;
  z-index:2;
  width:min(1120px,100%);
  max-height:calc(var(--app-vh, 1vh) * 100 - 24px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(10px,1.5vw,18px);
  align-items:center;
}
.compact-stage.cards-stage,.cards-stage.compact-stage,.compact-stage{
  width:min(960px,100%);
  margin:0 auto !important;
  padding:clamp(16px,2vw,24px) clamp(14px,2.4vw,28px) !important;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,145,.10), transparent 34%),
    linear-gradient(180deg, rgba(14,31,26,.92), rgba(9,15,20,.96) 52%, rgba(22,10,6,.94));
  border:1px solid rgba(255,231,170,.16);
  box-shadow:0 22px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.stage-head{
  text-align:center;
  max-width:760px;
  margin:0 auto clamp(12px,1.8vw,18px);
}
.stage-head h2{font-size:clamp(1.15rem,2.5vw,1.9rem);line-height:1.2;margin-bottom:8px}
.stage-head .instruction{font-size:clamp(.84rem,1.5vw,.98rem);opacity:.92}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.8vw,20px);
  width:min(760px,100%);
  min-height:auto;
  margin:0 auto;
  padding:8px 0 2px;
  justify-items:center;
  align-items:center;
}
.pick-card{
  width:min(100%, 170px) !important;
  min-height:0 !important;
  margin:0 !important;
  aspect-ratio:0.72/1;
  transform:none !important;
  transform-origin:center bottom;
  animation:cardGridEntrance .8s cubic-bezier(.18,.84,.24,1) both, cardGridFloat 3.8s ease-in-out infinite 1s !important;
}
.pick-card .card-inner{animation:none !important}
.pick-card:nth-child(1){animation-delay:.02s,1.02s !important}
.pick-card:nth-child(2){animation-delay:.12s,1.12s !important}
.pick-card:nth-child(3){animation-delay:.22s,1.22s !important}
.pick-card:nth-child(4){animation-delay:.18s,1.18s !important}
.pick-card:nth-child(5){animation-delay:.28s,1.28s !important}
.pick-card:nth-child(6){animation-delay:.38s,1.38s !important}
.pick-card:hover,.pick-card:focus-visible{
  transform:translateY(-8px) scale(1.02) !important;
  z-index:10;
}
.pick-card:hover .card-inner,.pick-card:focus-visible .card-inner{
  transform:translateY(-6px) rotateX(7deg) scale(1.03) !important;
}
.pick-card.opening{
  transform:translateY(-10px) scale(1.05) !important;
}
.pick-card.opening .card-inner{
  transform:rotateY(180deg) scale(1.08) !important;
}
.cards-container.card-picked .pick-card:not(.selected){opacity:.5;filter:saturate(.85)}

.game-topbar{margin:0 auto;width:min(960px,100%)}
.topbar-track-main{gap:12px;justify-content:center}
.game-bottom-bar{
  width:min(960px,100%);
  margin:0 auto;
  position:relative !important;
  bottom:auto !important;
  padding:0 !important;
}
.bottom-action-btn{min-height:64px}

.casino-coin-rain{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.95) 12%, rgba(0,0,0,.95) 88%, transparent);
}
.casino-coin{
  position:absolute;
  top:-14%;
  left:var(--coin-left);
  width:var(--coin-size);
  height:var(--coin-size);
  opacity:var(--coin-opacity);
  animation:casinoCoinFall var(--coin-duration) linear infinite;
  animation-delay:var(--coin-delay);
  filter:drop-shadow(0 0 10px rgba(255,212,102,.22));
}
.casino-coin img{width:100%;height:100%;object-fit:contain;display:block}

@keyframes casinoCoinFall{
  0%{transform:translate3d(0,-12%,0) rotate(0deg) scale(.82)}
  50%{opacity:calc(var(--coin-opacity) + .08)}
  100%{transform:translate3d(var(--coin-drift),118vh,0) rotate(var(--coin-rotate)) scale(1.08)}
}
@keyframes cardGridEntrance{
  0%{opacity:0;transform:translateY(22px) scale(.9) !important}
  100%{opacity:1;transform:none !important}
}
@keyframes cardGridFloat{
  0%,100%{transform:translateY(0) !important}
  50%{transform:translateY(-6px) !important}
}

@media (max-width: 900px){
  .game-shell{width:min(900px,100%);max-height:calc(var(--app-vh, 1vh) * 100 - 16px)}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{width:min(620px,100%);gap:12px}
  .pick-card{width:min(100%, 148px) !important}
}

@media (max-width: 640px){
  .game-screen{padding:10px !important}
  .game-shell{max-height:calc(var(--app-vh, 1vh) * 100 - 8px);gap:10px}
  .compact-stage{padding:14px 10px 16px !important;border-radius:22px}
  .stage-head{margin-bottom:12px}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:100%;
    gap:10px;
  }
  .pick-card{width:min(100%, 31vw) !important;max-width:126px;aspect-ratio:.7/1}
  .card-face{border-radius:18px}
  .card-face::after{inset:7px;border-radius:12px}
  .card-back .card-top,.card-back .card-bottom{font-size:.7rem;letter-spacing:.15em}
  .card-back .card-center{font-size:clamp(2.1rem,9vw,3rem)}
  .game-bottom-bar{gap:10px}
  .bottom-action-btn{min-height:56px;padding:10px 12px;border-radius:18px}
  .bottom-action-btn strong{font-size:.9rem}
  .bottom-action-btn .stat-label{font-size:.72rem}
  .casino-coin{width:calc(var(--coin-size) * .78);height:calc(var(--coin-size) * .78);opacity:calc(var(--coin-opacity) + .02)}
}

@media (max-width: 380px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{gap:8px}
  .pick-card{width:min(100%, 30vw) !important;max-width:108px}
  .stage-head h2{font-size:1.02rem}
  .stage-head .instruction{font-size:.76rem}
}

/* v16 final overrides: remove shell shadow, cleaner responsive stage, colorful casino neon card borders */
.game-shell.compact-shell,
.game-shell.compact-shell::before{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
.game-shell.compact-shell::before{content:none !important;display:none !important}

.game-screen{
  padding:clamp(10px,1.8vw,20px) !important;
}
.game-shell.compact-shell{
  width:min(1080px,100%) !important;
  max-height:calc(var(--app-vh, 1vh) * 100 - 20px) !important;
  min-height:auto !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto;
  gap:clamp(10px,1.4vw,16px) !important;
  align-items:center !important;
}
.cards-stage.glass-card.compact-stage{
  width:min(920px,100%) !important;
  margin:0 auto !important;
  padding:clamp(14px,2vw,24px) clamp(12px,2vw,24px) !important;
  border-radius:30px !important;
  overflow:visible !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,233,164,.10), transparent 24%),
    radial-gradient(circle at 50% 52%, rgba(7,119,81,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,18,17,.96), rgba(9,22,19,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,225,140,.08),
    0 18px 48px rgba(0,0,0,.26) !important;
}
.cards-stage.glass-card.compact-stage::after{
  inset:12px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,226,145,.08) !important;
  box-shadow:none !important;
}
.stage-head{
  margin:0 auto clamp(10px,1.6vw,16px) !important;
}
.stage-head h2{
  font-size:clamp(1.06rem,2vw,1.85rem) !important;
  margin:8px 0 6px !important;
}
.stage-head .instruction{
  font-size:clamp(.78rem,1.25vw,.95rem) !important;
  max-width:640px;
  margin:0 auto;
}
.game-topbar,
.game-bottom-bar{
  width:min(920px,100%) !important;
  margin-inline:auto !important;
}
.topbar-track-main{justify-content:center !important}
.game-bottom-bar{
  position:relative !important;
  bottom:auto !important;
  gap:12px !important;
  padding:0 !important;
}
.bottom-action-btn{
  min-height:62px !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  width:min(760px,100%) !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(138px, 1fr)) !important;
  gap:clamp(12px,1.8vw,18px) !important;
  padding:6px 0 2px !important;
  align-items:stretch !important;
  justify-items:center !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  position:relative;
  width:min(100%, 170px) !important;
  max-width:170px !important;
  aspect-ratio:0.72/1 !important;
  min-height:0 !important;
  margin:0 !important;
  transform:none !important;
  animation:cardGridEntrance .68s cubic-bezier(.18,.84,.24,1) both, cardGridFloat 3.2s ease-in-out infinite 0.8s !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  position:relative;
  border-radius:28px;
  animation:none !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:34px;
  background:
    conic-gradient(from var(--neon-angle, 0deg),
      rgba(255,61,127,.95),
      rgba(255,212,84,.95),
      rgba(57,255,182,.95),
      rgba(49,185,255,.95),
      rgba(177,92,255,.95),
      rgba(255,61,127,.95));
  filter:blur(10px) saturate(1.15);
  opacity:.85;
  z-index:-2;
  animation:casinoNeonSpin 5.8s linear infinite, casinoNeonPulse 2.1s ease-in-out infinite;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:30px;
  padding:2px;
  background:conic-gradient(from var(--neon-angle, 0deg),
      #ff4d6d,
      #ffd166,
      #3cf7b7,
      #4cc9f0,
      #b517ff,
      #ff4d6d);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.92;
  z-index:2;
  pointer-events:none;
  animation:casinoNeonSpin 4.6s linear infinite;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::after{
  inset:9px !important;
  border-radius:20px !important;
  border-color:rgba(255,255,255,.10) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  transform:translateY(-10px) scale(1.025) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible .card-inner{
  transform:translateY(-8px) rotateX(8deg) scale(1.035) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible::before{
  opacity:1;
  filter:blur(12px) saturate(1.25);
}
.cards-container.card-picked .pick-card:not(.selected){
  opacity:.42 !important;
  filter:grayscale(.08) brightness(.74) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-12px) scale(1.05) !important;
  z-index:12 !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::before{
  opacity:1;
  filter:blur(15px) saturate(1.35);
}

@keyframes casinoNeonSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes casinoNeonPulse{
  0%,100%{opacity:.68}
  50%{opacity:1}
}

@media (max-width: 900px){
  .game-shell.compact-shell{
    width:min(900px,100%) !important;
    max-height:calc(var(--app-vh, 1vh) * 100 - 14px) !important;
  }
  .cards-stage.glass-card.compact-stage{
    width:min(860px,100%) !important;
    padding:14px 12px 18px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(680px,100%) !important;
    grid-template-columns:repeat(3, minmax(120px, 1fr)) !important;
    gap:12px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 150px) !important;
    max-width:150px !important;
  }
}

@media (max-width: 640px){
  .game-screen{padding:8px !important}
  .game-shell.compact-shell{
    width:100% !important;
    max-height:calc(var(--app-vh, 1vh) * 100 - 8px) !important;
    gap:10px !important;
  }
  .game-topbar,
  .game-bottom-bar,
  .cards-stage.glass-card.compact-stage{
    width:100% !important;
  }
  .cards-stage.glass-card.compact-stage{
    padding:14px 10px 16px !important;
    border-radius:22px !important;
  }
  .cards-stage.glass-card.compact-stage::after{
    inset:8px !important;
    border-radius:16px !important;
  }
  .stage-head{
    margin-bottom:10px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:100% !important;
    grid-template-columns:repeat(3, minmax(92px, 1fr)) !important;
    gap:10px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 112px) !important;
    max-width:112px !important;
    aspect-ratio:.69/1 !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
    inset:-6px;
    border-radius:24px;
    filter:blur(8px);
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
    inset:-1px;
    border-radius:20px;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face{
    border-radius:18px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::after{
    inset:6px !important;
    border-radius:12px !important;
  }
  .bottom-action-btn{min-height:56px !important;border-radius:18px !important}
}

@media (max-width: 380px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(84px, 1fr)) !important;
    gap:8px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 96px) !important;
    max-width:96px !important;
  }
  .stage-head h2{font-size:1rem !important}
  .stage-head .instruction{font-size:.74rem !important}
}

/* === v17 VIP casino moving neon border + sparkle upgrade === */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  width:min(760px,100%) !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(150px, 1fr)) !important;
  gap:18px !important;
  justify-items:center !important;
  align-items:center !important;
  margin:0 auto !important;
  padding:6px 2px 0 !important;
  overflow:visible !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  position:relative;
  width:min(100%, 172px) !important;
  max-width:172px !important;
  min-height:0 !important;
  aspect-ratio:.72/1 !important;
  margin:0 !important;
  transform:none !important;
  animation:vipCardEnter .78s cubic-bezier(.18,.88,.22,1.15) both, vipCardFloat 3.4s ease-in-out infinite !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(1){animation-delay:.02s,.12s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(2){animation-delay:.11s,.28s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(3){animation-delay:.20s,.44s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(4){animation-delay:.29s,.6s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(5){animation-delay:.38s,.76s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(6){animation-delay:.47s,.92s !important}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:30px;
  padding:3px;
  background:linear-gradient(115deg,
    rgba(255,56,144,.95),
    rgba(255,205,84,.96),
    rgba(0,255,225,.96),
    rgba(132,92,255,.96),
    rgba(255,56,144,.95));
  background-size:260% 260%;
  animation:vipNeonFlow 3s linear infinite, vipNeonGlow 1.6s ease-in-out infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.98;
  filter:drop-shadow(0 0 6px rgba(255,71,163,.55)) drop-shadow(0 0 14px rgba(104,255,231,.35));
  z-index:3;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  border-radius:28px !important;
  overflow:visible;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face{
  border-radius:26px !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 0 1px rgba(255,255,255,.07) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::before{
  background:
    linear-gradient(140deg, rgba(255,255,255,.22), transparent 34%, rgba(255,255,255,.05) 62%, transparent 76%),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 80% 84%, rgba(255,216,119,.14), transparent 18%);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::after{
  border:1px solid rgba(255,255,255,.18) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  z-index:8 !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible .card-inner{
  transform:translateY(-9px) scale(1.035) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::after{
  animation-duration:1.35s, 1s;
  filter:drop-shadow(0 0 8px rgba(255,71,163,.72)) drop-shadow(0 0 18px rgba(104,255,231,.56)) drop-shadow(0 0 26px rgba(255,212,92,.44));
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-12px) scale(1.05) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
  content:'';
  position:absolute;
  inset:-14px;
  pointer-events:none;
  z-index:4;
  opacity:.92;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before{
  background:
    radial-gradient(circle, rgba(255,230,150,.98) 0 1.4px, transparent 2.2px) 10% 20%/38px 38px no-repeat,
    radial-gradient(circle, rgba(97,250,255,.98) 0 1.5px, transparent 2.3px) 86% 18%/44px 44px no-repeat,
    radial-gradient(circle, rgba(255,95,174,.98) 0 1.6px, transparent 2.4px) 12% 84%/42px 42px no-repeat,
    radial-gradient(circle, rgba(171,132,255,.98) 0 1.35px, transparent 2.15px) 88% 82%/40px 40px no-repeat;
  animation:vipSparkleMoveA 2.8s ease-in-out infinite;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
  background:
    radial-gradient(circle, rgba(255,255,255,.96) 0 1.2px, transparent 2px) 22% 8%/36px 36px no-repeat,
    radial-gradient(circle, rgba(255,220,110,.95) 0 1.2px, transparent 2px) 76% 6%/34px 34px no-repeat,
    radial-gradient(circle, rgba(104,255,231,.95) 0 1.1px, transparent 2px) 8% 58%/32px 32px no-repeat,
    radial-gradient(circle, rgba(255,78,171,.95) 0 1.25px, transparent 2px) 94% 54%/34px 34px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.96) 0 1.1px, transparent 2px) 48% 92%/30px 30px no-repeat;
  animation:vipSparkleMoveB 3.6s ease-in-out infinite;
}

@keyframes vipCardEnter{
  0%{opacity:0;transform:translateY(24px) scale(.92) !important}
  100%{opacity:1;transform:translateY(0) scale(1) !important}
}
@keyframes vipCardFloat{
  0%,100%{transform:translateY(0) !important}
  50%{transform:translateY(-6px) !important}
}
@keyframes vipNeonFlow{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}
@keyframes vipNeonGlow{
  0%,100%{opacity:.88}
  50%{opacity:1}
}
@keyframes vipSparkleMoveA{
  0%,100%{transform:translate3d(0,0,0);opacity:.72}
  30%{transform:translate3d(2px,-4px,0);opacity:1}
  65%{transform:translate3d(-3px,3px,0);opacity:.82}
}
@keyframes vipSparkleMoveB{
  0%,100%{transform:translate3d(0,0,0);opacity:.64}
  35%{transform:translate3d(-2px,4px,0);opacity:.96}
  70%{transform:translate3d(3px,-3px,0);opacity:.8}
}

@media (max-width: 900px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(660px,100%) !important;
    grid-template-columns:repeat(3, minmax(118px, 1fr)) !important;
    gap:14px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 144px) !important;
    max-width:144px !important;
  }
}

@media (max-width: 640px){
  .cards-stage.glass-card.compact-stage{
    padding:12px 10px 14px !important;
    border-radius:20px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(86px, 1fr)) !important;
    gap:10px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 108px) !important;
    max-width:108px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
    inset:-2px;
    border-radius:22px;
    padding:2px;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
    border-radius:20px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face{
    border-radius:18px !important;
    padding:12px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::after{
    inset:6px !important;
    border-radius:12px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
    inset:-10px;
  }
}

@media (max-width: 380px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(78px, 1fr)) !important;
    gap:8px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 94px) !important;
    max-width:94px !important;
  }
}


/* === v18 premium LED chase + login coins + luxury avatar + responsive cleanup === */
.login-screen,.auth-screen{position:relative;overflow:hidden}
.login-coin-rain{z-index:0;opacity:.95;mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.9) 16%, rgba(0,0,0,.85) 82%, transparent)}
.auth-wrap,.login-card,.login-logo-box{position:relative;z-index:2}
.casino-coin{filter:drop-shadow(0 0 var(--coin-blur,10px) rgba(255,212,102,.22))}

.player-avatar.vip-avatar{
  position:relative;
  width:56px;
  height:56px;
  border-radius:18px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 24%), linear-gradient(145deg, #503200 0%, #b98516 35%, #ffdb85 50%, #8c5a00 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -6px 14px rgba(86,38,0,.28), 0 0 20px rgba(255,211,107,.18);
  overflow:hidden;
}
.player-avatar.vip-avatar::before{
  content:'';position:absolute;inset:2px;border-radius:16px;
  border:1px solid rgba(255,245,196,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%, rgba(72,28,0,.22) 100%);
}
.player-avatar .avatar-core,
.player-avatar .avatar-orbit{position:absolute;display:grid;place-items:center;z-index:2}
.player-avatar .avatar-core{inset:0;font-size:1.3rem;color:#fff4c5;text-shadow:0 0 12px rgba(255,232,164,.65), 0 3px 10px rgba(95,43,0,.4);animation:avatarLuxuryPulse 2.8s ease-in-out infinite}
.player-avatar .orbit-a{top:7px;right:6px;font-size:.58rem;color:#7ff7ff;filter:drop-shadow(0 0 8px rgba(127,247,255,.7));animation:avatarSparkA 3.2s ease-in-out infinite}
.player-avatar .orbit-b{bottom:6px;left:7px;font-size:.56rem;color:#ffd45e;filter:drop-shadow(0 0 8px rgba(255,212,94,.65));animation:avatarSparkB 2.8s ease-in-out infinite}

.game-screen{overflow:hidden !important}
.game-shell.compact-shell{
  width:min(1040px,100%) !important;
  max-height:calc(var(--app-vh, 1vh) * 100 - 16px) !important;
  padding:clamp(10px,1.6vw,18px) !important;
  gap:clamp(10px,1.4vw,14px) !important;
}
.cards-stage.glass-card.compact-stage{
  width:min(900px,100%) !important;
  padding:clamp(14px,2vw,22px) clamp(10px,1.8vw,20px) !important;
  border-radius:28px !important;
  background:radial-gradient(circle at 50% -10%, rgba(255,230,157,.12), transparent 28%), radial-gradient(circle at 50% 45%, rgba(22,115,74,.18), transparent 62%), linear-gradient(180deg, rgba(9,21,19,.96), rgba(8,17,15,.98)) !important;
}
.stage-head{margin-bottom:14px !important}
.stage-head h2{line-height:1.16 !important}
.stage-head .instruction{max-width:620px !important}
.topbar-track-main,.game-bottom-bar{gap:10px !important}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  width:min(720px,100%) !important;
  grid-template-columns:repeat(3, minmax(132px, 1fr)) !important;
  gap:16px !important;
  padding:4px 0 0 !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  width:min(100%, 162px) !important;
  max-width:162px !important;
  aspect-ratio:.71/1 !important;
  animation:vipCardEnter .72s cubic-bezier(.18,.88,.22,1.1) both, vipCardFloat 3s ease-in-out infinite !important;
}
/* hilangkan neon berputar / glow belakang lama */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
/* ganti jadi LED chasing di pinggir kartu, bergerak bukan berputar */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:30px;
  padding:3px;
  background:
    linear-gradient(90deg, rgba(255,66,141,0) 0 6%, rgba(255,66,141,.96) 9% 12%, rgba(255,212,90,.96) 14% 17%, rgba(69,255,212,.96) 19% 22%, rgba(121,98,255,.96) 24% 27%, rgba(255,66,141,0) 30% 100%),
    linear-gradient(0deg, rgba(255,255,255,.45), rgba(255,255,255,.05));
  background-size:250% 100%, 100% 100%;
  background-position:0% 50%, 0 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(255,90,173,.55)) drop-shadow(0 0 14px rgba(76,255,223,.36)) drop-shadow(0 0 16px rgba(255,216,110,.28));
  opacity:.98;
  z-index:3;
  pointer-events:none;
  animation:vipLedChase 1.2s linear infinite, vipLedPulse 1.8s ease-in-out infinite !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(1)::after{animation-delay:.02s,.1s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(2)::after{animation-delay:.12s,.22s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(3)::after{animation-delay:.22s,.34s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(4)::after{animation-delay:.32s,.46s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(5)::after{animation-delay:.42s,.58s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:nth-child(6)::after{animation-delay:.52s,.7s !important}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::after{
  animation-duration:.72s, 1s !important;
  filter:drop-shadow(0 0 8px rgba(255,94,182,.78)) drop-shadow(0 0 18px rgba(90,255,227,.56)) drop-shadow(0 0 24px rgba(255,217,112,.48));
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
  opacity:.72;
}

@keyframes vipLedChase{
  0%{background-position:0% 50%,0 0}
  100%{background-position:240% 50%,0 0}
}
@keyframes vipLedPulse{
  0%,100%{opacity:.88}
  50%{opacity:1}
}
@keyframes avatarLuxuryPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1px) scale(1.06)}
}
@keyframes avatarSparkA{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.8}
  50%{transform:translate3d(-1px,2px,0) scale(1.14);opacity:1}
}
@keyframes avatarSparkB{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.76}
  50%{transform:translate3d(2px,-1px,0) scale(1.1);opacity:1}
}

@media (max-width: 900px){
  .game-shell.compact-shell{width:min(920px,100%) !important;padding:12px !important}
  .cards-stage.glass-card.compact-stage{width:min(820px,100%) !important;padding:14px 12px 16px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{width:min(660px,100%) !important;grid-template-columns:repeat(3,minmax(112px,1fr)) !important;gap:12px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{width:min(100%,144px) !important;max-width:144px !important}
}
@media (max-width: 640px){
  .login-coin-rain .casino-coin{opacity:calc(var(--coin-opacity) + .03)}
  .player-avatar.vip-avatar{width:50px;height:50px;border-radius:16px}
  .game-screen{padding:8px !important}
  .game-shell.compact-shell{max-height:calc(var(--app-vh, 1vh) * 100 - 10px) !important;padding:8px !important;gap:8px !important}
  .cards-stage.glass-card.compact-stage{width:100% !important;padding:12px 10px 14px !important;border-radius:22px !important}
  .stage-head{margin-bottom:10px !important}
  .stage-head h2{font-size:clamp(1rem,4.9vw,1.22rem) !important}
  .stage-head .instruction{font-size:.76rem !important;line-height:1.45 !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{grid-template-columns:repeat(3,minmax(84px,1fr)) !important;gap:10px !important;width:100% !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{width:min(100%,106px) !important;max-width:106px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{inset:-2px;border-radius:22px;padding:2px}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{border-radius:20px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face{border-radius:18px !important;padding:10px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-face::after{inset:6px !important;border-radius:12px !important}
}
@media (max-width: 380px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{grid-template-columns:repeat(3,minmax(74px,1fr)) !important;gap:8px !important}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{width:min(100%,92px) !important;max-width:92px !important}
}


/* === v19 realistic casino table + portrait cards + dense LED bulbs + cinematic coins === */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  aspect-ratio:700 / 1000 !important;
  width:min(100%, 175px) !important;
  max-width:175px !important;
}
.card-art{
  object-fit:contain !important;
  padding:4.5% !important;
}
.card-art-back{opacity:1 !important; transform:scale(.995);}
.card-art-front{opacity:.28 !important; mix-blend-mode:screen; transform:scale(.985);}

/* hilangkan garis/bar neon horizontal di bagian atas/bawah front face */
.card-front::after{
  content:none !important;
  display:none !important;
}
.card-face::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 22%, transparent 42%),
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.16), transparent 30%) !important;
}
.card-front::before{
  inset:16px !important;
  border-radius:18px !important;
  border:1px solid rgba(120,68,8,.12) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, rgba(122,74,17,.04) 100%) !important;
}

/* meja casino lebih realistis */
.cards-stage.glass-card.compact-stage{
  position:relative;
  border:1px solid rgba(255,225,145,.16) !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(37,141,97,.20), transparent 0 46%, rgba(0,0,0,0) 46%),
    radial-gradient(circle at 50% 42%, rgba(7,64,39,.90), rgba(5,28,20,.98) 68%),
    linear-gradient(180deg, rgba(6,23,19,.97), rgba(5,17,15,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,224,146,.08),
    inset 0 0 0 14px rgba(78,28,5,.18),
    0 18px 36px rgba(0,0,0,.30) !important;
}
.cards-stage.glass-card.compact-stage::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:22px;
  pointer-events:none;
  border:10px solid transparent;
  background:
    linear-gradient(145deg, rgba(152,90,22,.92), rgba(74,29,9,.98)) padding-box,
    linear-gradient(135deg, rgba(255,220,134,.55), rgba(73,32,8,.08) 32%, rgba(255,225,157,.18) 70%, rgba(48,15,6,.2)) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255,240,188,.18),
    inset 0 -4px 10px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,224,150,.10);
}
.cards-stage.glass-card.compact-stage::after{
  content:'';
  position:absolute;
  inset:22px;
  border-radius:18px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,240,190,.12), transparent 24%),
    radial-gradient(circle at 50% 60%, rgba(23,143,93,.16), transparent 48%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.72;
}

/* bulb LED lebih padat, bergerak mengalir seperti meja casino */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  inset:-5px !important;
  border-radius:32px !important;
  padding:5px !important;
  background:
    radial-gradient(circle, rgba(255,92,171,.98) 0 35%, rgba(255,92,171,.18) 45%, transparent 55%) top left / 18px 9px repeat-x,
    radial-gradient(circle, rgba(255,214,90,.98) 0 35%, rgba(255,214,90,.18) 45%, transparent 55%) bottom left / 18px 9px repeat-x,
    radial-gradient(circle, rgba(83,255,226,.98) 0 35%, rgba(83,255,226,.18) 45%, transparent 55%) top left / 9px 18px repeat-y,
    radial-gradient(circle, rgba(126,118,255,.98) 0 35%, rgba(126,118,255,.18) 45%, transparent 55%) top right / 9px 18px repeat-y,
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,.06));
  background-position:0 0, 0 100%, 0 0, 100% 0, 0 0 !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.22))
    drop-shadow(0 0 8px rgba(255,96,180,.55))
    drop-shadow(0 0 12px rgba(255,217,112,.42))
    drop-shadow(0 0 14px rgba(85,255,225,.30)) !important;
  animation:vipBulbChase 1.35s linear infinite, vipBulbFlicker 2.6s ease-in-out infinite !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before{
  content:'' !important;
  position:absolute;
  inset:-6px;
  border-radius:30px;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 50% 12%, rgba(255,232,162,.26), transparent 28%), radial-gradient(circle at 50% 100%, rgba(108,35,18,.22), transparent 44%);
  filter:blur(9px);
  opacity:.92;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::after{
  animation-duration:.78s, 1.6s !important;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.28))
    drop-shadow(0 0 10px rgba(255,96,180,.72))
    drop-shadow(0 0 16px rgba(255,217,112,.58))
    drop-shadow(0 0 18px rgba(85,255,225,.44)) !important;
}
@keyframes vipBulbChase{
  0%{background-position:0 0,0 100%,0 0,100% 0,0 0}
  100%{background-position:18px 0,-18px 100%,0 18px,100% -18px,0 0}
}
@keyframes vipBulbFlicker{
  0%,100%{opacity:.94}
  8%{opacity:.86}
  14%{opacity:1}
  48%{opacity:.95}
  50%{opacity:.82}
  54%{opacity:1}
}

/* coin effect lebih cinematic */
.casino-coin-rain{
  perspective:1200px;
  overflow:hidden;
}
.casino-coin{
  will-change:transform, opacity, filter;
  filter:blur(var(--coin-depth-blur,0px)) drop-shadow(0 10px 16px rgba(0,0,0,.18)) drop-shadow(0 0 var(--coin-blur,12px) rgba(255,212,102,.32)) !important;
  animation:casinoCoinFallCinematic var(--coin-duration) cubic-bezier(.22,.56,.26,.98) infinite !important;
}
.casino-coin img{
  animation:coinSpin var(--coin-spin-duration,2.6s) linear infinite, coinFlash var(--coin-flash-duration,3.2s) ease-in-out infinite;
  transform-origin:center;
}
@keyframes casinoCoinFallCinematic{
  0%{transform:translate3d(var(--coin-drift-start,0px),-14vh,var(--coin-depth-start,0px)) rotateX(0deg) rotateY(0deg) scale(var(--coin-scale-start,.8)); opacity:0}
  10%{opacity:calc(var(--coin-opacity) + .16)}
  45%{transform:translate3d(calc(var(--coin-drift) * .32),40vh,var(--coin-depth-mid,24px)) rotateX(130deg) rotateY(80deg) scale(var(--coin-scale-mid,1))}
  100%{transform:translate3d(var(--coin-drift),118vh,var(--coin-depth-end,-12px)) rotateX(360deg) rotateY(180deg) scale(var(--coin-scale-end,1.1)); opacity:0}
}
@keyframes coinSpin{
  0%{transform:rotate(0deg) rotateY(0deg)}
  100%{transform:rotate(360deg) rotateY(360deg)}
}
@keyframes coinFlash{
  0%,100%{filter:brightness(.95) saturate(1)}
  45%{filter:brightness(1.18) saturate(1.05)}
  60%{filter:brightness(.92) saturate(.96)}
}

@media (max-width: 900px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 150px) !important;
    max-width:150px !important;
  }
}
@media (max-width: 640px){
  .cards-stage.glass-card.compact-stage::before{inset:6px;border-width:7px;border-radius:18px}
  .cards-stage.glass-card.compact-stage::after{inset:16px;border-radius:14px}
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 112px) !important;
    max-width:112px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
    inset:-3px !important;
    border-radius:22px !important;
    padding:3px !important;
    background-size:14px 7px,14px 7px,7px 14px,7px 14px,100% 100% !important;
  }
  .card-art{padding:5.5% !important}
}
@media (max-width: 380px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 96px) !important;
    max-width:96px !important;
  }
}


/* === v21 override: total card UI revamp, PNG-ready 700x1000 === */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:clamp(10px, 2vw, 22px) !important;
  max-width:min(100%, 930px) !important;
  padding:clamp(4px, 1vw, 10px) 0 0 !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  width:min(100%, 190px) !important;
  max-width:190px !important;
  aspect-ratio:700 / 1000 !important;
  min-height:0 !important;
  border-radius:26px !important;
  overflow:visible !important;
  background:none !important;
  box-shadow:none !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
  inset:auto 10% -10px;
  height:26px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,0,0,.36), rgba(0,0,0,0) 72%);
  filter:blur(10px);
  opacity:.85;
  z-index:-2;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  inset:-6px;
  border-radius:30px;
  background:radial-gradient(circle at 50% 0%, rgba(255,214,110,.18), transparent 55%);
  opacity:0;
  z-index:-1;
  transition:opacity .28s ease;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening::after{
  opacity:1;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  position:absolute !important;
  inset:0 !important;
  border-radius:26px !important;
  overflow:visible !important;
  transform-style:preserve-3d !important;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1), filter .3s ease !important;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.28)) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face{
  position:absolute !important;
  inset:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:26px !important;
  overflow:hidden !important;
  backface-visibility:hidden !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face::after,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face > span,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face > i,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-top,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-center,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-bottom,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-art{
  display:none !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-front{
  transform:rotateY(180deg) !important;
}
.card-png-layer{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  transform:translateY(-8px) scale(1.02) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible .card-inner{
  transform:translateY(-4px) rotateX(4deg) !important;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.32)) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-14px) scale(1.05) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.36)) drop-shadow(0 0 24px rgba(255,217,119,.22)) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  transform:rotateY(180deg) scale(1.07) !important;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards.cards-animate-in .pick-card{
  animation:cardGridInPremium .65s cubic-bezier(.2,.85,.25,1) both !important;
  animation-delay:calc((var(--card-order) - 1) * 90ms) !important;
}
@keyframes cardGridInPremium{
  0%{opacity:0;transform:translateY(34px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width: 767px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    gap:10px !important;
    max-width:min(100%, 420px) !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 122px) !important;
    max-width:122px !important;
    border-radius:18px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face{
    border-radius:18px !important;
  }
}
@media (max-width: 420px){
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    gap:8px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 104px) !important;
    max-width:104px !important;
    border-radius:16px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner,
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-face{
    border-radius:16px !important;
  }
}

/* === v24 override: elegant lively card motion + mobile vertical scroll fix === */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  gap:clamp(12px, 2vw, 22px) !important;
  max-width:min(820px, 100%) !important;
  padding:10px 4px 8px !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  position:relative;
  overflow:visible;
  width:min(100%, 184px) !important;
  animation:cardLuxuryFloat 4.2s ease-in-out infinite !important;
  animation-delay:calc((var(--card-order, 1) - 1) * 130ms) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.18), transparent 14%),
    radial-gradient(circle at 80% 18%, rgba(255,215,120,.18), transparent 16%),
    radial-gradient(circle at 50% 100%, rgba(255,196,87,.14), transparent 22%);
  opacity:.75;
  filter:blur(10px);
  pointer-events:none;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner{
  position:relative;
  overflow:hidden;
  border-radius:clamp(18px, 2vw, 24px);
  animation:cardLuxuryBreath 3.8s ease-in-out infinite !important;
  box-shadow:
    0 18px 28px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::before{
  background:linear-gradient(118deg, transparent 20%, rgba(255,255,255,.04) 35%, rgba(255,245,210,.28) 48%, rgba(255,255,255,.05) 56%, transparent 72%);
  transform:translateX(-165%) skewX(-18deg);
  animation:cardLuxuryShine 3.6s linear infinite;
  animation-delay:calc((var(--card-order, 1) - 1) * .22s);
  mix-blend-mode:screen;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card .card-inner::after{
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 24%, rgba(255,217,120,.9) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 26% 76%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 74%, rgba(255,231,163,.85) 0 1.2px, transparent 2.6px);
  opacity:.42;
  animation:cardSparkleDrift 3.9s ease-in-out infinite;
  animation-delay:calc((var(--card-order, 1) - 1) * .14s);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible{
  transform:translateY(-10px) scale(1.02) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:hover .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card:focus-visible .card-inner{
  box-shadow:
    0 24px 38px rgba(0,0,0,.34),
    0 0 18px rgba(255,213,102,.16),
    0 0 0 1px rgba(255,240,198,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening{
  transform:translateY(-20px) scale(1.05) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected .card-inner,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner{
  box-shadow:
    0 30px 48px rgba(0,0,0,.42),
    0 0 26px rgba(255,209,92,.22),
    0 0 0 1px rgba(255,248,219,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.opening .card-inner::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.selected .card-inner::before{
  opacity:.9;
  animation-duration:1.2s;
}

@keyframes cardLuxuryFloat{
  0%,100%{transform:translateY(0) scale(1)}
  25%{transform:translateY(-4px) scale(1.002)}
  50%{transform:translateY(-7px) scale(1.006)}
  75%{transform:translateY(-3px) scale(1.002)}
}

@keyframes cardLuxuryBreath{
  0%,100%{filter:saturate(1) brightness(1)}
  50%{filter:saturate(1.06) brightness(1.03)}
}

@keyframes cardLuxuryShine{
  0%{transform:translateX(-165%) skewX(-18deg);opacity:0}
  12%{opacity:.0}
  24%{opacity:.85}
  42%{opacity:.35}
  55%,100%{transform:translateX(165%) skewX(-18deg);opacity:0}
}

@keyframes cardSparkleDrift{
  0%,100%{opacity:.3;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:.6;transform:translate3d(1px,-3px,0) scale(1.03)}
  65%{opacity:.42;transform:translate3d(-1px,2px,0) scale(.98)}
}

@media (max-width: 767px){
  html,
  body{
    position:static !important;
    width:100%;
    height:auto !important;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body{
    touch-action:pan-y manipulation;
    -webkit-overflow-scrolling:touch;
  }

  .screen.game-screen{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    min-height:calc(var(--app-vh, 1vh) * 100);
    height:auto !important;
    padding:10px 10px calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .game-shell.compact-shell{
    height:auto !important;
    max-height:none !important;
    min-height:calc(var(--app-vh, 1vh) * 100 - 20px);
    justify-content:flex-start;
    padding:8px 8px calc(92px + env(safe-area-inset-bottom));
  }

  .cards-stage.compact-stage{
    flex:0 0 auto;
    width:100%;
    margin-top:8px;
    padding:16px 10px 14px;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(84px, 1fr)) !important;
    gap:12px !important;
    max-width:min(390px, 100%) !important;
    padding:8px 2px 4px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 110px) !important;
  }
}

@media (max-width: 420px){
  .screen.game-screen{
    padding:8px 8px calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    grid-template-columns:repeat(3, minmax(78px, 1fr)) !important;
    gap:10px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
    width:min(100%, 98px) !important;
  }
}

/* v25 cleanup: remove shine/background clutter per request */
.login-card-shine,
.login-card::after,
.login-card::before,
.action-buttons .btn::before,
.action-buttons .btn::after,
.bottom-action-btn::before,
.bottom-action-btn::after,
.cards-stage.glass-card.compact-stage::before,
.cards-stage.glass-card.compact-stage::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

.login-card,
.action-buttons .btn,
.bottom-action-btn{
  animation:none !important;
}

.cards-stage.glass-card.compact-stage,
.cards-stage,
.compact-stage{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.game-bottom-bar{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* remove top palette/accent behind PNG cards */
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .card-front,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-1 .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-2 .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-3 .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-4 .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-5 .card-back,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .palette-6 .card-back{
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::before,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card::after{
  opacity:.18 !important;
}

.card-png-layer{
  object-fit:contain !important;
  background:transparent !important;
}


/* v26 reward popup code + epic click + login scroll */
.reward-history-code{
  display:block;
  margin-top:8px;
  text-align:center;
  font-size:.92rem;
  letter-spacing:.14em;
  color:#7bdcb5;
}
.reward-history-code.hidden{display:none !important}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card{
  transform-origin:center center;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.epic-open{
  z-index:40 !important;
  animation:cardEpicLift 1.12s cubic-bezier(.2,.78,.18,1) both;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.epic-open .card-inner{
  animation:cardEpicPulse .95s ease-out both;
}
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards .pick-card.epic-open::before{
  opacity:1 !important;
  filter:blur(6px);
  animation:cardEpicHalo 1.1s ease-out both;
}
.card-burst{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:8;
}
.card-burst span{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:56px;
  margin:-28px 0 0 -6px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,252,223,.98), rgba(255,212,98,.9) 42%, rgba(255,137,61,.0) 100%);
  transform:rotate(var(--spark-angle)) translateY(-6px) scale(.35);
  transform-origin:center 62px;
  opacity:0;
  box-shadow:0 0 10px rgba(255,215,122,.55), 0 0 24px rgba(255,162,66,.35);
  animation:cardSparkBurst .85s cubic-bezier(.18,.8,.26,1) forwards;
  animation-delay:var(--spark-delay, 0ms);
}
.card-burst::before,
.card-burst::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.card-burst::before{
  width:42px;
  height:42px;
  background:radial-gradient(circle, rgba(255,244,188,.92) 0%, rgba(255,202,86,.45) 36%, rgba(255,153,74,0) 76%);
  animation:cardFlashCore .6s ease-out forwards;
}
.card-burst::after{
  width:140px;
  height:140px;
  border:2px solid rgba(255,220,130,.75);
  box-shadow:0 0 18px rgba(255,206,93,.32);
  animation:cardRingBurst .82s ease-out forwards;
}
@keyframes cardEpicLift{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  24%{transform:translateY(-16px) scale(1.03) rotate(-.35deg)}
  54%{transform:translateY(-34px) scale(1.1) rotate(0deg)}
  100%{transform:translateY(-22px) scale(1.07) rotate(0deg)}
}
@keyframes cardEpicPulse{
  0%{transform:scale(1)}
  38%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes cardEpicHalo{
  0%{opacity:0;transform:scale(.72)}
  35%{opacity:1;transform:scale(1.08)}
  100%{opacity:.12;transform:scale(1.22)}
}
@keyframes cardSparkBurst{
  0%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-4px) scale(.2)}
  15%{opacity:1}
  100%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-88px) scale(1)}
}
@keyframes cardFlashCore{
  0%{opacity:0;transform:translate(-50%, -50%) scale(.25)}
  30%{opacity:1;transform:translate(-50%, -50%) scale(1)}
  100%{opacity:0;transform:translate(-50%, -50%) scale(1.35)}
}
@keyframes cardRingBurst{
  0%{opacity:0;transform:translate(-50%, -50%) scale(.25)}
  22%{opacity:1}
  100%{opacity:0;transform:translate(-50%, -50%) scale(1.18)}
}
@media (max-width: 767px){
  .screen.auth-screen,
  #loginScreen.screen{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    min-height:calc(var(--app-vh, 1vh) * 100);
    padding:18px 12px calc(28px + env(safe-area-inset-bottom)) !important;
    touch-action:pan-y manipulation !important;
  }
  .auth-wrap.auth-wrap-single{
    width:100%;
    min-height:calc(var(--app-vh, 1vh) * 100 - 36px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-bottom:32px;
  }
  .login-card.glass-card{
    margin-top:10px;
    margin-bottom:28px;
  }
}


/* v27 floating keycode on reward popup */
.floating-keycode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(86vw, 280px);
  margin:12px auto 18px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(123,220,181,.38);
  background:linear-gradient(180deg, rgba(13,31,24,.82), rgba(5,16,12,.74));
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.03);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;
  font-size:.96rem;
  line-height:1;
  letter-spacing:.18em;
  color:#9ff1c9;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  animation:keycodeFloat 2.2s ease-in-out infinite;
}
.floating-keycode::before{
  content:"KEYCODE";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:.58rem;
  letter-spacing:.18em;
  color:rgba(255,236,179,.78);
  font-family:Inter,system-ui,sans-serif;
  font-weight:700;
}
.floating-keycode{
  padding-left:76px;
}
.reward-overlay.active .floating-keycode:not(.hidden){
  animation:keycodeReveal .42s cubic-bezier(.2,.9,.2,1) both, keycodeFloat 2.2s ease-in-out .42s infinite;
}
@keyframes keycodeReveal{
  0%{opacity:0;transform:translateY(12px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes keycodeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (max-width: 640px){
  .floating-keycode{
    min-width:min(92vw, 250px);
    margin:10px auto 16px;
    padding:11px 14px 11px 66px;
    font-size:.88rem;
    letter-spacing:.14em;
  }
  .floating-keycode::before{
    left:14px;
    font-size:.54rem;
  }
}


/* v28 keycode bar under reward name */
.reward-keycode-bar{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 0 18px;
  position:relative;
  z-index:2;
}
.reward-keycode-bar.hidden{display:none !important}
.reward-keycode-bar .reward-history-code{
  margin:0;
}
.reward-code-box{
  display:none !important;
}

/* v29: flexible centered login logo box on desktop & mobile */
.auth-wrap.auth-wrap-single{
  width:min(500px,100%);
  margin-inline:auto;
  align-items:center;
}

.login-logo-box{
  width:min(100%, clamp(180px, 34vw, 320px)) !important;
  min-height:clamp(88px, 14vh, 156px);
  margin:0 auto clamp(10px, 2.2vh, 20px) !important;
  padding:clamp(8px, 1.6vh, 14px) clamp(8px, 2vw, 18px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  box-sizing:border-box;
}

.login-logo-box::before{
  inset:10% 16% !important;
}

.main-event-logo{
  width:auto !important;
  max-width:100% !important;
  max-height:clamp(70px, 11vh, 120px);
  height:auto !important;
  object-fit:contain;
  display:block;
  margin-inline:auto;
}

@media (max-width: 900px){
  .auth-wrap.auth-wrap-single{
    min-height:unset;
    padding-inline:0;
  }

  .login-logo-box{
    width:min(100%, clamp(170px, 56vw, 280px)) !important;
    min-height:clamp(84px, 12vh, 132px);
    margin:0 auto 14px !important;
  }

  .main-event-logo{
    max-height:clamp(64px, 10vh, 98px);
  }
}

@media (max-width: 560px){
  .login-logo-box{
    width:min(100%, clamp(160px, 62vw, 240px)) !important;
    min-height:clamp(78px, 11vh, 110px);
    margin:0 auto 12px !important;
    padding:10px 8px 6px !important;
  }

  .main-event-logo{
    max-height:clamp(58px, 9vh, 86px);
  }
}


/* === final fix: centered shell + event info popup/button === */
.game-screen{
  justify-content:center !important;
  align-items:center !important;
}

.game-shell.compact-shell{
  width:min(1120px, calc(100vw - 32px)) !important;
  margin-inline:auto !important;
  justify-content:start !important;
}

.game-topbar,
.cards-stage.glass-card.compact-stage,
.game-bottom-bar{
  margin-left:auto !important;
  margin-right:auto !important;
}

.cards-stage.glass-card.compact-stage{
  width:min(940px, 100%) !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  margin-inline:auto !important;
  justify-content:center !important;
  justify-items:center !important;
}

.game-bottom-bar{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.event-info-btn{
  position:relative;
  overflow:hidden;
}

.event-info-btn::after{
  content:'';
  position:absolute;
  inset:-20%;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform:translateX(-140%) skewX(-18deg);
  animation:eventInfoShine 2.8s linear infinite;
  pointer-events:none;
}

.info-pulse-btn{
  animation:eventInfoPulse 1.9s ease-in-out infinite;
}

.event-info-modal-card{
  width:min(92vw, 560px) !important;
}

.event-info-content{
  display:grid;
  gap:14px;
  color:#f3ead0;
}

.event-info-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(126,24,58,.9), rgba(204,144,52,.88));
  box-shadow:0 14px 24px rgba(0,0,0,.22);
  font-weight:700;
}

.event-info-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
  color:#f7f1df;
}

@keyframes eventInfoPulse{
  0%,100%{transform:translateY(0) scale(1); box-shadow:0 12px 26px rgba(0,0,0,.22);}
  50%{transform:translateY(-3px) scale(1.02); box-shadow:0 18px 34px rgba(255,195,88,.18);}
}

@keyframes eventInfoShine{
  0%{transform:translateX(-140%) skewX(-18deg); opacity:0;}
  18%{opacity:.0;}
  28%{opacity:.9;}
  44%{opacity:.35;}
  100%{transform:translateX(140%) skewX(-18deg); opacity:0;}
}

@media (max-width: 900px){
  .game-shell.compact-shell{
    width:min(100%, 860px) !important;
  }
  .cards-stage.glass-card.compact-stage{
    width:min(100%, 760px) !important;
  }
}

@media (max-width: 767px){
  .screen.game-screen{
    justify-content:flex-start !important;
    align-items:center !important;
  }
  .game-shell.compact-shell{
    width:min(100%, 460px) !important;
    margin-inline:auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .cards-stage.glass-card.compact-stage{
    width:100% !important;
    margin-inline:auto !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(100%, 380px) !important;
    margin-inline:auto !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  .game-bottom-bar{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 420px){
  .game-shell.compact-shell{
    width:min(100%, 396px) !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(100%, 340px) !important;
    gap:10px !important;
  }
}

/* === fix: remove white/blank space at bottom on mobile without changing game structure === */
html,
body{
  margin:0 !important;
  padding:0 !important;
  width:100%;
  min-height:100%;
  background:#070b13 !important;
  overscroll-behavior:none;
}

body{
  min-height:calc(var(--app-vh, 1vh) * 100);
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

.screen,
.screen.auth-screen,
.screen.game-screen{
  min-height:calc(var(--app-vh, 1vh) * 100) !important;
  background:transparent !important;
}

@media (max-width: 767px){
  .screen.game-screen,
  .screen.auth-screen{
    height:auto !important;
    max-height:none !important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .game-shell.compact-shell,
  .auth-wrap{
    min-height:auto !important;
    height:auto !important;
    max-height:none !important;
    margin-bottom:0 !important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .game-bottom-bar{
    margin-top:16px !important;
    padding-top:12px !important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  }
}


/* === v4: logo slightly larger + remove event info button + center game content === */
.login-logo-box{
  width:min(100%, clamp(210px, 38vw, 360px)) !important;
  min-height:clamp(98px, 15vh, 172px) !important;
}

.main-event-logo{
  max-height:clamp(82px, 13vh, 142px) !important;
}

#eventInfoBtn,
.game-shell.compact-shell .event-info-btn{
  display:none !important;
}

.screen.game-screen,
.game-screen{
  justify-content:center !important;
  align-items:center !important;
}

.game-shell.compact-shell{
  width:min(1120px, calc(100vw - 32px)) !important;
  margin-inline:auto !important;
  justify-content:center !important;
  justify-items:center !important;
  align-content:center !important;
}

.game-topbar,
.cards-stage.glass-card.compact-stage,
.game-bottom-bar{
  width:min(940px, 100%) !important;
  margin-inline:auto !important;
}

.topbar-track,
.topbar-track-main,
.cards-container.chests-container.compact-cards.six-cards.two-rows-cards,
.game-bottom-bar{
  justify-content:center !important;
  justify-items:center !important;
}

@media (max-width: 900px){
  .login-logo-box{
    width:min(100%, clamp(200px, 62vw, 320px)) !important;
    min-height:clamp(94px, 13vh, 150px) !important;
  }

  .main-event-logo{
    max-height:clamp(76px, 11vh, 120px) !important;
  }
}

@media (max-width: 767px){
  .screen.game-screen,
  .game-screen{
    justify-content:center !important;
    align-items:center !important;
  }

  .game-shell.compact-shell{
    width:min(100%, 460px) !important;
    margin-inline:auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
    justify-content:center !important;
    justify-items:center !important;
    align-content:center !important;
  }

  .game-topbar,
  .cards-stage.glass-card.compact-stage,
  .game-bottom-bar{
    width:100% !important;
  }

  .game-bottom-bar{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  .login-logo-box{
    width:min(100%, clamp(190px, 72vw, 280px)) !important;
    min-height:clamp(88px, 12vh, 130px) !important;
  }

  .main-event-logo{
    max-height:clamp(70px, 10vh, 104px) !important;
  }
}

@media (max-width: 420px){
  .game-shell.compact-shell{
    width:min(100%, 396px) !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* === v5: refined logo, symmetric bottom actions, premium spacing without changing structure === */
.login-logo-box{
  width:min(100%, clamp(228px, 40vw, 388px)) !important;
  min-height:clamp(106px, 16vh, 182px) !important;
  margin-bottom:clamp(14px, 2.6vh, 24px) !important;
}

.main-event-logo{
  max-height:clamp(88px, 14vh, 154px) !important;
  transform:translateZ(0);
}

.screen.game-screen,
.game-screen{
  padding-inline:clamp(12px, 2vw, 22px) !important;
}

.game-shell.compact-shell{
  width:min(1140px, calc(100vw - 28px)) !important;
  gap:clamp(16px, 2vh, 24px) !important;
  padding-block:clamp(8px, 1.2vh, 14px) clamp(14px, 2vh, 24px) !important;
}

.game-topbar{
  width:min(980px, 100%) !important;
  margin:0 auto !important;
}

.topbar-track.topbar-track-main{
  width:100%;
  max-width:980px;
  margin-inline:auto;
  gap:18px !important;
  align-items:stretch !important;
}

.player-chip.topbar-item,
.stat-card.key-counter.topbar-item{
  min-height:78px;
  display:flex !important;
  align-items:center !important;
}

.cards-stage.glass-card.compact-stage{
  width:min(980px, 100%) !important;
  margin:0 auto !important;
  padding:clamp(22px, 3vh, 32px) clamp(22px, 3vw, 30px) clamp(26px, 3.2vh, 34px) !important;
  border-radius:34px !important;
}

.stage-head{
  max-width:760px !important;
  margin:0 auto clamp(18px, 2.6vh, 26px) !important;
}

.stage-head h2{
  margin-bottom:10px !important;
}

.stage-head .instruction{
  margin-top:0 !important;
}

.cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
  max-width:min(820px, 100%) !important;
  margin:0 auto !important;
  gap:22px 26px !important;
  padding:8px 2px 4px !important;
}

.game-bottom-bar{
  width:min(980px, 100%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  padding-top:6px !important;
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}

.bottom-action-btn{
  width:100% !important;
  min-height:74px !important;
  padding:14px 18px !important;
  border-radius:24px !important;
  justify-content:center !important;
  text-align:left;
}

.bottom-action-btn > div{
  min-width:0;
}

.bottom-action-btn .stat-label{
  display:block;
  margin-bottom:4px !important;
}

@media (max-width: 900px){
  .login-logo-box{
    width:min(100%, clamp(214px, 66vw, 344px)) !important;
    min-height:clamp(98px, 14vh, 162px) !important;
  }

  .main-event-logo{
    max-height:clamp(82px, 12vh, 132px) !important;
  }

  .game-shell.compact-shell{
    width:min(100%, 920px) !important;
    gap:18px !important;
  }

  .cards-stage.glass-card.compact-stage,
  .game-topbar,
  .game-bottom-bar{
    width:min(100%, 860px) !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    max-width:min(720px, 100%) !important;
    gap:18px 20px !important;
  }
}

@media (max-width: 767px){
  .screen.game-screen,
  .game-screen{
    padding-inline:12px !important;
  }

  .game-shell.compact-shell{
    width:min(100%, 500px) !important;
    gap:16px !important;
    padding-top:8px !important;
    padding-bottom:18px !important;
  }

  .topbar-track.topbar-track-main{
    gap:12px !important;
  }

  .player-chip.topbar-item,
  .stat-card.key-counter.topbar-item{
    min-height:72px !important;
  }

  .cards-stage.glass-card.compact-stage{
    padding:20px 16px 24px !important;
    border-radius:28px !important;
  }

  .stage-head{
    margin-bottom:18px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(100%, 394px) !important;
    max-width:min(394px, 100%) !important;
    gap:12px !important;
    padding:4px 0 2px !important;
  }

  .game-bottom-bar{
    width:100% !important;
    gap:12px !important;
    padding-top:2px !important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .bottom-action-btn{
    min-height:66px !important;
    padding:12px 14px !important;
    border-radius:20px !important;
    gap:10px !important;
  }
}

@media (max-width: 560px){
  .login-logo-box{
    width:min(100%, clamp(204px, 76vw, 300px)) !important;
    min-height:clamp(92px, 12.5vh, 138px) !important;
    margin-bottom:16px !important;
  }

  .main-event-logo{
    max-height:clamp(76px, 10.8vh, 112px) !important;
  }

  .topbar-track.topbar-track-main{
    grid-template-columns:1fr 1fr !important;
  }

  .cards-stage.glass-card.compact-stage{
    padding:18px 14px 22px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(100%, 360px) !important;
    max-width:min(360px, 100%) !important;
    gap:10px !important;
  }

  .game-bottom-bar{
    gap:10px !important;
  }

  .bottom-action-btn{
    min-height:62px !important;
  }
}

@media (max-width: 420px){
  .game-shell.compact-shell{
    width:min(100%, 404px) !important;
    padding-inline:8px !important;
  }

  .cards-container.chests-container.compact-cards.six-cards.two-rows-cards{
    width:min(100%, 336px) !important;
    max-width:min(336px, 100%) !important;
    gap:9px !important;
  }
}