/* =========================================================
 * 骰子電玩城 — 線上對戰專用樣式（建立在 style.css 之上）
 * ========================================================= */
.hidden { display: none !important; }

.chip {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.room-chip { background: #e5dbff; }
.timer-chip { background: #d3f9d8; }
.timer-chip.warn { background: #ffe3e3; color: var(--loss); animation: pulse 1s infinite; }
.conn-chip.bad { background: #ffe3e3; color: var(--loss); }

.conn-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 16px 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #ffe3e3;
  color: var(--loss);
  font-weight: 800;
  text-align: center;
}

/* 進入畫面與大廳 */
.screen.setup-card, #entryScreen, #lobbyScreen { display: flex; justify-content: center; padding: 0 16px 32px; }
#entryScreen .setup-card, #lobbyScreen .setup-card { animation: none; max-height: none; }
.char-cards.six { grid-template-columns: repeat(3, 1fr); }
.char-card:disabled { cursor: not-allowed; }
.char-card.taken { opacity: .45; filter: grayscale(.7); }
.char-cards.compact .char-card { padding: 8px; font-size: 13px; }
.char-cards.compact .big-avatar { width: 44px; height: 44px; font-size: 26px; }
.char-cards.compact .skill-box { font-size: 11px; }

.entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.entry-box { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); text-align: center; }
.entry-box h3 { margin: 0 0 6px; text-align: center; }
.entry-box .name-input { margin: 0 auto 8px; }
.code-input { text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: 800; }
.resume-box { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px; margin: 8px 0; border-radius: 12px; background: #fff3bf; font-weight: 700; }

.big-code { display: inline-block; padding: 2px 14px; border-radius: 12px; background: var(--ink); color: #ffe066; letter-spacing: 6px; font-family: Consolas, monospace; }
.share { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.share-link { flex: 1; min-width: 200px; max-width: 420px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; font-size: 13px; }

.seat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.seat { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; border-left: 8px solid var(--pc); box-shadow: var(--shadow); text-align: left; }
.seat.me { box-shadow: 0 0 0 3px #ffd43b, var(--shadow); }
.seat-name { flex: 1; display: flex; flex-direction: column; }
.seat-name small { color: var(--muted); }
.seat-status { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.badge.wait { background: #adb5bd; }
.name-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.name-row .name-input { flex: 1; }
.turn-options { display: flex; gap: 8px; }
.lobby-hint { margin: 14px 0 0; font-weight: 700; color: var(--primary-dark); }

@media (max-width: 700px) {
  .char-cards.six { grid-template-columns: 1fr 1fr; }
  .entry-actions { grid-template-columns: 1fr; }
  .char-card .skill-box span { display: none; }
}
@media (max-width: 600px) {
  .char-cards.six .char-card { flex-direction: column; text-align: center; justify-content: center; }
  .char-cards.six .char-card p { display: none; }
  .chip { font-size: 12px; padding: 3px 8px; }
  .big-code { letter-spacing: 3px; }
}

/* ---------- 迷因卡牌 ---------- */
.card-bar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.card-empty { font-size: 12px; color: #c9c2e8; }
.meme-card {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 74px; padding: 5px 8px 4px; border: 0; border-radius: 10px;
  background: #fff; color: var(--ink); cursor: pointer; font-family: inherit;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); border-top: 4px solid #adb5bd;
}
.meme-card .mc-icon { font-size: 18px; line-height: 1; }
.meme-card .mc-name { font-size: 12px; font-weight: 800; }
.meme-card .mc-kind { font-size: 10px; color: var(--muted); }
.meme-card.kind-active { border-top-color: var(--primary); }
.meme-card.kind-defense, .meme-card.kind-counter { border-top-color: #74c0fc; background: #eef7ff; }
.meme-card.usable { animation: pulse 1.4s infinite; }
.card-info .ci-desc { font-size: 16px; font-weight: 700; }
.card-info th { width: 80px; color: var(--muted); }
.banner-card { background: #ffb703; box-shadow: 0 6px 0 #b07a00; }

/* ---------- 迷因台詞列（放在場景上方，不遮住角色／土地／按鈕） ---------- */
.meme-bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; margin-bottom: 8px; padding: 4px 6px 4px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff;
  opacity: .35; transition: opacity .25s, background .25s;
}
.meme-bar.show { opacity: 1; background: #fff7d6; color: var(--ink); }
.meme-bar.off { display: none; }
.meme-text { flex: 1; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meme-bar:not(.show) .meme-text::before { content: '💬 迷因台詞會顯示在這裡'; font-weight: 400; font-size: 12px; }
.meme-who { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; color: #fff; font-size: 12px; }
.meme-close { border: 0; background: transparent; font-size: 16px; cursor: pointer; color: inherit; padding: 4px 8px; border-radius: 8px; }
.meme-bar:not(.show) .meme-close { visibility: hidden; }
@media (max-width: 600px) {
  .meme-text { font-size: 13px; white-space: normal; }
  .meme-card { min-width: 64px; padding: 4px 6px; }
}

/* ---------- 聲音設定面板 ---------- */
.sound-panel { position: fixed; top: 56px; right: 14px; z-index: 70; width: min(320px, calc(100vw - 28px)); padding: 12px 14px; border-radius: 16px; background: #fffaf0; color: #5a3a0a; box-shadow: 0 6px 0 #e0a42a, 0 10px 24px rgba(0, 0, 0, .2); }
.sound-panel[hidden] { display: none; }
.sp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sp-close { border: 0; background: transparent; font-size: 16px; cursor: pointer; color: inherit; }
.sp-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 8px; margin: 8px 0; font-weight: 800; font-size: 14px; }
.sp-row input[type=range] { width: 100%; accent-color: #ff922b; }
.sp-mute { border: 0; border-radius: 10px; padding: .3em .6em; background: #fff; box-shadow: 0 2px 0 #e0c9a6; font: inherit; font-size: 12px; font-weight: 800; color: inherit; cursor: pointer; white-space: nowrap; }
.sp-mute.on { background: #ffe3e3; color: #c92a2a; }
.sound-panel .hint { margin: 6px 0 0; font-size: 12px; }
/* 卡片分類色（卡面上緣） */
.meme-card.group-move { border-top-color: #ff922b; }
.meme-card.group-dice { border-top-color: #f06595; }
.meme-card.group-money { border-top-color: #fab005; }
.meme-card.group-card { border-top-color: #9775fa; }
.meme-card.group-attack { border-top-color: #fa5252; background: #fff5f5; }
.meme-card.group-defense { border-top-color: #3bc9db; background: #eefcff; }
.meme-card.group-land { border-top-color: #40c057; }
.meme-card.group-status { border-top-color: #fcc419; }