@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;overflow:hidden;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;user-select:none;touch-action:none}
canvas{display:block}

#loading{
position:fixed;inset:0;z-index:999;
background:radial-gradient(ellipse at center,#1a1a3e,#0a0a1a);
display:flex;flex-direction:column;align-items:center;justify-content:center;
transition:opacity .6s
}
#loading.hide{opacity:0;pointer-events:none}
#loading h1{font-size:42px;background:linear-gradient(90deg,#f7971e,#ffd200);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;letter-spacing:6px}
#loading .sub{color:rgba(255,255,255,.5);font-size:15px;margin-bottom:30px}
#loading .bar-wrap{width:260px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
#loading .bar{height:100%;width:0%;background:linear-gradient(90deg,#f7971e,#ffd200);border-radius:3px;transition:width .3s}
#loading .tip{color:rgba(255,255,255,.35);font-size:13px;margin-top:16px;min-height:20px;transition:opacity .3s}

#ui{
position:fixed;inset:0;pointer-events:none;z-index:10;
font-family:'Noto Sans SC','Microsoft YaHei',sans-serif
}
#ui>*{pointer-events:auto}

#hud{position:absolute;top:0;left:0;right:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:flex-start}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:3px}
.hud-left{text-align:left}
.hud-right{text-align:right}
.hud-label{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:1px}
.hud-value{font-size:18px;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hud-value.gold{color:#ffd700}
.hud-value span{font-size:12px;font-weight:400;opacity:.6}

#btns{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{
padding:8px 16px;border:none;border-radius:12px;font-size:12px;font-weight:700;
cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:1px;
backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:linear-gradient(135deg,#f7971e,#ffd200);color:#1a1a2e;box-shadow:0 4px 20px rgba(255,210,0,.3)}
.btn-purple{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 20px rgba(118,75,162,.3)}
.btn-outline{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.1)}
.btn-outline:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:5px 12px;font-size:11px;border-radius:8px}

.badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;border-radius:10px;background:#f5576c;
color:#fff;font-size:10px;padding:0 5px;margin-left:3px
}

#deathScreen{
display:none;position:fixed;inset:0;z-index:50;
background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
flex-direction:column;align-items:center;justify-content:center
}
#deathScreen.show{display:flex}
#deathScreen h2{font-size:48px;color:#ff6b6b;margin-bottom:4px;text-shadow:0 0 40px rgba(255,107,107,.3)}
#deathScreen .sub{font-size:16px;color:rgba(255,255,255,.5);margin-bottom:6px}
#deathScreen .score-big{font-size:36px;font-weight:900;color:#ffd700;margin:10px 0}
#deathScreen .msg{font-size:18px;color:rgba(255,255,255,.7);margin-bottom:20px;min-height:28px}
#deathScreen .btns{display:flex;gap:12px}
#deathScreen .btns .btn{font-size:16px;padding:12px 32px}

#gachaOverlay,#collectionOverlay,#redeemOverlay,#loginOverlay{
display:none;position:fixed;inset:0;z-index:100;
background:rgba(0,0,0,.8);backdrop-filter:blur(8px);
align-items:center;justify-content:center
}
#gachaOverlay.show,#collectionOverlay.show,#redeemOverlay.show,#loginOverlay.show{display:flex}

.panel{
background:linear-gradient(135deg,#1a1a3e,#12122a);
border-radius:24px;padding:24px;max-width:580px;width:92%;
border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.8);
max-height:90vh;overflow-y:auto
}
.panel h2{text-align:center;font-size:20px;margin-bottom:14px}
.panel h2.gold{color:#ffd700}
.panel h2.purple{background:linear-gradient(90deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.panel .close-btn{display:block;margin:14px auto 0}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.card{
aspect-ratio:3/4;border-radius:10px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:3px;padding:6px;
border:2px solid transparent;animation:cardPop .35s cubic-bezier(.34,1.56,.64,1) both;
text-align:center;position:relative
}
.card .icon{font-size:24px;line-height:1}
.card .name{font-size:11px;font-weight:700;line-height:1.2}
.card .tag{font-size:9px;padding:2px 8px;border-radius:10px;letter-spacing:1px}
.card .count{position:absolute;top:3px;right:5px;font-size:11px;font-weight:900;color:rgba(255,255,255,.6)}
.card.common{background:linear-gradient(135deg,#222244,#2a2a4e);color:#999}
.card.uncommon{background:linear-gradient(135deg,#0a2a1a,#1a3a2a);color:#7ddfa0;border-color:#2d8a4a}
.card.rare{background:linear-gradient(135deg,#0a1a3a,#1a2a5a);color:#64b5f6;border-color:#1976d2}
.card.epic{background:linear-gradient(135deg,#2a0a3a,#3a1a5a);color:#ce93d8;border-color:#9c27b0}
.card.legendary{background:linear-gradient(135deg,#3a1a0a,#5a2a0a);color:#ffd54f;border-color:#ff8f00}
.card.avatar{
background:linear-gradient(135deg,#ffd700,#ff6b35,#ff1493);
color:#1a1a2e;border-color:#ffd700;
animation:avatarPulse 1s ease infinite alternate
}
@keyframes cardPop{from{opacity:0;transform:scale(.3) translateY(30px)}}
@keyframes avatarPulse{from{box-shadow:0 0 15px #ffd700}to{box-shadow:0 0 40px #ff6b35,0 0 80px #ffd700}}

#toast{
position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:200;
background:rgba(0,0,0,.85);color:#fff;padding:10px 22px;border-radius:14px;
font-size:14px;display:none;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);
text-align:center;white-space:nowrap
}

/* Mobile controls */
#mobileCtrl{
position:fixed;bottom:16px;left:0;right:0;z-index:15;
display:none;justify-content:space-between;padding:0 16px;
pointer-events:none
}
#mobileCtrl>*{pointer-events:auto}
.mbtn{
width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);color:#fff;font-size:22px;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(6px);cursor:pointer;user-select:none;
transition:background .1s
}
.mbtn:active{background:rgba(255,255,255,.18)}
.mbtn-row{display:flex;gap:8px}

/* Power-up bar */
#powerBar{
position:fixed;bottom:82px;right:12px;z-index:15;
display:flex;flex-direction:column;gap:6px;pointer-events:none
}
#powerBar>*{pointer-events:auto}
.pbtn{
width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
font-size:11px;font-weight:700;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1px;
backdrop-filter:blur(6px);cursor:pointer;color:#fff;padding:3px;
transition:all .15s;font-family:inherit;line-height:1.1
}
.pbtn:active{transform:scale(.92)}
.pbtn-wing{background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,107,53,.2));border-color:rgba(255,215,0,.3)}
.pbtn-stone{background:linear-gradient(135deg,rgba(170,170,170,.2),rgba(100,100,100,.2));border-color:rgba(255,255,255,.1)}
.pbtn.active{box-shadow:0 0 20px rgba(255,215,0,.5)}
.pbtn .picon{font-size:16px}
.pbtn .pcount{font-size:10px;opacity:.7}

/* AI Chat */
#aiBtn{
position:fixed;bottom:20px;right:20px;z-index:50;
width:50px;height:50px;border-radius:50%;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
border:2px solid rgba(255,255,255,.2);
font-size:24px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(99,102,241,.4);
transition:all .2s;pointer-events:auto
}
#aiBtn:hover{transform:scale(1.1)}
#aiBtn:active{transform:scale(.9)}

#aiPanel{
position:fixed;bottom:80px;right:20px;z-index:50;
width:340px;height:460px;
background:rgba(20,20,50,.95);
border:1px solid rgba(255,255,255,.1);
border-radius:16px;
backdrop-filter:blur(20px);
display:none;flex-direction:column;
overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5);
pointer-events:auto
}
#aiPanel.show{display:flex}
#aiHeader{
padding:12px 16px;font-size:14px;font-weight:700;color:#fff;
background:rgba(99,102,241,.2);border-bottom:1px solid rgba(255,255,255,.06);
display:flex;justify-content:space-between;align-items:center
}
#aiHeader .close{background:none;border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;padding:2px 6px}
#aiHeader .close:hover{color:#fff}
#aiMsgs{
flex:1;overflow-y:auto;padding:12px;
display:flex;flex-direction:column;gap:8px;
scroll-behavior:smooth
}
#aiMsgs::-webkit-scrollbar{width:4px}
#aiMsgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.ai-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.ai-msg.user{background:rgba(99,102,241,.3);color:#e0e0ff;align-self:flex-end;border-bottom-right-radius:4px}
.ai-msg.bot{background:rgba(255,255,255,.06);color:#ccc;align-self:flex-start;border-bottom-left-radius:4px}
.ai-msg.bot.streaming{opacity:.8}
.ai-msg.bot .tail{display:inline-block;animation:blink .8s infinite}
@keyframes blink{50%{opacity:0}}
#aiFoot{
padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);
display:flex;gap:8px;pointer-events:auto
}
#aiFoot input{
flex:1;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-family:inherit;outline:none
}
#aiFoot input::placeholder{color:rgba(255,255,255,.25)}
#aiFoot button{
padding:8px 14px;border-radius:10px;border:none;
background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;
font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
transition:all .15s
}
#aiFoot button:active{transform:scale(.95)}

/* Hide during gameplay */
body.playing .hide-during-play{
transform:translateX(250%)translateY(-20px);
opacity:0;pointer-events:none;
transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s}
.hide-during-play{
transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s}

.ai-gift{
margin:4px 0 4px 12px;padding:10px 14px;
background:rgba(99,102,241,.15);
border:1px solid rgba(99,102,241,.3);
border-radius:12px;align-self:flex-start;max-width:85%
}
.ai-gift-title{font-size:13px;color:#e0e0ff;margin-bottom:8px;font-weight:700}
.ai-gift-btns{display:flex;gap:8px}
.ai-gift-accept,.ai-gift-reject{
flex:1;padding:6px 0;border:none;border-radius:8px;
font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
transition:all .15s
}
.ai-gift-accept{background:#22c55e;color:#fff}
.ai-gift-accept:active{transform:scale(.95)}
.ai-gift-reject{background:#ef4444;color:#fff}
.ai-gift-reject:active{transform:scale(.95)}

@media(max-width:600px){
#aiPanel{width:calc(100vw - 32px);right:16px;bottom:130px;height:50vh}
#aiBtn{bottom:130px;right:12px;width:44px;height:44px;font-size:20px}
}

/* Redeem */
.redeem-row{display:flex;gap:8px;margin:0 auto;max-width:380px}
.redeem-row input{
flex:1;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-family:inherit;outline:none
}
.redeem-row input::placeholder{color:rgba(255,255,255,.25)}
.redeem-row .btn{padding:10px 20px}

@media(max-width:600px){
.panel{padding:16px;border-radius:14px}
.grid{gap:4px}
.card .icon{font-size:20px}
.card .name{font-size:10px}
.hud-value{font-size:16px}
#btns{gap:5px;bottom:80px}
.btn{font-size:11px;padding:6px 12px}
#ctrl-hint{display:none}
#mobileCtrl{display:flex}
.mbtn{width:46px;height:46px;font-size:18px}
#powerBar{bottom:78px;right:8px}
.pbtn{width:40px;height:40px;font-size:10px}
.redeem-row{flex-direction:column}
}