/* ============================================================================
   像素风公告弹窗（Newbee） v20261008a
   ----------------------------------------------------------------------------
   作用域：全部规则限定在 #xb-notice-root 内，不污染面板任何既有样式
   命名：xbn-*（XBoard Notice），与既有 xb-* / nb-* 前缀不冲突
   动效分层：UI 层用 steps() 逐帧跳跃；卡通形象层用平滑缓动
   ----------------------------------------------------------------------------
   ⚠️ 除设计变更外不要改本文件。改公告文案请改 notice-pixel.js 顶部的 CONFIG。
   ============================================================================ */

#xb-notice-root {
  --xbn-bg:      #FFF6E0;
  --xbn-ink:     #3A2A1A;
  --xbn-primary: #FF9F1C;
  --xbn-accent:  #52C48A;
  --xbn-sky:     #4EA8DE;
  --xbn-blush:   #F0714E;
  --xbn-dim:     #5C4630;
}

/* 遮罩：暖色半透明，刻意不用纯黑（避免暗黑感回流） */
#xb-notice-root .xbn-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(58, 42, 26, .55);
  animation: xbnVeil .16s steps(3) both;
  -webkit-tap-highlight-color: transparent;
}
@keyframes xbnVeil { from { opacity: 0 } to { opacity: 1 } }
#xb-notice-root .xbn-overlay.xbn-closing { animation: xbnVeilOut .14s steps(3) both; pointer-events: none }
@keyframes xbnVeilOut { from { opacity: 1 } to { opacity: 0 } }

/* 弹窗本体：双像素描边 */
#xb-notice-root .xbn-modal {
  position: relative;
  width: min(94vw, 560px);
  max-height: 92vh;
  overflow: auto;
  background: var(--xbn-bg);
  border: 4px solid var(--xbn-ink);
  box-shadow: 0 0 0 4px var(--xbn-bg), 0 0 0 8px var(--xbn-ink);
  color: var(--xbn-ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  border-radius: 0;
  transform-origin: center;
  animation: xbnPop .2s steps(4) both;
}
@keyframes xbnPop {
  from { transform: scale(.35); opacity: 0 }
  50%  { opacity: 1 }
  to   { transform: scale(1); opacity: 1 }
}
#xb-notice-root .xbn-modal.xbn-closing { animation: xbnShrink .14s steps(4) both }
@keyframes xbnShrink { from { transform: scale(1) } to { transform: scale(.35); opacity: 0 } }

/* ---------- 标题栏 ---------- */
#xb-notice-root .xbn-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--xbn-primary);
  border-bottom: 4px solid var(--xbn-ink);
}
#xb-notice-root .xbn-dots { display: flex; gap: 4px }
#xb-notice-root .xbn-dot { width: 8px; height: 8px; background: var(--xbn-ink); opacity: .35 }
#xb-notice-root .xbn-dot:first-child { opacity: .9 }
#xb-notice-root .xbn-bar-title { flex: 1; font-size: 13px; font-weight: 500; letter-spacing: .5px }
#xb-notice-root .xbn-close {
  width: 24px; height: 24px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--xbn-bg); border: 2px solid var(--xbn-ink);
  font-size: 15px; cursor: pointer; color: var(--xbn-ink);
  font-family: inherit; border-radius: 0;
}
#xb-notice-root .xbn-close:hover { background: var(--xbn-blush); color: var(--xbn-bg) }
#xb-notice-root .xbn-close:active { transform: translate(2px, 2px) }

/* ---------- 内容区 ---------- */
#xb-notice-root .xbn-body { display: flex; gap: 18px; padding: 18px 18px 4px; align-items: flex-start }

/* 自有 IP 形象 */
#xb-notice-root .xbn-avatar { flex: 0 0 auto; position: relative; width: 142px; padding-bottom: 12px }
#xb-notice-root .xbn-avatar-inner { animation: xbnFloat 2.6s ease-in-out infinite; transform-origin: 50% 90% }
@keyframes xbnFloat {
  0%   { transform: translateY(0) rotate(-1.6deg) }
  50%  { transform: translateY(-7px) rotate(1.6deg) }
  100% { transform: translateY(0) rotate(-1.6deg) }
}
#xb-notice-root .xbn-ip {
  display: block; height: 168px; width: auto; max-width: none;
  animation: xbnEnter .62s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes xbnEnter {
  0%   { transform: translateY(34px) scale(.86); opacity: 0 }
  60%  { opacity: 1 }
  100% { transform: translateY(0) scale(1); opacity: 1 }
}
#xb-notice-root .xbn-avatar:hover .xbn-avatar-inner { animation: xbnHop .5s cubic-bezier(.34, 1.56, .64, 1) infinite }
@keyframes xbnHop {
  0%, 100% { transform: translateY(0) scale(1) }
  40%      { transform: translateY(-12px) scale(1.05) }
}
#xb-notice-root .xbn-shadow {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  transform-origin: center;
  animation: xbnShadow 2.6s ease-in-out infinite;
}
@keyframes xbnShadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .9 }
  50%      { transform: translateX(-50%) scaleX(.82); opacity: .55 }
}
#xb-notice-root .xbn-ip-star {
  position: absolute; width: 8px; height: 8px; background: var(--xbn-primary); opacity: 0;
  animation: xbnIpStar 3.2s steps(2, end) infinite;
}
#xb-notice-root .xbn-ip-star.a { top: 14px; right: -6px; animation-delay: .9s }
#xb-notice-root .xbn-ip-star.b { bottom: 34px; left: -10px; background: var(--xbn-sky); animation-delay: 1.9s }
@keyframes xbnIpStar {
  0%, 12%   { opacity: 0; transform: scale(.4) }
  14%, 24%  { opacity: 1; transform: scale(1) }
  26%, 100% { opacity: 0; transform: scale(.4) }
}

#xb-notice-root .xbn-content { flex: 1; min-width: 0 }

#xb-notice-root .xbn-title {
  font-size: 17px; font-weight: 500; line-height: 1.5;
  letter-spacing: .5px; margin: 0 0 10px; min-height: 26px;
  color: var(--xbn-ink);
}
#xb-notice-root .xbn-caret {
  display: inline-block; width: 9px; height: 17px; margin-left: 2px;
  background: var(--xbn-primary); vertical-align: -2px;
  animation: xbnCaret .6s steps(1, end) infinite;
}
@keyframes xbnCaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

#xb-notice-root .xbn-text { font-size: 13px; line-height: 1.8; color: var(--xbn-dim); margin: 0 }
#xb-notice-root .xbn-text + .xbn-text { margin-top: 7px }
/* 高亮：nowrap 保证高亮词整体换行、不被拆到两行 */
#xb-notice-root .xbn-text em {
  font-style: normal; background: var(--xbn-primary); padding: 0 2px;
  color: var(--xbn-ink); font-weight: 500; white-space: nowrap;
}
#xb-notice-root .xbn-text b { color: var(--xbn-ink); font-weight: 500 }

#xb-notice-root .xbn-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px }
#xb-notice-root .xbn-chip {
  font-size: 11px; padding: 2px 8px; border: 2px solid var(--xbn-ink);
  color: var(--xbn-bg); border-radius: 0;
  animation: xbnChip 1.4s steps(2, end) infinite;
}
#xb-notice-root .xbn-chip.a { background: var(--xbn-accent); animation-delay: 0s }
#xb-notice-root .xbn-chip.b { background: var(--xbn-sky);    animation-delay: .35s }
#xb-notice-root .xbn-chip.c { background: var(--xbn-blush);  animation-delay: .7s }
@keyframes xbnChip { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }

/* 兑换码卡片：打字机 + 光标 + 点击复制 */
#xb-notice-root .xbn-coupon {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  border: 3px solid var(--xbn-ink); background: #FFFDF6; padding: 8px 10px;
  cursor: pointer; user-select: none;
}
#xb-notice-root .xbn-coupon:hover { background: #FFFAE8 }
#xb-notice-root .xbn-coupon:active { transform: translate(2px, 2px) }
#xb-notice-root .xbn-coupon-label { font-size: 11px; color: var(--xbn-dim); flex: 0 0 auto }
#xb-notice-root .xbn-coupon-code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 16px; font-weight: 500; letter-spacing: 2px;
  color: var(--xbn-ink); min-height: 20px;
}
#xb-notice-root .xbn-coupon-caret {
  display: inline-block; width: 8px; height: 16px; background: var(--xbn-primary);
  vertical-align: -3px; animation: xbnCaret .6s steps(1, end) infinite;
}
#xb-notice-root .xbn-coupon-hint { font-size: 11px; color: var(--xbn-dim); flex: 0 0 auto }
#xb-notice-root .xbn-coupon.done { background: var(--xbn-accent) }
#xb-notice-root .xbn-coupon.done .xbn-coupon-hint { color: #FFF6E0 }

/* ---------- 按钮区 ---------- */
#xb-notice-root .xbn-actions { display: flex; gap: 10px; padding: 16px 18px 18px }
#xb-notice-root .xbn-btn {
  flex: 1; padding: 11px 14px; font-size: 13px; font-weight: 500;
  font-family: inherit; border: 3px solid var(--xbn-ink); border-radius: 0;
  cursor: pointer; background: var(--xbn-bg); color: var(--xbn-ink);
  transition: none; line-height: 1.4;
}
#xb-notice-root .xbn-btn:hover { background: var(--xbn-primary) }
#xb-notice-root .xbn-btn:active { transform: translate(3px, 3px); box-shadow: none }
#xb-notice-root .xbn-btn.primary { background: var(--xbn-primary); box-shadow: 4px 4px 0 0 var(--xbn-ink) }
#xb-notice-root .xbn-btn.primary:hover { background: var(--xbn-accent) }
#xb-notice-root .xbn-btn.primary:active { box-shadow: 0 0 0 0 var(--xbn-ink) }

/* ---------- 装饰 ---------- */
#xb-notice-root .xbn-star {
  position: absolute; width: 8px; height: 8px; background: var(--xbn-primary);
  animation: xbnStar 1.2s steps(2, end) infinite;
}
#xb-notice-root .xbn-star.s1 { top: -16px; left: 24px;  background: var(--xbn-accent); animation-delay: 0s }
#xb-notice-root .xbn-star.s2 { top: -16px; right: 48px; background: var(--xbn-sky);    animation-delay: .2s }
#xb-notice-root .xbn-star.s3 { bottom: -16px; left: 60px;  background: var(--xbn-blush); animation-delay: .4s }
#xb-notice-root .xbn-star.s4 { bottom: -16px; right: 28px; background: var(--xbn-primary); animation-delay: .6s }
@keyframes xbnStar { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.5); opacity: .5 } }

#xb-notice-root .xbn-float {
  position: absolute; width: 6px; height: 6px; background: var(--xbn-primary);
  pointer-events: none; animation: xbnFloatUp 2.4s steps(6, end) infinite;
}
#xb-notice-root .xbn-float.f1 { top: 12%; left: 8%;   animation-delay: 0s }
#xb-notice-root .xbn-float.f2 { top: 70%; left: 5%;   background: var(--xbn-sky);    animation-delay: .4s }
#xb-notice-root .xbn-float.f3 { top: 22%; right: 7%;  background: var(--xbn-accent); animation-delay: .8s }
#xb-notice-root .xbn-float.f4 { top: 78%; right: 11%; background: var(--xbn-blush);  animation-delay: 1.2s }
@keyframes xbnFloatUp {
  0%   { transform: translateY(0); opacity: .25 }
  50%  { transform: translateY(-14px); opacity: .9 }
  100% { transform: translateY(-28px); opacity: 0 }
}

/* 焦点环：默认 UA 蓝框与像素风冲突，统一改为主题色 */
#xb-notice-root *:focus { outline: 3px solid var(--xbn-primary); outline-offset: 2px }
#xb-notice-root *:focus:not(:focus-visible) { outline: none }
#xb-notice-root *:focus-visible { outline: 3px solid var(--xbn-primary); outline-offset: 2px }

/* ---------- 移动端 ---------- */
@media (max-width: 520px) {
  #xb-notice-root .xbn-modal { width: 100% }
  #xb-notice-root .xbn-body {
    flex-direction: column; align-items: center; text-align: center;
    padding: 16px 14px 4px; gap: 14px;
  }
  #xb-notice-root .xbn-avatar { width: auto }
  #xb-notice-root .xbn-ip { height: 132px }
  #xb-notice-root .xbn-title { font-size: 16px }
  #xb-notice-root .xbn-chips { justify-content: center }
  #xb-notice-root .xbn-coupon { width: 100% }
  #xb-notice-root .xbn-actions { flex-direction: column; padding: 14px }
  #xb-notice-root .xbn-btn { width: 100% }
}

/* 如需尊重系统「减少动态效果」偏好，取消下面注释（当前按运营偏好默认展示动效）*/
/*
@media (prefers-reduced-motion: reduce) {
  #xb-notice-root * { animation: none !important }
}
*/

/* ===== 2026-10-19 移动端底部工具栏遮挡修复 =====
   问题：iOS/移动浏览器底部工具栏占用后，100vh 大于实际可视区，
   html/body/#app 高度锁死 100vh 且 overflow:hidden，导致页面最后一行
   （订单页「结账」按钮）永远滚不出、被浏览器底栏盖住无法点击。
   方案：支持 dvh 的浏览器用 100dvh 收缩布局；不支持的给滚动容器
   预留底部间距兜底。*/
@media (max-width: 860px) {
  .cus-scroll-y { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
}
@supports (height: 100dvh) {
  @media (max-width: 860px) {
    html, .xb-theme-glass body, .xb-theme-glass #app {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
    .n-layout, .n-layout-scroll-container { height: 100dvh !important; }
    .cus-scroll-y { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; }
  }
}