/* ============================================================
 * hall.css —— 大厅页（/hall）与侧栏：卡片墙 / 创作 / 用户信息 / 服务商面板 / 存档列表
 * ============================================================ */

.slot-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  font-size: 10px; font-weight: 400; vertical-align: 1px;
  color: var(--acc); border: 1px solid var(--acc); opacity: .8; }
.slot-list { margin-top: 12px; display: grid; gap: 8px; max-height: 44vh; max-height: 44dvh; overflow-y: auto; text-align: left; }
.slot-check { grid-area: check; width: 15px; height: 15px; accent-color: var(--acc); cursor: pointer; }
.slot-actions { grid-area: actions; display: flex; gap: 2px; }
.slot-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; white-space: nowrap; }
.slot-pager button { width: auto; flex: none; padding: 4px 10px; font-size: 12px; }   /* 压过 .card button 的 width:100%，避免分页条横向溢出 */
.slot-pager button:disabled { opacity: 0.45; cursor: default; }
.slot-del-all { width: 100%; margin-top: 4px; padding: 8px 14px; font-size: 13px; }
.slot-batch {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; background: var(--bg); border: 1px dashed var(--acc2); border-radius: 10px;
}
#slot-list .slot-batch button { width: auto; margin: 0; padding: 5px 12px; font-size: 12px; }
.hall-main { flex: 1; overflow-y: auto; padding: 22px 26px; }
.hall-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.hall-head h2 { margin: 0; color: var(--acc); }
.hall-me { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.me-layout { display: flex; gap: 24px; align-items: flex-start; }
/* 桌面端二级菜单在侧栏「用户信息」下展开（.hall-subnav），页内这份只给手机端横向页签用 */
.me-side { width: 180px; flex: none; display: none; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--line); padding-right: 16px; }
.hall-subnav { display: none; flex-direction: column; gap: 2px;
  margin: -2px 0 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.hall-subnav.open { display: flex; }
.hall-subnav .me-nav-btn { padding: 7px 10px; font-size: 13px; border-radius: 6px; }
.me-nav-btn { text-align: left; background: none; border: none; color: var(--txt);
  padding: 10px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.me-nav-btn:hover { background: var(--bg); }
.me-content { flex: 1; min-width: 0; }
/* 主区与其中的视图排成纵向 flex，让当前视图撑满主区高度——
   用户信息页的版本号才能用 margin-top:auto 顶到这一页的最下方（原来视图只有内容高，
   版本号就跟在表单后面，看着像在页面中间）。base.css 的 body.hall-mode .hall-main
   只声明了 display:block，这里同选择器覆盖成 flex；隐藏视图仍由 .hall-view.hidden 压掉 */
body.hall-mode .hall-main { display: flex; flex-direction: column; }
.hall-view { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 页脚挂在 hall-main 末尾（game 视图 hall-main 整块 display:none，自然隐藏）：
   内容不满一屏时 margin-top:auto 把它压到大厅主区底边 */
.hall-main .page-foot { flex: none; }
/* 用户信息页脚·版本号：放在这一页的最下，小字浅色。
   手机上 .me-side 会变成横向滚动条，所以版本号不放二级菜单里 */
.me-ver { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 12px; }
.me-ver:empty { display: none; }
.hall-me-row { display: flex; align-items: center; gap: 8px; }
.hall-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.wb-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s;
  display: flex; flex-direction: column; }
.wb-card:hover { transform: translateY(-3px); border-color: var(--acc); }
.wb-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg); }
.wb-cover-ph { display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: var(--acc); opacity: .75;
  background: linear-gradient(135deg, #232a3a, #171b24 70%); }
.wb-card-body { padding: 10px 12px 12px; flex: 1; }
.wb-card-name { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wb-tag { flex: none; font-size: 11px; font-weight: 400; color: var(--acc2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; }
.wb-card-author, .wb-card-genre { font-size: 12px; color: var(--muted); margin-top: 3px; }
.wb-card-desc { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.hall-book-card { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
.hall-book-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 160px; border-radius: 10px; overflow: hidden;
  margin-bottom: 14px; background: var(--bg); }
.hall-book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hall-book-cover.wb-cover-ph { display: flex; align-items: center; justify-content: center; font-size: 56px; }
#hall-book-desc { max-height: 4.5em; overflow-y: auto; }
#hall-continue-list { margin-top: 10px; max-height: 32vh; }
.hall-main { display: none; padding: 30px 38px; background: var(--bg);
  pointer-events: auto; }
.hall-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.wb-card-actions { padding: 8px 12px 12px; display: flex; gap: 8px; align-items: center;
  justify-content: flex-end; border-top: 1px solid var(--line); }
.wb-card-actions .pub-yes { color: var(--acc); border-color: var(--acc); }
.wb-card-actions .wb-del { color: var(--bad); border-color: transparent; }
.wb-card-actions .wb-del:hover { border-color: var(--bad); }
.wb-rec-layout { display: flex; gap: 14px; min-height: 200px; }
.wb-rec-main { flex: 1; min-width: 0; }
.wb-rec-status { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; line-height: 1.8; }
.wb-rec-back { color: var(--acc2); cursor: pointer; }
.wb-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wb-tags-row .wb-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px;
  padding: 0 10px; font-size: 12px; line-height: 1; color: var(--txt); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none;
  transition: border-color .15s, color .15s; }
.wb-tags-row .wb-tag:hover { border-color: var(--bad); color: var(--bad); }
.wb-tags-row .wb-tag-x { font-size: 11px; opacity: .55; }
.wb-tags-row .wb-tag:hover .wb-tag-x { opacity: 1; }
.wb-tags-row .wb-tags-input { height: 26px; box-sizing: border-box; width: 140px; margin: 0;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 10px; font-size: 12px;
  background: var(--bg); color: var(--txt); }
.wb-tags-row .wb-tags-input:focus { border-color: var(--acc2); outline: none; }
/* chips 移除角标（wb-tags-row 之外复用，如魔法修习绑定行） */
.wb-tag .wb-tag-x { font-size: 11px; opacity: .55; margin-left: 4px; }
.wb-tag:hover .wb-tag-x { opacity: 1; }
.wb-mg-row .wb-mg-chips .wb-tag { cursor: pointer; }

/* ============================================================
 * 手机端适配（≤899px，与 base.css 断点一致）
 * 说明：hall.css 在 base.css 之后加载，base.css 移动端块里的 .card { max-width: 94vw }
 * 会被本文件同优先级的固定宽度规则压过，需要在同文件里再覆盖一次。
 * ============================================================ */
@media (max-width: 899px) {
  /* 世界书详情弹窗：560px 固定上限会顶破窄屏 */
  .hall-book-card { max-width: 94vw; }
  /* 存档列表：限高按视口比例收一点，底部按钮不被顶出屏幕 */
  #hall-continue-list { max-height: 28vh; max-height: 28dvh; }
}

/* ---- 世界书卡：审批状态标 / 定价标（积分系统） ---- */
.wb-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wb-card-tags:empty { display: none; }
.wb-tag-review { color: #d9a24a; border-color: #6b5426; }
.wb-tag-rejected { color: var(--bad); border-color: #6b3a32; }
.wb-tag-price { color: var(--acc); border-color: #5a4a28; }
.wb-tag-income { color: #67c07a; border-color: #2e5a3a; }
/* 创作卡片左上角悬浮的收益标：点击弹消耗明细（不进工坊编辑） */
.wb-income-float { position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px;
  color: #67c07a; background: rgba(10, 14, 12, .72); border: 1px solid #2e5a3a;
  cursor: pointer; backdrop-filter: blur(2px); }
.wb-income-float:hover { border-color: #67c07a; }

/* ---- 建卡弹窗·开场剧情预览：按世界书开局设置的 opening_template 实时渲染 ---- */
.cc-opening { margin: 10px 0 12px; }
.cc-opening summary { cursor: pointer; color: var(--acc); font-size: 13px; user-select: none; }
.cc-opening-view { margin-top: 8px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--bg); padding: 10px 12px; max-height: 320px; overflow-y: auto;
  font-size: 14px; line-height: 1.75; word-break: break-word; }
.cc-opening-view table { border-collapse: collapse; max-width: 100%; }
.cc-opening-view td, .cc-opening-view th { border: 1px solid var(--line); padding: 4px 8px; }
.cc-opening-view img { max-width: 100%; }

/* ---- 自定义建卡页（世界书开局信息 create_html 整页替换默认表单）----
   页面内容样式归作者（行内 style），这里只管容器：限高滚动防撑破弹窗、
   控件不超宽；✕ / 标题 / 生成按钮 / 状态行留在卡片层共用 */
.cc-page { max-height: calc(100vh - 240px); overflow-y: auto; scrollbar-width: thin; }
.cc-page input, .cc-page select, .cc-page textarea { max-width: 100%; box-sizing: border-box; font-family: inherit; }
.cc-page table { max-width: 100%; }
.cc-page td { word-break: break-word; }

/* ---- 自定义建卡页·引擎行为样式（作者页面 + 引擎接管的激活/选中态）----
   tab 激活、卡片选中用属性选择器 + !important：作者行内样式只管基础外观，
   「当前在哪页/选了哪张卡」的视觉由引擎保证，任何世界主题下都醒目一致 */
.cc-page [data-cc="tab"] { cursor: pointer; user-select: none; }
.cc-page [data-cc="tab"][data-cc-active] {
  background: var(--acc) !important; color: #1a1406 !important;
  border-color: var(--acc) !important; font-weight: bold;
}
.cc-page [data-cc-hidden] { display: none !important; }
.cc-card { border: 1px solid var(--line); background: var(--bg); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; }
.cc-card:hover { border-color: var(--acc); }
.cc-card[data-cc-active] { border-color: var(--acc); background: var(--panel); box-shadow: 0 0 0 1px var(--acc) inset; }
.cc-card-name { color: var(--acc); font-size: 13px; font-weight: bold; }
.cc-card-desc { color: var(--txt); opacity: .82; font-size: 12px; line-height: 1.6;
  margin-top: 4px; max-height: 110px; overflow-y: auto; }
.cc-summary-head { font-weight: bold; color: var(--acc); font-size: 14px; margin-bottom: 6px; }
.cc-summary-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0;
  border-bottom: 1px dashed var(--line); font-size: 13px; }
.cc-summary-row .k { color: var(--muted); white-space: nowrap; }
.cc-summary-sec { color: var(--acc); font-size: 12px; margin: 8px 0 2px; font-weight: bold; }
.cc-summary-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* 自定义建卡页内按钮不吃弹窗卡片的按钮规则（base.css .card button 的
   width:100% + margin-top:12px 会把随机骰子撑满整行且与输入框错位；
   手机端 media 的 40px 最小高度同理）。按钮尺寸归还作者行内样式 */
.cc-page button { min-height: 0; width: auto; margin-top: 0; }

/* ---- 首页（未登录）APP 下载面板：扫码进 /download，或直达下载页 ----
   只在首页未登录时显示（登录后卡片让位给大厅内容）；桌面贴屏幕右侧竖排，
   手机端横排贴底。壳内 origin 是本地域、二维码无意义，hall.html 脚本已跳过 */
#app-dl { display: none; }
body[data-page="hall"]:not(.hall-logged-in) #app-dl {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: fixed; right: max(18px, calc(50vw - 430px)); top: 50%; transform: translateY(-50%);
  z-index: 60;   /* 压过登录弹窗（z-50），低于 toast（z-90） */
  width: 132px; padding: 12px 10px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
#dl-qr { background: #fff; padding: 6px; border-radius: 8px; width: 104px; height: 104px; }
#dl-qr img, #dl-qr canvas, #dl-qr table { display: block; }
.dl-txt { display: flex; flex-direction: column; gap: 2px; }
.dl-txt b { color: var(--txt); font-size: 13px; letter-spacing: 1px; }
.dl-txt span { color: var(--muted); font-size: 11px; }
#dl-link { color: var(--acc2); font-size: 12px; text-decoration: none; }
#dl-link:hover { color: var(--acc); }
@media (max-width: 899px) {
  body[data-page="hall"]:not(.hall-logged-in) #app-dl {
    flex-direction: row; justify-content: center; align-items: center; gap: 14px;
    top: auto; right: 12px; left: 12px; bottom: calc(12px + var(--sab, env(safe-area-inset-bottom, 0px)));
    transform: none; width: auto; padding: 10px 14px;
  }
  #dl-qr { width: 78px; height: 78px; padding: 4px; }
  .dl-txt { flex: 1; text-align: left; }
  #dl-link { flex: none; padding: 8px 10px; border: 1px solid var(--acc2); border-radius: 18px; }
}

/* ---- 扫码下载弹窗（登录后入口：大厅侧栏「📱 APP」按钮） ---- */
.appdl-card { display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; max-width: 300px; }
.appdl-card h2 { position: static; padding: 0; margin: 0 0 2px; }   /* 弹窗卡片很矮，不吃手机端吸顶 h2 规则 */
#appdl-qr { background: #fff; padding: 6px; border-radius: 8px; width: 128px; height: 128px; }
#appdl-qr img, #appdl-qr canvas, #appdl-qr table { display: block; }
.appdl-ver { color: var(--muted); font-size: 12px; }
#appdl-link { color: var(--acc2); font-size: 13px; text-decoration: none; }
#appdl-link:hover { color: var(--acc); }
.appdl-note { color: var(--muted); font-size: 11px; line-height: 1.6; }