/* ============================================================================
 * china/app/css/progression.css  —  PROGRESSION module (dark lunarpunk)
 * Self-contained. Mirrors the app palette (--cnp-* fall back to the same hues
 * game.css uses). Mobile-first; theme-aware (light overrides at the bottom).
 * Link with  <link rel="stylesheet" href="css/progression.css" data-cnp>
 * so progression.js skips its self-injected <style> (FOUC-free).
 * ==========================================================================*/
:root{
  --cnp-abyss:#070b14; --cnp-void:#0b1420; --cnp-panel:#111d2e; --cnp-panel-2:#16273c;
  --cnp-line:#20364f; --cnp-line-2:#2c4a68; --cnp-ink:#e7f0f7; --cnp-dim:#9fb4c8; --cnp-dim-2:#65809a;
  --cnp-cyan:#5fe6d4; --cnp-jade:#8fe0b0; --cnp-moon:#cfe4ff; --cnp-lotus:#f5a3c7;
  --cnp-leg:#f2c14e; --cnp-epic:#c98cf5; --cnp-rare:#5fc2ea; --cnp-unc:#8fe0b0; --cnp-boss:#ff5d6c;
  --cnp-gold:#f2c14e; --cnp-shadow:0 8px 30px rgba(0,0,0,.55);
  --cnp-glow-leg:0 0 18px rgba(242,193,78,.55);
  --cnp-mono:"DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --cnp-abyss:#eef3f8; --cnp-void:#e4ecf4; --cnp-panel:#f6f9fc; --cnp-panel-2:#eaf1f8;
  --cnp-line:#c9d6e4; --cnp-ink:#14202e; --cnp-dim:#4c6076; --cnp-dim-2:#7a8ea3;
}

/* ---- root panel ---- */
.cnp-root{font-family:var(--cnp-mono);color:var(--cnp-ink);padding:12px 12px 30px;}
.cnp-sec{font-size:.58rem;letter-spacing:.22em;color:var(--cnp-dim-2);text-transform:uppercase;
  margin:20px 2px 9px;padding-bottom:5px;border-bottom:1px solid var(--cnp-line);}
.cnp-note{color:var(--cnp-dim-2);font-size:.72rem;padding:14px;text-align:center;line-height:1.6;}

/* ---- header: campaign level + tallies ---- */
.cnp-hdr{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));
  border:1px solid var(--cnp-line);border-radius:14px;padding:12px 14px;box-shadow:var(--cnp-shadow);}
.cnp-hdr-lv{display:flex;align-items:baseline;gap:7px;flex:1;min-width:130px;}
.cnp-hdr-lv b{font-size:2.4rem;font-weight:800;color:var(--cnp-gold);line-height:1;text-shadow:var(--cnp-glow-leg);}
.cnp-hdr-badge{font-size:.6rem;letter-spacing:.1em;color:var(--cnp-dim-2);}
.cnp-hdr-sub{font-size:.5rem;letter-spacing:.18em;color:var(--cnp-dim-2);align-self:center;text-transform:uppercase;}
.cnp-hdr-stats{display:flex;gap:8px;}
.cnp-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;
  background:rgba(11,20,32,.5);border:1px solid var(--cnp-line);border-radius:10px;padding:6px 10px;}
.cnp-stat b{font-size:.9rem;color:var(--cnp-cyan);}
.cnp-stat span{font-size:.46rem;letter-spacing:.14em;color:var(--cnp-dim-2);margin-top:2px;}
.cnp-stat i{font-size:.56rem;color:var(--cnp-jade);font-style:normal;margin-top:2px;}

/* ---- zone bars ---- */
.cnp-zones{display:flex;flex-direction:column;gap:8px;}
.cnp-zone{position:relative;background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));
  border:1px solid var(--cnp-line);border-radius:12px;padding:9px 11px;}
.cnp-z-top{display:flex;align-items:baseline;gap:6px;margin-bottom:7px;}
.cnp-z-icon{font-size:1rem;}
.cnp-z-name{font-weight:700;font-size:.8rem;letter-spacing:.05em;color:var(--cnp-ink);}
.cnp-z-sub{font-size:.5rem;letter-spacing:.14em;color:var(--cnp-dim-2);text-transform:uppercase;flex:1;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cnp-z-lv{font-size:.6rem;letter-spacing:.08em;color:var(--cnp-gold);white-space:nowrap;font-weight:700;}
.cnp-z-lv b{font-size:.86rem;}
.cnp-bar{position:relative;height:11px;border-radius:6px;background:#0a121e;border:1px solid var(--cnp-line);
  overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5);}
.cnp-bar i{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--cnp-jade),var(--cnp-cyan));
  box-shadow:0 0 10px rgba(95,230,212,.6);transition:width .7s cubic-bezier(.2,.9,.25,1);}
.cnp-zcomplete .cnp-bar i{background:linear-gradient(90deg,var(--cnp-leg),#ffe6a0);box-shadow:var(--cnp-glow-leg);}
.cnp-z-bot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.58rem;color:var(--cnp-dim);}
.cnp-z-count b{color:var(--cnp-cyan);}
.cnp-z-legs{color:var(--cnp-gold);}
.cnp-z-pct{color:var(--cnp-dim-2);}
.cnp-zcomplete::after{content:"★ CLEARED";position:absolute;top:9px;right:11px;font-size:.48rem;
  letter-spacing:.16em;color:var(--cnp-leg);text-shadow:var(--cnp-glow-leg);}

/* ---- trophy meta ring ---- */
.cnp-trophy-meta{display:flex;align-items:center;gap:14px;padding:10px 12px;margin-bottom:10px;
  background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));border:1px solid var(--cnp-line);border-radius:12px;}
.cnp-tm-ring{--p:0%;flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--cnp-gold) var(--p),rgba(255,255,255,.07) 0);}
.cnp-tm-ring span{width:50px;height:50px;border-radius:50%;background:var(--cnp-void);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:1.05rem;font-weight:800;color:var(--cnp-gold);}
.cnp-tm-ring span i{font-size:.55rem;color:var(--cnp-dim-2);font-style:normal;}
.cnp-tm-txt{display:flex;flex-direction:column;gap:3px;}
.cnp-tm-txt b{font-size:.8rem;color:var(--cnp-ink);}
.cnp-tm-txt span{font-size:.6rem;color:var(--cnp-dim);line-height:1.4;}

/* ---- trophy grid ---- */
.cnp-trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.cnp-trophy{position:relative;background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));
  border:1px solid var(--cnp-line);border-radius:12px;padding:11px 10px 9px;text-align:center;overflow:hidden;
  transition:transform .15s,border-color .2s,box-shadow .2s;}
.cnp-trophy.cnp-locked{opacity:.62;filter:grayscale(.5);}
.cnp-trophy.cnp-got{border-color:var(--tc,var(--cnp-gold));box-shadow:0 0 0 1px var(--tc,var(--cnp-gold)),0 0 14px -2px var(--tc,var(--cnp-gold));}
.cnp-trophy.cnp-t-bronze{--tc:#d0925a;}
.cnp-trophy.cnp-t-silver{--tc:#c4d3e2;}
.cnp-trophy.cnp-t-gold{--tc:#f2c14e;}
.cnp-trophy.cnp-t-platinum{--tc:#9fe4ff;}
.cnp-tr-ic{font-size:1.9rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.cnp-trophy.cnp-got .cnp-tr-ic{filter:drop-shadow(0 0 8px var(--tc));}
.cnp-tr-name{font-size:.68rem;font-weight:700;color:var(--cnp-ink);margin:6px 0 3px;line-height:1.2;}
.cnp-tr-desc{font-size:.55rem;color:var(--cnp-dim);line-height:1.35;min-height:2.4em;}
.cnp-tr-tier{margin-top:6px;font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tc,var(--cnp-dim-2));}
.cnp-trophy.cnp-got::before{content:"";position:absolute;inset:-40% -40% auto auto;width:80%;height:80%;
  background:radial-gradient(circle,var(--tc) 0,transparent 62%);opacity:.14;pointer-events:none;}
@keyframes cnp-pop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.cnp-trophy.cnp-pop{animation:cnp-pop .55s cubic-bezier(.2,1.4,.4,1);}

/* ---- golden-week pre-book (boss) ---- */
.cnp-prebook{display:flex;flex-direction:column;gap:7px;}
.cnp-pb-head{background:linear-gradient(180deg,#1a0f14,#120a0e);border:1px solid #3a1a20;border-top:3px solid var(--cnp-boss);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.cnp-pb-head.cnp-pb-won{border-top-color:var(--cnp-jade);}
.cnp-pb-tag{font-size:.5rem;letter-spacing:.2em;color:var(--cnp-boss);font-weight:700;}
.cnp-pb-head.cnp-pb-won .cnp-pb-tag{color:var(--cnp-jade);}
.cnp-pb-name{font-size:1rem;font-weight:800;color:var(--cnp-ink);}
.cnp-pb-hp{font-size:.62rem;color:var(--cnp-dim);}
.cnp-pb-row{display:flex;align-items:flex-start;gap:9px;background:var(--cnp-panel);border:1px solid var(--cnp-line);
  border-radius:11px;padding:9px 11px;cursor:pointer;transition:border-color .2s,background .2s;}
.cnp-pb-row.cnp-on{border-color:var(--cnp-jade);background:linear-gradient(180deg,rgba(143,224,176,.08),var(--cnp-panel));}
.cnp-pb-row input{margin-top:2px;width:17px;height:17px;accent-color:var(--cnp-jade);flex:0 0 auto;}
.cnp-pb-emoji{font-size:1.15rem;flex:0 0 auto;}
.cnp-pb-txt{display:flex;flex-direction:column;gap:2px;}
.cnp-pb-txt b{font-size:.72rem;color:var(--cnp-ink);}
.cnp-pb-txt i{font-size:.58rem;color:var(--cnp-dim);font-style:normal;line-height:1.4;}

/* ---- gates row ---- */
.cnp-gates{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.cnp-gate{display:inline-flex;align-items:center;gap:5px;font-size:.56rem;letter-spacing:.04em;
  padding:.34rem .6rem;border-radius:20px;border:1px solid var(--cnp-line);background:var(--cnp-panel-2);}
.cnp-gate i{font-style:normal;font-weight:700;}
.cnp-gate.cnp-g-on{border-color:var(--cnp-jade);color:var(--cnp-jade);box-shadow:0 0 10px -3px var(--cnp-jade);}
.cnp-gate.cnp-g-on i{color:var(--cnp-jade);}
.cnp-gate.cnp-g-off{color:var(--cnp-dim-2);}

/* ---- inventory ---- */
.cnp-inv{display:flex;flex-direction:column;gap:12px;}
.cnp-inv-group{}
.cnp-inv-gh{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;letter-spacing:.06em;
  color:var(--cnp-dim);margin-bottom:6px;padding:0 2px;}
.cnp-inv-gh i{color:var(--cnp-cyan);font-style:normal;}
.cnp-inv-list{display:flex;flex-direction:column;gap:6px;}
.cnp-inv-item{display:flex;align-items:flex-start;gap:9px;background:var(--cnp-panel);border:1px solid var(--cnp-line);
  border-radius:11px;padding:8px 11px;cursor:pointer;transition:border-color .2s,background .2s;}
.cnp-inv-item.cnp-on{border-color:var(--cnp-cyan);background:linear-gradient(180deg,rgba(95,230,212,.07),var(--cnp-panel));}
.cnp-inv-item.cnp-pre{border-left:3px solid var(--cnp-lotus);}
.cnp-inv-item input{margin-top:2px;width:17px;height:17px;accent-color:var(--cnp-cyan);flex:0 0 auto;}
.cnp-inv-emoji{font-size:1.1rem;flex:0 0 auto;}
.cnp-inv-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cnp-inv-txt b{font-size:.7rem;color:var(--cnp-ink);font-weight:700;line-height:1.3;}
.cnp-inv-txt i{font-size:.56rem;color:var(--cnp-dim);font-style:normal;line-height:1.4;}
.cnp-inv-key{display:inline-block;font-size:.44rem;letter-spacing:.12em;color:var(--cnp-abyss);
  background:var(--cnp-cyan);padding:.05rem .3rem;border-radius:4px;vertical-align:middle;font-weight:700;}
.cnp-inv-pre{display:inline-block;font-size:.46rem;letter-spacing:.06em;color:var(--cnp-lotus);}

/* ---- readiness (walkthrough gating) ---- */
.cnp-readiness{display:flex;flex-direction:column;gap:6px;}
.cnp-rd-banner{font-size:.66rem;line-height:1.5;padding:10px 12px;border-radius:11px;border:1px solid var(--cnp-line);
  background:var(--cnp-panel);}
.cnp-rd-banner.cnp-g-on{border-color:var(--cnp-jade);color:var(--cnp-jade);}
.cnp-rd-banner.cnp-g-off{border-color:var(--cnp-boss);color:var(--cnp-lotus);}
.cnp-rd-row{display:flex;align-items:flex-start;gap:9px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--cnp-line);background:var(--cnp-panel);}
.cnp-rd-row.cnp-locked{opacity:.72;}
.cnp-rd-row.cnp-unlocked{border-color:var(--cnp-jade);}
.cnp-rd-ic{font-size:.9rem;flex:0 0 auto;}
.cnp-rd-txt{display:flex;flex-direction:column;gap:1px;}
.cnp-rd-txt b{font-size:.66rem;color:var(--cnp-ink);}
.cnp-rd-txt i{font-size:.54rem;color:var(--cnp-dim-2);font-style:normal;}
.cnp-rd-row.cnp-unlocked .cnp-rd-ic{color:var(--cnp-jade);}

/* ---- fallback FAB + overlay (only when no inline mount) ---- */
.cnp-fab{position:fixed;right:14px;bottom:calc(var(--app-nav-h,60px) + env(safe-area-inset-bottom,0px) + 14px);
  z-index:9098;width:54px;height:54px;border-radius:50%;border:2px solid var(--cnp-gold);cursor:pointer;
  background:radial-gradient(120% 120% at 50% 30%,#20304a,#0c1524);font-size:1.5rem;font-family:var(--cnp-mono);
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 14px rgba(242,193,78,.22);}
.cnp-fab:active{transform:scale(.94);}
.cnp-fab::after{content:attr(data-badge);position:absolute;top:-6px;right:-6px;font-size:.46rem;letter-spacing:.02em;
  background:var(--cnp-gold);color:var(--cnp-abyss);font-weight:700;padding:.1rem .32rem;border-radius:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);}
.cnp-overlay{position:fixed;inset:0;z-index:9200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,6,12,.72);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.cnp-overlay.cnp-open{opacity:1;pointer-events:auto;}
.cnp-sheet{width:min(820px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));border:1px solid var(--cnp-line);
  border-top:3px solid var(--cnp-gold);border-radius:16px 16px 0 0;box-shadow:var(--cnp-shadow);
  transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.9,.25,1);}
.cnp-overlay.cnp-open .cnp-sheet{transform:translateY(0);}
.cnp-sheet-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--cnp-line);position:sticky;top:0;background:rgba(11,20,32,.9);backdrop-filter:blur(6px);
  border-radius:16px 16px 0 0;}
.cnp-sheet-title{font-size:.68rem;letter-spacing:.18em;color:var(--cnp-gold);font-weight:700;}
.cnp-sheet-x{cursor:pointer;font-family:var(--cnp-mono);font-size:.8rem;color:var(--cnp-dim);
  background:var(--cnp-panel-2);border:1px solid var(--cnp-line);border-radius:8px;padding:.2rem .5rem;}
.cnp-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.cnp-sheet-body.cnp-root{padding-top:2px;}

/* ---- trophy toasts ---- */
.cnp-toasts{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:9600;display:flex;flex-direction:column;
  gap:8px;pointer-events:none;width:min(360px,92vw);}
.cnp-toast{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--cnp-panel),var(--cnp-void));
  border:1px solid var(--cnp-gold);border-radius:12px;padding:9px 13px;box-shadow:var(--cnp-shadow),var(--cnp-glow-leg);
  opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .35s;}
.cnp-toast.cnp-in{opacity:1;transform:none;}
.cnp-toast.cnp-t-platinum{border-color:#9fe4ff;}
.cnp-toast.cnp-t-silver{border-color:#c4d3e2;}
.cnp-toast.cnp-t-bronze{border-color:#d0925a;}
.cnp-toast-ic{font-size:1.6rem;}
.cnp-toast-body{display:flex;flex-direction:column;}
.cnp-toast-body b{font-size:.5rem;letter-spacing:.2em;color:var(--cnp-gold);}
.cnp-toast-body span{font-size:.74rem;color:var(--cnp-ink);font-weight:700;}

@media(min-width:520px){
  .cnp-trophies{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
}
@media(prefers-reduced-motion:reduce){
  .cnp-bar i,.cnp-overlay,.cnp-sheet,.cnp-toast,.cnp-trophy{transition:none!important;}
  .cnp-trophy.cnp-pop{animation:none!important;}
}