/* ============================================================
   墨盒 — 全能创作工作室
   ============================================================ */

:root{
  --bg:#0b0c17;
  --bg-2:#12142a;
  --bg-3:#191c36;
  --card:#171a30;
  --card-2:#1e2240;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#eef0ff;
  --txt-2:#a9aecf;
  --txt-3:#6d739a;
  --brand:#7c5cff;
  --brand-2:#ff4d94;
  --brand-3:#ffc23c;
  --ok:#2ed6a0;
  --warn:#ffb020;
  --err:#ff5f6d;
  --r:16px;
  --r-lg:22px;
  --r-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --tab-h:60px;
  --top-h:52px;
}

[data-theme="light"]{
  --bg:#f4f5fb;
  --bg-2:#ffffff;
  --bg-3:#eceefb;
  --card:#ffffff;
  --card-2:#f2f3fc;
  --line:rgba(18,20,42,.09);
  --line-2:rgba(18,20,42,.16);
  --txt:#141634;
  --txt-2:#5b6088;
  --txt-3:#9aa0c0;
  --shadow:0 10px 30px rgba(31,36,84,.12);
  --shadow-sm:0 4px 14px rgba(31,36,84,.08);
}

[data-theme="skin-neon"]{
  --bg:#07000f; --bg-2:#150a26; --bg-3:#1f0f38;
  --card:#1a0d2e; --card-2:#25123f;
  --brand:#00e5ff; --brand-2:#ff2bd6; --brand-3:#c6ff00;
  --txt:#f4ecff; --txt-2:#b9a6d9;
}

[data-theme="skin-forest"]{
  --bg:#08130d; --bg-2:#0e1f14; --bg-3:#14291b;
  --card:#0f2417; --card-2:#163121;
  --brand:#3ddc84; --brand-2:#ffd166; --brand-3:#8be9fd;
  --txt:#e9f7ef; --txt-2:#9dc4ad;
}

[data-theme="skin-sakura"]{
  --bg:#1a0d16; --bg-2:#2b1626; --bg-3:#3a1d33;
  --card:#2d1827; --card-2:#3d2135;
  --brand:#ff7bac; --brand-2:#ffd1e3; --brand-3:#b28dff;
  --txt:#fff0f7; --txt-2:#d9a8c4;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  background:var(--bg);color:var(--txt);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  transition:background .35s,color .35s;
}
.fc-icon,.ci,.rc-icon,.avatar,.musk-avatar,.tab svg+span,.mb-btn,.emoji{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
.hidden{display:none !important}
.muted{color:var(--txt-3);font-size:12.5px}

/* ---------------- 启动屏 ---------------- */
.splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(120% 80% at 50% 20%,#241a52 0%,#0b0c17 60%);
  transition:opacity .6s,transform .6s;
}
.splash.gone{opacity:0;transform:scale(1.06);pointer-events:none}
.splash-logo{animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.splash-title{margin:14px 0 0;font-size:30px;letter-spacing:2px;color:#fff}
.splash-title span{font-size:15px;letter-spacing:4px;color:#a99bff;display:block;margin-top:4px;font-weight:400}
.splash-sub{color:#8d86bb;font-size:13px;letter-spacing:1px;margin:0}
.splash-loader{margin-top:22px;width:150px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.splash-loader i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#7c5cff,#ff4d94,#ffc23c);animation:load 1.5s ease forwards}
@keyframes load{to{width:100%}}

/* ---------------- 应用框架 ---------------- */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

.topbar{
  height:calc(var(--top-h) + var(--safe-t));padding-top:var(--safe-t);
  display:flex;align-items:center;justify-content:space-between;
  padding-left:14px;padding-right:12px;
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:60;flex:0 0 auto;
}
.tb-left,.tb-right{display:flex;align-items:center;gap:10px}
.brand{font-size:16px;font-weight:700;letter-spacing:.5px}
.brand b{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.icon-btn{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--txt-2);transition:.2s;background:transparent;
}
.icon-btn:hover{background:var(--card-2);color:var(--txt)}
.coin-pill{
  display:flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,194,60,.18),rgba(255,194,60,.06));
  border:1px solid rgba(255,194,60,.32);font-size:13px;font-weight:700;color:var(--brand-3);
}
.coin-pill.bump{animation:bump .4s}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* 屏幕滚动区 */
.screens{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}
.screen{display:none;padding:16px 16px calc(var(--tab-h) + var(--safe-b) + 22px);max-width:1180px;margin:0 auto;animation:fadeUp .32s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen[data-screen="draw"].active{display:flex;flex-direction:column;height:100%;padding:0}

/* ---------------- 底部导航 ---------------- */
.tabbar{
  height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  display:flex;flex:0 0 auto;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);z-index:60;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--txt-3);font-size:10.5px;font-weight:600;transition:.2s;position:relative;
}
.tab svg{transition:transform .22s}
.tab.active{color:var(--brand)}
.tab.active svg{transform:translateY(-2px) scale(1.08)}
.tab.active::after{
  content:"";position:absolute;top:6px;width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.tab:active{transform:scale(.94)}

/* ---------------- 首页 ---------------- */
.hero{
  position:relative;border-radius:var(--r-lg);overflow:hidden;padding:26px 22px;margin-bottom:20px;
  background:linear-gradient(130deg,#5b3df5 0%,#a83ce0 45%,#ff4d94 100%);
  box-shadow:0 14px 40px rgba(124,92,255,.35);
}
.hero-bg{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 88% 12%,rgba(255,255,255,.35) 0,transparent 42%),
    radial-gradient(circle at 12% 92%,rgba(255,194,60,.4) 0,transparent 40%);}
.hero-inner{position:relative;z-index:1;color:#fff}
.hero-inner h2{margin:0 0 6px;font-size:23px;letter-spacing:.5px}
.hero-inner p{margin:0 0 16px;font-size:13.5px;opacity:.9}
.btn-primary{
  display:inline-flex;align-items:center;gap:7px;border-radius:13px;
  background:rgba(255,255,255,.96);color:#3b2ac9;font-weight:800;font-size:14px;
  padding:11px 18px;transition:.2s;box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.btn-primary:active{transform:scale(.96)}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 12px}
.section-head h3{margin:0;font-size:16.5px;letter-spacing:.4px}
.section-head.big-head{display:block;margin-top:4px}
.section-head.big-head p{margin:4px 0 0}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid-2{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid-2{grid-template-columns:repeat(4,1fr)}}

.feature-card{
  border-radius:var(--r);padding:15px;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;transition:.22s;position:relative;overflow:hidden;
  cursor:pointer;min-height:104px;
}
.feature-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.feature-card:active{transform:scale(.97)}
.fc-icon{font-size:26px;line-height:1}
.fc-name{font-weight:700;font-size:14px}
.fc-desc{font-size:11.5px;color:var(--txt-3);line-height:1.45}
.fc-tag{position:absolute;top:10px;right:10px;font-size:9.5px;padding:2px 7px;border-radius:999px;font-weight:700;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.fc-tag.hot{background:linear-gradient(90deg,#ff5f6d,#ffc23c)}
.fc-tag.new{background:linear-gradient(90deg,#2ed6a0,#00e5ff);color:#04312a}

.inspire-card{
  border-radius:var(--r);padding:16px 18px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--brand);
  font-size:13.5px;line-height:1.7;color:var(--txt-2);
}
.inspire-card b{color:var(--txt)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.gal-item{
  aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:#fff;position:relative;cursor:pointer;transition:.2s;
}
.gal-item:hover{transform:scale(1.04);box-shadow:var(--shadow-sm)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.gal-empty{grid-column:1/-1;text-align:center;color:var(--txt-3);font-size:12.5px;padding:26px 0;
  border:1px dashed var(--line-2);border-radius:var(--r)}

/* ---------------- 绘画界面 ---------------- */
.draw-wrap{
  flex:1 1 auto;display:flex;gap:0;min-height:0;height:100%;position:relative;
}
.draw-tools{
  width:66px;flex:0 0 auto;background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:10px 0;gap:3px;z-index:5;
}
.tool-group{display:flex;flex-direction:column;gap:2px;align-items:center}
.tool-btn{
  width:52px;padding:8px 0;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--txt-3);font-size:10px;font-weight:600;transition:.18s;
}
.tool-btn:hover{background:var(--card-2);color:var(--txt-2)}
.tool-btn.active{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(255,77,148,.14));color:var(--brand)}

.canvas-area{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;background:
  linear-gradient(45deg,#0000 25%,rgba(128,128,128,.07) 25% 50%,#0000 50% 75%,rgba(128,128,128,.07) 75%);}
.canvas-stage{
  touch-action:none;
  flex:1 1 auto;position:relative;margin:12px;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);background:#fff;min-height:0;touch-action:none;
}
#mainCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.cursor-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.canvas-note{
  position:absolute;left:22px;bottom:22px;font-size:11px;padding:4px 10px;border-radius:8px;
  background:rgba(0,0,0,.42);color:#fff;backdrop-filter:blur(6px);pointer-events:none;
}
.draw-panel{
  width:250px;flex:0 0 auto;background:var(--bg-2);border-left:1px solid var(--line);min-height:0;
}
.panel-scroll{height:100%;overflow-y:auto;padding:14px 13px 90px}
.panel-block{margin-bottom:20px}
.panel-title{font-size:12px;font-weight:700;color:var(--txt-2);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.panel-title b{color:var(--brand);font-size:11.5px}
.badge{background:var(--card-2);padding:1px 7px;border-radius:999px;font-size:10px;color:var(--txt-3)}

.brush-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.brush-item{
  border-radius:11px;padding:8px 6px;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.18s;position:relative;
}
.brush-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.brush-item.active{border-color:var(--brand);background:linear-gradient(160deg,rgba(124,92,255,.2),transparent)}
.brush-dot{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.brush-dot canvas{display:block}
.brush-item span{font-size:10px;color:var(--txt-2);font-weight:600}
.brush-item.locked{opacity:.45}
.brush-item.locked::after{content:"🔒";position:absolute;top:4px;right:5px;font-size:9px}

.color-row{display:flex;flex-direction:column;gap:9px}
.color-main{width:100%;height:38px;border-radius:11px;overflow:hidden;border:1px solid var(--line-2);display:block;cursor:pointer}
.color-main input{width:140%;height:200%;margin:-20% 0 0 -20%;border:none;background:none;cursor:pointer;padding:0}
.color-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.sw{aspect-ratio:1;border-radius:7px;border:1.5px solid transparent;transition:.15s;cursor:pointer}
.sw:hover{transform:scale(1.12)}
.sw.active{border-color:var(--txt);transform:scale(1.1)}

input[type=range]{
  -webkit-appearance:none;width:100%;height:22px;background:transparent;margin:0 0 10px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--card-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;margin-top:-6px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 2px 6px rgba(0,0,0,.35);
}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--card-2)}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:var(--brand)}

.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mini{
  padding:9px 4px;border-radius:9px;background:var(--card);border:1px solid var(--line);
  font-size:11px;font-weight:600;color:var(--txt-2);transition:.16s;
}
.mini:hover{background:var(--card-2);color:var(--txt);border-color:var(--line-2)}
.mini:active{transform:scale(.94)}

.mobile-brushbar{display:none}

/* ---------------- 扭蛋机 ---------------- */
.gacha-head{text-align:center;padding:8px 0 4px}
.gacha-head h2{margin:0;font-size:21px}
.gacha-head p{margin:5px 0 10px}
.rate-line{display:flex;gap:8px;justify-content:center}
.rate{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.rate.r{background:rgba(150,160,200,.16);color:#9aa3c8}
.rate.sr{background:rgba(124,92,255,.2);color:#a894ff}
.rate.ssr{background:linear-gradient(90deg,rgba(255,194,60,.3),rgba(255,77,148,.3));color:#ffcf5c}

.machine{max-width:330px;margin:20px auto 8px;position:relative}
.machine-dome{
  height:172px;border-radius:88px 88px 22px 22px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
  border:2.5px solid rgba(255,255,255,.3);border-bottom:none;
  box-shadow:inset 0 -12px 30px rgba(0,0,0,.25);
}
.machine-dome.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.balls{position:absolute;inset:0}
.ball{
  position:absolute;border-radius:50%;box-shadow:inset -3px -3px 7px rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.3);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.glare{position:absolute;top:14px;left:22px;width:44px;height:70px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);filter:blur(5px);transform:rotate(-18deg);pointer-events:none}
.machine-body{
  background:linear-gradient(170deg,#ff4d6d,#c92a52);border-radius:20px;padding:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;position:relative;
  box-shadow:0 16px 40px rgba(201,42,82,.4);border:2.5px solid rgba(255,255,255,.22);border-top:none;
}
.machine-slot{
  grid-column:1/-1;height:56px;border-radius:12px;background:rgba(0,0,0,.42);
  display:grid;place-items:center;border:2px solid rgba(0,0,0,.3);overflow:hidden;
}
.capsule{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#fff,#ddd);position:relative;
  animation:dropIn .5s cubic-bezier(.3,1.5,.5,1)}
.capsule::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.25) 48% 52%,transparent 52%)}
@keyframes dropIn{from{transform:translateY(-70px) scale(.5);opacity:0}to{transform:none;opacity:1}}
.machine-knob{display:grid;place-items:center;color:rgba(255,255,255,.9);cursor:pointer;transition:.16s}
.machine-knob:hover{transform:rotate(30deg)}
.machine-knob:active{transform:rotate(90deg) scale(.9)}
.gacha-btn{
  padding:11px 10px;border-radius:12px;background:rgba(255,255,255,.96);color:#c92a52;
  font-weight:800;font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:1px;transition:.18s;
}
.gacha-btn small{font-size:10px;font-weight:600;color:#e2748c}
.gacha-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.gacha-btn:active{transform:scale(.95)}
.gacha-btn.ten{background:linear-gradient(120deg,#ffd93d,#ffb020);color:#7a4a00}
.gacha-btn.ten small{color:#9a6410}

.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px}
.col-item{
  aspect-ratio:.86;border-radius:12px;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;
  position:relative;transition:.2s;text-align:center;
}
.col-item:hover{transform:translateY(-3px);border-color:var(--line-2)}
.col-item.ur{border-color:rgba(255,194,60,.55);background:linear-gradient(160deg,rgba(255,194,60,.16),transparent)}
.col-item.r2{border-color:rgba(124,92,255,.45)}
.col-item .ci{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.col-item .cn{font-size:9.5px;color:var(--txt-2);font-weight:600;line-height:1.25}
.col-item .cr{position:absolute;top:4px;right:5px;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:999px;
  background:var(--card-2);color:var(--txt-3)}
.col-item.ur .cr{background:linear-gradient(90deg,#ffc23c,#ff4d94);color:#fff}
.col-item.r2 .cr{background:var(--brand);color:#fff}
.col-item.empty{opacity:.3;filter:grayscale(1)}

/* ---------------- 我的 ---------------- */
.profile{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 0 20px;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);margin-bottom:18px;
}
.avatar{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(255,77,148,.28));border:2px solid var(--line-2)}
.pname{font-size:16px;font-weight:700}
.pstat{display:flex;gap:30px;margin-top:12px}
.pstat>div{display:flex;flex-direction:column;align-items:center}
.pstat b{font-size:17px;color:var(--brand)}
.pstat span{font-size:10.5px;color:var(--txt-3)}

.list-card{border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden}
.list-item{
  display:flex;align-items:center;justify-content:space-between;padding:15px 16px;
  font-size:14px;border-bottom:1px solid var(--line);transition:.16s;cursor:pointer;
}
.list-item:last-child{border-bottom:none}
.list-item:hover{background:var(--card-2)}
.list-item i{color:var(--txt-3);font-style:normal;font-size:17px}
.list-item.danger{color:var(--err)}

.footer-note{text-align:center;color:var(--txt-3);font-size:11px;padding:22px 0 calc(var(--tab-h) + 10px)}

/* ---------------- 弹层 ---------------- */
.modal-layer{position:fixed;inset:0;z-index:900;display:none}
.modal-layer.show{display:block}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);animation:fadeIn .22s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,430px);max-height:82vh;overflow-y:auto;border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow);
  padding:22px;animation:popIn .28s cubic-bezier(.3,1.4,.5,1);
}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-42%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-box h3{margin:0 0 12px;font-size:17px}
.modal-box p{color:var(--txt-2);font-size:13.5px;line-height:1.65;margin:0 0 14px}
.modal-actions{display:flex;gap:9px;margin-top:16px}
.modal-actions button{flex:1;padding:11px;border-radius:11px;font-weight:700;font-size:13.5px;transition:.18s}
.btn-ghost{background:var(--card-2);color:var(--txt-2)}
.btn-ghost:hover{background:var(--line-2);color:var(--txt)}
.btn-solid{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}
.btn-solid:hover{filter:brightness(1.1)}
.modal-actions button:active{transform:scale(.96)}

/* 抽卡结果 */
.result-layer{position:fixed;inset:0;z-index:950;display:none;background:rgba(4,4,14,.9);backdrop-filter:blur(8px)}
.result-layer.show{display:block;animation:fadeIn .25s}
.result-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;
}
.result-title{color:#fff;font-size:16px;letter-spacing:2px;margin-bottom:20px;opacity:.85}
.result-cards{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:640px}
.rcard{
  width:118px;border-radius:16px;padding:14px 10px;text-align:center;position:relative;
  background:var(--card);border:1.5px solid var(--line-2);
  animation:cardIn .45s cubic-bezier(.25,1.3,.5,1) backwards;transform-style:preserve-3d;
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) rotateY(90deg) scale(.8)}to{opacity:1;transform:none}}
.rcard.sr{border-color:#7c5cff;box-shadow:0 0 24px rgba(124,92,255,.5);background:linear-gradient(165deg,#241a52,#171a30)}
.rcard.ssr{border-color:#ffc23c;box-shadow:0 0 34px rgba(255,194,60,.6);background:linear-gradient(165deg,#4a2f10,#2a1a12)}
.rcard.ssr::before{
  content:"";position:absolute;inset:-2px;border-radius:18px;z-index:-1;
  background:conic-gradient(from 0deg,#ffc23c,#ff4d94,#7c5cff,#ffc23c);animation:spin 3s linear infinite;filter:blur(6px);opacity:.75;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rcard .rc-icon{font-size:34px;margin-bottom:6px}
.rcard .rc-name{font-size:12.5px;font-weight:800;color:var(--txt)}
.rcard .rc-rar{font-size:10px;font-weight:800;margin-top:5px;letter-spacing:1px}
.rcard.sr .rc-rar{color:#a894ff}
.rcard.ssr .rc-rar{color:#ffd35c}
.rcard .rc-new{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;
  padding:2px 8px;border-radius:999px;background:#2ed6a0;color:#04312a}
.result-close{margin-top:26px;padding:12px 34px;border-radius:13px;font-weight:800;font-size:14px;
  background:#fff;color:#171a30;transition:.18s}
.result-close:hover{transform:translateY(-2px)}

/* 吐司 */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 22px);transform:translate(-50%,20px);
  background:rgba(28,30,52,.97);color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;
  font-weight:600;z-index:999;opacity:0;pointer-events:none;transition:.28s;
  box-shadow:0 8px 26px rgba(0,0,0,.45);border:1px solid var(--line-2);max-width:86vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------- 游戏通用 ---------------- */
.game-screen{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0}
.game-title{font-size:19px;font-weight:800;margin:0}
.game-sub{color:var(--txt-3);font-size:12.5px;margin:0;text-align:center}

.musk-card{
  width:100%;max-width:430px;border-radius:var(--r-lg);padding:20px;text-align:center;
  background:linear-gradient(160deg,#141634,#0b0c17);border:1px solid var(--line-2);position:relative;overflow:hidden;
}
.musk-avatar{font-size:56px;line-height:1;margin-bottom:6px}
.musk-name{font-size:16px;font-weight:800}
.musk-title{font-size:11.5px;color:var(--txt-3);margin-top:3px;min-height:16px}
.musk-worth{font-size:30px;font-weight:900;margin:10px 0 4px;color:var(--ok);transition:.3s;letter-spacing:-1px}
.musk-worth.drop{color:var(--err)}
.musk-worth.gain{color:var(--brand-3)}
.musk-bar{height:9px;border-radius:5px;background:var(--card-2);overflow:hidden;margin:12px 0 6px}
.musk-bar i{display:block;height:100%;width:100%;border-radius:5px;
  background:linear-gradient(90deg,#2ed6a0,#ffc23c,#ff5f6d);transition:width .3s}
.musk-log{height:74px;overflow-y:auto;font-size:11.5px;color:var(--txt-3);text-align:left;
  background:rgba(0,0,0,.3);border-radius:10px;padding:8px 10px;line-height:1.6;margin-top:10px}
.musk-log div{margin-bottom:2px}
.musk-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:430px}
.musk-btn{padding:13px 6px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--txt-2);transition:.16s;display:flex;flex-direction:column;gap:3px;align-items:center}
.musk-btn:hover{background:var(--card-2);border-color:var(--line-2);transform:translateY(-2px)}
.musk-btn:active{transform:scale(.95)}
.musk-btn b{font-size:15px}

/* 点名器 / 吐槽墙 */
.panel-card{width:100%;max-width:460px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line);padding:16px}
.name-display{
  height:110px;border-radius:var(--r);display:grid;place-items:center;font-size:30px;font-weight:900;
  background:linear-gradient(150deg,rgba(124,92,255,.2),rgba(255,77,148,.12));margin-bottom:14px;
  letter-spacing:2px;text-align:center;padding:0 12px;
}
.name-display.rolling{animation:roll .12s infinite alternate}
@keyframes roll{from{transform:scale(.97);opacity:.7}to{transform:scale(1.03);opacity:1}}
.textarea{
  width:100%;min-height:82px;border-radius:11px;background:var(--bg-3);border:1px solid var(--line);
  color:var(--txt);padding:11px;font-size:13px;resize:vertical;outline:none;line-height:1.6;
}
.textarea:focus{border-color:var(--brand)}
.wall-list{margin-top:14px;display:flex;flex-direction:column;gap:9px;max-height:320px;overflow-y:auto}
.wall-note{
  padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.6;position:relative;
  background:var(--card-2);border:1px solid var(--line);
}
.wall-note .wn-meta{font-size:10px;color:var(--txt-3);margin-top:6px;display:flex;justify-content:space-between}
.wall-note .wn-del{color:var(--err);cursor:pointer}

.row-btns{display:flex;gap:9px;width:100%;max-width:460px}
.row-btns button{flex:1;padding:12px;border-radius:12px;font-weight:700;font-size:13px;transition:.16s}
.btn-brand{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}
.btn-brand:hover{filter:brightness(1.1)}
.btn-soft{background:var(--card-2);color:var(--txt-2);border:1px solid var(--line)}
.btn-soft:hover{color:var(--txt);border-color:var(--line-2)}

/* 打地鼠 */
.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;max-width:360px}
.hole{
  aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a2d4d,#15172c);
  display:grid;place-items:center;font-size:34px;cursor:pointer;border:2px solid var(--line);transition:.1s;
  user-select:none;
}
.hole:active{transform:scale(.92)}
.hole.up{background:radial-gradient(circle at 50% 40%,#3d3163,#241a52);border-color:var(--brand-2)}

/* 数字华容道 */
.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;max-width:300px}
.pz{
  aspect-ratio:1;border-radius:11px;display:grid;place-items:center;font-size:21px;font-weight:800;
  background:var(--card);border:1px solid var(--line);transition:.14s;cursor:pointer;user-select:none;
}
.pz:hover{border-color:var(--line-2)}
.pz.blank{background:transparent;border:1px dashed var(--line);cursor:default}
.pz.ok{background:linear-gradient(140deg,rgba(46,214,160,.24),transparent);border-color:rgba(46,214,160,.5)}

/* 心理测试 */
.quiz-q{font-size:15.5px;font-weight:700;margin:6px 0 14px;line-height:1.55}
.quiz-opts{display:flex;flex-direction:column;gap:9px}
.quiz-opt{
  padding:13px 15px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-size:13.5px;text-align:left;transition:.16s;color:var(--txt-2);
}
.quiz-opt:hover{border-color:var(--brand);color:var(--txt);transform:translateX(3px)}
.quiz-result{text-align:center}
.quiz-result .qr-emoji{font-size:52px}
.quiz-result h3{margin:10px 0 8px;font-size:20px}
.quiz-bar{height:8px;border-radius:4px;background:var(--card-2);overflow:hidden;margin:16px 0 4px}
.quiz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s}

/* 幸运签 */
.fortune-box{
  width:100%;max-width:380px;border-radius:var(--r-lg);padding:28px 22px;text-align:center;
  background:linear-gradient(160deg,#3a1d33,#1a0d16);border:1px solid rgba(255,123,172,.35);
}
.fortune-lv{font-size:40px;font-weight:900;margin-bottom:8px;
  background:linear-gradient(120deg,#ff7bac,#ffc23c);-webkit-background-clip:text;background-clip:text;color:transparent}
.fortune-txt{color:#f0d8e6;font-size:14px;line-height:1.8;margin:12px 0}
.fortune-extra{font-size:12px;color:#c9a0b8;border-top:1px dashed rgba(255,123,172,.3);padding-top:12px;margin-top:12px;line-height:1.7}

/* 关于 */
.about-hd{text-align:center;margin-bottom:16px}
.about-hd .ah-logo{font-size:44px}
.about-hd h3{margin:8px 0 4px}
.feat-list{list-style:none;padding:0;margin:0;font-size:13px;color:var(--txt-2);line-height:1.9}
.feat-list li{padding-left:20px;position:relative}
.feat-list li::before{content:"✦";position:absolute;left:0;color:var(--brand)}

/* ---------------- 响应式 ---------------- */
@media(max-width:900px){
  .draw-panel{display:none}
  .draw-panel.mobile-open{
    display:block;position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    height:64vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-left:none;border-top:1px solid var(--line-2);
    z-index:80;box-shadow:0 -12px 40px rgba(0,0,0,.5);animation:slideUp .28s;
  }
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
  .panel-scroll{padding-bottom:26px}
  .mobile-brushbar{
    display:flex;flex-direction:column;gap:8px;flex:0 0 auto;
    background:var(--bg-2);border-top:1px solid var(--line);padding:9px 10px calc(9px);
  }
  .mb-scroll{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .mb-scroll::-webkit-scrollbar{display:none}
  .mb-brush{
    flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--card);border:1px solid var(--line);
    display:grid;place-items:center;transition:.16s;
  }
  .mb-brush.active{border-color:var(--brand);background:linear-gradient(160deg,rgba(124,92,255,.25),transparent)}
  .mb-actions{display:flex;gap:7px}
  .mb-btn{
    flex:1;padding:8px;border-radius:10px;background:var(--card);border:1px solid var(--line);
    font-size:11.5px;font-weight:600;color:var(--txt-2);display:flex;align-items:center;justify-content:center;gap:4px;
  }
  .mb-btn:active{transform:scale(.95)}
  .canvas-stage{
  touch-action:none;margin:8px}
  .hero{padding:22px 18px}
  .hero-inner h2{font-size:20px}
  .screen{padding-left:13px;padding-right:13px}
}
@media(max-width:400px){
  .grid-2{gap:9px}
  .feature-card{padding:13px;min-height:98px}
  .tab span{font-size:10px}
}
@media(min-width:901px){
  .screen[data-screen="draw"]{padding:0}
}

/* ============================================================
   v2 新增样式
   ============================================================ */

/* ---------- Hero 插画 ---------- */
.hero{position:relative}
.hero-art{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:150px;height:150px;opacity:.9;pointer-events:none}
@media(max-width:520px){.hero-art{width:110px;height:110px;right:-20px;opacity:.55}}
.hero-inner{position:relative;z-index:2}

/* ---------- 磁贴卡片（带插画） ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.tile-grid{grid-template-columns:repeat(4,1fr)}}
.tile{
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  overflow:hidden;cursor:pointer;transition:.22s;position:relative;display:flex;flex-direction:column;
}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.tile:active{transform:scale(.97)}
.tile-art{height:96px;background:linear-gradient(160deg,var(--card-2),var(--card));display:grid;place-items:center;overflow:hidden;position:relative}
.tile-art>svg{width:96px;height:96px;transition:transform .3s}
.tile:hover .tile-art>svg{transform:scale(1.08) rotate(3deg)}
.tile-body{padding:11px 12px 13px}
.tile .fc-name{font-size:13.5px;font-weight:700;margin-bottom:3px}
.tile .fc-desc{font-size:11px;color:var(--txt-3);line-height:1.42}
.tile .fc-tag{top:8px;left:8px;right:auto}

/* ---------- 面板页签 ---------- */
.panel-tabs{display:flex;gap:4px;padding:9px 10px 0;border-bottom:1px solid var(--line)}
.ptab{
  flex:1;padding:8px 4px;border-radius:9px 9px 0 0;font-size:12px;font-weight:700;
  color:var(--txt-3);transition:.18s;position:relative;
}
.ptab:hover{color:var(--txt-2);background:var(--card)}
.ptab.active{color:var(--brand)}
.ptab.active::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;border-radius:2px;background:var(--brand)}
.panel-page{display:none}
.panel-page.active{display:block}
.panel-hint{font-size:11.5px;color:var(--txt-3);line-height:1.7;margin:0 0 10px}
.panel-hint b{color:var(--txt-2)}

/* ---------- 笔刷真实笔触 ---------- */
.brush-item{padding:7px 5px 8px}
.brush-dot{width:100%;height:38px;border-radius:8px;background:#fff;display:block;overflow:hidden;border:1px solid var(--line)}
.brush-dot canvas{width:100%;height:100%;display:block;object-fit:cover}

/* ---------- 模板线稿 ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tpl-item{
  border-radius:10px;background:var(--card);border:1px solid var(--line);padding:0 0 5px;
  overflow:hidden;transition:.18s;display:flex;flex-direction:column;align-items:center;
}
.tpl-item:hover{border-color:var(--brand);transform:translateY(-2px)}
.tpl-item:active{transform:scale(.95)}
.tpl-thumb{width:100%;aspect-ratio:1;background:#fff;overflow:hidden}
.tpl-thumb svg{width:100%;height:100%;display:block}
.tpl-item span{font-size:9.5px;color:var(--txt-2);font-weight:600;margin-top:4px}

/* ---------- 扭蛋插画卡 ---------- */
.col-item .ci{width:100%;height:44px;display:grid;place-items:center}
.col-item .ci svg{width:44px;height:44px;border-radius:8px;overflow:hidden}
.locked-q{width:44px;height:44px;border-radius:8px;background:var(--card-2);display:grid;place-items:center;
  font-size:20px;font-weight:800;color:var(--txt-3)}
.rcard{padding:10px 8px 12px;width:132px}
.rcard .rc-art{width:100%;height:74px;border-radius:9px;overflow:hidden;margin-bottom:7px;background:#fff}
.rcard .rc-art svg{width:100%;height:100%;display:block}

/* ---------- 花园 ---------- */
.garden-head{text-align:center;padding:6px 0 4px}
.garden-head h2{margin:0;font-size:21px}
.garden-head p{margin:5px 0 10px}
.sun-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sun-pill{
  font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,194,60,.2),rgba(255,194,60,.06));
  border:1px solid rgba(255,194,60,.3);color:var(--brand-3);
}
.sun-pill b{font-size:12.5px}
#seedPill{background:linear-gradient(135deg,rgba(46,214,160,.2),rgba(46,214,160,.06));border-color:rgba(46,214,160,.3);color:var(--ok)}

.garden-bed{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px}
@media(min-width:640px){.garden-bed{grid-template-columns:repeat(3,1fr)}}
.plot{
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:.2s;position:relative;overflow:hidden;
}
.plot.empty{cursor:pointer;border-style:dashed;border-color:var(--line-2)}
.plot.empty:hover{background:var(--card-2);border-color:var(--brand)}
.plot.ready{border-color:rgba(255,194,60,.55);background:linear-gradient(160deg,rgba(255,194,60,.12),var(--card));
  animation:readyGlow 1.8s ease-in-out infinite}
@keyframes readyGlow{0%,100%{box-shadow:0 0 0 rgba(255,194,60,0)}50%{box-shadow:0 0 18px rgba(255,194,60,.35)}}
.plot-art{width:100%;aspect-ratio:1;max-height:112px;border-radius:10px;overflow:hidden;background:#f7fbff;display:grid;place-items:center}
.plot-art svg{width:100%;height:100%;display:block}
.plot-empty{width:100%;aspect-ratio:1;max-height:112px;display:grid;place-items:center;font-size:30px;color:var(--txt-3)}
.plot-prog{width:100%;height:5px;border-radius:3px;background:var(--card-2);overflow:hidden}
.plot-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ok),var(--brand-3));transition:width .4s}
.plot-label{font-size:10.5px;color:var(--txt-3);font-weight:600;text-align:center;line-height:1.3}
.plot-actions{display:flex;gap:5px;width:100%}
.plot-actions .mini{flex:1;padding:7px 2px;font-size:10.5px}
.plot-ready{position:absolute;top:7px;right:7px;font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:linear-gradient(90deg,#ffc23c,#ff4d94);color:#fff}

.seed-shop{display:flex;flex-direction:column;gap:9px}
.seed-card{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);transition:.18s}
.seed-card:hover{border-color:var(--line-2)}
.seed-art{width:42px;height:42px;flex:0 0 auto;border-radius:9px;overflow:hidden;background:#fff4ea}
.seed-art svg{width:100%;height:100%;display:block}
.seed-info{flex:1;min-width:0}
.seed-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.seed-name .own{font-size:10px;padding:1px 6px;border-radius:999px;background:var(--card-2);color:var(--txt-3);font-weight:700}
.seed-desc{font-size:11px;color:var(--txt-3);margin-top:2px}
.seed-buy{
  flex:0 0 auto;padding:8px 13px;border-radius:10px;font-size:12px;font-weight:800;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;transition:.16s;
}
.seed-buy:hover{filter:brightness(1.12);transform:translateY(-1px)}
.seed-buy:active{transform:scale(.95)}

.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.dex-card{border-radius:12px;background:var(--card);border:1px solid var(--line);padding:9px;text-align:center;transition:.2s}
.dex-card.locked{opacity:.45;filter:grayscale(.85)}
.dex-art{width:100%;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#f7fbff;margin-bottom:6px}
.dex-art svg{width:100%;height:100%;display:block}
.dex-name{font-size:11px;font-weight:700}
.dex-rar{font-size:10px;color:var(--brand-3);letter-spacing:1px;margin-top:2px}

.plant-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pp-item{border-radius:12px;background:var(--card);border:1px solid var(--line);padding:11px;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--txt-2);transition:.16s}
.pp-item:hover{border-color:var(--brand);color:var(--txt);transform:translateY(-2px)}
.pp-art{width:46px;height:46px;border-radius:9px;overflow:hidden;background:#fff4ea}
.pp-art svg{width:100%;height:100%;display:block}

/* ---------- 滚球大赛 ---------- */
.marble-wrap{
  width:100%;max-width:460px;height:min(58vh,540px);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);
  display:grid;place-items:center;background:#0b0c17;
}
#marbleCv{display:block;touch-action:none;border-radius:var(--r)}

/* ---------- 你画我猜 ---------- */
.pb-wrap{width:min(78vw,300px);aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--shadow);background:#fff}
#pbCanvas{width:100%;height:100%;display:block}
.pb-guesses{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:26px}
.pb-chip{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:linear-gradient(120deg,rgba(124,92,255,.25),rgba(255,77,148,.18));
  border:1px solid var(--line-2);color:var(--txt)}

/* ============================================================
   v3 新增：拼图 & 涂色游戏样式
   ============================================================ */
.pz-head{text-align:center;margin-bottom:14px}
.pz-title{font-size:19px;font-weight:800;margin-bottom:4px}
.pz-desc{font-size:12px;color:var(--txt-3)}
.pz-meta{display:flex;justify-content:center;gap:18px;font-size:13px;font-weight:700;
  color:var(--brand-3);margin-bottom:12px}
.pz-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pz-actions .mini{min-width:76px;padding:9px 14px}

/* ---------- Emoji 填色 ---------- */
.ec-stage{display:grid;place-items:center;margin-bottom:14px}
.ec-paper{width:min(72vw,260px);aspect-ratio:1;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);padding:10px;display:grid;place-items:center}
.ec-svg{width:100%;height:100%}
.ec-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;max-width:340px;margin:0 auto}
.ec-sw{aspect-ratio:1;border-radius:9px;border:2px solid var(--line-2);transition:.15s}
.ec-sw:hover{transform:scale(1.12)}
.ec-sw.on{border-color:var(--brand);transform:scale(1.16);box-shadow:0 0 0 2px var(--brand)}

/* ---------- 拼图通用 ---------- */
.jj-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.jj-target{width:min(46vw,150px);aspect-ratio:1;border-radius:12px;overflow:hidden;
  border:2px solid var(--line-2);box-shadow:var(--shadow)}
.jj-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);
  grid-template-rows:repeat(var(--n),1fr);width:100%;height:100%;gap:1px;background:var(--line-2)}
.jj-cell{background-size:cover;position:relative;overflow:hidden}
.jj-board{width:min(76vw,300px);aspect-ratio:1;position:relative;
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.jj-board .jj-grid{height:100%}
.jj-move{cursor:pointer;transition:.14s;display:grid;place-items:center}
.jj-move:hover{filter:brightness(1.08)}
.jj-move.sel{outline:3px solid var(--brand);outline-offset:-3px;z-index:2}
.jj-move span{font-size:30px;line-height:1;user-select:none}
.jj-done{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;
  color:#fff;background:rgba(124,92,255,.85);opacity:0;pointer-events:none;transition:.3s}
.jj-done.show{opacity:1}

/* ---------- Emoji 方块拼图 ---------- */
.bp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-width:330px;margin:0 auto;
  background:var(--card-2);padding:6px;border-radius:12px;border:1px solid var(--line)}
.bp-c{aspect-ratio:1;border-radius:5px;background:var(--card);transition:.12s;cursor:pointer}
.bp-c:hover{background:var(--line-2)}
.bp-tray{display:flex;gap:12px;justify-content:center;margin-top:14px;min-height:60px}
.bp-piece{padding:8px;border-radius:11px;background:var(--card);border:2px solid var(--line);
  cursor:pointer;transition:.16s}
.bp-piece:hover{border-color:var(--brand);transform:translateY(-2px)}
.bp-piece.sel{border-color:var(--brand);background:linear-gradient(135deg,rgba(124,92,255,.16),transparent)}
.bp-piece.used{opacity:.22;pointer-events:none}
.bp-mini{display:grid;grid-template-columns:repeat(var(--mc),1fr);grid-template-rows:repeat(var(--mr),1fr);
  gap:2px;width:calc(var(--mc) * 15px);height:calc(var(--mr) * 15px)}
.bp-tc{border-radius:3px}

/* ---------- 像素拼豆 ---------- */
.bd-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:1px;max-width:min(88vw,360px);
  margin:0 auto 14px;background:var(--line-2);padding:2px;border-radius:10px;touch-action:none}
.bd-c{aspect-ratio:1;background:var(--card);border-radius:2px;transition:.08s}
.bd-c:hover{background:var(--line)}

/* ---------- 数字像素涂色 ---------- */
.pc-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;max-width:min(84vw,340px);
  margin:0 auto 16px;background:var(--line-2);padding:3px;border-radius:10px}
.pc-c{aspect-ratio:1;border-radius:4px;background:var(--card);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--txt-3);cursor:pointer;transition:.14s}
.pc-c:hover{background:var(--card-2)}
.pc-empty{background:transparent;cursor:default}
.pc-c.done{cursor:default}
.pc-legend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pc-lg{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:9px;
  background:var(--card);border:2px solid var(--line);font-size:12.5px;font-weight:700;color:var(--txt-2)}
.pc-lg.on{border-color:var(--brand);color:var(--txt)}
.pc-lg-c{width:16px;height:16px;border-radius:5px;display:block}

/* ---------- 画布缩放控件 ---------- */
.zoom-ctrl{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:10;pointer-events:auto}
.zoom-btn{width:36px;height:36px;border-radius:10px;background:var(--card);border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:17px;font-weight:700;color:var(--txt-2);
  box-shadow:var(--shadow);transition:.15s;backdrop-filter:blur(8px)}
.zoom-btn:hover{background:var(--card-2);color:var(--txt);transform:scale(1.06)}
.zoom-val{font-size:10px;text-align:center;color:var(--txt-3);font-weight:700}

/* ---------- 设置页开关 ---------- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px;font-size:13px;font-weight:600;color:var(--txt-2);cursor:pointer}
.switch-row b{font-weight:500;font-size:11px}
.switch-row input[type=checkbox]{appearance:none;width:42px;height:24px;border-radius:99px;
  background:var(--line-2);position:relative;transition:.2s;flex:0 0 auto;cursor:pointer}
.switch-row input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch-row input[type=checkbox]:checked{background:var(--brand)}
.switch-row input[type=checkbox]:checked::after{transform:translateX(18px)}

/* ---------- v3.1 填色页签 / 拼图难度 / 庆祝层 ---------- */
.ec-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.ec-tab{padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--card);border:1.5px solid var(--line);color:var(--txt-3);transition:.16s}
.ec-tab:hover{border-color:var(--brand);color:var(--txt)}
.ec-tab.on{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.jj-tabs{display:flex;gap:7px;justify-content:center;margin-bottom:10px}
.jj-tab{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--card);border:1.5px solid var(--line);color:var(--txt-3);transition:.16s}
.jj-tab:hover{border-color:var(--brand)}
.jj-tab.on{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.jj-tname{display:block;text-align:center;font-size:11px;color:var(--txt-3);font-weight:700;margin-top:5px}
.jj-celebrate{position:fixed;inset:0;z-index:980;display:none;place-items:center;
  background:rgba(8,6,20,.72);backdrop-filter:blur(6px)}
.jj-celebrate.show{display:grid}
.jj-cel-box{background:var(--card);border:1px solid var(--line-2);border-radius:24px;
  padding:30px 42px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:celPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes celPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.jj-cel-emoji{font-size:56px;line-height:1;margin-bottom:8px}
.jj-cel-title{font-size:22px;font-weight:800;margin-bottom:5px}
.jj-cel-sub{font-size:13px;color:var(--txt-3);margin-bottom:16px}