/* ============================================================
   解压捏捏乐 · 黑金高奢
   主色 #c9a769 · 背景 #15130e · 细金线 · 克制光泽 · 衬线排版
   ============================================================ */
:root{
  --c-primary:#c9a769;
  --c-secondary:#b9a45b;
  --c-accent:#a5d96d;
  --c-bg:#15130e;
  --c-surface:#23201a;
  --c-text:#f2f0ee;
  --c-dim:#aea698;
  --c-stroke:#403a30;
  --r:6px;
  --serif:'Noto Serif SC','Songti SC',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;
  --gold:linear-gradient(135deg,#e6c98c 0%,#c9a769 45%,#b9a45b 72%,#a9883f 100%);
  --shadow:0 16px 44px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--c-text);
  background:
    radial-gradient(1100px 560px at 50% -8%,rgba(201,167,105,.12),transparent 60%),
    radial-gradient(700px 460px at 90% 112%,rgba(185,164,91,.07),transparent 60%),
    var(--c-bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(201,167,105,.016) 0 1px,transparent 1px 3px);
}
::selection{background:rgba(201,167,105,.32)}
button{font-family:var(--sans);touch-action:manipulation}

.app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding-bottom:calc(78px + env(safe-area-inset-bottom))}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(21,19,14,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-stroke)}
.topbar::after{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary) 28%,var(--c-primary) 72%,transparent);opacity:.5}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-seal{width:42px;height:42px;border:1px solid var(--c-primary);border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;color:var(--c-primary);
  background:linear-gradient(160deg,rgba(201,167,105,.2),rgba(201,167,105,.02));
  box-shadow:inset 0 0 16px rgba(201,167,105,.18),0 0 12px rgba(201,167,105,.12)}
.brand-title{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:3px;
  background:linear-gradient(105deg,#f2e2bd,var(--c-primary) 55%,#8f6f33);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{font-size:10px;letter-spacing:4px;color:var(--c-dim);margin-top:3px}
.stat{text-align:right}
.stat-num{font-family:var(--serif);font-size:26px;color:var(--c-primary);display:block;line-height:1;text-shadow:0 0 18px rgba(201,167,105,.4)}
.stat-num.pulse{animation:pulsePop .45s ease}
.stat-label{font-size:10px;letter-spacing:3px;color:var(--c-dim);margin-top:4px}
@keyframes pulsePop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- 视图 ---------- */
.content{flex:1;padding:0 16px 28px}
.view{display:none;padding-top:22px;animation:viewIn .45s ease both}
.view.is-active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view-head{margin-bottom:18px}
.kicker{font-size:10px;letter-spacing:6px;color:var(--c-secondary);display:block;margin-bottom:6px}
.serif-head{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:2px;
  background:linear-gradient(105deg,#f2e2bd,var(--c-primary) 55%,#8f6f33);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.view-desc{color:var(--c-dim);font-size:13px;margin-top:6px;letter-spacing:1px}

/* ---------- 首页舞台 ---------- */
.stage{position:relative;background:linear-gradient(180deg,rgba(201,167,105,.06),rgba(0,0,0,0) 46%),var(--c-surface);
  border:1px solid var(--c-stroke);border-radius:var(--r);padding:18px 18px 16px;text-align:center;overflow:hidden}
.stage::before{content:"";position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.65}
.stage::after{content:"";position:absolute;top:9px;left:9px;right:9px;bottom:9px;pointer-events:none;
  background:
    linear-gradient(var(--c-primary),var(--c-primary)) 0 0/14px 1px,
    linear-gradient(var(--c-primary),var(--c-primary)) 0 0/1px 14px,
    linear-gradient(var(--c-primary),var(--c-primary)) 100% 100%/14px 1px,
    linear-gradient(var(--c-primary),var(--c-primary)) 100% 100%/1px 14px;
  background-repeat:no-repeat;opacity:.5}
.stage-toy{position:relative;width:100%;max-width:300px;aspect-ratio:1/1;margin:4px auto 0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:50% 58%}
.stage-toy .toy-svg{width:86%;height:86%}
.stage-hint{font-family:var(--serif);color:var(--c-dim);letter-spacing:3px;font-size:12px;margin-top:2px}
.stage-dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--c-stroke);background:transparent;cursor:pointer;padding:0;transition:.25s}
.dot.is-on{background:var(--c-primary);border-color:var(--c-primary);box-shadow:0 0 10px rgba(201,167,105,.65);transform:scale(1.2)}

/* ---------- 玩具形变 ---------- */
@keyframes wobbleBall{0%,100%{transform:scale(1,.82)}25%{transform:scale(1.04,.77) rotate(.6deg)}50%{transform:scale(.97,.86)}75%{transform:scale(1.05,.79) rotate(-.6deg)}}
@keyframes wobbleClay{0%,100%{transform:scale(1.16,.78) rotate(0)}30%{transform:scale(1.21,.72) rotate(-1.2deg)}60%{transform:scale(1.12,.83) rotate(1deg)}}
@keyframes bounceBack{0%{transform:scale(1,.76)}45%{transform:scale(1.1,.9)}70%{transform:scale(.95,1.05)}100%{transform:scale(1)}}
@keyframes shakeX{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-7px) rotate(-3deg)}40%{transform:translateX(7px) rotate(3deg)}60%{transform:translateX(-5px) rotate(-2deg)}80%{transform:translateX(5px) rotate(2deg)}}
@keyframes rollDiceFx{0%{transform:rotate(0) scale(1)}35%{transform:rotate(26deg) scale(1.16)}65%{transform:rotate(-15deg) scale(.93)}100%{transform:rotate(0) scale(1)}}
.toy-ball.is-pressed{animation:wobbleBall .3s ease-in-out infinite}
.toy-clay.is-pressed{animation:wobbleClay .32s ease-in-out infinite}
.toy-noodles.is-pressed{animation:wobbleClay .3s ease-in-out infinite}
.toy-ball.is-releasing,.toy-clay.is-releasing,.toy-noodles.is-releasing{animation:bounceBack .5s cubic-bezier(.22,1.7,.36,1)}
.fx-shake{animation:shakeX .5s ease both}
.fx-roll{animation:rollDiceFx .62s cubic-bezier(.34,1.4,.5,1) both}
.bubble{transform-box:fill-box;transform-origin:center;transition:transform .16s ease,opacity .16s ease;cursor:pointer}
.bubble.popped{transform:scale(0);opacity:0}

/* ---------- 面板 / 按钮 / 进度 ---------- */
.panel{position:relative;background:linear-gradient(180deg,rgba(201,167,105,.05),rgba(0,0,0,0) 42%),var(--c-surface);
  border:1px solid var(--c-stroke);border-radius:var(--r);padding:16px;margin-top:16px}
.panel::before{content:"";position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.5}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel-title{font-family:var(--serif);font-size:16px;letter-spacing:1px}
.panel-extra{font-family:var(--serif);font-size:12px;color:var(--c-secondary);text-align:right}
.progress{height:6px;background:#2a261d;border:1px solid var(--c-stroke);border-radius:99px;overflow:hidden;margin:12px 0 14px;position:relative}
.progress-fill{height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .7s cubic-bezier(.22,1,.36,1);box-shadow:0 0 12px rgba(201,167,105,.55);position:relative;overflow:hidden}
.progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:sheen 2.6s ease infinite}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.btn{font-size:13px;letter-spacing:2px;color:var(--c-text);background:transparent;border:1px solid var(--c-stroke);border-radius:var(--r);padding:10px 16px;cursor:pointer;transition:.25s;width:100%}
.btn:hover{border-color:var(--c-primary);color:var(--c-primary);box-shadow:0 0 16px rgba(201,167,105,.2)}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);border-color:#e6c98c;color:#1a150b;font-weight:600}
.btn-gold:hover{color:#1a150b;box-shadow:0 0 24px rgba(201,167,105,.5)}

/* ---------- 玩具库 ---------- */
.toys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.toy-card{position:relative;background:linear-gradient(180deg,rgba(201,167,105,.05),rgba(0,0,0,0) 42%),var(--c-surface);
  border:1px solid var(--c-stroke);border-radius:var(--r);padding:14px;text-align:left;cursor:pointer;color:var(--c-text);
  transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.toy-card::before{content:"";position:absolute;top:0;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.45}
.toy-card:hover{transform:translateY(-3px);border-color:var(--c-primary);box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 18px rgba(201,167,105,.14)}
.toy-card:active{transform:translateY(0) scale(.98)}
.toy-card-visual{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.toy-card-visual .toy-svg{width:82%;height:82%}
.toy-card-name{font-family:var(--serif);font-size:16px;letter-spacing:1px;margin-top:8px}
.toy-card-en{font-size:10px;letter-spacing:3px;color:var(--c-dim);display:block;margin-top:2px}
.toy-card-count{display:block;font-size:11px;color:var(--c-secondary);margin-top:9px;letter-spacing:1px}
.toy-card.is-locked .toy-card-visual{filter:grayscale(.9) brightness(.5)}
.toy-card.is-locked::after{content:"✥";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--c-primary);text-shadow:0 0 18px rgba(201,167,105,.7);pointer-events:none}
.toy-card-lock{display:block;font-size:11px;color:var(--c-dim);margin-top:9px;letter-spacing:1px}

/* ---------- 任务中心 ---------- */
.tasks-list{margin-top:2px}
.task-card{position:relative;background:linear-gradient(180deg,rgba(201,167,105,.05),rgba(0,0,0,0) 42%),var(--c-surface);
  border:1px solid var(--c-stroke);border-radius:var(--r);padding:16px;display:flex;gap:14px;margin-bottom:14px;overflow:hidden}
.task-card::before{content:"";position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.45}
.task-icon{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--c-primary);border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--c-primary);background:rgba(201,167,105,.08)}
.task-body{flex:1;min-width:0}
.task-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.task-top h4{font-family:var(--serif);font-size:16px;letter-spacing:1px}
.task-metric{font-family:var(--serif);font-size:13px;color:var(--c-secondary);white-space:nowrap}
.task-desc{font-size:12px;color:var(--c-dim);margin:4px 0 0;letter-spacing:.5px}
.task-reward{font-size:12px;color:var(--c-secondary);margin-top:10px;letter-spacing:1px}
.task-card.is-done{border-color:rgba(165,217,109,.5)}
.task-card.is-done .task-icon{background:var(--c-accent);color:#14200a;border-color:var(--c-accent)}
.task-card.is-done .task-reward{color:var(--c-accent)}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:30;
  background:rgba(24,21,15,.94);backdrop-filter:blur(16px);border-top:1px solid var(--c-stroke);padding-bottom:env(safe-area-inset-bottom)}
.tabbar::before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.6}
.tabbar-inner{display:flex}
.tab{flex:1;background:none;border:0;color:var(--c-dim);padding:10px 0 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;transition:color .25s}
.tab-icon{display:flex;line-height:1}
.tab-label{font-size:11px;letter-spacing:2px}
.tab.is-active{color:var(--c-primary)}
.tab.is-active::after{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:34px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 12px rgba(201,167,105,.7)}
.tab-badge{position:absolute;top:5px;right:calc(50% - 26px);min-width:16px;height:16px;border-radius:8px;background:var(--c-accent);color:#14200a;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700}

/* ---------- 弹层 ---------- */
.studio,.unlock{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.unlock{z-index:60}
.studio[hidden],.unlock[hidden]{display:none}
.studio-mask,.unlock-mask{position:absolute;inset:0;background:rgba(10,9,6,.72);backdrop-filter:blur(6px)}
.studio-card{position:relative;width:100%;max-width:420px;background:var(--c-surface);border:1px solid var(--c-stroke);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);animation:popIn .35s cubic-bezier(.22,1.4,.36,1) both;text-align:center}
.studio-card::before{content:"";position:absolute;top:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.55}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:none}}
.studio-close{position:absolute;right:12px;top:12px;background:none;border:0;color:var(--c-dim);font-size:18px;cursor:pointer;padding:6px;transition:.25s;z-index:2;line-height:1}
.studio-close:hover{color:var(--c-primary);transform:rotate(90deg)}
.studio-head{position:relative;padding:6px 30px 14px;border-bottom:1px solid var(--c-stroke)}
.studio-head::after{content:"";position:absolute;left:26px;right:26px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);opacity:.55}
.studio-title{font-family:var(--serif);font-size:20px;letter-spacing:2px}
.studio-en{font-size:10px;letter-spacing:4px;color:var(--c-secondary);margin-top:3px}
.studio-toy{position:relative;width:100%;max-width:260px;aspect-ratio:1/1;margin:14px auto 8px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:50% 58%}
.studio-toy .toy-svg{width:88%;height:88%}
.studio-hint{font-family:var(--serif);color:var(--c-dim);letter-spacing:3px;font-size:12px}
.studio-counter{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-stroke)}
.counter-num{font-family:var(--serif);font-size:32px;color:var(--c-primary);display:block;text-shadow:0 0 20px rgba(201,167,105,.4)}
.counter-label{font-size:10px;letter-spacing:4px;color:var(--c-dim)}

.unlock-card{position:relative;width:100%;max-width:340px;background:linear-gradient(180deg,#2b261b,var(--c-surface));border:1px solid var(--c-primary);
  border-radius:var(--r);padding:34px 24px;box-shadow:0 0 44px rgba(201,167,105,.28),var(--shadow);animation:popIn .5s cubic-bezier(.22,1.4,.36,1) both;text-align:center}
.unlock-orn{font-size:34px;color:var(--c-primary);text-shadow:0 0 26px rgba(201,167,105,.85);animation:spinGlow 1.4s ease infinite;display:inline-block}
@keyframes spinGlow{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.16) rotate(14deg)}}
.unlock-title{font-family:var(--serif);font-size:22px;letter-spacing:4px;margin:12px 0 8px}
.unlock-text{color:var(--c-primary);font-family:var(--serif);letter-spacing:1px;font-size:15px;margin-bottom:22px}

/* ---------- 提示 / 飘字 ---------- */
.toast-wrap{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:80;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px;pointer-events:none}
.toast{background:rgba(24,21,15,.96);border:1px solid var(--c-primary);color:var(--c-text);border-radius:var(--r);padding:10px 16px;font-size:13px;letter-spacing:1px;
  box-shadow:0 10px 32px rgba(0,0,0,.55);animation:toastIn .35s cubic-bezier(.22,1.4,.36,1) both;max-width:92%}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.float-num{position:fixed;z-index:90;font-family:var(--serif);font-size:18px;color:var(--c-primary);text-shadow:0 0 14px rgba(201,167,105,.85);pointer-events:none;
  animation:floatUp .85s ease-out both}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-44px) scale(1.06)}}