/* ===========================================================================
 * 对接补充样式 —— 概念稿只覆盖「对局中」界面，这里补上它没有的部分：
 * 首页 / 房间大厅 / 身份公布 / 提名 / 研发抉择 / 结束 / 教程 / 菜单。
 * index.html、styles.css、game-ui.js 保持原样未改。
 *
 * 尺寸单位说明：
 *   全部组件用 em，由所在容器的 font-size 决定实际大小。
 *   · 舞台内的元素（身份条 / 阶段面板）基准 = 1.6rem，跟着概念稿一起等比缩放；
 *   · 全屏覆盖层（首页 / 大厅 / 教程 / 弹窗）基准 = 一个可读的 px 值，
 *     因为它们不属于 864 设计稿版式，没必要在手机上缩到看不清。
 * ========================================================================= */

/* ---------- 两套基准 ---------- */
.mg-screen, .mg-mask, .mg-toast, .mg-conn{ font-size: clamp(14px, 3.7vw, 17px); }
.mg-mybar, #mgAction{ font-size: 1.6rem; }

/* ---------- 全屏覆盖页（首页 / 大厅 / 教程） ---------- */
.mg-screen{
  position:fixed; inset:0; z-index:60;
  background:var(--bg);
  display:flex; justify-content:center;
  overflow-y:auto; overscroll-behavior:contain;
}
.mg-screen[hidden]{display:none !important;}
.mg-sheet{
  width:34em; max-width:100%;
  padding:1.6em 1.2em 3em;
  display:flex; flex-direction:column; gap:1em;
}
.mg-brand{text-align:center; padding:1.6em 0 .4em;}
.mg-brand h1{margin:0; font-size:2.1em; font-weight:800;}
.mg-brand p{margin:.5em 0 0; color:var(--text-3); font-size:1em;}

.mg-card{
  background:var(--card); border:.07em solid var(--line);
  border-radius:1.1em; box-shadow:var(--shadow-sm);
  padding:1.2em;
}
.mg-label{font-size:.95em; color:var(--text-3); font-weight:600; margin-bottom:.6em;}
.mg-row{display:flex; align-items:center; gap:.7em;}
.mg-grow{flex:1; min-width:0;}
.mg-muted{color:var(--text-2);}
.mg-center{text-align:center;}
.mg-tiny{font-size:.85em;}

.mg-input{
  width:100%; font-family:inherit; font-size:1.05em; color:var(--text);
  background:var(--card); border:.07em solid var(--line);
  border-radius:.7em; padding:.75em .9em; outline:none;
}
.mg-input:focus{border-color:var(--blue); box-shadow:0 0 0 .18em var(--blue-soft);}

.mg-btn{
  font-family:inherit; font-size:1.05em; font-weight:700; cursor:pointer;
  border:.07em solid var(--line); background:var(--card); color:var(--text);
  border-radius:.7em; padding:.75em 1em; transition:.12s;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
}
.mg-btn:active{transform:scale(.985);}
.mg-btn[disabled]{opacity:.45; cursor:not-allowed;}
.mg-btn-primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.mg-btn-danger{background:var(--red); border-color:var(--red); color:#fff;}
.mg-btn-green{background:var(--green); border-color:var(--green); color:#fff;}
.mg-btn-block{width:100%;}
.mg-btn-sm{font-size:.9em; padding:.5em .8em;}

.mg-chip{
  display:inline-flex; align-items:center; gap:.25em;
  font-size:.8em; font-weight:700; padding:.25em .6em;
  border-radius:2em; background:var(--line-soft); color:var(--text-2);
  white-space:nowrap;
}
.mg-chip.blue{background:var(--blue-soft); color:var(--blue);}
.mg-chip.red{background:var(--red-soft); color:var(--red);}
.mg-chip.green{background:var(--green-soft); color:var(--green);}
.mg-chip.gold{background:var(--cream); color:var(--cream-text);}

/* 房间列表 / 大厅座位 */
.mg-list{display:flex; flex-direction:column; gap:.55em;}
.mg-seat{
  display:flex; align-items:center; gap:.7em;
  padding:.65em .8em; border:.07em solid var(--line);
  border-radius:.9em; background:var(--card);
}
.mg-seat.empty{border-style:dashed; opacity:.55;}
.mg-seat .avatar{
  width:2.4em; height:2.4em; flex:none; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.1em;
}
.mg-seat-name{flex:1; min-width:0; font-size:1.05em; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.mg-cfg{display:flex; align-items:center; justify-content:space-between; padding:.5em 0; font-size:1em;}
.mg-cfg + .mg-cfg{border-top:.07em solid var(--line-soft);}
.mg-cfg-val{min-width:2.6em; text-align:center; font-weight:700; font-size:1.1em;}
.mg-stepper{display:flex; align-items:center; gap:.45em;}
.mg-stepper .mg-btn{width:2.3em; height:2.3em; padding:0; font-size:1.1em;}

/* ---------- 舞台内：概念稿没有的阶段面板 ---------- */
#mgAction[hidden]{display:none !important;}
.mg-action-head{
  display:flex; align-items:center; gap:.5em;
  font-size:1.35em; font-weight:800; color:var(--blue); margin-bottom:.4em;
}
.mg-action-head.green{color:var(--green);}
.mg-action-head.gold{color:var(--cream-text);}
.mg-action-desc{margin:0 0 .9em; font-size:1.05em; color:var(--text-2); line-height:1.5;}
.mg-note{
  border-radius:.7em; padding:.7em .85em;
  font-size:1em; line-height:1.5; margin-bottom:.8em;
}
.mg-note.blue{background:var(--blue-soft); border:.07em solid var(--blue-border); color:#1b56b8;}
.mg-note.red{background:var(--red-soft); border:.07em solid var(--red-border); color:#b3271c;}
.mg-note.green{background:var(--green-soft); border:.07em solid #c6ebd7; color:#15794a;}
.mg-note.gold{background:var(--cream); border:.07em solid #f2e0b4; color:var(--cream-text);}
.mg-actions{display:flex; gap:.7em;}
.mg-actions .mg-btn{flex:1;}
.mg-wait{text-align:center; padding:1.1em 0; color:var(--text-2); font-size:1.1em; line-height:1.6;}
.mg-wait b{color:var(--text);}

/* ---------- 居中弹窗（身份 / 结束 / 菜单） ---------- */
.mg-mask{
  position:fixed; inset:0; z-index:80;
  background:rgba(24,36,58,.45);
  display:flex; align-items:center; justify-content:center; padding:1.5em 1.2em;
}
.mg-mask[hidden]{display:none !important;}
.mg-modal{
  width:26em; max-width:100%;
  background:var(--card); border-radius:1.2em;
  box-shadow:var(--shadow-lg); padding:1.4em 1.2em;
  max-height:86vh; overflow-y:auto;
}
.mg-modal h2{margin:0 0 .6em; font-size:1.5em; text-align:center;}
.mg-modal .mg-btn + .mg-btn{margin-top:.6em;}
.mg-role-emoji{font-size:4em; text-align:center; line-height:1.1;}
.mg-role-name{text-align:center; font-size:1.8em; font-weight:800; margin:.2em 0 .6em;}
.mg-role-name.guardian{color:var(--blue);}
.mg-role-name.saboteur{color:var(--red);}

/* ---------- 教程 ---------- */
.mg-tut h3{margin:1.4em 0 .4em; font-size:1.15em; color:var(--blue);}
.mg-tut p{margin:.5em 0; font-size:1.02em; line-height:1.65; color:var(--text-2);}
.mg-tut ul{margin:.5em 0; padding-left:1.4em; list-style:disc;}
.mg-tut li{margin:.3em 0; font-size:1.02em; line-height:1.65; color:var(--text-2);}
.mg-tut b{color:var(--text);}

/* ---------- 舞台内：我的身份条（概念稿未含） ---------- */
.mg-mybar{
  display:flex; align-items:center; gap:.5em; flex-wrap:wrap;
  margin:0 0 .7em; padding:.55em .9em;
  background:var(--card); border:.07em solid var(--line);
  border-radius:.9em; box-shadow:var(--shadow-sm);
  font-size:1.6rem; line-height:1.4;
}
.mg-mybar[hidden]{display:none !important;}
.mg-mybar .k{color:var(--text-3); font-size:.9em;}
.mg-mybar .v{font-weight:700; font-size:.95em;}

/* ---------- 提示条 / 断线条 ---------- */
.mg-toast{
  position:fixed; left:50%; bottom:3.5em; transform:translateX(-50%);
  background:#232a36; color:#fff; padding:.65em 1.3em;
  border-radius:2em; font-size:1em; z-index:200;
  opacity:0; transition:.2s; pointer-events:none; white-space:nowrap;
}
.mg-toast.on{opacity:1;}
.mg-conn{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--red); color:#fff; text-align:center;
  font-size:.95em; padding:.5em; font-weight:600;
}
.mg-conn[hidden]{display:none !important;}

/* ===========================================================================
 * 布局覆盖（写在这里而不是改 styles.css，这样你更新概念稿不会被冲掉）
 * ========================================================================= */

/* 1. 消除右下角大块空白：
 *    原布局 "left center right" / "chat chat right" —— 右侧玩家列跨两行，
 *    但内容只有 5 个人，下半截就空着。改成聊天区横跨三栏铺满整行，
 *    同时让左右玩家列拉伸到与中间栏等高，头像均匀分布，不留缝。 */
.main-grid{
  grid-template-areas:"left center right" "chat chat chat";
  grid-template-rows:auto 1fr;      /* 第二行吃掉剩余高度 */
  align-items:stretch;
}
.player-col{height:100%;}
.player-list{height:100%; justify-content:space-between;}

/* 聊天区改为撑满屏幕剩余高度（原本固定 50.3rem，铺满整行后底部会空一块） */
.app{display:flex; flex-direction:column;}
.main-grid{flex:1;}
.chat-panel{height:auto; min-height:34rem;}

/* 2. 步骤轮换：当前步骤展开置顶，其余折叠成横条按顺序排在下面。
 *    折叠条的第一步需要一个和概念稿同款的徽章色。 */
.badge-red{background:var(--red);}
.step-row-sub.done{color:var(--green);}
#mgStep1Row[hidden]{display:none !important;}
.step-row-right.done .clock{display:none;}
.step-row-right.done{color:var(--green);}