/* 阿萨拉牌盒收集 · 进度条 + 格子 + 缺牌统计（基础样式沿用 craft.css） */
main{max-width:1240px;margin:0 auto;padding:14px 12px 0}

/* 进度条 */
.cbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cnum{font-size:15px;font-weight:800;color:#8fa3b8;flex:none;font-variant-numeric:tabular-nums}
.cnum b{font-size:20px;color:#ffd98a}
.cnum span{font-size:12px;color:#6b7d92}
.cnum i{font-style:normal}
.cprog{flex:1;height:13px;border-radius:8px;background:#131b25;border:1px solid #26313f;overflow:hidden}
.cprog i{display:block;height:100%;width:0;border-radius:7px;
  background:linear-gradient(90deg,#ffb020,#ffd98a);box-shadow:0 0 10px rgba(255,176,32,.35);
  transition:width .25s ease}
.cpct{flex:none;font-size:12px;font-weight:800;color:#ffd98a;min-width:42px;text-align:right;
  font-variant-numeric:tabular-nums}

/* 分组与格子 */
.cg{margin-bottom:13px}
.cgh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cgh b{font-size:13px;font-weight:800;color:#dbe6f2}
.cgh em{font-style:normal;font-size:11px;color:#7d8fa4;font-variant-numeric:tabular-nums}
/* 宽屏把 15 组排成两列，别在右边留一大片空白；手机/窄屏单列 */
#grid{display:grid;grid-template-columns:1fr;gap:10px 14px;align-items:start}
@media(min-width:900px){#grid{grid-template-columns:1fr 1fr}}
.cgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.cc{position:relative;border:1px solid #26313f;border-radius:10px;background:rgba(18,24,32,.9);
  padding:6px 4px 5px;text-align:center;cursor:pointer;overflow:hidden;transition:border-color .12s,background .12s}
.cc:hover{border-color:#3a4a5e}
.cc img{display:block;width:100%;height:86px;object-fit:contain;
  filter:grayscale(1) brightness(.5);opacity:.45;transition:opacity .12s,filter .12s}
.cc.on{border-color:#ffb020;background:rgba(255,176,32,.10)}
.cc.on img{filter:none;opacity:1}
.cc .cl{display:block;margin-top:2px;font-size:10.5px;color:#7d8fa4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc.on .cl{color:#ffd98a}
.cc .ck{position:absolute;top:3px;right:5px;font-style:normal;font-size:11px;font-weight:900;
  color:#0b0f14;background:#ffb020;border-radius:50%;width:15px;height:15px;line-height:15px;
  display:none;text-align:center}
.cc.on .ck{display:block}

/* 缺牌统计 */
.miss{margin:16px 0 10px;border:1px solid #1e2b39;border-radius:12px;background:rgba(12,18,24,.7);overflow:hidden}
.mh{padding:9px 12px;font-size:12.5px;font-weight:800;color:#dbe6f2;border-bottom:1px solid #1b2532;background:rgba(255,176,32,.06)}
.mh b{color:#ffd98a}
.ms{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #16202b;font-size:12px}
.ms:last-child{border-bottom:0}
.ms.done{opacity:.65}
.msp{flex:none;min-width:44px;text-align:center;padding:2px 6px;border-radius:6px;
  font-size:11px;font-weight:800;border:1px solid #26313f;background:#151d27;color:#cbd8e6}
.msp.sp-红桃,.msp.sp-方片{color:#ff9a9a;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.10)}
.msp.sp-王牌,.msp.sp-牌盒{color:#ffd98a;border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.10)}
.msn{flex:none;font-size:11.5px;font-weight:800;color:#ffb020;min-width:56px}
.ms.done .msn{color:#5ce08a}
.msl{flex:1;font-size:11.5px;color:#8fa3b8;line-height:1.6;word-break:break-all}

.foot{margin:18px 0 8px;font-size:10.5px;color:#5b6b7d;line-height:1.7}

@media(max-width:820px){
  .cgs{gap:5px}
  .cc{padding:5px 3px 4px;border-radius:8px}
  .cc img{height:62px}
  .ms{flex-wrap:wrap}
  .msl{flex:1 0 100%;padding-left:2px}
}