/* ============================================================
   apps/sokoban.html 样式 · 仓库灯下
   - 主题：深夜仓库 / 木箱 / 工服 / 聚光灯
   - 设计：少蓝紫、多木褐与钢灰，灯光暖琥珀
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* body 用 min-height（而非 height:100%）：让 body 高度随内容增长，保证 sticky 顶栏全程有效 */
html { height: 100%; }
body { min-height: 100%; }
:root {
  /* —— 仓库空间 —— */
  --bg-deep:    #1a1614;   /* 仓库深处背景（深木炭） */
  --bg-floor:   #221d1a;   /* 主背景（暖暗灰） */
  --bg-floor-2: #2a231e;   /* 章节分隔微亮 */
  --bg-card:    #2c2520;   /* 卡片底：略暖 */
  --bg-card-hi: #3a3128;   /* 卡片悬停/激活 */

  /* —— 文字 —— */
  --ink:        #f5ebd6;   /* 暖米白 */
  --ink-soft:   #c8b89a;   /* 次要文字 */
  --ink-mute:   #8a7d6a;   /* 辅助 */
  --ink-faint:  #5a5147;   /* 极弱 */

  /* —— 木箱 —— */
  --wood-light: #c89968;
  --wood:       #8b5e3c;
  --wood-deep:  #5c3a21;
  --wood-edge:  #3a2614;

  /* —— 钢墙 —— */
  --steel:      #4a4a4a;
  --steel-hi:   #6a6a6a;
  --steel-dark: #2c2c2c;

  /* —— 灯光 —— */
  --amber:      #f59e0b;
  --amber-glow: #fbbf24;
  --amber-soft: rgba(251,191,36,0.18);

  /* —— 工服 —— */
  --worker:     #ef6c4d;   /* 工人背心橙红 */
  --worker-hi:  #ff8a6b;
  --worker-dk:  #b0421f;

  /* —— 状态 —— */
  --ok:         #84cc16;   /* 通关绿 */
  --warn:       #f59e0b;
  --bad:        #dc2626;

  /* 工人为内嵌 SVG，无需颜色变量 */

  /* —— 字体 —— */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --font-body:    'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    /* 右上角聚光灯 */
    radial-gradient(ellipse 60% 50% at 85% -10%, rgba(251,191,36,0.10) 0%, transparent 55%),
    /* 左下角微暖反光 */
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(239,108,77,0.06) 0%, transparent 60%),
    /* 仓库墙底色 */
    var(--bg-floor);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
  position: relative;
}
/* 仓库砖墙纹理 + 噪声叠层（纯 CSS，SVG noise base64） */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* 砖缝横线 */
    repeating-linear-gradient(
      0deg,
      transparent 0 38px,
      rgba(0,0,0,0.18) 38px 39px
    ),
    /* 砖缝竖线（错位） */
    repeating-linear-gradient(
      90deg,
      transparent 0 64px,
      rgba(0,0,0,0.10) 64px 65px,
      rgba(0,0,0,0.10) 96px 97px
    ),
    /* 颗粒噪声 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
kbd { font-family: var(--font-mono); }

main {
  flex: 1;
  padding: 32px 40px 60px;
  max-width: 1280px; width: 100%;
  margin: 0 auto;
}

/* ============================================================
   HERO · 仓库楼层信息
   ============================================================ */
.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  padding: 22px 28px 26px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, rgba(58,49,40,0.55), rgba(44,37,32,0.35));
  border: 1px solid rgba(200,184,154,0.10);
  border-left: 3px solid var(--amber);
  position: relative;
  overflow: hidden;
}
.head::after {
  /* 楼层编号右上角大数字 */
  content: attr(data-floor-no);
  position: absolute;
  right: 18px; top: -22px;
  font-family: var(--font-display);
  font-size: 180px; line-height: 1;
  font-weight: 500;
  color: rgba(251,191,36,0.06);
  pointer-events: none;
  font-style: italic;
}
.head .left .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.5em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.head .left .eyebrow::before {
  content: '◆ ';
  color: var(--amber);
  margin-right: 2px;
}
.head h1 {
  font-family: var(--font-display);
  font-size: 44px; line-height: 1.05;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.head h1 .sub-floor {
  font-size: 22px;
  color: var(--ink-soft);
  margin-left: 14px;
  font-style: italic;
}
.head .left .sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 520px;
  line-height: 1.6;
}
.head .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.head .right .stars {
  display: flex; gap: 4px;
  font-size: 18px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.head .right .stars .lit { color: var(--amber); text-shadow: 0 0 8px var(--amber-soft); }

/* ============================================================
   棋盘容器 + 聚光灯罩
   ============================================================ */
.game-area {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.board-card {
  background: linear-gradient(180deg, #1c1814, #15110e);
  border: 1px solid rgba(200,184,154,0.12);
  padding: 26px;
  position: relative;
}
/* 聚光灯：从左上偏右斜射下 */
.board-card::before {
  content: '';
  position: absolute;
  top: -40px; left: 20%; width: 60%; height: 80px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(251,191,36,0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(2px);
}
.board-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(200,184,154,0.08);
  pointer-events: none;
}
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(200,184,154,0.12);
}
.board-head .l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
}
.board-head .info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.board-head .info b {
  color: var(--ink);
  font-weight: 600;
  margin: 0 2px;
}

.board {
  --cell-size: 48px;
  display: grid;
  gap: 0;
  background: var(--steel-dark);
  padding: 0;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border: 2px solid var(--steel);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 8px 32px rgba(0,0,0,0.45),
    inset 0 0 60px rgba(0,0,0,0.45);
  position: relative;
}
/* 棋盘左上角投影，模拟聚光从左上斜射 */
.board::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 25% 15%, rgba(251,191,36,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 85%, rgba(0,0,0,0.30) 0%, transparent 65%);
  z-index: 4;
}

/* ============================================================
   棋盘元素 · 仓库风
   ============================================================ */
.tile {
  width: var(--cell-size); height: var(--cell-size);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* 水泥地：底色 + 噪点 */
  background-color: #3a342c;
  background-image:
    /* 细微裂纹 */
    radial-gradient(circle at 12% 18%, rgba(0,0,0,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgba(0,0,0,0.15) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 88%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,0.03) 0 1px, transparent 2px),
    /* 整体颗粒 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  transition: background 0.12s ease;
}
/* 棋盘格轻微不规则（不靠奇偶色，靠明暗交错 2×2 块）*/
.tile.alt { background-color: #322c25; }

/* 钢制货架墙 */
.tile.wall {
  background-color: var(--steel-dark);
  background-image:
    /* 金属百叶竖纹 */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 4px
    ),
    /* 顶部受光 */
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 30%),
    /* 底部阴影 */
    linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 35%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.55),
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(0,0,0,0.4);
}
.tile.wall::before {
  /* 顶角螺栓 */
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--steel-hi), var(--steel-dark) 70%);
  box-shadow:
    calc(var(--cell-size) - 14px) 0 0 0 var(--steel-dark),
    0 calc(var(--cell-size) - 14px) 0 0 var(--steel-dark),
    calc(var(--cell-size) - 14px) calc(var(--cell-size) - 14px) 0 0 var(--steel-dark);
  background-image: radial-gradient(circle at 30% 30%, var(--steel-hi), var(--steel-dark) 70%);
  background-repeat: no-repeat;
}

/* 目标点：仓库地面喷涂的叉车位标记 */
.tile .target-dot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tile .target-dot::before {
  content: '';
  position: absolute;
  width: 70%; height: 70%;
  border: 2px dashed var(--amber);
  border-radius: 50%;
  opacity: 0.85;
  animation: targetPulse 2.4s ease-in-out infinite;
}
.tile .target-dot::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber-soft), 0 0 0 2px rgba(251,191,36,0.25);
}
@keyframes targetPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* 木箱：横木条 + 上下钉带 + 中心编号 */
.tile .box {
  position: absolute;
  inset: 4px;
  background-color: var(--wood);
  background-image:
    /* 上下钉带（深色横条） */
    linear-gradient(180deg,
      transparent 0 12%,
      rgba(0,0,0,0.35) 12% 18%,
      transparent 18% 82%,
      rgba(0,0,0,0.35) 82% 88%,
      transparent 88% 100%
    ),
    /* 中间横木纹 */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.10) 0 1px,
      transparent 1px 6px
    ),
    /* 木纹斜纹 */
    repeating-linear-gradient(
      45deg,
      rgba(92,58,26,0.20) 0 2px,
      transparent 2px 8px
    ),
    /* 整体光照 */
    linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 35%, rgba(0,0,0,0.30) 100%);
  border: 1.5px solid var(--wood-edge);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.30),
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(200,153,104,0.15),
    0 3px 6px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
  z-index: 2;
}
.tile .box::before {
  /* 中心烙编号占位（每关箱子印关号） */
  content: attr(data-box-no);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  color: rgba(58,38,20,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  letter-spacing: 0.02em;
}
.tile .box::after {
  /* 四角铁钉 */
  content: '';
  position: absolute;
  inset: 5px;
  background:
    radial-gradient(circle at 12% 12%, var(--steel-dark) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 12%, var(--steel-dark) 0 1.5px, transparent 2px),
    radial-gradient(circle at 12% 88%, var(--steel-dark) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 88%, var(--steel-dark) 0 1.5px, transparent 2px);
  pointer-events: none;
}

/* 箱子归位：木 → 金箔（工单 #007）
   ------------------------------------------------------------
   旧版的 background-image 仍保留木纹（linear-gradient 木条 + 90deg
   repeating-linear-gradient 横木纹 + 高光），被木纹覆盖后金底几乎
   看不见。新版完全替换 background-image：
   - 移除所有木纹 gradient
   - 加入金箔径向高光（左上→中心→右下）
   - 加入底部暖金渐变模拟反光
   - 加入顶部金色光带（金属感）
   - 加入金箔细密点状纹理（颗粒感）
*/
.tile.box-on .box {
  background-color: #fbbf24;
  background-image:
    /* 顶部金带（金属高光） */
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0% 0,
      rgba(255,255,255,0.20) 0 6%,
      transparent 6% 14%
    ),
    /* 底部暖金反光 */
    linear-gradient(0deg,
      rgba(180,83,9,0.30) 0% 0,
      transparent 0 35%,
      rgba(255,255,255,0.15) 35% 60%,
      transparent 60% 100%
    ),
    /* 左上→右下大径向高光（金箔反光） */
    radial-gradient(ellipse 90% 75% at 28% 22%,
      rgba(255,255,255,0.65) 0%,
      rgba(254,243,199,0.30) 25%,
      transparent 60%
    ),
    /* 底部中心暖反光 */
    radial-gradient(ellipse 60% 50% at 50% 95%,
      rgba(180,83,9,0.45) 0%,
      transparent 70%
    ),
    /* 金箔细密点状纹理（颗粒感） */
    radial-gradient(circle at 20% 30%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 70% 50%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 40% 75%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 85% 25%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 15% 80%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 55% 15%, rgba(146,64,14,0.18) 0 0.8px, transparent 1.5px),
    /* 底色 */
    linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  border-color: #b45309;
  box-shadow:
    inset 0 -2px 0 rgba(146,64,14,0.45),
    inset 0 2px 0 rgba(255,255,255,0.50),
    inset 0 0 0 1px rgba(146,64,14,0.20),
    0 0 0 2px rgba(251,191,36,0.55),
    0 0 22px rgba(251,191,36,0.65),
    0 4px 10px rgba(0,0,0,0.55);
  animation: boxGlow 1.4s ease-out;
}
/* 烙编号：金色加深（与木色编号对比） */
.tile.box-on .box::before {
  color: rgba(120,53,15,0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
/* 钉带：从木色改金棕色（更协调） */
.tile.box-on .box::after {
  background:
    radial-gradient(circle at 12% 12%, var(--amber) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 12%, var(--amber) 0 1.5px, transparent 2px),
    radial-gradient(circle at 12% 88%, #b45309 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 88%, #b45309 0 1.5px, transparent 2px);
}
@keyframes boxGlow {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 工人 SVG 容器：铺满所在格子，居中放置内嵌 SVG */
.tile .player {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.tile .player svg {
  width: 100%;
  height: 100%;
  display: block;
  /* 默认朝向下（SVG 正绘）；左右通过 .face-left 水平镜像翻转 */
  transition: transform 0.12s ease;
}
/* 朝向：STATE.face === 'left' 时水平翻转 */
.tile .player.face-left svg {
  transform: scaleX(-1);
}
/* 朝上/朝下不做几何变换（工人正/背视图由 SVG 本身表现），保留 data-face 供扩展 */

/* 撤销栈里的"上一步"提示（半透明幽灵箱） */
.tile .ghost {
  position: absolute; inset: 4px;
  border: 1px dashed rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.06);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   右栏 · 仓库工作台
   ============================================================ */
.right-col {
  display: flex; flex-direction: column; gap: 14px;
}
.workbench {
  background: var(--bg-card);
  border: 1px solid rgba(200,184,154,0.10);
  border-top: 2px solid var(--amber);
  padding: 0;
}
.workbench-head {
  padding: 14px 18px 10px;
  border-bottom: 1px dashed rgba(200,184,154,0.12);
  display: flex; align-items: center; justify-content: space-between;
}
.workbench-head .l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4em;
  color: var(--amber);
  text-transform: uppercase;
}
.workbench-head .gear {
  color: var(--ink-faint);
  font-size: 14px;
}
.workbench-body { padding: 16px 18px 18px; }

.stat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(200,184,154,0.08);
  padding: 12px 14px;
  position: relative;
}
.stat .l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat .v {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat .v small {
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: 4px;
  font-weight: 400;
}
.stat.timer .v { color: var(--amber); }
.stat.timer.warn .v { color: var(--warn); }
.stat.timer.bad  .v { color: var(--bad); }
.stat.status .v {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
}
.stat.status.idle    .v { color: var(--ink-mute); }
.stat.status.playing .v { color: var(--amber); }
.stat.status.won     .v { color: var(--ok); }

/* ============================================================
   P2 窄屏紧凑状态条（hud-strip）
   ------------------------------------------------------------
   仅在 @media (max-width:900px) 显示。桌面端保持 display:none。
   4 格紧凑等宽：关/计时/待归位/状态，状态复用 .idle/.playing/.won
   色板（与 workbench 同源）。绝不破坏桌面端既有布局。
   ============================================================ */
.hud-strip {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 10px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(58,52,44,0.55), rgba(26,22,20,0.55));
  border: 1px solid rgba(200,184,154,0.10);
  border-top: 2px solid var(--amber);
}
.hs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.hs-item .hs-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hs-item b {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hs-item:has(#hsTimer) b { color: var(--amber); }
/* 状态色：复用 idle/playing/won */
.hs-item.idle    b { color: var(--ink-mute); }
.hs-item.playing b { color: var(--amber); }
.hs-item.won     b { color: var(--ok); }

/* 本关最佳 */
.stat.best {
  grid-column: span 2;
  background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
  border-color: rgba(251,191,36,0.20);
}
.stat.best .l { color: var(--amber); }
.stat.best .v { color: var(--amber); font-size: 16px; font-family: var(--font-body); }

/* 操作按钮 */
.actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  position: relative;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(200,184,154,0.20);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(251,191,36,0.05);
}
.btn.primary {
  background: var(--amber);
  color: #1a1614;
  border-color: var(--amber);
  font-weight: 700;
}
.btn.primary:hover {
  background: var(--amber-glow);
  border-color: var(--amber-glow);
  color: #1a1614;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink-soft); border-color: rgba(200,184,154,0.20); }

/* 关卡导航按钮（紧贴工作台底）*/
.lvl-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 4px;
}

/* ============================================================
   章节点 · 仓库楼层进度
   ============================================================ */
.chapter-bar {
  margin-top: 22px;
  background: var(--bg-card);
  border: 1px solid rgba(200,184,154,0.10);
  padding: 14px 18px;
  position: relative;
}
.chapter-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber) 70%, transparent);
  opacity: 0.4;
}
.chapter-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.chapter-head .l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.chapter-head .l::before { content: '◆ '; color: var(--amber); }
.chapter-head .progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.chapter-head .progress b { color: var(--amber); font-weight: 600; }

.chapter-track {
  position: relative;
  display: flex; align-items: center;
  height: 38px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,184,154,0.15) transparent;
}
.chapter-track::-webkit-scrollbar { height: 4px; }
.chapter-track::-webkit-scrollbar-thumb { background: rgba(200,184,154,0.15); }

.chapter-seg {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(200,184,154,0.15);
  transform: translateY(-50%);
  pointer-events: none;
}
.chapter-seg-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--amber-glow));
  box-shadow: 0 0 8px var(--amber-soft);
  transition: width 0.4s cubic-bezier(0.4, 0.7, 0.3, 1);
  pointer-events: none;
}

.chapter-nodes {
  position: relative;
  display: flex;
  min-width: 100%;
  justify-content: space-between;
}
.chapter-node {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.chapter-pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-floor);
  border: 1.5px solid rgba(200,184,154,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.chapter-node:hover .chapter-pin {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
}
.chapter-node.cleared .chapter-pin {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1614;
  font-weight: 700;
  box-shadow: 0 0 10px var(--amber-soft);
}
.chapter-node.current .chapter-pin {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg-floor);
  font-weight: 700;
  transform: scale(1.2);
  box-shadow: 0 0 0 4px var(--amber-soft), 0 0 16px var(--amber-soft);
}
.chapter-node.locked { cursor: not-allowed; }
.chapter-node.locked .chapter-pin {
  background: var(--bg-card);
  border-style: dashed;
  color: var(--ink-faint);
}
.chapter-node .floor-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.chapter-node.cleared .floor-tag { color: var(--amber); }
.chapter-node.current  .floor-tag { color: var(--ink); }

/* ============================================================
   操作说明 + 状态信息
   ============================================================ */
.keys {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid rgba(200,184,154,0.10);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.9;
}
.keys kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(200,184,154,0.20);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 0 2px;
}
.status-info {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1px solid rgba(200,184,154,0.10);
  border-left: 3px solid var(--worker);
}
.status-info .guest { color: var(--worker); }
.status-info b { color: var(--ink); }
.status-info a {
  color: var(--amber);
  border-bottom: 1px dashed var(--amber);
}

/* 「已为你跳到 X 关」横幅 */
.resume-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06));
  border: 1px solid var(--amber);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  animation: rbSlide 0.3s ease;
}
.resume-banner .rb-icon { font-size: 16px; color: var(--amber); }
.resume-banner .rb-text { flex: 1; }
.resume-banner .rb-text b { color: var(--amber); font-weight: 700; }
.resume-banner .rb-close {
  border: 0; background: transparent;
  color: var(--ink-soft); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px;
}
.resume-banner .rb-close:hover { color: var(--amber); }
@keyframes rbSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   胜利 modal
   ============================================================ */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-mask.show { display: flex; animation: maskFade 0.25s ease; }
@keyframes maskFade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: linear-gradient(180deg, #2c2520, #1f1a16);
  border: 1px solid rgba(200,184,154,0.20);
  border-top: 3px solid var(--amber);
  max-width: 460px;
  width: calc(100% - 40px);
  padding: 40px 32px 32px;
  text-align: center;
  position: relative;
  animation: modalSlide 0.32s cubic-bezier(0.4, 0.7, 0.3, 1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.modal h2.win { color: var(--amber); }
.modal .sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.modal .stars-big {
  font-size: 28px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  color: var(--ink-faint);
}
.modal .stars-big .lit {
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-soft);
}
.modal .result {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.modal .result .r {
  padding: 14px 6px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(200,184,154,0.10);
}
.modal .result .r .l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.modal .result .r .v {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.modal .badge {
  display: inline-block;
  padding: 5px 14px;
  font-size: 11px;
  letter-spacing: 0.15em;
  background: rgba(0,0,0,0.30);
  color: var(--ink-soft);
  border: 1px solid rgba(200,184,154,0.20);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.modal .badge.guest { color: var(--worker); border-color: var(--worker); }
.modal .badge.star  { color: var(--amber); border-color: var(--amber); background: rgba(251,191,36,0.10); }
.modal .actions {
  display: flex; gap: 10px; flex-direction: row;
}
.modal .actions .btn { flex: 1; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 10px 18px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--amber);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: all 0.22s ease;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--bad); color: var(--bad); }
.toast.success { border-color: var(--ok); color: var(--ok); }

/* ============================================================
   载入动效
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spotlightSweep {
  from { opacity: 0.6; transform: translateX(-30%); }
  to   { opacity: 1;   transform: translateX(0); }
}

/* 进场序列 */
.head            { opacity: 0; animation: fadeLeft 0.5s ease-out 0.05s forwards; }
.board-card      { opacity: 0; animation: fadeUp   0.5s ease-out 0.20s forwards; }
.workbench       { opacity: 0; animation: fadeUp   0.5s ease-out 0.30s forwards; }
.keys            { opacity: 0; animation: fadeUp   0.5s ease-out 0.36s forwards; }
.status-info     { opacity: 0; animation: fadeUp   0.5s ease-out 0.40s forwards; }
.chapter-bar     { opacity: 0; animation: fadeUp   0.5s ease-out 0.48s forwards; }

/* 章节点 stagger */
.chapter-nodes .chapter-node {
  opacity: 0;
  animation: fadeIn 0.32s ease-out forwards;
}
.chapter-nodes .chapter-node:nth-child(1)  { animation-delay: 0.55s; }
.chapter-nodes .chapter-node:nth-child(2)  { animation-delay: 0.58s; }
.chapter-nodes .chapter-node:nth-child(3)  { animation-delay: 0.61s; }
.chapter-nodes .chapter-node:nth-child(4)  { animation-delay: 0.64s; }
.chapter-nodes .chapter-node:nth-child(5)  { animation-delay: 0.67s; }
.chapter-nodes .chapter-node:nth-child(6)  { animation-delay: 0.70s; }
.chapter-nodes .chapter-node:nth-child(7)  { animation-delay: 0.73s; }
.chapter-nodes .chapter-node:nth-child(8)  { animation-delay: 0.76s; }
.chapter-nodes .chapter-node:nth-child(9)  { animation-delay: 0.79s; }
.chapter-nodes .chapter-node:nth-child(10) { animation-delay: 0.82s; }
.chapter-nodes .chapter-node:nth-child(n+11) { animation-delay: 0.86s; }
.chapter-nodes .chapter-node:nth-child(n+21) { animation-delay: 0.90s; }

/* 棋盘首屏渲染：轻微聚光灯扫过 */
.board::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(251,191,36,0.18) 45%,
    rgba(251,191,36,0.05) 55%,
    transparent 100%);
  animation: spotlightSweep 0.9s ease-out 0.35s both;
  z-index: 5;
}
@keyframes spotlightSweep {
  from { opacity: 0.6; transform: translateX(-30%); }
  to   { opacity: 1;   transform: translateX(0); }
}

/* 棋盘 cell 进场 pop（仅整关加载时，由 JS 给 #board 挂 .is-entering 触发；
   tryMove/undo 也会 innerHTML 重建 tile，但不挂该 class，动画不重播，避免整盘闪烁）*/
.board.is-entering .tile {
  animation: tilePop 0.36s cubic-bezier(0.4, 0.7, 0.3, 1) both;
}
@keyframes tilePop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.board.is-entering .tile:nth-child(1)   { animation-delay: 0.30s; }
.board.is-entering .tile:nth-child(2)   { animation-delay: 0.32s; }
.board.is-entering .tile:nth-child(3)   { animation-delay: 0.33s; }
.board.is-entering .tile:nth-child(4)   { animation-delay: 0.34s; }
.board.is-entering .tile:nth-child(5)   { animation-delay: 0.35s; }
.board.is-entering .tile:nth-child(6)   { animation-delay: 0.36s; }
.board.is-entering .tile:nth-child(7)   { animation-delay: 0.37s; }
.board.is-entering .tile:nth-child(8)   { animation-delay: 0.38s; }
.board.is-entering .tile:nth-child(9)   { animation-delay: 0.39s; }
.board.is-entering .tile:nth-child(10)  { animation-delay: 0.40s; }
.board.is-entering .tile:nth-child(n+11) { animation-delay: 0.41s; }
.board.is-entering .tile:nth-child(n+21) { animation-delay: 0.43s; }
.board.is-entering .tile:nth-child(n+31) { animation-delay: 0.45s; }
.board.is-entering .tile:nth-child(n+41) { animation-delay: 0.47s; }
.board.is-entering .tile:nth-child(n+51) { animation-delay: 0.49s; }
.board.is-entering .tile:nth-child(n+61) { animation-delay: 0.51s; }
.board.is-entering .tile:nth-child(n+71) { animation-delay: 0.53s; }
.board.is-entering .tile:nth-child(n+81) { animation-delay: 0.55s; }

/* 用户偏好：减少动效 */
@media (prefers-reduced-motion: reduce) {
  .head, .board-card, .workbench, .keys, .status-info, .chapter-bar,
  .chapter-nodes .chapter-node, .tile {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tile .player, .tile .box {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  main { padding: 20px 14px 40px; }
  .game-area { grid-template-columns: 1fr; }
  .right-col { order: 2; }
  .head { padding: 18px 20px 20px; }
  .head h1 { font-size: 32px; }
  .head::after { font-size: 120px; top: -10px; }
  .board { --cell-size: 36px; }
  .chapter-nodes { min-width: 600px; gap: 2px; }
  .chapter-track { overflow-x: auto; padding-bottom: 4px; }
  /* P2 窄屏紧凑状态条：棋盘上方常驻，关/计时/待归位/状态 4 格 */
  .hud-strip { display: grid; }
}
@media (max-width: 480px) {
  .board { --cell-size: 30px; }
  .stat .v { font-size: 20px; }
  .head h1 { font-size: 26px; }
  .head h1 .sub-floor { display: block; margin-left: 0; margin-top: 4px; }
}

/* ============================================================
   工单 #008（已下线）：原 Cookie 同意横幅防遮挡样式移除 —— 任务 7.7 横幅
   与法律页脚（黑色条）已下线，不再注入 #puzziq-consent-banner 元素。
   保留这段 CSS 已无作用对象，避免运行时无效规则堆积在此清除。
   ============================================================ */

/* 工单 #010：胜利弹窗新增「撤销复盘」共三个按钮，窄屏允许换行/竖排，避免文字挤破 */
.modal .actions { flex-wrap: wrap; }
.modal .actions .btn { min-width: 96px; }
@media (max-width: 480px) {
  .modal .actions .btn { flex: 1 1 100%; }
}