/* 谁是卧底 —— 手机优先，琥珀色主题 */
.uc-main { padding: 16px 12px 40px; }
.uc-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.uc-card { background: #fff; border: 3px solid var(--dark); border-radius: 18px; padding: 20px 18px;
  box-shadow: 4px 4px 0 var(--dark); overflow: hidden; }   /* overflow:hidden 让满血角色徽标圆角贴合卡片，防止四角溢出叠盖 */
.uc-h2 { font-size: 1.3rem; font-weight: 900; margin-bottom: 6px; color: var(--dark); }
.uc-sub { font-size: 0.9rem; color: #5a6472; line-height: 1.6; margin-bottom: 12px; }
.uc-sub b { color: var(--dark); }
.uc-wait { text-align: center; color: #8a93a0; font-weight: 700; padding: 14px; }
.uc-alert { background: #FFF3F0; color: #d9582f; border: 1px solid #ffd2c6; border-radius: 12px; padding: 10px 12px; font-size: 0.85rem; margin-bottom: 12px; }

/* 入口 */
.uc-entry { text-align: center; }
.uc-logo { display: flex; justify-content: center; margin-bottom: 6px; }
.uc-pixmask { image-rendering: pixelated; }
.uc-spin { animation: uc-breathe 1.3s ease-in-out infinite; }  /* 放大镜：呼吸(缩放脉冲)，不旋转 */
@keyframes uc-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.uc-title { font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 2rem; font-weight: 900; letter-spacing: 2px; color: var(--dark); line-height: 1.1; margin-bottom: 8px; }
.uc-asyou { font-size: 0.85rem; color: #6a7380; margin: 10px 0; }
.uc-big { width: 100%; font-size: 1.05rem; padding: 11px; margin-top: 12px; }
.uc-foot { margin-top: 14px; text-align: center; font-size: 0.74rem; color: #97a0ac; line-height: 1.4; }
.uc-or { color: #aeb6c2; font-size: 0.8rem; margin: 12px 0; }
.uc-join-row { display: flex; gap: 8px; align-items: stretch; }
.uc-code-input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--dark); border-radius: 10px; font-size: 1rem; text-align: center; letter-spacing: 3px; }
.uc-join-row .btn { flex-shrink: 0; padding: 10px 18px; }
.uc-adv { margin-top: 14px; text-align: left; }
.uc-adv summary { cursor: pointer; font-size: 0.85rem; color: #6a7380; font-weight: 700; }
.uc-adv[open] summary { margin-bottom: 10px; }
.uc-field { display: block; margin-top: 10px; font-size: 0.82rem; color: #5a6472; font-weight: 700; }
.uc-field span { display: block; margin-bottom: 5px; }
.uc-field input { width: 100%; padding: 10px; border: 2px solid var(--dark); border-radius: 8px; font-size: 0.95rem; box-sizing: border-box; }

/* 顶栏 */
.uc-topbar { display: flex; align-items: center; justify-content: space-between; }
.uc-room { display: flex; align-items: center; gap: 8px; }
.uc-room-label { font-size: 0.72rem; color: #97a0ac; font-weight: 700; }
.uc-room-code { font-size: 1.1rem; font-weight: 900; letter-spacing: 2px; color: var(--dark); cursor: pointer; background: #FFF3DC; border: 2px solid #F5C56B; border-radius: 8px; padding: 2px 10px; }
.uc-top-actions { display: flex; align-items: center; gap: 10px; }
.uc-online { font-size: 0.8rem; color: #6a7380; font-weight: 700; }
.uc-icon-btn { background: none; border: none; cursor: pointer; color: #6a7380; padding: 4px; }
.uc-ic { width: 22px; height: 22px; }

/* 角色徽标 + 词 */
.uc-role-badge { display: block; margin: -20px -18px 16px; padding: 13px 14px; border-radius: 16px 16px 0 0; text-align: center; font-size: 1.02rem; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg, #F59E0B, #FF8A5B); color: #fff; }
.role-vote .uc-role-badge { background: linear-gradient(135deg, #FF7A59, #FF5A5A); }
.role-result .uc-role-badge, .role-test .uc-role-badge { background: linear-gradient(135deg, #2C3E50, #4A90FF); }
.uc-word { font-size: 2.2rem; font-weight: 900; text-align: center; letter-spacing: 2px; color: var(--dark); margin: 6px 0 16px; word-break: break-all;
  background: #FFF8EC; border: 2px dashed #F5C56B; border-radius: 14px; padding: 18px 12px; }
.uc-word.blank { font-size: 1.5rem; color: #8a6d3b; }
.uc-word.spectator { font-size: 1.1rem; color: #8a93a0; background: var(--light); border-color: #e6e9ef; }
.uc-word-tip { font-size: 0.82rem; font-weight: 600; color: #b08a52; margin-top: 8px; letter-spacing: 0; }
.uc-tip { font-size: 0.88rem; color: #5a6472; line-height: 1.6; margin-bottom: 12px; }

/* 玩家列表 */
.uc-players { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.uc-player { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--light); border: 2px solid transparent; }
.uc-player.me { border-color: #F59E0B; background: #FFF8EC; }
.uc-player.dim { opacity: 0.5; }
.uc-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; overflow: hidden; background: #eef0f4; }
.uc-ava.sm { width: 26px; height: 26px; }
.uc-pname { font-weight: 700; color: var(--dark); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-pname em { color: #F59E0B; font-style: normal; font-size: 0.85em; }
.uc-pscore { font-weight: 900; color: var(--dark); background: #fff; border-radius: 8px; padding: 2px 9px; min-width: 28px; text-align: center; flex-shrink: 0; }
/* 等待开始：座位号 + 右上角齿轮(出词方向) + 底部留空 */
.uc-seat { flex-shrink: 0; width: 22px; height: 22px; border-radius: 8px; background: #e6e9ef; color: #6a7380; font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.uc-lobby { margin-bottom: 12px; }
.uc-lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.uc-lobby-head .uc-h2 { margin-bottom: 0; }
.uc-gear { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 2px solid #e6e9ef; background: #fff; color: #6a7380; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.uc-gear:hover { color: var(--dark); background: var(--light); }
.uc-gear-ic { width: 17px; height: 17px; }
.uc-gear-panel { margin: 4px 0 12px; }
.uc-gear-panel[hidden] { display: none; }
.uc-tag { font-size: 0.7rem; font-weight: 800; padding: 2px 7px; border-radius: 7px; flex-shrink: 0; }
.uc-tag.host { background: #FFF3DC; color: #C77700; }
.uc-tag.civ { background: #E2F7EC; color: #1d9e5e; }
.uc-tag.under { background: #FFE2DC; color: #e0512f; }
.uc-tag.blank { background: #ECEFF4; color: #5a6472; }
.uc-tag.voted { background: #E5EEFF; color: #2c6ed5; }
.uc-tag.out { background: #eceef2; color: #8a93a0; }
.uc-tag.off { background: #eceef2; color: #8a93a0; }
.uc-testbanner { background: #FFF8EC; color: #C77700; border: 1px solid #F5C56B; border-radius: 12px; padding: 10px 12px; font-size: 0.82rem; font-weight: 700; text-align: center; margin-bottom: 12px; }

/* 倒计时 */
.uc-count { position: relative; height: 30px; background: var(--light); border-radius: 10px; overflow: hidden; margin-bottom: 14px; border: 2px solid #e6e9ef; }
.uc-count-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #F59E0B, #FFC56B); transition: width 0.25s linear; }
.uc-count-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: var(--dark); }

/* 投票 */
.uc-votebar { text-align: center; font-size: 0.85rem; font-weight: 800; color: #6a7380; margin-bottom: 10px; }
.uc-cands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.uc-cand { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--light); border: 2px solid #e6e9ef; cursor: pointer; font: inherit; text-align: left; }
.uc-cand.picked { border-color: #FF5A5A; background: #FFF3F0; }
.uc-cand:disabled { opacity: 0.5; cursor: default; }
.uc-cand-name { flex: 1; font-weight: 700; color: var(--dark); }
.uc-cand-tick { color: #FF5A5A; font-weight: 900; }
.uc-voted-msg { text-align: center; font-weight: 700; color: #1d9e5e; padding: 10px; }

/* 结果 / 揭晓 */
.uc-result-tie { text-align: center; font-size: 1.1rem; font-weight: 800; color: #6a7380; padding: 16px; }
.uc-result-out { text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--dark); padding: 12px 6px; line-height: 1.8; }
.uc-winner { text-align: center; font-size: 1.15rem; font-weight: 900; padding: 14px; border-radius: 12px; margin: 12px 0; }
.uc-winner.civ { background: #E2F7EC; color: #1d9e5e; }
.uc-winner.under { background: #FFE2DC; color: #e0512f; }
.uc-reveal-words { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; background: #FFF8EC; border: 2px solid #F5C56B; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.uc-reveal-words span { font-size: 0.8rem; color: #b08a52; font-weight: 700; }
.uc-reveal-words b { font-size: 1.2rem; color: var(--dark); font-weight: 900; }
.uc-reveal-words .uc-cat { grid-column: 1 / -1; font-size: 0.78rem; color: #97a0ac; }
.uc-roles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.uc-ro-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--light); }
.uc-ro-name { flex: 1; font-weight: 700; color: var(--dark); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 反馈 */
.uc-fb2-label { font-size: 0.78rem; color: #97a0ac; font-weight: 700; text-align: center; margin: 8px 0 8px; }
.uc-fb2 { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.uc-fbbtn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border-radius: 12px; border: 2px solid #e6e9ef; background: #fff; font-weight: 800; cursor: pointer; color: #5a6472; }
.uc-fbbtn.up { color: #1d9e5e; } .uc-fbbtn.down { color: #e0512f; }
.uc-fb-done { color: #1d9e5e; font-weight: 800; }

.btn-ghost { background: #fff; color: var(--dark); border: 2px solid #e2e6ec; }
.btn-ghost:hover { background: var(--light); }
.uc-host-actions { margin-top: 8px; }
.uc-host-actions .btn-ghost { width: 100%; margin-top: 10px; padding: 14px; font-size: 1rem; }

/* 积分榜 */
.uc-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.uc-board-head h3 { font-size: 1.05rem; font-weight: 900; color: var(--dark); }
.uc-mini { font-size: 0.75rem; background: none; border: 1px solid #e6e9ef; border-radius: 7px; padding: 3px 9px; cursor: pointer; color: #6a7380; }
.uc-board-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.uc-board-list li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: var(--light); }
.uc-board-list li.me { background: #FFF8EC; }
.uc-rank { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.8rem; background: #e6e9ef; color: #6a7380; flex-shrink: 0; }
.uc-rank.r1 { background: #FFD93D; color: #7a5a00; } .uc-rank.r2 { background: #d8dde6; } .uc-rank.r3 { background: #f0c9a8; }
.uc-bname { flex: 1; font-weight: 700; color: var(--dark); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-bscore { font-weight: 900; color: var(--dark); }

/* 创建房间配置（人数/卧底/白板/看词时长） */
.uc-create-cfg { background: var(--light); border: 2px solid #e6e9ef; border-radius: 14px; padding: 12px 14px; margin: 8px 0 14px; text-align: left; }
.uc-cfg-title { font-size: 0.8rem; font-weight: 800; color: #6a7380; margin-bottom: 10px; }
.uc-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uc-cfg-item { display: flex; flex-direction: column; gap: 5px; font-size: 0.76rem; color: #5a6472; font-weight: 700; min-width: 0; }
.uc-cfg-item select, .uc-cfg-item input { width: 100%; padding: 9px 10px; border: 2px solid var(--dark); border-radius: 8px; font-size: 0.95rem; background: #fff; font-family: inherit; }
.uc-cfg-hint { font-size: 0.72rem; color: #97a0ac; margin-top: 9px; line-height: 1.4; }
.uc-cfg-badge { display: inline-block; background: #FFF8EC; border: 1px solid #F5C56B; color: #C77700; font-size: 0.8rem; font-weight: 800; border-radius: 10px; padding: 6px 12px; margin-bottom: 12px; }

/* 防溢出 / 长内容换行 */
.uc-word { overflow-wrap: anywhere; }
.uc-reveal-words b { word-break: break-all; min-width: 0; }
.uc-cand { min-width: 0; }
.uc-cand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-result-out { overflow-wrap: anywhere; }

/* toast */
.uc-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(10px); background: var(--dark); color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; z-index: 999; }
.uc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }