/* 追加：手游形态手机端布局 + 新组件（麦序条/发言人卡/夜间选人弹层/日志抽屉/标记） */

/* ---------- 默认隐藏：只在手机端出现的组件 ---------- */
#maixu{display:none}
#speaker{display:none}
.sheet,#drawer{display:none}

/* 麦序条 */
.mq{align-items:center;gap:6px;padding:6px 12px;font-size:11px;color:var(--muted);
  overflow-x:auto;scrollbar-width:none}
.mq::-webkit-scrollbar{display:none}
.mq .lb{flex:none;color:#6b7799;letter-spacing:1px}
.mq .who{flex:none;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);white-space:nowrap;transition:.25s}
.mq .who.now{background:rgba(255,212,121,.2);border-color:rgba(255,212,121,.65);color:var(--gold);
  font-weight:700;box-shadow:0 0 12px rgba(255,212,121,.35)}
.mq .who.done{opacity:.35;text-decoration:line-through}

/* 发言人卡 */
#speaker .sp{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,212,121,.15),rgba(255,212,121,.04));
  border:1px solid rgba(255,212,121,.42)}
#speaker .sp.idle{background:rgba(255,255,255,.045);border-color:var(--line)}
#speaker .sp .big{position:relative;flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:21px;
  background:linear-gradient(160deg,var(--ac,#4a5aa8),#151a34);
  box-shadow:0 0 0 2px rgba(255,255,255,.1)}
#speaker .sp.idle .big{opacity:.6}
#speaker .sp .who{font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#speaker .sp.idle .who{color:var(--muted)}
#speaker .sp .tx{font-size:12px;color:#cfd8f5;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#speaker .sp .bd{flex:1;min-width:0}
#speaker .sp .rw{flex:none;width:38px;height:38px;position:relative;display:grid;place-items:center}
#speaker .sp .rw span{font-size:13px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
#speaker .sp .rw.urgent span{color:var(--red)}
#speaker .wave{display:inline-flex;gap:2px;align-items:flex-end;height:13px;vertical-align:middle;margin-left:5px}
#speaker .wave i{width:2.5px;background:var(--gold);border-radius:2px;animation:wv .9s ease-in-out infinite}
#speaker .wave i:nth-child(2){animation-delay:.15s}
#speaker .wave i:nth-child(3){animation-delay:.3s}
#speaker .wave i:nth-child(4){animation-delay:.45s}
@keyframes wv{0%,100%{height:3px}50%{height:13px}}

/* 夜间选人弹层 */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:linear-gradient(0deg,rgba(8,11,24,.995),rgba(16,21,42,.98));
  border-top:1px solid rgba(103,213,255,.4);border-radius:20px 20px 0 0;
  padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 44px rgba(0,0,0,.7);transform:translateY(0);
  transition:transform .26s cubic-bezier(.2,1,.3,1)}
.sheet.hide{transform:translateY(105%);display:block}
.sheet h4{margin:0 0 4px;font-size:14.5px;color:var(--blue)}
.sheet p{margin:0 0 12px;font-size:11.5px;color:var(--muted);line-height:1.6}
.sheet .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sheet .cell{cursor:pointer;padding:9px 4px;border-radius:12px;text-align:center;
  background:#333355;border:1px solid rgba(150,170,255,.2);transition:.15s}
.sheet .cell:active{transform:scale(.95)}
.sheet .cell .em{font-size:22px;line-height:1.1}
.sheet .cell .t{font-size:10.5px;margin-top:2px;color:#cfd8f5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sheet .cell.sel{background:linear-gradient(135deg,#ff5c7a,#c22b4c);border-color:transparent}
.sheet .cell.sel2{background:linear-gradient(135deg,#3aa0ff,#1e63c8);border-color:transparent}
.sheet .cell.sel3{background:linear-gradient(135deg,#b06cff,#7a2fd0);border-color:transparent}
.sheet .cell.dead{opacity:.35;pointer-events:none}
.sheet .row2{display:flex;gap:8px;margin-top:12px}
.sheet .row2 .btn{flex:1;justify-content:center;padding:11px}

/* 日志抽屉 */
.drawer{position:fixed;inset:0;z-index:56;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,13,28,.99),rgba(8,10,22,.99))}
.drawer.hide{display:none}
.drawer .dhead{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--gold)}
#drawer-log{flex:1;overflow-y:auto;padding:12px 14px;font-size:13px;line-height:1.7}
#drawer-log .line{margin-bottom:6px}
#drawer-log .speech{display:flex;gap:8px;padding:7px 10px;border-radius:4px 11px 11px 4px;
  border:1px solid var(--line);border-left:3px solid var(--pc,var(--blue));
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))}
#drawer-log .speech .mini{flex:none;width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;font-size:13px;background:linear-gradient(160deg,var(--pc,#4a5aa8),#141830)}
#drawer-log .speech .bd{flex:1;min-width:0}
#drawer-log .speech .who{font-weight:700;font-size:12.5px;color:var(--pc,var(--blue))}
#drawer-log .speech .tx{color:#dde4ff}
#drawer-log .sep{margin:12px 0 9px;text-align:center;font-weight:700;color:var(--gold);
  letter-spacing:2px;font-size:12.5px;padding:5px 0;border-radius:8px;
  border-top:1px solid rgba(255,212,121,.2);border-bottom:1px solid rgba(255,212,121,.2);
  background:linear-gradient(90deg,transparent,rgba(255,212,121,.12),transparent)}
#drawer-log .sys{color:var(--muted);font-size:12.5px}
#drawer-log .bad{color:var(--red);font-weight:600}
#drawer-log .good{color:var(--green);font-weight:600}
#drawer-log .warn{color:var(--gold)}
#drawer-log .hint{color:var(--purple);font-size:12.5px}

/* 手动标记 */
.seat .mark{position:absolute;bottom:-7px;right:-6px;font-size:12px;z-index:7;
  filter:drop-shadow(0 2px 5px #000)}
.marksheet .grid{grid-template-columns:repeat(4,1fr)}

/* ==================== 手机端：手游形态 ==================== */
@media (max-width: 880px){
  html,body{height:100%;overflow:hidden}
  #app{height:100vh;height:100dvh;padding:0;gap:0}
  #hud{padding:6px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:0;border-left:0;border-right:0}
  #hud::-webkit-scrollbar{display:none}
  #hud .title{display:none}
  #hud .chip{font-size:11px;padding:4px 8px;flex:none}
  #hud .abil{font-size:11px;padding:3px 8px;flex:none}
  #hud .btn{font-size:11.5px;padding:6px 10px;flex:none}

  /* 主区：上=圆环舞台，下=操作区 */
  #main{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;gap:0}
  /* 复位 app.css 旧移动端规则留下的绝对定位 */
  #board{flex:1;position:relative;inset:auto;height:auto;min-height:0;border:0;border-radius:0;
    background:radial-gradient(circle at 50% 46%,rgba(96,116,230,.18),rgba(8,11,22,.42) 72%)}
  #board.night{background:radial-gradient(circle at 50% 46%,rgba(60,40,140,.42),rgba(8,11,22,.5) 72%)}

  /* 麦序条贴在舞台底部 */
  #maixu{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:6;
    background:linear-gradient(0deg,rgba(10,13,26,.9),transparent)}

  /* 底部操作区 */
  #side{flex:none;position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;height:auto;display:flex;flex-direction:column;gap:0;
    background:linear-gradient(0deg,rgba(10,13,26,.995),rgba(14,18,36,.94));
    border-top:1px solid var(--line);
    padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  /* 聊天只露两行，点开是完整记录 */
  #log{height:38px;flex:none;overflow:hidden;border:0;border-radius:0;background:transparent;
    padding:2px 0 0;font-size:11.5px;line-height:17px;
    display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
  #log .line{margin-bottom:1px}
  #log .sys,#log .sep{font-size:11px}
  #log .sep{margin:0;padding:0;border:0;background:none;letter-spacing:1px}
  #log .speech{padding:0;border:0;background:none;display:block}
  #log .speech .mini{display:none}
  #log .speech .bd{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #log .speech .who{font-size:11.5px}
  #log .speech .tx{color:#b9c4e8}

  #panel{border:0;border-radius:0;background:transparent;padding:4px 0 0;
    min-height:0;max-height:none;flex:none;overflow:visible;gap:8px}
  #speaker{display:block}
  #prompt{font-size:12px;line-height:1.45}
  #options{gap:6px;max-height:104px;overflow-y:auto}
  #options .btn{font-size:12px;padding:8px 11px}
  .votebox{font-size:11px;line-height:1.7;padding:6px 8px;max-height:84px}
  .row input[type=text]{padding:8px 10px;font-size:12.5px}

  /* 座位：圆环上的头像圆牌（不再是卡片） */
  .seat{width:64px;height:auto;padding:0;gap:3px;border:0;background:transparent;
    box-shadow:none;border-radius:0}
  .seat .av{width:46px;height:46px;font-size:22px;
    box-shadow:0 0 0 2px rgba(255,255,255,.1),0 4px 14px rgba(0,0,0,.55)}
  .seat .nm{font-size:10.5px;text-shadow:0 1px 4px #000;max-width:62px}
  .seat .st{display:none}
  .seat.dead .st{display:block;font-size:9px}
  .seat .no{font-size:9px;min-width:15px;height:15px;top:-4px;left:-5px}
  .seat .vt{bottom:-7px;font-size:9.5px;padding:1px 6px}
  .seat.me{border:0;box-shadow:none}
  .seat.mate{border:0;box-shadow:none}
  .seat.mate .av{box-shadow:0 0 0 2px var(--red),0 0 16px rgba(255,92,122,.55)}
  .seat.me .av{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(255,200,80,.5)}
  .seat.me::after{top:-6px;right:-4px}
  .seat.speaking .av{transform:scale(1.26)}
  .seat .badge{top:-7px;right:-7px;font-size:13px}
  .seat .mateflag{top:-7px;left:-7px;font-size:12px}
  .seat .mark{bottom:-6px;right:-5px;font-size:13px}
  .seat .cross{font-size:28px}

  /* 中心舞台 */
  .center{width:118px}
  .center .big{font-size:30px}
  .center .day{font-size:13px;letter-spacing:2px;margin-top:3px}
  .center .ph{font-size:10px;margin-top:2px}
  .center .ring{width:118px;height:118px;margin:-59px 0 0 -59px}

  .modal{width:94vw;padding:20px 16px;border-radius:20px;max-height:92vh}
  .modal h1{font-size:22px;letter-spacing:4px}
  .cardwrap{margin:10px 0 4px}
  .roleimg{width:min(56vw,210px);max-height:38vh}
  .roletip{font-size:12px}
  .lobbygrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
  .lsl{padding:7px 8px;gap:6px}
  .lsl .av{width:28px;height:28px;font-size:15px}
  .lsl .nm{font-size:12px}
  .lsl .sub{font-size:9.5px}
  .banner{font-size:clamp(18px,6vw,30px);letter-spacing:5px;top:38%}
}