/* ============================================================= UNIFIED GLASSMORPHISM SYSTEM — Flappy Degen Thay thế block "TASK 1: VISUAL HIERARCHY" (dòng 1-81) trong style_2.css. Không dùng !important — dựa vào specificity và thứ tự nạp file (file này PHẢI được SAU style_2.css). ============================================================= */ /* ------------------------------------------------------------- 0. KEYFRAME PULSE (bổ sung — bị thiếu trong codebase cũ, .btn-play/.btn-margin/.gacha-spin-btn tham chiếu animation: pulse nhưng chưa từng có @keyframes pulse nào được định nghĩa) Chỉ dùng transform + opacity → chạy trên GPU compositor, không trigger layout/paint như animate box-shadow. ------------------------------------------------------------- */ @keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.03); opacity: 0.92; } } /* ------------------------------------------------------------- 1. BASE KÍNH MỜ CHUẨN — gộp chung 1 lần cho toàn bộ nút ------------------------------------------------------------- */ .btn-play, .btn-margin, .gacha-spin-btn, .btn-more, .btn-share-x, .btn-share-tg, .btn-claim, .unified-btn-primary, .shop-btn, .task-btn { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* Backdrop-filter CHỈ kích hoạt khi nút thực sự nhìn thấy được, để tránh compositor cấp layer blur cho nút đang bị che/ẩn: - Nút trong action-board (luôn ở DOM, không display:none): gate theo body:not(.is-playing) vì canvas game che nút này khi đang chơi (js/game.js toggles body.is-playing). - Nút trong modal (shop/gacha/staking/tasks): gate theo .modal-visible của modal cha — trước khi modal mở, display:none đã tự loại bỏ hoàn toàn việc render layer. */ body:not(.is-playing) .degen-action-board .btn-play, body:not(.is-playing) .degen-action-board .btn-margin, body:not(.is-playing) .degen-action-board .btn-more, body:not(.is-playing) .degen-action-board .btn-claim, #shop-modal.modal-visible .shop-btn, #tasks-modal.modal-visible .task-btn, #gacha-modal.modal-visible .gacha-spin-btn, #staking-modal.modal-visible .unified-btn-primary, .btn-share-x, .btn-share-tg { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ------------------------------------------------------------- 2. MÀU SẮC ĐẶC TRƯNG THEO TỪNG NÚT (opacity 0.15 đồng nhất) ------------------------------------------------------------- */ .btn-play { background: rgba(0, 255, 136, 0.15); border-color: rgba(0, 255, 136, 0.4); animation: pulse 1s infinite alternate; will-change: transform; } .btn-margin { background: rgba(255, 77, 77, 0.15); border-color: rgba(255, 77, 77, 0.4); animation: pulse 1s infinite alternate; will-change: transform; } .gacha-spin-btn { background: rgba(255, 215, 0, 0.15); border-color: rgba(255, 215, 0, 0.4); animation: pulse 1s infinite alternate; will-change: transform; } .btn-more, .btn-share-x, .btn-share-tg, .btn-claim, .unified-btn-primary, .shop-btn, .task-btn { background: rgba(255, 255, 255, 0.08); animation: none; } /* ------------------------------------------------------------- 3. HOVER/ACTIVE ĐỒNG NHẤT :active nạp sau :hover trong cascade nên tự thắng khi trùng trạng thái — không cần !important để ép thứ tự. ------------------------------------------------------------- */ .gacha-spin-btn:hover, .btn-more:hover, .btn-share-x:hover, .btn-share-tg:hover, .unified-btn-primary:hover, .shop-btn:hover, .task-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(0, 242, 254, 0.8); box-shadow: 0 0 28px rgba(0, 242, 254, 0.55), inset 0 0 14px rgba(255, 255, 255, 0.18); } /* .action-zone-1 .btn-play / .btn-margin và .action-zone-3 .btn-claim (style.css) set box-shadow tĩnh bằng !important — phải dùng .degen-action-board + !important ở đây để thắng, nếu không hover trên Desktop không hiện được (box-shadow cũ đè mất). */ .degen-action-board .btn-play:hover { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(0, 255, 136, 0.8) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 0 28px rgba(0, 255, 136, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.18) !important; } .degen-action-board .btn-margin:hover { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 77, 77, 0.8) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 0 28px rgba(255, 77, 77, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.18) !important; } .degen-action-board .btn-claim:hover { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(0, 242, 254, 0.8) !important; transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 0 28px rgba(0, 242, 254, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.18) !important; } .btn-play:active, .btn-play.is-pressed, .btn-margin:active, .btn-margin.is-pressed, .gacha-spin-btn:active, .gacha-spin-btn.is-pressed, .btn-more:active, .btn-more.is-pressed, .btn-share-x:active, .btn-share-tg:active, .btn-claim:active, .btn-claim.is-pressed, .unified-btn-primary:active, .shop-btn:active, .task-btn:active { animation-play-state: paused; transform: scale(0.92); filter: brightness(0.7); transition: transform 0.05s ease-out, filter 0.05s ease-out; } /* ------------------------------------------------------------- 3b. TOUCH FEEDBACK MÀU RIÊNG (Mobile không có :hover, :active là phản hồi chính khi chạm). Cần specificity cao hơn ".degen-action-board button:active" (style.css, có !important trên transform/filter) nên phải dùng .degen-action-board + tên nút + !important để không bị đè. ------------------------------------------------------------- */ .degen-action-board .btn-play:active, .degen-action-board .btn-play.is-pressed { transform: translateY(2px) scale(0.95) !important; box-shadow: 0 0 28px rgba(0, 255, 136, 0.7) !important; filter: brightness(1) !important; transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, filter 0.05s ease-out !important; } .degen-action-board .btn-margin:active, .degen-action-board .btn-margin.is-pressed { transform: translateY(2px) scale(0.95) !important; box-shadow: 0 0 28px rgba(255, 77, 77, 0.7) !important; filter: brightness(1) !important; transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, filter 0.05s ease-out !important; } .degen-action-board .btn-claim:active, .degen-action-board .btn-claim.is-pressed { transform: translateY(2px) scale(0.95) !important; box-shadow: 0 0 28px rgba(0, 242, 254, 0.7) !important; filter: brightness(1) !important; transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, filter 0.05s ease-out !important; } /* ------------------------------------------------------------- 4. NÚT GHOST — không kính, không viền, chỉ text mờ ------------------------------------------------------------- */ .unified-btn-ghost, .gacha-ghost-btn { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid transparent; box-shadow: none; color: #94A3B8; } .unified-btn-ghost:hover, .gacha-ghost-btn:hover { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; } /* ------------------------------------------------------------- 5. MOBILE OPTIMIZATION — giảm glow-radius để giảm vùng repaint Backdrop-filter blur giữ nguyên (không phụ thuộc kích thước glow), chỉ giảm box-shadow lan rộng khi hover trên màn nhỏ. ------------------------------------------------------------- */ @media (max-width: 500px) { .btn-play:hover, .btn-margin:hover, .gacha-spin-btn:hover, .btn-more:hover, .btn-share-x:hover, .btn-share-tg:hover, .btn-claim:hover, .unified-btn-primary:hover, .shop-btn:hover, .task-btn:hover { box-shadow: 0 0 10px rgba(0, 242, 254, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.1); } .btn-play, .btn-margin, .gacha-spin-btn { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.05); } }