/* ============================================================
   Fix & Sort · 手作工坊风(深木 / 黄铜 / 暖光 / 做旧)
   ============================================================ */
:root{
  --bg:#241b13; --bg2:#2e2318;
  --walnut:#33261a; --walnut2:#463528;
  --paper:#f4ead4; --paper2:#e9dcc0; --paper3:#d9c9a6;
  --ink:#3a2c1f; --ink2:#6b5942; --ink3:#a08a6a;
  --wood:#8a5a36; --woodD:#5c3d26; --woodL:#a8734a;
  --brass:#c9924a; --brassL:#e3b475; --brassD:#96622b;
  --teal:#4f7d76; --tealD:#3c615b;
  --red:#b0533a; --sage:#6d7f52;
  --gold:#d9a648;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:#171009;
  color:var(--ink);
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  overflow:hidden;
}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit;}
b{font-weight:700;}
[hidden]{display:none!important;}

/* ---------- SVG 美术尺寸系统 ---------- */
.art{display:inline-block;width:1em;height:1em;line-height:0;vertical-align:-0.14em;}
.art svg{width:100%;height:100%;display:block;}
.ic{width:0.95em;height:0.95em;}

#app{
  position:relative;
  width:100%;height:100dvh;max-width:520px;margin:0 auto;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 90px),
    linear-gradient(180deg,#2c2115 0%,#241b13 100%);
  overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.7);
}

/* ---------- 屏幕切换 ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;animation:scrIn .35s ease;}
@keyframes scrIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------- 按钮 ---------- */
.btn{
  border-radius:999px;font-weight:800;letter-spacing:.5px;
  padding:12px 22px;font-size:16px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 4px 0 #bfae8c, 0 8px 16px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #bfae8c;}
.btn .art{vertical-align:-0.16em;margin-right:2px;}
.btn-primary{
  background:linear-gradient(180deg,#c9924a,#96622b);color:#fff5e4;
  box-shadow:0 4px 0 #6e4a20, 0 10px 22px rgba(201,146,74,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.btn-primary:active{box-shadow:0 1px 0 #6e4a20;}
.btn-soft{background:var(--paper);}
.btn-big{font-size:20px;padding:16px 34px;}
.btn:disabled{opacity:.45;pointer-events:none;}

/* ---------- 顶栏(深胡桃木) ---------- */
.topbar{
  display:flex;align-items:center;gap:6px;
  padding:10px 10px 8px;flex-wrap:nowrap;
  background:linear-gradient(180deg,#3b2c1d,#33261a);
  border-bottom:2px solid #211810;
}
.chip{
  background:var(--walnut2);border-radius:999px;
  padding:7px 11px;font-size:14px;font-weight:700;white-space:nowrap;
  color:#f0e4c8;
  display:flex;align-items:center;gap:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.chip .art{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));}
.chip-lv{background:linear-gradient(180deg,var(--brass),var(--brassD));color:#2b1c0d;}
.chip-lv .art{filter:none;}
.icon-btn{
  width:38px;height:38px;border-radius:12px;background:var(--paper);font-size:19px;
  color:var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 2px 0 #bfae8c;
}
.icon-btn:active{transform:translateY(2px);}
.icon-btn .art{width:20px;height:20px;}
.lv-title-box{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:0 4px;}
.lv-title-box b{font-size:14px;color:#f0e4c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.mech-chip{font-size:11px;font-weight:800;color:var(--brassL);letter-spacing:1.5px;display:flex;align-items:center;gap:4px;}
.mech-chip .art{width:13px;height:13px;}
.chip-energy b{color:var(--brassL);}
#hub-energy-timer{font-size:11px;color:#a08a6a;font-weight:600;}
.chip-timer{background:#54402a;color:var(--brassL);}
#lv-meta{color:#d9c9a6;}
.hint-btn{
  position:relative;width:38px;height:38px;border-radius:12px;font-size:18px;flex:0 0 auto;
  background:var(--paper);color:var(--ink);
  box-shadow:0 2px 0 #bfae8c;
  display:flex;align-items:center;justify-content:center;
}
.hint-btn .art{width:19px;height:19px;}
.hint-btn i{position:absolute;top:-5px;right:-5px;background:var(--brass);color:#2b1c0d;font-style:normal;
  font-size:11px;font-weight:900;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.hint-btn:active{transform:translateY(2px);}
.hint-pulse{animation:hintP 1s ease-in-out 3;}
@keyframes hintP{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}

/* ---------- XP 条 ---------- */
.xpbar{
  margin:0 12px 6px;height:15px;border-radius:999px;background:#211810;position:relative;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
#xpbar-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--brassD),var(--brassL));transition:width .6s ease;}
#xp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#d9c9a6;}

/* ============================================================
   标题页 —— 暗色工坊墙 + 聚光
   ============================================================ */
#scr-title{align-items:center;justify-content:center;gap:26px;background:
  radial-gradient(ellipse at 50% 30%, rgba(227,180,117,.16) 0%, transparent 55%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 3px, transparent 3px 110px),
  linear-gradient(180deg,#332619 0%,#241b13 100%);}
.t-logo{text-align:center;animation:floaty 3s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.t-morph{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;}
.t-radio{width:52px;height:52px;display:inline-block;}
.t-radio .art{width:52px;height:52px;}
.broken-art{filter:grayscale(.9) brightness(.6);transform:rotate(-6deg);}
.fixed-art{filter:none;animation:neon 2s ease-in-out infinite;}
.t-arrow{width:34px;height:34px;display:inline-block;opacity:.8;}
.t-arrow .art{width:34px;height:34px;}
.t-arrow .art svg *{stroke:#c9924a;}
.t-arrow .art svg path{fill:#c9924a;}
.t-logo h1{
  font-size:58px;letter-spacing:3px;color:#e3b475;
  text-shadow:0 2px 0 #6e4a20, 0 5px 0 rgba(0,0,0,.4), 0 0 34px rgba(227,180,117,.25);
}
.t-logo .amp{color:var(--red);margin:0 4px;text-shadow:0 2px 0 #6e2010,0 5px 0 rgba(0,0,0,.4);}
.t-sub{font-size:17px;font-weight:800;color:#c8b58c;margin-top:8px;letter-spacing:5px;}
.t-tag{font-size:12px;color:#8d7a5e;margin-top:7px;font-style:italic;}
.t-gear{position:absolute;opacity:.13;animation:spin 16s linear infinite;color:var(--brassL);}
.t-gear .art{width:100%;height:100%;}
.t-gear .art svg *{stroke:#e3b475;}
.t-gear.g1{top:7%;left:9%;width:74px;height:74px;}
.t-gear.g2{top:15%;right:11%;width:52px;height:52px;animation-duration:10s;animation-direction:reverse;}
.t-gear.g3{bottom:13%;left:15%;width:44px;height:44px;animation-duration:22s;}
@keyframes spin{to{transform:rotate(360deg);}}
.t-ver{position:absolute;bottom:14px;font-size:11px;color:#6b5942;letter-spacing:1px;}

/* ============================================================
   工坊 Hub —— Meta 场景
   ============================================================ */
#scr-hub{padding-bottom:10px;}
#scene-wrap{margin:6px 12px 8px;position:relative;}
#scene{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(227,180,117,.22), transparent 58%),
    linear-gradient(180deg,#7d7565 0%,#645c4b 100%);
  box-shadow:inset 0 0 0 4px #1c140c, inset 0 -10px 22px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.45);
}
.sc-wall{position:absolute;inset:0 0 24% 0;
  background:
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.07), transparent 34%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,#807866,#665e4c);}
.sc-floor{position:absolute;left:0;right:0;bottom:0;height:26%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 58px),
    linear-gradient(180deg,#8a5a36,#6b422a);
  border-top:3px solid #43301e;}
.sc-floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.25));}
#scene.floor-clean .sc-floor::after{background:radial-gradient(ellipse at 50% 60%, rgba(255,236,180,.22), transparent 70%);}
.sc-speck{position:absolute;width:9px;height:6px;border-radius:50%;background:#2e2115;opacity:.55;transition:opacity .6s;}
#scene.floor-clean .sc-speck{opacity:0;}

.sc-item,.sc-char{position:absolute;line-height:0;transition:filter .5s,transform .5s;width:1em;height:1em;}
.sc-char{font-size:44px;bottom:5%;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3));}
.sc-mia{left:25%;}
.sc-pipc{left:52%;font-size:32px;animation:bob 2.2s ease-in-out infinite;}
.sc-noah{left:68%;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.sc-item{font-size:32px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));}
.sc-item.broken{filter:grayscale(.9) brightness(.62);}
.sc-crack{display:none;position:absolute;top:-9px;right:-9px;width:17px;height:17px;line-height:0;}
.sc-item.broken .sc-crack{display:block;}
.sc-crack .art{width:17px;height:17px;}
.sc-crack svg *{stroke:#2b1f14;}
.sc-window{left:5%;top:9%;font-size:38px;}
.sc-lamp{left:44%;top:2%;font-size:38px;}
.sc-lamp .sc-light{position:absolute;left:50%;top:60%;width:160px;height:120px;transform:translate(-50%,-18%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,140,.5),transparent 68%);opacity:0;transition:opacity .8s;pointer-events:none;}
#scene.lamp-on .sc-light{opacity:1;}
#scene.lamp-on .sc-lamp{filter:drop-shadow(0 0 10px rgba(255,213,126,.6));}
.sc-sign{right:4%;top:8%;font-size:38px;}
#scene.sign-lit .sc-sign{filter:drop-shadow(0 0 12px rgba(255,179,64,.75));animation:neon 1.8s ease-in-out infinite;}
@keyframes neon{0%,100%{filter:drop-shadow(0 0 5px rgba(255,179,64,.5));}50%{filter:drop-shadow(0 0 16px rgba(255,179,64,.9));}}
.sc-shelf{left:6%;top:40%;font-size:40px;}
.sc-extras{display:none;position:absolute;left:8px;top:-16px;right:8px;justify-content:space-between;line-height:0;}
.sc-extras .art{width:17px;height:17px;}
#scene.shelf-fixed .sc-extras{display:flex;}
#scene.shelf-fixed .sc-shelf{filter:none;}
.sc-radio{left:16%;top:54%;font-size:28px;}
.sc-bench{left:36%;bottom:6%;font-size:56px;}
.sc-box{left:48%;bottom:20%;font-size:28px;z-index:2;}
.sc-coffee{right:6%;bottom:20%;font-size:38px;}
.sc-steam{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:20px;height:22px;opacity:0;transition:opacity .5s;line-height:0;}
.sc-steam .art{width:20px;height:22px;}
#scene.coffee-fixed .sc-coffee .sc-steam{opacity:.9;animation:steamUp 1.8s infinite;}
@keyframes steamUp{0%{transform:translate(-50%,0);opacity:.9;}100%{transform:translate(-50%,-16px);opacity:0;}}
.sc-plant{right:22%;bottom:10%;font-size:34px;}
#scene.plant-alive .sc-plant{animation:bob 3s ease-in-out infinite;}
.sc-butterfly{display:none;position:absolute;right:16%;bottom:38%;width:18px;height:18px;line-height:0;z-index:3;}
.sc-butterfly .art{width:18px;height:18px;}
#scene.plant-alive .sc-butterfly{display:block;animation:flyby 6s linear infinite;}
@keyframes flyby{0%{transform:translate(0,0);}25%{transform:translate(-34px,-16px);}50%{transform:translate(-64px,4px);}75%{transform:translate(-34px,16px);}100%{transform:translate(0,0);}}
.sc-cat{left:85%;bottom:4%;font-size:26px;animation:bob 3.4s ease-in-out infinite;}
.sc-hammer{position:absolute;font-size:32px;width:32px;height:32px;z-index:9;pointer-events:none;line-height:0;}
.sc-hammer .art{width:32px;height:32px;}
.sc-hammer.strike{animation:strike .5s ease-in-out 3;}
@keyframes strike{0%,100%{transform:rotate(-70deg);}45%{transform:rotate(10deg) translateY(4px);}}

.cozy{display:flex;align-items:center;gap:8px;margin-top:6px;}
.cozy-bar{flex:1;height:12px;border-radius:999px;background:#211810;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5);}
#cozy-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--sage),#9ab06e);transition:width .6s;border-radius:999px;}
#cozy-text{font-size:12px;font-weight:800;color:#c8b58c;white-space:nowrap;}

/* ---------- 工坊任务卡(纸卡) ---------- */
#tasks{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 6px;scrollbar-width:none;}
#tasks::-webkit-scrollbar{display:none;}
.task{
  flex:0 0 118px;background:var(--paper);border-radius:14px;padding:8px 10px;
  box-shadow:0 3px 0 #bfae8c, 0 6px 12px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:3px;align-items:center;position:relative;
  color:var(--ink);
}
.task .t-icon{font-size:28px;line-height:1;}
.task .t-icon .art{width:28px;height:28px;}
.task .t-name{font-size:12px;font-weight:800;}
.task .t-cost{font-size:11px;font-weight:700;color:#8a6a3a;display:flex;align-items:center;gap:2px;}
.task .t-cost .art{width:11px;height:11px;}
.task .t-do{
  margin-top:3px;width:100%;padding:5px 0;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--teal);color:#f0f5ee;
}
.task .t-do:disabled{background:#c9b888;color:#f4ead4;pointer-events:none;}
.task.done{opacity:.55;}
.task.done .t-do{background:#8ba06a;pointer-events:none;}
.task.done::after{content:"✓";position:absolute;top:4px;right:7px;color:var(--sage);font-weight:900;}
.task.locked{opacity:.4;filter:grayscale(.7);}
.task.current .t-do{animation:pulseBtn 1.2s infinite;}
@keyframes pulseBtn{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* ---------- 关卡圆点 ---------- */
#dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:2px 12px 4px;}
.dot{
  width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:900;
  background:var(--paper);box-shadow:0 2px 0 #bfae8c;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.dot.done{background:#31473f;color:var(--brassL);}
.dot.cur{background:var(--brass);color:#2b1c0d;animation:pulseBtn 1.2s infinite;}
.dot.locked{opacity:.35;}

.hub-row{display:flex;gap:8px;justify-content:center;margin-top:8px;}
.hub-row .btn{font-size:14px;padding:10px 16px;}
#btn-play{margin:8px 12px 0;}

/* ============================================================
   关卡页 —— 木板 + 洞洞板
   ============================================================ */
#scr-level{background:var(--bg);}
#board{
  flex:1;position:relative;overflow:hidden;touch-action:none;margin:6px 8px 8px;border-radius:16px;
  background:
    radial-gradient(circle, rgba(0,0,0,.22) 1.6px, transparent 2.6px) 0 0/24px 24px,
    linear-gradient(180deg,#54402a,#463528);
  box-shadow:inset 0 0 0 3px #1c140c, inset 0 10px 30px rgba(0,0,0,.3);
}

/* ---------- DSL 启动卡 ---------- */
#ovl-dsl{z-index:60;}
.dsl-card{
  background:#1d150c;color:#e8c987;border-radius:16px;padding:22px 26px;min-width:min(78vw,340px);
  box-shadow:0 0 0 3px var(--brass), 0 20px 50px rgba(0,0,0,.6);
  font-family:Consolas,monospace;
}
.dsl-card pre{font-size:14px;line-height:1.75;white-space:pre-wrap;}
.dsl-skip{margin-top:12px;text-align:center;color:#8d7a5e;font-size:12px;animation:blink 1.2s infinite;}
@keyframes blink{50%{opacity:.3;}}

/* ---------- 面板(纸卡) ---------- */
.panel{
  background:var(--paper);border-radius:22px;padding:22px 20px;width:min(86vw,380px);
  display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink);
  box-shadow:0 10px 0 rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.5);
  animation:panelIn .35s cubic-bezier(.2,1.4,.4,1);
  max-height:86dvh;overflow-y:auto;
}
@keyframes panelIn{from{opacity:0;transform:scale(.8) translateY(30px);}to{opacity:1;transform:none;}}
.panel-title{font-size:20px;font-weight:900;}
.panel-title small{font-size:11px;color:var(--ink2);font-weight:600;display:block;text-align:center;margin-top:4px;}
.panel-sub{font-size:13px;font-weight:800;color:var(--ink2);align-self:flex-start;}
.res-head{font-size:30px;font-weight:900;color:var(--teal);letter-spacing:2px;animation:popIn .5s cubic-bezier(.2,1.6,.4,1);}
.res-fail{color:var(--red);}
.res-gold{color:var(--brassD);}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
.res-stars{display:flex;gap:8px;font-size:0;}
.res-star{display:inline-block;width:42px;height:42px;filter:grayscale(1) opacity(.3);transform:scale(.5);transition:all .35s cubic-bezier(.2,1.8,.4,1);}
.res-star .art{width:42px;height:42px;}
.res-star.on{filter:none;transform:scale(1);}
.res-obj{font-size:60px;line-height:0;}
.res-obj .art{width:60px;height:60px;animation:bob 2s infinite;}
.res-line{font-size:13px;font-weight:700;color:var(--tealD);background:#e2ece7;padding:8px 14px;border-radius:999px;text-align:center;}
.res-reward{font-size:26px;font-weight:900;color:#8a6a3a;display:flex;align-items:center;}
.res-reward .art{width:24px;height:24px;margin-right:4px;}
#res-extra{font-size:12px;color:var(--ink2);font-weight:700;margin-left:8px;}
.res-btns{display:flex;gap:10px;width:100%;justify-content:center;}
.res-btns .btn{flex:1;font-size:14px;padding:11px 8px;}
.res-btns .btn .art{width:15px;height:15px;}

/* ---------- 剧情 ---------- */
.story-card{
  background:var(--paper);border-radius:22px;padding:24px 22px 18px;width:min(86vw,380px);
  display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:panelIn .4s cubic-bezier(.2,1.4,.4,1);
}
.story-card::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  border:14px solid transparent;border-bottom-color:var(--paper);border-top:none;}
.story-avatar{width:84px;height:84px;line-height:0;}
.story-avatar .art{width:84px;height:84px;}
.story-name{font-size:14px;font-weight:900;color:var(--paper);background:var(--tealD);padding:3px 16px;border-radius:999px;}
.story-text{font-size:17px;font-weight:700;min-height:76px;display:flex;align-items:center;text-align:center;line-height:1.7;}
.story-next{font-size:12px;color:var(--ink2);animation:blink 1.2s infinite;}

/* ---------- 模拟广告 ---------- */
.ad-card{
  background:var(--paper);border-radius:22px;width:min(86vw,360px);padding:18px;color:var(--ink);
  display:flex;flex-direction:column;gap:14px;align-items:center;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.ad-tag{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--paper);background:#211810;padding:5px 12px;border-radius:999px;}
.ad-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 10px 34px;text-align:center;
  background:linear-gradient(135deg,#e2ece7,#f0e2c6);border-radius:16px;width:100%;}
.ad-art{width:64px;height:64px;line-height:0;animation:spin 4s linear infinite;}
.ad-art .art{width:64px;height:64px;}
.ad-body small{color:var(--ink2);font-size:11px;}

/* ---------- 设置/统计 ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:700;font-size:15px;}
.toggle{background:var(--paper3);border-radius:999px;padding:6px 18px;font-weight:900;font-size:13px;min-width:64px;color:var(--ink);}
.toggle.on{background:var(--teal);color:#f0f5ee;}
.stats{width:100%;max-height:180px;overflow-y:auto;font-size:12px;background:#efe3c8;border-radius:12px;padding:10px 12px;line-height:1.9;}
.stats b{color:#8a6a3a;}
.about{font-size:10px;color:var(--ink3);text-align:center;line-height:1.6;}
.offer-body{font-size:15px;font-weight:700;text-align:center;line-height:1.7;}

/* ============================================================
   玩法 A · Sort 分类
   ============================================================ */
.s-table{position:absolute;inset:8px 8px 27% 8px;}
.s-bins{
  position:absolute;left:8px;right:8px;bottom:8px;height:23%;
  display:flex;gap:8px;
}
.s-item{
  position:absolute;font-size:clamp(34px,7.6vmin,46px);width:1em;height:1em;cursor:grab;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));
  transform:rotate(var(--rot,0deg));
  z-index:2;line-height:0;
}
.s-item .art{width:1em;height:1em;}
.s-item.sel{z-index:30;}
.s-item.sel::after{content:"";position:absolute;inset:-8px;border:3px dashed var(--brassL);border-radius:14px;animation:spin 6s linear infinite;}
.s-item.dragging{z-index:40;transform:scale(1.15) rotate(0deg)!important;cursor:grabbing;}
.s-item.flying{transition:transform .38s cubic-bezier(.5,-0.2,.6,1), opacity .38s;z-index:50;}
.s-item.wrong{animation:shakeX .4s;}
@keyframes shakeX{0%,100%{transform:translateX(0) rotate(var(--rot,0deg));}25%{transform:translateX(-7px) rotate(var(--rot,0deg));}75%{transform:translateX(7px) rotate(var(--rot,0deg));}}
.s-bin{
  flex:1;border-radius:12px;
  background:linear-gradient(180deg,var(--woodL),var(--wood));
  border:3px solid var(--woodD);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.14), inset 0 -8px 12px rgba(0,0,0,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  position:relative;transition:transform .15s;
}
.s-bin.over{transform:scale(1.06);border-color:var(--brassL);box-shadow:inset 0 4px 0 rgba(255,255,255,.2), 0 0 14px rgba(227,180,117,.4);}
.s-bin-icon{font-size:clamp(24px,5.4vmin,34px);line-height:0;}
.s-bin-icon .art{width:1em;height:1em;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3));}
.s-bin-count{
  position:absolute;top:-9px;right:-6px;background:var(--brass);color:#2b1c0d;
  min-width:22px;height:22px;border-radius:999px;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.s-bin.ok .s-bin-count{background:#9ab06a;}

/* ============================================================
   玩法 B · Clean 清洁
   ============================================================ */
.c-stage{position:absolute;inset:0;}
.c-obj{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-size:clamp(130px,36vmin,230px);width:1em;height:1em;line-height:0;
  transition:filter .4s;
}
.c-obj .art{width:1em;height:1em;filter:drop-shadow(0 14px 10px rgba(0,0,0,.35));}
.c-shine{animation:shineBig 1s ease!important;filter:none!important;}
@keyframes shineBig{0%{transform:translate(-50%,-50%) scale(1);}40%{transform:translate(-50%,-50%) scale(1.12) rotate(4deg);}100%{transform:translate(-50%,-50%) scale(1);}}
.spot{position:absolute;pointer-events:none;line-height:0;}
.spot .art{width:100%;height:100%;display:block;}
.sp-web{font-size:clamp(30px,8vmin,42px);}
.sp-web .art{width:1em;height:1em;}
.c-sponge{position:absolute;font-size:48px;width:1em;height:1em;pointer-events:none;z-index:10;transform:translate(-50%,-60%) rotate(-18deg);filter:drop-shadow(0 5px 4px rgba(0,0,0,.4));line-height:0;}
.c-sponge .art{width:1em;height:1em;}
.c-sponge.scrub{animation:squish .25s infinite;}
@keyframes squish{0%,100%{transform:translate(-50%,-60%) rotate(-18deg) scale(1);}50%{transform:translate(-50%,-55%) rotate(-8deg) scale(1.1,.9);}}
.c-progress{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60%;height:14px;background:var(--paper);border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.35);z-index:5;overflow:hidden;}
.c-progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),#9ab06e);border-radius:999px;transition:width .2s;}
.bubble{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,.45));
  border:1.5px solid rgba(255,255,255,.8);
  pointer-events:none;z-index:9;animation:bubUp .8s ease-out forwards;}
@keyframes bubUp{to{transform:translateY(-40px) scale(1.4);opacity:0;}}

/* ============================================================
   玩法 C · Connect 接线
   ============================================================ */
.k-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.k-grid{display:grid;gap:5px;width:min(92%,430px);}
.k-cell{aspect-ratio:1;position:relative;}
.k-cell.empty::after{content:"·";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(240,228,200,.22);font-size:20px;}
.k-src,.k-dst{display:flex;align-items:center;justify-content:center;font-size:clamp(22px,6vmin,34px);line-height:0;}
.k-src .art,.k-dst .art{width:1em;height:1em;}
.k-src{animation:pulseBtn 1.6s infinite;}
.k-dst{filter:grayscale(1) opacity(.55);transition:filter .3s,transform .3s;}
.k-dst.lit{filter:none;animation:popIn .4s;}
.k-dst.lit .art{filter:drop-shadow(0 0 12px #ffcf6b) drop-shadow(0 0 30px rgba(255,179,64,.5));}
.k-dst.lit .fil{stroke:#ffcf6b;}
.k-tile{position:relative;width:100%;height:100%;cursor:pointer;}
.k-inner{position:absolute;inset:0;transition:transform .22s ease;}
.k-rot1 .k-inner{transform:rotate(90deg);}
.k-rot2 .k-inner{transform:rotate(180deg);}
.k-rot3 .k-inner{transform:rotate(270deg);}
.k-tile svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.k-tile .wire-base{stroke:#7d6547;stroke-width:17;stroke-linecap:round;fill:none;}
.k-tile .wire-glow{stroke:#ffcf6b;stroke-width:9;stroke-linecap:round;fill:none;stroke-dasharray:12 9;
  opacity:0;transition:opacity .15s;animation:dashMove .7s linear infinite;filter:drop-shadow(0 0 4px #ffb340);}
.k-tile.on .wire-glow{opacity:1;}
.k-tile.on .wire-base{stroke:#96805f;}
@keyframes dashMove{to{stroke-dashoffset:-21;}}
.k-solved .k-tile{pointer-events:none;}

/* ============================================================
   玩法 D · Repair 修复
   ============================================================ */
.r-stage{position:absolute;inset:0 0 26% 0;}
.r-device{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-size:clamp(110px,30vmin,190px);width:1em;height:1em;line-height:0;
  filter:grayscale(.85) brightness(.72);
  animation:brokeShake 3.2s ease-in-out infinite;
}
.r-device .art{width:1em;height:1em;filter:drop-shadow(0 12px 8px rgba(0,0,0,.4));}
@keyframes brokeShake{0%,100%{transform:translate(-50%,-50%) rotate(0);}25%{transform:translate(-50%,-50%) rotate(-2.5deg);}75%{transform:translate(-50%,-50%) rotate(2.5deg);}}
.r-device.r-fixed{filter:none;animation:popIn .55s cubic-bezier(.2,1.6,.4,1);}
.r-device.r-fixed .art{filter:drop-shadow(0 0 22px rgba(255,207,107,.7)) drop-shadow(0 12px 8px rgba(0,0,0,.4));}
.r-spark{position:absolute;width:20px;height:20px;animation:sparkBlink 1.4s infinite;pointer-events:none;line-height:0;}
.r-spark .art{width:20px;height:20px;}
.r-spark.s1{left:16%;top:22%;}
.r-spark.s2{right:14%;top:36%;animation-delay:.5s;}
.r-spark.s3{left:28%;top:62%;animation-delay:.9s;width:14px;height:14px;}
.r-spark.s3 .art{width:14px;height:14px;}
@keyframes sparkBlink{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1.15);}}
.r-slot{
  position:absolute;width:clamp(46px,12vmin,62px);height:clamp(46px,12vmin,62px);
  transform:translate(-50%,-50%);
  border:3px dashed #a08a6a;border-radius:16px;background:rgba(244,234,212,.09);
  display:flex;align-items:center;justify-content:center;font-size:clamp(22px,6vmin,32px);
  line-height:0;
}
.r-slot .art{width:1em;height:1em;}
.r-slot .r-ghost{opacity:.32;filter:grayscale(1);line-height:0;}
.r-slot.over{border-color:var(--brassL);background:rgba(227,180,117,.14);transform:translate(-50%,-50%) scale(1.12);}
.r-slot.filled{border-style:solid;border-color:var(--brass);background:rgba(227,180,117,.16);animation:popIn .4s;}
.r-slot.filled .r-ghost{opacity:1;filter:none;}
.r-slot.wrong{animation:shakeX .4s;}
.r-slot.shine-hint{border-color:var(--brassL);animation:hintP 1s ease-in-out 3;}
.r-tray{
  position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(180deg,#4a3826,#3b2c1d);
  border-radius:16px 16px 0 0;border-top:3px solid #211810;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.35);
}
.r-part{
  width:clamp(44px,11vmin,58px);height:clamp(44px,11vmin,58px);border-radius:14px;background:var(--paper);
  box-shadow:0 3px 0 #bfae8c, 0 5px 10px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
  font-size:clamp(22px,6vmin,30px);cursor:grab;line-height:0;
}
.r-part .art{width:1em;height:1em;}
.r-part.sel{outline:3px dashed var(--teal);outline-offset:2px;}
.r-part.dragging{z-index:50;transform:scale(1.15);box-shadow:0 10px 16px rgba(0,0,0,.4);}
.r-part.used{opacity:0;pointer-events:none;transform:scale(.3);transition:all .35s;}

/* ---------- FIXED 大印章 ---------- */
.stamp{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.stamp b{
  font-size:52px;color:#2b1c0d;letter-spacing:4px;padding:10px 30px;border-radius:18px;
  background:linear-gradient(180deg,var(--brassL),var(--brass));transform:rotate(-8deg) scale(3);opacity:0;
  box-shadow:0 12px 40px rgba(201,146,74,.55), inset 0 2px 0 rgba(255,255,255,.5);
  animation:stampIn .55s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes stampIn{to{opacity:1;transform:rotate(-8deg) scale(1);}}
.flash{position:absolute;inset:0;background:#fff;z-index:55;pointer-events:none;animation:flashOut .6s forwards;}
@keyframes flashOut{from{opacity:.85;}to{opacity:0;}}

/* ---------- Pip ---------- */
#pip{position:fixed;right:12px;bottom:12px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.pip-avatar{
  width:56px;height:56px;border-radius:50%;background:var(--paper);
  box-shadow:0 4px 0 #bfae8c,0 8px 18px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;animation:bob 2.4s ease-in-out infinite;
}
.pip-avatar .art{width:36px;height:36px;}
.pip-eye{animation:eyeBlink 4.2s infinite;transform-origin:center;transform-box:fill-box;}
@keyframes eyeBlink{0%,93%,100%{transform:scaleY(1);}96%{transform:scaleY(.12);}}
#pip-bubble{
  max-width:min(70vw,260px);background:var(--paper);border-radius:14px;padding:10px 14px;color:var(--ink);
  font-size:13px;font-weight:700;line-height:1.5;display:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35);position:relative;
}
#pip-bubble::after{content:"";position:absolute;right:16px;bottom:-9px;border:10px solid transparent;border-top-color:var(--paper);border-bottom:none;}
#pip-bubble.show{display:block;animation:panelIn .3s;}

/* ---------- Toast / 特效层 ---------- */
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  background:#211810;color:#f0e4c8;font-size:14px;font-weight:700;padding:10px 20px;border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);animation:toastIn .3s;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.gold{background:linear-gradient(180deg,var(--brassL),var(--brass));color:#2b1c0d;}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden;}
.fxp{position:absolute;width:18px;height:18px;line-height:0;animation:fxFall 1.1s ease-in forwards;}
.fxp .art{width:18px;height:18px;}
.fxp-shape{position:absolute;width:10px;height:10px;}
.fxp.fly{animation:fxPop .9s ease-out forwards;}
@keyframes fxFall{to{transform:translateY(105dvh) rotate(var(--rot,540deg));opacity:.65;}}
@keyframes fxPop{60%{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:1;}100%{transform:translate(var(--dx),calc(var(--dy) + 60px)) scale(.6);opacity:0;}}

/* ---------- 遮罩层 ---------- */
.ovl{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(14,9,4,.68);z-index:50;}
.ovl.show{display:flex;animation:fadeIn .25s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* 关卡内 Pip 上移,不遮挡托盘/分类盒 */
body[data-scr="scr-level"] #pip{bottom:calc(27% + 60px);}

@media (max-height:700px){
  .t-logo h1{font-size:42px;}
  .btn-big{font-size:17px;padding:13px 26px;}
  .res-obj{font-size:44px;}
  .res-obj .art{width:44px;height:44px;}
}

/* ============================================================
   v0.3 修复流水线(除锈/打磨/清洗/喷漆/装配/通电)
   ============================================================ */
.rs-wrap{position:absolute;inset:0;display:flex;flex-direction:column;}
.rs-pipeline{flex:none;height:56px;display:flex;align-items:center;justify-content:center;gap:2px;padding:8px 8px 0;}
.pl-node{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:10px;opacity:.38;transition:all .3s;}
.pl-node .pl-ic{width:18px;height:18px;line-height:0;position:relative;}
.pl-node .pl-ic .art{width:18px;height:18px;}
.pl-node .pl-name{font-size:10px;font-weight:800;color:#d9c9a6;}
.pl-node.cur{opacity:1;background:rgba(227,180,117,.14);animation:pulseBtn 1.6s infinite;}
.pl-node.cur .pl-ic .art{filter:drop-shadow(0 0 6px rgba(227,180,117,.7));}
.pl-node.done{opacity:.85;}
.pl-node.done .pl-ic::after{content:"✓";position:absolute;right:-5px;bottom:-2px;font-size:10px;color:#9ab06a;font-weight:900;}
.pl-arrow{width:14px;height:2px;background:#6b5942;margin:0 2px;flex:none;}

.rs-stage{flex:1;position:relative;touch-action:none;overflow:hidden;}
.rs-item{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-size:clamp(120px,32vmin,200px);width:1em;height:1em;line-height:0;transition:filter .6s;}
.rs-item .art{width:1em;height:1em;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));}
.rs-item.rs-dirty{filter:grayscale(.3) brightness(.72) sepia(.3);}
.rs-item.rs-worn{filter:grayscale(.1) brightness(.9);}
.rs-item.rs-primer{filter:grayscale(.55) brightness(.92);}
.rs-item.rs-powered{filter:none;animation:popIn .55s cubic-bezier(.2,1.6,.4,1);}
.rs-item.rs-powered .art{filter:drop-shadow(0 0 24px rgba(255,207,107,.75)) drop-shadow(0 10px 8px rgba(0,0,0,.4));}
.rs-layer{position:absolute;inset:0;pointer-events:none;}
.rs-gloss{position:absolute;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.1) 52%,transparent 66%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;border-radius:14px;}
.paint-layer{position:absolute;line-height:0;opacity:0;transition:opacity .12s;pointer-events:none;}
.paint-layer svg{width:100%;height:100%;display:block;}
.rs-rust{position:absolute;line-height:0;pointer-events:none;filter:sepia(.4) saturate(1.5) hue-rotate(-18deg) brightness(.8);}
.rs-rust .art{position:absolute;width:100%;height:100%;}
.rs-rust .art:nth-child(2){width:70%;height:70%;left:22%;top:16%;filter:brightness(.72);}
.rs-dust{position:absolute;line-height:0;pointer-events:none;filter:grayscale(.75) brightness(1.25);}
.rs-dust .art{width:100%;height:100%;}
.rs-scratch{position:absolute;height:3px;border-radius:2px;background:rgba(219,206,178,.9);pointer-events:none;transition:opacity .2s;}
.rs-tool{position:absolute;width:54px;height:54px;line-height:0;pointer-events:none;z-index:10;transform:translate(-50%,-55%) rotate(-14deg);filter:drop-shadow(0 5px 4px rgba(0,0,0,.4));}
.rs-tool .art{width:54px;height:54px;}
.rs-banner{position:absolute;left:50%;top:66px;transform:translateX(-50%);z-index:20;background:rgba(33,24,16,.92);color:#f0e4c8;font-weight:800;font-size:14px;padding:8px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.4);white-space:nowrap;}
.rs-banner.show{animation:bannerIn .3s;}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
.rs-tray{flex:none;height:20%;background:linear-gradient(180deg,#4a3826,#3b2c1d);border-top:3px solid #211810;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 4px 8px rgba(0,0,0,.35);}
.rs-palette{display:flex;gap:10px;}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .15s;}
.swatch.sel{border-color:#fff;transform:scale(1.18);box-shadow:0 0 12px rgba(255,255,255,.35);}
.swatch:active{transform:scale(.95);}
.rs-power-glow{position:absolute;width:280px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,126,.5),transparent 70%);animation:pulseBtn 1.4s infinite;pointer-events:none;}
.rs-note{position:absolute;width:20px;height:20px;line-height:0;animation:noteUp 1.3s ease-out forwards;pointer-events:none;}
.rs-note .art{width:20px;height:20px;}
@keyframes noteUp{0%{transform:translateY(0);opacity:0;}20%{opacity:1;}100%{transform:translateY(-60px) translateX(14px) rotate(12deg);opacity:0;}}
.flake{position:absolute;width:7px;height:5px;border-radius:2px;pointer-events:none;animation:flakeFall .7s ease-in forwards;}
@keyframes flakeFall{55%{transform:translate(var(--dx),42px) rotate(140deg);opacity:1;}100%{transform:translate(var(--dx),76px) rotate(230deg);opacity:0;}}
.mist{position:absolute;width:6px;height:6px;border-radius:50%;opacity:.85;pointer-events:none;animation:mistUp .65s ease-out forwards;}
@keyframes mistUp{to{transform:translate(var(--dx),-34px) scale(1.8);opacity:0;}}
.sc-minis{position:absolute;left:40%;bottom:20%;display:flex;gap:2px;line-height:0;z-index:2;}
.sc-minis .art{width:20px;height:20px;}