/* ============================================================
   MODAL.CSS — 所有弹窗、引导遮罩、通知
   ============================================================ */

/* ===== 通用弹窗 ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 300; padding: 16px; }
.modal-overlay.open { display: flex; }
/* ③ 抽卡结果弹窗专用高层级 */
#gacha-modal { z-index: 9999 !important; }
/* ⑦ 宠物图鉴弹窗：flex布局确保dex-grid可滚动 */
.modal-dex { overflow: hidden !important; display: flex; flex-direction: column; }
.modal { background: linear-gradient(135deg, #1e1060, #2d1f6e); border: 1px solid rgba(124,58,237,.5); border-radius: 18px; padding: 24px; width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.8); position: relative; }
.modal-wide { max-width: 640px; }
.modal-title { font-size: 1.2rem; font-weight: 900; margin-bottom: 16px; background: linear-gradient(to right, #ffd700, #ff9800); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-gray); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.modal-close:hover { color: white; }

/* ===== 离线收益弹窗 ===== */
.offline-center { text-align: center; }
.offline-icon { font-size: 3.5rem; margin-bottom: 12px; }
.offline-amount { font-size: 1.8rem; font-weight: 900; color: var(--gold); margin: 10px 0; }
.offline-sub { color: var(--text-gray); font-size: .85rem; margin-bottom: 20px; }

/* ===== 声望弹窗 ===== */
.prestige-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(124,58,237,.12); border-radius: 8px; margin-bottom: 7px; }
.prestige-info-label { color: var(--text-gray); font-size: .82rem; }
.prestige-info-val { font-weight: 700; color: #c084fc; }

/* ===== 玩家升级弹窗 ===== */
.level-up-content { text-align: center; padding: 10px; }
.level-up-icon { font-size: 3.5rem; margin-bottom: 10px; }
.level-up-title { font-size: 1.6rem; font-weight: 900; color: var(--gold); }
.level-up-subtitle { color: var(--text-gray); font-size: .85rem; margin-top: 6px; }
.level-up-rewards { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.level-reward-row { background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); border-radius: 9px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.reward-icon { font-size: 1.4rem; }
.reward-text { font-size: .85rem; }

/* ===== 新手引导 ===== */
#tutorial-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: none; display: none; }
#tutorial-overlay.active { display: block; }
.tut-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.0); pointer-events: all; }
.tut-spotlight { position: fixed; border-radius: 12px; z-index: 501; pointer-events: none; transition: all .4s ease; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); }
.tut-bubble { position: fixed; z-index: 502; background: linear-gradient(135deg, #2d1f6e, #3a2880); border: 2px solid var(--accent-purple); border-radius: 16px; padding: 18px 20px; max-width: 300px; width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,.6); pointer-events: all; animation: bubblePop .3s ease; }
@keyframes bubblePop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tut-title { font-weight: 800; font-size: 1rem; margin-bottom: 6px; color: var(--gold); }
.tut-text { color: #ddd; font-size: .85rem; line-height: 1.55; white-space: pre-line; }
.tut-btns { display: flex; gap: 8px; margin-top: 14px; }
.tut-next { flex: 1; padding: 9px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); border: none; border-radius: 10px; color: white; font-size: .88rem; font-weight: 700; cursor: pointer; }
.tut-skip { padding: 9px 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: var(--text-gray); font-size: .82rem; cursor: pointer; }
.tut-dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.tut-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: all .3s; }
.tut-dot.active { background: var(--accent-purple); width: 18px; border-radius: 4px; }

/* ===== 通知 ===== */
#notif-container { position: fixed; bottom: 80px; right: 16px; z-index: 600; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 300px; }
.notif { background: linear-gradient(135deg, #2d1f6e, #3a2880); border: 1px solid rgba(124,58,237,.5); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: notifIn .3s ease; pointer-events: none; }
@keyframes notifIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.notif-title { font-weight: 700; font-size: .82rem; color: var(--gold); }
.notif-body { font-size: .78rem; color: #ddd; }
.float-num { position: fixed; color: #22c55e; font-weight: 700; font-size: 1rem; pointer-events: none; z-index: 700; animation: floatUp 1.1s ease forwards; }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-60px); } }