/* 意中阁 · 场景层（诗笺画卷 / 后续听曲房共用骨架） */

/* 场景页把竖排题签廊改为横排置顶，主视野整幅让给画面 */
body[data-scene="poem"] .hall-body,
body[data-scene="music"] .hall-body { flex-direction: column; gap: 14px; }
body[data-scene="poem"] .view,
body[data-scene="music"] .view { width: 100%; flex: none; }
body[data-scene="poem"] .signboard,
body[data-scene="music"] .signboard {
  order: -1; width: auto; border-left: none; border-bottom: 1px solid var(--line);
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; padding: 0 0 12px;
}
body[data-scene="poem"] .sign-col,
body[data-scene="music"] .sign-col {
  writing-mode: horizontal-tb; letter-spacing: .08em; font-size: 14px; padding: 3px 0;
}
body[data-scene="poem"] .signboard-gloss,
body[data-scene="music"] .signboard-gloss { display: none; }

/* ── 诗笺 · 亭台楼阁水潭花枝 ── */
.poem-scene { position: relative; }
.garden-stage {
  position: relative; width: 100%; aspect-ratio: 1824 / 1026;
  min-height: 430px; overflow: hidden;
  border: 1px solid var(--line);
  background: #2A3230 url("art/yizhongge-poem-garden.png") center center / cover no-repeat;
}
.garden-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 40%, rgba(18, 22, 20, .34) 100%);
}
.garden-mist {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 20% at 50% 58%, rgba(235, 240, 235, .38), transparent 72%);
  animation: garden-drift 18s ease-in-out infinite alternate;
}
@keyframes garden-drift {
  from { transform: translateX(-3%); opacity: .38; }
  to   { transform: translateX(3%);  opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .garden-mist { animation: none; } }

.garden-sign {
  position: absolute; right: 14px; bottom: 13px;
  padding: 6px 12px; font-size: 11px; letter-spacing: .18em;
  color: #EADFC6; background: rgba(26, 30, 27, .76);
  border: 1px solid rgba(200, 175, 125, .42);
}

/* 石桌上的那一张纸：卷边、纸纹、投影、轻微俯视透视 */
.desk-paper {
  position: absolute; left: 20%; top: 45%; width: 60%; height: 51%;
  box-sizing: border-box; padding: 18px 28px 13px;
  display: flex; flex-direction: column;
  background-color: #F7F1DF;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 105, 80, .035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(120, 105, 80, .022) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255, 253, 244, .55), transparent 80%),
    radial-gradient(ellipse 60% 50% at 82% 88%, rgba(154, 132, 96, .1), transparent 78%);
  border: 1px solid rgba(140, 120, 88, .5);
  border-radius: 2px 5px 3px 4px;
  box-shadow: 0 32px 58px rgba(10, 14, 12, .58), 0 6px 14px rgba(10, 14, 12, .4),
              2px 2px 0 rgba(226, 214, 188, .7),
              inset 8px 0 18px rgba(150, 128, 94, .15), inset -8px 0 18px rgba(150, 128, 94, .15),
              inset 0 0 52px rgba(168, 146, 108, .2);
  transform: perspective(1000px) rotateX(3deg);
}
.desk-paper::before,
.desk-paper::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.desk-paper::before {
  top: 0; height: 12px; border-radius: 2px 5px 0 0;
  background: linear-gradient(180deg, rgba(120, 100, 70, .2), rgba(255, 255, 255, 0));
}
.desk-paper::after {
  bottom: 0; height: 16px; border-radius: 0 0 3px 4px;
  background: linear-gradient(0deg, rgba(105, 84, 56, .3), rgba(255, 255, 255, 0));
}

.paper-head {
  display: flex; justify-content: space-between; align-items: baseline; flex: none;
  font-size: 11px; color: #8A7A5C; letter-spacing: .14em;
  border-bottom: 1px solid rgba(150, 130, 96, .28); padding-bottom: 6px;
}
.paper-head .byline { color: #3A3226; font-size: 12px; letter-spacing: .2em; }

/* 竖排列组居中：flex 只加在无 writing-mode 的外层 .verse-wrap，
   子层 .verse 保持普通块流（绝不给它 display:flex），
   13 个 p 沿 block 轴自然成列，历史「压成 1 列」的坑不会触发。
   width:max-content 让列组只占自身宽度，justify-content:center 定水平居中；
   p 的 text-align:center 在 vertical-rl 下作用于 inline 轴＝列内垂直居中。 */
.verse-wrap {
  display: flex; align-items: center; justify-content: center;
  flex: 1; min-height: 0;
}
.desk-paper .verse {
  writing-mode: vertical-rl; text-orientation: mixed;
  display: block; box-sizing: border-box;
  width: max-content; max-width: 100%; height: 100%;
  flex: none; margin: 0; padding: 0 2px; overflow: hidden;
  color: #211F1A; line-height: 1.72; letter-spacing: .09em;
  font-size: calc(var(--fz-verse) * .86);
}
.desk-paper .verse p { margin: 0; white-space: nowrap; text-align: center; }
.desk-paper .verse .verse-title {
  padding-top: 1.2em; color: #8A7A5C; font-size: .9em; letter-spacing: .16em;
}
body[data-size="large"] .desk-paper .verse { font-size: calc(var(--fz-verse) * .76); }

.paper-foot {
  display: flex; align-items: center; gap: 10px; flex: none;
  border-top: 1px solid rgba(150, 130, 96, .28); padding-top: 6px;
  font-size: 11px; color: #8A7A5C; letter-spacing: .1em;
}
.paper-foot .seal { width: 20px; height: 20px; font-size: 11px; }
.paper-note { margin-left: auto; }

/* 画卷下方的读笺工具 */
.poem-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); font-size: 12px;
}
.poem-tools .ghost { width: auto; margin: 0; padding: 6px 12px; }
.poem-tools .spacer { flex: 1; }
.poem-tools a { color: var(--seal); font-size: 12px; }
.poem-colophons { margin-top: 18px; }

/* 诗笺列表：淡淡园林底纹，与画卷呼应 */
.card-grid--garden .poem-card { position: relative; overflow: hidden; }
.card-grid--garden .poem-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13;
  background: url("art/yizhongge-poem-garden.png") center 42% / cover no-repeat;
}
.card-grid--garden .poem-card > * { position: relative; }

/* ── 窄屏：画卷作横幅，纸回到文档流并转横排 ── */
@media (max-width: 900px) {
  .garden-stage {
    aspect-ratio: auto; height: 210px; min-height: 0;
    background-size: auto 150%; background-position: center 12%;
  }
  .desk-paper {
    position: relative; left: auto; top: auto; width: auto; height: auto;
    margin: 14px 0 0; padding: 14px 16px; transform: none;
    box-shadow: 0 10px 24px rgba(14, 18, 16, .32);
  }
  .verse-wrap { display: block; flex: none; }
  .desk-paper .verse {
    writing-mode: horizontal-tb; text-orientation: mixed;
    width: 100%; max-width: none; height: auto; overflow: visible;
    line-height: 2.05; text-align: center; letter-spacing: .1em;
    font-size: var(--fz-verse);
  }
  .desk-paper .verse p { margin: 0 0 2px; white-space: normal; text-align: center; }
  .desk-paper .verse .verse-title { padding-top: 0; font-size: 1em; color: var(--ink-soft); }
  .poem-tools .spacer { display: none; }
}