/* 致谢 · 灯簿（js/views/thanks.js）自己的版式。
   逐条取自 Claude r3 `demos/rooms/roll.css`（r4 从 r3/roll.html 的 <style>
   之外的房间样式抽出）：题头与灯数、灯罩签筛选、三个架子（铜杆挂签 /
   灯架油灯 / 羊皮纸账页）、空的一格，以及窄屏与减动效两档收尾。
   与设计源只有一处改动：url() 的素材路径换到本产品——`../decor/`、
   `../house/` 改成 `../../assets/decor/`、`../../assets/house/`（样式在
   styles/pages/ 下，assets 在站点根）。其余数值、选择器、层叠顺序照原样。
   色值保持设计源写法（木色、铜色、烛光都是这间房的固有色，不并入 --pm-*）；
   文字底色靠 page-shell.css 的 --h-on / --h-on-2 / --h-candle / --h-vellum。 */

.h-roll-head { padding: var(--pm-s-8) 0 var(--pm-s-6); max-width: 36em; }
.h-roll-count { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 13px/1.5 var(--pm-font-mono); color: var(--h-on-2); }
.h-roll-count b { font: 600 15px var(--pm-font-serif); color: var(--h-on); }

/* ---------- 本地控件：灯罩签（筛选，aria-pressed 单选组） ---------- */
.h-shades { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 var(--pm-s-7); padding-top: 14px; border-top: 1px solid rgb(211 180 116 / .35); }
.h-shade { position: relative; min-width: 96px; height: 44px; padding: 0 18px; border: 0; cursor: pointer; color: #2A2116; font: 600 14px/1 var(--pm-font-serif);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);   /* 灯罩的梯形 */
  background: linear-gradient(180deg, #E9D7A8, #C9A866 55%, #9A7A42); filter: brightness(.82) saturate(.85);
  box-shadow: inset 0 1px 0 rgb(255 248 220 / .7); transition: filter 200ms, transform 200ms var(--pm-ease-out); }
.h-shade::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 3px; border-radius: 2px; background: #5E4520; }
.h-shade small { display: block; margin-top: 3px; font: 600 9px/1 var(--pm-font-sans); letter-spacing: .16em; color: rgb(42 33 22 / .75); }
.h-shade-wrap { position: relative; display: grid; justify-items: center; }
/* 选中 = 灯亮了：罩子变亮，罩下落一片暖光 */
.h-shade-wrap::after { content: ""; width: 120%; height: 26px; margin-top: -2px; pointer-events: none; opacity: 0; transition: opacity 200ms;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgb(var(--h-candle) / .55), transparent 75%); }
.h-shade[aria-pressed="true"] { filter: none; transform: translateY(2px); }
.h-shade-wrap:has(.h-shade[aria-pressed="true"])::after { opacity: 1; }
.h-shade:hover { filter: brightness(.95); }
.h-shade:focus-visible { outline: 2px solid #1A1206; outline-offset: 2px; box-shadow: 0 0 0 5px #E8C878; clip-path: none; }

/* ---------- 一类一个架子 ---------- */
.h-shelf { margin-bottom: var(--pm-s-8); }
.h-shelf[hidden] { display: none; }
.h-shelf__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; color: var(--h-on); }
.h-shelf__head h2 { margin: 0; font: 600 var(--pm-fs-h2)/1.3 var(--pm-font-serif); color: var(--h-on); }
.h-shelf__head p { margin: 0; font-size: 13px; color: var(--h-on-2); }
.h-shelf__head::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, rgb(211 180 116 / .55), transparent); }
.h-who { font: 600 1.0625rem/1.3 var(--pm-font-serif); color: #221D17; overflow-wrap: anywhere; }
.h-who[data-anon] { color: #5E5347; font-weight: 400; }
.h-when { font: 12px/1.4 var(--pm-font-mono); color: #554A3E; }

/* 补灯的人：铜杆 + 修灯签 */
.h-mend-rail { position: relative; height: 8px; margin: 0 -8px; border-radius: 3px; background: linear-gradient(180deg, #F1DDA4, #A8894F 45%, #5E4520); box-shadow: 0 4px 8px rgb(0 0 0 / .55); }
.h-mends { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; list-style: none; margin: 0; padding: 0; }
.h-mend { position: relative; padding-top: 34px; transform: rotate(var(--tilt, -.8deg)); transform-origin: 50% 0; }
.h-mend:nth-child(even) { --tilt: .9deg; } .h-mend:nth-child(3n) { --tilt: -.3deg; }
.h-mend::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 30px; background: linear-gradient(#2A1E12, #5E4520); }   /* 挂绳 */
.h-mend__tag { position: relative; padding: 18px 16px 14px; border-radius: 6px 6px 14px 14px; display: grid; gap: 4px;
  background: radial-gradient(ellipse 80% 70% at 25% 0, rgb(var(--h-candle) / .22), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum);
  box-shadow: inset 0 0 0 1px rgb(110 76 30 / .4), inset 0 0 18px rgb(110 76 30 / .22), 2px 12px 16px -8px rgb(0 0 0 / .8); }
.h-mend__tag::before { content: ""; position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;   /* 绳孔 + 铜圈 */
  background: radial-gradient(circle, #1A140C 38%, #6E5428 44%, #E2C78A 62%, #8A6C3A); }
.h-mend__note { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgb(110 76 30 / .35); font-size: 13px; line-height: 1.55; color: #554A3E; }
.h-mend__note::before { content: "修好了："; color: #5E4526; font-weight: 600; }

/* 添油的人：灯架 + 一盏盏油灯 + 象牙名卡（不记数额） */
.h-oil-ledge { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 26px 18px; list-style: none; margin: 0; padding: 0 12px 26px; position: relative; }
.h-oil-ledge::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 16px; border-radius: 2px;   /* 灯架的木板 */
  background: linear-gradient(180deg, rgb(255 230 180 / .16), transparent 30%, rgb(0 0 0 / .35)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #3A2818;
  box-shadow: inset 0 1px 0 #A8894F, 0 10px 16px rgb(0 0 0 / .6); }
.h-oil { display: grid; justify-items: center; gap: 8px; text-align: center; }
.h-oil svg { width: 56px; height: 56px; overflow: visible; filter: drop-shadow(2px 6px 4px rgb(0 0 0 / .7)); }
/* 火苗的光：<use> 的内部选不到，所以光晕画在灯的外面（灯嘴上方一团暖光，随烛火呼吸） */
.h-oil__lamp { position: relative; width: 56px; height: 56px; }
.h-oil__lamp::after { content: ""; position: absolute; right: -6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 214 140 / .75), rgb(255 190 90 / .25) 45%, transparent 70%); animation: h-breathe 3.2s ease-in-out infinite; }
.h-oil:nth-child(3n+2) .h-oil__lamp::after { animation-delay: -1.1s; } .h-oil:nth-child(3n) .h-oil__lamp::after { animation-delay: -2.3s; }
.h-oil__card { display: grid; gap: 2px; width: 100%; padding: 8px 8px 7px; border-radius: 2px; background: linear-gradient(180deg, #F3EBD6, #E2D5B8);
  box-shadow: 0 0 0 1px rgb(110 76 30 / .35), 0 4px 6px -2px rgb(0 0 0 / .6); }
.h-oil-note { margin: 18px 0 0; font-size: 13px; color: var(--h-on-2); }

/* 送物的人：羊皮纸账页 */
.h-gifts { width: 100%; border-collapse: collapse; font-size: 14px; }
.h-gifts caption { text-align: left; }
.h-gifts th { text-align: left; padding: 0 10px 10px; font: 600 11px var(--pm-font-sans); letter-spacing: .14em; color: #5E4526; border-bottom: 2px solid rgb(110 76 30 / .45); }
.h-gifts td { padding: 11px 10px; vertical-align: middle; border-bottom: 1px solid rgb(110 76 30 / .22); }
.h-gifts td:first-child { width: 7.5em; }
.h-gifts .h-kind { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #221D17; white-space: nowrap; }
.h-gifts .pm-badge { --s: 26px; }
.h-gifts a { color: var(--pm-link); }
.h-gifts tr:hover td { background: rgb(var(--h-candle) / .10); }

/* 空的一格：一盏没点的灯。上线前三个架子都只有这一格——灯是灰的，字是弱的，
   高度按一盏灯算，不留大片空白。 */
.h-unlit-slot { display: grid; justify-items: center; gap: 8px; padding: 22px; color: var(--h-on-2); font-size: 14px; text-align: center; }
.h-unlit-slot svg { width: 44px; height: 44px; opacity: .7; }
.h-unlit-slot svg { filter: grayscale(1) brightness(.6); }   /* 没点的灯：灰、暗，没有光晕 */
/* 补灯：铜杆底下只挂这一格，宽度按一张签算 */
.h-mends > .h-unlit-slot { max-width: 220px; }
/* 添油：灯架上只摆这一盏，高度与一盏油灯 + 名卡相当 */
.h-oil-ledge > .h-unlit-slot { padding: 12px 8px 18px; }
/* 送物：账页是浅色纸，字要换成墨色，不能沿用暗处的浅字 */
.h-gifts .h-unlit-slot { padding: 18px 8px 16px; color: var(--pm-ink-3); }
.h-gifts .h-unlit-slot svg { opacity: .5; }

@media (max-width: 599px) {
  .h-shades { gap: 10px; }
  .h-shade { min-width: 76px; padding: 0 12px; }
  .h-oil-ledge { grid-template-columns: repeat(2, 1fr); }
  .h-mends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .h-mend__tag { padding: 16px 12px 12px; }
  .h-gifts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .h-gifts tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid rgb(110 76 30 / .22); }
  .h-gifts td { padding: 0; border: 0; }
  .h-gifts td:first-child { width: auto; grid-column: 2; grid-row: 1; text-align: right; }
  /* 空态那一行只有一个跨四列的 td，窄屏上也占满整行，别被上面的规则挤到右栏 */
  .h-gifts td[colspan] { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .h-oil__lamp::after { animation: none; } .h-shade, .h-shade-wrap::after { transition: none; } }
html.pm-motion-off .h-oil__lamp::after, html.pm-motion-lite .h-oil__lamp::after { animation: none; }
html.pm-tex-off .h-mend__tag, html.pm-tex-off .h-oil-ledge::after { background-image: none; }