*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#fff;font-family:'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:hidden;min-height:100vh;position:relative}
.app-container{max-width:480px;margin:0 auto;position:relative}
.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--dur) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.banner{position:relative;z-index:1;text-align:center;padding:10px 15px 5px;background:linear-gradient(180deg,rgba(255,0,100,.3) 0%,transparent 100%)}
.banner h1{font-size:22px;font-weight:900;background:linear-gradient(135deg,#FFD700,#FF6B6B,#FFD700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:titlePulse 2s ease-in-out infinite}
@keyframes titlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.banner .subtitle{color:#ff6b6b;font-size:11px;margin-top:2px;animation:blink 1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.fake-rates{position:relative;z-index:1;margin:5px 10px;padding:8px 10px;background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,107,107,.12));border:1px solid rgba(255,215,0,.25);border-radius:8px;font-size:11px}
.fake-rates .title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fake-rates .title-row span:first-child{font-weight:bold;color:#FFD700}
.fake-rates .title-row .hot{background:#ff4444;color:#fff;padding:1px 6px;border-radius:8px;font-size:10px;animation:blink .8s infinite}
.rate-bars{display:flex;flex-direction:column;gap:4px}
.rate-bar{display:flex;align-items:center;gap:6px}
.rate-bar .label{width:28px;font-weight:bold;text-align:right;font-size:10px}
.rate-bar .bar{flex:1;height:14px;background:rgba(255,255,255,.1);border-radius:7px;overflow:hidden;position:relative}
.rate-bar .fill{height:100%;border-radius:7px;transition:width 2s ease;position:relative}
.rate-bar .fill::after{content:attr(data-rate);position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:bold;color:#fff}
.rate-bar.mr .fill{background:linear-gradient(90deg,#ff0000,#ff6600)}
.rate-bar.ur .fill{background:linear-gradient(90deg,#FF9800,#FFD700)}
.rate-bar.ssr .fill{background:linear-gradient(90deg,#7B1FA2,#E040FB)}
.rate-bar.sr .fill{background:linear-gradient(90deg,#1565C0,#42A5F5)}
.rate-bar.r .fill{background:linear-gradient(90deg,#2E7D32,#66BB6A)}
.rate-bar.n .fill{background:linear-gradient(90deg,#616161,#9E9E9E)}
.pool-showcase{position:relative;z-index:1;margin:8px;text-align:center}
.pool-showcase .featured-card{width:120px;height:165px;margin:0 auto;background:linear-gradient(135deg,#1a1a3e,#2a1a4e);border:2px solid #FFD700;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 0 25px rgba(255,215,0,.35),inset 0 0 25px rgba(255,215,0,.08);animation:cardFloat 3s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-6px) rotateY(3deg)}}
.featured-card .card-img{width:70px;height:70px;border-radius:8px;object-fit:cover;margin-bottom:6px;border:2px solid rgba(255,215,0,.4)}
.featured-card .card-name{font-size:12px;font-weight:bold;color:#FFD700}
.featured-card .card-rarity{font-size:10px;color:#E040FB;margin-top:2px}
.featured-card .ur-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#FF9800,#FFD700);color:#000;font-weight:900;font-size:10px;padding:2px 8px;border-radius:8px;box-shadow:0 0 12px rgba(255,215,0,.5);animation:badgePulse 1.5s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.1) rotate(5deg)}}
.pool-banner-name{margin-top:4px;font-size:12px;font-weight:bold;background:linear-gradient(135deg,#FFD700,#FF6B6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pool-banner-desc{color:#aaa;font-size:10px;margin-top:1px}
.up-notice{margin-top:4px;color:#ff6b6b;font-size:11px;font-weight:bold}
.gacha-btns{position:relative;z-index:1;display:flex;gap:6px;padding:6px 10px;justify-content:center;flex-wrap:wrap}
.gacha-btn{flex:1;max-width:110px;min-width:80px;padding:8px 4px;border:none;border-radius:10px;font-size:12px;font-weight:bold;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s}
.gacha-btn:active{transform:scale(.95)}
.gacha-btn.free{background:linear-gradient(135deg,#4CAF50,#2E7D32);color:#fff;box-shadow:0 3px 15px rgba(76,175,80,.35)}
.gacha-btn.single{background:linear-gradient(135deg,#2196F3,#1565C0);color:#fff;box-shadow:0 3px 15px rgba(33,150,243,.35)}
.gacha-btn.multi{background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;box-shadow:0 3px 15px rgba(255,215,0,.35)}
.gacha-btn .sub{display:block;font-size:9px;font-weight:normal;margin-top:2px;opacity:.8}
.gacha-btn .free-tag{position:absolute;top:-2px;right:-2px;background:#ff4444;color:#fff;font-size:9px;padding:1px 6px;border-radius:0 10px 0 8px;animation:blink .8s infinite}
.gacha-btn.disabled{opacity:.5;pointer-events:none}
.resources{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;padding:4px 10px;font-size:11px;flex-wrap:wrap}
.res-item{display:flex;align-items:center;gap:2px}
.res-item .icon{font-size:12px}
.res-item .val{color:#FFD700;font-weight:bold}
.power-display{position:relative;z-index:1;text-align:center;padding:2px 10px;font-size:11px;color:#ff9800}
.power-display .power-num{font-size:14px;font-weight:bold;color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.4)}
.marquee-wrap{position:relative;z-index:1;margin:4px 10px;padding:4px 8px;background:rgba(255,215,0,.08);border-radius:5px;overflow:hidden;font-size:10px;color:#FFD700}
.marquee-inner{display:inline-block;white-space:nowrap;animation:marquee 20s linear infinite}
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.flash-sale-bar{position:relative;z-index:1;margin:4px 10px;padding:6px 10px;background:linear-gradient(135deg,rgba(255,68,68,.25),rgba(255,149,0,.25));border:1px solid rgba(255,68,68,.4);border-radius:6px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;animation:flashPulse 2s ease-in-out infinite}
@keyframes flashPulse{0%,100%{box-shadow:0 0 8px rgba(255,68,68,.25)}50%{box-shadow:0 0 20px rgba(255,68,68,.5)}}
.flash-sale-bar .flash-left{display:flex;align-items:center;gap:6px}
.flash-sale-bar .flash-icon{font-size:16px;animation:blink .8s infinite}
.flash-sale-bar .flash-name{font-weight:bold;color:#FFD700;font-size:11px}
.flash-sale-bar .flash-price{font-size:10px;color:#ff6b6b}
.flash-sale-bar .flash-price .orig{text-decoration:line-through;color:#888;margin-right:4px}
.flash-sale-bar .flash-timer{color:#FFD700;font-family:monospace;font-size:12px;font-weight:bold}
.countdown-bar{position:relative;z-index:1;margin:0 10px 4px;padding:4px 8px;background:linear-gradient(90deg,rgba(255,0,0,.15),rgba(255,100,0,.15));border:1px solid rgba(255,68,68,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px}
.countdown-bar .cd-label{color:#ff6b6b;font-weight:bold}
.countdown-bar .cd-time{color:#FFD700;font-weight:bold;font-family:monospace;font-size:12px}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.modal-overlay.show{display:flex}
.gacha-anim{width:100%;max-width:400px;text-align:center;position:relative}
.chest{width:130px;height:130px;margin:0 auto 15px;position:relative;cursor:pointer;animation:chestShake .3s ease-in-out infinite}
@keyframes chestShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.chest-body{width:130px;height:85px;position:absolute;bottom:0;background:linear-gradient(180deg,#8B4513,#654321);border-radius:6px;border:2px solid #DAA520}
.chest-lid{width:140px;height:42px;position:absolute;bottom:78px;left:-5px;background:linear-gradient(180deg,#DAA520,#8B4513);border-radius:6px 6px 0 0;border:2px solid #DAA520;transform-origin:bottom center;transition:transform .5s ease}
.chest.open .chest-lid{transform:rotateX(-120deg)}
.chest-lock{width:20px;height:25px;position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:#FFD700;border-radius:50% 50% 3px 3px;border:2px solid #B8860B;z-index:2}
.card-reveal{display:none;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px}
.card-reveal.show{display:flex}
.card-item{width:75px;padding:6px;border-radius:10px;background:rgba(30,30,60,.9);border:2px solid #444;text-align:center;cursor:pointer;transform:scale(0) rotateY(180deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.card-item.revealed{transform:scale(1) rotateY(0)}
.card-item.rarity-MR{border-color:#ff3300;box-shadow:0 0 25px rgba(255,51,0,.7),0 0 50px rgba(255,51,0,.3);animation:mrGlow 1.2s infinite}
.card-item.rarity-UR{border-color:#FFD700;box-shadow:0 0 20px rgba(255,215,0,.55),0 0 35px rgba(255,215,0,.2);animation:urGlow 1.5s infinite}
.card-item.rarity-SSR{border-color:#E040FB;box-shadow:0 0 15px rgba(224,64,251,.45);animation:ssrGlow 2s infinite}
.card-item.rarity-SR{border-color:#42A5F5;box-shadow:0 0 10px rgba(66,165,245,.35)}
@keyframes mrGlow{0%,100%{box-shadow:0 0 25px rgba(255,51,0,.7)}50%{box-shadow:0 0 40px rgba(255,51,0,.95),0 0 70px rgba(255,100,0,.5)}}
@keyframes urGlow{0%,100%{box-shadow:0 0 20px rgba(255,215,0,.55)}50%{box-shadow:0 0 30px rgba(255,215,0,.85),0 0 55px rgba(255,215,0,.35)}}
@keyframes ssrGlow{0%,100%{box-shadow:0 0 15px rgba(224,64,251,.45)}50%{box-shadow:0 0 25px rgba(224,64,251,.7)}}
.card-item .card-thumb{width:50px;height:50px;border-radius:6px;object-fit:cover;margin-bottom:3px}
.card-item .card-title{font-size:9px;font-weight:bold;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-item .card-rarity-tag{font-size:9px;margin-top:2px;font-weight:bold}
.card-item .frag-tag{font-size:8px;color:#4CAF50;margin-top:1px}
.close-btn{margin-top:12px;padding:8px 30px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:20px;font-size:13px;cursor:pointer}
.fullscreen-effect{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99;pointer-events:none;display:none}
.fullscreen-effect.show{display:block}
.particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none}
.page{display:none;position:relative;z-index:1;padding-bottom:55px}
.page.active{display:block}
.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 10px}
.coll-card{padding:5px;background:rgba(30,30,60,.55);border:2px solid #333;border-radius:7px;text-align:center;position:relative;cursor:pointer;transition:all .3s ease;overflow:hidden}
.coll-card.owned{opacity:1}
.coll-card.locked{opacity:.25;filter:grayscale(1)}
.coll-card .coll-img{width:42px;height:42px;border-radius:5px;object-fit:cover;margin-bottom:2px;position:relative;z-index:1}
.coll-card .coll-name{font-size:8px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1}
.coll-card .coll-count{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#FFD700;font-size:8px;padding:0 3px;border-radius:5px;z-index:2}
.coll-card .coll-stars{font-size:7px;color:#FFD700;margin-top:1px;position:relative;z-index:1}
.coll-card.star5{border:2px solid transparent;background-clip:padding-box;animation:rainbow5 3s linear infinite;box-shadow:0 0 15px rgba(255,215,0,.6)}
.coll-card.star5::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:9px;background:linear-gradient(45deg,#ff0000,#ff7700,#ffff00,#00ff00,#0077ff,#8800ff,#ff0000);background-size:400% 400%;animation:rainbow5 3s linear infinite;z-index:0}
@keyframes rainbow5{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.glass-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.glass-modal.show{display:flex}
.glass-content{width:92%;max-width:380px;max-height:80vh;overflow-y:auto;background:linear-gradient(135deg,rgba(20,20,50,.95),rgba(30,20,60,.95));border:1px solid rgba(255,215,0,.25);border-radius:18px;padding:18px;text-align:center;box-shadow:0 0 35px rgba(0,0,0,.45)}
.glass-content h3{color:#FFD700;font-size:18px;margin-bottom:12px}
.glass-close{margin-top:12px;padding:8px 25px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:18px;color:#fff;font-size:13px;cursor:pointer}
.more-page{padding:8px 10px}
.more-section{margin-bottom:12px;padding:10px;background:rgba(30,30,60,.55);border:1px solid rgba(255,255,255,.08);border-radius:9px}
.more-section h3{color:#FFD700;font-size:14px;margin-bottom:8px}
.page-header{text-align:center;padding:8px}
.page-header h2{font-size:18px;background:linear-gradient(135deg,#FFD700,#FF6B6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.page-header .sub{color:#aaa;font-size:10px;margin-top:2px}
.bottom-tab{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:10;background:rgba(10,10,30,.95);border-top:1px solid rgba(255,215,0,.18);display:flex;padding:4px 0 max(4px,env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
.tab-item{flex:1;text-align:center;cursor:pointer;padding:2px 0;color:#888;font-size:9px;transition:color .3s}
.tab-item.active{color:#FFD700}
.tab-item .tab-icon{font-size:16px;display:block;margin-bottom:1px}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);color:#FFD700;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:bold;z-index:300;display:none;border:1px solid rgba(255,215,0,.25);max-width:90%;text-align:center}
.toast.show{display:block}
.sub-tabs{display:flex;gap:5px;padding:5px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap}
.sub-tabs::-webkit-scrollbar{display:none}
.sub-tabs .sub-tab{flex-shrink:0}
.sub-tab{padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:15px;color:#aaa;font-size:10px;cursor:pointer}
.sub-tab.active{background:rgba(255,215,0,.12);border-color:#FFD700;color:#FFD700}
.sub-content{display:none}
.sub-content.active{display:block}
.gacha-type-tabs{display:flex;gap:5px;padding:5px 10px;justify-content:center}
.gacha-type-tab{padding:5px 15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:15px;color:#aaa;font-size:11px;cursor:pointer}
.gacha-type-tab.active{background:rgba(255,215,0,.12);border-color:#FFD700;color:#FFD700}
.gem-item{display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:5px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.gem-icon{font-size:24px;width:35px;text-align:center}
.gem-info{flex:1}
.gem-name{font-size:12px;font-weight:bold}
.gem-effect{font-size:10px;color:#aaa}
.gem-stars{font-size:10px;color:#FFD700}
.gem-btn{padding:4px 10px;background:linear-gradient(135deg,#4CAF50,#2E7D32);color:#fff;border:none;border-radius:6px;font-size:10px;cursor:pointer}
.gem-btn.unequip{background:linear-gradient(135deg,#f44336,#d32f2f)}
.pet-item{display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:5px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.pet-emoji{font-size:28px;width:40px;text-align:center}
.pet-info{flex:1}
.pet-name{font-size:12px;font-weight:bold}
.pet-rarity{font-size:10px}
.pet-stars{font-size:10px;color:#FFD700}
.pet-btn{padding:4px 10px;background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;border:none;border-radius:6px;font-size:10px;font-weight:bold;cursor:pointer}
.pet-btn.active{background:linear-gradient(135deg,#4CAF50,#2E7D32);color:#fff}
.tower-floor{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:6px}
.tower-floor.boss{border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.08)}
.tower-num{font-size:18px;font-weight:bold;color:#FFD700;width:32px;text-align:center}
.tower-info{flex:1}
.tower-enemy{font-size:13px;font-weight:bold}
.tower-power{font-size:10px;color:#ff9800;margin-top:1px}
.tower-reward{font-size:10px;color:#4CAF50;margin-top:1px}
.tower-btn{padding:6px 14px;background:linear-gradient(135deg,#FF9800,#FFD700);color:#000;border:none;border-radius:8px;font-size:12px;font-weight:bold;cursor:pointer}
.tower-btn:disabled{opacity:.4}
.rank-item{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:6px;background:rgba(30,30,60,.55);border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.rank-item.top1{border-color:#FFD700;background:rgba(255,215,0,.08)}
.rank-item.top2{border-color:#C0C0C0;background:rgba(192,192,192,.08)}
.rank-item.top3{border-color:#CD7F32;background:rgba(205,127,50,.08)}
.rank-pos{width:28px;text-align:center;font-size:16px;font-weight:bold;color:#FFD700}
.rank-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a1a3e,#2a1a4e);display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.18);overflow:hidden}
.rank-avatar img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1}
.rank-name{font-size:13px;font-weight:bold}
.rank-val{font-size:11px;color:#FFD700;margin-top:1px}
.quest-item{display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:5px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.quest-icon{font-size:20px;width:28px;text-align:center}
.quest-info{flex:1}
.quest-name{font-size:12px;font-weight:bold}
.quest-desc{font-size:10px;color:#888}
.quest-reward{font-size:10px;color:#4CAF50}
.quest-progress{width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:3px;overflow:hidden}
.quest-progress-fill{height:100%;background:#FFD700;border-radius:2px}
.quest-btn{padding:4px 10px;background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;border:none;border-radius:6px;font-size:10px;font-weight:bold;cursor:pointer}
.quest-btn:disabled{opacity:.4}
.sign-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sign-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:8px;border:1px solid rgba(255,255,255,.08);font-size:11px;position:relative}
.sign-day.signed{background:rgba(76,175,80,.18);border-color:#4CAF50}
.sign-day.today{border-color:#FFD700;box-shadow:0 0 8px rgba(255,215,0,.25)}
.sign-day .day-num{font-weight:bold;color:#fff}
.sign-day .day-reward{font-size:9px;color:#aaa;margin-top:1px}
.sign-day .check-mark{position:absolute;top:1px;right:1px;font-size:12px;color:#4CAF50}
.sign-btn{width:100%;padding:10px;margin-top:10px;background:linear-gradient(135deg,#4CAF50,#2E7D32);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:bold;cursor:pointer}
.sign-btn:disabled{opacity:.5}
.profile-card{text-align:center;padding:12px;background:rgba(30,30,60,.55);border-radius:12px;border:1px solid rgba(255,215,0,.18);margin-bottom:10px}
.profile-avatar{width:55px;height:55px;border-radius:50%;border:2px solid #FFD700;margin:0 auto 8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,#1a1a3e,#2a1a4e)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:16px;font-weight:bold}
.profile-power{font-size:24px;font-weight:900;color:#FFD700;margin:6px 0;text-shadow:0 0 10px rgba(255,215,0,.35)}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.stat-item{text-align:center;padding:8px 4px;background:rgba(30,30,60,.55);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.stat-val{font-size:14px;font-weight:bold;color:#FFD700}
.stat-label{font-size:9px;color:#888;margin-top:1px}
.pity-box{display:flex;gap:12px;justify-content:center;margin-top:10px;padding:10px;background:rgba(30,30,60,.55);border-radius:10px;border:1px solid rgba(255,215,0,.12)}
.pity-item{text-align:center}
.pity-num{font-size:20px;font-weight:bold}
.pity-label{font-size:9px;color:#aaa;margin-top:1px}
.pity-bar{width:60px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:3px;overflow:hidden}
.pity-bar-fill{height:100%;border-radius:2px}
.mail-item{padding:10px;margin-bottom:6px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.mail-item.unread{border-color:rgba(255,215,0,.25)}
.mail-title{font-size:13px;font-weight:bold}
.mail-content{font-size:11px;color:#aaa;margin:4px 0}
.mail-reward{font-size:11px;color:#4CAF50}
.mail-btn{padding:4px 12px;background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;border:none;border-radius:6px;font-size:11px;font-weight:bold;cursor:pointer;margin-top:4px}
.idle-display{text-align:center;padding:15px}
.idle-emoji{font-size:48px;margin-bottom:10px}
.idle-coins{font-size:32px;font-weight:bold;color:#FFD700;margin:10px 0}
.idle-rate{font-size:12px;color:#888}
.idle-btn{padding:10px 30px;margin-top:12px;background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;border:none;border-radius:10px;font-size:14px;font-weight:bold;cursor:pointer}
.idle-btn:disabled{opacity:.5}
.pvp-info{text-align:center;margin-bottom:12px}
.pvp-trophies{font-size:28px;font-weight:bold;color:#FFD700}
.pvp-stats{font-size:11px;color:#888;margin-top:4px}
.pvp-opponent{display:flex;align-items:center;justify-content:space-between;padding:10px;margin-bottom:6px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.pvp-opp-info{flex:1}
.pvp-opp-name{font-size:13px;font-weight:bold}
.pvp-opp-stats{font-size:10px;color:#888}
.pvp-battle-btn{padding:6px 14px;background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:bold;cursor:pointer}
.vip-badge{display:inline-block;padding:1px 5px;background:linear-gradient(135deg,#FFD700,#FF9800);color:#000;font-size:10px;font-weight:bold;border-radius:6px;margin-left:4px;vertical-align:middle}
.shake-screen{animation:screenShake .5s ease-in-out}
@keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-2px,4px)}40%{transform:translate(2px,-4px)}}
.starup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;display:none}
.starup-overlay.show{display:block;animation:starupFlash .6s ease-out}
@keyframes starupFlash{0%{background:rgba(255,215,0,.5)}100%{background:transparent}}
.starup-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:200px;height:200px;border:3px solid #FFD700;border-radius:50%;opacity:0}
.starup-ring.go{animation:ringExpand .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ringExpand{0%{transform:translate(-50%,-50%) scale(0);opacity:1;border-width:6px}100%{transform:translate(-50%,-50%) scale(3);opacity:0;border-width:1px}}
.starup-star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:60px;opacity:0;z-index:10000;text-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.5)}
.starup-star.go{animation:starPop .9s cubic-bezier(.17,.89,.32,1.3) forwards}
@keyframes starPop{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:0}40%{transform:translate(-50%,-50%) scale(1.4) rotate(10deg);opacity:1}60%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) scale(.8) rotate(0);opacity:0}}
.starup-text{position:absolute;top:62%;left:50%;transform:translateX(-50%) scale(0);font-size:20px;font-weight:900;color:#FFD700;text-shadow:0 0 15px rgba(255,215,0,.8),0 2px 4px rgba(0,0,0,.5);opacity:0;white-space:nowrap;z-index:10000}
.starup-text.go{animation:textBounce .8s .3s cubic-bezier(.17,.89,.32,1.3) forwards}
@keyframes textBounce{0%{transform:translateX(-50%) scale(0);opacity:0}50%{transform:translateX(-50%) scale(1.2);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
.starup-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFD700;opacity:0;z-index:9999}
.starup-particle.go{animation:particleBurst 1s ease-out forwards}
@keyframes particleBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0)}}
.starup-sparkle{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;opacity:0;z-index:9999}
.starup-sparkle.go{animation:sparkleFloat 1.2s ease-out forwards}
@keyframes sparkleFloat{0%{opacity:0;transform:translateY(0) scale(0)}30%{opacity:1;transform:translateY(var(--sy)) scale(1)}100%{opacity:0;transform:translateY(var(--ey)) scale(0)}}