/* 聊城《光岳楼上的砖声》—— 工作台布局
   一张现成的工坊底图 + DOM 纸面板；砖样、断面、拓片都是 canvas 自己画的。
   这一版只重排布局：步骤条进顶栏、条件固定在面板里、一屏一个主按钮。 */

@import url('./presentation.css');
.brick-game{
  --ink:#244b50; --paper:#f1e6cf; --red:#a3472e; --line:#b8a078; --muted:#726b58;
  --title:"STKaiti","KaiTi","Songti SC",serif;
  --body:"Noto Serif SC","STSong","SimSun",serif;
  --paper-bg:linear-gradient(#f8e9cee6,#f8e9cee6),url('../../public/reference/water-ink/T_Paper.webp') center/260px;
  padding:0;border:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;overflow:hidden;
  background:#544431 url('./art/liaocheng/workbench.webp') center/cover;
  color:var(--ink);font-family:var(--body);
}
.brick-game::backdrop{background:#141e1b}
.brick-game *{box-sizing:border-box}
.brick-game button{font:inherit;cursor:pointer;transition:background .15s,transform .12s,box-shadow .15s}
.brick-game button:disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed}
.brick-game :focus-visible{outline:3px solid #e8c274;outline-offset:3px}

/* ---------------- 骨架 ---------------- */
.brick-shell{
  height:100dvh;display:flex;flex-direction:column;gap:12px;
  padding:18px clamp(14px,2.4vw,44px) 16px;
  background:linear-gradient(#12211d33,#12211d00 22%,#12211d55);
}
.brick-head{
  flex:none;display:flex;align-items:center;gap:18px;
  padding:12px 18px;background:#1c4244f2;border:1px solid #a78c5c99;box-shadow:0 8px 24px #0e1a1866;
  color:#f4e8c8;
}
.brick-brand{display:flex;align-items:center;gap:12px;min-width:0}
.brick-brand span{font-family:var(--title);font-size:26px;letter-spacing:.16em;white-space:nowrap}
.brick-brand i{font-style:normal;opacity:.5}
.brick-brand b{font-weight:400;font-size:15px;letter-spacing:.1em;color:#e6d7b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brick-nav{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:14px;letter-spacing:.08em}
.brick-nav[hidden]{display:none}
.brick-nav[hidden]+.brick-tools{margin-left:auto}
.brick-nav span{display:flex;align-items:center;gap:7px;color:#a9bdb8;white-space:nowrap}
.brick-nav span i{font-style:normal;width:24px;height:24px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:11px}
.brick-nav span.is-done{color:#d9c58e}
.brick-nav span.is-done i{background:#c8a86a;border-color:#c8a86a;color:#1c4244}
.brick-nav span.is-current{color:#fff3d6}
.brick-nav span.is-current i{background:#f0dfb2;border-color:#f0dfb2;color:#1c4244}
.brick-nav b{font-weight:400;color:#6f8b86}
.brick-tools{display:flex;align-items:center;gap:8px;margin-left:14px}
.brick-chip{
  font-size:13px;padding:7px 12px;color:#f2e6c6;background:#20494b;border:1px solid #8fa79a;
}
.brick-chip:hover{background:#2b5b5d}
.brick-close{
  width:40px;height:40px;display:grid;place-items:center;font-size:24px;line-height:1;
  color:#1c4244;background:#f2e6c6;border:1px solid #c8b48b;border-radius:50%;
}
.brick-close:hover{background:#fff5de}

.brick-body{flex:1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr);gap:20px;min-height:0}
.brick-work{position:relative;display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.brick-stage-title{
  position:absolute;top:-6px;left:-6px;z-index:2;margin:0;padding:10px 22px;
  font-family:var(--title);font-size:26px;letter-spacing:.14em;color:#2a3f3c;
  background:var(--paper-bg);border-left:4px solid var(--red);box-shadow:0 6px 18px #12211d55;
}
.brick-stage-title[hidden]{display:none}
.brick-canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.brick-canvas-wrap canvas{max-width:100%;max-height:100%;display:block}

.brick-object{
  position:relative;border:0;background:transparent;padding:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.brick-object canvas{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #12211d66)}
.brick-object:hover canvas{filter:drop-shadow(0 10px 18px #12211d88) brightness(1.04)}
.brick-object-hint{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font-size:13px;padding:5px 14px;color:#3f4a45;background:#f4e9d0e6;border:1px solid #b8a07888;white-space:nowrap;
}
.brick-object-section{position:relative;display:block;width:100%;height:100%}
.brick-object-section canvas{
  width:100%;height:100%;object-fit:cover;border-radius:6px;
  box-shadow:inset 0 0 40px #1b171066,0 12px 30px #12211d66;
}

.brick-samples{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.brick-samples:empty{display:none}
.brick-sample{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 6px 6px;
  background:var(--paper-bg);border:1px solid #b8a078aa;box-shadow:0 4px 12px #12211d44;color:var(--ink);
  text-align:left;
}
.brick-sample canvas{width:100%;height:auto;display:block}
.brick-sample b{font-family:var(--title);font-size:26px;font-weight:600;line-height:1;letter-spacing:.06em}
.brick-sample span{position:absolute;right:8px;bottom:8px;font-size:11px;color:var(--muted)}
.brick-sample span.is-done{color:#2f6459}
.brick-sample.is-selected{border-color:#2f6459;box-shadow:0 0 0 2px #2f645966,0 6px 16px #12211d55}
.brick-sample.is-selected::after{content:'';position:absolute;inset:3px;border:1px solid #2f645955;pointer-events:none}
.brick-sample.is-shake{animation:bk-shake .42s}
@keyframes bk-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* ---------------- 右侧纸面板 ---------------- */
.brick-paper{background:var(--paper-bg);border:1px solid #b8a07899;box-shadow:0 14px 34px #12211d77,inset 0 0 0 1px #ffffff33}
.brick-panel{
  display:flex;flex-direction:column;gap:12px;padding:22px 24px;min-height:0;overflow:auto;
}
.brick-panel::-webkit-scrollbar{width:8px}
.brick-panel::-webkit-scrollbar-thumb{background:#c3ac82;border-radius:4px}
.brick-kicker{margin:0;font-size:11px;letter-spacing:.2em;color:var(--muted)}
.brick-panel h1,.brick-panel h2{
  margin:0;font-family:var(--title);font-weight:600;letter-spacing:.06em;line-height:1.2;color:var(--ink);
}
.brick-panel h1{font-size:40px}
.brick-panel h2{font-size:34px}
.brick-lede{margin:0;font-size:14px;line-height:1.8;color:#46524d}
.brick-sample-line{display:flex;align-items:center;gap:12px;font-size:15px}
.brick-sample-line b{display:grid;place-items:center;min-width:46px;padding:2px 12px;font-size:26px;font-weight:500;background:#2a5f66;color:#f3ead6}
.brick-wave{height:96px;border-block:1px solid #baaa8f88;background:#e9dcc266}
.brick-wave canvas{width:100%;height:100%;display:block}
.brick-sound{margin:0;font-size:14px;line-height:1.7;min-height:24px}

.brick-cond-block{padding-top:10px;border-top:1px dashed #b8a07877}
.brick-conditions{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.brick-conditions li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:#6a6552}
.brick-conditions li i{font-style:normal;color:#a08b64;flex:none}
.brick-conditions li.is-done{color:#2f6459}
.brick-conditions li.is-done i{color:#2f6459}
.brick-cond-hint{margin:6px 0 0;font-size:12px;color:#8a7c60}

.brick-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.brick-panel.is-intro .brick-actions{margin-top:auto}
.brick-row{display:flex;gap:8px}
.brick-row>*{flex:1}
.brick-btn,.brick-primary{
  font-size:16px;line-height:1.2;padding:12px 18px;letter-spacing:.05em;border-radius:2px;
}
.brick-btn{background:#f8efd9;border:1px solid #b8a078;color:var(--ink)}
.brick-btn:hover{background:#fff6e2}
.brick-btn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 -3px 0 #2a5f66}
.brick-primary{background:var(--red);border:1px solid #c98b62;color:#fff3da;box-shadow:inset 0 0 0 3px #e0b18444}
.brick-primary:hover:not(:disabled){background:#b95232}
.brick-primary:disabled{background:#9a8b79;border-color:#b3a48f;color:#efe4cd}

/* ---------------- 表格 / 步骤 / 进度 / 登记 ---------------- */
.brick-table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.4}
.brick-table th,.brick-table td{border:1px solid #b8a07866;padding:7px 8px;text-align:left;font-weight:400;vertical-align:top}
.brick-table thead th{font-size:11px;color:var(--muted);letter-spacing:.08em}
.brick-table tbody th{font-family:var(--title);font-size:20px;width:44px;text-align:center}
.brick-table tr.is-selected{background:#2a5f661f;box-shadow:inset 0 0 0 2px #2a5f66}

.brick-rub-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.brick-rub-steps li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #b8a07844}
.brick-rub-steps li i{
  font-style:normal;width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid #b8a078;color:var(--muted);font-size:12px;
}
.brick-rub-steps li b{display:block;font-size:14px;font-weight:500}
.brick-rub-steps li span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.brick-rub-steps li.is-current{border-color:#2a5f66;background:#2a5f660f}
.brick-rub-steps li.is-current i{border-color:#2a5f66;color:#2a5f66}
.brick-rub-steps li.is-done i{background:#2a5f66;border-color:#2a5f66;color:#f3ead6;font-size:0}
.brick-rub-steps li.is-done i::after{content:'✓';font-size:13px}
.brick-progress-block{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding-top:10px;border-top:1px dashed #b8a07877}
.brick-progress-block>span{font-size:12px;color:var(--muted);letter-spacing:.1em;align-self:center}
.brick-progress-block>b{font-size:26px;font-weight:500}
.brick-bar{grid-column:1/-1;position:relative;height:14px;border-radius:7px;border:1px solid #b8a078;background:#e6d9bd;overflow:hidden}
.brick-bar i{position:absolute;left:0;top:0;bottom:0;background:#2a5f66;border-radius:7px;transition:width .2s}
.brick-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:#a8452caa}
.brick-progress-block .brick-cond-hint{grid-column:1/-1;margin:2px 0 0}

.brick-ledger{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.brick-ledger canvas{width:100%;height:auto;display:block}
.brick-ledger .brick-conditions{margin-top:6px}
.brick-stamp{
  align-self:flex-start;padding:10px 26px;
  font-family:var(--title);font-size:24px;letter-spacing:.18em;color:#a8452c;
  border:3px dashed #a8452c77;background:#f6ecd6cc;transform:rotate(-3deg);
}
.brick-stamp.is-done{border-style:solid;background:#f6ecd6f0;transform:rotate(-6deg) scale(1.04);animation:bk-stamp .4s ease-out}
@keyframes bk-stamp{0%{transform:rotate(-6deg) scale(1.5);opacity:0}100%{transform:rotate(-6deg) scale(1.04);opacity:1}}

/* ---------------- 开场 / 页脚 / 提示 ---------------- */
.brick-intro-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.brick-intro-art canvas{max-width:100%;max-height:100%;filter:drop-shadow(0 12px 18px #12211d66)}
.brick-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.brick-steps li{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border:1px solid #b8a07844;font-size:14px}
.brick-steps li b{font-family:var(--title);color:#a8452c;font-weight:400;font-size:15px}
.brick-quote{margin:0;padding-left:14px;border-left:3px solid #b58b49;font-size:14px;color:#6b5b44;letter-spacing:.08em}
.brick-note{margin:0;font-size:12px;color:#8a7c60;line-height:1.7}
.brick-fine{margin:0;font-size:11px;color:#8a7c60}

.brick-footer{
  flex:none;display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:var(--paper-bg);border:1px solid #b8a07899;box-shadow:0 10px 26px #12211d66;
}
.brick-footer p{margin:0;font-size:16px;line-height:1.6;color:#3a4642}
.brick-footer [data-save]{margin-left:auto;font-size:11px;color:#9d4528;text-align:right;max-width:38%}

.brick-toast{
  position:absolute;left:50%;bottom:96px;transform:translate(-50%,8px);z-index:8;
  padding:9px 18px;font-size:14px;color:#f7ecd5;background:#244b5ae6;border:1px solid #a58c6355;
  opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;max-width:80vw;text-align:center;
}
.brick-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------- 玩法卡 / 拓片特写 ---------------- */
.brick-rules,.brick-lightbox{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#101a18b8}
.brick-rules[hidden],.brick-lightbox[hidden]{display:none}
.brick-rules-card{
  width:min(880px,92vw);max-height:88vh;overflow:auto;padding:32px 38px 28px;
  background:var(--paper-bg);border:1px solid #b8a078;box-shadow:0 26px 70px #00000099;color:var(--ink);
}
.brick-rules-card h2{font-family:var(--title);font-size:34px;margin:6px 0 16px;font-weight:600}
.brick-rules-card ol{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.brick-rules-card li{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:baseline;border-bottom:1px dashed #b8a07855;padding-bottom:8px}
.brick-rules-card li b{font-size:16px;font-weight:500;color:#2a5f66}
.brick-rules-card li span{font-size:13px;line-height:1.7}
.brick-rules-card .brick-primary{width:100%;margin-top:10px;font-size:17px}
.brick-lightbox figure{margin:0;text-align:center}
.brick-lightbox canvas{max-width:min(1000px,90vw);max-height:66vh;box-shadow:0 20px 60px #00000080;border:1px solid #d9c79b55}
.brick-lightbox figcaption{margin:10px 0 14px;color:#e8dcc0;font-size:12px;letter-spacing:.06em}
.brick-lightbox .brick-chip{margin:0 auto;display:block}

/* ---------------- 拓印画布 ---------------- */
.brick-rub-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.brick-rub-wrap canvas{max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;box-shadow:0 14px 30px #12211d77}
.brick-rub-wrap canvas.is-laying-paper{cursor:grab}
.brick-print-wrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.brick-print-wrap canvas{max-width:100%;max-height:100%;box-shadow:0 14px 30px #12211d77}

.brick-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brick-game h1:focus,.brick-game h2:focus{outline:none}

@media (max-width:1000px){
  .brick-body{grid-template-columns:1fr;grid-template-rows:minmax(180px,.9fr) minmax(260px,1.1fr)}
  .brick-nav{display:none}
  .brick-brand b{display:none}
  .brick-panel{overflow:auto}
}
@media (max-width:640px){
  .brick-shell{padding:10px}
  .brick-head{padding:8px 12px;gap:10px}
  .brick-brand span{font-size:20px}
  .brick-samples{gap:6px}
  .brick-sample b{font-size:20px}
  .brick-panel h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .brick-sample.is-shake{animation:none}
  .brick-stamp.is-done{animation:none}
}