/* 明日方舟 · 卫戍协议：规程（STRONGHOLD PROTOCOL · REGULATION）组队页（往期「盟约」样式存档在 arknights-alliance.css）
   视觉参考本期活动：乌萨斯构成主义海报（米色纸 → 鲑红天空、红色放射光、倾倒的混凝土楼块、РЕГЛАМЕНТ 黑条红字）；
   活动界面的“暖黑底 + 红色网格”，红色表示阶段 / 标题，青绿色表示已激活 / 已选中。 */
:root {
  color-scheme: dark;
  --bg: #0d0a09;
  --panel: #161110;
  --panel-2: #1e1714;
  --line: rgba(234, 85, 48, .14);
  --line-strong: rgba(234, 85, 48, .28);
  --text: #f4ece3;
  --muted: rgba(240, 228, 216, .56);
  --mint: #2ee0b5;
  --mint-hi: #6af0cf;
  --mint-deep: #126b57;
  --red: #ea5530;
  --red-hi: #ff7a55;
  --amber: #f0b04a;
  --paper: #efe7dc;
  --paper-ink: #17110f;
  --paper-soft: #6a5d55;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
  --cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --cut: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --op-outline: drop-shadow(0 0 1px #0a0706) drop-shadow(0 6px 5px rgba(0, 0, 0, .5));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { display: block; }
body {
  min-height: calc(100vh / var(--page-zoom));
  font-family: var(--cjk);
  color: var(--text);
  background:
    radial-gradient(circle, rgba(234, 85, 48, .28) 0 1px, transparent 1.5px) 0 0 / 48px 48px,
    linear-gradient(rgba(234, 85, 48, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(234, 85, 48, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(80% 50% at 80% -10%, rgba(234, 85, 48, .16), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
/* 桌面宽度和首页一样整页放大 1.21 倍（styles.css 的 --page-zoom），配合下面同一个宽度公式，两边内容左右对齐；
   html 上有 zoom 时 vh 会被再放大一次，所以用到 100vh 的地方都除回 --page-zoom。手机不放大，避免四人卡片挤不下 */
:root { --page-zoom: 1; }
@media (min-width: 900px) { :root { --page-zoom: 1.21; } html { zoom: var(--page-zoom); } }
.shell { width: min(1320px, calc(100% - 32px)); margin: 0 auto; }

/* ---------- top bar ---------- */
.ak-topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(13, 10, 9, .96); }
.ak-topbar .shell { display: flex; align-items: center; gap: 16px; height: 60px; }
.ak-back { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.ak-back img { width: 30px; height: 30px; }
.ak-back strong { font-size: 15px; font-weight: 900; }
.ak-back small { display: block; font-size: 10px; color: var(--muted); }
.ak-divider { width: 1px; height: 26px; background: var(--line-strong); }
.ak-brand { display: grid; gap: 1px; }
.ak-brand b { font-size: 14px; font-weight: 900; letter-spacing: 1px; }
.ak-brand span { font-family: var(--mono); font-size: 9px; color: var(--red-hi); letter-spacing: 1.5px; }
.ak-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ak-me { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px 0 4px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); font-size: 12px; font-weight: 800; white-space: nowrap; }
.ak-me:hover { border-color: var(--mint); }
.ak-link { display: flex; align-items: center; height: 42px; padding: 0 14px; font-size: 12px; font-weight: 800; color: var(--text); text-decoration: none; white-space: nowrap; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); }
.ak-link:hover { border-color: var(--mint); color: var(--mint-hi); }
.ak-me .thumb { width: 34px; height: 34px; }
.thumb.empty, .join-op.empty .join-op-img, .seat-op-empty { display: grid; place-items: center; font-family: var(--mono); font-weight: 900; color: var(--muted); border: 1px dashed var(--line-strong); }
.thumb.empty { font-size: 15px; }
.join-op.empty .join-op-img { font-size: 22px; }
.seat-op-empty { font-size: 28px; border: 0; }
/* 发起：房主带的队友 */
.friend-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-top: 10px; }
.friend-tag { font-size: 12px; font-weight: 800; color: var(--text); }
.friend-pacts { display: flex; flex-wrap: wrap; gap: 4px; }
.friend-pacts button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; }
.friend-pacts button .pact { opacity: .4; }
.friend-pacts button.on { border-color: var(--mint); background: rgba(46, 224, 181, .1); }
.friend-pacts button.on .pact { opacity: 1; }
.friend-row small { grid-column: 2; font-size: 11px; color: var(--muted); }
/* 房间详情：房主调整要招几人 */
.host-ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; font-size: 13px; font-weight: 800; border: 1px dashed var(--line-strong); }
.host-ctrl small { flex-basis: 100%; font-size: 11px; font-weight: 700; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.stepper button { width: 30px; height: 28px; font: inherit; font-size: 16px; color: var(--text); background: rgba(255, 255, 255, .04); border: 0; cursor: pointer; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper b { min-width: 30px; text-align: center; font-family: var(--mono); font-size: 16px; color: var(--mint); }
.why-move { display: block; margin-top: 2px; font-size: 11px; color: var(--amber); }
.ak-me > span:last-child { margin-left: 6px; text-align: left; }
.ak-me small { display: block; font-size: 9px; color: var(--muted); font-weight: 700; }
.ak-primary { height: 42px; padding: 0 16px; font-size: 13px; font-weight: 900; color: #fff6ee; background: var(--red); white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.ak-primary:hover { background: var(--red-hi); }

/* ---------- shared ---------- */
.thumb { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 38%, #312926, #120e0d 72%); clip-path: var(--cut); flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.thumb.empty { background: repeating-linear-gradient(135deg, rgba(46, 224, 181, .1) 0 6px, transparent 6px 12px), #181210; color: var(--mint); font-size: 11px; font-weight: 900; }
/* 圆形盟约图标：参考游戏内“深色圆 + 白色符号” */
.pact { position: relative; display: inline-grid; place-items: center; width: var(--ps, 20px); height: var(--ps, 20px); flex: none; border-radius: 50%; background: #140e0c; box-shadow: inset 0 0 0 1px rgba(255, 222, 205, .28); overflow: hidden; }
.pact img { width: 72%; height: 72%; object-fit: contain; }
.pact.mono { color: var(--text); font-size: calc(var(--ps, 20px) * .5); font-weight: 900; }
.pact.first { box-shadow: inset 0 0 0 1.5px var(--mint), 0 0 6px rgba(46, 224, 181, .45); }
/* 第一志愿方块（出战牌 / 成员列表），和干员方块同尺寸 */
.thumb.first-choice { background: radial-gradient(circle, #362721, #120e0c 74%); }
.first-emblem { width: 76%; height: 76%; object-fit: contain; }
.first-emblem.mono { display: grid; place-items: center; font-size: 42px; font-weight: 900; color: var(--text); }
.first-empty { font-size: 11px; font-weight: 900; color: var(--amber); text-align: center; padding: 0 6px; }
.roster-row .pair { display: flex; gap: 3px; }

.pick.first small { color: var(--mint); font-weight: 900; }
.tag-mint { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font-size: 11px; font-weight: 900; color: #0e0a09; background: var(--mint); white-space: nowrap; }

/* ---------- hero（仿活动横幅） ---------- */
.ak-hero { padding: 22px 0 6px; }
/* 规程横幅：顶部暗色界面条（红色网格 + 小标志 + 数据）→ 活动主视觉封面图（干员在图底部的城市上走） */
/* 页面内容由脚本画出来：画好之前先不显示，免得空骨架先露出来、再被内容顶开（手机慢网速下布局会整页跳）。
   横幅不藏：它在最上面，先画出来也顶不动别的东西。脚本 4 秒还没跑起来也照样显示 */
html:not(.ak-ready) main > :not(.ak-hero) { visibility: hidden; animation: ak-reveal 0s 4s forwards; }
@keyframes ak-reveal { to { visibility: visible; } }
/* 横幅还没画出来时，空的数据条只剩一道边框：先藏着，不然横幅一画出来它就被顶下去，算一次布局跳动 */
.ak-ticker:empty { visibility: hidden; }
.ak-about { margin-top: 48px; padding: 28px 0 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.75; }
.ak-about h2 { margin: 0 0 10px; color: var(--text); font-size: 16px; }
.ak-about p { max-width: 760px; margin: 0 0 14px; }
.ak-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 28px; margin: 0 0 14px; }
.ak-faq dt { margin-top: 10px; color: var(--text); font-weight: 700; }
.ak-faq dd { margin: 2px 0 0; }
.ak-about a { color: var(--mint); }
.hero-banner { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(234, 85, 48, .45); background: #0d0a09; }
.hero-cover { display: block; width: 100%; height: auto; aspect-ratio: 2800 / 1198; object-fit: cover; }
/* 顶部界面条：暗红底 + 红色网格与交点，左侧小标志，右侧数据 */
.hero-strip { position: relative; z-index: 4; display: flex; align-items: center; gap: 20px; height: 54px; padding: 0 12px 0 18px; color: #e0573a;
  background:
    radial-gradient(circle, rgba(234, 85, 48, .55) 0 1px, transparent 1.6px) 0 0 / 44px 44px,
    linear-gradient(rgba(234, 85, 48, .14) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(234, 85, 48, .14) 1px, transparent 1px) 0 0 / 44px 44px, #1c0d09;
  border-bottom: 1px solid rgba(234, 85, 48, .45); }
.mark-tri { display: flex; align-items: center; gap: 10px; }
.mark-tri .hero-logo { width: 32px; height: 29px; padding: 3px; background: #b8452a; }
.mark-tri .hero-logo circle { fill: #1c0d09; }
.mark-tri b { display: block; font-family: "Bahnschrift", Impact, var(--mono); font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #d7553a; }
.mark-tri small { display: block; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 1px; color: rgba(215, 85, 58, .7); }

.hero-tagline { position: absolute; z-index: 3; top: 66px; left: 14px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: rgba(239, 226, 203, .92); background: rgba(16, 11, 9, .78); }
.hero-tagline b { color: var(--mint); }

.hero-lineup { z-index: 2; }

.hero-archive { padding: 3px 9px; font-size: 11px; font-weight: 800; color: rgba(239, 226, 203, .75); text-decoration: none; border: 1px solid rgba(234, 85, 48, .4); white-space: nowrap; }
.hero-archive:hover { color: #fff; border-color: var(--red-hi); }
.hero-stats { margin-left: auto; display: flex; gap: 6px; }
.hero-stats > span { display: grid; min-width: 78px; padding: 3px 10px; background: rgba(16, 9, 7, .9); border: 1px solid rgba(234, 85, 48, .4); text-align: right; }
.hero-stats small { font-size: 10px; color: rgba(239, 226, 203, .68); font-weight: 700; }
.hero-stats b { font-family: var(--mono); font-size: 17px; color: var(--red-hi); line-height: 1.15; }
.hero-stats .miss { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; font-family: var(--cjk); color: var(--mint); }
.hero-lineup { position: absolute; left: 0; right: 0; bottom: 0; height: 156px; overflow: hidden; pointer-events: none; } /* 够高：骑狮子、戴高帽的也不切头 */
.hero-lineup::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent); }
/* 干员游行：一个盟约一群，整群是一个元素，从横幅左边外（left = -群宽）用 transform 平移 --trip，只走合成层 */
.hero-lineup .troupe { position: absolute; z-index: 2; bottom: -4px; height: 136px; animation: ak-walk 300s linear infinite; will-change: transform; }
.hero-lineup .troupe img { position: absolute; width: 128px; height: 128px; max-width: none; filter: var(--op-outline); }
.hero-lineup .troupe img:not([src]) { visibility: hidden; } /* 还没加载的不显示破图框 */
.hero-lineup .troupe img[data-code] { pointer-events: auto; cursor: pointer; } /* 点小人换装 */
@keyframes ak-walk { from { transform: translateX(0); } to { transform: translateX(var(--trip)); } }
/* 换装：一道光门停在原地，人走过去；时装图叠在人身上，从前往后（右往左）一点点露出来 */
.hero-lineup .troupe img.morph-skin { clip-path: inset(0 0 0 var(--from)); animation: ak-henshin var(--d) linear forwards; }
@keyframes ak-henshin { from { clip-path: inset(0 0 0 var(--from)); } to { clip-path: inset(0 0 0 var(--to)); } }
.hero-lineup .troupe img.morph-base { animation: ak-henshin-base var(--d) linear forwards; }
@keyframes ak-henshin-base { from { clip-path: inset(0 calc(100% - var(--from)) 0 0); } to { clip-path: inset(0 calc(100% - var(--to)) 0 0); } }
.morph-gate { position: absolute; z-index: 30; width: 8px; pointer-events: none; animation: ak-gate-move var(--d) linear forwards; }
@keyframes ak-gate-move { from { transform: translateX(var(--gx0)); } to { transform: translateX(var(--gx1)); } }
/* 光门：一道很淡的暖白细光，不抢人 */
.morph-gate::before { content: ""; position: absolute; inset: 10px 0 2px; animation: ak-gate-glow var(--d) ease-in-out forwards;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 214, .14) 30%, rgba(255, 246, 234, .7) 50%, rgba(255, 236, 214, .14) 70%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
@keyframes ak-gate-glow { 0% { opacity: 0; } 18% { opacity: .85; } 80% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-lineup .troupe { animation-play-state: paused; } }
.ak-ticker { display: flex; margin-top: 12px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.ak-ticker > div { flex: 1; padding: 10px 14px; border-right: 1px solid var(--line); }
.ak-ticker > div:last-child { border-right: 0; }
.ak-ticker small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.ak-ticker b { font-family: var(--mono); font-size: 18px; }
.ak-ticker b.hi { color: var(--mint); }
.ak-ticker b.ok { color: var(--amber); }
.ak-ticker .feed { flex: 2.4; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ak-ticker .feed .thumb { width: 28px; height: 28px; }
.ak-ticker .feed strong { color: var(--text); }
/* 盟约查询入口（占用原来数据条的位置） */
.ak-ticker.as-entry { display: block; padding: 0; border-color: var(--line-strong); }
.pact-entry { display: flex; align-items: center; gap: 18px; padding: 10px 16px; color: var(--text); text-decoration: none; background: linear-gradient(90deg, rgba(234, 85, 48, .12), transparent 55%); transition: background .15s; }
.pact-entry:hover { background: linear-gradient(90deg, rgba(234, 85, 48, .22), rgba(46, 224, 181, .05) 70%); }
.pe-icons { display: flex; gap: 4px; flex: none; }
.pe-icons .pact { transition: transform .15s; }
.pact-entry:hover .pe-icons .pact { transform: translateY(-2px); }
.pe-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pe-text b { font-size: 15px; font-weight: 900; letter-spacing: 2px; }
.pe-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-go { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; font-size: 13px; font-weight: 900; color: #06231c; background: var(--mint); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.pe-go i { font-style: normal; transition: transform .15s; }
.pact-entry:hover .pe-go i { transform: translateX(3px); }

/* ---------- toolbar ---------- */
.ak-toolbar { position: sticky; top: 60px; z-index: 30; margin-top: 16px; padding: 10px 0; background: rgba(13, 10, 9, .97); border-bottom: 1px solid var(--line); }
.toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-row + .toolbar-row { margin-top: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 32px; padding: 0 11px; font-size: 12px; font-weight: 800; color: var(--muted); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { color: var(--text); }
.chip.on { color: #0e0a09; background: var(--tone, var(--mint)); border-color: var(--tone, var(--mint)); }
.chip i { width: 8px; height: 8px; background: var(--tone, var(--mint)); }
.chip.on i { background: #0e0a09; }
.chip b { font-family: var(--mono); font-size: 11px; opacity: .7; }
.search { height: 34px; min-width: 200px; flex: 1; max-width: 300px; padding: 0 12px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .3); font-size: 13px; }
.search::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.select { height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--panel); font-size: 12px; font-weight: 700; }
.toolbar-label { font-size: 11px; font-weight: 800; color: var(--muted); }
.faction-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.faction-filter .new-tag { margin-left: 3px; padding: 0 3px; font-family: var(--mono); font-size: 8px; font-weight: 900; color: #fff6ee; background: var(--red); vertical-align: 1px; }
.faction-filter button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 4px; border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--muted); }
.faction-filter button .pact { opacity: .6; }
.faction-filter button.on { border-color: var(--mint); color: var(--text); background: rgba(46, 224, 181, .12); }
.faction-filter button.on .pact { opacity: 1; box-shadow: inset 0 0 0 1px var(--mint); }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; white-space: nowrap; }
.toggle input { appearance: none; width: 30px; height: 16px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: .15s; }
.toggle input:checked { background: var(--mint-deep); }
.toggle input:checked::after { left: 16px; background: var(--mint); }
.ml-auto { margin-left: auto; }
/* 手机上才有：点开 / 收起筛选；数字是正在用的筛选条件个数 */
.filter-toggle { display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--panel); font-size: 12px; font-weight: 800; color: var(--text); }
.filter-toggle::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.filters-open .filter-toggle { border-color: var(--mint); }
.filters-open .filter-toggle::after { margin-top: 3px; transform: rotate(-135deg); }
.filter-toggle b:empty { display: none; }
.filter-toggle b { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; font-family: var(--mono); font-size: 11px; color: #0e0a09; background: var(--mint); }

/* ---------- grid ---------- */
/* 列表头：标题 + 数量 + 当前筛选 */
.list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 0 0; }
.list-head h2 { margin: 0; font-size: 17px; font-weight: 900; color: var(--text); }
.list-count { font-family: var(--mono); font-size: 17px; color: var(--red-hi); }
.list-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--muted); }
.list-note i { padding: 2px 8px; font-style: normal; color: var(--text); background: rgba(234, 85, 48, .14); border: 1px solid rgba(234, 85, 48, .45); }
.list-clear { margin-left: auto; height: 26px; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 800; color: var(--muted); background: none; border: 1px solid var(--line-strong); cursor: pointer; }
.list-clear:hover { color: var(--text); border-color: var(--red-hi); }
.ak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 12px 0 60px; align-items: stretch; }
.ak-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line-strong); }
.ak-empty b { display: block; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.ak-empty > span { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

/* ---------- card：作战档案式边框（左侧难度色档案侧标 + 右上缺角） ---------- */
.ak-card { --tone: var(--mint); position: relative; display: flex; flex-direction: column; min-width: 0; padding-left: 24px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 140px), #1a1513; cursor: pointer; transition: transform .15s, border-color .15s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.ak-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 70%, transparent); }
.ak-card > .card-body, .ak-card > .card-foot { position: relative; z-index: 1; }
/* 档案侧标：难度编号 + 竖排协议名 / 房间号 + 条码，底部斜切。信息和卡片里重复，只做装饰：暗底 + 内侧一条难度色，不抢标题 */
.card-side { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 10px; color: var(--tone); background: #120d0b; box-shadow: inset -3px 0 0 var(--tone);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 60% 100%, 0 100%); }
.card-side b { font-family: var(--mono); font-size: 13px; font-style: italic; font-weight: 900; line-height: 1; }
.card-side span { writing-mode: vertical-rl; opacity: .45; font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: 2.5px; white-space: nowrap; overflow: hidden; }
.card-side i { margin-top: auto; margin-bottom: 14px; width: 12px; height: 26px; flex: none; background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 2px, currentColor 2px 4px, transparent 4px 5px); opacity: .35; }
/* 右上缺角：难度色小三角 */
.card-notch { position: absolute; z-index: 2; right: 0; top: 0; width: 14px; height: 14px; pointer-events: none; background: linear-gradient(45deg, transparent 50%, var(--tone) 50%); }
.ak-card.joined { outline: 2px solid var(--mint); outline-offset: -1px; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 10px 12px 12px; }
.card-head { display: flex; align-items: center; gap: 6px; }
.diff-badge { display: inline-flex; align-items: center; height: 24px; color: #0e0a09; font-size: 12px; font-weight: 900; background: var(--tone); padding: 0 10px 0 0; white-space: nowrap; }
.diff-badge b { display: grid; place-items: center; align-self: stretch; padding: 0 7px; margin-right: 7px; font-family: var(--mono); font-style: italic; color: var(--tone); background: #100c0b; }
.pill { height: 22px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pill.time { color: var(--amber); border-color: rgba(242, 177, 52, .4); }
.card-head .age { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }

.card-hero { position: relative; height: 222px; margin-top: 0; padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 12px; }
.seat { position: relative; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 14%, transparent), rgba(0, 0, 0, .35)); border: 1px solid var(--line); }
.seat-stage { position: relative; flex: 1; overflow: hidden; }
.seat-emblem { position: absolute; left: 50%; top: 4px; width: 70px; height: 70px; max-width: 92%; object-fit: contain; transform: translateX(-50%); opacity: .5; filter: drop-shadow(0 0 6px rgba(46, 224, 181, .35)); }
.seat-emblem.mono { display: grid; place-items: center; font-size: 46px; font-weight: 900; color: rgba(245, 241, 239, .45); }
.seat-op { position: absolute; left: 50%; bottom: -2px; width: 118px; height: 118px; max-width: none; object-fit: contain; transform: translateX(-50%); filter: var(--op-outline); }
.seat-plate { padding: 3px 4px 4px; background: rgba(9, 7, 6, .9); min-width: 0; }
.seat-plate > span { display: block; font-size: 10px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-pacts { display: flex; gap: 2px; margin-top: 2px; height: 18px; align-items: center; --ps: 18px; }
.seat-pacts .more { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.seat.is-host .seat-plate > span::before { content: "★ "; color: var(--amber); }
.seat.you { border-color: var(--mint); }
.seat.open { align-items: center; justify-content: center; border-style: dashed; border-color: color-mix(in srgb, var(--tone) 45%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone) 8%, transparent) 0 6px, transparent 6px 12px); color: var(--muted); font-size: 22px; font-weight: 300; }
.ak-card.full .card-hero::after { content: "满员"; position: absolute; right: 6px; top: 6px; font-size: 11px; font-weight: 900; color: #0e0a09; background: var(--mint); padding: 2px 8px; }

/* 标题三层：小字房间信息（等宽、弱）→ 大标题（左侧难度色竖条）→ 挂通行证的细杆 */
.card-kicker { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-left: 11px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .4px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.card-kicker b { color: var(--tone); font-weight: 800; }
.card-kicker i { width: 3px; height: 3px; flex: none; background: currentColor; opacity: .5; transform: rotate(45deg); }
.card-title { position: relative; margin: 3px 0 0; padding: 0 0 11px 11px; font-size: 19px; font-weight: 900; letter-spacing: .3px; line-height: 1.25; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); border-bottom: 2px solid rgba(226, 219, 216, .32); }
.card-title::before { content: ""; position: absolute; left: 0; top: -15px; bottom: 13px; width: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 35%, transparent) 0 13px, var(--tone) 13px); }
.card-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--tone); }
.card-title span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title + .card-hero + .pact-strip, .card-hero + .pact-strip { margin-top: 12px; }
/* 盟约格：有几个盟约就均分几格，图标跟着格子宽度等比例缩放 */
.pact-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin-top: 10px; }
.pact-cell { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 0 4px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); --ps: 28px; }
.pact-cell .pact { width: 68%; height: auto; aspect-ratio: 1; max-width: 44px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.pact-cell .pact img { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pact-cell b { font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--muted); }
.pact-cell.has { border-color: rgba(255, 222, 205, .22); background: rgba(255, 255, 255, .06); }
.pact-cell.has b { color: var(--text); }
.pact-cell.deep b { color: var(--mint-hi); }
.pact-cell.deep .pact img { filter: drop-shadow(0 0 4px rgba(46, 224, 181, .7)); }
.pact-cell.none .pact { opacity: .3; }
.pact-cell.mine { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.pact-cell.mine .pact { opacity: 1; }
.pact-cell.mine b { color: var(--amber); }
.card-foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .28); }
.host { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.host .thumb { width: 30px; height: 30px; }
.host strong { display: block; font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.host small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count { font-family: var(--mono); font-size: 15px; font-weight: 800; }
.join { padding: 8px 13px; font-size: 12px; font-weight: 900; color: #0e0a09; background: var(--tone); box-shadow: 4px 0 0 #000; white-space: nowrap; }
.join:hover { filter: brightness(1.12); }
.join:disabled { color: var(--muted); background: #2e2928; box-shadow: none; filter: none; }
.join.joined { color: #0e0a09; background: var(--mint); }

/* ---------- 干员 / 时装选择器 ---------- */
.picker-tabs { display: flex; gap: 0; margin-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.picker-tabs button { height: 34px; padding: 0 16px; font-size: 13px; font-weight: 900; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.picker-tabs button.on { color: var(--text); border-bottom-color: var(--mint); }
.roster-picker .chips { margin-bottom: 8px; }
.roster-picker .chip { height: 28px; font-size: 11px; }
.brand-chips .chip { padding: 0 9px; }
.op-pact { position: absolute; z-index: 2; right: 4px; top: 4px; }
.pick .star.brand { max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #e4dddb; }
.picker-empty { grid-column: 1 / -1; color: var(--muted); font-size: 12px; padding: 12px 0; }
.skin-strip { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding: 8px; margin-bottom: 10px; border: 1px solid rgba(46, 224, 181, .25); background: rgba(18, 107, 87, .18); }
.skin-strip .label { flex: none; align-self: center; font-size: 11px; font-weight: 900; color: var(--mint); writing-mode: vertical-rl; letter-spacing: 2px; }
.skin { flex: none; width: 76px; display: grid; justify-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); }
.skin .thumb { width: 66px; height: 66px; }
.skin small { max-width: 100%; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin.on { border-color: var(--mint); background: rgba(46, 224, 181, .12); }
.skin.on small { color: var(--text); }
.section-label b { margin-left: 6px; font-family: var(--mono); color: var(--amber); }

/* ---------- drawer：深色头 + 浅色信息面板 ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--panel); color: var(--text); border-left: 1px solid var(--line-strong); transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { position: relative; padding: 16px 18px 14px; color: var(--text); background: linear-gradient(120deg, #201815, #140e0c); border-bottom: 3px solid var(--tone, var(--mint)); }
.drawer-head h3 { margin-top: 8px; font-size: 20px; font-weight: 900; padding-right: 40px; }
.drawer-head p { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.drawer-close { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--muted); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: grid; gap: 16px; align-content: start; }
.drawer-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.drawer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.drawer-meta span { padding: 2px 8px; font-size: 12px; font-weight: 800; color: var(--text); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); }
.drawer-meta b { font-family: var(--mono); color: var(--red-hi); }
/* 集合：语音 + 房主游戏 ID，两块并排，是加入后最先要用的东西 */
.meet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meet { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(234, 85, 48, .1), transparent 60%), #1a1312; }
.meet-ico { width: 38px; height: 38px; display: grid; place-items: center; color: var(--red-hi); background: rgba(234, 85, 48, .12); border: 1px solid rgba(234, 85, 48, .35); }
.meet-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meet-txt { min-width: 0; }
.meet-txt small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.meet-txt strong { display: block; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-go { grid-column: 1 / -1; height: 34px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #0e0a09; background: var(--mint); text-decoration: none; }
.meet-go:hover:not(:disabled) { background: var(--mint-hi); }
.meet-go:disabled, .meet-go.none { color: var(--muted); background: #2a2322; cursor: default; }
.meet.locked .meet-ico, .meet.off .meet-ico { color: var(--muted); background: rgba(255, 255, 255, .04); border-color: var(--line-strong); }
.meet.off { background: #181211; }
.meet.off strong { color: var(--muted); }
.drawer-seats { padding: 4px 6px 0; }
.drawer .pact-strip { margin-top: 0; }
.chat-empty { font-size: 12px; color: var(--muted); }
.section-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; color: var(--muted); letter-spacing: .5px; margin-bottom: 8px; }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.info-grid div { padding: 8px 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.info-grid small { display: block; font-size: 10px; color: var(--paper-soft); font-weight: 700; }
.info-grid b { font-size: 13px; }
.roster { display: grid; gap: 6px; }
.roster-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.roster-row .pair .thumb { width: 56px; height: 56px; }
.roster-row strong { font-size: 13px; font-weight: 900; }
.roster-row small { display: block; font-size: 11px; color: var(--paper-soft); margin-top: 2px; }
.roster-row .pacts { display: flex; gap: 3px; flex-wrap: wrap; --ps: 28px; justify-content: flex-end; max-width: 160px; }
.roster-row.open { border-style: dashed; background: transparent; color: var(--paper-soft); }
.badge { font-size: 9px; font-weight: 900; color: #111; background: var(--amber); padding: 0 4px; margin-left: 5px; vertical-align: 1px; }
.badge.you { color: #0e0a09; background: var(--mint); }
.cover-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cover-table div { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: #1e1714; color: var(--text); --ps: 34px; }
.cover-table strong { font-size: 13px; }
.cover-table small { display: block; font-size: 11px; color: var(--muted); }
.cover-table .need { font-size: 10px; font-weight: 900; color: #0e0a09; background: var(--tag, #9f9490); padding: 0 6px; margin-left: auto; white-space: nowrap; }
.cover-table .none { background: #322d2b; }
.cover-table .none .pact { opacity: .45; }
.cover-table .deep { --tag: var(--mint); }
.cover-table .deep .pact { box-shadow: inset 0 0 0 1px var(--mint); }
.note { font-size: 12px; color: var(--paper-soft); line-height: 1.6; padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(242, 177, 52, .12); }
.note b { color: #9a6200; }
.modal .note { color: var(--muted); background: rgba(242, 177, 52, .08); }
.modal .note b { color: var(--amber); }
.chat { display: grid; gap: 8px; }
.msg { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.msg .thumb { width: 30px; height: 30px; }
.msg b { font-size: 11px; color: var(--muted); }
.msg p { margin-top: 2px; font-size: 13px; line-height: 1.5; padding: 6px 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.btn { height: 38px; padding: 0 16px; font-size: 13px; font-weight: 900; border: 1px solid var(--line-strong); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--text); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12px; }
.btn.go { display: inline-flex; align-items: center; gap: 8px; color: #110d0c; background: #f4f2f2; border-color: #f4f2f2; }
.btn.go::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; color: #f4f2f2; background: #110d0c; }
.btn.go:disabled { color: var(--muted); background: #2e2928; border-color: #2e2928; }

/* ---------- modal ---------- */
.modal { position: fixed; z-index: 70; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(0, 0, 0, .68); }
.modal[hidden] { display: none; }
.modal-panel { width: min(760px, 100%); max-height: calc(100vh / var(--page-zoom) - 32px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong); }
.modal-panel.wide { width: min(1120px, 100%); }
/* 加入弹窗：上面是这间房的四个席位（你的通行证实时预览），下面两步：选盟约、确认干员 */
.modal-panel.join-modal { width: min(820px, 100%); }
.join-seats { padding: 14px 12px 10px; border: 1px solid var(--line); background: radial-gradient(80% 90% at 50% 0, rgba(234, 85, 48, .1), transparent 70%), rgba(0, 0, 0, .25); }
.join-seats .card-hero { max-width: 420px; margin: 0 auto; }
.join-cover { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.join-cover b { font-family: var(--mono); font-size: 18px; color: var(--text); }
.join-cover b.up { color: var(--mint); }
.join-cover i { font-style: normal; color: var(--muted); }
.join-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.join-step-head { display: flex; align-items: center; gap: 10px; }
.join-step-head b { width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 900; color: #0e0a09; background: var(--red-hi); }
.join-step-head strong { font-size: 15px; font-weight: 900; }
.join-step-head span { font-size: 12px; color: var(--muted); }
.join-progress { white-space: nowrap; margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 900; color: var(--amber); }
.join-progress.ok { color: var(--mint); }
.jp-groups { display: grid; grid-template-columns: auto 1fr; gap: 10px 0; }
.jp-group { display: contents; }
.jp-label { align-self: stretch; display: flex; align-items: center; padding: 0 10px; margin-right: 10px; writing-mode: vertical-rl; letter-spacing: 3px; font-size: 12px; font-weight: 900; color: var(--muted); border-right: 2px solid var(--line-strong); }
.jp-group.gap .jp-label { color: var(--amber); border-right-color: var(--amber); }
.jp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.jp { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); min-width: 0; }
.jp .pact { --ps: 46px; opacity: .55; transition: opacity .12s; }
.jp strong { font-size: 12px; font-weight: 900; color: var(--muted); }
.jp-group.gap .jp { border-color: rgba(240, 176, 74, .35); background: rgba(240, 176, 74, .05); }
.jp-group.gap .jp .pact { opacity: .85; }
.jp:hover { border-color: rgba(46, 224, 181, .55); }
.jp:hover .pact { opacity: 1; }
.jp.on { border-color: var(--mint); background: rgba(46, 224, 181, .12); }
.jp.on .pact { opacity: 1; box-shadow: inset 0 0 0 2px var(--mint), 0 0 12px rgba(46, 224, 181, .35); }
.jp.on strong { color: var(--text); }
.jp-order { position: absolute; right: -1px; top: -1px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 900; color: #0e0a09; background: var(--text); }
.jp.first .jp-order { background: var(--mint); font-family: var(--cjk); }
.jp-n { position: absolute; left: 4px; top: 3px; font-family: var(--mono); font-size: 10px; font-weight: 800; color: var(--muted); }
.join-op { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.join-op-img { width: 52px; height: 52px; object-fit: contain; background: rgba(0, 0, 0, .3); }
.join-op strong { display: block; font-size: 14px; font-weight: 900; }
.join-op small { font-size: 11px; color: var(--muted); }
.join-op .btn { margin-left: auto; }
.modal-foot .why b { color: var(--mint); }
/* 发起：房间信息是左标签、右控件的表单行 */
.create-steps .join-step { padding: 14px 0; border-bottom: 1px solid var(--line); }
.create-steps .join-step:last-child { border-bottom: 0; }
.form-rows { display: grid; }
.form-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: 1px dashed var(--line); }
.form-row:first-child { border-top: 0; padding-top: 0; }
.form-key { padding-top: 8px; font-size: 12px; font-weight: 900; color: var(--muted); }
.form-val { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.form-val > input:not([type="time"]), .form-val textarea { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .3); font-size: 13px; }
.form-val textarea { min-height: 54px; resize: vertical; line-height: 1.5; }
.form-val input:focus, .form-val textarea:focus { outline: 1px solid var(--mint); }
.form-count { position: absolute; right: 10px; top: 9px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); pointer-events: none; }
.form-val .suggest { flex-basis: 100%; margin-top: 0; }
.diff-tile { padding-bottom: 12px; }
/* 我的出战：左边你的通行证，右边盟约 */
.modal-panel.me-modal { width: min(860px, 100%); }
.me-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.me-pass { display: grid; justify-items: center; height: 230px; padding-top: 4px; }
.me-top .jp-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.create-steps .jp-grid { grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: 6px; }
.create-steps .jp .pact { --ps: 40px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(46, 224, 181, .14), transparent 60%); }
.modal-head small { display: block; font-family: var(--mono); font-size: 10px; color: var(--mint); }
.modal-head h3 { font-size: 18px; font-weight: 900; }
.modal-scroll { flex: 1; overflow-y: auto; }
.modal-body { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.modal-foot .why { margin-right: auto; font-size: 12px; color: var(--muted); }
.modal-foot .why.warn { color: var(--amber); }
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--card-w, 380px) + 34px); } /* 预览卡和首页卡一样宽，挂牌同尺寸 */
.create-steps { padding: 4px 18px 18px; display: grid; gap: 4px; }
.create-preview { border-left: 1px solid var(--line); padding: 16px; background: rgba(0, 0, 0, .25); }
.create-preview .sticky { position: sticky; top: 0; display: grid; gap: 10px; }
.ak-grid > .ak-card { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.create-preview .ak-card { cursor: default; }
.create-preview .ak-card:hover { transform: none; }
.preview-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.preview-label b { color: var(--mint); }
.checklist { display: grid; gap: 4px; font-size: 12px; }
.checklist span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.checklist span::before { content: "○"; font-weight: 900; }
.checklist span.ok { color: var(--mint); }
.checklist span.ok::before { content: "✓"; }
.step { padding: 14px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.step-head b { font-family: var(--mono); font-size: 12px; color: #0e0a09; background: var(--mint); padding: 0 6px; }
.step-head strong { font-size: 14px; font-weight: 900; }
.step-head span { font-size: 11px; color: var(--muted); font-weight: 700; }
.diff-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.diff-tile { position: relative; text-align: left; padding: 10px 11px 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: grid; gap: 3px; }
.diff-tile .lv { font-family: var(--mono); font-weight: 900; font-size: 18px; color: var(--tone); line-height: 1; }
.diff-tile strong { font-size: 13px; font-weight: 900; }
.diff-tile small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.diff-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone); opacity: .45; }
.diff-tile.on { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); box-shadow: inset 0 0 0 1px var(--tone); }
.diff-tile.on::after { opacity: 1; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 96px), 1fr)); gap: 8px; }
.picker.eight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pick { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); min-width: 0; }
.pick .thumb { width: 100%; aspect-ratio: 1; }
.pick strong { font-size: 12px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick small { font-size: 10px; color: var(--muted); margin-top: -3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick:hover:not(:disabled) { border-color: rgba(46, 224, 181, .5); }
.pick.off .pact { opacity: .4; }
.pick.on { border-color: var(--mint); background: rgba(46, 224, 181, .12); }
.pick.on::before { content: "✓"; position: absolute; z-index: 2; right: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #0e0a09; background: var(--mint); }
.pick .pact { --ps: 52px; margin: 2px 0; }
.pick.on .pact { box-shadow: inset 0 0 0 2px var(--mint), 0 0 12px rgba(46, 224, 181, .35); }
.pick .need { position: absolute; z-index: 2; left: 0; top: 0; font-size: 10px; font-weight: 900; color: #111; background: var(--amber); padding: 1px 5px; }
.pick .star { position: absolute; z-index: 2; left: 4px; top: 4px; font-family: var(--mono); font-size: 9px; font-weight: 800; color: #111; background: var(--star, #ccc); padding: 0 3px; }
.plate { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.plate > .thumb { width: 108px; height: 108px; }
.plate .tag-in.f { background: var(--mint); }
.plate .tag-in { position: absolute; left: 0; bottom: 0; font-size: 10px; font-weight: 900; color: #111; background: var(--text); padding: 1px 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-info { flex: 1 1 160px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.plate-info small { font-size: 11px; color: var(--muted); font-weight: 800; }
.plate-info strong { display: block; font-size: 18px; font-weight: 900; }
.plate-info p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.plate-info .row { display: flex; gap: 6px; flex-wrap: wrap; }
.roster-picker { margin-top: 10px; padding: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.roster-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.roster-tools .search { max-width: none; }
.roster-tools .count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.roster-grid { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.more { grid-column: 1 / -1; height: 34px; border: 1px dashed var(--line-strong); font-size: 12px; font-weight: 800; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field > span { font-size: 11px; font-weight: 800; color: var(--muted); }
.field > span b { font-family: var(--mono); font-weight: 700; float: right; }
.field input, .field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .3); font-size: 13px; }
.field textarea { min-height: 60px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .search:focus { outline: 1px solid var(--mint); }
.seg { display: flex; border: 1px solid var(--line-strong); width: fit-content; }
.seg button { height: 32px; padding: 0 12px; font-size: 12px; font-weight: 800; color: var(--muted); border-right: 1px solid var(--line-strong); }
.seg button:last-child { border-right: 0; }
.seg button.on { color: #0e0a09; background: var(--mint); }
.seg input[type="time"] { height: 32px; padding: 0 8px; font-size: 12px; color-scheme: dark; }
.suggest { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.suggest button { font-size: 11px; color: var(--muted); padding: 2px 7px; border: 1px dashed var(--line-strong); }
.suggest button:hover { color: var(--mint); border-color: var(--mint); }

.toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; font-size: 13px; font-weight: 800; background: #080606; border-left: 4px solid var(--mint); transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
  .create-grid { grid-template-columns: minmax(0, 1fr); }
  .create-preview { border-left: 0; border-top: 1px solid var(--line); }
  .diff-tiles { grid-template-columns: repeat(2, 1fr); }
  .ak-brand, .ak-divider { display: none; }
  .ak-ticker { flex-wrap: wrap; }
  .ak-ticker .feed { flex-basis: 100%; border-top: 1px solid var(--line); }
  .hero-strip { height: auto; flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px; }
  .hero-stats { margin-left: 0; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 24px); }
  .ak-back small, .ak-me small, .ak-me > span:last-child { display: none; }
  .ak-back { gap: 8px; }
  .ak-back img { width: 28px; height: 28px; }
  .ak-back strong { font-size: 15px; letter-spacing: .2px; }
  /* 手机上横幅只留封面：招募数字和下面的数据条都不显示 */
  .hero-stats, .ak-ticker { display: none; }
  .ak-ticker.as-entry { display: block; }
  .pact-entry { gap: 10px; padding: 10px 12px; }
  .pe-icons, .pe-text small { display: none; }
  /* 筛选：平时只露搜索、排序和「筛选」按钮；点开后难度 / 服务器 / 盟约全部排成网格，不用横着滑 */
  .ak-toolbar { margin-top: 12px; padding: 12px 0; }
  .toolbar-row { gap: 8px; }
  .toolbar-row + .toolbar-row { margin-top: 12px; }
  .search { min-width: 0; flex: 1 1 0; }
  .search, #sort, .filter-toggle { order: -1; }
  .filter-toggle { display: inline-flex; }
  .ak-toolbar:not(.filters-open) .toolbar-row .chips, .ak-toolbar:not(.filters-open) .toolbar-row + .toolbar-row { display: none; }
  .toolbar-row .chips { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .toolbar-row .chips#serverChips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toolbar-row .chips#diffChips { margin-top: 4px; }
  .ak-toolbar .chip { min-width: 0; height: 34px; padding: 0 6px; justify-content: center; white-space: nowrap; }
  .faction-filter { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .faction-filter button { min-width: 0; height: 34px; padding: 0 4px; white-space: nowrap; }
  .toolbar-label { flex-basis: 100%; margin-bottom: -2px; }
  .toolbar-row .toggle.ml-auto { margin-left: 0; }
  .toolbar-row .toggle { flex: 1 1 auto; }
  .ak-top-actions { min-width: 0; }
  .ak-toolbar { position: static; }
  .ak-me { padding: 0 4px; }
  .ak-primary { padding: 0 12px; font-size: 12px; }
  .ak-link { padding: 0 10px; }
  .mark-tri small { display: none; }
  .hero-stats { flex-wrap: wrap; }
  .hero-stats > span { min-width: 0; flex: 1; }
  .hero-stats .miss { white-space: nowrap; font-size: 12px; }
  .hero-stats .miss .pact { display: none; }
  .hero-cover { aspect-ratio: 16 / 10; }
  .hero-tagline { position: static; display: block; font-size: 11px; text-align: center; }
  .pact-strip { gap: 2px; }
  .search { max-width: none; }
  .picker.eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid, .field-grid, .cover-table { grid-template-columns: 1fr 1fr; }
  .plate > .thumb { width: 84px; height: 84px; }
}

/* 盟约选择序号（放在 .pick.on::before 之后以覆盖 ✓） */
.pick.on[data-order]::before { content: attr(data-order); font-family: var(--mono); background: var(--text); }
.pick.on.first::before { background: var(--mint); }


/* ---------- 席位：「通行认证」亚克力挂件（照官方通行认证 53.0 实物） ---------- */
.seat.pass { --side: 15px; --block: 70px; width: min(var(--pass-w, 82px), 100%); position: relative; display: flex; flex-direction: column; align-items: center; background: none; border: 0; transform-origin: 50% -4px; will-change: transform; } /* 悬停摆动由 JS 的阻尼单摆驱动 */
.ak-grid .seat.pass { width: 100%; } /* 首页卡片里撑满格子，别处按它量出来的 --pass-w */
/* 三角登山扣：哑光黑 + 左侧弹簧门 + 底部横杆 */
.pass-clip { position: relative; z-index: 6; width: 24px; height: 22px; flex: none; margin-top: -8px; fill: none; stroke-linejoin: round; stroke-linecap: round; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pass-clip .edge { stroke: #514d4b; stroke-width: 4.6; }
.pass-clip .body { stroke: #0d0c0c; stroke-width: 3.2; }
.pass-clip .gate { stroke: #b2adab; stroke-width: 1.2; }
.pass-clip .bar { stroke: #95908e; stroke-width: 1.4; }
/* 编织带：细密织纹 + 斜纹框 + 竖排 RHODES ISLAND，压在卡片上沿 */
.pass-strap { position: relative; z-index: 5; width: 24px; height: 40px; flex: none; margin: -4px 0 -13px; padding: 4px 3px 3px; display: grid; grid-template-columns: 7px 1fr; gap: 2px; align-items: start;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px), #0f0e0e;
  border-radius: 1px; box-shadow: 0 2px 4px rgba(0, 0, 0, .55); }
.pass-strap .hatch { width: 7px; height: 13px; background: repeating-linear-gradient(-58deg, #f4f4f2 0 1.1px, transparent 1.1px 2.5px); }
.pass-strap span { writing-mode: vertical-rl; font-family: Impact, "Arial Narrow", "Bahnschrift", sans-serif; font-size: 5px; letter-spacing: .2px; line-height: 1; color: #f4f4f2; white-space: nowrap; overflow: hidden; max-height: 33px; }
.seat.pass.is-host .pass-strap .hatch { background: repeating-linear-gradient(-58deg, var(--amber) 0 1.1px, transparent 1.1px 2.5px); }
.seat.pass.you .pass-strap .hatch { background: repeating-linear-gradient(-58deg, var(--mint) 0 1.1px, transparent 1.1px 2.5px); }
/* 米色布标：缝在织带右侧 */
.pass-label { position: absolute; z-index: 6; left: calc(50% + 12px); top: 21px; display: flex; align-items: center; gap: 2px; padding: 3px 1.5px; writing-mode: vertical-rl; font-family: var(--mono); font-size: 6.5px; font-weight: 800; letter-spacing: .4px; color: #3a3226; background: #ece4d1; border-radius: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.pass-label i { font-style: normal; font-size: 7px; line-height: 1; }
.seat.pass.is-host .pass-label { background: var(--amber); color: #1c1305; }
.seat.pass.you .pass-label { background: var(--mint); color: #0e0a09; }
/* 磨砂亚克力卡身 */
.pass-body { position: relative; z-index: 1; flex: 1; width: 100%; overflow: hidden; border-radius: 3px;
  background: linear-gradient(180deg, rgba(241, 235, 233, .2), rgba(241, 235, 233, .08) 70%, rgba(241, 235, 233, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 18px rgba(0, 0, 0, .35); }
.seat.pass.you .pass-body { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 0 0 2px var(--mint), 0 10px 18px rgba(0, 0, 0, .35); }
/* 左上阶梯角 */
.pass-corner { position: absolute; z-index: 5; left: 0; top: 0; width: 14px; height: 10px; background: #111; clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 40%, 50% 100%, 0 100%); }
/* 右上镭射角 + 挂孔 + 右侧黑轨 */
.pass-holo { position: absolute; z-index: 3; right: 0; top: 0; width: 5px; height: 15px; background: linear-gradient(180deg, #8fdcf6, #f2d43a 70%, #e9a93a); }
.pass-hole { position: absolute; z-index: 3; right: 7px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .55); }
.pass-rail { position: absolute; z-index: 3; right: 2px; top: 17px; bottom: calc(var(--block) - 2px); width: 1.5px; background: rgba(245, 242, 241, .7); }
.pass-rail::after { content: ""; position: absolute; left: -1px; top: 30%; width: 3.5px; height: 10px; background: rgba(245, 242, 241, .7); }
/* 第一志愿徽记：盟约色，放在干员身后上方 */
.pass-emblem { position: absolute; z-index: 1; left: calc(50% + var(--side) / 2); top: 7px; width: 44px; height: 44px; transform: translateX(-50%); background: color-mix(in srgb, var(--pc) 55%, #fff); opacity: .42;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.seat.pass .seat-op { z-index: 2; left: calc(50% + var(--side) / 2); bottom: calc(var(--block) - 1px); width: 96px; height: 96px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
/* 左侧白条：竖排用户 ID + 条码 + 镭射细线 */
.pass-side { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: var(--side); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 4px; background: rgba(251, 250, 250, .86); box-shadow: 1px 0 0 rgba(0, 0, 0, .08); }
.pass-side::after { content: ""; position: absolute; right: -1px; bottom: 0; width: 2px; height: var(--block); background: linear-gradient(180deg, #e8505b, #f5c542 38%, #7fd6f5 72%, rgba(252, 252, 251, 0)); }
.pass-spine { flex: 1; min-height: 0; writing-mode: vertical-rl; text-orientation: mixed; font-family: "Bahnschrift", "Arial Narrow", var(--cjk); font-size: 10.5px; font-weight: 900; letter-spacing: .6px; line-height: 1; color: #131212; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-side .barcode { flex: none; width: 10px; height: 24px; background: repeating-linear-gradient(180deg, #131212 0 1px, transparent 1px 2px, #131212 2px 4px, transparent 4px 5px, #131212 5px 5.6px, transparent 5.6px 7px); }
/* 底部盟约色块：右上缺角 + 水印徽记 */
.pass-block { position: absolute; z-index: 3; left: var(--side); right: 0; bottom: 0; height: var(--block); display: flex; flex-direction: column; padding: 7px 4px 3px 5px; color: #fff; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, color-mix(in srgb, var(--pc) 82%, #fff) 88%, transparent), color-mix(in srgb, var(--pc) 90%, transparent) 42%, color-mix(in srgb, color-mix(in srgb, var(--pc) 72%, #000) 94%, transparent));
  clip-path: polygon(0 4px, calc(100% - 12px) 4px, calc(100% - 8px) 0, 100% 0, 100% 100%, 0 100%); }
.pass-block::before { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 2px; background: rgba(245, 242, 241, .8); }
.pass-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 0 58%, rgba(255, 255, 255, .22) 58% calc(58% + .6px), transparent calc(58% + .6px)); pointer-events: none; }
.pass-block .mark { position: absolute; right: -12px; bottom: -10px; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 5px rgba(255, 255, 255, .05); }
.pass-block .mark::before { content: ""; position: absolute; inset: 7px; background: rgba(255, 255, 255, .16); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.pass-title { position: relative; display: block; font-family: Impact, "Arial Narrow", "Bahnschrift", sans-serif; font-size: 11px; font-weight: 400; letter-spacing: .3px; line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.pass-rule { position: relative; display: block; height: 3px; margin: 2px 0 1px; border-top: 1px solid rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .35); }
.pass-micro { position: relative; font-size: 6.5px; font-weight: 700; letter-spacing: .3px; line-height: 1.2; color: rgba(255, 255, 255, .86); white-space: nowrap; overflow: hidden; }
.pass-meta { position: relative; display: flex; align-items: center; gap: 2px; min-height: 14px; margin-top: auto; }
.pass-meta .seat-pacts { margin: 0; height: 14px; gap: 2px; --ps: 14px; }
.pass-meta .pact { background: rgba(12, 11, 10, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.pass-more { margin-left: 1px; font-family: var(--mono); font-size: 7.5px; font-weight: 800; color: #fff; }
.pass-foot { position: relative; display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.pass-foot .prof { display: grid; place-items: center; width: 12px; height: 12px; flex: none; font-size: 8px; font-weight: 900; line-height: 1; color: #131212; background: #fbfbfa; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.pass-foot .serial, .seat.pass.open .serial { font-family: var(--mono); font-size: 6.5px; font-weight: 800; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.pass-foot .tick { margin-left: auto; width: 9px; height: 7px; flex: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 1px, transparent 1px 2px, rgba(255, 255, 255, .85) 2px 3.5px, transparent 3.5px 4.5px); }
/* 空位：空挂扣 + 虚线卡 */
.seat.pass.open .pass-clip .body { stroke: #2e2928; }
.seat.pass.open .pass-clip .edge, .seat.pass.open .pass-clip .gate, .seat.pass.open .pass-clip .bar { stroke: #494240; }
.seat.pass.open .pass-strap { background: #241f1d; box-shadow: none; }
.seat.pass.open .pass-strap .hatch { background: repeating-linear-gradient(-58deg, #453e3c 0 1.1px, transparent 1.1px 2.5px); }
.seat.pass.open .pass-strap span { color: #453e3c; }
.seat.pass.open .pass-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone) 7%, transparent) 0 6px, transparent 6px 12px); border: 1px dashed color-mix(in srgb, var(--tone) 50%, transparent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); }
.seat.pass.open .pass-body b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); border-radius: 50%; color: var(--tone); font-size: 16px; font-weight: 400; }
.seat.pass.open .pass-body small { font-size: 10px; font-weight: 700; }
.seat.pass.open .serial { position: absolute; bottom: 4px; right: 5px; color: var(--muted); }
@media (max-width: 640px) {
  .card-hero { padding: 0 4px; gap: 6px; }
  .seat.pass { --side: 13px; }
  .ak-card { padding-left: 18px; }
  .card-side { width: 18px; gap: 6px; }
  .card-side b { font-size: 11px; }
  .card-side span { font-size: 7.5px; letter-spacing: 2px; }
  .card-side i { width: 9px; }
  .pass-spine { font-size: 9.5px; }
  .pass-foot .tick { display: none; }
  .hero-lineup .troupe { height: 112px; }
  .jp-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .meet-row { grid-template-columns: 1fr; }
  .create-steps .jp-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .me-top { grid-template-columns: minmax(0, 1fr); }
  .create-preview { padding: 12px 8px; }
  .me-top .jp-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .me-pass { width: 130px; height: 210px; margin: 0 auto; }
  .form-key { padding-top: 0; }
  .meet { grid-template-columns: auto 1fr auto; padding: 10px; }
  .meet-go { grid-column: auto; padding: 0 14px; }
  .jp { padding: 8px 2px 6px; }
  .jp .pact { --ps: 36px; }
  .jp strong { font-size: 11px; }
  .jp-label { padding: 0 6px; margin-right: 8px; }
  .join-step-head span { display: none; }
  .hero-lineup .troupe img { width: 102px; height: 102px; }
}


/* 滚动条：深色细条，悬停变薄荷绿（参照 Stronghold-Protocol 的 theme） */
* { scrollbar-width: thin; scrollbar-color: rgba(240, 228, 216, .18) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(240, 228, 216, .18); }
::-webkit-scrollbar-thumb:hover { background: var(--mint); }

/* 盟约选择：列数 = 盟约数，图标随格宽放大，铺满整行 */
.jp-grid, .create-steps .jp-grid, .me-top .jp-grid { grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 6px; }
.jp .pact, .create-steps .jp .pact { width: 62%; height: auto; aspect-ratio: 1; max-width: 56px; }

/* 选好的干员：大一点 */
.join-op { gap: 14px; padding: 8px 12px 8px 8px; }
.join-op-img { width: 88px; height: 88px; }
.join-op strong { font-size: 16px; }

/* 房间信息表单：标签在上、输入框带四角括号，服务器 / 语音并排 */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.field-box { position: relative; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .32); transition: border-color .15s; }
.field-box::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: .55;
  background: linear-gradient(var(--mint), var(--mint)) top left / 8px 2px no-repeat, linear-gradient(var(--mint), var(--mint)) top left / 2px 8px no-repeat,
    linear-gradient(var(--mint), var(--mint)) bottom right / 8px 2px no-repeat, linear-gradient(var(--mint), var(--mint)) bottom right / 2px 8px no-repeat; }
.field-box:focus-within { border-color: rgba(46, 224, 181, .6); }
.field-box:focus-within::after { opacity: 1; }
.field-box input, .field-box textarea { display: block; width: 100%; padding: 10px 12px; font-size: 14px; background: none; border: 0; outline: 0; }
.field-box input[data-field="title"] { padding-right: 56px; font-size: 15px; font-weight: 700; }
.field-box textarea { min-height: 58px; resize: vertical; line-height: 1.5; }
.field-box input::placeholder, .field-box textarea::placeholder { color: rgba(240, 228, 216, .32); }
.field .form-count { top: 12px; }
.field .seg { width: 100%; }
.field .seg button { flex: 1; height: 36px; }
.field .suggest { margin-top: 0; }
@media (max-width: 640px) {
  .jp-grid, .create-steps .jp-grid, .me-top .jp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .join-op-img { width: 64px; height: 64px; }
}






/* ==========================================================================================
   弹出界面（弹窗 + 房间详情）：Vercel Geist 的做法——极简黑白灰、细边框，强调色（青）只用在关键处。
   - 层级：#0a0a0a 底 → #111 卡 → #1a1a1a 选中；边框 #2e2e2e，悬停 #454545
   - 文字：#ededed 主、#a1a1a1 次、#8f8f8f 弱；英文小字用等宽
   - 可点的都有边框和悬停变化；选中 = 白边 + 浅一级的底（盟约格再加青色小点）
   - 主按钮白底黑字，次按钮黑底细框；聚焦 = 灰白双圈焦点环
   首页仍是红黑，不受影响。
   ========================================================================================== */
.modal-panel, .drawer {
  --g-bg: #0a0a0a; --g-1: #111111; --g-2: #1a1a1a; --g-3: #232323;
  --g-line: #2e2e2e; --g-line-2: #454545; --g-hi: #ededed; --g-md: #a1a1a1; --g-lo: #8f8f8f; --g-dim: #6b6b6b;
  --g-accent: #2ee0b5; --g-ring: 0 0 0 1px #a1a1a1, 0 0 0 4px rgba(255, 255, 255, .14);
  --mint: var(--g-accent); --mint-hi: #6af0cf; --red-hi: var(--g-accent); --amber: #f5a524;
  --line: var(--g-line); --line-strong: var(--g-line-2); --panel: var(--g-bg); --text: var(--g-hi); --muted: var(--g-md);
  color: var(--g-hi); background: var(--g-bg); border: 1px solid var(--g-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .6); }
.modal-panel { position: relative; border-radius: 12px; overflow: hidden; }
.drawer { border-width: 0 0 0 1px; }
.modal { background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer-backdrop { background: rgba(0, 0, 0, .6); }

/* 头部 / 底部 */
.modal-head, .drawer-head { background: none; border-bottom: 1px solid var(--g-line); }
.modal-head { padding: 20px 20px 16px; }
.drawer-head { border-bottom: 2px solid var(--tone, var(--g-line)); }
.modal-head small { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--g-lo); }
.modal-head h3, .drawer-head h3 { margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--g-hi); }
.drawer-head p { font-size: 13px; color: var(--g-md); }
.drawer-meta span { font-weight: 600; color: var(--g-md); background: var(--g-1); border: 1px solid var(--g-line); border-radius: 6px; }
.drawer-meta b { color: var(--g-hi); }
.modal-foot, .drawer-foot { gap: 10px; border-top: 1px solid var(--g-line); background: #0d0d0d; }
.modal-foot .why { font-size: 13px; color: var(--g-lo); }
.modal-foot .why b { color: var(--g-hi); }
.modal-foot .why.warn { color: var(--amber); }
.why-move { color: var(--amber); }

/* 步骤标题：描边小圆点 + 标题；进度用等宽青色 */
.join-step { gap: 10px; }
.create-steps .join-step { padding: 18px 0; border-bottom: 1px solid var(--g-line); }
.join-step-head { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 0; border: 0; background: none; }
.sh-step { order: -1; display: flex; flex: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
.sh-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--g-line-2); background: none;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--g-md); text-shadow: none; }
.sh-step small, .sh-title small { display: none; }
.sh-title { display: flex; align-items: center; flex: none; padding: 0; border: 0; }
.sh-title strong { padding: 0; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--g-hi); white-space: nowrap; }
.join-step-head > span:not(.sh-title):not(.sh-step) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--g-lo); }
.join-step-head .join-progress { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--g-accent); }
.join-step-head .join-progress:not(.ok) { color: var(--amber); }
.modal-panel .section-label, .drawer .section-label { gap: 10px; font-size: 14px; font-weight: 700; color: var(--g-hi); }
.modal-panel .section-label::before, .drawer .section-label::before { content: none; }
.modal-panel .section-label::after, .drawer .section-label::after { background: var(--g-line); }
.drawer .section-label b { font-family: var(--mono); color: var(--g-md); }

/* 可点的：统一焦点环 */
.modal-panel :is(.jp, .diff-tile, .seg button, .chip, .suggest button, .btn, .pick, .picker-tabs button):focus-visible,
.drawer :is(.btn, .meet-go):focus-visible { outline: none; box-shadow: var(--g-ring); }

/* 选择卡：盟约 / 难度 */
.modal-panel .jp-groups { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.modal-panel .jp-label { writing-mode: horizontal-tb; align-self: start; margin: 4px 0 2px; padding: 0; border: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--g-lo); }
.modal-panel .jp-group.gap .jp-label { color: var(--amber); }
.modal-panel .jp-grid { gap: 8px; padding: 0; border: 0; box-shadow: none; background: none; }
.modal-panel .jp, .modal-panel .diff-tile { position: relative; border-radius: 8px; background: var(--g-1); border: 1px solid var(--g-line); clip-path: none; box-shadow: none;
  transition: border-color .15s, background-color .15s; }
.modal-panel .jp::before, .modal-panel .jp::after { content: none; }
.modal-panel .jp:hover, .modal-panel .diff-tile:hover { border-color: var(--g-line-2); }
.modal-panel .jp .pact { opacity: .7; background: none; box-shadow: none; }
.modal-panel .jp .pact img { filter: none; }
.modal-panel .jp strong { font-size: 13px; font-weight: 600; color: var(--g-md); }
.modal-panel .jp.on { background: var(--g-2); border-color: var(--g-hi); }
.modal-panel .jp.on .pact { opacity: 1; box-shadow: none; }
.modal-panel .jp.on strong { color: var(--g-hi); }
.modal-panel .jp.on::after { content: ""; position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--g-accent); box-shadow: 0 0 0 3px rgba(46, 224, 181, .2); }
.modal-panel .jp-order { left: 6px; right: auto; top: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--g-bg); background: var(--g-hi); box-shadow: none; }
.modal-panel .jp.first .jp-order { background: var(--g-hi); }
.modal-panel .jp-n { left: auto; right: 8px; top: 6px; font-family: var(--mono); font-size: 11px; color: var(--g-lo); }
.modal-panel .jp.on .jp-n { right: 22px; }
.modal-panel .jp-group.gap .jp { border-color: var(--g-line); }
.modal-panel .jp-group.gap .jp:not(.on) { border-style: dashed; border-color: rgba(245, 165, 36, .45); }
.modal-panel .diff-tile::after { left: 11px; right: auto; bottom: 10px; width: 6px; height: 6px; border-radius: 50%; opacity: 1; }
.modal-panel .diff-tile { padding-bottom: 12px; }
.modal-panel .diff-tile strong { font-weight: 600; color: var(--g-md); padding-left: 12px; }
.modal-panel .diff-tile.on { background: var(--g-2); border-color: var(--g-hi); box-shadow: none; }
.modal-panel .diff-tile.on strong { color: var(--g-hi); }
.modal-panel .diff-tile.on .lv::after { content: none; }

/* 分段控件：轨道 + 浮起的选中段 */
.modal-panel .seg { width: 100%; padding: 3px; gap: 0; border-radius: 8px; background: var(--g-1); border: 1px solid var(--g-line); overflow: visible; }
.modal-panel .seg button { flex: 1; height: 32px; padding: 0 12px; border-radius: 6px; border: 0; font-size: 13px; font-weight: 600; color: var(--g-md); background: transparent; box-shadow: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.modal-panel .seg button:hover { color: var(--g-hi); }
.modal-panel .seg button.on { color: var(--g-hi); background: #2b2b2b; box-shadow: 0 0 0 1px #3c3c3c, 0 1px 2px rgba(0, 0, 0, .4); }
.modal-panel .seg button.on::before { content: none; }
.modal-panel .seg input[type="time"] { color: var(--g-hi); }

/* 标签 / 标题建议：胶囊；选中 = 青边青字 */
.modal-panel .chip, .modal-panel .suggest button { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--g-md); background: transparent; border: 1px solid var(--g-line); box-shadow: none; white-space: nowrap; }
.modal-panel .chip:hover, .modal-panel .suggest button:hover { color: var(--g-hi); border-color: var(--g-line-2); background: transparent; }
.modal-panel .chip.on { color: var(--g-accent); background: rgba(46, 224, 181, .08); border-color: var(--g-accent); box-shadow: none; }
.modal-panel .chip.on::before { content: none; }
.modal-panel .suggest { gap: 6px; }

/* 输入框 */
.modal-panel .form-grid { gap: 16px; }
.modal-panel .field { gap: 6px; }
.modal-panel .field-label { font-family: var(--cjk); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--g-md); }
.modal-panel .field-label::before { content: none; }
.modal-panel .field-box { border-radius: 6px; background: var(--g-bg); border: 1px solid var(--g-line); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.modal-panel .field-box::after { content: none; }
.modal-panel .field-box:hover { border-color: var(--g-line-2); }
.modal-panel .field-box:focus-within { border-color: var(--g-lo); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.modal-panel .field-box input { height: 40px; padding: 0 12px; font-size: 14px; color: var(--g-hi); }
.modal-panel .field-box input[data-field="title"] { padding-right: 56px; }
.modal-panel .field-box textarea { padding: 10px 12px; font-size: 14px; color: var(--g-hi); }
.modal-panel .field-box input::placeholder, .modal-panel .field-box textarea::placeholder { color: var(--g-dim); }
.modal-panel .form-count { top: 12px; right: 12px; font-family: var(--mono); color: var(--g-dim); }

/* 按钮：主 = 白底黑字，次 = 黑底细框 */
.modal-panel .btn, .drawer .btn { position: relative; height: 36px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0;
  color: var(--g-hi); background: var(--g-bg); border: 1px solid var(--g-line); box-shadow: none; transition: background-color .15s, border-color .15s; }
.modal-panel .btn::after, .drawer .btn::after { content: none; }
.modal-panel .btn.sm, .drawer .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.modal-panel .btn:hover:not(:disabled), .drawer .btn:hover:not(:disabled) { background: var(--g-2); border-color: var(--g-line-2); box-shadow: none; }
.modal-panel .btn.go, .drawer .btn.go { color: var(--g-bg); background: var(--g-hi); border-color: var(--g-hi); box-shadow: none; padding: 0 16px; }
.modal-panel .btn.go::before, .drawer .btn.go::before { content: none; }
.modal-panel .btn.go:hover:not(:disabled), .drawer .btn.go:hover:not(:disabled) { background: #cccccc; border-color: #cccccc; }
.modal-panel .btn:disabled, .drawer .btn:disabled, .modal-panel .btn.go:disabled, .drawer .btn.go:disabled { color: var(--g-dim); background: var(--g-1); border-color: var(--g-line); cursor: not-allowed; }
.modal-head .btn.sm, .drawer-close { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 6px; color: var(--g-lo); background: transparent; border: 0; }
.modal-head .btn.sm:hover, .drawer-close:hover { color: var(--g-hi); background: var(--g-2); }

/* 席位区、选好的干员、预览 */
.join-seats { border-radius: 8px; border: 1px solid var(--g-line, #2e2e2e); background: var(--g-1, #111); }
.join-seats::before, .join-seats::after { content: none; }
.join-cover { color: var(--g-lo, #8f8f8f); }
.join-cover b { font-family: var(--mono); color: var(--g-hi, #ededed); }
.join-cover b.up { color: var(--g-accent, #2ee0b5); }
.modal-panel .join-op { border-radius: 8px; background: var(--g-1); border: 1px solid var(--g-line); }
.modal-panel .join-op-img { border-radius: 6px; background: var(--g-bg); box-shadow: none; outline: 0; border: 1px solid var(--g-line); }
.modal-panel .join-op strong { color: var(--g-hi); }
.create-preview { border-left: 1px solid var(--g-line, #2e2e2e); background: #0d0d0d; box-shadow: none; }
.modal-panel .picker-tabs { border-bottom-color: var(--g-line); }
.modal-panel .picker-tabs button { color: var(--g-md); }
.modal-panel .picker-tabs button.on { color: var(--g-hi); border-bottom-color: var(--g-hi); }
.modal-panel .pick { border-radius: 6px; }

/* 房间详情：集合卡、聊天 */
.drawer-body { background: none; }
.drawer .meet { border-radius: 8px; background: var(--g-1); border: 1px solid var(--g-line); }
.drawer .meet-ico { border-radius: 6px; color: var(--g-hi); background: var(--g-2); border-color: var(--g-line); }
.drawer .meet.off { background: var(--g-bg); }
.drawer .meet-txt strong { color: var(--g-hi); }
.drawer .meet-go { border-radius: 6px; color: var(--g-bg); background: var(--g-hi); box-shadow: none; }
.drawer .meet-go:hover:not(:disabled) { background: #cccccc; }
.drawer .meet-go:disabled, .drawer .meet-go.none { color: var(--g-dim); background: var(--g-2); }
.drawer .msg b { font-size: 12px; color: var(--g-md); }
.drawer .msg p { border-radius: 8px; font-size: 14px; color: var(--g-hi); background: var(--g-1); border-color: var(--g-line); }
.chat-input { display: flex; gap: 8px; margin-top: 12px; }
.chat-input input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 6px; font-size: 14px; color: var(--g-hi, #ededed); background: var(--g-bg, #0a0a0a); border: 1px solid var(--g-line, #2e2e2e); outline: 0; }
.chat-input input:focus { border-color: var(--g-lo, #8f8f8f); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.chat-input input::placeholder { color: var(--g-dim, #6b6b6b); }
.chat-lock { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12px; color: var(--g-lo); background: var(--g-1); border: 1px dashed var(--g-line); }

/* 栏太窄时：盟约格一行 4 个、服务器 / 语音各占一行 */
.modal-panel .join-step, .modal-panel .create-steps { container-type: inline-size; }
@container (max-width: 600px) { .modal-panel .jp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (max-width: 560px) { .modal-panel .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* 首页工具栏：服务器筛选 */
.server-chips { padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--line-strong); }
@media (max-width: 640px) {
  .join-step-head .sh-title, .join-step-head .sh-step { display: flex; }
  .server-chips { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* 弹窗 / 房间详情里的空位：首页卡片才有 --tone，这里给中性灰的虚线框 */
.modal-panel .seat.pass.open, .drawer .seat.pass.open { --tone: #8f8f8f; }
.modal-panel .seat.pass.open .pass-body, .drawer .seat.pass.open .pass-body { border: 1px dashed rgba(237, 237, 237, .3); border-radius: 3px;
  background: repeating-linear-gradient(135deg, rgba(237, 237, 237, .04) 0 6px, transparent 6px 12px); }
.modal-panel .seat.pass.open .pass-body b, .drawer .seat.pass.open .pass-body b { color: #a1a1a1; border-color: rgba(237, 237, 237, .3); }

/* 加入时的盟约选择：一排放下，房间缺的标「缺」 */
.jp-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; color: var(--g-lo, var(--muted)); }
.jp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.jp-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--g-line-2, #454545); }
.jp-legend .gap { color: var(--amber); }
.jp-legend .gap::before { border: 1px dashed var(--amber); }
.jp-legend b { font-family: var(--mono); color: var(--g-hi, var(--text)); }
.jp-gap { position: absolute; right: 6px; top: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 16px; color: #1a1205; background: var(--amber); }
.modal-panel .jp.gap:not(.on) { border-style: dashed; border-color: rgba(245, 165, 36, .5); }
.modal-panel .jp.on .jp-gap { right: 22px; }

/* 出战干员卡：右边「随机」「更换」两个按钮 */
.join-op-acts { display: flex; gap: 6px; margin-left: auto; }
.join-op .join-op-acts .btn { margin-left: 0; }
/* 游戏邀请下面的识别结果 */
.field-hint { font-size: 12px; color: var(--g-lo, var(--muted)); }
.field-hint b { font-family: var(--mono); color: var(--g-accent, var(--mint)); letter-spacing: .08em; }
.meet-key { font-family: var(--mono); letter-spacing: .12em; }

/* 挂牌是一块硬的亚克力：整排共用透视，整块旋转不变形；摆动时板面高光随角度扫过，侧边厚度的阴影跟着转 */
.card-hero { perspective: 900px; }
.seat.pass { transform-style: preserve-3d; backface-visibility: hidden; }
.pass-body { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .35),
    calc(var(--tw, 0) * -.22px + 1.5px) 1.5px 0 rgba(20, 22, 22, .85), calc(var(--tw, 0) * -.22px + 2.5px) 2.5px 0 rgba(0, 0, 0, .35), 0 10px 18px rgba(0, 0, 0, .35); }
.seat.pass.you .pass-body { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 0 0 2px var(--mint),
    calc(var(--tw, 0) * -.22px + 2.5px) 3px 0 rgba(0, 0, 0, .45), 0 10px 18px rgba(0, 0, 0, .35); }
/* 反光：一团柔和的椭圆光斑 + 一条很淡的细光，位置随摆角 / 侧身游移，每块起点随机（--shx），静止时不出现 */
.pass-body::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(90% 55% at calc(35% - var(--sw, 0) * 5% + var(--shx, 0) * 22%) calc(22% + var(--tw, 0) * 3% + var(--shx, 0) * 8%), rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 45%, transparent 70%),
    linear-gradient(calc(98deg + var(--shx, 0) * 10deg), transparent 47%, rgba(255, 255, 255, .07) 50%, transparent 53%) no-repeat;
  background-size: 100% 100%, 280% 100%;
  background-position: 0 0, calc(45% - var(--sw, 0) * 6% + var(--shx, 0) * 25%) 0;
  opacity: min(1, calc(var(--sw, 0) * var(--sw, 0) / 25 + var(--tw, 0) * var(--tw, 0) / 30)); }
.seat.pass.open .pass-body::after { content: none; }
/* 职业角标：游戏内职业图标（白色线稿）放在深色小方块里 */
.pass-foot .prof { width: 13px; height: 13px; background: #161616; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); overflow: hidden; }
.pass-foot .prof img { width: 100%; height: 100%; object-fit: contain; }

/* 演示组队：第一个真实同盟发布后整批撤下 */
.pill.demo { color: #0b0b0b; background: #f2c94c; border-color: transparent; font-weight: 800; letter-spacing: .08em; }
.ak-card.is-demo .card-body { opacity: .94; }
.join.demo { color: #6b6b6b; background: transparent; border: 1px dashed currentColor; cursor: help; }
.demo-note { margin-left: 10px; padding: 2px 8px; color: #0b0b0b; background: #f2c94c; border-radius: 3px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 12px; color: var(--g-hi, #ededed); background: rgba(242,201,76,.1); border: 1px solid rgba(242,201,76,.45); border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
.demo-banner b { color: #f2c94c; }
.demo-banner .btn { margin-left: auto; }
/* 登录提示 */
.login-modal { width: min(440px, calc(100vw - 32px)); }
.login-body { display: grid; gap: 14px; padding: 18px 20px 22px; color: var(--g-lo, #a1a1a1); font-size: 13.5px; line-height: 1.6; }
.login-body p { margin: 0; }
.login-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.login-actions .btn { text-decoration: none; }