:root{
  --ink:#1a1a1a;
  --paper:#fffef0;
  --red:#ef4444;
  --yellow:#facc15;
  --wrap:1400px;
  /* 贴合剪影的墨线：四次单向投影把 alpha 轮廓向外扩成描边，末尾那层才是硬投影 */
  --outline:
    drop-shadow(2px 0 0 var(--ink))
    drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink))
    drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(5px 5px 0 var(--ink));
  --outline-hot:
    drop-shadow(2px 0 0 var(--ink))
    drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink))
    drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(5px 5px 0 var(--red));
  /* 漫画风手套光标：本地 SVG 转 data URI，黄底墨线，和页面同一套配色 */
  --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27translate%2819.54%2019.44%29%20scale%280.8%29%20rotate%28-42%29%27%3E%3Crect%20x%3D%27-4.5%27%20y%3D%27-24%27%20width%3D%279%27%20height%3D%2724%27%20rx%3D%274.5%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3Cellipse%20cx%3D%27-12.5%27%20cy%3D%27-1.5%27%20rx%3D%275.5%27%20ry%3D%274.5%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%270%27%20rx%3D%2711%27%20ry%3D%2710%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 7 5, pointer;
  --cur-fist: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27translate%2817.65%2017.1%29%27%3E%3Cellipse%20cx%3D%27-8.5%27%20cy%3D%272%27%20rx%3D%274.8%27%20ry%3D%274%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%270%27%20rx%3D%2710%27%20ry%3D%2710%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273%27%2F%3E%3Cellipse%20cx%3D%27-6%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%27-2%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%272%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%276%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 18 17, grab;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Comic Sans MS","Microsoft YaHei","PingFang SC",sans-serif;
  font-weight:700;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  overflow:hidden;              /* 整页固定一屏，不出现滚动条 */
  /* 拖拽作品时禁止浏览器起文字选区：mousedown 落在没有文字的舞台空白处时，
     浏览器会从「最近的文字节点」开始拉选择，一拖就把页头/页脚的文案刷蓝。 */
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.halftone{
  background-image:radial-gradient(circle,var(--ink) 1px,transparent 1px);
  background-size:6px 6px;
}
.speed-lines{
  background-image:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(26,26,26,.06) 8px,rgba(26,26,26,.06) 10px);
}

/* ---------- 顶部：压成一行，把纵向空间让给展示区 ---------- */
header{
  position:relative;overflow:hidden;flex:0 0 auto;
  border-bottom:4px solid var(--ink);
  background:#fff;
}
.header-inner{
  position:relative;z-index:2;
  max-width:var(--wrap);margin:0 auto;
  padding:12px 20px 13px;
}
.head-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.burst-deco{
  position:absolute;right:-46px;top:-56px;
  width:132px;height:132px;
  background:var(--yellow);
  border:4px solid var(--ink);border-radius:50%;
  z-index:1;transform:rotate(-12deg);
}
.burst-deco::after{
  content:"";position:absolute;inset:12px;
  border:4px dashed var(--ink);border-radius:50%;
}
.dot-deco{position:absolute;left:0;bottom:0;width:100%;height:38px;opacity:.14;z-index:1}
.kicker{
  display:inline-block;
  background:var(--red);color:#fff;
  border:3px solid var(--ink);border-radius:8px;
  padding:2px 10px;font-size:11px;letter-spacing:2px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);
  white-space:nowrap;
}
h1{
  font-size:clamp(21px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:3px;
  color:var(--yellow);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--red);
  white-space:nowrap;
}
/* ---------- 展示区：占满剩余高度 ---------- */
main{
  flex:1 1 auto;min-height:0;
  width:100%;max-width:var(--wrap);margin:0 auto;
  /* 底部留白：页脚删掉后这块没东西顶住，舞台的 4px 边框 + 8px 硬阴影会贴到视口底被切掉 */
  padding:14px 20px 18px;
  display:flex;flex-direction:column;
}
.stage{
  position:relative;
  flex:1 1 auto;min-height:0;
  border:4px solid var(--ink);
  border-radius:8px;
  box-shadow:8px 8px 0 var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle,rgba(26,26,26,.13) 1px,transparent 1px),
    repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(26,26,26,.05) 8px,rgba(26,26,26,.05) 10px);
  background-size:9px 9px,auto;
  overflow:hidden;
  cursor:var(--cur-hand);
  touch-action:manipulation;
}
/* 悬停到作品上 → 张开抓取的手；按住拖拽中 → 握拳 */
.stage.over,.stage.dragging{cursor:var(--cur-fist)}

.piece{
  position:absolute;left:0;top:0;
  pointer-events:none;
  will-change:transform;
  transform-origin:50% 50%;
}
.piece img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.piece.cut img{filter:var(--outline)}
.piece.cut.hot img{filter:var(--outline-hot)}
/* 未抠图的作品：实拍图带墨线相框 */
.piece.frame{
  overflow:hidden;
  border:4px solid var(--ink);
  border-radius:8px;
  box-shadow:5px 5px 0 var(--ink);
  background:var(--paper);
}
.piece.frame img{object-fit:cover;object-position:50% 48%}
.piece.frame.hot{box-shadow:5px 5px 0 var(--red)}

/* ---------- 信息框：固定在底部中间，同时是物理世界里的一块静态障碍 ---------- */
.info{
  position:absolute;left:0;right:0;bottom:16px;
  margin:0 auto;
  z-index:5;
  /* 固定尺寸：宽度定死 660px（窄屏才被 max-width 收窄），高度定死 58px。
     悬停不同作品时框不再忽宽忽窄，物理碰撞盒也保持稳定。 */
  width:660px;max-width:calc(100% - 32px);
  height:58px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  pointer-events:none;
  /* 注意：这里不能加 overflow:hidden。类别标签要压在框边、探出框外，
     一旦裁切就只剩框内那半截，看着像被啃掉一口。 */
}
/* 名称：在框内居中。 */
.info-title{
  font-size:20px;font-weight:700;letter-spacing:2px;
  color:var(--ink);
  padding:0 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 类别标签：压在框右端、探出框外的独立贴纸。位置由 right:-20px / top:50% 决定，
   盖住框右端一小块，与居中的名称互不侵犯（形位推导见 01手工作品页说明.md）。 */
.info-cat{
  position:absolute;
  right:-20px;top:50%;
  transform:translateY(-50%) rotate(3deg);
  padding:6px 18px;
  font-size:20px;font-weight:700;letter-spacing:2px;
  color:var(--ink);
  background:#d4d4d4;
  border:4px solid var(--ink);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);
  white-space:nowrap;
}
.info-cat:empty{display:none}      /* 默认提示态没有类别，这枚贴纸不出现 */
/* 类别配色。新增类别要改两处：这里补一条，脚本里的 CAT_STYLE 补一条。漏改不报错，
   只会落到 .cat-default 的灰底（配色明细见 01手工作品页说明.md）。 */
.info-cat.cat-paper  {background:#facc15}                 /* 折纸         黄 */
.info-cat.cat-ball   {background:#fb923c}                 /* 折纸·花球   橙 */
.info-cat.cat-mosaic {background:#c084fc}                 /* 折纸·镶嵌花 紫 */
.info-cat.cat-bead   {background:#4ade80}                 /* 拼豆       绿 */
.info-cat.cat-cord   {background:#60a5fa}                 /* 编绳       蓝 */
.info-cat.cat-seed   {background:#b45309;color:#fff}      /* 种子画     棕 */
.info-cat.cat-crochet{background:#2dd4bf}                 /* 钩织       青 */
.info-cat.cat-dye    {background:#f472b6}                 /* 扎染       粉 */
.info-cat.cat-default{background:#d4d4d4}                 /* 类别未登记时的兜底色 */

footer{
  flex:0 0 auto;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 20px 12px;
  font-size:12px;color:#4a4a4a;
}
footer .line{
  border-top:3px solid var(--ink);
  padding-top:8px;
  margin-top:10px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
}

@media(max-width:760px){
  .header-inner{padding:10px 14px 11px}
  .head-row{gap:10px}
  h1{letter-spacing:1.5px;text-shadow:3px 3px 0 var(--red)}
  .burst-deco{width:104px;height:104px;right:-42px;top:-46px}
  main{padding:10px 12px 0}
  .info{height:52px;bottom:12px}
  .info-cat{right:-14px;padding:4px 12px;font-size:14px;letter-spacing:1px;border-width:3px;border-radius:11px}
  .info-title{font-size:15px;letter-spacing:1px}
  footer{padding:0 12px 10px}
}

/* comic-skin —— 硬边美漫皮肤覆盖层。只覆盖视觉（配色/字体/圆角/墨线/阴影），
   不碰布局属性、DOM 与脚本。规则见 00注意事项.md 第二节。 */
:root{
  --red:#ff3333;          /* 原 #ef4444，对齐共享设计系统 */
  --yellow:#ffcc00;       /* 原 #facc15，对齐共享设计系统 */
}
/* 正文切到系统正文字体；标题/标签切到展示字体 */
body{font-family:var(--body)}
h1,.kicker,.info-title,.info-cat{font-family:var(--display)}
/* 标题全大写 + 收紧字距 */
h1{text-transform:uppercase;letter-spacing:.04em}
.info-title,.info-cat{text-transform:uppercase}
/* 顶栏底色收敛到纸色 */
header{background:var(--paper-2)}
/* 虚线边框 → 实心墨线 */
.burst-deco::after{border:var(--bw) solid var(--ink)}
/* 圆角(>8px)收敛到 4px；硬偏移阴影统一套用墨线 token */
.kicker{box-shadow:var(--sh-s)}
.stage{box-shadow:var(--sh-l)}
.info{border-radius:4px;box-shadow:var(--sh-m);background:var(--paper-2)}
.info-cat{border-radius:4px;box-shadow:var(--sh-s)}
.piece.frame{box-shadow:var(--sh-m);background:var(--paper-2)}
.stage{border-radius:4px}
.piece.frame.hot{box-shadow:6px 6px 0 0 var(--red)}
/* 类别贴纸配色收敛到 ink/paper + 四色（红/黄/蓝/绿） */
.info-cat.cat-paper  {background:var(--yellow)}
.info-cat.cat-ball   {background:var(--red);color:#fff}
.info-cat.cat-mosaic {background:var(--blue);color:#fff}
.info-cat.cat-bead   {background:var(--green)}
.info-cat.cat-cord   {background:var(--blue);color:#fff}
.info-cat.cat-seed   {background:var(--ink);color:var(--paper-2)}
.info-cat.cat-crochet{background:var(--green)}
.info-cat.cat-dye    {background:var(--red);color:#fff}
.info-cat.cat-default{background:var(--paper-2)}
/* 页脚：标准墨线 + 灰阶文字 */
footer{color:var(--ink-2)}
footer .line{border-top:var(--bw) solid var(--ink)}
/* 窄屏圆角同步收敛 */
@media(max-width:760px){.info-cat{border-radius:4px}}