* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  /* v0.7.5:中文走思源宋体 + 拉丁数字走 Cinzel(罗马铭文体) */
  font-family: "Cinzel", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  font-feature-settings: "lnum" 1;
  /* v0.7.5:宣纸底色 + 朱砂回纹底纹(72px tile,约 5% 透明度,克制使用) */
  background-color: var(--bg-paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%238b1a1a' stroke-opacity='0.055' stroke-width='0.8' stroke-linejoin='miter'><path d='M6 6 H66 V66 H6 Z'/><path d='M14 14 H58 V58 H14 V36'/><path d='M22 22 H50 V50 H22 V40'/></g><circle cx='36' cy='36' r='1.4' fill='%238b1a1a' fill-opacity='0.09'/></svg>");
  background-repeat: repeat;
  background-size: 72px 72px;
}
/* 等宽数字(状态条/帝宠值等需要对齐的位置)*/
.stat-value, .turn-info, .stat-tag {
  font-feature-settings: "tnum" 1;
}

/* ── 整体布局 ── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  /* v0.7.5:让 body 的回纹底纹透出来,#app 不再自带不透明底 */
  background: transparent;
}
header {
  padding: 14px 24px;
  border-bottom: 2px solid var(--red-imp);
  display: flex;
  align-items: baseline;
  gap: 16px;
  /* v0.7.5:header 用半透 bg-soft,让 body 回纹底纹隐约透出 */
  background: rgba(239, 229, 203, 0.85);
  /* 加一条细金线作匾额底缘 */
  box-shadow: 0 -2px 0 -1px var(--red-imp) inset;
}

#layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 12px;
  padding: 12px;
  flex: 1;
  overflow: hidden;
}

aside, main {
  /* v0.7.5:面板半透(88% bg-card)+ 自身极淡小回纹,让 body 回纹隐约透出 */
  background-color: rgba(251, 246, 231, 0.88);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%238b1a1a' stroke-opacity='0.035' stroke-width='0.6'><path d='M8 8 H40 V40 H8 Z'/><path d='M14 14 H34 V34 H14 V24'/></g></svg>");
  background-repeat: repeat;
  background-size: 48px 48px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px;
  overflow-y: auto;
}

/* ── 模态框容器 ── */
#modals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
/* v0.7.5:modal 双边框 + 四角回纹 */
.modal-box {
  position: relative;
  background: var(--bg-paper);
  border: 2px solid var(--red-imp);
  border-radius: 2px;
  padding: 28px 34px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  /* 双线内描:1px solid 朱砂内框,与外框有 5px 留白 */
  outline: 1px solid var(--red-imp);
  outline-offset: -6px;
  /* 四角回纹角花(SVG 内嵌,currentColor 继承红色) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M2 2h14M2 2v14M5 5h10v10' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='5' cy='5' r='1.2' fill='%238b1a1a'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M16 2H2M16 2v14M13 5H3v10' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='13' cy='5' r='1.2' fill='%238b1a1a'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M2 16h14M2 16V2M5 13h10V3' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='5' cy='13' r='1.2' fill='%238b1a1a'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M16 16H2M16 16V2M13 13H3V3' fill='none' stroke='%238b1a1a' stroke-width='1' stroke-linecap='square'/><circle cx='13' cy='13' r='1.2' fill='%238b1a1a'/></svg>");
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  background-repeat: no-repeat;
}

/* ===========================================================
   v0.7.14:mobile 适配(< 768px)
   - 桌面端三栏保持原样,默认隐藏 mobile chrome
   - mobile 顶部 fixed status bar + 主体只显 center + 底部 fixed 4-tab
   - left / right panel 平时隐藏,tab 点亮时升起为 drawer
   =========================================================== */

/* desktop 默认完全隐藏 mobile 元素 */
#mobile-bottom-tabs,
#mobile-drawer-mask,
#mobile-drawer,
#mobile-emperor {
  display: none;
}

/* v0.7.14:标题屏期间(body.title-active)无论 viewport 都隐 mobile chrome —
   元素在 #app 外,showTitleScreen 只隐 #app,不联动这层会有空 tab 条 / 旧 mask 残留遮挡 */
body.title-active #mobile-bottom-tabs,
body.title-active #mobile-drawer-mask,
body.title-active #mobile-drawer,
body.title-active #mobile-emperor {
  display: none !important;
}

@media (max-width: 768px) {
  body {
    /* 让出底部 tab bar (56px) 空间 — top status 已删,无需 padding-top */
    padding-top: 0;
    padding-bottom: 56px;
    font-size: 14px;
  }

  #app {
    max-width: none;
    height: auto;
    min-height: calc(100vh - 56px);
  }

  /* 桌面 header 隐藏 */
  #app > header {
    display: none;
  }

  #layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px;
    overflow: visible;
    height: auto;
  }

  /* mobile 永久隐藏 left/right panel(drawer 走独立 #mobile-drawer) */
  #left-panel,
  #right-panel {
    display: none !important;
  }

  /* ── mobile 立绘卡:fixed 锁顶,始终可见。高度锁定 170px(portrait 110×147 + padding 20) ── */
  #mobile-emperor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 170px;
    background-color: rgba(251, 246, 231, 0.96);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%238b1a1a' stroke-opacity='0.05' stroke-width='0.6'><path d='M8 8 H40 V40 H8 Z'/></g></svg>");
    border-bottom: 2px solid var(--red-imp);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  /* v0.7.15:mobile ❓ 新手指导入口 — header 在 mobile 隐藏,挪到立绘卡右上角 */
  #btn-tut-m {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 24px; height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
  }
  #btn-tut-m:active {
    color: var(--red-imp);
    border-color: var(--red-imp);
  }
  #mobile-emperor .me-portrait {
    flex: 0 0 110px;
    width: 110px;
    aspect-ratio: 3 / 4;
    margin-bottom: 0;
  }
  #mobile-emperor .me-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  #mobile-emperor .me-turn {
    font-size: 15px;
    color: var(--red-imp);
    font-weight: 700;
    letter-spacing: 4px;
    font-family: 'Cinzel', "Noto Serif SC", serif;
    line-height: 1.1;
  }
  #mobile-emperor .me-name {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }
  #mobile-emperor .me-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }
  #mobile-emperor .me-stat-label {
    color: var(--ink-soft);
    flex: 0 0 28px;
  }
  #mobile-emperor .me-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-soft);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  #mobile-emperor .me-bar-fill {
    height: 100%;
    transition: width .3s ease;
  }
  #mobile-emperor .me-bar-fill.hp  { background: var(--red-imp); }
  #mobile-emperor .me-bar-fill.san { background: var(--purple); }
  #mobile-emperor .me-bar-fill.pol { background: var(--gold); }
  #mobile-emperor .me-stat-val {
    flex: 0 0 26px;
    text-align: right;
    font-family: 'Cinzel', monospace;
    font-weight: 700;
    color: var(--ink);
  }
  #mobile-emperor .me-gold {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 2px;
    letter-spacing: 0.5px;
  }

  /* ── mobile drawer(独立容器,非复用 left/right panel) ── */
  /* drawer 盖住整个屏(0 到 56px tab 上沿),让出立绘卡感更明确 */
  body.mobile-drawer-open #mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 56px;
    left: 0;
    right: 0;
    z-index: 60;
    background-color: var(--bg-paper);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%238b1a1a' stroke-opacity='0.035' stroke-width='0.6'><path d='M8 8 H40 V40 H8 Z'/></g></svg>");
    border-top: 2px solid var(--red-imp);
    box-shadow: 0 -8px 24px rgba(0,0,0,.2);
    animation: mobile-drawer-up .22s ease;
  }

  .mdrawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(251, 246, 231, 0.94);
  }
  .mdrawer-title {
    font-size: 14px;
    color: var(--red-imp);
    letter-spacing: 3px;
    font-weight: 700;
  }
  .mdrawer-close {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
  }
  .mdrawer-close:active { color: var(--red-imp); }
  .mdrawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }
  /* drawer 内部嵌入的 right-panel tab-bar(派系/皇嗣切换)隐 — 底部 tab 已经直接切了,冗余 */
  .mdrawer-body .tab-bar {
    display: none;
  }

  /* 起居 drawer:起居注(60%) + 宫闱秘史(40%) 上下分,各自滚动 */
  .mdrawer-body-qiju {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  .qiju-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
  }
  .qiju-log    { flex: 6; border-bottom: 1px solid var(--border); }
  .qiju-canon  { flex: 4; }
  .qiju-section:only-child { flex: 1; }
  .qiju-section > .log-list,
  .qiju-section > .canon-timeline {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 4px;
  }
  .qiju-section > .panel-title {
    flex: 0 0 auto;
  }

  @keyframes mobile-drawer-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  body.mobile-drawer-open #mobile-drawer-mask {
    display: block;
    position: fixed;
    top: 0;
    bottom: 56px;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.32);
    z-index: 55;
  }

  /* ── 底部 tab bar ── */
  #mobile-bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    height: 56px;
    background: rgba(239, 229, 203, 0.96);
    border-top: 2px solid var(--red-imp);
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
  }

  .mtab {
    flex: 1;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 6px 2px;
    transition: background .15s;
  }
  .mtab:last-child { border-right: none; }
  .mtab:active { background: rgba(139, 26, 26, 0.12); }
  .mtab.active {
    background: var(--red-imp);
    color: #fff;
    font-weight: 700;
  }

  /* ── 主体 center ── 顶部让出 fixed 立绘卡(170px),底部让出 fixed 三选项(~76px)+ tab bar(56) + 安全余量 */
  main#center {
    overflow-y: visible;
    padding: 178px 10px 148px;
  }

  /* ── modal 缩小 ── */
  .modal-box {
    max-width: 100%;
    width: calc(100% - 20px);
    padding: 20px 16px;
    margin: 0 10px;
  }
}

/* ===========================================================
   v0.7.14:音乐 mute 按钮(右下角浮动,所有视图通用)
   =========================================================== */
#audio-mute-btn {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 200;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(251, 246, 231, 0.92);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.1s;
}
#audio-mute-btn:hover  { border-color: var(--red-imp); }
#audio-mute-btn:active { transform: scale(0.92); }

@media (max-width: 768px) {
  #audio-mute-btn {
    bottom: 68px;   /* 让出底部 tab bar(56px)+ buffer */
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  /* drawer 打开时按钮要在 drawer 之上保持可见 */
  body.mobile-drawer-open #audio-mute-btn { z-index: 80; }
}

/* ===========================================================
   v0.7.14:手机横屏遮罩 — 游戏仅针对竖屏体验设计,不另做横屏 UX。
   判定:orientation=landscape 且 height ≤ 600px(过滤桌面/平板,只命中横屏手机)。
   覆盖层 ::after 在所有元素之上(z-index 100000),提示旋转回竖屏。
   =========================================================== */
@media (orientation: landscape) and (max-height: 600px) {
  body::after {
    content: '请旋转设备到竖屏\A\A 本游戏针对竖屏体验设计';
    white-space: pre;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #1a1410;
    color: #d4b896;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    padding: 40px;
    letter-spacing: 4px;
  }
}