/* ===== 蓝豆仔星球 v2 统一首页 前端样式 ===== */
:root { --bg:#0a1733; --bg2:#0e2a5c; --cyan:#00D4FF; --orange:#FF7A00; --gold:#FFC83D; --green:#34D399; --text:#E8F0FF; --dim:#8BA3C7; }
.pix-app { min-height:100vh; background:radial-gradient(1000px 500px at -10% -10%,rgba(0,212,255,.15),transparent 60%),radial-gradient(800px 400px at 110% 20%,rgba(255,122,0,.1),transparent 55%),linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--text); font-family:-apple-system,"Microsoft YaHei",sans-serif; padding-bottom:60px; position:relative; overflow:hidden; }

/* 动态场景粒子 */
.pix-scene { position:absolute; inset:0; z-index:0; pointer-events:none; }
.pix-star { position:absolute; border-radius:50%; background:#fff; opacity:.6; animation:twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:.2; transform:scale(.8)} 50%{opacity:.9; transform:scale(1.3)} }
.pix-orb { position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(0,212,255,.4),rgba(30,86,176,.15) 70%); opacity:.5; animation:floatOrb ease-in-out infinite; }
@keyframes floatOrb { 0%,100%{transform:translateY(0) } 50%{transform:translateY(-14px)} }
.pix-app > *:not(.pix-scene) { position:relative; z-index:1; }

/* 顶部状态栏（4资源+段位） */
.pix-header { position:sticky; top:0; z-index:50; background:rgba(10,23,51,.9); backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,212,255,.15); }
.pix-user { display:flex; align-items:center; gap:10px; padding:12px 16px 8px; }
.pix-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),#1E56B0); display:flex; align-items:center; justify-content:center; font-size:20px; }
.pix-username { font-size:16px; font-weight:900; }
.pix-tier { font-size:10px; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,.1); }
.pix-resources { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 12px 10px; }
.pix-res { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 4px; text-align:center; cursor:pointer; }
.pix-res .val { font-size:15px; font-weight:900; }
.pix-res .lbl { font-size:9px; color:var(--dim); margin-top:2px; }
.pix-res.stamina .val { color:var(--green); }
.pix-res.coin .val { color:var(--gold); }
.pix-res.star .val { color:var(--cyan); }
.pix-res.class .val { color:var(--orange); }

/* Banner + 蓝豆仔 */
.pix-banner { position:relative; margin:14px 16px; border-radius:18px; background:linear-gradient(135deg,#143a7d,#1e56b0); overflow:hidden; padding:20px; min-height:180px; }
.pix-banner .ip { position:absolute; right:16px; bottom:10px; width:110px; height:110px; object-fit:contain; animation:breath 3s ease-in-out infinite; }
@keyframes breath { 0%,100%{transform:scale(1) translateY(0)} 50%{transform:scale(1.05) translateY(-6px)} }
.pix-banner .hello { font-size:20px; font-weight:900; }
.pix-banner .sub { font-size:12px; color:#A5D8FF; margin-top:6px; }
.pix-banner .streak { position:absolute; left:20px; bottom:16px; display:flex; gap:6px; font-size:12px; }
.pix-banner .streak .fire { font-size:16px; }
/* 对话气泡 */
.pix-speech { position:absolute; top:-8px; left:20px; right:80px; background:rgba(255,255,255,.95); color:#0a1733; border-radius:12px; padding:8px 12px; font-size:12px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.2); opacity:0; transform:translateY(-10px); transition:all .3s; z-index:5; }
.pix-speech.show { opacity:1; transform:translateY(0); }
.pix-speech::after { content:''; position:absolute; bottom:-6px; left:24px; border:6px solid transparent; border-top-color:#fff; border-bottom:none; }

/* 快捷入口网格 */
.pix-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 16px 14px; }
.pix-item { background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px 8px; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden; }
.pix-item:active { transform:scale(.96); }
.pix-item::after { content:''; position:absolute; top:-50%; left:-30%; width:80%; height:130%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent); transform:rotate(20deg); transition:left .4s; }
.pix-item:hover::after { left:80%; }
.pix-item .ico { font-size:24px; width:48px; height:48px; margin:0 auto; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(0,212,255,.15); }
.pix-item .nm { font-size:12px; font-weight:800; margin-top:8px; }
.pix-item .badge { position:absolute; top:6px; right:6px; min-width:18px; height:18px; border-radius:9px; background:var(--orange); color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; padding:0 4px; z-index:2; }
.pix-item.blue .ico { background:rgba(0,212,255,.18); box-shadow:0 0 16px rgba(0,212,255,.25); }
.pix-item.gold .ico { background:rgba(255,200,61,.18); box-shadow:0 0 16px rgba(255,200,61,.25); }
.pix-item.orange .ico { background:rgba(255,122,0,.18); box-shadow:0 0 16px rgba(255,122,0,.25); }
.pix-item.cyan .ico { background:rgba(52,211,153,.18); box-shadow:0 0 16px rgba(52,211,153,.25); }
.pix-item.blue { border-color:rgba(0,212,255,.35); }
.pix-item.gold { border-color:rgba(255,200,61,.35); }
.pix-item.orange { border-color:rgba(255,122,0,.35); }
.pix-item.cyan { border-color:rgba(52,211,153,.35); }

/* 新手引导 */
.pix-guide { position:fixed; inset:0; z-index:2000; }
.pix-guide.hidden { display:none; }
.pix-guide-mask { position:absolute; inset:0; background:rgba(5,15,40,.7); backdrop-filter:blur(2px); }
.pix-guide-tip { position:absolute; width:280px; background:#fff; color:#0a1733; border-radius:16px; padding:18px; box-shadow:0 12px 40px rgba(0,0,0,.4); z-index:2001; animation:guideIn .3s ease; }
@keyframes guideIn { 0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} }
.pix-guide-tip .arrow { position:absolute; top:-8px; left:30px; width:0; height:0; border:8px solid transparent; border-bottom-color:#fff; border-top:none; }
.pix-guide-tip .title { font-size:16px; font-weight:900; margin-bottom:8px; }
.pix-guide-tip .desc { font-size:13px; color:#475569; line-height:1.6; }
.pix-guide-btns { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.pix-guide-btn { padding:8px 16px; border-radius:18px; font-size:13px; font-weight:800; border:none; cursor:pointer; }
.pix-guide-btn.ghost { background:transparent; color:#64748b; }
.pix-guide-btn.primary { background:linear-gradient(135deg,var(--cyan),#1E56B0); color:#fff; }
/* 区块标题 */
.pix-sec { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; }
.pix-sec .t { font-size:16px; font-weight:900; }
.pix-sec .more { font-size:12px; color:var(--cyan); cursor:pointer; }

/* 每日任务摘要 */
.pix-tasks { padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.pix-task { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border-radius:12px; padding:12px; }
.pix-task .ico { font-size:22px; }
.pix-task .nm { flex:1; font-size:13px; font-weight:700; }
.pix-task .prog { font-size:11px; color:var(--dim); }
.pix-task .reward { font-size:12px; color:var(--gold); font-weight:800; }
.pix-task.done { border-color:var(--green); background:rgba(52,211,153,.08); }

/* 成就 */
.pix-badges { padding:0 16px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.pix-badge { text-align:center; }
.pix-badge .ico { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto; }
.pix-badge.locked { opacity:.35; }
.pix-badge .nm { font-size:9px; color:var(--dim); margin-top:4px; }

/* 底部导航 */
.pix-tabbar { position:fixed; bottom:0; left:0; right:0; background:rgba(10,23,51,.95); backdrop-filter:blur(10px); display:flex; border-top:1px solid rgba(0,212,255,.15); z-index:60; }
.pix-tab { flex:1; text-align:center; padding:10px 0 12px; cursor:pointer; color:var(--dim); }
.pix-tab .ico { font-size:20px; }
.pix-tab .nm { font-size:10px; font-weight:700; margin-top:2px; }
.pix-tab.active { color:var(--cyan); }
.pix-tab.center { color:var(--orange); }
.pix-tab.center .ico { font-size:26px; }

/* 资源提示弹窗 */
.pix-tip { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(11,30,75,.95); border:1px solid rgba(0,212,255,.3); border-radius:14px; padding:14px 18px; width:280px; z-index:200; font-size:12px; line-height:1.7; box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .3s; }
.pix-tip.show { opacity:1; }
.pix-tip b { color:var(--gold); }

/* 孵化弹窗 */
.pix-hatch { position:fixed; inset:0; background:rgba(5,10,30,.95); z-index:1000; display:flex; align-items:center; justify-content:center; }
.pix-hatch.hidden { display:none; }
.pix-hatch .egg { font-size:90px; animation:eggshake 0.6s ease-in-out infinite; }
@keyframes eggshake { 0%,100%{transform:rotate(0) translateX(0)} 25%{transform:rotate(-8deg) translateX(-4px)} 75%{transform:rotate(8deg) translateX(4px)} }
.pix-hatch .hatch-text { text-align:center; font-size:16px; font-weight:900; margin-top:16px; color:var(--cyan); }

/* 音效开关 */
.pix-sound-btn { position:fixed; top:12px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:70; font-size:16px; }