/* 统一侧栏（web/shell.js，10-03 场景设计 Miya）。所有页面同一宽度、同一顺序、同一字号；页面自己的 CSS 不再管侧栏 */
html.wb { --wb-side: 212px; }
.wb-side {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--wb-side);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 14px 64px;   /* 底下留给左下角的「改字」「待审」两个小按钮 */
  background: #ebe8e0; border-right: 1px solid #ddd9d0;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif; color: #383632;
  scrollbar-width: thin;
}
.wb-brand { display: block; padding: 0 10px; text-decoration: none; color: #2f2d29; font-size: 26px; font-weight: 600; letter-spacing: 5px; line-height: 1.2; }
.wb-brand span { display: block; margin-top: 7px; font-size: 9px; font-weight: 400; letter-spacing: 1.4px; color: #827e75; }
.wb-nav { margin-top: 18px; display: grid; gap: 2px; }
.wb-group { display: grid; gap: 1px; }
.wb-label { padding: 14px 12px 5px; font-size: 11px; letter-spacing: 3px; color: #a39d92; }
.wb-nav a {
  display: block; padding: 8px 12px; border-radius: 7px; text-decoration: none;
  font-size: 14px; line-height: 1.5; color: #383632; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-nav a:hover { background: #f4f1ea; }
.wb-nav a.on { background: #fffefa; color: #8d6444; font-weight: 600; box-shadow: 0 1px 2px #3c342412; }
.wb-nav a:focus-visible, .wb-tools a:focus-visible, .wb-brand:focus-visible { outline: 2px solid #8d6444; outline-offset: 1px; }
.wb-foot { margin-top: auto; padding: 22px 10px 0; }
.wb-note { margin: 0 0 10px; font-size: 12px; line-height: 1.7; color: #827e75; }
.wb-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wb-tools a { font-size: 12px; color: #6f5a47; text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.wb-tools a:hover, .wb-tools a.on { border-bottom-color: #b9a58f; }
.wb-deploy { margin-top: 14px; width: 100%; padding: 6px 0; font: inherit; font-size: 12px; color: #6f5a47; background: transparent; border: 1px solid #cdbfae; border-radius: 6px; cursor: pointer; }
.wb-deploy:hover:not(:disabled) { background: #efe8de; }
.wb-deploy:disabled { cursor: default; opacity: .7; }
.wb-deploy-msg { margin: 6px 0 0; min-height: 1em; font-size: 11px; line-height: 1.5; color: #827e75; word-break: break-all; }

/* 页面主体：所有页面一样的左边距 */
html.wb body > main { margin-left: var(--wb-side); }
html.wb #check-state { left: var(--wb-side); }
html.wb #compare-bar { left: calc(50% + var(--wb-side) / 2); }

@media (max-width: 760px) {
  html.wb { --wb-side: 0px; }
  .wb-side { position: sticky; top: 0; inset: auto; width: auto; flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #ddd9d0; }
  .wb-brand { font-size: 18px; letter-spacing: 3px; padding: 0 4px; white-space: nowrap; flex: none; }
  .wb-brand span, .wb-label, .wb-foot { display: none; }
  .wb-nav { margin: 0; display: flex; gap: 2px; }
  .wb-group { display: flex; gap: 2px; }
  .wb-group + .wb-group { border-left: 1px solid #d8d3c8; padding-left: 4px; }
  .wb-nav a { padding: 6px 10px; font-size: 13px; }
  html.wb body > main { margin-left: 0; }
}

/* 图鉴卡片：没有图的不再留 185px 的「暂无对应预览」，只留一条带图标字的色带（10-03） */
html.wb .card .visual.mini { height: 58px; justify-content: flex-start; padding: 0 18px; background: #eeebe3; }
html.wb .card .visual.mini .glyph { font-size: 22px; font-weight: 400; color: #9a917f; letter-spacing: 0; }
html.wb .card .visual.mini.cat-vehicles { background: #e8ebe9; }
html.wb .card .visual.mini.cat-buildings { background: #ece8e1; }
html.wb .card .visual.mini.cat-world { background: #e6eae6; }
html.wb .card .visual.mini.cat-characters { background: #ebe6ec; }
html.wb .card .visual.mini.cat-items { background: #efe9df; }
html.wb .card:has(> .visual.mini) { display: grid; grid-template-columns: 56px 1fr; align-items: stretch; }
html.wb .card > .visual.mini { height: auto; min-height: 100%; padding: 18px 0 0; justify-content: center; align-items: flex-start; }
html.wb .card:has(> .visual.mini) .card-copy { padding: 16px 44px 16px 14px; }
html.wb .card:has(> .visual.mini) .card-copy h3 { min-height: 0; }
html.wb .card:has(> .visual.mini) .subtitle { height: auto; max-height: 34px; }

/* 首页的标题和别的页一样大（原来 32px + 一行小字眉标，点进专门页标题会跳） */
html.wb main > header .eyebrow { display: none; }
html.wb main > header h1 { font-size: 28px; letter-spacing: 2px; margin-bottom: 8px; }
html.wb main > header { align-items: flex-start; }
html.wb main > header #description { margin-bottom: 0; }

/* 所有页面同一套标题位置和字号（原来首页 40px 顶边 + 32px 标题，专门页 28px 顶边 + 28px 粗体，切页标题会跳） */
html.wb body > main { padding-top: 30px; padding-left: 40px; padding-right: 40px; }
html.wb main h1 { font-size: 28px; font-weight: 600; letter-spacing: 2px; line-height: 1.3; margin: 0 0 8px; }
html.wb main .lead, html.wb main > header #description { font-size: 14px; color: #7d786e; }

/* 时间与光照、天气：负责人写的大段原始备注收起来 */
html.wb .top-note { background: #fffefa; border: 1px solid #e0dbd0; border-radius: 10px; padding: 10px 16px; margin-top: 16px; }
html.wb .top-note summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #4c4842; }
html.wb .top-note summary small { font-weight: 400; color: #a39d92; margin-left: 8px; font-size: 12px; }
html.wb .top-note p { margin: 10px 0 4px; color: #7d786e; font-size: 13px; line-height: 1.75; }

/* 资源与生活：关着的分区（委托）标虚线、放最后 */
html.wb .pills button.off { color: #a39d92; border-style: dashed; background: transparent; }

/* 页面右上角的「音效盲审 →」这类链接：按钮样式，不是蓝色下划线 */
html.wb a.btnlink { color: #6f5a47; text-decoration: none; border: 1px solid #ddd9d0; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
html.wb a.btnlink:hover { background: #efebe2; }

/* 总览入口卡片（app.js paintOverview） */
html.wb .overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 4px 0 30px; }
html.wb .overview[hidden] { display: none; }
html.wb .ov-tile { position: relative; display: grid; gap: 3px; padding: 14px 16px 15px; border: 1px solid #e3dfd6; border-radius: 12px; background: #fffefa; text-decoration: none; color: #383632; transition: transform .15s, box-shadow .15s; }
html.wb .ov-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #443a2512; }
html.wb .ov-tile b { font-size: 15px; font-weight: 600; }
html.wb .ov-tile .ov-n { font-size: 13px; color: #8d6444; }
html.wb .ov-tile small { font-size: 12px; color: #8a857b; line-height: 1.5; }
html.wb .ov-g { position: absolute; top: 12px; right: 14px; font-size: 11px; letter-spacing: 2px; color: #b5ae9f; }
@media (max-width: 1350px) { html.wb .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { html.wb .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 有图的卡和没图的卡排在同一行时，没图的不被拉成一长条 */
html.wb .grid { align-items: start; }
@media (max-width: 760px) { .copy-toggle, .ap-badge { bottom: 10px !important; opacity: .6; } }
