.room-config{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.room-config label,.room-join label{display:grid;gap:8px;color:var(--muted)}.room-config select,.room-join input{width:100%;border:1px solid var(--line,#484342);border-radius:8px;padding:10px;background:#252a33;color:#f5ecd8;font:inherit}.room-join{margin-top:26px;padding-top:22px;border-top:1px solid var(--line,#484342)}.room-join>div{display:flex;gap:10px;margin-top:8px}.room-join input{min-width:0;letter-spacing:.2em}.room-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}.room-seat{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 8px;border:1px solid #4d4840;border-radius:12px;min-width:0}.room-seat b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-seat small,.room-seat>span:last-child{color:var(--muted);font-size:12px}.room-seat.is-ready{border-color:#64bfa6;background:#64bfa60b}.room-seat.is-ready>span:last-child{color:#64bfa6}.room-empty{font-size:30px;color:var(--muted)}.room-code{letter-spacing:.15em;color:var(--gold,#efbe62)}.room-actions{flex-wrap:wrap}.room-final p{display:flex;justify-content:space-between;gap:20px}.room-network-status{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:80;max-width:90vw;background:#242b38ed;color:#ffdb94;padding:10px 18px;border:1px solid #b99c62;border-radius:8px;font-size:14px;pointer-events:none;text-align:center}.room-network-status:empty{display:none}@media(max-width:600px){.room-seats{grid-template-columns:repeat(2,minmax(0,1fr))}.room-config{grid-template-columns:1fr}.room-actions .btn{flex:1;min-width:40%}.room-join>div{flex-wrap:wrap}}
.room-actions .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.modal-card .room-notice{color:var(--muted);line-height:1.7}.room-config select:disabled{opacity:.7}
/* 斷線處理面板：等待／同意電腦接手／解散 */
.room-pause{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:85;width:min(440px,calc(100vw - 32px));background:#1d222bf2;border:1px solid #b99c62;border-radius:14px;padding:22px 24px;color:#f5ecd8;box-shadow:0 20px 60px #0009}
.room-pause h2{margin:0 0 14px;font-size:20px}
.room-pause ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.room-pause-list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:#ffffff0a;border-radius:8px;padding:10px 12px}
.room-pause-list span{color:#ffdb94;font-size:13px;text-align:right}
.room-pause-hint{color:var(--muted,#a8a29a);font-size:13px;margin:14px 0}
.room-pause-votes li{display:flex;align-items:center;gap:8px;font-size:14px}
.room-pause-votes small{color:var(--muted,#a8a29a)}
.room-pause-votes b{margin-left:auto;font-weight:500;font-size:13px;padding:2px 8px;border-radius:6px;background:#ffffff12}
.room-pause-votes .vote-bot{background:#64bfa626;color:#8fe0c8}
.room-pause-votes .vote-dissolve{background:#ff6b6b26;color:#ff9c9c}
.room-pause-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.room-pause-actions .btn{flex:1;min-width:0;padding:10px 8px;font-size:14px}
/* 自動配對 */
.match-me{margin:4px 0 0;font-size:15px}.match-me b{color:var(--gold,#efbe62);font-size:18px}
.match-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.match-tier{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:1px solid #4d4840;border-radius:12px;background:#ffffff08;color:#f5ecd8;font:inherit;cursor:pointer;transition:border-color .2s,transform .15s,background .2s}
.match-tier:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold,#efbe62);background:#efbe620f}
.match-tier:disabled{opacity:.45;cursor:not-allowed}
.match-tier strong{font-size:18px;letter-spacing:.08em}
.match-stakes{font-weight:700;color:var(--gold,#efbe62)}
.match-tier small{color:var(--muted,#a8a29a);font-size:12px;display:flex;flex-wrap:wrap;gap:0 8px}
.match-tier em{font-style:normal;font-size:12px;color:#8fe0c8}
.match-tier:disabled em{color:#ff9c9c}
.tier-rookie{border-left:4px solid #64bfa6}.tier-normal{border-left:4px solid #6ea8ff}.tier-expert{border-left:4px solid #efbe62}.tier-master{border-left:4px solid #ff6b7d}
.match-wait{display:grid;justify-items:center;gap:6px;margin:20px 0;text-align:center}.match-wait p{margin:0}
.match-spinner{width:42px;height:42px;border-radius:50%;border:3px solid #ffffff1a;border-top-color:var(--gold,#efbe62);animation:match-spin 1s linear infinite;margin-bottom:8px}
@keyframes match-spin{to{transform:rotate(360deg)}}
.match-rating{font-size:16px;text-align:center;margin:16px 0}.match-rating b{font-size:20px}
.match-rating .up{color:#8fe0c8;font-weight:700}.match-rating .down{color:#ff9c9c;font-weight:700}
.room-final p.is-me{color:var(--gold,#efbe62)}
@media(max-width:600px){.match-tiers{grid-template-columns:1fr}}

/* ---------- 牌桌聊天（P3-05） ----------
   按鈕與面板疊在對話框（z-index 20，等候室就是對話框）之上，等待與對局中都能用。 */
.chat-btn { position: fixed; left: 16px; bottom: 16px; z-index: 22; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 24px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); display: grid; place-items: center; }
.chat-btn:hover { filter: brightness(1.15); }
.chat-btn[aria-expanded="true"] { border-color: var(--gold); }
.chat-unread { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.chat-panel { position: fixed; left: 16px; bottom: 80px; z-index: 22; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-head b { flex: 1; }
.chat-close { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-link { background: none; border: 0; color: var(--blue); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.chat-link.danger { color: var(--red); }
.chat-people { padding: 8px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.chat-person { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chat-person .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-muted-tag { font-size: 12px; color: var(--muted); }
.chat-log { list-style: none; margin: 0; padding: 10px 12px; flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 88%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg .name { font-size: 12px; color: var(--muted); }
.chat-msg .chat-text, .chat-msg .chat-phrase, .chat-msg .chat-hidden { background: var(--panel-2); border: 1px solid var(--line); padding: 6px 10px; border-radius: 10px; overflow-wrap: anywhere; font-size: 14px; }
.chat-msg.mine .chat-text, .chat-msg.mine .chat-phrase { background: rgba(247, 192, 74, .16); border-color: rgba(247, 192, 74, .35); }
.chat-hidden { color: var(--muted); font-style: italic; }
.chat-emoji { font-size: 28px; line-height: 1.1; }
.chat-sticker { width: 64px; height: 64px; display: block; }
.chat-tabs { display: flex; border-top: 1px solid var(--line); }
.chat-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 4px; cursor: pointer; font-size: 13px; }
.chat-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.chat-picker { max-height: 168px; overflow-y: auto; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.chat-chip:hover, .chat-sticker-btn:hover, .chat-emoji-btn:hover { border-color: var(--gold); }
.chat-sticker-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; cursor: pointer; }
.chat-sticker-btn .chat-sticker { width: 48px; height: 48px; }
.chat-motion { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.chat-emoji-group { width: 100%; }
.chat-emoji-label { margin: 2px 0 4px; font-size: 12px; color: var(--muted); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.chat-emoji-btn { background: none; border: 1px solid transparent; border-radius: 8px; font-size: 22px; padding: 2px 0; cursor: pointer; }
.chat-form { display: flex; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.chat-form .chat-send { flex: none; width: auto; min-width: 0; padding: 8px 14px; }
.chat-note { margin: 0; padding: 8px 12px 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.chat-error { color: var(--red); }
/* 座位旁的泡泡（牌局中） */
.chat-bubble { position: absolute; transform: translate(-50%, -120%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; max-width: 240px; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: chat-pop .2s ease-out; overflow-wrap: anywhere; }
.chat-bubble .chat-sticker { width: 72px; height: 72px; }
.chat-bubble .chat-emoji { font-size: 34px; }
@keyframes chat-pop { from { opacity: 0; transform: translate(-50%, -100%) scale(.8); } }
/* 動畫圖示的動作：單次 3 秒內播完；玩家可關閉，系統「減少動態」時一律不播 */
.motion-bounce { animation: sticker-bounce .6s ease-in-out 4; }
.motion-shake { animation: sticker-shake .4s ease-in-out 6; }
.motion-float { animation: sticker-float 1.2s ease-in-out 2; }
.motion-tilt { animation: sticker-tilt 1s ease-in-out 3; }
.motion-pulse { animation: sticker-pulse .7s ease-in-out 4; }
@keyframes sticker-bounce { 50% { transform: translateY(-12px); } }
@keyframes sticker-shake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes sticker-float { 50% { transform: translateY(6px); } }
@keyframes sticker-tilt { 50% { transform: rotate(-14deg); } }
@keyframes sticker-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .chat-sticker, .chat-bubble { animation: none !important; } }
@media (max-width: 700px) {
  .chat-btn { left: 10px; bottom: 10px; width: 44px; height: 44px; font-size: 20px; }
  .chat-panel { left: 8px; right: 8px; width: auto; bottom: 62px; max-height: calc(100vh - 90px); }
}