/* ═══════════════════════════════════════════════════════════
   成就系统样式 — 独立模块
   ═══════════════════════════════════════════════════════════ */

/* ── 解锁弹窗 ── */
.ach-popup{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-120px);z-index:10000;opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.ach-popup.show{transform:translateX(-50%) translateY(0);opacity:1}
.ach-popup-card{background:rgba(20,22,28,.96);border:2px solid #ffc83c;border-radius:12px;padding:20px 28px;text-align:center;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:280px}
.ach-popup-rarity{font-size:10px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.ach-popup-icon{margin-bottom:12px}
.ach-popup-name{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.ach-popup-desc{font-size:13px;color:#888;margin-bottom:8px}
.ach-popup-date{font-size:11px;color:#555}

/* ── 成就面板（成就墙）── */
#achievements-panel{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9999;display:none;justify-content:center;align-items:center}
#achievements-panel.active{display:flex}
.ach-panel-inner{background:rgba(12,14,20,.97);border:1px solid #333;border-radius:16px;width:420px;max-width:92vw;max-height:80vh;overflow-y:auto;backdrop-filter:blur(12px)}
.ach-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333;font-size:16px;font-weight:600;color:#fff}
.ach-panel-close{background:none;border:none;color:#888;font-size:18px;cursor:pointer}
.ach-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;max-height:60vh;overflow-y:auto}.ach-group-title{grid-column:1/-1;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;padding:6px 0 2px;margin-top:8px;border-bottom:1px solid rgba(255,255,255,.06)}.ach-group-title:first-child{margin-top:0}
.ach-card{background:rgba(15,17,23,.9);border:1px solid #2a2a2a;border-radius:10px;padding:14px 10px;text-align:center;transition:border-color .2s,transform .15s}
.ach-card.unlocked:hover{transform:translateY(-2px)}
.ach-card-icon{margin-bottom:8px}
.ach-card-name{font-size:13px;font-weight:600;margin-bottom:4px}

/* ── 成就详情弹窗（黑金游戏卡片）── */
.ach-detail-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.96);z-index:10001;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ach-detail-shell{position:relative;width:650px;max-width:94vw;background:#0a0a0f;border:2px solid rgba(100,180,255,.25);border-radius:20px;padding:3px;box-shadow:0 0 30px rgba(100,160,255,.08),0 8px 40px rgba(0,0,0,.6)}
.ach-detail-card-new{display:flex;background:linear-gradient(160deg,#0d0d14 0%,#0a0c12 100%);border-radius:17px;overflow:hidden;min-height:200px}
.ach-detail-left{width:42%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;padding:16px;background:linear-gradient(180deg,rgba(20,22,30,0) 0%,rgba(20,22,30,.5) 100%)}
.ach-detail-left-frame{width:100%;aspect-ratio:1;border:3px solid #c8a84e;border-radius:12px;box-shadow:inset 0 0 20px rgba(200,168,78,.1),0 0 0 4px rgba(200,168,78,.25);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ach-detail-left-frame img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.ach-detail-right{width:56%;flex-shrink:0;padding:20px 24px 20px 8px;display:flex;flex-direction:column;justify-content:center}
.ach-detail-title-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ach-detail-title{font-size:22px;font-weight:800;background:linear-gradient(180deg,#f5d78c 0%,#c8a84e 50%,#a6842f 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
.ach-detail-tag{font-size:10px;background:#1a1a1a;color:#c8a84e;border:1px solid rgba(200,168,78,.3);border-radius:4px;padding:2px 8px;font-weight:600;letter-spacing:1px;white-space:nowrap}
.ach-detail-desc-new{font-size:13px;color:#b0b0b0;line-height:1.6;margin-bottom:10px}
.ach-detail-divider{height:1px;background:linear-gradient(90deg,rgba(200,168,78,.5),rgba(200,168,78,0));margin-bottom:12px}
.ach-detail-stats{font-size:12px;color:#999;margin-top:8px}
.ach-stats-loading{color:#555}
.ach-stats-icon{margin-right:4px;font-size:14px}
.ach-detail-condition{font-size:11px;color:#666;margin-top:8px}
.ach-detail-foot-outer{text-align:center;padding:10px 20px 16px}
.ach-detail-date-outer{font-size:12px;color:#c8a84e;margin-bottom:18px}
.ach-detail-close-btn{background:rgba(200,168,78,.1);border:1px solid rgba(200,168,78,.3);border-radius:6px;color:#c8a84e;padding:6px 20px;font-size:13px;cursor:pointer;transition:all .2s}
.ach-detail-close-btn:hover{background:rgba(200,168,78,.2)}

/* ── 响应式 ── */
@media(max-width:600px){
  .ach-panel-inner{width:100vw;max-width:100vw;border-radius:0;max-height:100vh}
  .ach-wall{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
  .ach-detail-card-new{flex-direction:column}
  .ach-detail-left{width:100%;padding:20px 20px 8px}
  .ach-detail-left-frame{max-width:160px}
  .ach-detail-right{width:100%;padding:12px 20px 20px}
  .ach-detail-title{font-size:18px}
}