:root{
  --bg0:#05090d; --bg1:#0a1218; --bg2:#101c24;
  --ink:#e6eef2; --ink2:#a8bcc7; --ink3:#6b8290;
  --line:rgba(160,200,220,.16); --line2:rgba(160,200,220,.30);
  --amber:#d8a94e; --amber-d:#8a6420;
  --steel:#4a7d96; --danger:#c0392b; --ok:#2f9e6f;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%; overflow-x:clip}
body{
  margin:0;font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif;
  background:var(--bg0); color:var(--ink);
  font-size:15px; line-height:1.72; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100%; position:relative}
svg{width:1.15em;height:1.15em;vertical-align:-.2em}

/* ---------- 背景层 ---------- */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(58,110,140,.20), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(20,40,55,.35), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #060c11);
}
.bg::after{
  content:''; position:absolute; inset:0;
  background-image:url('assets/场景01_观测舱_案发地.png');
  background-size:cover; background-position:center 22%;
  opacity:.10; filter:grayscale(.5) contrast(1.1);
  mix-blend-mode:luminosity;
}
.reveal-bg::after{opacity:.05}

/* ---------- 通用容器 ---------- */
.sheet{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto; padding:22px 18px 90px;
}
.home{
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:40px 24px; text-align:center;
}
h1,h2,h3{margin:0 0 12px; font-weight:500; line-height:1.35}
h2{font-size:19px}
h3{font-size:15px; color:var(--ink2); margin-top:26px; margin-bottom:10px}
h3.sec{margin-top:30px}
p{margin:0 0 13px}
b{font-weight:600; color:#fff}
small{font-size:12px; color:var(--ink3)}

/* ---------- 首页 ---------- */
.brand-k{
  font-size:12px; letter-spacing:.32em; color:var(--amber);
  margin-bottom:20px; text-transform:none;
}
.brand-t{
  font-size:clamp(42px,13vw,68px); font-weight:500; letter-spacing:.1em;
  color:#fff; text-shadow:0 0 40px rgba(120,190,220,.20);
}
.brand-s{font-size:13px; color:var(--ink2); letter-spacing:.18em; margin-top:14px}
.home-btns{margin-top:52px; display:flex; flex-direction:column; gap:12px; width:min(300px,80vw)}
.home-foot{margin-top:52px; font-size:12px; color:var(--ink3); line-height:2}
.home-note{margin-top:8px; opacity:.7}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--r); border:1px solid var(--line2);
  background:rgba(255,255,255,.045); color:var(--ink);
  font-family:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition:.16s; min-height:48px;
}
.btn:hover:not(:disabled){background:rgba(255,255,255,.09); border-color:var(--steel)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.32; cursor:not-allowed}
.btn-main{
  background:linear-gradient(180deg, rgba(216,169,78,.24), rgba(216,169,78,.10));
  border-color:rgba(216,169,78,.52); color:#f2dfb4;
}
.btn-main:hover:not(:disabled){background:linear-gradient(180deg, rgba(216,169,78,.34), rgba(216,169,78,.16))}
.btn-ghost{background:transparent}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.row .btn{flex:1; min-width:120px}

/* ---------- Tab ---------- */
.tabs{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.tab{
  padding:7px 13px; border-radius:99px; border:1px solid transparent;
  background:rgba(255,255,255,.05); color:var(--ink3);
  font-size:13px; font-family:inherit; cursor:pointer; transition:.16s;
}
.tab.on{background:rgba(216,169,78,.16); border-color:rgba(216,169,78,.4); color:var(--amber)}
.o2{margin-left:auto; font-size:12px; color:var(--ink3)}
.o2 b{color:var(--amber); font-size:15px}

.tip{
  font-size:13px; color:var(--ink3); line-height:1.7;
  background:rgba(255,255,255,.035); border-left:2px solid var(--line2);
  padding:9px 12px; border-radius:0 8px 8px 0; margin-bottom:16px;
}
.tip.c{text-align:center; margin-top:10px}
.empty{
  font-size:13px; color:var(--ink3); text-align:center;
  padding:22px 12px; border:1px dashed var(--line); border-radius:10px;
}

/* ---------- 模板选择 ---------- */
.tpl{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.tpl-c{
  text-align:left; padding:18px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  color:var(--ink); font-family:inherit; cursor:pointer; transition:.16s;
}
.tpl-c:hover{border-color:var(--steel); background:rgba(255,255,255,.06)}
.tpl-c.on{border-color:rgba(216,169,78,.55); background:rgba(216,169,78,.10)}
.tpl-n{font-size:12px; color:var(--ink3); letter-spacing:.16em}
.tpl-c.on .tpl-n{color:var(--amber)}
.tpl-k{font-size:17px; margin:7px 0 6px; color:#fff}
.tpl-d{font-size:13px; color:var(--ink2); line-height:1.6}

/* ---------- 身份指派 ---------- */
.seatgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px}
.seat{
  position:relative; border-radius:12px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--bg2); transition:.16s;
}
.seat:hover{border-color:var(--steel)}
.seat.on{border-color:rgba(216,169,78,.55)}
.seat img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; filter:grayscale(.35)}
.seat-m{position:absolute; left:0; right:0; bottom:0; padding:10px; background:linear-gradient(180deg,transparent,rgba(5,9,13,.95))}
.seat-n{font-size:15px; color:#fff}
.seat-t{font-size:11px; color:var(--ink3)}
.seat-h{font-size:12px; color:var(--amber); margin-top:3px; min-height:18px}
.who{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.who-l{font-size:13px; color:var(--ink3); white-space:nowrap}
.who-i,.inp{
  flex:1 1 0; min-width:0; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line2); background:rgba(0,0,0,.28);
  color:var(--ink); font-family:inherit; font-size:15px;
}
.who-i:focus,.inp:focus{outline:none; border-color:var(--steel)}

/* ---------- 角色阅读 ---------- */
.rd-head{display:flex; gap:16px; align-items:flex-end; margin-bottom:8px}
.rd-face{width:104px; height:150px; object-fit:cover; border-radius:10px; border:1px solid var(--line2); flex-shrink:0}
.rd-k{font-size:11px; color:var(--amber); letter-spacing:.2em}
.rd-id h1{font-size:30px; margin:5px 0 3px; color:#fff}
.rd-t{font-size:14px; color:var(--ink2)}
.rd-b{font-size:12px; color:var(--ink3); margin-top:8px; line-height:1.6}
.rd-body p{font-size:14.5px; color:var(--ink); opacity:.9}
.rel{display:flex; flex-direction:column; gap:9px}
.rel-i{
  padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px solid var(--line); font-size:13.5px; color:var(--ink2); line-height:1.7;
}
.rel-i b{color:var(--amber); margin-right:9px; font-weight:500}

/* ---------- 线索卡 ---------- */
.clues{display:flex; flex-direction:column; gap:13px}
.cd{
  border:1px solid var(--line2); border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,28,36,.9), rgba(12,18,24,.9));
}
.cd.used{opacity:.55}
.cd.shown{border-color:rgba(216,169,78,.45)}
.cd-h{
  padding:11px 14px; font-size:13.5px; color:var(--amber);
  background:rgba(216,169,78,.09); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.cd pre{
  margin:0; padding:14px; font-family:"SF Mono",Consolas,"Courier New",monospace;
  font-size:11.5px; line-height:1.65; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.cd-fill{
  margin:0 14px 10px; padding:7px 11px; border-radius:7px;
  background:rgba(192,57,43,.14); border:1px solid rgba(192,57,43,.5);
  color:#e8a99f; font-size:14px; letter-spacing:.16em; font-weight:500;
}
.cd-f{padding:0 14px 12px; display:flex; justify-content:flex-end}
.cd-b{
  padding:8px 15px; border-radius:8px; border:1px solid var(--line2);
  background:rgba(216,169,78,.10); color:var(--amber);
  font-family:inherit; font-size:13px; cursor:pointer; transition:.16s;
}
.cd-b:hover:not(:disabled){background:rgba(216,169,78,.2)}
.cd-b:disabled{opacity:.4; cursor:not-allowed}
.cd-s{font-size:12px; color:var(--ok)}

/* ---------- 幕 ---------- */
.act-b{
  padding:13px 15px; border-radius:10px; margin-bottom:18px;
  background:rgba(120,190,220,.07); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink2); line-height:1.7;
}

/* ---------- 时间轴 ---------- */
.tm{
  padding:15px 16px; border-radius:12px; margin-bottom:18px;
  background:rgba(0,0,0,.26); border:1px solid var(--line);
}
.tm-h{font-size:12px; color:var(--ink3); letter-spacing:.16em; margin-bottom:11px}
.tm-i{display:flex; gap:12px; padding:4px 0; font-size:13px; line-height:1.55}
.tm-t{color:var(--steel); flex-shrink:0; width:82px; font-family:monospace; font-size:12.5px}
.tm-e{color:var(--ink2)}
.tm-i.k .tm-t{color:var(--amber)}
.tm-i.k .tm-e{color:var(--ink)}

/* ---------- 公开区 ---------- */
.pub{
  padding:14px 16px; border-radius:12px; margin-bottom:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.pub-h{font-size:12.5px; color:var(--ink3); margin-bottom:11px; display:flex; align-items:center; gap:7px}
.pub-g{display:flex; flex-wrap:wrap; gap:7px}
.pc{
  padding:7px 12px; border-radius:8px; border:1px solid rgba(216,169,78,.35);
  background:rgba(216,169,78,.09); color:var(--amber);
  font-size:12.5px; font-family:inherit; cursor:pointer; text-align:left;
}
.pc:hover{background:rgba(216,169,78,.2)}

/* ---------- 我的手牌 ---------- */
.myc{
  padding:14px 16px; border-radius:12px; margin-bottom:8px;
  background:rgba(216,169,78,.05); border:1px solid rgba(216,169,78,.25);
}
.myc-h{font-size:12.5px; color:var(--ink3); margin-bottom:10px}
.myc-g{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.mc{
  min-width:52px; padding:12px 10px; border-radius:9px;
  border:1px solid var(--line2); background:rgba(0,0,0,.3);
  color:var(--ink); font-family:monospace; font-size:14px; font-weight:500;
  cursor:pointer; transition:.16s;
}
.mc:hover{border-color:var(--amber)}
.mc.on{background:rgba(216,169,78,.18); border-color:var(--amber); color:var(--amber)}
.mc:disabled{opacity:.35}

/* ---------- 表单 ---------- */
.fld{margin-bottom:18px}
.fld label{display:block; font-size:13px; color:var(--ink2); margin-bottom:8px}
.fld select{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line2); background:rgba(0,0,0,.3);
  color:var(--ink); font-family:inherit; font-size:15px;
}
.fld select:focus{outline:none; border-color:var(--steel)}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pk{
  padding:10px 13px; border-radius:9px; border:1px solid var(--line2);
  background:rgba(0,0,0,.28); color:var(--ink2);
  font-family:inherit; font-size:12.5px; cursor:pointer; transition:.16s; text-align:left;
}
.pk:hover{border-color:var(--steel)}
.pk.on{background:rgba(216,169,78,.18); border-color:var(--amber); color:var(--amber)}
.prop-done{
  padding:18px; border-radius:12px; background:rgba(0,0,0,.28);
  border:1px solid var(--line); font-size:14px; line-height:2.1;
}

/* ---------- 投票 ---------- */
.vlist{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.vc{
  display:flex; align-items:center; gap:13px; padding:11px 14px;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.035);
  color:var(--ink); font-family:inherit; font-size:15px; cursor:pointer; transition:.16s;
}
.vc:hover{border-color:var(--steel)}
.vc.on{border-color:rgba(216,169,78,.6); background:rgba(216,169,78,.12)}
.vc img{width:46px; height:60px; object-fit:cover; border-radius:7px; flex-shrink:0}
.vc span{flex:1; text-align:left}
.vc-c{font-size:12.5px; color:var(--ink3); flex:none!important; text-align:right!important}
.votes-done{text-align:center; font-size:13px; color:var(--ink3); margin-bottom:16px}

/* ---------- 真相 ---------- */
.rv-top{text-align:center; padding:26px 18px; margin-bottom:8px;
  border-radius:14px; background:rgba(192,57,43,.09); border:1px solid rgba(192,57,43,.35)}
.rv-ico{color:var(--danger); display:flex; justify-content:center; margin-bottom:10px}
.rv-ico svg{width:32px; height:32px}
.rv-l{font-size:12px; color:var(--ink3); letter-spacing:.28em}
.rv-n{font-size:42px; color:#fff; margin:8px 0 6px; font-weight:500}
.rv-t{font-size:13.5px; color:var(--ink2)}
.chain{
  padding:14px 16px; border-radius:12px; margin-bottom:11px;
  background:rgba(0,0,0,.26); border:1px solid var(--line);
}
.chain-h{font-size:14px; color:var(--amber); margin-bottom:9px}
.chain-i{font-size:13px; color:var(--ink2); padding:4px 0 4px 12px; border-left:2px solid var(--line2)}
.chain-c{font-size:13.5px; color:#fff; margin-top:9px; padding-top:9px; border-top:1px solid var(--line)}
.exc,.ms{
  padding:12px 15px; border-radius:10px; margin-bottom:9px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink2); line-height:1.75;
}
.exc b{color:var(--steel); margin-right:9px}
.ms-f{color:var(--ink3); font-size:12.5px}
.rv-notes{padding-left:20px; margin:0}
.rv-notes li{font-size:13.5px; color:var(--ink2); margin-bottom:11px; line-height:1.75}
.sc{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:22px}
.sc th,.sc td{border:1px solid var(--line); padding:9px 10px; text-align:left}
.sc th{color:var(--ink3); font-weight:400; font-size:12px}
.sc .win td{color:var(--ok)}
.sc .lose td{color:var(--ink3)}

/* ---------- 日志 ---------- */
.log{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  max-height:22vh; overflow-y:auto; padding:11px 16px;
  background:rgba(5,9,13,.96); border-top:1px solid var(--line);
  font-size:12px; color:var(--ink2); backdrop-filter:blur(8px);
}
.log-i{padding:2px 0}

/* ---------- 防偷看覆盖层（核心） ---------- */
.pass{
  position:fixed; inset:0; z-index:99;
  display:flex; align-items:center; justify-content:center;
  padding:26px; animation:fade .2s;
}
.pass-bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#071018,#04080c);
}
.pass-bg::after{
  content:''; position:absolute; inset:0;
  background-image:url('assets/场景01_观测舱_案发地.png');
  background-size:cover; background-position:center;
  opacity:.16; filter:blur(16px) grayscale(.6);
}
.pass-in{position:relative; text-align:center; max-width:340px}
.pass-ico{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(216,169,78,.10); border:1px solid rgba(216,169,78,.34); color:var(--amber);
}
.pass-ico svg{width:28px; height:28px}
.pass-in h2{font-size:21px; color:#fff; margin-bottom:10px}
.pass-in p{font-size:14px; color:var(--ink2); margin-bottom:26px}
.pass-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:16px 30px; border-radius:99px;
  border:1px solid rgba(216,169,78,.5); background:rgba(216,169,78,.14);
  color:#f2dfb4; font-family:inherit; font-size:15px; font-weight:500;
  cursor:pointer; user-select:none; touch-action:none; transition:.12s;
}
.pass-btn.holding{background:rgba(216,169,78,.34); transform:scale(.97)}
.pass-in small{display:block; margin-top:18px; font-size:12px; color:var(--ink3)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- 响应式 ---------- */
@media (max-width:400px){
  body{font-size:14.5px}
  .sheet{padding:18px 14px 84px}
  .seatgrid{grid-template-columns:1fr 1fr; gap:8px}
  .rd-head{gap:12px}
  .rd-face{width:82px; height:118px}
  .rd-id h1{font-size:25px}
  .tm-t{width:74px; font-size:12px}
  .cd pre{font-size:11px}
  .btn{padding:13px 16px; font-size:14.5px}
}
@media (min-width:900px){
  .sheet{max-width:700px; padding-top:34px}
  .seatgrid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ===================== 联机版新增 ===================== */

/* 连接状态条 */
#net{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:7px 14px; text-align:center;
  background:rgba(192,57,43,.92); color:#fff; font-size:12.5px;
  transform:translateY(-100%); transition:.2s;
}
#net.show{transform:translateY(0)}

/* toast */
#toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(12px);
  z-index:300; max-width:82vw;
  padding:11px 18px; border-radius:99px;
  background:rgba(10,18,24,.94); border:1px solid var(--line2);
  color:var(--ink); font-size:13.5px; text-align:center;
  opacity:0; pointer-events:none; transition:.22s;
  backdrop-filter:blur(8px);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* 状态条 */
.statusbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:14px; padding:9px 13px; border-radius:10px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink2);
}
.st-l{display:flex; flex-direction:column; gap:2px; min-width:0}
.st-code{
  color:var(--amber); cursor:pointer; font-weight:500; letter-spacing:.08em;
}
.st-code:active{opacity:.7}
.st-me{font-size:11.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-r{flex-shrink:0; color:var(--ink3)}

/* 首页表单 */
.home-form{margin-top:40px; width:min(320px,86vw); display:flex; flex-direction:column; gap:14px}
.home-form .who{margin:0}
.joinrow{display:flex; gap:9px}
.joinrow .code-i{
  text-align:center; font-size:19px; letter-spacing:.42em; font-family:monospace;
}
.joinrow .btn{min-width:96px}

/* 等待大厅 */
.lobby{
  padding:16px; border-radius:12px; margin-bottom:18px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.lobby-h{font-size:12px; color:var(--ink3); letter-spacing:.14em; margin-bottom:10px}
.lobby-code{
  font-size:46px; font-weight:500; color:var(--amber); text-align:center;
  letter-spacing:.34em; font-family:monospace; margin:4px 0 14px;
  text-shadow:0 0 26px rgba(216,169,78,.24); cursor:pointer; user-select:none;
}
.lobby-code:active{opacity:.75}
.players{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.pl{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:9px;
  background:rgba(0,0,0,.26); border:1px solid var(--line);
  font-size:13px;
}
.pl b{color:var(--ink); font-weight:500; flex-shrink:0}
.pl span{color:var(--ink2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pl i{font-style:normal; font-size:11px; color:var(--ok); flex-shrink:0}
.pl.off i{color:var(--ink3)}
.pl-dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex-shrink:0}
.pl.off .pl-dot{background:var(--ink3)}
.emptypl{opacity:.5; border-style:dashed}
.emptypl span{color:var(--ink3)}

/* 线索卡使用计数 */
.cd-usedn{font-size:11px; color:var(--ink3); font-weight:400}

/* 弹窗 */
.modal{position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:22px}
.modal-bg{position:absolute; inset:0; background:rgba(3,6,9,.82); backdrop-filter:blur(6px)}
.modal-in{
  position:relative; width:min(480px,94vw); max-height:82vh; overflow-y:auto;
  padding:20px; border-radius:14px;
  background:linear-gradient(180deg,#0d1620,#0a1118);
  border:1px solid var(--line2);
}
.modal-h{font-size:15px; color:var(--amber); margin-bottom:12px}
.modal-b pre{
  margin:0 0 16px; padding:13px; border-radius:9px;
  background:rgba(0,0,0,.32); border:1px solid var(--line);
  font-family:"SF Mono",Consolas,monospace; font-size:11.5px; line-height:1.65;
  color:var(--ink); white-space:pre-wrap; word-break:break-word;
}
.modal .btn{width:100%}

/* 盲盒校验卡 */
.verify{
  padding:15px 17px; border-radius:12px; margin:14px 0 6px;
  border:1px solid var(--line2); background:rgba(0,0,0,.26); font-size:13px;
}
.verify.vok{border-color:rgba(47,158,111,.55)}
.verify.vbad{border-color:rgba(192,57,43,.6)}
.verify-h{font-size:14px; color:var(--ink); margin-bottom:9px}
.verify.vok .verify-h{color:var(--ok)}
.verify.vbad .verify-h{color:var(--danger)}
.verify-i{padding:3px 0; color:var(--ink2)}
.verify-i code{
  font-family:monospace; font-size:12px; color:var(--amber);
  background:rgba(216,169,78,.09); padding:2px 7px; border-radius:5px;
  word-break:break-all;
}
.verify-s{margin-top:9px; font-size:11.5px; color:var(--ink3); line-height:1.6}

/* 修复：状态圆点不被 flex:1 拉伸 */
.pl span.pl-dot{flex:0 0 7px;width:7px;height:7px}

/* ===================== PWA / 全屏 ===================== */
/* dvh：地址栏收展时高度不再跳动 */
.home{min-height:100vh; min-height:100dvh}
#app > .sheet{min-height:100vh; min-height:100dvh}
.fs-btn{
  margin-bottom:18px; padding:9px 20px; font-size:13px;
  border-color:rgba(216,169,78,.4); color:var(--amber);
}
/* 以独立窗口/全屏启动时适配刘海与手势条 */
@media (display-mode:fullscreen),(display-mode:standalone){
  .home{padding:calc(40px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom))}
  .sheet{padding-top:calc(22px + env(safe-area-inset-top))}
  #net{top:env(safe-area-inset-top)}
}

/* 选座模式 */
.pl.me{border-color:rgba(216,169,78,.55)}
.pl.seatfree{cursor:pointer}
.pl.seatfree:active{background:rgba(216,169,78,.08)}

/* ===================== 选角大厅 ===================== */
.rcgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px}
.rc{
  border:1px solid var(--line2); border-radius:12px;
  background:rgba(0,0,0,.22); padding:13px 12px 11px; min-width:0;
}
.rc-h{font-size:16px; font-weight:700; color:var(--ink); display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.rc-t{font-size:11px; font-weight:400; color:var(--ink2)}
.rc-st{margin-top:7px; font-size:12px; color:var(--ink2); display:flex; align-items:center; gap:6px}
.rc.free{border-style:dashed; cursor:pointer; border-color:rgba(216,169,78,.45)}
.rc.free .rc-st{color:var(--amber)}
.rc.free:active{background:rgba(216,169,78,.1)}
.rc.taken{border-style:solid}
.rc.me{border-color:rgba(216,169,78,.8); background:rgba(216,169,78,.07)}
.rc.me .rc-h{color:var(--amber)}
.rc.off{opacity:.55}
.rc.lock{cursor:default; opacity:.7}
.wl{
  margin:10px 0 2px; padding:9px 12px; border-radius:10px;
  background:rgba(0,0,0,.18); font-size:12px; color:var(--ink2);
  display:flex; flex-wrap:wrap; gap:6px 14px;
}
.wl-i{display:inline-flex; align-items:center; gap:6px}
.wl-i.off{opacity:.5}

/* ===================== 读秒浮层 ===================== */
.cdlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(4,9,15,.86);
  display:flex; align-items:center; justify-content:center;
}
.cdlay-in{text-align:center}
.cdlay-n{
  width:96px; height:96px; margin:0 auto;
  border:3px solid var(--amber); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:700; color:#e8c477;
  font-variant-numeric:tabular-nums;
}
.cdlay-t{margin-top:16px; font-size:16px; font-weight:700; color:var(--amber)}
.cdlay-s{margin-top:8px; font-size:12px; color:var(--ink2)}