/* console/mobile.css -- ★S9.14 手机端控制台（/m/dm）专用样式
   加载顺序：console.css（复用桌面主题变量与组件）→ mobile.css（本文件只做移动化覆盖）
   原则：① 点击区 ≥44px ② 输入框 16px（防 iOS 聚焦自动放大）③ 安全区适配 ④ 底部 5 Tab 固定 */

.wzm [hidden],.pin-gate[hidden],#mShell[hidden]{display:none !important}  /* hidden 属性必须压过 .pin-gate 的 display:flex（否则口令墙挡在屏幕上） */
.wzm{padding:0;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
.wzm .m-body{padding:10px 10px calc(84px + env(safe-area-inset-bottom));}
.wzm .card{padding:12px;margin-bottom:12px;border-radius:14px}
.wzm .card h2{font-size:13px;margin-bottom:8px}
.wzm .hint{font-size:12.5px;line-height:1.6}
.wzm .row{gap:8px}

/* ---- 顶栏（吸顶状态条）---- */
.m-head{position:sticky;top:0;z-index:40;background:#0e1116;
  border-bottom:1px solid #2a3341;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
.m-hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-title{font-size:15px;letter-spacing:.5px;color:#e6edf3}
.m-pill{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid #33415c;background:#131f33;color:#9fd0ff;white-space:nowrap}
.m-pill.ok{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.14);color:#7ee2a8}
.m-pill.bad{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.14);color:#fca5a5}
.m-hsub{display:flex;gap:6px;align-items:baseline;margin-top:4px;font-size:12.5px;color:#c2d0e6;min-width:0}
.m-hsub #mRoom{font:600 13px/1.3 ui-monospace,Consolas,monospace;color:#93c5fd;white-space:nowrap}
.m-hsub #mStage{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9aa4b2}
.m-sep{color:#3b4657}
.m-hsub2{margin-top:2px;font-size:11px;color:#7b8ba6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Tab 页面 ---- */
.wzm .m-tab{display:none}
.wzm .m-tab.on{display:block;animation:mtabin .16s ease-out}
@keyframes mtabin{from{opacity:.4}to{opacity:1}}

/* ---- 底部 Tab 栏 ---- */
.m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);
  background:#111721;border-top:1px solid #2a3341;padding-bottom:env(safe-area-inset-bottom)}
.m-tabbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:58px;border:none;border-radius:0;background:transparent;color:#8b98a8;font-size:11.5px;padding:6px 2px}
.m-tabbtn i{font-style:normal;font-size:18px;line-height:1}
.m-tabbtn.on{color:#93c5fd;background:linear-gradient(180deg,rgba(59,130,246,.14),transparent)}
.m-tabbtn:active{background:#1a2331}

/* ---- 触摸友好：点击区 ≥44px、输入框 16px ---- */
.wzm button{min-height:44px;padding:10px 14px;font-size:15px;border-radius:11px}
.wzm button.btn-sm{min-height:40px;padding:6px 14px;font-size:13px}
.wzm .share-actions button{min-height:40px;padding:8px 7px;font-size:12px}
.wzm input:not([type=range]):not([type=checkbox]),.wzm select,.wzm textarea{font-size:16px;min-height:44px;padding:10px 12px;border-radius:11px}
.wzm input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:#2f7cf6}
.wzm label.m-chk{display:flex;align-items:center;gap:6px;min-height:44px}
.wzm details summary{min-height:40px;display:flex;align-items:center}
.wzm .h2act .btn-sm{height:auto;min-height:40px}

/* ---- 范围滑块（console.css 只给 .audiobar 写过，这里补一份）---- */
.wzm input[type=range]{-webkit-appearance:none;appearance:none;height:34px;padding:0;border:none;background:transparent}
.wzm input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#2c3a52}
.wzm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  margin-top:-8px;border:2px solid #0b1220;border-radius:50%;background:#2f7cf6}
.wzm input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:#2c3a52}
.wzm input[type=range]::-moz-range-thumb{width:22px;height:22px;border:2px solid #0b1220;border-radius:50%;background:#2f7cf6}

/* ---- 移动端适配的组件 ---- */
.wzm .stages{grid-template-columns:1fr;gap:8px}
.wzm .stage{font-size:14px;padding:10px;gap:8px}
.wzm .stage .n{flex:0 0 24px;font-size:12px}
.wzm .stage .t{white-space:normal;line-height:1.45;overflow:visible;text-overflow:clip}
.wzm .stage button{min-height:40px;font-size:13.5px;padding:8px 14px}
.wzm .players{gap:8px}
/* ＊S9.27①/S9.31②/S9.32：手机端玩家卡 —— 第一行「状态点 + 玩家名 + 心测✔ + 角色下拉（半宽，贴右）」，第二行按钮等宽平分 */
.wzm .pl{flex-wrap:wrap;align-items:center;font-size:14px;padding:10px 12px;row-gap:9px;column-gap:6px}
.wzm .pl .dot{order:0;flex:0 0 auto}
.wzm .pl .nm{order:1;flex:1 1 auto;min-width:0;font-weight:600}
    /* ＊S9.32：第一行顺序 = 玩家名 → 心测✔ → 角色下拉（半宽，贴右）；电脑端不受影响 */
.wzm .pl .psy{order:2;flex:0 0 auto}
.wzm .pl select[data-role]{order:3;flex:0 0 48% !important;width:auto !important;min-width:0 !important;max-width:none !important;min-height:44px;font-size:13px;padding:6px 8px}
.wzm .pl .rl{order:9;flex:0 1 auto;min-width:0;font-size:12.5px}
/* 第二行：按钮等宽平分 */
.wzm .pl .plbtns{order:4;display:flex;flex:1 1 100%;min-width:0;gap:8px}
.wzm .pl .plbtns button{flex:1 1 0;min-width:0;min-height:44px;font-size:13.5px !important;padding:8px 6px !important;margin-left:0 !important;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wzm .kv{grid-template-columns:auto 1fr;font-size:13.5px;align-items:center}
.wzm #log{height:240px;min-height:240px;max-height:240px;font-size:11.5px}
.wzm .qr img{width:230px;height:230px}
.wzm .qr{padding:10px}
.wzm .urlbox{font-size:12.5px}
.wzm .audiolist{max-height:60vh}
.wzm .videolist{flex-direction:column}
.wzm .vidbox{width:96vw;padding:10px}
.wzm .toast{bottom:calc(78px + env(safe-area-inset-bottom));font-size:13.5px;max-width:92vw;text-align:center}
.wzm .warnbox{font-size:12px}
.m-lbl{display:block;font-size:12px;color:#8b98a8;margin-bottom:6px}
.m-hr{border:none;border-top:1px solid #2a3341;margin:12px 0}
.m-flowtip{margin-bottom:8px}
.m-selfurl{font:12.5px/1.5 ui-monospace,Consolas,monospace;background:#0b0f14;border:1px solid #2a3341;border-radius:9px;
  padding:9px;word-break:break-all;color:#9fd0ff;cursor:copy}
.m-audio{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.m-audio button{flex:1 1 30%}
.m-audio-slider-row{display:flex;align-items:center;gap:12px;min-width:0;margin:4px 0}
.m-audio-slider-row input[type=range]{flex:1 1 auto;min-width:0;width:auto}
.m-audio-slider-row #audioTime{flex:0 0 auto;min-width:76px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.m-audio-volume-label{flex:0 0 auto;min-width:40px}
.m-pinrow{background:#101828;border:1px solid #22304a;border-radius:10px;padding:10px;margin-top:8px}
.m-event-details{margin-top:10px;border:1px solid #3b82f6;border-radius:11px;background:rgba(59,130,246,.09);overflow:hidden}
.m-event-details>summary{position:relative;padding:10px 12px!important;cursor:pointer;color:#bfdbfe;font-weight:700;list-style:none;gap:8px}
.m-event-details>summary::-webkit-details-marker{display:none}
.m-event-details>summary::after{content:"展开 ▾";margin-left:auto;padding:3px 8px;border:1px solid #52627a;border-radius:999px;color:#93c5fd;font-size:12px;white-space:nowrap}
.m-event-details[open]>summary::after{content:"收起 ▴"}
.m-event-details>#log{border-width:1px 0 0;border-radius:0}
.wzm .m-mobile-credential-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:10px;padding:10px;border:1px solid #2a3341;border-radius:10px;background:#101828}
.wzm .m-mobile-credential-row>span:first-child{grid-column:1/-1;font-weight:600;color:#c2d0e6}
.wzm .m-mobile-credential-row>input{width:100%;min-width:0}
.wzm .m-mobile-credential-row>span:last-child{grid-column:1/-1;line-height:1.6}
html[data-theme="light"] .m-event-details{background:#eff6ff;border-color:#60a5fa}
html[data-theme="light"] .m-event-details>summary{color:#1d4ed8}
html[data-theme="light"] .wzm .m-mobile-credential-row{background:#f8fafc;border-color:#cbd5e1}

/* ---- ④ 房间管理：手机端改成卡片（桌面端仍是 8 列表格，逐字节不变）---- */
.m-rlhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px;border-bottom:1px solid #2a3341;margin-bottom:8px}
.m-chkall{display:flex;align-items:center;gap:8px;font-size:13px;color:#c2d0e6;min-height:44px;cursor:pointer}
.m-roomcard{background:#16202f;border:1px solid #2a3341;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.m-roomcard.cur{background:#16281c;border-color:#2f6b45}
.m-roomcard.sel{background:#1b2b45;border-color:#2f7cf6;box-shadow:inset 3px 0 0 #2f7cf6}
.m-rtop{display:flex;align-items:center;gap:8px}
.m-rchk{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px 0 -6px -6px;flex:0 0 auto;cursor:pointer}
.m-rcode{font:700 16px/1.2 ui-monospace,Consolas,monospace;color:#e6edf3}
.m-rcur{font-size:11px;color:#7dd3a0}
.m-rpl{margin-left:auto;font-size:13px;color:#9fd0ff;white-space:nowrap}
.m-rline{display:grid;grid-template-columns:56px 1fr;gap:6px;font-size:13px;color:#cfdcef;margin-top:6px}
.m-rline i{font-style:normal;color:#7b8ba6;font-size:12px}
.m-rline span{word-break:break-all}
.m-ract{display:flex;gap:8px;margin-top:10px}
.m-ract button{flex:1 1 0}

/* ---- 线索库：手机上纵向堆叠 ---- */
.wzm .libwrap{grid-template-columns:1fr;gap:8px}
.wzm .libstages{max-height:190px}
.wzm .libmain{min-height:220px}
.wzm .libbody{max-height:none;padding:10px}
.wzm .libroles{padding:6px 8px}
.wzm .libblock .txt,.wzm .libclue .txt{font-size:13.5px;line-height:1.75}

/* ---- 口令墙 ---- */
.pin-gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 80% at 50% 0%,#16213a 0%,#0b0f16 60%);padding:20px}
.pin-card{width:100%;max-width:360px;background:#141b26;border:1px solid #2a3341;border-radius:18px;padding:22px 18px;text-align:center}
.pin-card h1{font-size:17px;margin:12px 0 4px}
.wzm .pinnowv{font-size:15px;letter-spacing:1px;background:#0b1a33;color:#7dd3fc;padding:2px 8px;border-radius:5px;user-select:all;border:1px solid #1e3a8a}
html[data-theme="light"] .wzm .pinnowv{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}
.pin-sub{font-size:12.5px;color:#8b98a8;margin-bottom:14px}
.wzm .pin-card input.pin-input{width:100%;text-align:left;letter-spacing:normal;font:600 20px/1.2 ui-monospace,Consolas,monospace;
  min-height:60px;background:#0b0f14;border:1px solid #2a3341;border-radius:14px;color:#e6edf3}
.pin-btn{width:100%;margin-top:12px;font-size:16px;min-height:52px}
.pin-tip{min-height:18px;font-size:12.5px;color:#fca5a5;margin-top:10px}
.pin-foot{margin-top:16px;font-size:11.5px;color:#6b7686;line-height:1.7}
.m-bootlogo{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(140deg,#2f7cf6,#22c55e);color:#04210f;font-weight:800;font-size:18px}

/* ---- 启动遮罩 ---- */
.m-boot{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;background:#0e1116}
.m-bootbox{text-align:center}
.m-boottxt{margin-top:12px;font-size:13px;color:#8b98a8}

@media(min-width:620px){
  .wzm .m-body{max-width:720px;margin:0 auto}
  .m-tabs{max-width:720px;margin:0 auto;border-left:1px solid #2a3341;border-right:1px solid #2a3341;border-radius:14px 14px 0 0;overflow:hidden}
}
/* ================= ★S9.16 ================= */

/* 房间 Tab 的两个子页（当前房间 / 房间列表） */
.m-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.m-segbtn{min-height:44px;border:1px solid #2a3341;background:#131b27;color:#9aa4b2;border-radius:11px;font-size:14.5px}
.m-segbtn.on{background:#1d3050;border-color:#2f7cf6;color:#e8f1ff}
/* ★S9.17 房间 Tab 的子选项 = 折叠式（点标题展开 / 选完自动收起） */
.m-fold{margin:0 0 10px}
.m-foldhead{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#131b27;border:1px solid #2a3341;color:#e8f1ff;border-radius:12px;font-size:15px;font-weight:600;padding:0 14px}
.m-foldhead .ar{font-style:normal;font-size:14px;color:#8fb3e6;transition:.2s;transform:rotate(180deg);line-height:1}
.m-fold.open .m-foldhead{border-color:#2f7cf6;background:#17233a}
.m-fold.open .m-foldhead .ar{transform:rotate(0deg)}
.m-foldbody{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.m-fold.open .m-foldbody{display:grid}
.wzm .m-sub{display:none}
.wzm .m-sub.on{display:block}

/* ★S9.18③ 房间 Tab 的子选项：底部栏「向上拓展一行」 */
.m-subtabs{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:59;
  display:none;grid-template-columns:1fr 1fr;background:#111721;border-top:1px solid #2a3341}
.m-subtabs.on{display:grid}
.m-subbtn{min-height:48px;border:none;border-radius:0;background:transparent;color:#8b98a8;font-size:14.5px;
  padding:8px 4px;border-bottom:2px solid transparent}
.m-subbtn.on{color:#93c5fd;background:rgba(59,130,246,.12);border-bottom-color:#2f7cf6}
.m-subbtn:active{background:#1a2331}
.wzm.subon .m-body{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
@media(min-width:620px){
  .m-subtabs{max-width:720px;margin:0 auto;border-left:1px solid #2a3341;border-right:1px solid #2a3341}
}

/* 玩家入口改为两行按钮，二维码与链接在弹窗中显示。 */
.wzm #qrBox{margin-top:7px}
.wzm .qr-entry-list{gap:7px;margin-bottom:10px}
.wzm .qr-entry-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:54px;padding:6px 9px}
.wzm .qr-entry-copy{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:12px;min-width:0;white-space:nowrap}
.wzm .qr-entry-copy>b{flex:none;font-size:13px;white-space:nowrap}
.wzm .qr-entry-copy .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wzm .qr-open-btn{min-height:40px;padding:8px 11px;font-size:13px}
.wzm .m-room-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto!important;overflow:visible!important}
.wzm .m-room-actions .m-logout-btn{border-color:#52627a;color:#dbe7f6;background:rgba(71,85,105,.18)}
@media(max-width:430px){
  .wzm .qr-entry-row{gap:7px;padding:6px 7px}
  .wzm .qr-entry-copy{gap:7px}
  .wzm .qr-entry-copy>b{font-size:11.5px}
  .wzm .qr-entry-copy .hint{font-size:10.5px}
  .wzm .qr-open-btn{padding:7px 8px;font-size:12px}
  .wzm .m-room-actions{gap:5px}
  .wzm .m-room-actions .btn-sm{padding:6px 8px;font-size:12px}
}

/* ★S9.18⑥ 顶栏的主题切换按钮（手机端） */
.m-hrow-r{display:flex;align-items:center;gap:8px}
.m-themebtn{min-height:32px;height:32px;padding:0 10px;font-size:14px;line-height:1;
  background:#131f33;border:1px solid #33415c;color:#e6edf3;border-radius:999px}

/* ⑧ 线索库搜索按钮（手机端独占一行，好点） */
.wzm #btnLibSearch{min-height:46px;font-size:15.5px}

/* 第 10 阶段魂纹卡：手机线索库中保持紧凑横排。 */
.wzm .lib-mirror-figure{gap:10px;padding:9px}
.wzm .lib-mirror-card{width:92px;height:92px;flex-basis:92px}