:root {
    --primary: #00ff88;
    --danger: #ff4d4d;
    --moon: #FFD700;
    --airdrop: #b052ff;
    --elon: #00a8ff;
    --bg-card: #151821;
    --notch: 0px;
    --viewport-height: 100dvh;
    --game-stage-scale: 1;
    --device-safe-top: env(safe-area-inset-top, 0px);
    --device-safe-bottom: env(safe-area-inset-bottom, 0px);
    --telegram-safe-top: var(--tg-content-safe-area-inset-top, 0px);
    --telegram-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
    --stage-safe-top: max(var(--device-safe-top), var(--telegram-safe-top), 12px);
    --stage-safe-bottom: max(var(--device-safe-bottom), var(--telegram-safe-bottom), 12px);
    --font-ui: 'Chakra Petch', sans-serif;
    --font-text: 'Roboto', sans-serif;
    --font-pixel: 'Press Start 2P', monospace;
}

html { margin: 0; padding: 0; overflow: hidden; width: 100%; max-width: 100vw; height: 100%; background: #000; }

body { margin: 0; padding: var(--stage-safe-top) 0 var(--stage-safe-bottom); box-sizing: border-box; background: #000; overflow: hidden; font-family: var(--font-ui); display: flex; justify-content: center; align-items: center; height: 100vh; height: var(--viewport-height); width: 100vw; touch-action: manipulation; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; image-rendering: pixelated; color: #fff; position: fixed; top: 0; left: 0; overscroll-behavior: none; }

/* Khung TikTok 9:16 cố định; phần dư trở thành safe rail đen trên/dưới. */
#game-container { position: relative; width: 375px; height: 667px; max-width: none; max-height: none; flex: 0 0 auto; background: #06090f; overflow: hidden; box-shadow: none; border: none; margin: auto; transform: scale(var(--game-stage-scale)); transform-origin: center center; }
canvas,#game-container canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#portrait-orientation-lock { position:absolute; inset:0; z-index:200000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:32px; box-sizing:border-box; background:radial-gradient(circle at 50% 40%,rgba(0,242,254,0.16),transparent 42%),#06090f; color:#fff; text-align:center; touch-action:none; }
#portrait-orientation-lock[hidden] { display:none; }
.portrait-lock-icon { font-size:72px; line-height:1; transform:rotate(-90deg); animation:portrait-lock-turn 1.4s ease-in-out infinite alternate; filter:drop-shadow(0 0 18px rgba(0,242,254,0.65)); }
.portrait-lock-title { color:#00f2fe; font-family:var(--font-pixel); font-size:16px; line-height:1.5; text-shadow:0 0 12px rgba(0,242,254,0.8); }
.portrait-lock-copy { max-width:280px; color:#d8e7ef; font-size:15px; font-weight:700; line-height:1.5; }
@keyframes portrait-lock-turn { to { transform:rotate(0deg); } }
@media (prefers-reduced-motion:reduce) { .portrait-lock-icon { animation:none; transform:none; } }
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; color: #fff; z-index: 5; display: none; }

/* ── HUD ROW 1: Score ── */
#score-container { position: absolute; top: calc(8px + var(--notch)); left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 2px 2px #000; z-index: 20; display: flex; flex-direction: column; align-items: center; width: 100%; pointer-events: none; }
#score-val { font-size: 26px; font-weight: bold; line-height: 1; margin-bottom: 2px; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; transition: transform 0.1s; }
#score-val.pop-score { transform: scale(1.3); color: var(--moon); }
#score-container #label-market-cap { color: #aaa; font-size: 8px; margin-bottom: 4px; text-transform: uppercase; }
#funding-rate { font-size: 9px; color: var(--danger); margin-top: 4px; display: none; animation: pulse 0.5s infinite alternate; text-shadow: 2px 2px 0 #000; font-weight: bold; }

/* ── HUD ROW 2: Balance (trái) + King of Degen (phải) ── */
#hud-row-2 { position: absolute; top: calc(62px + var(--notch)); left: 0; width: 100%; box-sizing: border-box; padding: 0 15px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; z-index: 20; pointer-events: none; gap: 8px; }

#airdrop-box { position: static; background: rgba(255,255,255,0.1); border: 1px solid var(--airdrop); border-radius: 8px; padding: 8px 12px; text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
#airdrop-label { display: none; }
#airdrop-val { font-size: 11px; color: #fff; text-shadow: 1px 1px #000; }
#shd-info { font-size: 9px; color: #00d2ff; display: none; font-weight: bold; text-shadow: 0 0 5px #00d2ff; }

#leaderboard-hud-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
#target-box { position: relative; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; appearance: none; font: inherit; color: #FFD700; text-shadow: 1px 1px #000; font-size: 8px; font-weight: bold; white-space: nowrap; transition: transform 0.1s ease, background 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease; background: rgba(255,255,255,0.08); padding: 5px 9px; border-radius: 7px; border: 1px solid #FFD700; box-shadow: 0 0 7px rgba(255,215,0,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-shrink: 0; }
#target-box:active { transform: scale(0.95); background: rgba(255,255,255,0.16); }
#target-box.target-box-glow { animation: target-box-pulse 0.5s ease-in-out infinite alternate; border-color: #00ff88 !important; }
#leaderboard-activity-badge { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; display: grid; place-items: center; border-radius: 8px; background: #ff3b30; color: #fff; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 1px 5px rgba(255,59,48,0.55); font-size: 8px; line-height: 1; font-weight: 900; pointer-events: none; }
#leaderboard-activity-badge[hidden] { display: none; }
#leaderboard-activity-badge.is-pulsing { animation: leaderboard-badge-pulse 0.5s ease-out; }
@keyframes leaderboard-badge-pulse { 0% { transform: scale(0.8); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #leaderboard-activity-badge.is-pulsing { animation: none; } }
@keyframes target-box-pulse {
    0% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.35), inset 0 0 3px rgba(255, 215, 0, 0.15); transform: scale(1); }
    100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), inset 0 0 6px rgba(0, 255, 136, 0.35); transform: scale(1.03); }
}

/* ── DEGEN NEON GLOW FOR LEADERBOARD MY ROW ── */
.lb-me-row.degen-neon-glow {
    border: 1px solid #00ff88 !important;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.15);
    animation: degen-row-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes degen-row-pulse {
    0% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.3), inset 0 0 4px rgba(0, 255, 136, 0.1); }
    100% { box-shadow: 0 0 18px rgba(0, 255, 136, 0.75), inset 0 0 12px rgba(0, 255, 136, 0.3); }
}
.degen-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 242, 254, 0.2));
    border: 1px solid rgba(0, 255, 136, 0.5);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: bold;
    color: #00ff88;
    margin-left: 5px;
    vertical-align: middle;
}

#next-action, #daily-cap-progress { width:100%; box-sizing:border-box; margin-top:7px; font-size:9px; color:#cbd5e1; }
.next-goal-label, .daily-cap-label { margin-bottom:4px; font-weight:700; line-height:1.35; }
.next-goal-track, .daily-cap-track { height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.12); }
.next-goal-track span, .daily-cap-track span { display:block; height:100%; background:linear-gradient(90deg,#00d2ff,#00ff88); transition:width .35s ease; }
#daily-cap-progress.near-cap .daily-cap-label { color:#FFD700; }
#daily-cap-progress.near-cap .daily-cap-track span { background:linear-gradient(90deg,#FFD700,#ff9500); }
#daily-cap-progress.cap-reached .daily-cap-label { color:#ff4d4d; }
#daily-cap-progress.cap-reached .daily-cap-track span { background:#ff4d4d; }

/* ── PNL CARD RANK BANNER ── */
.pnl-rank-banner {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(0, 255, 136, 0.25), rgba(255, 215, 0, 0.15));
    border: 1px solid #FFD700;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 6px 0 8px 0;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
    animation: banner-glow 1.2s ease-in-out infinite alternate;
}
@keyframes banner-glow {
    0% { transform: scale(0.98); box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
    100% { transform: scale(1.02); box-shadow: 0 0 18px rgba(0, 255, 136, 0.6); }
}
#target-name { color: #fff; font-weight: bold; font-size: 9px; text-shadow: 1px 1px 0 #000; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#target-score { color: var(--moon); font-size: 9px; text-shadow: 1px 1px 0 #000; }

/* Rank nằm sát dưới KING OF DEGEN thành một cụm HUD thống nhất. */
#current-rank { position: static; text-align: center; font-size: 9px; color: #ccc; text-shadow: 1px 1px 0 #000; font-weight: bold; white-space: nowrap; pointer-events: none; }

#feedbackToggle, #shopToggle { position: absolute; bottom: 20px; z-index: 100; width: 72px; height: 32px; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34,211,238,0.2); border-radius: 10px; color: #22d3ee; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 10px; cursor: pointer; pointer-events: auto; transition: all 0.2s; text-shadow: none; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; text-align: center; }
#feedbackToggle { left: 20px; }
#shopToggle { right: 20px; }
.lang-switch-btn-group { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 52px; right: 10px; z-index: 1000; padding: 2px 6px; background: rgba(13,17,28,0.75); border: 1px solid rgba(0,242,254,0.4); border-radius: 14px; font-size: 10px; font-weight: bold; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#feedbackToggle:hover, #shopToggle:hover, #feedbackToggle:active, #shopToggle:active { box-shadow: 0 0 15px rgba(34,211,238,0.4); background: rgba(255,255,255,0.1); color: #22d3ee; }
#streak-badge { position: absolute; top: calc(20px + var(--notch)); left: 15px; z-index: 100; pointer-events: auto; }

#vip-promo { position: absolute; bottom: 20px; right: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); padding: 6px 12px; border-radius: 12px; border: 1px solid #FFD700; cursor: pointer; z-index: 50; box-shadow: 0 0 10px rgba(255,215,0,0.4); backdrop-filter: blur(4px); transition: transform 0.1s; transform: scale(0.85); transform-origin: bottom right; pointer-events: auto; }
#vip-promo:active { transform: scale(0.75); }
#vip-slider { position: relative; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; margin-bottom: 2px; pointer-events: none; }
.vip-img { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: cycle-img 9s infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.vip-img:nth-child(1) { animation-delay: 0s; }
.vip-img:nth-child(2) { animation-delay: 3s; }
.vip-img:nth-child(3) { animation-delay: 6s; }
@keyframes cycle-img { 0%, 25% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,215,0,0.8)); } 33%, 100% { opacity: 0; transform: scale(0.8); filter: drop-shadow(0 0 0 transparent); } }
#vip-btn-text { color: #FFD700; font-size: 9px; font-weight: 700; font-family: var(--font-ui); text-shadow: 1px 1px 0 #000; animation: pulse 1s infinite alternate; white-space: nowrap; margin-top:4px; pointer-events: none; }

#first-session-guidance { position:absolute; top:18%; left:50%; transform:translateX(-50%); z-index:90; max-width:86%; padding:10px 14px; border:1px solid rgba(0,242,254,0.65); border-radius:10px; background:rgba(5,12,22,0.82); color:#fff; font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.6; text-align:center; white-space:pre-line; text-shadow:0 0 8px #00F2FE; box-shadow:0 0 18px rgba(0,242,254,0.24); pointer-events:none; box-sizing:border-box; }
#first-session-guidance[hidden] { display:none; }
#next-action { min-height:14px; margin-top:7px; color:#00F2FE; font-family:'Chakra Petch',sans-serif; font-size:10px; font-weight:800; line-height:1.35; text-align:center; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; z-index: 100; backdrop-filter: blur(8px); box-sizing: border-box; padding: 10px 0 !important; opacity: 0; transition: opacity 0.3s ease; overflow-y: hidden !important; overflow-x: hidden !important; -ms-overflow-style: none; scrollbar-width: none; }
#overlay::-webkit-scrollbar { display: none; }
#overlay.show { opacity: 1; pointer-events: auto; }

#pnl-card { background: var(--bg-card); border: 2px solid #333; border-radius: 12px; padding: 12px 15px !important; width: 85%; box-shadow: 0 15px 40px rgba(0,0,0,0.9); position: relative; overflow: hidden; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275); flex-shrink: 0 !important; margin-bottom: 10px !important; }
#overlay.show #pnl-card { transform: scale(1); }
#pnl-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--card-border-color,var(--danger)); }
#statusText { font-size: 20px !important; margin: 0 0 5px 0 !important; text-shadow: 2px 2px #000; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; }
#roi-val { font-size: 28px !important; font-weight: bold; margin: 5px 0 5px 0 !important; text-shadow: 0 0 15px rgba(255,255,255,0.2); }
#taunt-text { font-size: 10px; color: #FFD700; font-style: italic; margin-bottom: 8px !important; line-height: 1.4; font-family: var(--font-text); font-weight: bold; }
.pnl-detail {
    font-size: 11px;
    color: #94A3B8;
    margin: 5px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 5px !important;
    font-family: var(--font-ui) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pnl-detail span {
    color: #fff;
    font-family: var(--font-ui) !important;
    font-weight: 800;
}
#overlay .airdrop-claim { color: var(--airdrop); animation: pulse 1s infinite alternate; }
.fomo-tip-box { margin-top: 8px !important; background: rgba(0,255,136,0.05); border: 1px solid rgba(0,255,136,0.2); border-radius: 8px; padding: 8px !important; }
#final-rank-desc { margin: 0 0 10px 0; font-size: 10px; color: #ddd; line-height: 1.6; }

.btn-swap-inner { width: 100%; background: linear-gradient(90deg,#00d2ff,#0077ff); color: #fff; box-shadow: 0 0 15px rgba(0,210,255,0.5); font-size: 12px; padding: 14px 10px; border: 1px solid #fff; border-radius: 6px; display: block; cursor: pointer; font-weight: 700; font-family: var(--font-ui); animation: pulse 1s infinite alternate; }
.btn-group { display: flex; gap: 8px; margin-top: 5px; width: 85%; flex-direction: column; align-items: center; flex-shrink: 0; }
.btn-row { display: flex; gap: 8px; width: 100%; overflow: visible; position: relative; z-index: 1; }
.btn,.btn-claim,.btn-more { font-weight: 700; font-size: 13px; cursor: pointer; text-transform: uppercase; font-family: var(--font-ui); border-radius: 12px; padding: 14px 8px; border: 2px solid #00F2FE; transition: transform 0.1s; flex: 1; flex-shrink: 0; white-space: nowrap; text-overflow: ellipsis; background: rgba(0,242,254,0.05); color: #fff; box-shadow: 0 0 10px rgba(0,242,254,0.15); overflow: visible; }
/* ========================================================= */
/* CRYPTO CANDLESTICK BUTTONS (SAFE UI POLISH) */
/* ========================================================= */

/* NEN XANH (GREEN/LONG) - CAY TIEP */
.btn-group .btn-play {
    background: rgba(0, 255, 136, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #00ff88;
    border: 2px solid #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.15), inset 0 0 5px rgba(0, 255, 136, 0.1);
}
.btn-group .btn-play:hover, .btn-group .btn-play:active {
    background: #00ff88;
    color: #000000;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    transform: scale(0.94);
}

/* NEN DO (RED/SHORT) - GO LO */
.btn-group .btn-margin {
    background: rgba(255, 77, 77, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ff4d4d;
    border: 2px solid #ff4d4d;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.15), inset 0 0 5px rgba(255, 77, 77, 0.1);
}
.btn-group .btn-margin:hover, .btn-group .btn-margin:active {
    background: #ff4d4d;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.8);
    transform: scale(0.94);
}
.btn-share-tg { background: #2AABEE; color: #fff; }
.btn-share-x { background: #000; color: #fff; border-color: #555; }
.btn-more { width: 85%; margin-top: 10px; background: linear-gradient(90deg,#b052ff,#00d2ff); color: #fff; display: block; }
.btn-claim { width: 85%; background: linear-gradient(90deg,#ff0055,#FFD700); color: #fff; display: block; transition: background 0.3s ease; margin: 10px auto; }
.btn.is-pressed,.btn-swap-inner.is-pressed,.btn-claim.is-pressed,.btn-more.is-pressed { transform: scale(0.95); }

#tasks-modal,#daily-reward-modal,#staking-modal,#leaderboard-modal,#stonfi-modal,#shop-modal,#gacha-modal,#revive-modal,#custom-degen-alert,#wallet-onboard{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9000;backdrop-filter:blur(8px);opacity:0;transition:opacity 0.3s ease;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
#tasks-modal.modal-visible,#daily-reward-modal.modal-visible,#staking-modal.modal-visible,#leaderboard-modal.modal-visible,#stonfi-modal.modal-visible,#shop-modal.modal-visible,#gacha-modal.modal-visible,#revive-modal.modal-visible,#custom-degen-alert.modal-visible,#wallet-onboard.modal-visible{opacity:1;}
@keyframes modalFadeIn{from{opacity:0;backdrop-filter:blur(0px);}to{opacity:1;backdrop-filter:blur(8px);}}

/* Cinematic canvas blur when any modal is open */
#game-container.modal-open canvas { filter: blur(8px); transition: filter 0.3s ease; }
#game-container canvas { filter: blur(0px); transition: filter 0.3s ease; }
#daily-spin-modal h2,.spin-card h2,.headline{font-family:var(--font-ui);font-weight:900;font-size:18px;white-space:nowrap;margin-top:-15px;margin-bottom:10px;}
#daily-spin-btn{font-weight:900;}
.tasks-card,.spin-card,.lb-card,.degen-alert-box{background:rgba(13,17,28,0.92);color:#fff;border:2px solid rgba(0,242,254,0.4);border-radius:24px;width:90%;max-width:380px;padding:30px 20px;text-align:center;position:relative;box-shadow:0 0 30px rgba(0,242,254,0.15);max-height:85vh;overflow:visible;pointer-events:auto;}
#daily-reward-modal .spin-card{overflow:visible;max-height:none;}
.shop-card{background:linear-gradient(180deg,#0d1117,#06090f);color:#fff;border:2px solid #00d2ff;border-radius:16px;width:90%;max-width:360px;padding:20px 16px;text-align:center;position:relative;box-shadow:0 0 40px rgba(0,210,255,0.25);max-height:85vh;overflow:visible;pointer-events:auto;box-sizing:border-box;}
.shop-title{font-family:var(--font-ui);font-size:18px;color:#00d2ff;margin:0 0 12px 0;text-shadow:0 0 10px rgba(0,210,255,0.5);}
.shop-balance{font-family:var(--font-ui);font-size:14px;font-weight:700;color:#FFD700;margin-bottom:14px;}
.shop-tabs{display:flex;gap:6px;margin-bottom:14px;justify-content:center;}
.shop-tab{font-family:var(--font-ui);font-size:11px !important;font-weight:700;padding:8px 4px !important;border-radius:8px;border:1px solid #00d2ff;background:transparent;color:#00d2ff;cursor:pointer;transition:all 0.2s;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shop-tab.active{background:#00d2ff;color:#000;}
.shop-panel{width:100%;display:block;}
.shop-card .shop-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);border:1px solid #2a2a3a;border-radius:10px;padding:12px;margin-bottom:10px;text-align:left;width:100%;box-sizing:border-box;}
.shop-item-icon{font-size:26px;flex-shrink:0;width:32px;text-align:center;}
.shop-item-info{flex:1;min-width:0;}
.shop-item-name{font-family:var(--font-ui);font-size:12px;font-weight:700;color:#fff;margin-bottom:3px;white-space:normal;}
.shop-item-desc{font-family:var(--font-text);font-size:10px;color:#aaa;margin-bottom:4px;line-height:1.4;}
.shop-item-equip-note{font-family:var(--font-text);font-size:9px;font-style:italic;color:#7dd3fc;line-height:1.35;margin:1px 0 5px;}
.shop-item-price{font-family:var(--font-ui);font-size:11px;font-weight:700;color:#FFD700;}
.shop-vip-set-progress{width:100%;box-sizing:border-box;margin:0 0 10px;padding:9px 10px;border:1px solid rgba(255,215,0,0.35);border-radius:10px;background:rgba(255,215,0,0.07);color:#FFD700;font-family:var(--font-ui);font-size:10px;font-weight:800;line-height:1.4;text-align:center;letter-spacing:.2px;}
.shop-vip-set-progress.is-active{border-color:rgba(0,255,136,0.65);background:rgba(0,255,136,0.1);color:#00ff88;box-shadow:0 0 12px rgba(0,255,136,0.15);}
.shop-btn{font-family:var(--font-ui);font-size:11px;font-weight:700;padding:8px 14px;border-radius:8px;border:2px solid #00d2ff;background:transparent;color:#00d2ff;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.shop-btn:hover{background:#00d2ff;color:#000;}
.shop-btn.is-buying{cursor:wait;opacity:.75;border-color:#FFD700;color:#FFD700;background:rgba(255,215,0,.08);}
.shop-btn.insufficient{border-color:#64748b;color:#94a3b8;background:rgba(100,116,139,0.08);}
.shop-btn.insufficient:hover{border-color:#FFD700;color:#FFD700;background:rgba(255,215,0,0.08);}
.shop-buff-counts{font-family:var(--font-ui);font-size:11px;color:#aaa;display:flex;gap:16px;justify-content:center;margin-top:6px;}
.spin-card{min-height:unset;height:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-bottom:24px;}
#daily-spin-modal .modal-date{margin-top:5px;margin-bottom:25px;}

.lb-card { border-color: var(--primary); box-shadow: 0 0 50px rgba(0, 255, 136, 0.2); }
.lb-card h2 { color: var(--primary); font-size: 16px; margin: 0 0 15px 0; text-shadow: 2px 2px #000; }
.lb-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.lb-tab { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 8px 15px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.lb-tab.active { background: var(--primary); color: #000; box-shadow: 0 0 15px rgba(0, 255, 136, 0.6); font-weight: bold; }
.lb-list { display: flex; flex-direction: column; gap: 10px; }

.task-item, .lb-item { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.05); padding:12px; border-radius:8px; border:1px solid #333; transition: transform 0.2s; }
.task-info, .lb-player-info { text-align:left; flex:1; }
.lb-player-info { padding-left:10px; }
.task-name, .lb-player-name { color:#fff; font-size:10px; margin-bottom:5px; line-height:1.4; font-family:var(--font-text); font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.task-reward, .lb-player-score { color:var(--moon); font-size:10px; font-weight:700; font-family:var(--font-ui); }
.lb-rank-num { font-size: 11px; color: #fff; font-family: var(--font-ui); text-shadow: 1px 1px 0 #000; width: 30px; text-align: left; font-weight: 700; }
.lb-rank-icon { font-size: 16px; margin-left: 5px; text-shadow: 2px 2px 0px rgba(0,0,0,0.5); }
.lb-score-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.lb-trend { font-size: 8px; font-family: var(--font-text); font-weight: bold; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.trend-green { color: #00ff88; text-shadow: 0 0 5px rgba(0,255,136,0.4); }
.trend-red { color: #ff4d4d; text-shadow: 0 0 5px rgba(255,77,77,0.4); }
.lb-card .lb-me-row { margin-top: 10px; border-top: 2px dashed var(--primary); padding-top: 10px; background: linear-gradient(90deg, rgba(0,255,136,0.1), transparent); }

@keyframes champion-glow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); border-color: #FFD700; transform: scale(1); }
    100% { box-shadow: 0 0 30px rgba(255, 215, 0, 1); border-color: #fff; transform: scale(1.03); }
}
.lb-item.top-1 {
    background: linear-gradient(90deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
    border: 2px solid #FFD700;
    animation: champion-glow 0.8s infinite alternate;
    position: relative;
    z-index: 10;
}
.lb-item.top-1 .lb-rank-num { color: #fff; text-shadow: 0 0 10px #FFD700; font-size: 14px; }
.lb-item.top-1 .lb-player-name { color: #FFD700; text-shadow: 1px 1px #000; }
.lb-item.top-2 { border: 1px solid #C0C0C0; background: linear-gradient(90deg, rgba(192,192,192,0.15), transparent); }
.lb-item.top-2 .lb-rank-num { color: #C0C0C0; }
.lb-item.top-3 { border: 1px solid #cd7f32; background: linear-gradient(90deg, rgba(205,127,50,0.15), transparent); }
.lb-item.top-3 .lb-rank-num { color: #cd7f32; }

.task-btn{background:var(--primary);color:#000;border:none;padding:8px 12px;font-family:var(--font-ui);font-size:11px;font-weight:700;border-radius:4px;cursor:pointer;text-transform:uppercase;}
.task-btn:active{transform:scale(0.9)}
.btn-shiny{background:linear-gradient(90deg,#ff0055,#FFD700);color:#fff;border:2px solid #fff;text-shadow:1px 1px 0 #000;animation:pulse 1s infinite alternate;font-weight:bold}
.tasks-card .task-btn.done{background:#333;color:#888;pointer-events:none;border:none;text-shadow:none;animation:none}
.close-tasks-btn,.spin-close{position:absolute;top:10px;right:15px;color:#888;font-size:24px;cursor:pointer;font-family:var(--font-ui);font-weight:bold;z-index:20;background:transparent;border:none;}
.spin-close:active{color:#fff}

#custom-degen-alert{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:999999;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(5px);pointer-events:auto}
.alert-btn{width:100%;background:linear-gradient(90deg,#00ff88,#00d2ff);color:#000;border:2px solid #fff;padding:14px;font-family:var(--font-ui);font-size:13px;font-weight:700;border-radius:8px;cursor:pointer;text-transform:uppercase;animation:pulse 1.5s infinite alternate;box-shadow:0 0 15px rgba(0,255,136,0.4);}

/* ==========================================================================
   8-SLICE CASINO WHEEL — VIBRANT PREMIUM CARTOON STYLE (PERFECT PROPORTIONS)
   ========================================================================== */
#daily-reward-modal .degen-alert-box {
    border: 2px solid rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 25px rgba(0,242,254,0.2), inset 0 0 15px rgba(0,0,0,0.6);
    background: rgba(13, 17, 28, 0.95);
    max-height: 90vh;
    overflow: visible;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 24px;
    position: relative;
    width: min(90%, 340px) !important;
    max-width: 340px !important;
}

#daily-wheel-stage {
    position: relative;
    width: 250px;
    height: 250px;
    min-width: 250px;
    min-height: 250px;
    margin: 10px auto;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,242,254,0.4) 0%, rgba(13,17,28,0.9) 100%);
    padding: 10px;
    border: 2px solid rgba(0,242,254,0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,242,254,0.3);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
    /* GPU composite layer — isolates stage từ background, tránh repaint khi wheel con rotate */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#daily-wheel-stage.holding {
    transform: scale(0.85);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,242,254,0.6);
}

#daily-wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid #00F2FE;
    filter: drop-shadow(0 0 12px rgba(0,242,254,0.9));
}
#daily-wheel-pointer::after {
    content: none;
}

#daily-spin-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform-origin: center center;
    overflow: hidden;
    border: 3px solid rgba(0, 242, 254, 0.6);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    background: conic-gradient(from -22.5deg, #3b82f6 0deg 45deg, #ef4444 45deg 90deg, #f97316 90deg 135deg, #eab308 135deg 180deg, #10b981 180deg 225deg, #06b6d4 225deg 270deg, #8b5cf6 270deg 315deg, #ec4899 315deg 360deg);
    /* Dùng transform rotate → chỉ trigger composite, không layout/paint */
    transition: transform 4s cubic-bezier(0.1, 0.8, 0.1, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    /* GPU layer riêng cho vòng quay — tách hoàn toàn khỏi stage và modal background */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
}

#daily-spin-wheel .wheel-divider {
    position: absolute;
    top: 0;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 50%;
    background: rgba(0,0,0,0.35);
    transform-origin: bottom center;
    z-index: 5;
    pointer-events: none;
}

#daily-spin-wheel #center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #0D111C 0%, #1A2235 100%);
    border-radius: 50%;
    border: 3px solid #00F2FE;
    z-index: 30;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5), inset 0 0 10px rgba(0, 242, 254, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #00F2FE;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.8);
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
}

/* BULLETPROOF AXIS CENTERING - MATCHED TO conic-gradient(from -22.5deg) */
#daily-spin-wheel .wheel-slice-text,
#daily-spin-wheel .wheel-slice-1, #daily-spin-wheel .wheel-slice-2,
#daily-spin-wheel .wheel-slice-3, #daily-spin-wheel .wheel-slice-4,
#daily-spin-wheel .wheel-slice-5, #daily-spin-wheel .wheel-slice-6,
#daily-spin-wheel .wheel-slice-7, #daily-spin-wheel .wheel-slice-8 {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 10;
    margin: 0; padding: 0; transform: none;
}

#daily-spin-wheel .slice-content {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    transform-origin: 50% 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding-top: 14%; box-sizing: border-box;
    pointer-events: none; margin: 0;
}

#daily-spin-wheel .wheel-slice-1 .slice-content { transform: rotate(0deg); }
#daily-spin-wheel .wheel-slice-2 .slice-content { transform: rotate(45deg); }
#daily-spin-wheel .wheel-slice-3 .slice-content { transform: rotate(90deg); }
#daily-spin-wheel .wheel-slice-4 .slice-content { transform: rotate(135deg); }
#daily-spin-wheel .wheel-slice-5 .slice-content { transform: rotate(180deg); }
#daily-spin-wheel .wheel-slice-6 .slice-content { transform: rotate(225deg); }
#daily-spin-wheel .wheel-slice-7 .slice-content { transform: rotate(270deg); }
#daily-spin-wheel .wheel-slice-8 .slice-content { transform: rotate(315deg); }

#daily-spin-wheel .slice-content .icon {
    font-size: 22px; line-height: 1; display: block;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.7));
    transform: none; margin: 0; padding: 0;
}

#daily-reward-modal #daily-spin-btn,
#daily-reward-modal #daily-spin-btn-claim {
    width: min(86%, 260px) !important;
    margin-top: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important;
    color: #00F2FE !important;
    box-shadow: 0 0 10px rgba(0,242,254,0.15) !important;
}
#daily-spin-btn:active,
#daily-spin-btn-claim:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.14) !important;
}

/* --- OPTIMIZED VFX: SHAKE & CONFETTI --- */
@keyframes shakeLight {
    0%, 100% { transform: translate(0, 0); }
    20%, 60% { transform: translate(-3px, 3px) rotate(-0.5deg); }
    40%, 80% { transform: translate(3px, -3px) rotate(0.5deg); }
}
#game-container .shake-screen-light { animation: shakeLight 0.3s ease-in-out; }

/* --- MOBILE OPTIMIZED CONFETTI (CONTAINED) --- */
.degen-alert-box, #daily-reward-modal .degen-alert-box {
    position: relative;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    z-index: 2147483647;
    width: 8px;
    height: 16px;
    border-radius: 2px;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

@keyframes confetti-fall {
    100% { transform: translateY(1000px) rotate(720deg); }
}

/* ========================================= */
/* 🌌 GLOBAL THEME: MIDNIGHT TERMINAL 🌌 */
/* ========================================= */

/* 1. Fonts: Chakra Petch (UI), Roboto (Text), Press Start 2P (Pixel) */

/* 2. Synchronize All Modals & Popups */
#game-container .modal-content, #game-container .degen-alert-box, #game-container .tasks-card, #daily-reward-modal .modal-content {
    background: rgba(13, 17, 28, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 25px rgba(0,242,254,0.1);
    color: #F1F5F9;
    font-family: var(--font-text);
    padding: 24px;
}

/* 3. Synchronize Titles */
#game-container h1, #game-container h2, #game-container h3,
.modal-content h2, .tasks-card h2, .degen-alert-box h3 {
    font-family: var(--font-ui);
    font-weight: 700;
    color: #00F2FE;
    text-shadow: 0 0 10px rgba(0,242,254,0.4);
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* 4. Synchronize Buttons — scoped to avoid overriding game-specific buttons */
#game-container .modal-content button,
#game-container .degen-alert-box button,
#game-container .tasks-card button,
.alert-btn, .close-tasks-btn, #daily-spin-btn {
    font-family: var(--font-ui);
    font-weight: 700;
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
    color: #0D111C;
    border: none;
    border-radius: 16px;
    padding: 12px 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,242,254,0.25);
}

.alert-btn:active {
    transform: scale(0.96);
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.2);
}

/* 5. Task List / Text Synchronization */
#game-container #custom-alert-msg, .task-desc, .reward-text {
    font-family: var(--font-text);
    color: #CBD5E1;
    font-size: 13px;
    line-height: 1.6;
}

/* 6. Focus colors */
#pnl-card .crypto-green-text { color: #2EBD85; }
#pnl-card .crypto-white-text { color: #FFFFFF; }

/* ========================================================= */
/* 🌐 OVERRIDE: WEB3 PREMIUM / FUTURISTIC (BO TRÒN IOS) 🌐 */
/* ========================================================= */

/* 1. UNIFY ALL MODALS - PREMIUM GLASSMORPHISM WITH iOS ROUNDED CORNERS */
#game-container .modal-content, #game-container .degen-alert-box,
#game-container .tasks-card, #daily-reward-modal .modal-content, #staking-modal .modal-content {
    background: rgba(13, 17, 28, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 242, 254, 0.05);
    color: #F1F5F9;
    font-family: var(--font-text);
    padding: 28px;
}

/* 2. FUTURISTIC GRADIENT HEADERS */
#game-container h1, #game-container h2, #game-container h3,
.modal-content h2, .tasks-card h2, .degen-alert-box h3,
#daily-reward-modal h2, #staking-modal h2 {
    font-family: var(--font-ui);
    font-weight: 900;
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-shadow: none;
    text-transform: uppercase;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

/* 3. CYBERPUNK GHOST BUTTONS — scoped to modals to avoid global override */
#game-container .modal-content button,
#game-container .degen-alert-box button,
#game-container .tasks-card button,
.alert-btn, #daily-spin-btn, .claim-btn, .close-tasks-btn, .btn:not(.btn-album-close) {
    font-family: var(--font-ui);
    font-size: 13px;
    background: rgba(0, 242, 254, 0.05);
    color: #FFFFFF;
    border: 2px solid #00F2FE;
    border-radius: 12px;
    padding: 14px 20px;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15), inset 0 0 10px rgba(0, 242, 254, 0.1);
    transition: all 0.15s ease-in-out;
    line-height: 1.6;
}

#game-container .modal-content button:hover,
#game-container .degen-alert-box button:hover,
.alert-btn:hover, .alert-btn:active,
#daily-spin-btn:hover,
.claim-btn:hover {
    background: #00F2FE;
    color: #000000;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(0.96);
    border-color: #00F2FE;
    text-shadow: none;
}

/* 4. PREMIUM CLOSE BUTTON */
.modal-content .close-tasks-btn, .modal-content .close-btn,
.tasks-card .close-tasks-btn, .degen-alert-box .close-btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94A3B8;
    font-size: 14px;
    box-shadow: none;
}
.modal-content .close-tasks-btn:active, .modal-content .close-btn:active,
.tasks-card .close-tasks-btn:active, .degen-alert-box .close-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.15);
}

/* 5. ULTRA-SOFT BODY TEXT */
#game-container #custom-alert-msg, .task-desc, .reward-text, .balance-text {
    font-family: var(--font-text);
    color: #94A3B8;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

/* 6. CLEAN UP RETRO SHADOWS & OUTLINES */
#daily-reward-modal, .wheel-container, .outer-ring {
    border: none;
    outline: none;
    box-shadow: none;
}

/* ========================================================= */
/* 💎 GLOBAL CYAN SHADOW OVERRIDE (WEB3 PREMIUM) 💎 */
/* ========================================================= */

/* 1. Force Cyan Box Shadows & Borders for Modals and Cards */
#game-container .modal-content, #game-container .degen-alert-box,
#game-container .tasks-card, .spin-card, #daily-wheel-stage, #center-dot {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.25), inset 0 0 15px rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.4);
}

/* 2. Force Cyan Glow for Buttons */
#game-container .modal-content button, .alert-btn, #daily-spin-btn, .claim-btn {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15), inset 0 0 10px rgba(0, 242, 254, 0.1);
}
#game-container .modal-content button:hover, .alert-btn:hover, #daily-spin-btn:hover {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
}

/* 3. Force Cyan Text for Headers & Streaks */
#game-container h1, #game-container h2, #game-container h3,
#daily-reward-streak, #pnl-card .crypto-green-text {
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.4), 0 0 20px rgba(0, 242, 254, 0.2);
    color: #00F2FE;
}

/* 4. Fix Wheel Pointer Triangle */
#daily-wheel-pointer {
    border-top-color: #00F2FE;
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.8));
}

/* Album Close Footer Button Fit Smartphone */
.btn-album-close {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(0, 242, 254, 0.1) !important;
    color: #00F2FE !important;
    border: 1px solid #00F2FE !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    line-height: 32px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
.btn-album-close:active {
    background: #00F2FE !important;
    color: #0D111C !important;
    transform: scale(0.97) !important;
}
#album-card-grid::-webkit-scrollbar {
    width: 4px;
}
#album-card-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
#album-card-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.5);
    border-radius: 4px;
}
#album-card-grid::-webkit-scrollbar-thumb:hover {
    background: #00F2FE;
}
#album-card-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.5) rgba(0, 0, 0, 0.3);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    grid-auto-rows: max-content;
    align-content: start;
}

@keyframes vipTextGlow {
    0% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.6); opacity: 0.85; }
    50% { text-shadow: 0 0 12px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 215, 0, 0.8); opacity: 1; }
    100% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.6); opacity: 0.85; }
}

.vip-text-gold-glow {
    color: #FFD700 !important;
    font-weight: 900 !important;
    animation: vipTextGlow 1.8s infinite ease-in-out;
}
#toast-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: 90%;
    max-width: 360px;
}

#toast-container .toast {
    background: rgba(13, 17, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 16px;
    padding: 12px 18px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #F1F5F9;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(0,242,254,0.1);
    animation: toastIn 0.3s cubic-bezier(0.4,0,0.2,1);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#toast-container .toast-success { border-color: rgba(0, 242, 254, 0.5); color: #00F2FE; }
#toast-container .toast-error   { border-color: rgba(255, 77, 77, 0.5); color: #ff4d4d; }
#toast-container .toast-info    { border-color: rgba(79, 172, 254, 0.5); color: #4FACFE; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================================================= */
/* 🎮 GAMEPLAY IMMERSION (HIDE UI ON PLAY) 🎮 */
/* ========================================================= */

.hide-on-play {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

body.is-playing .hide-on-play {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

/* Duplicate wheel/center-dot definitions removed — consolidated above */

/* ========================================================= */
/* 📱 ENDGAME GRID & MOBILE FIT OVERRIDE 📱 */
/* ========================================================= */
.btn-group .btn-row .btn,
.btn-group .btn-row .btn-more,
.btn-group .btn-row .btn-share-tg {
    padding: 14px 4px;
    font-size: 10px;
    flex: 1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 12px;
}
.btn-group {
    width: 90%;
    max-width: 360px;
    gap: 4px;
}

/* ========================================================= */
/* STRICT 2-FONT TYPOGRAPHY SYSTEM */
/* ========================================================= */

/* 1. MODERN FONT FOR ALL UI & BUTTONS (Accented, Readable) */
#overlay .btn, #overlay .btn-play, #overlay .btn-margin, #overlay .btn-more,
#overlay .btn-share-tg, #overlay .btn-claim, #btn-revive,
.modal-content, .degen-alert-box, #statusText {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Make button text slightly larger and crisper since it's a modern font */
.btn-group .btn-row .btn,
.btn-group .btn-row .btn-more,
.btn-group .btn-row .btn-share-tg,
#overlay .btn-claim {
    font-size: 13px;
    text-transform: uppercase;
}

/* 2. RETRO 8-BIT FONT (Unaccented, Core Game Elements & High-Impact ROI) */
#score-val, #roi-val {
    font-family: var(--font-pixel);
    text-transform: uppercase;
}

/* 3. PNL STATS TABLE - FONT UI HIỆN ĐẠI GỌN GÀNG SẮC NÉT (CHAKRA PETCH / INTER) */
.pnl-detail {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94A3B8;
    margin: 5px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 5px !important;
    letter-spacing: 0.3px;
}

.pnl-detail span {
    font-family: var(--font-ui) !important;
    font-weight: 800;
}

.pnl-detail .airdrop-claim {
    font-family: var(--font-ui) !important;
    font-weight: 900;
    font-size: 12px !important;
}

/* 3. ENDGAME TITLE SIZING — consolidated, no duplicates */
#overlay #statusText {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#overlay #roi-val {
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    margin: 5px 0 12px 0;
    text-shadow: 0px 0px 15px rgba(0, 255, 136, 0.6);
}

/* ========================================================= */
/* VIRAL SHARE BUTTONS */
/* ========================================================= */
#overlay .share-x-main {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.2);
}
#overlay .share-x-main:hover, #overlay .share-x-main:active {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255,255,255,0.6);
    transform: scale(0.94);
}
#overlay .share-tg-main {
    background: #2AABEE;
    color: #fff;
    border: 2px solid #2AABEE;
    box-shadow: 0 0 10px rgba(42,171,238,0.3);
}
#overlay .share-tg-main:hover, #overlay .share-tg-main:active {
    background: #1a8fc7;
    box-shadow: 0 0 20px rgba(42,171,238,0.7);
    transform: scale(0.94);
}
.share-btn-wrap {
    position: relative;
    overflow: visible;
    z-index: 10001;
}

#overlay .btn-share-x,
#overlay .btn-share-tg,
#overlay .share-x-main,
#overlay .share-tg-main {
    position: relative;
    overflow: visible;
    z-index: 20;
}

.share-flap-badge {
    position: absolute;
    top: -10px;
    right: -6px;
    background: linear-gradient(90deg, #ff0055, #FFD700);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 6px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10005;
    box-shadow: 0 2px 8px rgba(255,0,85,0.5);
    animation: badge-bounce 0.8s ease-in-out infinite alternate;
}
@keyframes badge-bounce {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.12) translateY(-2px); }
}

.share-ref-badge {
    position: absolute;
    top: -10px;
    right: -6px;
    background: linear-gradient(90deg, #ff6600, #00ff88);
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 6px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10005;
    box-shadow: 0 2px 8px rgba(0,255,136,0.5);
    animation: badge-pulse 1s ease-in-out infinite alternate;
}
@keyframes badge-pulse {
    from { transform: scale(1); box-shadow: 0 2px 8px rgba(0,255,136,0.4); }
    to   { transform: scale(1.1); box-shadow: 0 2px 14px rgba(0,255,136,0.8); }
}

/* ========================================================= */
/* TOI UU VONG QUAY MAY MAN (CENTERING & HARMONY) */
/* ========================================================= */
/* Duplicate #daily-reward-modal .degen-alert-box removed — consolidated above */
/* Duplicate #daily-wheel-stage removed */
/* center-dot — consolidated into #daily-spin-wheel #center-dot above */
#daily-spin-wheel .slice-content {
    padding-top: 14%;
}

/* Ensure the title is not clipped at the top of the modal */
#daily-reward-modal .spin-card {
    padding-top: 35px;
}

/* ========================================================= */
/* TROLL CONFETTI ANIMATION */
/* ========================================================= */
@keyframes troll-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ========================================================= */
/* TOI UU VONG QUAY MAY MAN THEO YEU CAU */
/* ========================================================= */
/* Duplicate #daily-wheel-stage definition removed — consolidated above */
/* Duplicate #daily-spin-btn override removed */

/* ========================================================= */
/* 3D CARD FLIP GACHA - LOOTBOX DROP */
/* ========================================================= */
#gacha-wallet {
    /* animation: drop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); */
}
@keyframes drop-in {
    0% { transform: translateY(-300px) scale(0.5); opacity: 0; }
    60% { transform: translateY(10px) scale(1.1); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
#gacha-wallet.shake {
    animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    50% { transform: translateX(10px) rotate(5deg); }
    75% { transform: translateX(-10px) rotate(-5deg); }
}

.gacha-card {
    perspective: 1000px;
    width: 180px;
    height: 240px;
    display: none;
}
.gacha-card.card-visible {
    display: block;
}
.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.card-inner.flipped {
    transform: rotateY(180deg);
}
/* Optimize 3D Gacha Card for maximum size */
.gacha-card-3d-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.96s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; /* Chậm 20% (0.8s -> 0.96s) cho hồi hộp */
    margin: 0;
}

.gacha-card-3d-wrapper.flipped {
    transform: rotateY(180deg) scale(1.02);
}

.gacha-card-3d-wrapper .card-front,
.gacha-card-3d-wrapper .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 14px;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.gacha-card-3d-wrapper .card-front {
    background: url('../assets/images/card_back.webp') center/cover no-repeat !important;
    z-index: 2;
}

.gacha-card-3d-wrapper .card-back {
    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.gacha-card-3d-wrapper .card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.rarity-vip { box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255,215,0,0.4); animation: glowPulseVip 1.5s infinite alternate; border-radius: 14px; }
.rarity-high-reward { box-shadow: 0 0 28px #ff8800, 0 0 55px rgba(255,136,0,0.4); animation: glowPulseHigh 1.5s infinite alternate; border-radius: 14px; }
.rarity-reward { box-shadow: 0 0 25px #b052ff, 0 0 50px rgba(176,82,255,0.3); border-radius: 14px; }
.rarity-consolation { box-shadow: 0 0 20px #00d2ff; border-radius: 14px; }
.rarity-punishment { box-shadow: 0 0 15px rgba(255,77,77,0.3); border-radius: 14px; }

/* =============================================
   RICH CARD STRUCTURE (inner layout)
   .card-back
     └── .card-frame        (thick colored border layer)
           └── .card-inner-bg  (dark gradient background)
                 ├── .card-item-name  (top label)
                 ├── .card-img-wrap   (image centered)
                 └── .card-value-badge (bottom reward amount)
   ============================================= */

.card-frame {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
}
.card-inner-bg {
    flex: 1;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px 10px 10px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.card-item-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255,255,255,0.8);
    z-index: 3;
    line-height: 1.4;
    width: 100%;
}
.card-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 0;
}
.card-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.card-value-badge {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px currentColor;
}

/* Rarity-specific frame colors */
.card-back.rarity-punishment {
    box-shadow: 0 0 20px 4px #ff4d4d;
    border: none;
}
.card-back.rarity-punishment .card-frame {
    background: linear-gradient(135deg, #ff4d4d, #8b0000, #ff4d4d);
}
.card-back.rarity-punishment .card-inner-bg {
    background: linear-gradient(160deg, #1a0505 0%, #2d0808 60%, #1a0505 100%);
}
.card-back.rarity-punishment .card-value-badge {
    background: rgba(255,77,77,0.2);
    color: #ff4d4d;
    border: 1px solid rgba(255,77,77,0.5);
}

.card-back.rarity-consolation {
    box-shadow: 0 0 20px 4px #b052ff;
    border: none;
}
.card-back.rarity-consolation .card-frame {
    background: linear-gradient(135deg, #b052ff, #4a0080, #b052ff);
}
.card-back.rarity-consolation .card-inner-bg {
    background: linear-gradient(160deg, #0e0520 0%, #1a0a30 60%, #0e0520 100%);
}
.card-back.rarity-consolation .card-value-badge {
    background: rgba(176,82,255,0.2);
    color: #b052ff;
    border: 1px solid rgba(176,82,255,0.5);
}

.card-back.rarity-reward {
    box-shadow: 0 0 20px 4px #00ff88;
    border: none;
}
.card-back.rarity-reward .card-frame {
    background: linear-gradient(135deg, #00ff88, #006633, #00ff88);
}
.card-back.rarity-reward .card-inner-bg {
    background: linear-gradient(160deg, #031a0a 0%, #072e12 60%, #031a0a 100%);
}
.card-back.rarity-reward .card-value-badge {
    background: rgba(0,255,136,0.2);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,0.5);
}

.card-back.rarity-vip {
    animation: vip-blink 0.3s step-end infinite;
}
.card-back.rarity-vip .card-frame {
    background: linear-gradient(135deg, #FFD700, #b8860b, #FFD700, #b8860b, #FFD700);
}
.card-back.rarity-vip .card-inner-bg {
    background: linear-gradient(160deg, #1a1200 0%, #2e2000 60%, #1a1200 100%);
}
.card-back.rarity-vip .card-value-badge {
    background: rgba(255,215,0,0.2);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.6);
    font-size: 10px;
}

/* GACHA SHARE BUTTONS */
/* Note: main .gacha-share-box & .gacha-share-btn styling moved below under GACHA MODAL — OPTIMIZED LAYOUT */
.gacha-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.gacha-share-btn:active {
    transform: translateY(0px);
}
.gacha-share-tg {
    background: #24A1DE;
    color: #fff;
    box-shadow: 0 4px 12px rgba(36,161,222,0.4);
}
.gacha-share-tg:hover {
    box-shadow: 0 6px 18px rgba(36,161,222,0.6);
}
.gacha-share-x {
    background: #000;
    color: #fff;
    border: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.gacha-share-x:hover {
    box-shadow: 0 6px 18px rgba(255,255,255,0.15);
    border-color: #555;
}


/* Rarity Color Variables */
.rarity-punishment { --rarity-color: #ff4d4d; }
.rarity-consolation { --rarity-color: #00d2ff; }
.rarity-reward { --rarity-color: #b052ff; }
.rarity-high-reward { --rarity-color: #ff8800; }
.rarity-vip { --rarity-color: #FFD700; }

/* Rarity Glow Effects */
.rarity-vip .card-back {
    box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255,215,0,0.4);
    animation: glowPulseVip 1.5s infinite alternate;
}
.rarity-high-reward .card-back {
    box-shadow: 0 0 28px #ff8800, 0 0 55px rgba(255,136,0,0.4);
    animation: glowPulseHigh 1.5s infinite alternate;
}
.rarity-reward .card-back {
    box-shadow: 0 0 25px #b052ff, 0 0 50px rgba(176,82,255,0.3);
}
.rarity-consolation .card-back {
    box-shadow: 0 0 20px #00d2ff;
}
.rarity-punishment .card-back {
    box-shadow: 0 0 15px rgba(255,77,77,0.3);
}

@keyframes glowPulseVip {
    from { box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255,215,0,0.4); }
    to { box-shadow: 0 0 50px #FFD700, 0 0 80px rgba(255,215,0,0.7); }
}
@keyframes glowPulseHigh {
    from { box-shadow: 0 0 28px #ff8800, 0 0 55px rgba(255,136,0,0.4); }
    to { box-shadow: 0 0 45px #ff8800, 0 0 70px rgba(255,136,0,0.6); }
}

@keyframes gacha-rumble {
    0%   { transform: translate(0px, 0px) rotate(0deg);  }
    25%  { transform: translate(-2px, 2px) rotate(-1deg); }
    50%  { transform: translate(2px, -2px) rotate(1deg);  }
    75%  { transform: translate(-2px, -2px) rotate(0deg);  }
    100% { transform: translate(2px, 2px) rotate(-1deg); }
}
@-webkit-keyframes gacha-rumble {
    0%   { -webkit-transform: translate(0px, 0px) rotate(0deg);  }
    25%  { -webkit-transform: translate(-2px, 2px) rotate(-1deg); }
    50%  { -webkit-transform: translate(2px, -2px) rotate(1deg);  }
    75%  { -webkit-transform: translate(-2px, -2px) rotate(0deg);  }
    100% { -webkit-transform: translate(2px, 2px) rotate(-1deg); }
}
.gacha-is-rumbling {
    animation: gacha-rumble 0.15s infinite;
}

@keyframes gachaFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.25)) brightness(1);
    }
    50% {
        transform: translateY(-4px) scale(1.01);
        filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.4)) brightness(1.03);
    }
}
@-webkit-keyframes gachaFloat {
    0%, 100% { -webkit-transform: translateY(0) scale(1); }
    50%       { -webkit-transform: translateY(-4px) scale(1.01); }
}

@keyframes gachaShake {
    0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
    20%  { transform: translate(-2px, 1px) rotate(-1.5deg) scale(1.01); }
    40%  { transform: translate(2px, -1px) rotate(1.5deg) scale(1.01); }
    60%  { transform: translate(-1px, -2px) rotate(-1deg) scale(1.01); }
    80%  { transform: translate(1px, 2px) rotate(1deg) scale(1.01); }
    100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}
@-webkit-keyframes gachaShake {
    0%   { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); }
    20%  { -webkit-transform: translate(-2px, 1px) rotate(-1.5deg) scale(1.01); }
    40%  { -webkit-transform: translate(2px, -1px) rotate(1.5deg) scale(1.01); }
    60%  { -webkit-transform: translate(-1px, -2px) rotate(-1deg) scale(1.01); }
    80%  { -webkit-transform: translate(1px, 2px) rotate(1deg) scale(1.01); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

.gacha-anim-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 454px !important; /* Giảm 10% so với 504 để chữ dưới lá bài không bị che */
    height: 454px !important;
    margin: 0 auto;
    display: block;
    overflow: visible !important;
}

.gacha-chest-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.08);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    cursor: pointer;
}

#gacha-chest-img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    z-index: 1;
    transition: opacity 0.3s ease;
    margin: 0 auto;
    display: block;
}

.gacha-floating {
    animation: gachaFloat 1.8s ease-in-out infinite;
}

.gacha-shaking {
    animation: gachaShake 0.12s linear infinite;
}
@keyframes pulse-glow {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
@keyframes vip-blink {
    0%, 100% { border-color: #FFD700; }
    50% { border-color: #fff; }
}

#gacha-modal .degen-alert-box {
    border: none;
    box-shadow: none;
    overflow: visible;
}

#gacha-modal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 10px;
}

/* ========================================================= */
/* GACHA MODAL — OPTIMIZED LAYOUT */
/* ========================================================= */
.gacha-modal-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 92%;
    max-width: 400px;
    height: auto;
    max-height: calc(100% - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(13, 17, 28, 0.97);
    border-radius: 24px;
    padding: 14px 14px 8px 14px;
    box-sizing: border-box;
    margin: 0 auto;
    gap: 6px;
}

.gacha-modal-title {
    color: #00F2FE;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 0 12px rgba(0,242,254,0.7);
    margin: 0;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.gacha-lootbox-wrap {
    position: relative;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    margin: 4px 0 8px 0;
}

/* Tap-to-Respin: visual cue cho lá bài gacha */
#gacha-3d-anchor {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s ease;
}
#gacha-3d-anchor:active {
    transform: translate(-50%, -50%) scale(0.96);
}
/* Tap-to-Spin: visual cue cho rương idle */
#gacha-idle-chest, #gacha-chest-img {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}
#gacha-idle-chest:active {
    transform: scale(0.96);
}

.gacha-result-text {
    color: #00ff88;
    font-size: 13px;
    text-align: center;
    min-height: 24px;
    font-family: var(--font-ui);
    font-weight: 800;
    line-height: 1.4;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 2px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
}

.gacha-share-box {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 0 0 4px 0 !important;
    width: 100%;
    position: relative !important;
    z-index: 10;
    flex-shrink: 0;
}

.gacha-share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 10px;
    font-family: var(--font-ui);
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.gacha-swipe-hint {
    text-align: center;
    font-size: 9px;
    color: #555;
    font-family: var(--font-ui);
    animation: pulse 1s infinite alternate;
    flex-shrink: 0;
}

.gacha-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    margin-top: 4px;
}

#gacha-modal .gacha-spin-btn {
    flex: 1;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    color: #fff;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-family: var(--font-ui);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.gacha-ghost-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #94A3B8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11px;
    margin-top: 2px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gacha-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ============================================
   VIRAL SHARE — Nút Khoe Nhân Phẩm VIP
   ============================================ */
.btn-share-vip {
    margin-top: 20px;
    background: linear-gradient(135deg, #b052ff 0%, #ff5252 100%);
    color: #fff;
    border: 2px solid #FFD700;
    padding: 12px 24px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(176, 82, 255, 0.6);
    text-transform: uppercase;
    animation: pulse-glow 2s infinite;
    display: block;
    width: fit-content;
}
@keyframes pulse-glow {
    0%   { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: scale(1); }
    50%  { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); transform: scale(1.05); }
    100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: scale(1); }
}

/* Thêm perspective cho wrapper khi đang ở chế độ tilt */
.gacha-card-3d-wrapper.holo-active {
    perspective: 800px;
}

/* Lớp foil phủ lên card-back sau khi lật */
.rarity-vip .card-back::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 215, 0, 0.18) 38%,
        rgba(0, 242, 254, 0.18) 46%,
        rgba(176, 82, 255, 0.15) 54%,
        rgba(255, 136, 0, 0.18) 62%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent 80%
    );
    background-size: 200% 200%;
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
    animation: foil-sweep 3s linear infinite;
}

.rarity-vip.holo-active .card-back::after {
    opacity: 1;
}

@keyframes foil-sweep {
    0%   { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}

/* Tilt transition khi mouseleave/touchend */
.gacha-card-3d-wrapper .card-back {
    transition: transform 0.1s linear, box-shadow 0.3s ease;
}
.gacha-card-3d-wrapper.tilt-reset .card-back {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 500px) {
    .gacha-anim-box {
        min-height: 354px !important;
        height: 354px !important;
    }
    .gacha-modal-box {
        max-width: 96%;
        padding: 12px 12px 6px 12px;
    }
    /* Giữ nút đủ lớn cho một tay; thu card 10% để reward text không bị che. */
    #gacha-3d-anchor {
        width: 214px !important;
        height: 301px !important;
    }
    #gacha-reward-text {
        bottom: 0 !important;
    }
}
@media (max-width: 380px) {
    .gacha-anim-box {
        min-height: 322px !important;
        height: 322px !important;
    }
    #gacha-3d-anchor {
        width: 190px !important;
        height: 268px !important;
    }
}

/* ── Unified Modal System ── */
.unified-modal-card {
    position: relative;
    background: #151821;
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.1);
    border-radius: 16px;
    width: 88%;
    max-width: 360px;
    max-height: 85vh;
    padding: 32px 24px 24px 24px;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
}

.unified-modal-card > .universal-close-btn {
    z-index: 100;
}

.unified-modal-card .modal-scroll-area {
    max-height: calc(85vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
}

.unified-modal-shimmer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, #00F2FE, transparent);
    background-size: 200%;
    animation: shimmer 2s linear infinite;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.unified-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #94A3B8;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
}
.unified-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.unified-modal-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    color: #00F2FE;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,242,254,0.4);
}

.unified-modal-reward {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 900;
    color: #FFD700;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(255,215,0,0.4);
}

.unified-modal-desc {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #94A3B8;
    margin-bottom: 20px;
    line-height: 1.6;
}

.unified-modal-badges {
    display: flex;
    justify-content: space-around;
    background: rgba(0,242,254,0.05);
    border: 1px solid rgba(0,242,254,0.15);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
}

.unified-badge { text-align: center; }
.unified-badge-label {
    font-family: var(--font-ui);
    font-size: 8px;
    color: #94A3B8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unified-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
    color: #0D111C;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,242,254,0.3);
    transition: opacity 0.2s, transform 0.1s;
    min-height: 48px;
}
.unified-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.unified-btn-primary:active { transform: translateY(0); }

.unified-btn-ghost {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    color: #94A3B8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    min-height: 44px;
}
.unified-btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

@media (max-width: 360px) {
    .unified-modal-card { padding: 28px 16px 20px 16px; }
    .unified-modal-title { font-size: 13px; }
    .unified-btn-primary, .unified-btn-ghost { padding: 13px; font-size: 11px; }
}
/* ── End Unified Modal System ── */

/* ── Unified Link Guest Muted (CRO Optimized) ── */
#game-container .unified-link-guest-muted {
    background: none;
    border: none;
    box-shadow: none;
    font-family: var(--font-text);
    color: #94A3B8;
    font-size: 12px;
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
    padding: 8px;
    margin-top: 12px;
    display: inline-block;
    transition: color 0.2s ease;
    min-height: unset;
    width: auto;
}
#game-container .unified-link-guest-muted:hover,
#game-container .unified-link-guest-muted:active {
    color: #00F2FE;
    background: none;
    transform: none;
}
/* ── End Unified Link Guest Muted ── */

/* ── Universal Close Button ── */
.universal-close-btn {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.universal-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
/* ── End Universal Close Button ── */

/* ── Modal Scroll Area ── */
.modal-scroll-area {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Wheel centering fix ── */
#daily-wheel-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#daily-wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid #00F2FE;
    filter: drop-shadow(0 0 12px rgba(0,242,254,0.9));
    pointer-events: none;
}

#daily-spin-wheel {
    width: 100%;
    height: 100%;
    min-width: unset;
    min-height: unset;
    flex-shrink: 0;
    border-radius: 50%;
    transform-origin: center center;
    position: relative;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}
#daily-spin-wheel > * {
    transform-origin: center center;
}
/* ── End Modal Scroll Area ── */

/* =========================================================
   COUNTER-ROTATE ICONS — giữ emoji đứng thẳng
   Mỗi .slice-content bị rotate N deg (0/45/90/.../315)
   → .icon bên trong counter-rotate -N deg để neutralise.
   !important ghi đè mọi transform inline/JS cũ.
   ========================================================= */
#daily-spin-wheel .wheel-slice-1 .icon { transform: rotate(0deg)   !important; }
#daily-spin-wheel .wheel-slice-2 .icon { transform: rotate(-45deg)  !important; }
#daily-spin-wheel .wheel-slice-3 .icon { transform: rotate(-90deg)  !important; }
#daily-spin-wheel .wheel-slice-4 .icon { transform: rotate(-135deg) !important; }
#daily-spin-wheel .wheel-slice-5 .icon { transform: rotate(-180deg) !important; }
#daily-spin-wheel .wheel-slice-6 .icon { transform: rotate(-225deg) !important; }
#daily-spin-wheel .wheel-slice-7 .icon { transform: rotate(-270deg) !important; }
#daily-spin-wheel .wheel-slice-8 .icon { transform: rotate(-315deg) !important; }
/* ── End Counter-Rotate Icons ── */

/* ===================================================
   📐 DEGEN ACTION BOARD - THE PERFECT GEOMETRY (FIXED) 📐
   =================================================== */

#pnl-card,
.degen-action-board {
    width: 90% !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.degen-action-board {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 5px !important;
    z-index: 100;
}

/* Diệt toàn bộ margin dọc của con trực tiếp — gap của cha là thước đo duy nhất */
.degen-action-board > div,
.degen-action-board > button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.action-zone-1,
.action-zone-2,
.action-zone-3,
.social-buttons {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.action-zone-1 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gap) !important;
}

.action-zone-2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.action-zone-2 .btn-more {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 11px 5px !important;
    margin-top: 0 !important;
    text-align: center !important;
    line-height: 1.15 !important;
}

.action-zone-2 #btn-gacha-gameover {
    overflow: visible !important;
}

.action-zone-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gap) !important;
}

.social-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gap) !important;
}

/* ========================================================= */
/* 💎 CYBERPUNK COLORS & HARDWARE-ACCELERATED BOUNCE 💎 */
/* ========================================================= */

/* 1. MÀU SẮC CHUẨN CYBERPUNK (KÍNH MỜ) */
.action-zone-1 .btn {
    min-height: 48px !important; font-size: 12px !important; color: #fff !important; font-weight: 900 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    padding: 8px 4px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.action-zone-1 .btn-play { border: 2px solid #00ff88 !important; box-shadow: 0 0 10px rgba(0,255,136,0.15) !important; text-shadow: 0 0 5px rgba(0,255,136,0.5) !important; }
.action-zone-1 .btn-margin { border: 2px solid #FFD700 !important; box-shadow: 0 0 10px rgba(255,215,0,0.15) !important; text-shadow: 0 0 5px rgba(255,215,0,0.5) !important; }

.action-zone-2 .btn-more {
    min-height: 42px !important; font-size: 13px !important; font-weight: 800 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important; color: #00F2FE !important;
    border-radius: 12px !important;
    padding: 8px 4px !important;
}

.social-buttons button {
    min-height: 42px !important; font-size: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 12px !important;
    padding: 8px 4px !important;
}
.social-buttons .btn-share-x { color: #fff !important; }
.social-buttons .btn-share-tg { border-color: #2AABEE !important; color: #2AABEE !important; }

.action-zone-3 .btn-claim {
    min-height: 44px !important; font-size: 13px !important; font-weight: 800 !important;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.25) 0%, rgba(79, 172, 254, 0.15) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid #00F2FE !important; color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.35), inset 0 0 10px rgba(0, 242, 254, 0.2) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    position: relative !important;
    overflow: visible !important;
}

/* BADGE KẾT NỐI VÍ LƯU ĐIỂM CYBER PULSE */
.badge-claim {
    position: absolute !important;
    top: -10px !important;
    right: 0px !important;
    background: linear-gradient(90deg, #00ff88, #00d2ff) !important;
    color: #000 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    border: 1px solid #fff !important;
    white-space: nowrap !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.9) !important;
    z-index: 99999 !important;
    pointer-events: none !important;

    animation-name: ref-badge-bobbing !important;
    animation-duration: 1.15s !important;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation-iteration-count: infinite !important;
}

/* 2. HIỆU ỨNG NẢY MỜ VẬT LÝ (IOS SAFARI BRIGHTNESS HACK) */
.degen-action-board button {
    -webkit-tap-highlight-color: transparent !important;
    transform: scale(1) !important;
    filter: brightness(1) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease !important;
}

.degen-action-board button.is-pressed,
.degen-action-board .btn.is-pressed,
.degen-action-board .btn-more.is-pressed,
.degen-action-board .btn-claim.is-pressed {
    transform: scale(0.92) !important;
    filter: brightness(1.4) !important;
    transition: transform 0.05s ease-out, filter 0.05s ease-out !important;
}

/* Prevent modal backdrops from shrinking when .is-pressed is wrongly applied */
#overlay.is-pressed,
[id$="-modal"].is-pressed,
.modal-layer.is-pressed {
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* ===================================================
   ÉP BADGE THU GỌN LẠI ĐỂ KHÔNG TRÀN
   =================================================== */
.degen-action-board .ui-badge {
    position: absolute !important;
    top: -6px !important;
    right: -4px !important;
    color: #fff !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-family: var(--font-ui) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    animation: pulse-badge 1.5s infinite alternate !important;
    z-index: 9999 !important;
    border: 1px solid !important;
    pointer-events: none !important;
    backdrop-filter: blur(4px) !important;
}
.degen-action-board .ui-badge.bg-danger { background: rgba(255,0,85,0.85) !important; border-color: #ff0055 !important; box-shadow: 0 0 8px rgba(255,0,85,0.6) !important; }
.degen-action-board .ui-badge.bg-warning { background: rgba(255,215,0,0.85) !important; color: #000 !important; border-color: #FFD700 !important; box-shadow: 0 0 8px rgba(255,215,0,0.6) !important; }

@keyframes pulse-badge {
    0%   { transform: scale(0.95); box-shadow: 0 0 5px currentColor; }
    100% { transform: scale(1.08); box-shadow: 0 0 12px currentColor; }
}

.degen-action-board, .action-zone-2, .action-zone-3 { overflow: visible !important; }

/* ===================================================
   🌌 GAME OVER SCREEN - BACKGROUND FIX 🌌
   =================================================== */
/* Đổi nền đen xì thành gradient Cyberpunk tỏa sáng */
.overlay.show {
    background: radial-gradient(circle at center, rgba(26, 34, 53, 0.95) 0%, rgba(6, 9, 15, 0.98) 100%) !important;
}

/* Biến thẻ PnL chính thành khối kính cường lực mờ */
.overlay-content {
    background: rgba(13, 17, 28, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 20px rgba(0, 242, 254, 0.1) !important;
}

/* ── Ẩn scrollbar toàn bộ modal / vùng cuộn ── */
.modal-scroll-area,
.modal-content,
.scrollable-area,
#game-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.modal-scroll-area::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.scrollable-area::-webkit-scrollbar,
#game-container::-webkit-scrollbar {
    display: none;
}

/* ============================================================ */
/* Tinh chỉnh tỷ lệ ép cân cho màn hình lùn (< 750px)          */
/* Giãn ngang 90%, nút cao chuẩn ngón tay, cấm cuộn tuyệt đối  */
/* ============================================================ */
@media (max-height: 750px) {
    #overlay { padding: 15px 0 !important; touch-action: none !important; }
    #pnl-card { padding: 15px !important; margin-bottom: 15px !important; flex-shrink: 0 !important; }

    #statusText { font-size: 18px !important; margin-bottom: 4px !important; }
    #roi-val { font-size: 28px !important; margin-bottom: 8px !important; }
    #taunt-text { font-size: 10px !important; margin-bottom: 10px !important; line-height: 1.3; }
    .pnl-detail { font-size: 10px !important; margin: 4px 0 !important; }
    .fomo-tip-box { margin-top: 8px !important; padding: 10px !important; }

    .degen-action-board { --gap: 8px !important; margin-top: 5px !important; }
    .action-zone-1 .btn { min-height: 52px !important; font-size: 13px !important; padding: 10px 5px !important; }
    .action-zone-2 .btn-more,
    .social-buttons button,
    .action-zone-3 .btn-claim { min-height: 46px !important; font-size: 12px !important; padding: 10px 5px !important; }
}

/* ============================================================ */
/* GLASSMORPHISM TELEGRAM STYLE — GAME OVER BUTTONS             */
/* Specificity cao (#overlay + class) để override mọi rule cũ  */
/* ============================================================ */
#overlay .btn-play,
#overlay .btn-margin,
#overlay .btn-more,
#overlay .btn-claim,
#overlay .btn-share-tg,
#overlay .btn-share-x {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

#overlay .btn-play:hover,
#overlay .btn-margin:hover,
#overlay .btn-more:hover,
#overlay .btn-claim:hover,
#overlay .btn-share-tg:hover,
#overlay .btn-share-x:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Hiệu ứng báo King mới - Đơn giản, Sang trọng */
@keyframes king-premium-flash {
    0%   {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        border-color: #FFD700;
    }
    15%  {
        transform: scale(1.08);
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), inset 0 0 20px rgba(255, 215, 0, 0.4);
        border-color: #ffffff;
        background: rgba(255, 215, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        border-color: #FFD700;
        background: rgba(255, 255, 255, 0.1);
    }
}

.king-update-flash {
    animation: king-premium-flash 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ── NEAR-MISS MODAL ── */
@keyframes nearmiss-shake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-8px) rotate(-1deg); }
    30%     { transform: translateX(8px)  rotate(1deg); }
    45%     { transform: translateX(-6px) rotate(-0.5deg); }
    60%     { transform: translateX(6px)  rotate(0.5deg); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}
@keyframes nearmiss-pulse-red {
    0%,100% { box-shadow: 0 0 20px rgba(255,0,0,0.4), inset 0 0 15px rgba(255,0,0,0.15); }
    50%     { box-shadow: 0 0 50px rgba(255,0,0,0.8), inset 0 0 30px rgba(255,0,0,0.3); }
}
#near-miss-modal .unified-modal-card {
    width: min(100%, 370px);
    border-color: rgba(255,77,77,0.65);
    background: linear-gradient(155deg, rgba(23,29,43,0.98), rgba(10,14,25,0.98));
    animation: nearmiss-shake 0.6s ease-out, nearmiss-pulse-red 1.4s ease-in-out 0.6s infinite;
}
.near-miss-scores {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 4px 0 18px;
}
.near-miss-score {
    display: block;
    font-size: 26px;
    font-weight: 900;
}
.near-miss-score-current { color: #FFD700; }
.near-miss-score-best { color: #00ff88; }
.near-miss-score-label {
    margin-top: 3px;
    color: #94A3B8;
    font-family: var(--font-ui);
    font-size: 9px;
}
.near-miss-versus {
    color: #64748B;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
}
.near-miss-skip-btn { margin-top: 10px; }
.nearmiss-headline {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 900;
    color: #ff4d4d;
    text-shadow: 0 0 12px rgba(255,77,77,0.8);
    margin: 8px 0 4px;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.nearmiss-sub {
    font-family: var(--font-ui);
    font-size: 9px;
    color: #aaa;
    margin-bottom: 16px;
}
.btn-nearmiss-revive {
    width: 100%;
    background: linear-gradient(135deg, #ff0055 0%, #FFD700 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-height: 52px;
    box-shadow: 0 4px 20px rgba(255,0,85,0.5);
    transition: opacity 0.2s, transform 0.1s;
    animation: king-premium-flash 1.2s ease-in-out infinite alternate;
}
.btn-nearmiss-revive:active { transform: scale(0.96); }

/* ── REFERRAL BUTTON ── */

.badge-ref,
.ui-badge {
    z-index: 9999 !important;
}

/* Định dạng nút Mời Bạn */
.btn-referral {
    position: relative !important;
    height: 48px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: visible !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.btn-referral:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
.btn-referral:active {
    transform: scale(0.92) translateY(0) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Text chính "MỜI BẠN" */
.btn-referral .ref-text {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* Hover / Active cho toàn bộ 3 nút trong hàng referral */
.social-ref-row button {
    background: rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.social-ref-row button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
.social-ref-row button:active {
    transform: scale(0.92) translateY(0) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Counter "Đã mời: 0" */
.btn-referral .ref-count {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 11px !important;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── TOURNAMENT BUTTON ── */
/* Tournament banner trong leaderboard modal */
.btn-tournament-lb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    margin: 10px 0;
    background: rgba(255, 215, 0, 0.08);
    border: 1.5px solid rgba(255, 215, 0, 0.6);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.2);
    transition: box-shadow 0.2s ease, background 0.2s ease;
    font-family: var(--font-ui);
    gap: 4px;
    box-sizing: border-box;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
.btn-tournament-lb:hover, .btn-tournament-lb:active {
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.45);
}
.btn-tournament-lb .tournament-title-lb {
    font-size: 13px;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.btn-tournament-lb .tournament-prize-lb {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.btn-tournament {
    width: 100%;
    min-height: 44px;
    background: linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,136,0,0.15));
    border: 1px solid rgba(255,215,0,0.5);
    border-radius: 12px;
    color: #FFD700;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 8px;
    transition: background 0.2s;
}
.btn-tournament:active { background: rgba(255,215,0,0.25); }
.btn-tournament .tournament-prize {
    font-size: 9px;
    color: #FFD700;
    opacity: 0.7;
}

/* ── TOURNAMENT MODAL ── */
#tournament-modal .unified-modal-card {
    border-color: rgba(255,215,0,0.5);
    box-shadow: 0 0 30px rgba(255,215,0,0.15);
}
.tournament-coming-soon {
    font-family: var(--font-ui);
    font-size: 28px;
    margin: 8px 0 4px;
}
.tournament-prize-pool {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    margin-bottom: 6px;
}
.tournament-desc {
    font-family: var(--font-ui);
    font-size: 10px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ============================================================
   🎯 GLOBAL ACTION BOARD SYNC — OVERRIDE CUỐI FILE
   ============================================================ */

/* 1. Đồng bộ nền / viền / overflow cho mọi nút trong board */
.degen-action-board button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    overflow: visible !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. Hover: nổi lên + sáng */
.degen-action-board button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Active: lún xuống + đàn hồi */
.degen-action-board button:active {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: scale(0.92) translateY(0) !important;
    box-shadow: none !important;
}

/* 4. Tem nhãn lên max layer — không bị element nào che */
.badge-share,
.badge-ref,
.ui-badge,
[class*="badge"] {
    z-index: 99999 !important;
}

/* ============================================================ */
/* TRUY QUÉT & ÉP KHUÔN — Stacking context + border đồng bộ   */
/* ============================================================ */

/* 1. Phá stacking context: hàng dưới đè được lên hàng trên */
.degen-action-board { position: relative !important; }
.degen-action-board > div:nth-child(1),
.action-zone-1 { position: relative !important; z-index: 10 !important; }
.degen-action-board > div:nth-child(2),
.action-zone-2 { position: relative !important; z-index: 20 !important; }
.social-ref-row  { position: relative !important; z-index: 30 !important; }

/* 2. Tiêu diệt viền ảo — khóa cứng nền + border + box-shadow */
.degen-action-board button,
.degen-action-board .action-zone button,
.social-ref-row button {
    background:    rgba(255, 255, 255, 0.08) !important;
    border:        1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:    none !important;
    outline:       none !important;
    border-radius: 12px !important;
    overflow:      visible !important;
}

/* 3. Mở khoá overflow cho nút chứa tem */
.btn-referral,
.social-ref-row .btn-share {
    overflow: visible !important;
}

/* ── Đồng bộ kích thước badge Gacha với badge +5K/ref ── */
.degen-action-board .ui-badge {
    font-size: 8px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    transform-origin: top right !important;
    animation: pulse-badge-sm 1.5s infinite alternate !important;
    -webkit-animation: pulse-badge-sm 1.5s infinite alternate !important;
}

@keyframes pulse-badge-sm {
    0%   { transform: scale(0.88); box-shadow: 0 0 4px currentColor; }
    100% { transform: scale(1.00); box-shadow: 0 0 9px currentColor; }
}

/* ============================================================
   MICRO-UI ENDGAME — Trim đáy, kéo board lên, thu gọn badge
   ============================================================ */

/* 1. Cắt phần đáy dư của #pnl-card */
#pnl-card {
    padding-bottom: 12px !important;
    margin-bottom: 8px !important;
}

/* Trim tip box khỏi margin thừa */
.fomo-tip-box {
    margin-bottom: 0 !important;
}
#final-rank-desc {
    margin-bottom: 0 !important;
}

/* 2. Kéo action board lên sát khung info */
.degen-action-board {
    margin-top: -5px !important;
    padding-bottom: 10px !important;
}

/* 3. Thu gọn tem +5K/ref — nhỏ hơn, bám góc, pulse biên độ thấp */
.badge-share {
    top: -6px !important;
    right: -6px !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    animation: pulse-badge-sm 1.5s infinite alternate !important;
    -webkit-animation: pulse-badge-sm 1.5s infinite alternate !important;
}

@keyframes pulse-badge-sm {
    from { transform: scale(0.88); }
    to   { transform: scale(0.97); }
}
@-webkit-keyframes pulse-badge-sm {
    from { transform: scale(0.88); }
    to   { transform: scale(0.97); }
}

/* ── Viral share textarea — gọn, readonly, không bàn phím ─────── */
#viral-share-text {
    width: 100% !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #aaa !important;
    font-size: 11px !important;
    padding: 8px !important;
    resize: none !important;
    outline: none !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    cursor: default !important;
    user-select: text !important;
}

/* --- CHỐT HẠ GIAO DIỆN 3 NÚT CHUẨN --- */
.social-ref-row {
    display: grid !important;
    grid-template-columns: 48px 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.social-ref-row .btn-share {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.social-ref-row .share-x-main:active,
.social-ref-row .share-tg-main:active {
    transform: scale(0.92) !important;
}

/* ── BADGE CHO NÚT TELEGRAM ── */
.share-flap-badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    background: linear-gradient(90deg, #ff0055, #FFD700) !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    font-family: var(--font-ui) !important;
    padding: 2px 5px !important;
    border-radius: 10px !important;
    border: 1px solid #fff !important;
    z-index: 9999 !important;
    animation: badge-bounce-sm 1s ease-in-out infinite alternate !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

@keyframes badge-bounce-sm {
    from {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 7px rgba(255, 0, 85, 0.45);
    }
    to {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 3px 11px rgba(255, 215, 0, 0.7);
    }
}

/* ── NÚT MỜI BẠN ── */
.btn-referral {
    position: relative !important;
    height: 48px !important;
    padding: 0 15px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    cursor: pointer !important;
}

.btn-referral .ref-text {
    color: #ffffff !important;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* --- BULLETPROOF OVERRIDE: MỜI BẠN +1 VÉ BADGE BOBBING --- */
#overlay .badge-ref,
.badge-ref {
    position: absolute !important;
    top: -12px !important;
    right: 0px !important;
    background: linear-gradient(90deg, #ff0044, #ffaa00) !important;
    color: white !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    border: 1px solid #fff !important;
    white-space: nowrap !important;
    box-shadow: 0 0 8px rgba(255, 0, 68, 0.8) !important;
    z-index: 99999 !important;
    pointer-events: none !important;

    animation-name: ref-badge-bobbing !important;
    animation-duration: 1.15s !important;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-fill-mode: both !important;

    -webkit-animation-name: ref-badge-bobbing !important;
    -webkit-animation-duration: 1.15s !important;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-direction: alternate !important;
    -webkit-animation-fill-mode: both !important;

    transform-origin: center center !important;
    -webkit-transform-origin: center center !important;
    will-change: transform, box-shadow !important;
}

@keyframes ref-badge-bobbing {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 8px rgba(0, 255, 136, 0.45);
    }
    100% {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 4px 10px rgba(255, 102, 0, 0.65), 0 0 8px rgba(0, 255, 136, 0.55);
    }
}

@-webkit-keyframes ref-badge-bobbing {
    0% {
        -webkit-transform: translateY(0) scale(1);
        box-shadow: 0 2px 8px rgba(0, 255, 136, 0.45);
    }
    100% {
        -webkit-transform: translateY(-3px) scale(1.03);
        box-shadow: 0 4px 10px rgba(255, 102, 0, 0.65), 0 0 8px rgba(0, 255, 136, 0.55);
    }
}

/* ================================================ */
/* GACHA ANIMATED ITEM — Pure CSS, No JS            */
/* ================================================ */

.gacha-animated-item {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    border-radius: 16px;
    background: transparent;
    animation: gacha-float-glow 2.4s ease-in-out infinite alternate;
    will-change: transform, box-shadow;
    -webkit-animation: gacha-float-glow 2.4s ease-in-out infinite alternate;
}

.gacha-animated-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.gacha-animated-item.tier-vip {
    animation-name: gacha-float-glow-vip;
    -webkit-animation-name: gacha-float-glow-vip;
}
.gacha-animated-item.tier-high-reward {
    animation-name: gacha-float-glow-high;
    -webkit-animation-name: gacha-float-glow-high;
}
.gacha-animated-item.tier-reward {
    animation-name: gacha-float-glow-sr;
    -webkit-animation-name: gacha-float-glow-sr;
}

@keyframes gacha-float-glow {
    0%   { transform: translateY(0px);   box-shadow: 0 2px 8px rgba(0,210,255,0.2), 0 0 12px rgba(0,210,255,0.1); }
    100% { transform: translateY(-3px);  box-shadow: 0 6px 16px rgba(0,210,255,0.35), 0 0 22px rgba(0,210,255,0.2); }
}
@-webkit-keyframes gacha-float-glow {
    0%   { -webkit-transform: translateY(0px);  box-shadow: 0 2px 8px rgba(0,210,255,0.2); }
    100% { -webkit-transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,210,255,0.35); }
}

@keyframes gacha-float-glow-vip {
    0%   { transform: translateY(0px);  box-shadow: 0 2px 10px rgba(255,215,0,0.35), 0 0 18px rgba(255,100,0,0.2); }
    50%  { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(255,0,180,0.3),  0 0 28px rgba(255,215,0,0.35); }
    100% { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(80,200,255,0.35), 0 0 32px rgba(255,215,0,0.4); }
}
@-webkit-keyframes gacha-float-glow-vip {
    0%   { -webkit-transform: translateY(0px);  box-shadow: 0 2px 10px rgba(255,215,0,0.35); }
    100% { -webkit-transform: translateY(-10px); box-shadow: 0 14px 40px rgba(80,200,255,0.6); }
}

@keyframes gacha-float-glow-high {
    0%   { transform: translateY(0px);  box-shadow: 0 2px 8px rgba(255,136,0,0.3), 0 0 14px rgba(255,70,0,0.18); }
    100% { transform: translateY(-3px); box-shadow: 0 5px 16px rgba(255,136,0,0.45), 0 0 24px rgba(255,70,0,0.3); }
}
@-webkit-keyframes gacha-float-glow-high {
    0%   { -webkit-transform: translateY(0px);  box-shadow: 0 2px 8px rgba(255,136,0,0.3); }
    100% { -webkit-transform: translateY(-3px); box-shadow: 0 5px 16px rgba(255,136,0,0.45); }
}

@keyframes gacha-float-glow-sr {
    0%   { transform: translateY(0px);  box-shadow: 0 4px 14px rgba(176,82,255,0.4), 0 0 22px rgba(176,82,255,0.2); }
    100% { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(176,82,255,0.7), 0 0 44px rgba(176,82,255,0.45); }
}
@-webkit-keyframes gacha-float-glow-sr {
    0%   { -webkit-transform: translateY(0px);  box-shadow: 0 4px 14px rgba(176,82,255,0.4); }
    100% { -webkit-transform: translateY(-8px); box-shadow: 0 12px 30px rgba(176,82,255,0.7); }
}

@keyframes badge-bobbing {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 8px rgba(255, 0, 85, 0.45);
    }
    100% {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 4px 10px rgba(255, 215, 0, 0.65), 0 0 8px rgba(255, 0, 85, 0.55);
    }
}

@-webkit-keyframes badge-bobbing {
    0% {
        -webkit-transform: translateY(0) scale(1);
        box-shadow: 0 2px 8px rgba(255, 0, 85, 0.45);
    }
    100% {
        -webkit-transform: translateY(-3px) scale(1.03);
        box-shadow: 0 4px 10px rgba(255, 215, 0, 0.65), 0 0 8px rgba(255, 0, 85, 0.55);
    }
}

/* ============================================================ */
/* GACHA CARD IMG — Tier-based float + glow (no JS needed)      */
/* ============================================================ */

.gacha-card-3d-wrapper .card-back img#gacha-result-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    will-change: transform, filter;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.gacha-card-3d-wrapper.rarity-vip .card-back img#gacha-result-img {
    animation: gacha-float-glow-vip 2.2s ease-in-out infinite alternate;
    -webkit-animation: gacha-float-glow-vip 2.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 18px rgba(255,215,0,0.8)) drop-shadow(0 0 36px rgba(255,100,0,0.5));
    -webkit-filter: drop-shadow(0 0 18px rgba(255,215,0,0.8)) drop-shadow(0 0 36px rgba(255,100,0,0.5));
}

.gacha-card-3d-wrapper.rarity-high-reward .card-back img#gacha-result-img {
    animation: gacha-float-glow-high 2.4s ease-in-out infinite alternate;
    -webkit-animation: gacha-float-glow-high 2.4s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 14px rgba(255,136,0,0.75)) drop-shadow(0 0 28px rgba(255,70,0,0.45));
    -webkit-filter: drop-shadow(0 0 14px rgba(255,136,0,0.75)) drop-shadow(0 0 28px rgba(255,70,0,0.45));
}

.gacha-card-3d-wrapper.rarity-reward .card-back img#gacha-result-img {
    animation: gacha-float-glow-sr 2.6s ease-in-out infinite alternate;
    -webkit-animation: gacha-float-glow-sr 2.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 12px rgba(176,82,255,0.75)) drop-shadow(0 0 24px rgba(176,82,255,0.4));
    -webkit-filter: drop-shadow(0 0 12px rgba(176,82,255,0.75)) drop-shadow(0 0 24px rgba(176,82,255,0.4));
}

.gacha-card-3d-wrapper.rarity-consolation .card-back img#gacha-result-img,
.gacha-card-3d-wrapper.rarity-punishment .card-back img#gacha-result-img {
    animation: gacha-float-glow 2.8s ease-in-out infinite alternate;
    -webkit-animation: gacha-float-glow 2.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px rgba(0,210,255,0.5)) drop-shadow(0 0 18px rgba(0,210,255,0.25));
    -webkit-filter: drop-shadow(0 0 8px rgba(0,210,255,0.5)) drop-shadow(0 0 18px rgba(0,210,255,0.25));
}

.gacha-card-3d-wrapper[style*="opacity:0"] .card-back img#gacha-result-img,
.gacha-card-3d-wrapper[style*="opacity: 0"] .card-back img#gacha-result-img {
    animation: none !important;
    -webkit-animation: none !important;
    filter: none !important;
}

/* ============================================================
   BULLETPROOF GACHA BADGE BOB — GPU TRANSFORM, NO TOP ANIMATION
   ============================================================ */

/* 1) Hard reset mọi animation cũ có thể đến từ .ui-badge / .bg-danger */
#overlay #gacha-cost-label {
    animation: none !important;
    -webkit-animation: none !important;
}

/* 2) Apply chuyên biệt cho badge Gacha */
#overlay #gacha-cost-label {
    position: absolute !important;

    /* Static anchor only */
    top: -8px !important;
    right: 50% !important;

    transform-origin: center center !important;
    -webkit-transform-origin: center center !important;

    /* Dùng Shorthand và tuyệt đối KHÔNG set transform/filter tĩnh ở đây để tránh khóa chết keyframes */
    animation: gacha-bob-pro 1.45s ease-in-out infinite alternate both !important;
    -webkit-animation: gacha-bob-pro 1.45s ease-in-out infinite alternate both !important;

    will-change: transform, filter !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    pointer-events: none !important;
    z-index: 999999 !important;
}

/* 3) New dedicated GPU-only keyframes — KHÔNG animate top */
@keyframes gacha-bob-pro {
    0% {
        transform: translateX(50%) translateY(0) translateZ(0) scale(0.98);
        filter: drop-shadow(0 0 3px rgba(255, 0, 100, 0.65));
    }

    100% {
        transform: translateX(50%) translateY(-3px) translateZ(0) scale(1.01);
        filter:
            drop-shadow(0 0 5px rgba(255, 0, 100, 0.9))
            drop-shadow(0 0 9px rgba(255, 215, 0, 0.45));
    }
}

@-webkit-keyframes gacha-bob-pro {
    0% {
        -webkit-transform: translateX(50%) translateY(0) translateZ(0) scale(0.98);
        -webkit-filter: drop-shadow(0 0 3px rgba(255, 0, 100, 0.65));
    }

    100% {
        -webkit-transform: translateX(50%) translateY(-3px) translateZ(0) scale(1.01);
        -webkit-filter:
            drop-shadow(0 0 5px rgba(255, 0, 100, 0.9))
            drop-shadow(0 0 9px rgba(255, 215, 0, 0.45));
    }
}

/* Endgame hierarchy: replay first, progression second, social last. */
#overlay.show {
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#overlay.show #pnl-card {
    flex: 0 0 auto !important;
}

#overlay.show .degen-action-board {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}

#overlay #next-action + .fomo-tip-box {
    margin-top: 6px !important;
    padding: 0 !important;
}

#overlay #final-rank-desc > .btn {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 11px 14px !important;
    gap: 5px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(0,255,136,0.10), rgba(0,210,255,0.07)) !important;
    box-shadow: inset 0 0 18px rgba(255,255,255,0.035) !important;
}

#overlay #final-rank-desc > .btn > div:first-child {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

#overlay #final-rank-desc > .btn > div:last-child {
    font-size: 10px !important;
    line-height: 1.45 !important;
}

#overlay .degen-action-board .action-zone-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#overlay .degen-action-board .action-zone-1 .btn-play {
    min-height: 56px !important;
    font-size: 13px !important;
    border: 2px solid #00ff88 !important;
    background: linear-gradient(135deg, rgba(0,255,136,0.32), rgba(0,210,255,0.16)) !important;
    box-shadow: 0 0 22px rgba(0,255,136,0.38), inset 0 0 14px rgba(255,255,255,0.08) !important;
}

#overlay .degen-action-board .action-zone-1 .btn-margin {
    min-height: 52px !important;
    font-size: 11px !important;
    border-color: rgba(255,215,0,0.45) !important;
    background: rgba(255,215,0,0.08) !important;
    color: #ffe88a !important;
    box-shadow: none !important;
    animation: none !important;
}

#overlay .degen-action-board .action-zone-1 .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
}

#overlay .gameover-action-label { pointer-events: none; }
#overlay .gameover-mode-label {
    color: rgba(226,232,240,0.62);
    font-family: var(--font-text);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
    pointer-events: none;
}

#overlay .degen-action-board .action-zone-2 .btn-more,
#overlay .degen-action-board .action-zone-3 button,
#overlay .degen-action-board .ui-badge,
#overlay .degen-action-board .badge-claim,
#overlay .degen-action-board .share-flap-badge,
#overlay .degen-action-board .badge-ref {
    animation: none !important;
    -webkit-animation: none !important;
    box-shadow: none !important;
}

#overlay .degen-action-board .action-zone-2 .btn-more {
    min-height: 48px !important;
    color: #9bdcf1 !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(155,220,241,0.24) !important;
}

#overlay .degen-action-board .social-ref-row button {
    min-height: 48px !important;
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

@media (max-width: 360px) {
    #overlay .degen-action-board,
    #overlay #pnl-card { width: 94% !important; }
    #overlay .action-zone-2 { gap: 7px !important; }
    #overlay .action-zone-2 .btn-more { font-size: 10px !important; padding-inline: 2px !important; }
    #overlay .social-ref-row { grid-template-columns: 48px 48px minmax(0, 1fr) !important; gap: 7px !important; }
    #overlay .btn-referral { padding-inline: 7px !important; }
    #overlay .btn-referral .ref-text { font-size: 10px !important; }
}

@media (max-height: 750px) {
    #overlay.show { justify-content: flex-start !important; touch-action: pan-y !important; }
    #overlay .degen-action-board .action-zone-1 .btn-play { min-height: 52px !important; }
    #overlay .degen-action-board .action-zone-1 .btn-margin { min-height: 44px !important; }
}

/* Margin x100 informed-consent and protected-capital UI */
.margin-confirm-card {
    width: min(100%, 340px);
    box-sizing: border-box;
    padding: 20px 16px 16px;
    border: 1.5px solid #ff4d4d;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(45, 9, 16, 0.98), rgba(13, 17, 28, 0.98));
    box-shadow: 0 0 28px rgba(255, 77, 77, 0.28);
    text-align: center;
    font-family: var(--font-ui);
}
.margin-confirm-icon { font-size: 38px; margin-bottom: 8px; }
.margin-confirm-card h2 { margin: 0 0 14px; color: #ff4d4d; font-size: 17px; letter-spacing: 1px; }
.margin-confirm-copy { display: grid; gap: 8px; color: #e2e8f0; font-size: 11px; line-height: 1.45; text-align: left; }
.margin-confirm-copy b { color: #FFD700; }
.margin-safe-balance { margin: 16px 0 14px; padding: 10px; border: 1px solid rgba(0,255,136,0.45); border-radius: 10px; background: rgba(0,255,136,0.08); }
.margin-safe-balance span { display: block; color: #94A3B8; font-size: 8px; letter-spacing: 1.5px; }
.margin-safe-balance strong { display: block; margin-top: 4px; color: #00ff88; font-size: 15px; }
.margin-confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; }
.margin-confirm-actions button { min-height: 44px; margin: 0 !important; }
.vip-equip-confirm-card {
    width: min(100%, 360px);
    box-sizing: border-box;
    padding: 22px 16px 16px;
    border: 1.5px solid #FFD700;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(48, 37, 8, 0.98), rgba(13, 17, 28, 0.98));
    box-shadow: 0 0 34px rgba(255, 215, 0, 0.34);
    text-align: center;
    font-family: var(--font-ui);
}
.vip-equip-confirm-icon { font-size: 42px; margin-bottom: 7px; filter: drop-shadow(0 0 10px #FFD700); }
.vip-equip-confirm-card h2 { margin: 0 0 10px; color: #FFD700; font-size: 17px; letter-spacing: 1px; }
.vip-equip-confirm-card p { min-height: 36px; margin: 0 0 14px; color: #e2e8f0; font-size: 11px; line-height: 1.5; }
.vip-equip-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 16px; }
.vip-equip-matchup > div:not(.vip-equip-arrow) { min-width: 0; padding: 9px 5px; border: 1px solid rgba(255,215,0,0.3); border-radius: 10px; background: rgba(255,215,0,0.07); }
.vip-equip-matchup span { display: block; color: #94A3B8; font-size: 7px; letter-spacing: 1px; }
.vip-equip-matchup strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #fff; font-size: 11px; }
.vip-equip-arrow { color: #FFD700; font-size: 18px; }
.vip-equip-confirm-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 9px; }
.vip-equip-confirm-actions button { min-height: 46px; margin: 0 !important; font-size: 9px; }

#margin-risk-hud { margin-top: 3px; gap: 7px; color: #fff; font-size: 7px; line-height: 1; white-space: nowrap; }
#margin-risk-hud span:first-child { color: #00ff88; }
#margin-risk-hud span:last-child { color: #ff6b6b; }