/* ==========================================================
   老登表情站 — 朴素漫画风
   自定义鼠标指针：手绘感的粗黑描边箭头 / 小手
   ========================================================== */

:root {
  --ink: #1b1b1f;
  --paper: #fdf8ee;
  --paper-2: #f6eddc;
  --accent: #ff5a3c;
  --accent-2: #ffd23f;
  --blue: #2f6df6;
  --green: #38b26a;
  --line: 3px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --radius: 10px;
}

* { box-sizing: border-box; }

/*
 * [hidden] 兜底：浏览器默认的 [hidden]{display:none} 优先级极低，
 * 任何带 display 的类规则都会把它盖掉（曾经导致降级纸箱在 3D 正常时也显示）。
 * 统一加 !important，避免以后再踩同一个坑。
 */
[hidden] { display: none !important; }

/* ---------- 自定义鼠标指针 ---------- */
/* 箭头：黑色粗描边 + 暖黄填充，带一点手绘歪斜感 */
html, body {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
<path d='M5 2 L5 24 L11 18.5 L15.5 28 L20 26 L15.8 17 L24 16.5 Z' \
fill='%23ffd23f' stroke='%231b1b1f' stroke-width='2.4' stroke-linejoin='round'/>\
<path d='M7.4 6 L7.4 20.2' stroke='%231b1b1f' stroke-width='1.1' opacity='.45'/>\
</svg>") 5 2, auto;
}

/* 可点击元素：涂黑的小手 */
a, button, .clickable, input[type=submit], label[for], summary {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
<path d='M11 14 L11 7.5 C11 6.1 12.1 5 13.5 5 C14.9 5 16 6.1 16 7.5 L16 13 \
L16 6.5 C16 5.1 17.1 4 18.5 4 C19.9 4 21 5.1 21 6.5 L21 13 \
L21 8.5 C21 7.1 22.1 6 23.5 6 C24.9 6 26 7.1 26 8.5 L26 17 \
C26 23 22 28 16.5 28 C11 28 7 24 7 18.5 L7 15 C7 13.6 8.1 12.5 9.5 12.5 \
C10.4 12.5 11 13 11 14 Z' \
fill='%23ffd23f' stroke='%231b1b1f' stroke-width='2.2' stroke-linejoin='round'/>\
</svg>") 12 4, pointer;
}

/* 输入框用文本光标 */
input[type=text], input[type=password], input[type=file], textarea {
  cursor: text;
}

/* 禁用态 */
button:disabled, .disabled { cursor: not-allowed; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.028) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.028) 0 2px, transparent 2px);
  background-size: 34px 34px, 46px 46px;
  color: var(--ink);
  font-family: "Comic Sans MS", "Chalkboard SE", "Xingkai SC", "STKaiti", "KaiTi",
               "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- 通用漫画组件 ---------- */

.frame {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.btn {
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .06s ease, background .12s;
  user-select: none;
}
.btn:hover { background: #ffe066; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: #ff6f52; }
.btn.ghost { background: #fff; }
.btn.ghost:hover { background: var(--paper-2); }
.btn.danger { background: #ff4d4d; color: #fff; }
.btn.danger:hover { background: #ff6666; }
.btn:disabled { opacity: .5; }

.tag {
  display: inline-block;
  padding: 2px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- 顶栏 ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: var(--line) solid var(--ink);
  background: var(--paper-2);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}
.logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.logo .badge {
  background: var(--accent);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  padding: 1px 7px;
  font-size: 15px;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.topbar .spacer { flex: 1; }
.topbar .stat { font-size: 13px; font-weight: 700; opacity: .8; }

/* ---------- 模式切换（顶部小开关） ---------- */

.switch-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================
   收集模式：大纸箱（3D）
   ========================================================== */

.collect-wrap {
  max-width: 900px;
  margin: 26px auto 60px;
  padding: 0 18px;
}

.hint-sheet {
  padding: 16px 20px;
  margin-bottom: 18px;
  background: #fffdf5;
}
.hint-sheet h1 {
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: .5px;
}
.hint-sheet p { margin: 6px 0; line-height: 1.7; font-size: 15px; }
.kbd {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- 3D 纸箱舞台 ---------- */

.box-zone { position: relative; margin-top: 10px; }

.box3d-stage {
  position: relative;
  width: 100%;
  height: 420px;
  border: 4px solid var(--ink);
  border-radius: 12px;
  /* 漫画风的地面渐变 + 网点 */
  background:
    radial-gradient(ellipse 62% 46% at 50% 88%, rgba(120, 84, 40, .22), transparent 72%),
    radial-gradient(circle at 18% 24%, rgba(0,0,0,.045) 0 2px, transparent 2px),
    radial-gradient(circle at 72% 62%, rgba(0,0,0,.045) 0 2px, transparent 2px),
    linear-gradient(#fdf6e8, #f3e6cd);
  background-size: auto, 26px 26px, 34px 34px, auto;
  box-shadow: 7px 7px 0 rgba(27,27,31,.85);
  overflow: hidden;
  touch-action: none;
}
.box3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.box3d-canvas:active { cursor: grabbing; }

.box3d-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a7654;
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(27,27,31,.28);
  border-radius: 999px;
  padding: 3px 11px;
  pointer-events: none;
  user-select: none;
}

/* 3D 加载中的占位 */
.box3d-stage.loading::after {
  content: "正在组装纸箱…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #8a7654;
  font-size: 15px;
}

/* 投放提示条 */
.box-mouth3d {
  margin-top: 12px;
  padding: 10px 18px;
  border: 3px dashed rgba(27,27,31,.38);
  border-radius: 10px;
  background: #fffdf5;
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  color: #5a4a2c;
  transition: background .15s, border-color .15s, transform .1s;
}
.box-mouth3d.hot {
  background: #fff3c9;
  border-color: var(--ink);
  border-style: solid;
  transform: scale(1.012);
}

/* ---------- 箱底（浮在纸箱内部） ---------- */

/*
 * 箱底堆积区：绝对定位，位置由 JS 根据 3D 箱内底面的屏幕投影实时设置
 * （left/top 是底面中心），这样转动箱子时图片始终躺在箱子里面。
 * 空白处不拦事件，拖箱子照常。
 */
.box-floor {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -100%);
  width: min(520px, 76%);
  padding: 6px 10px 8px;
  border-radius: 12px;
  /* 箱内阴影：顶部/两侧压暗，营造"在箱子里面"的纵深感 */
  background:
    radial-gradient(ellipse 88% 78% at 50% 100%, rgba(30, 18, 4, .42), transparent 72%),
    linear-gradient(to bottom, rgba(24, 14, 2, .30), transparent 46%);
  filter: drop-shadow(0 2px 5px rgba(20, 12, 2, .35));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 3;
  transition: width .18s ease;
}

.floor-badge {
  font-size: 11px;
  font-weight: 700;
  color: #ffeecb;
  background: rgba(38, 24, 8, .66);
  border: 1.5px solid rgba(255, 236, 200, .32);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 5px;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  white-space: nowrap;
  pointer-events: none;
}

/* 箱底里的图片可点击（复制），其余区域放行给 3D 拖拽 */
.box-floor .pile { pointer-events: auto; }

/* 降级模式下，箱底贴在平面纸箱内部底端 */
.box-floor.in-fallback {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(440px, 84%);
  z-index: 5;
}

/* 空箱子时的提示 */
.pile:empty::after {
  content: "还是空的，快丢第一张进来";
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 238, 205, .72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  padding: 6px 0;
}

/* 降级纸箱（3D 不可用时） */
.bigbox.fallback-box {
  position: relative;
  min-height: 320px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #d9a441 0 14px, #cf9a37 14px 28px);
  box-shadow: 7px 7px 0 rgba(27,27,31,.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .1s ease, filter .15s;
}
/* 注意：上面有 display:flex，会盖掉 [hidden] 的浏览器默认 display:none，
   所以必须显式兜底，否则降级纸箱在 3D 正常时也会冒出来。
   （页面里已经有一条全局 [hidden] 规则，这里再就近写一条防止顺序问题。） */
.bigbox.fallback-box[hidden] { display: none !important; }

/* 降级纸箱的箱内底部（放箱底堆积） */
.bigbox.fallback-box::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(20, 12, 2, .55), transparent);
  pointer-events: none;
  z-index: 1;
}
.bigbox.fallback-box.drop-active { filter: brightness(1.06); transform: scale(1.012); }

/* 箱盖 */
.box-lid {
  height: 74px;
  border-bottom: 4px solid var(--ink);
  background: repeating-linear-gradient(45deg, #e0b055 0 14px, #d6a548 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.box-lid .label {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 3px;
  background: #fff8e6;
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 4px 18px;
  transform: rotate(-1.6deg);
  box-shadow: 3px 3px 0 var(--ink);
}

/* 投放口 */
.box-mouth {
  position: relative;
  height: 118px;
  border-bottom: 4px solid var(--ink);
  background: linear-gradient(#2a2118, #100c08 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.box-mouth .mouth-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f6e3b6;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 0 16px;
  line-height: 1.5;
  pointer-events: none;
}
.box-mouth .flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.box-mouth.flash .flash { animation: flash .38s ease-out; }
@keyframes flash {
  0% { opacity: .85; }
  100% { opacity: 0; }
}

/* 掉落的心理暗示：一个下滑的小图标（降级模式用） */
.falling {
  position: absolute;
  top: -40px;
  width: 40px; height: 40px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #fff center/cover no-repeat;
  animation: drop .62s cubic-bezier(.5,0,.9,.6) forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes drop {
  0% { transform: translateY(0) rotate(6deg); opacity: 1; }
  100% { transform: translateY(150px) rotate(-14deg); opacity: 0; }
}

/* 箱底堆叠区 */
.pile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 2px 0 4px;
  min-height: 44px;
  max-width: 100%;
  /* JS 按箱底透视宽度设置，让图片有纵深感 */
  transform: scale(var(--pile-scale, 1));
  transform-origin: bottom center;
}
.pile-item {
  width: 58px; height: 58px;
  margin: -14px 0 0 -14px;
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  background: #fff center/cover no-repeat;
  /* 亮边 + 投影，压在深色箱底上更清楚 */
  box-shadow: 1px 2px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,248,230,.4);
  transition: transform .12s ease;
  position: relative;
  cursor: pointer;
}
.pile-item:hover {
  transform: translateY(-8px) scale(1.55) rotate(0deg);
  z-index: 30 !important;
  box-shadow: 3px 5px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,248,230,.6);
}
/* 空箱子提示（由 .pile:empty::after 渲染，这里只兜底旧类名） */
.pile-empty {
  color: rgba(255, 238, 205, .75);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* 进度条 */
.progress-card {
  margin-top: 16px;
  padding: 14px 18px;
  display: none;
}
.progress-card.on { display: block; }
.progress-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 14px; margin-bottom: 9px;
}
.bar {
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    45deg, var(--green) 0 10px, #2f9c5b 10px 20px);
  transition: width .22s ease;
}
.bar-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.upload-log { margin-top: 10px; font-size: 13px; line-height: 1.7; }
.upload-log .ok { color: #1f7a44; font-weight: 700; }
.upload-log .err { color: #c22; font-weight: 700; }

/* ==========================================================
   展示模式：图钉墙
   ========================================================== */

.wall-wrap { padding: 0 0 70px; }

.wall {
  position: relative;
  margin: 20px 14px;
  min-height: 320px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  padding: 34px 26px 26px;
  /* 软木板 */
  background-color: #c98b4b;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0,0,0,.10) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 78%, rgba(0,0,0,.09) 0 2px, transparent 2px),
    radial-gradient(circle at 86% 40%, rgba(255,255,255,.07) 0 2px, transparent 2px);
  background-size: 30px 30px, 42px 42px, 36px 36px;
  box-shadow: inset 0 0 60px rgba(60,30,0,.35), 7px 7px 0 rgba(27,27,31,.8);
  overflow: hidden;
}

.wall-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background: rgba(0,0,0,.13);
  border-bottom: 3px solid rgba(27,27,31,.5);
  display: flex; align-items: center; padding: 0 14px;
  font-size: 12px; font-weight: 700; color: #402a12;
  letter-spacing: 1px;
}

.wall-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 20px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* 一张钉在墙上的表情 */
.pinned {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 9px 9px 26px;
  box-shadow: 4px 5px 0 rgba(27,27,31,.55);
  transition: transform .13s ease, box-shadow .13s ease;
  width: 150px;
}
.pinned:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.045);
  box-shadow: 6px 9px 0 rgba(27,27,31,.6);
  z-index: 20;
}
.pinned .ph {
  width: 100%;
  height: 118px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-radius: 2px;
  overflow: hidden;
}
.pinned .ph img {
  max-width: 100%;
  max-height: 118px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}
.pinned .cap {
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b6b6b;
}
/* 图钉 */
.pin-head {
  position: absolute;
  top: -13px; left: 50%;
  width: 20px; height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,.55);
  background: radial-gradient(circle at 34% 30%, #ff8b7a, #d92b12 68%);
  box-shadow: 0 2px 3px rgba(0,0,0,.45), inset -2px -2px 3px rgba(0,0,0,.25);
  z-index: 3;
}
.pin-head::after {
  content: "";
  position: absolute;
  left: 50%; top: 15px;
  width: 3px; height: 9px;
  margin-left: -1.5px;
  background: linear-gradient(#8d8d8d, #4a4a4a);
  border-radius: 1px;
}
/* 图钉颜色循环 */
.pinned:nth-child(5n+1) .pin-head { background: radial-gradient(circle at 34% 30%, #ff8b7a, #d92b12 68%); }
.pinned:nth-child(5n+2) .pin-head { background: radial-gradient(circle at 34% 30%, #8fd0ff, #1667c9 68%); }
.pinned:nth-child(5n+3) .pin-head { background: radial-gradient(circle at 34% 30%, #ffe98a, #e0a800 68%); }
.pinned:nth-child(5n+4) .pin-head { background: radial-gradient(circle at 34% 30%, #a8f0a0, #1f8a3c 68%); }
.pinned:nth-child(5n+5) .pin-head { background: radial-gradient(circle at 34% 30%, #e3b6ff, #8a2be2 68%); }

/* 轻微随机倾斜 */
.pinned:nth-child(4n+1) { transform: rotate(-1.6deg); }
.pinned:nth-child(4n+2) { transform: rotate(1.2deg); }
.pinned:nth-child(4n+3) { transform: rotate(-0.7deg); }
.pinned:nth-child(4n+4) { transform: rotate(1.9deg); }
.pinned:hover { transform: translateY(-6px) rotate(0deg) scale(1.045); }

.copy-toast {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) rotate(-7deg) scale(.8);
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity .16s, transform .16s;
}
.copy-toast.on {
  opacity: 1;
  transform: translate(-50%,-50%) rotate(-7deg) scale(1);
}

/* ---------- 空状态 ---------- */

.empty {
  text-align: center;
  padding: 60px 20px;
  color: #8a8a8a;
}
.empty .big { font-size: 52px; margin-bottom: 10px; }
.empty p { font-weight: 700; }

/* ---------- 页脚 ---------- */

.foot {
  text-align: center;
  padding: 22px;
  font-size: 12px;
  color: #9a9a9a;
}
.foot a { color: #6b6b6b; }

/* ---------- 全屏拖拽遮罩 ---------- */

.drag-veil {
  position: fixed; inset: 0;
  background: rgba(255,210,63,.28);
  border: 6px dashed var(--ink);
  display: none;
  align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900;
  z-index: 200;
  pointer-events: none;
}
.drag-veil.on { display: flex; }

/* ---------- 响应式 ---------- */

@media (max-width: 600px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .logo { font-size: 19px; }
  .pinned { width: 118px; padding: 7px 7px 22px; }
  .pinned .ph { height: 92px; }
  .pinned .ph img { max-height: 92px; }
  .hint-sheet h1 { font-size: 21px; }
  .wall { margin: 12px 8px; padding: 30px 12px 18px; }
  .pile-item { width: 38px; height: 38px; margin: -8px 0 0 -8px; }
}