/* ============================================================
   舞台页（门厅 / 告示板）——按 Ardot 设计稿 1:1 复刻
   画布 1440×1024；main.js 按视口宽等比放大，横向铺满，
   高度超出垂直滚动看全；背景层在舞台内，与内容同坐标系
   ============================================================ */

.stage-page { overflow-x: hidden; }
.stage-wrap {
  position: relative; width: 100%; margin: 0;
  display: block; place-items: stretch;
  overflow: visible; background: #0D0907;
}
.stage { position: relative; flex: none; width: 1440px; height: 1024px; transform-origin: 0 0; }
.stage img { display: block; }

/* 门厅舞台：复刻设计稿帧的 clipsContent——立绘盒(1327×1617)超出画幅的
   部分（柜台以下的身体）由此裁掉，只保留设计稿可见的 1440×1024 */
#lobbyStage { overflow: hidden; z-index: 1; }

/* 等比适配模式：整幅设计稿完整落入视口——不裁内容、不滚动。
   由 body.stage-fit 负责把舞台容器视觉居中；容器自身尺寸由 JS
   按缩放比写死（1440s×1024s），overflow:hidden 裁掉舞台未缩放
   布局盒的溢出，保证任何视口高度下都不产生滚动。
   注意：容器背景必须透明——否则不透明 wrap 底色会盖住 .l-bgfull */
.stage-wrap[data-scale="fit"] { overflow: hidden; background: transparent; }

body.stage-fit {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12161C;
}

/* ============================================================
   门厅（设计稿 3:1）
   ============================================================ */
/* 门厅全屏背景层（AI 左右扩图 2240×1024）：fixed 层，尺寸由 JS 按
   缩放比写死（宽 2240s × 高 1024s），与舞台同中心同缩放——中间 1440s
   有效区与画幅严格对齐（= 设计稿背景），左右各 400s 延展区铺满宽屏 */
.l-bgfull {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
}
.l-bgfull img { width: 100%; height: 100%; object-fit: cover; display: block; }

.l-starmap { position: absolute; z-index: 2; left: 98px; top: 215px; width: 140px; height: 415px; pointer-events: none; }

/* 立绘：视觉中心，盒同设计稿（object-fit:cover 复刻 FILL 缩放；
   object-position 顶部对齐——保留帽顶，底部超出由画幅/柜台裁掉） */
.l-stand { position: absolute; z-index: 3; left: -107px; top: -110px; width: 1710px; height: 2083px; }
.l-stand img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transform-origin: 50% 70%;
  transition: transform .22s ease, filter .22s ease;
}
.l-stand.greeted img {
  transform: scale(1.006);
  filter: drop-shadow(0 0 12px rgba(232, 196, 138, .28));
}
/* 立绘热区（悬停出气泡 / 点击弹自我介绍），相对立绘定位 */
.l-stand-hit {
  position: absolute; left: 419px; top: -67px; width: 979px; height: 843px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.l-stand-hit:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: -12px; border-radius: 48%; }

/* 「你好」气泡（仅悬停立绘时出现） */
.l-hi {
  position: absolute; z-index: 12; left: 785px; top: 130px; width: 84px; height: 42px;
  background: rgba(248, 242, 230, .97); border-radius: 21px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
}
.l-hi.show { opacity: 1; transform: none; animation: hello-pop .24s ease-out; }
@keyframes hello-pop {
  from { opacity: 0; transform: translateY(7px) scale(.9); }
  to { opacity: 1; transform: none; }
}
.l-hi span { position: absolute; inset: 0; display: grid; place-items: center; font: 500 15px/1 var(--sans); color: #1A0F08; }
.l-hi i { position: absolute; left: 72px; top: 28px; width: 16px; height: 16px; background: rgba(248, 242, 230, .97); border-radius: 2px; transform: rotate(45deg); }

/* 前景柜台 */
.l-counter { position: absolute; z-index: 5; left: -9.82px; top: 732px; width: 1440px; height: 306px; }
.l-counter img { width: 100%; height: 100%; object-fit: cover; }

/* 台灯三层光（复刻设计稿：实色圆 + 模糊 + screen 混合） */
.l-glow { position: absolute; z-index: 6; left: 1092px; top: 560px; width: 300px; height: 280px; border-radius: 50%; background: #FFC97E; opacity: .5; filter: blur(55px); mix-blend-mode: screen; pointer-events: none; }
.l-core { position: absolute; z-index: 6; left: 1205px; top: 676px; width: 70px; height: 70px; border-radius: 50%; background: #FFE8B0; opacity: .8; filter: blur(16px); mix-blend-mode: screen; pointer-events: none; }
.l-lampshadow { position: absolute; z-index: 6; left: 1200px; top: 792px; width: 82px; height: 16px; border-radius: 50%; background: #1A0E08; opacity: .4; filter: blur(6px); pointer-events: none; }

/* 四物件（图 + 纸签，整组可点） */
.l-obj {
  position: absolute; z-index: 7; display: block;
}
.l-obj img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center;
  transition: transform .18s ease, filter .18s ease;
}
.l-obj .l-tag {
  position: absolute; width: 96px; height: 26px;
  background: rgba(248, 242, 230, .95); border-radius: 2px;
  font: 500 11px/26px var(--sans); color: #1A0F08; letter-spacing: 2px;
  text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.l-obj:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 7px; }
.l-obj.o-mail   { left: 136px; top: 681px; width: 170px; height: 113px; }
.l-obj.o-wine   { left: 375px; top: 688px; width: 195px; height: 131px; }
.l-obj.o-arch   { left: 667px; top: 642px; width: 145px; height: 176px; }
.l-obj.o-board  { left: 942px; top: 688px; width: 190px; height: 119px; }
.l-obj.o-mail  .l-tag { left: 38px;  top: 135px; }
.l-obj.o-wine  .l-tag { left: 50px;  top: 127px; }
.l-obj.o-arch  .l-tag { left: 25px;  top: 173px; }
.l-obj.o-board .l-tag { left: 35px;  top: 128px; }

@media (hover: hover) and (pointer: fine) {
  .l-obj:hover,
  .l-obj:focus-visible {
    z-index: 8;
  }
  .l-obj:hover img,
  .l-obj:focus-visible img {
    transform: translateY(-3px) scale(1.025);
    filter: drop-shadow(0 0 9px rgba(232, 196, 138, .58));
  }
  .l-obj:hover .l-tag,
  .l-obj:focus-visible .l-tag {
    background: #FFFDF6;
    box-shadow: 0 3px 12px rgba(232, 196, 138, .3), 0 2px 8px rgba(0, 0, 0, .35);
  }
  body:not(.b-page) .topbar nav a:hover,
  body:not(.b-page) .topbar nav a:focus-visible { color: var(--amber-soft); }
  body:not(.b-page) .topbar nav a:hover::after,
  body:not(.b-page) .topbar nav a:focus-visible::after { transform: scaleX(1); }
  body:not(.b-page) .topbar .brand:hover { color: var(--amber-soft); }
  body:not(.b-page) .topbar .btn:hover,
  body:not(.b-page) .topbar .btn:focus-visible {
    background: #D2332A;
    box-shadow: 0 0 14px rgba(232, 196, 138, .32);
    transform: translateY(-1px);
  }
  .l-bbtn:hover,
  .l-bbtn:focus-visible {
    background: #E8D9A8;
    color: #141D18;
    box-shadow: 0 0 14px rgba(232, 196, 138, .4);
    transform: translateY(-1px);
  }
}

body:not(.b-page) .topbar nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px; height: 1px;
  background: var(--amber-soft); transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
body:not(.b-page) .topbar nav a:focus-visible,
body:not(.b-page) .topbar .brand:focus-visible,
body:not(.b-page) .topbar .btn:focus-visible,
.l-bbtn:focus-visible,
.l-modal .x:focus-visible {
  outline: 2px solid var(--amber-soft);
  outline-offset: 3px;
}

body:not(.b-page) .topbar nav a:active { color: var(--amber-soft); }
body:not(.b-page) .topbar nav a:active::after { transform: scaleX(1); }
body:not(.b-page) .topbar .btn:active {
  box-shadow: 0 1px 0 var(--red-ink);
  transform: translateY(1px) scale(.98);
}
.l-obj:active img { transform: translateY(1px) scale(.99); }
.l-obj:active .l-tag { transform: translateY(1px) scale(.99); }
body:not(.b-page) .topbar .brand { transition: color .18s ease; }
.l-bbtn {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.l-bbtn:active { transform: translateY(1px) scale(.99); }
.l-modal .x { transition: color .15s, background .15s, transform .15s; }
.l-modal .x:active { transform: scale(.94); }

/* meta 行 */
.l-meta { position: absolute; z-index: 10; left: 48px; top: 144px; font: 400 10px/13px var(--mono); color: #C9B694; white-space: nowrap; }

/* 门厅 logo */
.l-logo {
  position: absolute; z-index: 10; left: 34px; top: 176px; width: 250px; height: 244px;
  display: grid; place-items: center; pointer-events: none;
}
.l-logo::before {
  content: ""; position: absolute; inset: -8px -6px;
  background: linear-gradient(160deg, #F4EAD2, #E6D6B2);
  border: 7px solid #6B4528; border-radius: 14px;
  box-shadow: inset 0 0 22px rgba(120, 80, 40, .35), 0 8px 18px rgba(10, 5, 2, .5);
}
.l-logo::after {
  content: ""; position: absolute; left: 18%; right: 18%; top: -30px; height: 26px;
  border-left: 2px solid #8A6A44; border-right: 2px solid #8A6A44;
  transform: perspective(40px) rotateX(-20deg); transform-origin: bottom;
}
.l-logo img { position: relative; width: 88%; height: 88%; object-fit: contain; filter: none; }
.l-starmap { display: none; }

/* 营业信息：无底板，直接落在 logo 下方 */
.l-board {
  position: absolute; z-index: 11; left: 28px; top: 444px; width: 262px; height: 150px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.l-board::before, .l-board::after { display: none; }
.l-board .t { position: absolute; left: 0; width: 262px; text-align: center; text-shadow: 0 2px 8px rgba(10,5,2,.85), 0 0 2px rgba(10,5,2,.9); }
.l-board .t-name  { top: 0; font: 500 13px/18px var(--sans); letter-spacing: 5px; color: #D9C9A6; text-indent: 5px; }
.l-board .t-hours { top: 22px; font: 700 26px/34px var(--serif); letter-spacing: 2px; color: #F7E4B0; }
.l-board .t-show  { top: 62px; font: 400 14px/20px var(--sans); letter-spacing: 1px; color: #EFE3CA; }
.l-bbtn {
  position: absolute; left: 51px; top: 100px; width: 160px; height: 34px;
  border: 1px solid rgba(232, 217, 168, .8); border-radius: 17px; background: rgba(30, 18, 10, .55);
  font: 500 12.5px/32px var(--sans); letter-spacing: 2px; color: #F8F2E6; text-align: center;
  transition: background .15s, color .15s;
}

/* 自我介绍弹窗（点击立绘弹出）——对话框样式 */
.l-modal {
  position: absolute; z-index: 50; left: 945px; top: 150px; width: 460px; height: auto;
  padding: 40px 34px 34px 38px; box-sizing: border-box;
  background: linear-gradient(180deg, #FDF8EC, #F6EBD3);
  border: 2px solid #8A5A28; border-radius: 22px;
  box-shadow: 0 0 0 5px rgba(253, 248, 236, .92), 0 0 0 7px rgba(138, 90, 40, .55), 0 18px 40px -4px rgba(26, 15, 8, .6);
  opacity: 0; pointer-events: none; transform: translateY(10px) scale(.97); transform-origin: 0 40%;
  transition: opacity .25s ease, transform .25s cubic-bezier(.3, 1.3, .5, 1);
}
.l-modal.show { opacity: 1; pointer-events: auto; transform: none; }
.l-modal::before {
  content: "渊丞 · 时之魔女"; position: absolute; left: 26px; top: -17px;
  padding: 5px 18px; border-radius: 999px;
  background: #3A2416; color: #F3DDB0; border: 1.5px solid #C8862A;
  font: 700 13px/18px var(--serif); letter-spacing: 3px;
}
.l-modal::after {
  content: ""; position: absolute; left: -17px; top: 120px; width: 26px; height: 26px;
  background: #FAF2DE; border-left: 2px solid #8A5A28; border-bottom: 2px solid #8A5A28;
  transform: rotate(45deg); border-radius: 0 0 0 5px;
}
.l-modal h3 { position: static; margin: 0 0 10px; font: 900 24px/32px var(--serif); color: #5A2A12; letter-spacing: 2px; }
.l-modal .x {
  position: absolute; right: 16px; top: 14px; left: auto; width: 28px; height: 26px;
  font: 500 18px/26px var(--sans); color: #8A5A28; text-align: center;
  border-radius: 3px; transition: color .15s, background .15s;
}
.l-modal .x:hover { color: #C0281F; background: rgba(192, 40, 31, .08); }
.l-modal p { position: static; width: auto; height: auto; margin: 0 0 11px; font: 400 14px/25px var(--sans); color: #3A2E20; }
.l-modal p:last-of-type { margin-bottom: 0; }
.l-modal p:last-of-type::after { content: " ▼"; color: #C8862A; font-size: 12px; animation: dlg-blink 1.1s ease-in-out infinite; }
@keyframes dlg-blink { 50% { opacity: .15; } }

/* ============================================================
   告示板（设计稿 4:76）——full-bleed 木墙；顶栏用全局 .topbar，
   墙面文字整体下移避让 60px 顶栏（原设计稿无顶栏）
   桌面端为等比 fit：整面板一屏放下（不滚动），居中呈现；
   面板外是暗化木墙（body 背景），面板带落影像挂墙的板子
   ============================================================ */
/* 告示板 fit 模式：高清底图完整铺满一屏，不裁切墙板边缘。 */
body.b-page.stage-fit {
  background: url(../img/bg-board-soft.webp?v=2) center / 100% 100% no-repeat fixed #2A1B12;
}
/* 面板内的木墙层与轻遮罩取消（已由 body 单层软木板承载，避免重影） */
.b-bg, .b-veil { display: none; }

.b-eyebrow { position: absolute; z-index: 5; left: 64px; top: 100px; font: 400 11px/15px var(--mono); color: #D9A96A; white-space: nowrap; }
.b-title { position: absolute; z-index: 5; left: 64px; top: 124px; font: 700 40px/57px var(--serif); color: #F7F0E0; }
.b-desc { position: absolute; z-index: 5; left: 64px; top: 188px; width: 760px; font: 400 14px/20px var(--sans); color: #D9CBB2; }
.b-foot { position: absolute; z-index: 5; left: 64px; top: 950px; font: 400 10px/13px var(--mono); color: #C9B694; white-space: nowrap; }

/* 纸条（绝对坐标 + 旋转，位置/角度均取自设计稿） */
.b-note {
  position: absolute; z-index: 6; display: block;
  padding: 26px 24px 0; border-radius: 2px; background: #F8F2E6; color: #1A0F08;
  transform: rotate(var(--rot, 0deg));
  transition: transform .18s ease, filter .18s ease;
}
.b-note:hover { transform: rotate(var(--rot, 0deg)) translateY(-3px); filter: brightness(1.02); }
.b-note .pin { position: absolute; border-radius: 50%; background: var(--red); transform: none; box-shadow: none; }
.b-note .nt { display: block; font: 500 13px/19px var(--sans); color: #8A5A28; }
.b-note .nx { display: block; font: 500 14px/20px var(--sans); }
.b-note .nb { display: block; font: 400 11px/18px var(--sans); color: #5A4A36; }

/* 纸条：三列两行，整齐钉在软木板内；字号放大、深色字，保证清晰 */
.b-note {
  width: 290px; height: 236px; padding: 34px 26px 0;
  background: linear-gradient(180deg, #FBF6EA, #F3EAD6);
  border-radius: 3px; color: #2A1A0E;
  box-shadow: 0 10px 22px rgba(30, 16, 6, .38), 0 2px 3px rgba(30, 16, 6, .3);
}
.b-note:hover { transform: rotate(calc(var(--rot, 0deg) * .3)) translateY(-5px); filter: none; box-shadow: 0 16px 30px rgba(30, 16, 6, .45), 0 2px 3px rgba(30, 16, 6, .3); }
.b-note .pin { left: 50%; top: 10px; width: 14px; height: 14px; margin-left: -7px; background: radial-gradient(circle at 35% 30%, #E4574B, #A8281E 70%); box-shadow: 0 3px 4px rgba(0, 0, 0, .4); }
.b-note .nt { font: 600 13px/16px var(--mono); letter-spacing: 3px; color: #8A4E14; margin: 0 0 10px; }
.b-note .nx-time { display: block; font: 700 26px/34px var(--mono); color: var(--red); margin: 0 0 6px; }
.b-note .nx { font: 700 19px/28px var(--serif); color: #2A1A0E; margin: 0 0 10px; }
.b-note .nb { font: 400 14.5px/24px var(--sans); color: #35261A; }
.b-note .nl { position: absolute; left: 26px; bottom: 18px; font: 600 13px/18px var(--sans); color: var(--red); letter-spacing: 1px; }
.b-note.soon { background: linear-gradient(180deg, #EFE6D2, #E2D6BC); }
.b-note.soon .nx { color: #6A5A44; }
/* 随手钉上去的感觉：大小、角度、纸色、钉法各不相同 */
.b-note.n1 { left: 248px; top: 322px; --rot: -2.6deg; width: 286px; height: 240px; border-radius: 2px 5px 3px 6px; }
.b-note.n2 { left: 600px; top: 342px; --rot: 1.9deg; width: 304px; height: 228px; border-radius: 4px 2px 6px 3px; background: linear-gradient(180deg, #EDE0B8, #E2D09C); }
.b-note.n3 { left: 952px; top: 314px; --rot: -1.3deg; width: 278px; height: 248px; border-radius: 3px 6px 2px 5px; background: linear-gradient(180deg, #EBD8C8, #DDC2AD); }
.b-note.n4 { left: 270px; top: 632px; --rot: 1.7deg; width: 296px; height: 226px; border-radius: 5px 2px 4px 3px; background: linear-gradient(180deg, #E6D3B0, #D9C298); }
.b-note.n5 { left: 616px; top: 620px; --rot: -2.2deg; width: 282px; height: 250px; border-radius: 2px 4px 6px 3px; background: linear-gradient(180deg, #DCDFD2, #CBD0BE); }
.b-note.n6 { left: 940px; top: 644px; --rot: 2.7deg; width: 294px; height: 226px; border-radius: 6px 3px 2px 5px; }
.b-note.n2 .pin, .b-note.n4 .pin, .b-note.n6 .pin {
  width: 84px; height: 24px; margin-left: -42px; top: -10px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(246,232,176,.88), rgba(228,208,140,.82)); box-shadow: 0 2px 4px rgba(0,0,0,.25); transform: rotate(-3deg);
}
.b-note.n6 .pin { transform: rotate(4deg); }
.b-note.n1 .pin { margin-left: -30px; }
.b-note.n3 .pin { margin-left: 8px; }
.b-note.n5 .pin { margin-left: -20px; }
.b-note.n2 .nl, .b-note.n4 .nl, .b-note.n6 .nl { left: 28px; }

/* ============================================================
   窄屏回退（<900px）：舞台退化为纵向流式排版
   ============================================================ */
@media (max-width: 900px) {
  .stage-page { overflow: visible; }
  body.stage-fit { display: block; min-height: 0; background: var(--tavern); }
  .stage-wrap { position: static; display: block; background: #120C09; min-height: 0; overflow: visible; }
  .stage { width: 100%; height: auto; transform: none !important; }

  /* —— 门厅移动端（顶栏用全局 .topbar）—— */
  .l-meta { display: none; }
  .l-bgfull { width: 100vw; height: 100vh; transform: none; left: 0; top: 0; }
  .l-bgfull img { object-fit: cover; object-position: 42% 35%; }
  .l-starmap, .l-glow, .l-core, .l-lampshadow, .l-hi { display: none; }
  .l-stand {
    position: relative; z-index: 3; left: auto; top: auto; grid-row: 2; grid-column: 1 / -1;
    width: min(100%, 460px); height: clamp(370px, 98vw, 390px);
    margin: -72px auto 0; overflow: hidden; pointer-events: none;
  }
  .l-stand img {
    position: absolute; top: 0; left: 50%; width: min(128vw, 520px); max-width: none;
    height: auto; object-fit: initial; object-position: center top;
    transform: translateX(-50%);
  }
  .l-stand.greeted img { transform: translateX(-50%) scale(1.006); }
  .l-stand-hit { left: 0; top: 0; width: 100%; height: 100%; }
  .stage:has(.l-stand) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: calc(var(--nav-h) + 12px) 16px 36px; }
  .l-stand { grid-column: 1 / -1; }
  .l-obj {
    position: absolute; z-index: 7; display: block; left: auto !important;
    top: 438px !important; width: 22% !important; height: 78px !important;
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .l-obj.o-mail { left: 2% !important; }
  .l-obj.o-wine { left: 26% !important; }
  .l-obj.o-arch { left: 50% !important; }
  .l-obj.o-board { left: 74% !important; }
  .l-obj img { width: 100%; height: 54px; object-fit: contain; }
  .l-obj .l-tag {
    position: absolute; left: 50% !important; top: 52px !important;
    width: max-content; max-width: 100%; height: 20px; padding: 0 4px;
    transform: translateX(-50%); font-size: 9px; line-height: 20px;
    letter-spacing: 0; white-space: nowrap; color: #F7EAD0;
    background: rgba(38,23,14,.82); border: 1px solid rgba(232,196,138,.4);
    border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,.35);
  }
  .l-obj:active { transform: translateY(1px); }
  .l-lampobj { display: none; } /* 台灯装饰节点不参与窄屏流式布局 */
  .l-counter {
    display: block; position: absolute; z-index: 5; left: -6%; top: 460px;
    width: 112%; height: clamp(112px, 34vw, 136px); pointer-events: none;
  }
  .l-counter img { width: 100%; height: 100%; object-fit: fill; }
  .l-board {
    position: relative; z-index: 6; left: auto; top: auto; grid-column: 1 / -1;
    grid-row: 3; width: min(100%, 340px); height: auto; margin: -14px auto 0; padding: 18px 18px 16px;
    background: linear-gradient(160deg, rgba(29,22,16,.86), rgba(20,15,12,.9));
    border: 1px solid rgba(232,196,138,.3); border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,240,210,.08);
  }
  .l-board .t { position: static; width: auto; }
  .l-board .t-name { font-size: 11px; letter-spacing: 3px; }
  .l-board .t-hours { margin-top: 2px; font-size: 24px; }
  .l-board .t-show { margin-top: 2px; font-size: 12px; }
  .l-bbtn {
    position: static; display: flex; align-items: center; justify-content: center;
    width: min(100%, 200px); height: 36px; margin: 12px auto 0;
  }
  .l-logo {
    position: relative; left: auto; top: auto; z-index: 2;
    grid-row: 1; grid-column: 1 / -1; justify-self: start;
    width: min(112px, 30vw); height: auto; aspect-ratio: 1;
    margin: 8px 0 0 12px;
  }
  .l-logo img { width: 100%; height: 100%; object-fit: contain; }
  .l-modal {
    position: fixed; left: 50%; top: 50%; width: min(420px, 92vw); height: auto; max-height: 84vh;
    transform: translate(-50%, -50%); overflow: auto; z-index: 200;
  }
  .l-modal.show { transform: translate(-50%, -50%); }
  .l-modal h3, .l-modal .x { position: static; }
  .l-modal h3 { display: inline-block; }
  .l-modal .x { float: right; }
  .l-modal p { position: static; width: auto; height: auto !important; margin: 14px 30px 0; }
  .l-modal p:first-of-type { margin-top: 26px; }
  .l-modal { padding-top: 26px; }

  /* —— 告示板移动端 —— */
  .b-page .stage { padding: calc(var(--nav-h) + 18px) 18px 48px; }
  .b-bg { position: fixed; inset: 0; }
  .b-veil { position: fixed; inset: 0; }
  .b-eyebrow, .b-title, .b-desc, .b-foot { position: relative; left: auto; top: auto; width: auto; }
  .b-title { font-size: 30px; line-height: 44px; letter-spacing: 1px; }
  .b-desc { margin-top: 10px; }
  .b-foot { margin-top: 36px; }
  .b-note {
    position: relative; left: auto !important; top: auto !important;
    width: min(360px, 100%); height: auto; margin: 30px auto 0; padding-bottom: 24px;
  }
}

@media (max-width: 380px) {
  .stage:has(.l-stand) { padding-left: 12px; padding-right: 12px; gap: 11px; }
  .l-stand { height: 370px; margin-top: -62px; }
  .l-stand img { width: 128vw; }
  .l-obj { top: 413px !important; width: 23% !important; }
  .l-obj.o-mail { left: 0% !important; }
  .l-obj.o-wine { left: 25% !important; }
  .l-obj.o-arch { left: 50% !important; }
  .l-obj.o-board { left: 75% !important; }
  .l-counter { top: 435px; }
}

@media (prefers-reduced-motion: reduce) {
  .l-stand img,
  .l-obj img,
  .l-obj .l-tag,
  .l-hi,
  body:not(.b-page) .topbar nav a::after,
  .l-bbtn,
  .l-modal .x {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .l-stand.greeted img { transform: none; }
  .l-obj:hover img,
  .l-obj:focus-visible img,
  .l-obj:active img,
  .l-obj:active .l-tag,
  .l-bbtn:hover,
  .l-bbtn:focus-visible,
  .l-bbtn:active,
  body:not(.b-page) .topbar .btn:hover,
  body:not(.b-page) .topbar .btn:focus-visible,
  body:not(.b-page) .topbar .btn:active,
  body:not(.b-page) .topbar .btn:active { transform: none; }
}