/* ═══════════ 奶蛙集邮册 · Milk Frog Philately ═══════════ */
:root{
  --ink:#23201a;
  --ink-soft:#57503f;
  --paper:#f3efe4;
  --paper-2:#eae3d2;
  --desk:#efe9d9;
  --gold:#a8894f;
  --gold-soft:#c9b183;
  --line:rgba(35,32,26,.14);
  --serif:"Cormorant Garamond","Noto Serif SC","Songti SC",Georgia,serif;
  --sans:"Jost","Noto Sans SC","PingFang SC",sans-serif;
  --ssr:#c9a227; --sr:#9c6bb5; --r:#4f7fd4; --c:#7a8b7a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%}
body{
  font-family:var(--sans);
  background:var(--desk);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{-webkit-user-drag:none}
[hidden]{display:none!important}

/* 纸张颗粒 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.5;
  background-image:radial-gradient(rgba(60,50,25,.07) .6px,transparent .7px);
  background-size:4px 4px;
}

/* ── 顶栏 ── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.65);
  font-size:16px;line-height:1;backdrop-filter:blur(6px);transition:transform .25s;
}
.icon-btn:hover{transform:scale(1.07)}
.icon-btn.off{opacity:.4}
.brand{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}
.brand-sub{font-size:9px;letter-spacing:.4em;text-indent:.4em;color:var(--gold);font-weight:500}
.brand-title{font-family:var(--serif);font-size:clamp(20px,3vw,27px);font-weight:600;letter-spacing:.14em;text-indent:.14em}
.stats{display:flex;gap:8px}
.stat-chip{
  display:flex;align-items:baseline;gap:5px;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(6px);
}
.stat-num{font-family:var(--serif);font-weight:600;font-size:16px}
.stat-label{font-size:10px;color:var(--ink-soft)}

/* ── 桌面舞台 ── */
.stage{position:fixed;inset:0}
.stage-desk{display:grid;grid-template-columns:minmax(250px,330px) 1fr;gap:0}
.desk-left{
  display:flex;flex-direction:column;gap:18px;padding:88px 26px 20px;
  border-right:1px solid var(--line);background:linear-gradient(180deg,#f7f3e9,#f1ebdb);
  z-index:2;overflow-y:auto;
}
.plate-kicker{font-size:9px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);font-weight:500}
.plate-title{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.25;margin-top:8px;letter-spacing:.03em}
.plate-text{font-size:13px;line-height:1.9;color:var(--ink-soft);margin-top:12px;text-align:justify}
.toolbar{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;letter-spacing:.12em;text-indent:.12em;
  padding:11px 18px;border-radius:999px;transition:transform .25s,box-shadow .25s,background .25s;
}
.btn:active{transform:scale(.96)}
.btn-primary{
  background:linear-gradient(135deg,#2b2417,#4a3d24);color:#f7edd2;
  box-shadow:0 10px 22px rgba(50,40,15,.3);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink);
}
.btn-ghost:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
.tool-row{display:flex;gap:8px}
.tool-row .btn{padding:9px 14px;font-size:12px}
.issue-note{
  font-size:11px;line-height:1.7;color:var(--ink-soft);
  border:1px dashed rgba(168,137,79,.5);border-radius:10px;padding:9px 12px;
  background:rgba(255,255,255,.35);
}
.desk-table{
  position:relative;overflow:hidden;background:
    radial-gradient(90% 70% at 70% 20%,rgba(255,252,240,.85),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 44px,rgba(120,100,60,.05) 44px 45px),
    var(--desk);
}
.desk-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;color:var(--ink-soft);
  text-align:center;font-size:13px;line-height:1.9;letter-spacing:.06em;
}
.empty-stamp{
  width:150px;height:210px;border-radius:6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.25)),
    repeating-linear-gradient(45deg,rgba(168,137,79,.12) 0 2px,transparent 2px 8px);
  box-shadow:0 18px 30px rgba(70,55,25,.14);
  -webkit-mask:url("assets/perf-mask.png") center/100% 100% no-repeat;mask:url("assets/perf-mask.png") center/100% 100% no-repeat;
}

/* ── 邮票 ── */
.stamp{
  position:absolute;width:var(--sw,150px);aspect-ratio:5/7;
  cursor:grab;z-index:1;
  -webkit-mask:url("assets/perf-mask.png") center/100% 100% no-repeat;mask:url("assets/perf-mask.png") center/100% 100% no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.stamp.dragging{cursor:grabbing;z-index:5;transition:none;box-shadow:0 30px 60px rgba(40,30,10,.35)}
.stamp:hover{z-index:4;box-shadow:0 18px 34px rgba(50,40,15,.3)}
.stamp-inner{
  position:absolute;inset:4px;border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 5px rgba(50,40,15,.18),inset 0 0 0 1px rgba(255,255,255,.35);
  background:#fff;
}
.stamp-art{position:relative;flex:1;overflow:hidden;background:#efe9db}
.stamp-art img{width:100%;height:100%;object-fit:cover;display:block}
/* 邮票底部信息条 */
.stamp-band{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:5px 8px 6px;background:linear-gradient(180deg,#fffef9,#f7f0df);
  border-top:1px solid rgba(35,32,26,.08);font-size:8.5px;letter-spacing:.05em;
}
.stamp-band .sb-year{font-family:var(--serif);font-weight:600}
.stamp-band .sb-fv{font-family:var(--serif);font-weight:600;font-size:11px;color:#8a3a1e;white-space:nowrap}
.stamp-band .sb-country{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 右上稀有徽 */
.stamp-rarity{
  position:absolute;top:5px;right:5px;z-index:2;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:9px;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.6);
}
/* 国名水印行 */
.stamp-country{
  position:absolute;top:5px;left:0;right:0;z-index:2;text-align:center;
  font-family:var(--serif);font-size:8px;letter-spacing:.34em;text-indent:.34em;
  color:rgba(255,255,255,.95);text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;
}
.stamp-country.dark{color:rgba(40,32,10,.85);text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));padding-bottom:6px}
/* 面值角标 */
.stamp-fv{
  position:absolute;left:6px;bottom:34px;z-index:2;
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(11px,.9vw,15px);color:#7a2e12;
  text-shadow:0 0 3px rgba(255,255,255,.9);pointer-events:none;
}
/* 邮票内不再描框，画面直接到齿孔白纸边 */
/* 邮戳装饰 */
.postmark{
  position:absolute;z-index:4;pointer-events:none;opacity:.5;
  width:62px;height:62px;right:12px;top:12px;color:#5a5244;
  transform:rotate(-16deg);
}
/* 闪票 */
.stamp.foil .stamp-inner::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(190,225,255,.5) 45%,rgba(255,255,255,.85) 50%,rgba(255,220,120,.5) 55%,transparent 70%);
  background-size:260% 100%;animation:foilshine 2.6s linear infinite;
}
@keyframes foilshine{from{background-position:120% 0}to{background-position:-130% 0}}
.stamp.newbie{animation:stampin .6s cubic-bezier(.2,1.4,.3,1) backwards}
@keyframes stampin{0%{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(1.6);opacity:0}100%{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(1);opacity:1}}
.stamp.leaving{animation:stampout .4s ease forwards}
@keyframes stampout{to{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(.2);opacity:0}}

/* 拆包时的浮层邮票（等宽摆放） */
.stamp-row{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:clamp(2px,1.4vw,18px);
}
.row-stamp{position:relative;width:var(--sw,clamp(130px,17vh,190px));aspect-ratio:5/7;perspective:1000px;opacity:0;
  -webkit-mask:url("assets/perf-mask.png") center/100% 100% no-repeat;mask:url("assets/perf-mask.png") center/100% 100% no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.row-stamp .stamp-inner{inset:0}
.cards-row.deal .row-stamp, .stamp-row.deal .row-stamp{animation:rowfly .8s cubic-bezier(.2,.9,.25,1.05) forwards;animation-delay:var(--d,0s)}
@keyframes rowfly{
  0%{opacity:0;transform:translateY(26vh) scale(.3) rotate(var(--r,0deg))}
  60%{opacity:1;transform:translateY(-2vh) scale(1.06) rotate(var(--r,0deg))}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg))}
}
.row-stamp .stamp-inner{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1);cursor:pointer}
.row-stamp.revealed .stamp-inner{transform:rotateY(180deg)}
.row-stamp .sf-back{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;
  background:linear-gradient(160deg,#faf6ea,#efe7d2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px;transform:rotateY(180deg);overflow:hidden;
}
.row-stamp .sf-front{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden;
}
.row-stamp .sf-front img{width:100%;height:100%;object-fit:cover}
.sf-back .bk-name{font-family:var(--serif);font-size:clamp(12px,1.2vw,16px);font-weight:600;text-align:center;line-height:1.4}
.sf-back .bk-meta{font-size:9px;letter-spacing:.14em;color:var(--ink-soft);text-align:center}
.sf-back .bk-no{font-family:var(--serif);font-size:10px;color:var(--gold)}
.row-stamp.hit::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,240,180,.9),transparent 70%);
  animation:hitpulse 1.4s ease-in-out infinite;
}
@keyframes hitpulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}

/* 拆包仪式场景 */
.pack-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.pk-body{
  width:clamp(220px,30vh,290px);aspect-ratio:2/3;object-fit:cover;border-radius:10px;
  filter:drop-shadow(0 26px 38px rgba(60,45,15,.4));
  transition:transform .5s;
}
.tear-hint{
  font-size:12px;letter-spacing:.3em;text-indent:.3em;color:#6b5b33;white-space:nowrap;
  background:rgba(255,255,255,.8);padding:7px 16px;border-radius:999px;
  backdrop-filter:blur(4px);animation:breathe 2.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.pack-stage.burst .pk-body{animation:packburst .6s cubic-bezier(.34,1.3,.4,1) forwards}
@keyframes packburst{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(0);opacity:0}}
.pack-glow{position:absolute;inset:-10%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,246,214,.95),rgba(255,246,214,0) 66%)}
.pack-stage.burst .pack-glow{opacity:1;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
.pack-name{
  font-family:var(--serif);font-size:clamp(13px,1.6vw,17px);letter-spacing:.2em;color:var(--ink);
  background:rgba(255,255,255,.75);padding:6px 16px;border-radius:999px;
}
.pk-close{
  position:absolute;top:0;right:-46px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.8);font-size:18px;line-height:1;
}
.reveal-actions{position:absolute;bottom:5vh;z-index:30;display:flex;gap:12px}

/* ── 浮层通用 ── */
.overlay{
  position:fixed;inset:0;z-index:80;display:flex;
  align-items:center;justify-content:center;
  background:rgba(40,32,15,.5);backdrop-filter:blur(10px);
  animation:fadein .35s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ── 详情 ── */
.detail-stage{
  position:relative;display:grid;grid-template-columns:minmax(240px,330px) minmax(320px,560px);
  gap:clamp(20px,3vw,46px);align-items:start;
  background:linear-gradient(180deg,#fdfaf2,#f3ecda);
  border:1px solid rgba(168,137,79,.4);border-radius:22px;
  padding:34px 38px;box-shadow:0 40px 90px rgba(30,20,5,.5);
  max-height:92vh;overflow-y:auto;
  animation:rise .45s cubic-bezier(.22,1,.36,1);
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.detail-close{
  position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.75);font-size:19px;line-height:1;z-index:5;
}
.stamp-big-wrap{
  position:sticky;top:0;align-self:start;
  width:100%;max-width:310px;margin:0 auto;
}
.stamp-big{position:relative;width:100%;max-width:310px;margin:0 auto;aspect-ratio:5/7}
.loupe-note{font-size:10px;letter-spacing:.14em;color:var(--gold);margin-top:6px;text-align:center;opacity:.9}
.loupe{
  position:fixed;width:168px;height:168px;border-radius:50%;overflow:hidden;
  pointer-events:none;z-index:130;display:none;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1.5px rgba(120,90,30,.5),0 14px 34px rgba(30,20,5,.4);
  background:#fff;
}
.loupe img{position:absolute;left:0;top:0;max-width:none;width:auto;height:auto;transform-origin:0 0;image-rendering:auto}
.archive .arch-code{font-family:var(--serif);font-size:11px;letter-spacing:.14em;color:var(--gold)}
.arch-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arch-rarity{
  font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.06em;color:#fff;
  padding:4px 10px;border-radius:99px;
}
.arch-title{font-family:var(--serif);font-size:clamp(22px,3vw,30px);font-weight:600;margin-top:6px;letter-spacing:.03em}
.arch-en{font-size:11.5px;font-style:italic;letter-spacing:.05em;color:var(--ink-soft);margin-top:2px}
.arch-table{
  margin-top:14px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;row-gap:5px;column-gap:14px;
  font-size:12px;
}
.arch-table dt{color:var(--gold);font-family:var(--serif);letter-spacing:.1em;white-space:nowrap;padding-top:5px}
.arch-table dd{color:var(--ink);padding-top:5px}
.arch-story{margin-top:14px;font-size:13px;line-height:1.9;color:#3d3628;text-align:justify}
.arch-compare{margin-top:18px}
.compare-head{font-size:10px;letter-spacing:.2em;color:var(--gold);margin-bottom:7px}
.compare-box{position:relative;border-radius:10px;overflow:hidden;background:#ddd;aspect-ratio:4/3;box-shadow:inset 0 0 0 1px rgba(168,137,79,.3)}
.compare-frog,.compare-orig{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-orig{clip-path:inset(0 0 0 50%)}
.compare-label{position:absolute;bottom:7px;font-size:9.5px;letter-spacing:.1em;background:rgba(20,16,8,.55);color:#fff;padding:3px 8px;border-radius:99px;z-index:3}
.label-l{left:7px}.label-r{right:7px}
.compare-range{position:absolute;left:0;right:0;bottom:-2px;width:100%;z-index:4;-webkit-appearance:none;appearance:none;background:transparent;height:18px;cursor:ew-resize}
.compare-range::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:100%;border-radius:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}

/* ── 邮册浮层 ── */
.album-panel{
  width:min(96vw,1180px);max-height:90vh;overflow-y:auto;
  background:linear-gradient(180deg,#fdfaf2,#f2ebd8);
  border:1px solid rgba(168,137,79,.4);border-radius:22px;
  padding:26px 30px 34px;box-shadow:0 40px 90px rgba(30,20,5,.5);
  animation:rise .45s cubic-bezier(.22,1,.36,1);
}
.album-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.album-title{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.06em}
.album-sets{display:flex;flex-direction:column;gap:26px}
.set-block .set-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.set-block .set-name{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.1em}
.set-block .set-count{font-size:11px;color:var(--ink-soft);letter-spacing:.1em}
.set-block .set-count b{font-family:var(--serif);color:var(--ink);font-size:14px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.album-mini{position:relative;aspect-ratio:5/7;cursor:pointer;border-radius:4px;overflow:hidden;
  box-shadow:0 6px 14px rgba(50,40,15,.16);transition:transform .25s;
  -webkit-mask:url("assets/perf-mask.png") center/100% 100% no-repeat;mask:url("assets/perf-mask.png") center/100% 100% no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.album-mini:hover{transform:translateY(-4px)}
.album-mini img{width:100%;height:100%;object-fit:cover;display:block}
.album-mini.locked{opacity:.8;box-shadow:none;cursor:default}
.album-mini.locked .mini-bg{position:absolute;inset:0;background:
  linear-gradient(160deg,#3a3325,#241f16);display:flex;align-items:center;justify-content:center}
.album-mini.locked .mini-bg span{font-family:var(--serif);font-size:26px;color:#8a7c5f;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.album-mini .mini-name{position:absolute;left:0;right:0;bottom:0;padding:10px 8px 5px;font-size:8.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-mini .mini-foil{position:absolute;top:4px;left:4px;width:8px;height:8px;border-radius:50%;z-index:2;
  background:conic-gradient(#f8d364,#8fd8ff,#f8a6d8,#a5f0c0,#f8d364)}
.album-mini .mini-dup{position:absolute;top:4px;right:4px;z-index:2;font-size:8px;color:#fff;
  background:rgba(0,0,0,.5);padding:1px 5px;border-radius:99px}

/* 集合完成提示 */
.set-done{color:#7a8b7a}

/* ── 响应式 ── */
@media (max-width:900px){
  .stage-desk{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .desk-left{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:70px 16px 12px;border-right:none;border-bottom:1px solid var(--line)}
  .plate{display:none}
  .toolbar{flex-direction:row;align-items:center}
  .issue-note{flex:1;min-width:150px;font-size:10px}
  .detail-stage{grid-template-columns:1fr;padding:24px 20px;gap:18px}
  .stamp-big{max-width:220px}
  .stamp-row{flex-direction:column;gap:0}
  .row-stamp{width:min(56vw,190px)}
}
@media (max-width:560px){
  .brand-sub{font-size:7px;letter-spacing:.24em}
  .brand-title{font-size:17px}
  .stat-chip{padding:5px 9px}
  .stat-num{font-size:13px}
  .stat-label{font-size:8.5px}
  .row-stamp{width:min(48vw,168px)}
  .reveal-actions{bottom:2.5vh}
  .album-grid,.set-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}