/* ========== 卡通主题变量 ========== */
:root {
  --ink: #2b2b3a;
  --paper: #fffdf7;
  --yellow: #ffd93d;
  --yellow-dark: #e6bc00;
  --coral: #ff6b6b;
  --coral-dark: #e05252;
  --teal: #4ecdc4;
  --teal-dark: #35b3aa;
  --purple: #a78bfa;
  --blue: #54a0ff;
  --shadow: rgba(43, 43, 58, 0.9);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #8ed6ff 0%, #bfe9ff 45%, #fef3c7 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ========== 装饰：太阳与云朵 ========== */
.sun {
  position: fixed;
  top: 30px;
  right: 8%;
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 35% 35%, #ffe98a, var(--yellow));
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 217, 61, 0.8);
  animation: sun-spin 14s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes sun-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

.cloud {
  position: fixed;
  width: 110px;
  height: 38px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 40px;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  animation: drift 26s linear infinite;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.cloud::before { width: 44px; height: 44px; top: -24px; left: 16px; }
.cloud::after { width: 30px; height: 30px; top: -15px; right: 16px; }
.cloud.c1 { top: 12%; left: -140px; animation-duration: 30s; }
.cloud.c2 { top: 30%; left: -200px; animation-duration: 42s; animation-delay: 6s; transform: scale(0.8); }
.cloud.c3 { top: 62%; left: -160px; animation-duration: 36s; animation-delay: 12s; transform: scale(0.65); }

@keyframes drift {
  from { left: -180px; }
  to { left: 110%; }
}

/* ========== 通用组件 ========== */
.view {
  display: none;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
}
.view.active { display: flex; }

.card {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 8px 0 var(--shadow);
}

.pop-in { animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  user-select: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--shadow);
}
.btn:disabled {
  filter: grayscale(0.7);
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-primary { background: var(--yellow); }
.btn-secondary { background: var(--teal); }
.btn-big { width: 100%; font-size: 20px; padding: 14px 24px; }

.mini-btn {
  font-family: inherit;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s;
}
.mini-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.mini-danger { background: var(--coral); color: #fff; }

.text-input {
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 12px 16px;
  outline: none;
  width: 100%;
  transition: box-shadow 0.15s;
}
.text-input:focus { box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.6); }
.text-input:disabled { background: #eee; color: #999; }

.field-label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #888;
  font-size: 14px;
  margin: 18px 0 12px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-top: 3px dashed #ccc;
}

.hidden { display: none !important; }

/* ========== 提示浮层（底部堆叠，不遮挡顶部关键信息） ========== */
.toasts {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 99;
  pointer-events: none;
  max-width: 92vw;
}
.toast {
  background: rgba(32, 32, 38, 0.92);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  max-width: 88vw;
  text-align: center;
  animation: toast-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.3s, transform 0.3s;
}
.toast.out {
  opacity: 0;
  transform: translateY(8px);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ========== 首页 ========== */
#view-home {
  align-items: center;
  justify-content: center;
}

.home-card {
  width: 100%;
  max-width: 420px;
  padding: 28px 24px;
  text-align: center;
}

.game-title {
  font-size: 38px;
  margin: 0 0 4px;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--yellow);
  animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.subtitle { color: #777; margin: 0 0 20px; font-size: 15px; }

.home-card .text-input { text-align: center; margin-bottom: 14px; }

.join-row {
  display: flex;
  gap: 10px;
}
.join-row .text-input { flex: 1; text-align: center; }
.join-row .btn { flex-shrink: 0; }

.rules {
  margin-top: 20px;
  text-align: left;
  font-size: 14px;
  color: #666;
  background: #fff8e1;
  border: 3px dashed var(--yellow-dark);
  border-radius: 16px;
  padding: 10px 14px;
}
.rules summary { font-weight: 700; cursor: pointer; color: var(--ink); }
.rules ul { margin: 8px 0 4px; padding-left: 18px; }
.rules li { margin-bottom: 4px; }

/* ========== 大厅 ========== */
#view-lobby {
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}

.lobby-card {
  width: 100%;
  max-width: 560px;
  padding: 20px;
}

.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.room-code-box { font-weight: 700; font-size: 17px; }
.room-code {
  display: inline-block;
  background: var(--ink);
  color: var(--yellow);
  font-size: 26px;
  letter-spacing: 6px;
  padding: 4px 14px;
  border-radius: 12px;
  margin: 0 6px;
  vertical-align: middle;
}

.lobby-tip { color: #888; font-size: 14px; margin: 10px 0 14px; }

.me-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.me-row .field-label { margin: 0; white-space: nowrap; }
.me-row .text-input { padding: 8px 12px; font-size: 15px; }

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.player-tile {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 12px 6px 10px;
  text-align: center;
  box-shadow: 0 4px 0 var(--shadow);
  position: relative;
  animation: pop-in 0.3s;
}
.player-tile .avatar {
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
  font-size: 30px;
  line-height: 46px;
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.player-tile .pname {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-host {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 20px;
  transform: rotate(15deg);
}
.badge-me {
  position: absolute;
  top: -10px;
  left: -6px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
}

.lobby-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lobby-settings .field-label { margin: 0; }

.uc-options { display: flex; gap: 8px; }
.uc-btn {
  font-family: inherit;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  padding: 8px 18px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--shadow);
}
.uc-btn.selected { background: var(--coral); color: #fff; }
.uc-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.lobby-hint {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin: 10px 0 0;
}

/* ========== 游戏页 ========== */
#view-game { padding: 10px; }

.game-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
  height: calc(100dvh - 20px);
  gap: 8px;
}

.game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  flex-shrink: 0;
}

.my-word { font-weight: 700; font-size: 16px; }
.my-word span {
  display: inline-block;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 2px 12px;
  margin-left: 4px;
  font-size: 19px;
  animation: pop-in 0.4s;
}

.round-info { color: #888; font-size: 14px; font-weight: 700; }
.game-code {
  background: #f3efe6;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  color: #888;
  font-size: 13px;
  font-weight: 700;
}

.order-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 18px 2px 8px; /* 顶部留出房主皇冠的位置 */
  flex-shrink: 0;
  scrollbar-width: none;
}
.order-strip::-webkit-scrollbar { display: none; }

.order-chip {
  flex-shrink: 0;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, background 0.15s;
}
.order-chip .chip-avatar { font-size: 18px; }
.order-chip.speaking {
  background: var(--yellow);
  transform: scale(1.1);
  animation: pulse 1s ease-in-out infinite;
}
.order-chip.out { opacity: 0.4; filter: grayscale(1); text-decoration: line-through; }

/* 玩家标签外层：房主在标签上方显示 👑 */
.order-chip-wrap {
  position: relative;
  flex-shrink: 0;
}
.order-chip-wrap.host::before {
  content: '👑';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  z-index: 2;
}
.order-chip-wrap.host .order-chip {
  background: #fff8e1;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.8); }
  50% { box-shadow: 0 0 0 8px rgba(255, 217, 61, 0); }
}

.turn-banner {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  flex-shrink: 0;
}
.turn-banner .count { color: var(--yellow); font-size: 17px; }
.turn-banner.my-turn { background: var(--coral); }

.turn-banner.debate { background: var(--purple); }
.turn-banner.my-turn.debate { background: var(--coral); } /* 辩论轮到自己的提示保持红色（与描述一致） */
.turn-banner.runoff { background: #4a90d9; }

.feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px;
  -webkit-overflow-scrolling: touch;
}

.msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: msg-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes msg-in {
  from { transform: translateY(10px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.msg .msg-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.msg .msg-body { max-width: 78%; }
.msg .msg-name { font-size: 12px; color: #777; font-weight: 700; margin: 0 0 2px 4px; }
.msg .msg-text {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 4px 18px 18px 18px;
  padding: 8px 14px;
  font-size: 15px;
  word-break: break-word;
  box-shadow: 0 3px 0 var(--shadow);
}
.msg.describe .msg-text { background: #fff3c4; }

/* 平票辩论发言：紫色区分于描述与闲聊 */
.msg.debate .msg-text {
  background: #efe9ff;
  border-color: #b3a8e0;
  color: #5a4f8a;
}
.msg.mine.debate .msg-text {
  background: #e3dbff;
}
.role-badge.debate-badge {
  background: var(--purple);
  color: #fff;
  margin-right: 4px;
}
.msg.mine { flex-direction: row-reverse; }
.msg.mine .msg-body { text-align: right; }
.msg.mine .msg-name { margin: 0 4px 2px 0; }
.msg.mine .msg-text { border-radius: 18px 4px 18px 18px; background: #d8f5f3; }
.msg.mine .msg-avatar { background: var(--purple); }

/* 语音转写实时预览：说话时显示，正式消息落地/语音结束后消失 */
.msg.live-transcript .msg-text {
  background: #f4f7ff;
  border-style: dashed;
  color: #667;
  font-size: 14px;
  font-style: italic;
}
.msg.live-transcript .msg-text .live-dot {
  margin-left: 6px;
  font-size: 11px;
  font-style: normal;
  color: #8a9bb8;
  animation: live-blink 1s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.msg.system {
  justify-content: center;
}
.msg.system .sys-text {
  background: rgba(43, 43, 58, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 16px;
  text-align: center;
  max-width: 92%;
}
.msg.system.highlight .sys-text {
  background: var(--coral);
  font-size: 14px;
  border: 2px solid #fff;
}

/* 投票面板 */
.vote-panel {
  flex-shrink: 0;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 20px;
  padding: 10px 12px;
  box-shadow: 0 6px 0 var(--shadow);
  max-height: 42vh;
  overflow-y: auto;
}
.vote-title { font-weight: 700; text-align: center; margin-bottom: 8px; font-size: 15px; }

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.vote-tile {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.1s, background 0.1s;
  user-select: none;
}
.vote-tile .v-avatar { font-size: 26px; display: block; margin-bottom: 2px; }
.vote-tile:active { transform: scale(0.94); }
.vote-tile.selected { background: var(--coral); color: #fff; }
.vote-tile.disabled { opacity: 0.55; cursor: not-allowed; }
.vote-tile .v-check { display: block; font-size: 12px; }

.vote-status { text-align: center; font-size: 13px; color: #777; margin-top: 8px; font-weight: 700; }

/* 底部输入栏 */
.game-input {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 10px;
  align-items: center;
  border-radius: 20px;
}
.game-input .text-input { flex: 1; padding: 10px 14px; font-size: 15px; }
.game-input .btn { padding: 10px 18px; font-size: 15px; flex-shrink: 0; }

.mic-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-size: 21px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.1s;
}
.mic-btn:active { transform: scale(0.9); }
.mic-btn.recording {
  background: var(--coral);
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
  50% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }
}

/* ========== 结算页 ========== */
#view-end {
  align-items: center;
  justify-content: center;
}

.end-card {
  width: 100%;
  max-width: 480px;
  padding: 24px 20px;
  text-align: center;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.end-title {
  font-size: 32px;
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 var(--yellow);
}

.end-words {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.word-pill {
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 15px;
  background: var(--teal);
  color: #fff;
}
.word-pill.uc { background: var(--coral); }

.end-reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  text-align: left;
}
.reveal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 15px;
}
.reveal-row .r-avatar { font-size: 24px; }
.reveal-row .r-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-row .r-word {
  background: #fff3c4;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}
.reveal-row.is-uc { background: #ffe3e3; }
.reveal-row .r-tag { font-size: 12px; }
.reveal-row .r-dead { opacity: 0.5; font-size: 12px; }

/* ========== 响应式：手机 ========== */
@media (max-width: 480px) {
  .game-title { font-size: 30px; }
  .home-card { padding: 22px 16px; }
  .sun { width: 52px; height: 52px; top: 16px; right: 5%; }
  .view { padding: 10px; }
  #view-lobby { padding-top: 12px; }
  .players-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
  .player-tile .avatar { width: 44px; height: 44px; font-size: 25px; line-height: 38px; }
  .join-row { flex-direction: column; }
  .join-row .btn { width: 100%; }
  .end-title { font-size: 26px; }
  .msg .msg-body { max-width: 82%; }
}

/* 桌面端稍大字号 */
@media (min-width: 768px) {
  .home-card { max-width: 460px; }
  .game-wrap { max-width: 680px; }
}


/* ========== 投票明细卡片 ========== */
.vote-detail-card {
  align-self: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--shadow);
  padding: 10px 16px;
  margin: 4px 0;
  min-width: 250px;
  max-width: 94%;
  animation: msg-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vd-title {
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  margin-bottom: 6px;
}
.vd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 2px;
}
.vd-row .vd-arrow { color: var(--coral); }
.vd-row.abstain { opacity: 0.5; }
.vd-result {
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
}

/* 投票面板中被淘汰者置灰 */
.vote-tile.out {
  opacity: 0.45;
  filter: grayscale(1);
}


/* ========== 语音广播 ========== */
.order-chip.voice {
  background: var(--teal);
  color: #fff;
}


/* ========== 掉线与弃权 ========== */
.player-tile.offline,
.order-chip.offline,
.vote-tile.offline {
  opacity: 0.45;
  filter: grayscale(1);
}

.vote-tile.abstain {
  background: #f0ebff;
}
.vote-tile.abstain.selected {
  background: var(--purple);
  color: #fff;
}


/* ========== 淘汰/胜利特效 ========== */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

.fx-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 150;
}
.fx-elim-self {
  background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0.55), rgba(40, 0, 0, 0.85));
  animation: fx-fadein 0.25s;
}
.fx-elim-other {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
  animation: fx-fadein 0.25s;
}
@keyframes fx-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.elim-content { text-align: center; color: #fff; }
.fx-elim-self .elim-emoji {
  font-size: 110px;
  animation: elim-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-elim-self .elim-title {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(255, 80, 80, 0.8);
  animation: elim-slam 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-elim-self .elim-sub {
  margin-top: 12px;
  font-size: 18px;
  opacity: 0.9;
  animation: fx-fadein 0.8s;
}
.elim-title-sm {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 #000;
  animation: elim-slam 0.4s;
}
@keyframes elim-drop {
  from { transform: translateY(-120px) scale(2); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes elim-slam {
  0% { transform: scale(3) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 震屏 */
body.shake .game-wrap { animation: shake 0.5s; }
@keyframes shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(8px, -4px); }
  60% { transform: translate(-6px, -3px); }
  80% { transform: translate(6px, 3px); }
}

/* 结算页胜负样式 */
.end-card.win {
  border-color: #ffb700;
  animation: win-glow 1.2s ease-in-out infinite alternate;
}
@keyframes win-glow {
  from { box-shadow: 0 8px 0 var(--shadow), 0 0 25px rgba(255, 183, 0, 0.45); }
  to { box-shadow: 0 8px 0 var(--shadow), 0 0 60px rgba(255, 183, 0, 0.85); }
}
.end-card.lose { filter: saturate(0.55) brightness(0.96); }
.end-title.win {
  color: #e6a800;
  text-shadow: 3px 3px 0 #fff3c4, 0 0 24px rgba(255, 183, 0, 0.7);
  animation: win-bounce 0.5s ease-in-out infinite alternate;
}
.end-title.lose { color: #888; text-shadow: none; }
@keyframes win-bounce {
  from { transform: scale(1) rotate(-1deg); }
  to { transform: scale(1.06) rotate(1deg); }
}
#end-sub {
  font-size: 16px;
  color: #777;
  font-weight: 700;
  margin: -6px 0 12px;
}

@media (max-width: 480px) {
  .fx-elim-self .elim-emoji { font-size: 80px; }
  .fx-elim-self .elim-title { font-size: 34px; letter-spacing: 2px; }
  .fx-elim-self .elim-sub { font-size: 15px; }
  .elim-title-sm { font-size: 26px; }
}


/* ========== 房主踢人 & 音乐开关 ========== */
.badge-kick {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.1s;
}
.badge-kick:hover { transform: scale(1.2); }

.badge-transfer {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  background: var(--purple);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.1s;
}
.badge-transfer:hover { transform: scale(1.2); }

.game-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bgm-btn { font-size: 16px; padding: 4px 10px; }
.bgm-btn.off { opacity: 0.5; filter: grayscale(1); }


/* ========== 大厅准备状态 ========== */
.ready-state {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 700;
  color: #999;
}
.ready-state.ok { color: #2f9e44; }
.ready-state.host-tag { color: #e6a800; }

.player-tile.ready {
  background: #e9fbef;
  border-color: #2f9e44;
}

#btn-ready.cancel {
  background: #adb5bd;
}


/* ========== 闲聊气泡：与正式描述明显区分 ========== */
.msg.chat .msg-text {
  background: #f2f0fa;
  border-style: dashed;
  border-color: #b3a8e0;
  color: #6a6392;
  font-style: italic;
  font-size: 14px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 与默认卡通字体区分开 */
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: none;
}
.msg.mine.chat .msg-text {
  background: #e5f0fb;
  border-color: #8fb8e8;
  color: #4a6a92;
}
.msg.chat .msg-name {
  color: #a79fce;
}


/* 防止手机端橡皮筋滚动，顶部栏始终固定在页面上端 */
html, body {
  overscroll-behavior: none;
}
#view-game {
  overflow: hidden;
}

/* ========== 玩家标签超出换行（替代横向滚动） ========== */
.order-strip {
  flex-wrap: wrap;
  overflow-x: visible;
}


/* ========== 闲聊显示开关 ========== */
#feed.hide-chat .msg.chat {
  display: none;
}


/* ========== 管理员公告滚动横幅 ========== */
.announce-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 180;
  background: var(--yellow);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  padding: 8px 0;
}
.announce-inner {
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  font-size: 15px;
  animation-name: announce-scroll;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform;
}
@keyframes announce-scroll {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}


/* ========== V1.21 首页：创建表单 + 房间列表 ========== */
.home-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto;
}
#view-home {
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}
.home-card { padding: 22px 20px; }

.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.form-col { flex: 1; }
select.text-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.check-row {
  display: flex;
  gap: 18px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}
.check-label input {
  width: 20px;
  height: 20px;
  accent-color: var(--coral);
  cursor: pointer;
}

.rooms-card { padding: 14px 16px; }
.rooms-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rooms-head h2 { margin: 0; font-size: 18px; }
.home-rooms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 3px 0 var(--shadow);
  animation: pop-in 0.25s;
}
.room-item .r-type {
  flex-shrink: 0;
  font-size: 20px;
}
.room-item .r-main { flex: 1; min-width: 0; }
.room-item .r-subject {
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-item .r-info {
  font-size: 12px;
  color: #888;
  font-weight: 700;
}
.room-item .r-join {
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 3px 0 var(--shadow);
}
.room-item .r-join:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.room-item .r-join:disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
  box-shadow: none;
}
.room-item.full { opacity: 0.75; }
.rooms-empty { text-align: center; color: #999; padding: 18px 0; margin: 0; }

/* ========== V1.21 席位卡片 ========== */
.seat-title {
  font-weight: 700;
  font-size: 14px;
  color: #888;
  margin: 6px 0 8px;
}
.seats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.seat-card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 4px 8px;
  text-align: center;
  box-shadow: 0 4px 0 var(--shadow);
  position: relative;
  min-height: 86px;
}
.seat-card .avatar {
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  font-size: 25px;
  line-height: 38px;
  background: var(--teal);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.seat-card .pname {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-card.empty {
  background: #f4f1e8;
  border-style: dashed;
  border-color: #b8b0a0;
  box-shadow: none;
  cursor: pointer;
  color: #b0a890;
}
.seat-card.empty .avatar {
  background: transparent;
  border-color: #c8c0b0;
  color: #c8c0b0;
  line-height: 38px;
}
.seat-card.empty:active { transform: scale(0.95); }
.seat-card.mine { background: #e9fbef; border-color: #2f9e44; }
.seat-card.offline { opacity: 0.45; filter: grayscale(1); }
.seat-card .seat-no {
  position: absolute;
  top: -8px;
  left: -6px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 1px 7px;
}
.seat-card .speaking-dot {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 16px;
  animation: pulse 1s infinite;
}

.spectators-row {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  margin-bottom: 10px;
  line-height: 1.8;
}

/* 主题/密码 */
.lobby-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.subject-pill {
  background: var(--purple);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 3px 14px;
  font-weight: 700;
  font-size: 14px;
}
.lock-pill {
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 13px;
}
.password-pill {
  background: #fff3c4;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
}

/* 大厅闲聊 */
.lobby-chat { margin-top: 14px; }
.lobby-feed {
  height: 180px;
  border: 3px dashed #ddd;
  border-radius: 16px;
  padding: 8px;
  background: #fff;
  margin-bottom: 8px;
}
.lobby-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lobby-input-row .text-input { flex: 1; padding: 10px 14px; font-size: 15px; }
.lobby-input-row .btn { padding: 10px 16px; font-size: 15px; flex-shrink: 0; }

/* 闲聊房 */
.chatroom-title { font-weight: 900; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.chatroom-code {
  font-size: 13px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 2px;
}
.stage-grid { margin-bottom: 6px; }
.stage-title {
  font-weight: 700;
  font-size: 14px;
  color: #888;
  flex-shrink: 0;
}
#chat-feed { background: rgba(255, 253, 247, 0.6); border-radius: 16px; padding: 8px; }

/* 表情面板与表情消息 */
.emoji-panel {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  width: min(420px, 92vw);
  max-height: 46vh;
  overflow-y: auto;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 8px 0 var(--shadow);
  z-index: 120;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}
.emoji-panel .emoji-item {
  font-size: 34px;
  text-align: center;
  padding: 6px 2px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s, background 0.1s;
}
.emoji-panel .emoji-item:hover { background: #fff3c4; transform: scale(1.15); }
.emoji-panel .emoji-item img { width: 40px; height: 40px; object-fit: contain; }
.emoji-panel .pack-name {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  padding: 4px 2px 0;
}
.msg-sticker {
  font-size: 46px;
  line-height: 1.1;
}
.msg-sticker img { width: 90px; height: 90px; object-fit: contain; }

/* 密码弹窗 */
.pwd-modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 58, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 160;
  padding: 16px;
}
.pwd-card {
  width: 100%;
  max-width: 320px;
  padding: 22px 20px;
  text-align: center;
}
.pwd-card h3 { margin: 0 0 6px; }
.pwd-card p { color: #888; font-size: 14px; margin: 0 0 12px; }
.pwd-card .text-input { text-align: center; letter-spacing: 6px; font-size: 20px; margin-bottom: 12px; }
.pwd-actions { display: flex; gap: 10px; }
.pwd-actions .btn { flex: 1; }
.pwd-err { color: var(--coral); font-weight: 700; min-height: 20px; margin: 8px 0 0; }

/* 旁观标识 */
.spec-banner {
  background: var(--purple);
  color: #fff;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  padding: 6px 14px;
  font-size: 14px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .seats-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .seat-card .avatar { width: 38px; height: 38px; font-size: 21px; line-height: 32px; }
  .home-rooms { max-height: 260px; }
  .emoji-panel { bottom: 74px; }
}


/* ========== 创建房间弹窗：radio 房型 ========== */
.create-card { max-width: 360px; text-align: left; }
.create-card h3 { text-align: center; margin-bottom: 12px; }

.radio-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.radio-pill {
  flex: 1;
  cursor: pointer;
}
.radio-pill input { display: none; }
.radio-pill span {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 10px 6px;
  background: #fff;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
.radio-pill input:checked + span {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--shadow);
}
.radio-pill span:active { transform: scale(0.96); }


/* ========== 修复：表情符号不跟随闲聊气泡斜体 ========== */
.msg-sticker {
  font-style: normal;
  display: inline-block;
}


/* ========== 闲聊房：房主操作 ========== */
.seat-op {
  position: absolute;
  bottom: -8px;
  right: -6px;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
}
.seat-card { overflow: visible; }

.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  font-size: 13px;
  font-weight: 700;
}
.aud-chip.offline { opacity: 0.5; filter: grayscale(1); }
.aud-op {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  margin-left: 4px;
  cursor: pointer;
  font-family: inherit;
}
.aud-op.danger { background: var(--coral); }


/* ========== 音乐：唱片组件 ========== */
.vinyl {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 0 3px 0 var(--shadow);
  flex-shrink: 0;
}
.vinyl-disc {
  font-size: 20px;
  display: inline-block;
}
.vinyl.playing .vinyl-disc {
  animation: vinyl-spin 2s linear infinite;
}
@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.vinyl-title {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-online {
  font-size: 12px;
  color: #888;
  font-weight: 700;
  flex-shrink: 0;
}

/* 房主徽标 */
.role-badge {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ========== 点歌台面板 ========== */
.song-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 96vw);
  max-height: 72vh;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 0 var(--shadow);
  z-index: 130;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}
.song-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.song-panel-head .panel-title { font-weight: 900; font-size: 16px; flex-shrink: 0; }
.song-panel-head .text-input { flex: 1; padding: 8px 12px; font-size: 14px; }
.queue-title { font-size: 12px; color: #999; font-weight: 700; margin: 6px 0 4px; }

.song-queue, .song-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.song-queue { max-height: 150px; }
.song-list { flex: 1; max-height: 30vh; }

.song-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #eee4d0;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 14px;
}
.song-row .s-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-row .s-size { font-size: 12px; color: #aaa; flex-shrink: 0; }
.song-row.playing { border-color: var(--yellow-dark); background: #fff8e1; }
.song-row.playing .s-name { color: #e6a800; }
.song-row .s-btn {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.song-row .s-btn.gray { background: #ddd; color: #777; }

.player-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  margin: 8px 0;
}
.player-bar .mini-btn { box-shadow: none; padding: 4px 10px; }
.pl-progress {
  flex: 1;
  height: 10px;
  background: #eee4d0;
  border-radius: 999px;
  overflow: hidden;
}
#pl-bar {
  height: 100%;
  width: 0%;
  background: var(--yellow);
  transition: width 0.5s linear;
}
#pl-time { font-size: 11px; color: #888; font-weight: 700; flex-shrink: 0; }
#pl-vol { width: 70px; accent-color: var(--coral); }

@media (max-width: 480px) {
  .song-panel { max-height: 78vh; }
  #pl-vol { display: none; }
}


/* ========== 闲聊房顶栏：单行图标化 ========== */
.chatroom-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game-top-right {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.game-top-right .mini-btn {
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1;
}
.game-top { flex-wrap: nowrap; }


/* ========== 闲聊房顶栏防截断 & 禁麦位置 ========== */
.chatroom-code {
  flex-shrink: 0;
}
.chatroom-title #chatroom-subject {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stage-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#chat-pwd {
  letter-spacing: 3px;
  flex-shrink: 0;
}


/* 禁麦按钮单行显示 */
#chat-mute-all {
  white-space: nowrap;
  flex-shrink: 0;
}


/* ========== 席位麦克风状态与说话动效 ========== */
.mic-state {
  position: absolute;
  bottom: -8px;
  left: -6px;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 1px 6px;
  background: #eee;
  color: #888;
  white-space: nowrap;
}
.mic-state.on {
  background: #d3f9d8;
  color: #2f9e44;
}

.seat-card.speaking {
  border-color: #2f9e44;
}
.seat-card.speaking .avatar {
  animation: avatar-ring 1.2s ease-out infinite;
}
@keyframes avatar-ring {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.7); }
  100% { box-shadow: 0 0 0 14px rgba(47, 158, 68, 0); }
}


/* ========== 游戏顶栏：窄屏自动换行防挤压 ========== */
.game-top {
  flex-wrap: wrap;
  row-gap: 6px;
}
.my-word {
  white-space: nowrap;
  flex-shrink: 0;
}
.game-top-right .mini-btn.bgm-btn {
  padding: 4px 8px;
  font-size: 15px;
}
.round-info {
  white-space: nowrap;
  flex-shrink: 0;
}


/* ========== 大厅排版修复：头部单行、按钮不折行 ========== */
.lobby-header {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.room-code-box {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lobby-header .mini-btn,
.me-row .mini-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.me-row .text-input {
  min-width: 0;
  flex: 1;
}
@media (max-width: 480px) {
  .room-code {
    letter-spacing: 3px;
    font-size: 20px;
    padding: 2px 10px;
  }
}

/* ========== 台下二级菜单 ========== */
.aud-menu {
  position: fixed;
  z-index: 140;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.am-title {
  font-weight: 700;
  font-size: 14px;
  padding: 2px 6px 6px;
  border-bottom: 2px dashed #eee4d0;
}
.am-btn {
  font-family: inherit;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.am-btn.danger { background: var(--coral); }
.am-btn.royal { background: var(--purple); }

/* 房主可点击的座位卡片：悬停提示可操作 */
.seat-card.menuable {
  cursor: pointer;
}
.seat-card.menuable:hover {
  outline: 3px solid var(--yellow);
  transform: translateY(-2px);
}
.am-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.am-btn.selected { outline: 3px solid var(--yellow); }

/* ========== 解散投票条 ========== */
.dissolve-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #ffe3e3;
  border: 3px solid var(--coral);
  border-radius: 16px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.db-text {
  flex: 1;
  min-width: 200px;
}


/* ========== 大厅头部重设计 ========== */
.lobby-head {
  margin-bottom: 14px;
}
.lh-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lh-subject {
  font-size: 22px;
  font-weight: 900;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lh-code {
  background: var(--ink);
  color: var(--yellow);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
  padding: 4px 10px;
  border-radius: 10px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--shadow);
  font-family: inherit;
  padding: 0;
  flex-shrink: 0;
}
.icon-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--shadow);
}
.icon-btn.accent { background: var(--teal); }
.icon-btn.danger { background: var(--coral); }
.lh-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 26px;
}
@media (max-width: 480px) {
  .lh-subject { font-size: 18px; }
  .lh-code { font-size: 15px; letter-spacing: 2px; }
  .icon-btn { width: 32px; height: 32px; font-size: 14px; }
}


/* ========== 点歌台控制条：小屏换行，音量滑块保持可见 ========== */
@media (max-width: 480px) {
  .player-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .pl-progress {
    flex-basis: 100%;
    order: 5;
  }
  #pl-vol {
    display: block !important;
    flex: 1;
    min-width: 90px;
  }
}


/* ========== 点歌台控制条：两行式重排 ========== */
.player-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px;
}
.pb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.pb-vol-icon {
  font-size: 15px;
  flex-shrink: 0;
}
#pl-vol {
  flex: 1;
  min-width: 0;
  accent-color: var(--coral);
}
.pb-progress-row .pl-progress {
  flex: 1;
}


/* ========== 语音转写开关 ========== */
.stt-btn {
  transition: transform 0.1s, background 0.15s, opacity 0.15s;
}
.stt-btn.off {
  opacity: 0.45;
  filter: grayscale(1);
}
.stt-btn:not(.off) {
  background: var(--yellow);
}


/* 修复：去掉闲聊气泡的表情前缀（部分设备渲染为不可见字形造成大片空白） */
.msg.chat .msg-text::before {
  content: none;
}

/* 修复：气泡宽度跟随文字收缩，不再占满整行造成大片空白（昵称行比气泡文字长时尤其明显） */
.msg .msg-text {
  display: inline-block;
  text-align: left;
}
.msg .msg-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.msg.mine .msg-body {
  align-items: flex-end;
}


/* ========== 页脚：ICP 备案信息 ========== */
.page-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(43, 43, 58, 0.55);
  background: rgba(255, 255, 255, 0.6);
  border-top: 2px solid rgba(43, 43, 58, 0.12);
  padding: 4px 8px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.page-footer p { margin: 0; }
.page-footer a { color: inherit; text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

/* 为底部固定页脚预留空间，避免遮挡各视图底部内容 */
.view { padding-bottom: 34px; }
#view-game, #view-chatroom { padding-bottom: 34px; }
.game-wrap {
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
}