/* 添灯油（赞助）按钮与对话框的样式。
   逐条搬自 Claude r4 `demos/rooms/sponsor.css`，只改两处，其余数值、注释、类名不动：
     1. 纹理路径改到本产品的素材目录：../house/walnut.webp → ../../assets/house/walnut.webp，
        ../decor/paper-night.webp → ../../assets/decor/paper-night.webp
        （本文件在 styles/components/，产品素材在 assets/）。
     2. 末尾补一条：<600px 时门楣里的按钮只剩灯形，文字收进无障碍名（设计源写法一致，
        这里把话说明白，并保证 aria-label 之外的阅读顺序不乱）。

   加载顺序：tokens → fonts → decor → page-shell → components/sponsor.css → 页面自己的
   版式。按钮在门楣里（所以每个公开页面都引用本文件），对话框由 js/ui/sponsor.js 挂到
   body 末尾。

   世界观（§2.5）：WT-04 火有其薪 / WT-03 逐间点灯 / WT-13 主与客——赞助是“添一盏
   灯油”，客人添油是心意，不添也没关系，所以按钮安静、不用红、不用金币。
   与门楣上的铜饰区分：铜饰是圆的、没有字；它是一块带字的长方铜牌。 */

/* ---------- 门楣上的位置：主导航不再撑满，右端留给暗锁 ---------- */
.pm-lintel__in--sponsor .pm-nav { flex: 0 1 auto; }
.h-sponsor-slot { display: flex; align-items: center; gap: 12px; margin-left: 12px; margin-right: auto; }
.h-sponsor-slot::before { content: ""; width: 1px; height: 20px; background: rgb(211 180 116 / .45); }

/* ---------- 按钮：一块小铜牌 + 一盏小油灯 ---------- */
.h-sponsor { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 4px; cursor: pointer;
  color: #2A2116; font: 600 13px/1 var(--pm-font-sans); letter-spacing: .04em; white-space: nowrap;
  /* 静止时比“当前页”铜牌暗一档：--h-gilt-plate × 85%（#2A2116 在最暗处 #A2864E 上 4.56，达标） */
  background: linear-gradient(170deg, #D1C499 0%, #C0A975 40%, #AE945C 75%, #A2864E 100%);
  box-shadow: inset 0 0 0 1px rgb(255 248 220 / .35), inset 0 -1px 0 rgb(94 69 32 / .35), 0 1px 0 #3A2A12, 0 4px 8px -4px rgb(0 0 0 / .7);
  transition: background 200ms, box-shadow 200ms; -webkit-tap-highlight-color: transparent; }
.h-sponsor svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.h-sponsor .h-lamp-body { fill: #5E4520; }
.h-sponsor .h-lamp-flame { fill: #7A5C2C; transition: fill 200ms, filter 200ms; }
.h-sponsor:hover, .h-sponsor:focus-visible { background: var(--h-gilt-plate, linear-gradient(170deg, #F6E6B4 0%, #E2C78A 40%, #CDAE6C 75%, #BE9D5C 100%)); }
.h-sponsor:hover .h-lamp-flame, .h-sponsor:focus-visible .h-lamp-flame { fill: #FFD27A; filter: drop-shadow(0 0 4px rgb(255 210 122 / .9)) drop-shadow(0 0 8px rgb(255 190 90 / .6)); }
.h-sponsor:active { box-shadow: inset 0 2px 4px rgb(60 40 10 / .45), inset 0 0 0 1px rgb(94 69 32 / .4); }
.h-sponsor:focus-visible { outline: 2px solid #1A1206; outline-offset: 0; box-shadow: 0 0 0 4px #E8C878; }
/* 移动抽屉底部那一块：整宽、高 48，字与图标都比门楣上的大一号 */
.h-sponsor--wide { width: 100%; height: 48px; justify-content: center; font-size: 15px; gap: 10px; border-radius: 4px; }
.h-sponsor--wide svg { width: 20px; height: 20px; }
/* 窄屏抽屉（js/shell.js 的 buildDrawer 长出来的那颗按钮）：贴到面板底边，
   与上面六个条目之间留出整段空隙。
   做法：抽屉面板是 `display:grid; grid-auto-rows:min-content`，在 min-content
   行里 `margin-top:auto` 没有余量可吸（实测铜牌停在第 7 个条目下面、离底边还
   有 300px）。所以只在「面板里确实有这颗铜牌」时把行分成
   `auto auto 1fr`（头 / 条目 / 余量+铜牌），铜牌放在最后那一行的底部：
   条目行仍是 min-content，不会被拉高（试过 `auto 1fr auto`，六个条目会被撑到
   80px 高）。只改行高分配，不动抽屉的定位、滚动与动画。
   焦点环不在这里重写：.h-sponsor:focus-visible 自带的深色 outline + 金色光晕
   在浅色面板上比 --pm-accent 细线更清楚（见回报）。 */
.pm-drawer__in:has(> .h-sponsor--wide) { grid-template-rows: auto auto 1fr; }
.pm-drawer__in .h-sponsor--wide { align-self: end; }

/* 中屏（导航收进抽屉）：铜牌、暗锁、菜单钮靠右成一簇；窄屏：只剩圆铜钮 */
@media (max-width: 899px) {
  /* page-shell.css §34 在 ≤1099 用 `body.h-house .h-sponsor-slot` 把左边距收成 6px
     （它比 `.h-sponsor-slot` 高一档），所以这里要带同样的前缀才盖得住：
     设计源在 ≤899 让整簇靠右，靠的是这条 margin-left:auto。 */
  body.h-house .pm-lintel__in--sponsor .h-sponsor-slot { margin-left: auto; margin-right: 0; }
  body.h-house .pm-lintel__in--sponsor .h-sponsor-slot::before { display: none; }
  body.h-house .pm-lintel__in--sponsor .pm-menubtn { margin-left: 0; }
}
@media (max-width: 599px) {
  .h-sponsor-slot .h-sponsor { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 6px;   /* RW-31：圆形是铜饰与暗锁的形状，赞助钮在窄屏也保持“牌”的方角 */
    background: radial-gradient(circle at 36% 30%, #D9C08A, #A98C55 48%, #6E5428 85%);   /* 比暗锁静止时（亮度 85%）不更显眼 */
    box-shadow: inset 0 0 0 1px #5E4520, inset 0 0 0 3px rgb(255 240 200 / .3), 0 2px 4px rgb(0 0 0 / .6); }
  .h-sponsor-slot .h-sponsor .h-sponsor__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .h-sponsor-slot .h-sponsor svg { width: 20px; height: 20px; }
}

/* 梦的一侧没有它：r3 的梦侧页面（beyond/map/lost/desk）本来就不带这块铜牌——
   梦导航是红线，墙外不谈钱。本产品的门楣是同一份静态标记，所以在梦态藏起来。 */
html[data-state="dream"] .h-sponsor-slot { display: none; }

/* ---------- 对话框：拉开的胡桃木抽屉里，一页羊皮纸 ---------- */
.h-sp { border: 0; padding: 0; background: transparent; color: var(--pm-ink); width: min(440px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); overflow: visible; }
.h-sp::backdrop { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgb(10 8 6 / .55), rgb(10 8 6 / .8)); }
.h-sp__drawer { position: relative; padding: 16px 16px 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / .15) 30%, rgb(0 0 0 / .3)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #2E2016;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 10px 0 14px -8px rgb(0 0 0 / .6), inset -10px 0 14px -8px rgb(0 0 0 / .6); }
.h-sp__front { height: 40px; border-radius: 0 0 6px 6px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgb(255 230 180 / .12), rgb(0 0 0 / .2)), url("../../assets/house/walnut.webp") 0 0 / 512px 512px, #3A2818;
  box-shadow: inset 0 1px 0 rgb(255 220 170 / .25), inset 0 0 0 1px rgb(0 0 0 / .4), 0 34px 64px -20px rgb(10 8 4 / .85); }
.h-sp__front::before { content: ""; width: 64px; height: 12px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #F1DDA4, #A8894F 50%, #5E4520); box-shadow: 0 3px 4px rgb(0 0 0 / .6); }
.h-sp__leaf { position: relative; padding: 24px 26px 22px; border-radius: 2px 2px 0 0; text-align: center; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 80% 50% at 20% 0%, rgb(var(--h-candle, 255 206 128) / .22), transparent 70%), url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, var(--h-vellum, #EADFC6);
  box-shadow: inset 0 0 30px rgb(110 76 30 / .25), 0 -6px 14px rgb(0 0 0 / .35); }
.h-sp__kicker { display: block; font: 600 11px/1 var(--pm-font-sans); letter-spacing: .26em; color: #5E4526; margin-bottom: 8px; }
.h-sp__title { margin: 0 0 12px; font: 600 1.375rem/1.3 var(--pm-font-serif); color: var(--pm-ink); }
.h-sp__line { margin: 0 auto 16px; max-width: 26em; font: 1rem/1.75 var(--pm-font-serif); color: var(--pm-ink-2); overflow-wrap: anywhere; }
.h-sp__line[data-empty] { color: var(--pm-ink-3); font-style: italic; }
/* 二维码：铜框 + 四枚角钉；框里是站长放的图（示范里是占位，不能扫） */
.h-sp__qr { position: relative; width: 240px; height: 240px; margin: 0 auto; padding: 12px; box-sizing: content-box; border-radius: 4px;
  background: linear-gradient(160deg, #F1DDA4 0%, #C9A866 30%, #8A6C3A 55%, #D3B474 78%, #6E5428 100%);
  box-shadow: inset 0 0 0 1px rgb(255 248 220 / .5), inset 0 0 0 4px rgb(110 84 40 / .5), 0 10px 18px -8px rgb(0 0 0 / .6); }
.h-sp__qr img { display: block; width: 100%; height: 100%; object-fit: contain; background: #FBF6EA; border-radius: 1px; box-shadow: inset 0 0 0 1px rgb(110 76 30 / .4); }
.h-sp__pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0C4, #A8894F 60%, #4A3618); box-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.h-sp__pin:nth-of-type(1) { left: 2px; top: 2px; } .h-sp__pin:nth-of-type(2) { right: 2px; top: 2px; } .h-sp__pin:nth-of-type(3) { left: 2px; bottom: 2px; } .h-sp__pin:nth-of-type(4) { right: 2px; bottom: 2px; }
/* 图缺失 / 加载失败：虚线铜框，空着 */
.h-sp__qr[data-missing] { background: transparent; box-shadow: none; }
.h-sp__qr[data-missing] img { display: none; }
.h-sp__qr[data-missing]::after { content: "二维码还没放上"; position: absolute; inset: 0; display: grid; place-items: center; border: 2px dashed #A8894F; border-radius: 4px;
  font: 600 15px/1.4 var(--pm-font-serif); color: #5E4526; background: rgb(168 137 79 / .08); }
.h-sp__qr[data-missing] .h-sp__pin { opacity: .45; }
.h-sp__cap { margin: 16px auto 0; max-width: 24em; font: .9375rem/1.7 var(--pm-font-serif); color: var(--pm-ink-2); }
.h-sp__draft { font: 11px var(--pm-font-sans); color: #8A6C3A; margin-left: 4px; }
.h-sp__link { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--pm-link); }
.h-sp__link[hidden] { display: none; }
.h-sp__actions { display: flex; justify-content: center; margin-top: 18px; }
.h-sp__close { min-width: 120px; }

/* 动效：抽屉 240ms 从下滑上来；纸从 1° 落正（WEB-M58） */
.h-sp[open] .h-sp__drawer, .h-sp[open] .h-sp__front { animation: h-sp-up 240ms var(--pm-ease-out, cubic-bezier(.2, .7, .2, 1)) both; }
.h-sp[open] .h-sp__leaf { animation: h-sp-settle 240ms var(--pm-ease-out, cubic-bezier(.2, .7, .2, 1)) 60ms both; }
@keyframes h-sp-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes h-sp-settle { from { transform: rotate(1deg) translateY(6px); } to { transform: none; } }
@keyframes h-sp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .h-sp[open] .h-sp__drawer, .h-sp[open] .h-sp__front, .h-sp[open] .h-sp__leaf { animation: h-sp-fade 80ms linear both; }
  .h-sponsor, .h-sponsor .h-lamp-flame { transition: none; }
}
html.pm-motion-off .h-sp[open] :is(.h-sp__drawer, .h-sp__front, .h-sp__leaf) { animation: h-sp-fade 80ms linear both; }
html.pm-tex-off :is(.h-sp__drawer, .h-sp__front, .h-sp__leaf) { background-image: none !important; }

@media (max-width: 599px) {
  .h-sp__qr { width: 200px; height: 200px; }
  .h-sp__leaf { padding: 22px 18px 18px; }
}