:root {
    --bg0: #080a1b;
    --bg1: #11153a;
    --panel: rgba(20, 23, 62, .68);
    --panel2: rgba(255, 255, 255, .075);
    --line: rgba(255, 255, 255, .14);
    --text: #f8f4ff;
    --muted: rgba(248, 244, 255, .62);
    --gold: #ffd76b;
    --orange: #ff9a16;
    --purple: #8a3ffc;
    --violet: #bb5cff;
    --green: #67ff58;
    --red: #ff5570;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -8%, rgba(125, 82, 255, .32), transparent 33%),
        radial-gradient(circle at 8% 25%, rgba(177, 74, 255, .28), transparent 26%),
        radial-gradient(circle at 92% 18%, rgba(255, 154, 22, .16), transparent 24%),
        linear-gradient(145deg, #050713 0%, #10133a 50%, #090816 100%);
}

button, select, input { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.2); }

.bg-orbs,
.bg-orbs::before,
.bg-orbs::after {
    position: fixed;
    pointer-events: none;
    content: "";
    inset: 0;
    z-index: -1;
}
.bg-orbs {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, #000 0 45%, transparent 80%);
}
.bg-orbs::before {
    width: 620px;
    height: 620px;
    left: -240px;
    top: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(144, 77, 255, .42), transparent 68%);
    filter: blur(16px);
    animation: floatOrb 8s ease-in-out infinite alternate;
}
.bg-orbs::after {
    width: 520px;
    height: 520px;
    right: -180px;
    bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 164, 47, .24), transparent 70%);
    filter: blur(18px);
    animation: floatOrb 9s ease-in-out infinite alternate-reverse;
}

.page {
    width: min(1500px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 28px;
}

.glass-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

.topbar {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(300px, 560px) minmax(72px, 150px);
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.brand-card { padding: 18px 22px; }
.brand-title { font-size: 23px; font-weight: 900; letter-spacing: .02em; }
.brand-sub { margin-top: 8px; color: var(--muted); }
.status-card {
    justify-self: center;
    width: min(560px, 100%);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border-radius: 22px;
}
.status-card div { text-align: center; min-width: 84px; }
.status-card b { display: block; color: var(--gold); font-size: 29px; line-height: 1.1; }
.status-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.status-card i { width: 1px; height: 34px; background: rgba(255,255,255,.16); }
.icon-btn,
.ghost-btn,
.primary-btn {
    border-radius: 16px;
    padding: 12px 18px;
    color: var(--text);
    font-weight: 900;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.icon-btn { justify-self: end; min-width: 88px; }
.ghost-btn:hover:not(:disabled), .icon-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.13); }
.primary-btn {
    color: #fff;
    background: linear-gradient(135deg, #713bff, #c247ff);
    box-shadow: 0 12px 28px rgba(126, 71, 255, .28), inset 0 1px 0 rgba(255,255,255,.34);
}
.primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(126, 71, 255, .36); }
.full-btn { width: 100%; }

.lobby-grid {
    min-height: 580px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 18px;
    align-items: stretch;
}
.welcome-card {
    grid-row: span 2;
    padding: clamp(28px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.welcome-card::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -80px;
    bottom: -120px;
    border-radius: 50%;
    border: 2px solid rgba(143, 92, 255, .38);
    box-shadow: 0 0 42px rgba(143, 92, 255, .38), inset 0 0 42px rgba(143, 92, 255, .16);
}
.welcome-card::after {
    content: "🎲";
    position: absolute;
    right: 72px;
    bottom: 70px;
    font-size: 118px;
    filter: drop-shadow(0 0 28px rgba(255, 88, 109, .48));
    animation: diceFloat 2.6s ease-in-out infinite;
}
.badge {
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--gold);
    background: rgba(255, 215, 107, .1);
    border: 1px solid rgba(255, 215, 107, .24);
    font-weight: 900;
    letter-spacing: .12em;
    font-size: 12px;
}
h1 { margin: 22px 0 14px; font-size: clamp(38px, 6vw, 74px); line-height: 1; max-width: 760px; }
.welcome-card p { max-width: 680px; color: rgba(255,255,255,.72); line-height: 1.8; font-size: 17px; }
.rule-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.rule-row span {
    padding: 10px 14px;
    border-radius: 16px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.entry-card { padding: 24px; }
.section-title { margin-bottom: 14px; font-weight: 900; font-size: 18px; letter-spacing: .02em; }
label { display: block; color: rgba(255,255,255,.76); font-size: 13px; margin-bottom: 14px; }
select, input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.14);
    outline: none;
    border-radius: 16px;
    color: #fff;
    background: rgba(9, 11, 30, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
input::placeholder { color: rgba(255,255,255,.35); }
select:focus, input:focus { border-color: rgba(175, 105, 255, .8); box-shadow: 0 0 0 4px rgba(142, 80, 255, .18); }

.room-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
}
.game-stage {
    min-height: 660px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.game-stage::before {
    content: "";
    position: absolute;
    left: 50%; top: 48%;
    width: min(940px, 92vw);
    height: 460px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(139, 89, 255, .28);
    box-shadow: 0 0 56px rgba(139, 89, 255, .28), inset 0 0 70px rgba(139, 89, 255, .12);
    pointer-events: none;
}
.room-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
}
.room-head strong { display: block; margin-top: 4px; font-size: 26px; color: var(--gold); letter-spacing: .08em; }
.muted { display: block; color: var(--muted); font-size: 13px; }

.waiting-panel {
    position: relative;
    z-index: 2;
    min-height: 520px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    gap: 14px;
}
.waiting-panel h2 { margin: 0; font-size: 34px; }
.waiting-dice { display: flex; gap: 12px; margin-bottom: 8px; }
.waiting-dice span {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, #ff4859, #a70620);
    box-shadow: 0 12px 30px rgba(255, 64, 84, .32);
    animation: waitingBounce 1s ease-in-out infinite;
}
.waiting-dice span:nth-child(2) { animation-delay: .12s; }
.waiting-dice span:nth-child(3) { animation-delay: .24s; }
.tip { color: var(--muted); line-height: 1.7; margin: 0; max-width: 640px; }

.game-panel { position: relative; z-index: 2; }
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.stats-row div {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(5, 7, 24, .56);
    border: 1px solid rgba(255,255,255,.08);
}
.stats-row span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.stats-row b { font-size: 18px; color: #fff; }

.table-area {
    position: relative;
    min-height: 520px;
    padding: 16px 0 0;
}
.center-board {
    width: min(430px, 84%);
    margin: 18px auto 0;
    text-align: center;
}
.bid-box {
    padding: 16px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(25, 30, 84, .76), rgba(12, 13, 37, .66));
    border: 1px solid rgba(155, 104, 255, .28);
    box-shadow: 0 0 38px rgba(120, 80, 255, .16);
}
.current-bid {
    margin-top: 8px;
    color: var(--gold);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 1000;
    line-height: 1.18;
    text-shadow: 0 0 18px rgba(255, 215, 107, .32);
}
.mini-log-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
    text-align: left;
    background: rgba(4, 6, 22, .42);
    border: 1px solid rgba(255,255,255,.08);
}
.log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 210px;
    overflow: auto;
    padding-right: 4px;
}
.log-line {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    animation: logIn .28s ease both;
}
.log-line:first-child { color: #fff; background: rgba(137, 84, 255, .18); }

.players-orbit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 2;
}
.player-card {
    min-height: 94px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    background: rgba(10, 12, 36, .68);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 38px rgba(0,0,0,.22);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.player-card.active {
    border-color: rgba(255, 215, 107, .8);
    box-shadow: 0 0 0 1px rgba(255, 215, 107, .35), 0 0 30px rgba(255, 215, 107, .18);
    animation: activePulse 1.15s ease-in-out infinite alternate;
}
.avatar {
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 1000;
    color: #fff;
    background: conic-gradient(from 210deg, #845dff, #ff4bb6, #ffb84d, #845dff);
    box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 0 22px rgba(132, 93, 255, .38);
}
.player-info { min-width: 0; }
.player-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 900; }
.player-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-name em, .state-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    color: #170e28;
    background: var(--gold);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}
.player-meta {
    margin-top: 5px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
}
.penalty { color: var(--gold); }
.state-chip.offline { color: rgba(255,255,255,.74); background: rgba(255,255,255,.12); }
.player-card .dice-row { gap: 4px; margin-top: 8px; }

.dice-tray {
    width: min(760px, 94%);
    margin: 18px auto 0;
    padding: 18px 20px 20px;
    border-radius: 36px;
    text-align: center;
    background: linear-gradient(180deg, rgba(118, 71, 255, .24), rgba(24, 20, 62, .64));
    border: 1px solid rgba(180, 112, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 44px rgba(133, 82, 255, .22);
}
.turn-hint {
    min-height: 22px;
    margin-bottom: 8px;
    color: var(--gold);
    font-weight: 800;
    text-shadow: 0 0 16px rgba(255,215,107,.28);
}
.dice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.die {
    width: 76px;
    height: 76px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 15px 18px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(255,48,62,.22));
    transform-origin: 50% 62%;
    animation: dicePop .42s cubic-bezier(.2, 1.5, .35, 1) both;
}
.my-dice .die { width: clamp(62px, 8vw, 96px); height: clamp(62px, 8vw, 96px); }
.die.hidden-die { filter: drop-shadow(0 13px 16px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(143,92,255,.24)); }
.die.roll { animation: diceRoll .65s cubic-bezier(.2, .8, .18, 1) both; }
.player-card .die { width: 26px; height: 26px; }

.side-panel { padding: 20px; }
.rule-list { display: grid; gap: 10px; }
.rule-list p {
    margin: 0;
    padding: 12px 13px;
    border-radius: 14px;
    color: rgba(255,255,255,.76);
    background: rgba(0,0,0,.18);
    line-height: 1.6;
    font-size: 13px;
}

.action-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.35fr minmax(160px, 1fr) minmax(140px, .85fr) auto;
    align-items: end;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    position: sticky;
    bottom: 14px;
    z-index: 4;
}
.control-item label { margin: 0 0 8px; font-weight: 800; color: rgba(255,255,255,.74); }
.action-panel select { margin: 0; min-height: 48px; }
.switch-box {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(9, 11, 30, .72);
}
.switch-box input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui {
    width: 54px; height: 30px; border-radius: 999px;
    position: relative;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.28);
    transition: background .18s ease;
}
.switch-ui::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    transition: transform .18s ease;
}
.switch-box input:checked + .switch-ui { background: linear-gradient(135deg, #1adf8f, #5dff6d); }
.switch-box input:checked + .switch-ui::before { transform: translateX(24px); }
.switch-text { font-weight: 900; color: rgba(255,255,255,.86); }
.switch-box input:checked ~ .switch-text::before { content: "已"; }
.switch-box input:checked ~ .switch-text { font-size: 0; }
.switch-box input:checked ~ .switch-text::after { content: "斋"; font-size: 15px; }

.action-btn {
    min-height: 72px;
    border-radius: 24px;
    color: #fff;
    font-size: 26px;
    font-weight: 1000;
    letter-spacing: .12em;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transform: translateX(-140%) skewX(-20deg);
}
.action-btn::after {
    content: "🎲";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    opacity: .74;
    font-size: 29px;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.4));
}
.action-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); }
.action-btn:hover:not(:disabled)::before { animation: shineSweep .8s ease; }
.action-btn span { position: relative; z-index: 1; text-shadow: 0 3px 0 rgba(0,0,0,.18), 0 0 18px rgba(255,255,255,.22); }
.bid-action {
    background: linear-gradient(135deg, #6e2cff 0%, #bb43ff 58%, #6f42ff 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 36px rgba(132, 57, 255, .34), inset 0 2px 0 rgba(255,255,255,.32);
}
.open-action {
    background: linear-gradient(135deg, #ff9a16 0%, #ffbd31 54%, #ff7316 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 36px rgba(255, 154, 22, .3), inset 0 2px 0 rgba(255,255,255,.42);
}
.open-action::after { content: "💥"; }
.action-btn.is-burst { animation: buttonBurst .42s ease both; }
.next-round { min-height: 58px; align-self: center; white-space: nowrap; }

.message { color: var(--gold); }
.hidden { display: none !important; }

.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(3, 5, 18, .72);
    backdrop-filter: blur(10px);
    z-index: 20;
}
.modal-content {
    width: min(480px, 100%);
    padding: 28px;
    text-align: center;
    animation: modalIn .26s cubic-bezier(.2, 1.2, .3, 1) both;
}
.modal-content h2 { margin: 8px 0 12px; font-size: 32px; }
.modal-content p { color: rgba(255,255,255,.78); line-height: 1.75; }
.modal-dice {
    width: 86px; height: 86px; margin: 0 auto;
    background: url('dice/dice-6.svg') center/contain no-repeat;
    animation: diceFloat 1.6s ease-in-out infinite;
}

@keyframes floatOrb { to { transform: translate3d(28px, -22px, 0) scale(1.04); } }
@keyframes diceFloat { 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes waitingBounce { 50% { transform: translateY(-14px) rotate(10deg); } }
@keyframes activePulse { to { transform: translateY(-2px); } }
@keyframes dicePop { from { opacity: 0; transform: translateY(18px) scale(.76) rotate(-9deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
@keyframes diceRoll { 0% { transform: translateX(-18px) rotate(-70deg) scale(.76); opacity: .2; filter: blur(1px) drop-shadow(0 15px 18px rgba(0,0,0,.38)); } 65% { transform: translateX(5px) rotate(18deg) scale(1.08); opacity: 1; } 100% { transform: translateX(0) rotate(0deg) scale(1); } }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shineSweep { to { transform: translateX(140%) skewX(-20deg); } }
@keyframes buttonBurst { 0%,100% { transform: scale(1); } 45% { transform: scale(.96); filter: brightness(1.2); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1180px) {
    .room-layout { grid-template-columns: 1fr; }
    .side-panel { display: none; }
    .action-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); position: static; }
    .action-btn { min-height: 66px; }
    .next-round { grid-column: span 2; }
}

@media (max-width: 860px) {
    .page { width: min(100% - 20px, 1500px); padding-top: 12px; }
    .topbar { grid-template-columns: 1fr; }
    .status-card { order: 2; width: 100%; gap: 10px; }
    .status-card div { min-width: 0; flex: 1; }
    .icon-btn { justify-self: stretch; }
    .lobby-grid { grid-template-columns: 1fr; min-height: auto; }
    .welcome-card { grid-row: auto; min-height: 420px; }
    .welcome-card::after { font-size: 80px; right: 30px; bottom: 42px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .players-orbit { grid-template-columns: 1fr 1fr; }
    .center-board { width: 100%; }
    .game-stage { padding: 12px; min-height: auto; }
    .table-area { min-height: auto; }
    .action-panel { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
    .target-control, .bid-action, .open-action, .next-round { grid-column: span 2; }
}

@media (max-width: 520px) {
    .brand-title { font-size: 20px; }
    .status-card { padding: 12px 10px; }
    .status-card b { font-size: 22px; }
    .room-head { align-items: stretch; flex-direction: column; }
    .players-orbit { grid-template-columns: 1fr; }
    .player-card { min-height: 82px; }
    .my-dice .die { width: 58px; height: 58px; }
    .dice-tray { width: 100%; padding: 14px 10px; }
    .current-bid { font-size: 30px; }
    .action-btn { min-height: 62px; font-size: 23px; }
}

/* 房间管理增强 */
.room-meta {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    letter-spacing: .02em;
}
.host-settings {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.host-settings label { margin-bottom: 12px; }
.host-settings select,
.host-settings input { padding: 11px 13px; border-radius: 14px; }
.settings-tip {
    margin: -2px 0 12px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1.55;
}
.rules-title { margin-top: 2px; }
.kick-btn {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -2px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255, 85, 112, .16);
    border: 1px solid rgba(255, 85, 112, .38);
    box-shadow: 0 0 18px rgba(255,85,112,.08);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.kick-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 85, 112, .28);
    border-color: rgba(255, 85, 112, .62);
}
.player-card .die {
    width: 26px;
    height: 26px;
    animation: playerDiceFloat 2.4s ease-in-out infinite;
}
.player-card .die:nth-child(2) { animation-delay: .12s; }
.player-card .die:nth-child(3) { animation-delay: .24s; }
.player-card .die:nth-child(4) { animation-delay: .36s; }
.player-card .die:nth-child(5) { animation-delay: .48s; }
.player-card .die:nth-child(6) { animation-delay: .60s; }
@keyframes playerDiceFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* 等待/游戏桌玩家分布增强 */
.table-shell {
    position: relative;
    z-index: 2;
    min-height: 590px;
    padding-top: 12px;
}
.table-shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(900px, 86%);
    height: 410px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(96, 78, 210, .18), transparent 62%);
    border: 1px solid rgba(139, 104, 255, .24);
    box-shadow: inset 0 0 55px rgba(120, 82, 255, .16), 0 0 36px rgba(120, 82, 255, .12);
    pointer-events: none;
}
.players-orbit {
    position: absolute;
    inset: 70px 12px 96px;
    display: block;
    z-index: 5;
    pointer-events: none;
}
.players-orbit .player-card {
    position: absolute;
    width: min(255px, 30%);
    pointer-events: auto;
    animation: cardFloat 3.2s ease-in-out infinite;
}
.players-orbit .player-card:nth-child(2n) { animation-delay: .18s; }
.players-orbit .player-card:nth-child(3n) { animation-delay: .34s; }
.player-card.is-me {
    border-color: rgba(139, 104, 255, .64);
    box-shadow: 0 0 0 1px rgba(139, 104, 255, .22), 0 16px 40px rgba(139,104,255,.18);
}
.player-card.is-offline {
    opacity: .68;
    filter: grayscale(.18);
}
.seat-0 { left: 3%; top: 2%; }
.seat-1 { left: 0; top: 39%; }
.seat-2 { left: 4%; bottom: 2%; }
.seat-3 { right: 3%; top: 2%; }
.seat-4 { right: 0; top: 39%; }
.seat-5 { right: 4%; bottom: 2%; }
.seat-6 { left: 39%; top: 0; }
.seat-7 { left: 39%; bottom: 0; }
.players-orbit.count-2 .seat-0 { left: 7%; top: 35%; }
.players-orbit.count-2 .seat-1 { left: auto; right: 7%; top: 35%; }
.players-orbit.count-3 .seat-0 { left: 6%; top: 28%; }
.players-orbit.count-3 .seat-1 { left: 50%; top: 0; transform: translateX(-50%); }
.players-orbit.count-3 .seat-2 { left: auto; right: 6%; top: 28%; bottom: auto; }
.players-orbit.count-4 .seat-0 { left: 6%; top: 14%; }
.players-orbit.count-4 .seat-1 { left: 6%; top: auto; bottom: 14%; }
.players-orbit.count-4 .seat-2 { left: auto; right: 6%; top: 14%; bottom: auto; }
.players-orbit.count-4 .seat-3 { right: 6%; top: auto; bottom: 14%; }
.players-orbit.count-5 .seat-0 { left: 4%; top: 9%; }
.players-orbit.count-5 .seat-1 { left: 0; top: 46%; }
.players-orbit.count-5 .seat-2 { left: 50%; top: 0; bottom: auto; transform: translateX(-50%); }
.players-orbit.count-5 .seat-3 { right: 0; top: 46%; }
.players-orbit.count-5 .seat-4 { right: 4%; top: 9%; }
.waiting-panel {
    position: relative;
    z-index: 3;
    min-height: 560px;
    padding: 150px 0 118px;
}
.waiting-panel::before {
    content: "房间玩家";
    position: absolute;
    left: 50%;
    top: 62px;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    font-weight: 900;
    background: rgba(105, 73, 255, .2);
    border: 1px solid rgba(159, 113, 255, .28);
    box-shadow: 0 0 20px rgba(139, 104, 255, .16);
}
.waiting-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.ready-btn.is-ready {
    color: #061a12;
    background: linear-gradient(135deg, #38ff9c, #92ff52);
    border-color: rgba(140,255,130,.66);
    box-shadow: 0 14px 32px rgba(73,255,137,.18), inset 0 1px 0 rgba(255,255,255,.38);
}
.game-panel {
    position: relative;
    z-index: 3;
}
.game-panel .stats-row,
.game-panel .center-board,
.game-panel .dice-tray {
    position: relative;
    z-index: 3;
}
.state-chip.online {
    color: #072014;
    background: linear-gradient(135deg, #37ff9a, #83ff54);
}
.state-chip.ready-chip {
    color: #092114;
    background: linear-gradient(135deg, #3cff9d, #80ff5d);
}
.state-chip.wait-chip {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.12);
}
.state-chip.host-chip,
.state-chip.current-chip {
    color: #1f1420;
    background: var(--gold);
}
.mini-dice-row {
    min-height: 28px;
}
.player-card .die,
.player-card .die.hidden-die {
    animation: playerDiceFloat 2.4s ease-in-out infinite !important;
    opacity: .92;
}
@keyframes cardFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -3px; }
}

@media (max-width: 1180px) {
    .table-shell { min-height: auto; padding-top: 0; }
    .table-shell::before { display: none; }
    .players-orbit {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
        pointer-events: auto;
    }
    .players-orbit .player-card {
        position: relative;
        inset: auto !important;
        width: auto;
        transform: none !important;
    }
    .waiting-panel {
        min-height: 360px;
        padding: 34px 10px 42px;
    }
    .waiting-panel::before { display: none; }
}

@media (max-width: 620px) {
    .players-orbit { grid-template-columns: 1fr; }
    .players-orbit .player-card { min-height: 90px; }
    .waiting-actions { flex-direction: column; align-items: stretch; }
    .waiting-actions button { width: 100%; }
}

/* 固定自己的信息 + 统一提示系统 */
.room-head {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(220px, auto) auto;
}
.self-card {
    justify-self: center;
    min-width: min(360px, 100%);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(126, 79, 255, .26), rgba(19, 23, 64, .72));
    border: 1px solid rgba(170, 118, 255, .36);
    box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 24px rgba(140, 88, 255, .16);
    overflow: hidden;
}
.self-card.self-turn {
    border-color: rgba(255, 215, 107, .72);
    box-shadow: 0 0 0 1px rgba(255,215,107,.24), 0 0 30px rgba(255,215,107,.22);
    animation: selfGlow 1.35s ease-in-out infinite alternate;
}
.self-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 1000;
    background: conic-gradient(from 210deg, #ffd76b, #b55cff, #4f7bff, #ffd76b);
    box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 22px rgba(255,215,107,.24);
}
.self-title {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    font-size: 15px;
    font-weight: 1000;
}
.self-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.self-title em {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    color: #1b1024;
    background: var(--gold);
}
.self-meta {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 12px;
}
.room-notice {
    position: relative;
    z-index: 8;
    width: min(620px, calc(100% - 26px));
    margin: 12px auto 0;
    padding: 11px 16px;
    border-radius: 999px;
    text-align: center;
    font-weight: 900;
    color: #fff;
    background: rgba(113, 72, 255, .24);
    border: 1px solid rgba(174, 123, 255, .42);
    box-shadow: 0 16px 34px rgba(0,0,0,.24), 0 0 30px rgba(126, 79, 255, .18);
    animation: noticeIn .28s cubic-bezier(.2, 1.25, .3, 1) both;
}
.room-notice-success {
    color: #effff7;
    background: rgba(39, 205, 126, .18);
    border-color: rgba(83, 255, 156, .38);
}
.room-notice-error {
    color: #fff4f5;
    background: rgba(255, 85, 112, .20);
    border-color: rgba(255, 85, 112, .44);
}
.toast-root {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 80;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 13px 15px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(22, 25, 70, .94), rgba(10, 12, 34, .92));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    animation: toastIn .28s cubic-bezier(.2, 1.3, .25, 1) both;
}
.toast span:last-child {
    min-width: 0;
    line-height: 1.45;
    font-weight: 800;
    word-break: break-word;
}
.toast-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #150d26;
    background: var(--gold);
    font-weight: 1000;
}
.toast-success .toast-icon { background: linear-gradient(135deg, #39ff9d, #8cff55); }
.toast-error .toast-icon { color: #fff; background: linear-gradient(135deg, #ff5570, #ff8e55); }
.toast-out { animation: toastOut .32s ease forwards; }
.players-orbit.count-0 { display: none; }
.players-orbit.count-1 .seat-0 { left: 50%; top: 2%; transform: translateX(-50%); }
.players-orbit.count-6 .seat-0 { left: 3%; top: 2%; }
.players-orbit.count-6 .seat-1 { left: 0; top: 39%; }
.players-orbit.count-6 .seat-2 { left: 4%; bottom: 2%; }
.players-orbit.count-6 .seat-3 { right: 3%; top: 2%; }
.players-orbit.count-6 .seat-4 { right: 0; top: 39%; }
.players-orbit.count-6 .seat-5 { right: 4%; bottom: 2%; }
.players-orbit.count-7 .seat-0 { left: 3%; top: 2%; }
.players-orbit.count-7 .seat-1 { left: 0; top: 39%; }
.players-orbit.count-7 .seat-2 { left: 4%; bottom: 2%; }
.players-orbit.count-7 .seat-3 { left: 50%; top: 0; transform: translateX(-50%); }
.players-orbit.count-7 .seat-4 { right: 3%; top: 2%; }
.players-orbit.count-7 .seat-5 { right: 0; top: 39%; }
.players-orbit.count-7 .seat-6 { right: 4%; bottom: 2%; left: auto; }
@keyframes selfGlow { to { transform: translateY(-1px); } }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(28px) scale(.96); } }

@media (max-width: 1180px) {
    .room-head { grid-template-columns: 1fr auto; }
    .self-card { grid-column: 1 / -1; justify-self: stretch; order: 3; }
}

@media (max-width: 620px) {
    .toast-root { top: 12px; right: 10px; left: 10px; width: auto; }
    .room-notice { width: 100%; border-radius: 18px; }
    .room-head { grid-template-columns: 1fr; }
    .self-card { min-width: 0; }
}

/* 响应式玩家座位优化：大屏使用网格座位，避免固定坐标在缩放时错位 */
@media (min-width: 1181px) {
    .table-shell {
        min-height: clamp(590px, 46vw, 690px);
        padding-inline: clamp(6px, 1vw, 18px);
    }

    .players-orbit {
        position: absolute;
        inset: 118px clamp(14px, 2vw, 32px) 104px;
        display: grid !important;
        grid-template-columns: minmax(188px, 260px) minmax(320px, 1fr) minmax(188px, 260px);
        grid-template-rows: auto minmax(94px, 1fr) minmax(94px, 1fr) auto;
        gap: 12px clamp(14px, 1.8vw, 28px);
        align-items: center;
        justify-items: center;
        z-index: 2;
        pointer-events: none;
    }

    .players-orbit.count-0 { display: none !important; }

    .players-orbit .player-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 260px;
        min-width: 0;
        justify-self: center;
        margin: 0;
        pointer-events: auto;
    }

    .players-orbit .seat-0 { grid-column: 2; grid-row: 1; }
    .players-orbit .seat-1 { grid-column: 1; grid-row: 2; justify-self: start; }
    .players-orbit .seat-2 { grid-column: 3; grid-row: 2; justify-self: end; }
    .players-orbit .seat-3 { grid-column: 1; grid-row: 3; justify-self: start; }
    .players-orbit .seat-4 { grid-column: 3; grid-row: 3; justify-self: end; }
    .players-orbit .seat-5 { grid-column: 1; grid-row: 1; justify-self: start; }
    .players-orbit .seat-6 { grid-column: 3; grid-row: 1; justify-self: end; }
    .players-orbit .seat-7 { grid-column: 2; grid-row: 4; }

    .players-orbit.count-1 .seat-0 {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .players-orbit.count-2 .seat-0 {
        grid-column: 1;
        grid-row: 2 / span 2;
        justify-self: start;
    }
    .players-orbit.count-2 .seat-1 {
        grid-column: 3;
        grid-row: 2 / span 2;
        justify-self: end;
    }

    .players-orbit.count-3 .seat-0 {
        grid-column: 1;
        grid-row: 2 / span 2;
        justify-self: start;
    }
    .players-orbit.count-3 .seat-1 {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    .players-orbit.count-3 .seat-2 {
        grid-column: 3;
        grid-row: 2 / span 2;
        justify-self: end;
    }

    .players-orbit.count-4 .seat-0 {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .players-orbit.count-4 .seat-1 {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
    .players-orbit.count-4 .seat-2 {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
    .players-orbit.count-4 .seat-3 {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }

    .players-orbit.count-5 .seat-0 {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .players-orbit.count-5 .seat-1 {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    .players-orbit.count-5 .seat-2 {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
    .players-orbit.count-5 .seat-3 {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
    .players-orbit.count-5 .seat-4 {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }

    .players-orbit.count-6 .seat-0 {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .players-orbit.count-6 .seat-1 {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    .players-orbit.count-6 .seat-2 {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
    .players-orbit.count-6 .seat-3 {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
    .players-orbit.count-6 .seat-4 {
        grid-column: 2;
        grid-row: 4;
        justify-self: center;
    }
    .players-orbit.count-6 .seat-5 {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }

    .players-orbit.count-7 .seat-0 {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
    .players-orbit.count-7 .seat-1 {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .players-orbit.count-7 .seat-2 {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    .players-orbit.count-7 .seat-3 {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .players-orbit.count-7 .seat-4 {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
    .players-orbit.count-7 .seat-5 {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
    }
    .players-orbit.count-7 .seat-6 {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }

    .waiting-panel {
        min-height: clamp(520px, 44vw, 650px);
        padding: 178px 0 132px;
    }

    .game-panel .stats-row,
    .game-panel .center-board,
    .game-panel .dice-tray {
        position: relative;
        z-index: 3;
    }
}

@media (max-width: 1180px) {
    .players-orbit {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: stretch;
    }

    .players-orbit .player-card {
        max-width: none;
        width: 100%;
        animation: none;
    }
}

@media (max-width: 760px) {
    .players-orbit {
        display: flex !important;
        gap: 12px;
        overflow-x: auto;
        padding: 4px 2px 12px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .players-orbit .player-card {
        flex: 0 0 min(285px, 86vw);
        scroll-snap-align: start;
    }
}

/* v-next: stable left/right player layout + overlay room notices
   解决缩放后玩家卡片错位，以及房间提示条顶动页面的问题。 */
.game-stage {
    overflow: clip;
}

.table-shell {
    min-height: clamp(600px, 54vw, 760px) !important;
    padding: 16px 0 140px !important;
}

.table-shell::before {
    width: min(780px, 58%) !important;
    height: clamp(340px, 38vw, 490px) !important;
}

.players-orbit,
.players-orbit.waiting-orbit,
.players-orbit.playing-orbit {
    position: absolute !important;
    inset: 74px 18px 126px !important;
    display: grid !important;
    grid-template-columns: minmax(190px, 270px) minmax(300px, 1fr) minmax(190px, 270px) !important;
    grid-auto-rows: minmax(92px, max-content) !important;
    align-content: center !important;
    justify-content: stretch !important;
    gap: 12px 24px !important;
    overflow: visible !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
}

.players-orbit.count-0 {
    display: none !important;
}

.players-orbit .player-card,
.players-orbit .player-card[class*="seat-"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 270px !important;
    min-height: 92px !important;
    margin: 0 !important;
    justify-self: stretch !important;
    pointer-events: auto !important;
    animation: cardFloat 3.2s ease-in-out infinite !important;
}

.players-orbit .player-card:nth-child(odd) {
    grid-column: 1 !important;
    justify-self: start !important;
}

.players-orbit .player-card:nth-child(even) {
    grid-column: 3 !important;
    justify-self: end !important;
}

.players-orbit .player-card:nth-child(1),
.players-orbit .player-card:nth-child(2) { grid-row: 1 !important; }
.players-orbit .player-card:nth-child(3),
.players-orbit .player-card:nth-child(4) { grid-row: 2 !important; }
.players-orbit .player-card:nth-child(5),
.players-orbit .player-card:nth-child(6) { grid-row: 3 !important; }
.players-orbit .player-card:nth-child(7),
.players-orbit .player-card:nth-child(8) { grid-row: 4 !important; }

.players-orbit.count-1 .player-card:nth-child(1) {
    grid-column: 1 !important;
    width: 100% !important;
    justify-self: start !important;
}

.waiting-panel,
.game-panel {
    position: relative !important;
    z-index: 4 !important;
}

.waiting-panel {
    min-height: clamp(500px, 46vw, 640px) !important;
    padding: clamp(112px, 12vw, 160px) min(300px, 25vw) clamp(106px, 10vw, 140px) !important;
}

.game-panel .stats-row,
.game-panel .center-board,
.game-panel .dice-tray {
    position: relative !important;
    z-index: 5 !important;
}

.game-panel .center-board {
    width: min(430px, calc(100% - 600px)) !important;
    min-width: 340px !important;
}

.game-panel .dice-tray {
    width: min(680px, calc(100% - 520px)) !important;
    min-width: 360px !important;
}

.room-notice {
    position: absolute !important;
    left: 50% !important;
    top: 86px !important;
    transform: translateX(-50%) !important;
    z-index: 80 !important;
    margin: 0 !important;
    width: min(640px, calc(100% - 48px)) !important;
    pointer-events: none !important;
    animation: noticeFloatIn .26s cubic-bezier(.2, 1.25, .3, 1) both !important;
}

@keyframes noticeFloatIn {
    from { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 1280px) {
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        grid-template-columns: minmax(170px, 245px) minmax(260px, 1fr) minmax(170px, 245px) !important;
        gap: 10px 16px !important;
        inset: 78px 12px 126px !important;
    }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] {
        max-width: 245px !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        padding: 10px !important;
    }
    .players-orbit .avatar {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    .game-panel .center-board {
        width: min(390px, calc(100% - 520px)) !important;
        min-width: 310px !important;
    }
    .game-panel .dice-tray {
        width: min(600px, calc(100% - 470px)) !important;
        min-width: 330px !important;
    }
    .waiting-panel {
        padding-left: min(260px, 25vw) !important;
        padding-right: min(260px, 25vw) !important;
    }
}

@media (max-width: 980px) {
    .table-shell {
        min-height: auto !important;
        padding: 12px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .table-shell::before {
        width: 86% !important;
        height: 340px !important;
        top: 54% !important;
    }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        order: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 12px !important;
        align-content: start !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 7 !important;
    }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"],
    .players-orbit .player-card:nth-child(odd),
    .players-orbit .player-card:nth-child(even),
    .players-orbit.count-1 .player-card:nth-child(1) {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        animation: none !important;
    }
    .waiting-panel,
    .game-panel {
        order: 2 !important;
    }
    .waiting-panel {
        min-height: 310px !important;
        padding: 28px 10px !important;
    }
    .game-panel .center-board,
    .game-panel .dice-tray {
        width: min(760px, 96%) !important;
        min-width: 0 !important;
    }
    .room-notice {
        top: 82px !important;
        width: min(560px, calc(100% - 36px)) !important;
    }
}

@media (max-width: 640px) {
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] {
        min-height: 86px !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        padding: 9px !important;
        border-radius: 16px !important;
    }
    .players-orbit .avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }
    .players-orbit .player-meta {
        gap: 5px !important;
        font-size: 11px !important;
    }
    .players-orbit .mini-dice-row {
        display: none !important;
    }
    .room-notice {
        top: 76px !important;
        width: calc(100% - 24px) !important;
        border-radius: 16px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* v-next-2: 强制玩家只在左右两侧显示，彻底禁止落到中间列 */
@media (min-width: 981px) {
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        display: grid !important;
        grid-template-columns: minmax(180px, 270px) minmax(280px, 1fr) minmax(180px, 270px) !important;
        grid-auto-rows: minmax(92px, max-content) !important;
        align-content: center !important;
        justify-content: stretch !important;
        gap: 12px clamp(16px, 2vw, 30px) !important;
    }

    .players-orbit[class*="count-"] > .player-card,
    .players-orbit[class*="count-"] > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(2),
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(4),
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(6),
    .players-orbit[class*="count-"] > .player-card:nth-child(7),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 270px !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .players-orbit[class*="count-"] > .player-card:nth-child(odd),
    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(7) {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .players-orbit[class*="count-"] > .player-card:nth-child(even),
    .players-orbit[class*="count-"] > .player-card:nth-child(2),
    .players-orbit[class*="count-"] > .player-card:nth-child(4),
    .players-orbit[class*="count-"] > .player-card:nth-child(6),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) {
        grid-column: 3 !important;
        justify-self: end !important;
    }

    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(7),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) { grid-row: 4 !important; }

    /* 关键：只有一个其他玩家时，也固定在左侧，不再居中 */
    .players-orbit.count-1 > .player-card:nth-child(1),
    .players-orbit.count-1 > .player-card[class*="seat-"]:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        width: 100% !important;
        max-width: 270px !important;
    }
}

/* v-next-3: 紧凑一屏布局
   目标：常见 1366x768 / 1440x900 桌面分辨率下，尽量不用滚动即可看到骰子和操作区。 */
:root {
    --compact-gap: 12px;
}

.page {
    width: min(1500px, calc(100% - 24px));
    padding: 12px 0 16px !important;
}

.topbar {
    grid-template-columns: minmax(190px, 280px) minmax(260px, 500px) minmax(66px, 120px);
    gap: 12px !important;
    margin-bottom: 12px !important;
}
.brand-card { padding: 11px 16px !important; border-radius: 18px !important; }
.brand-title { font-size: 20px !important; }
.brand-sub { margin-top: 4px !important; font-size: 12px !important; }
.status-card {
    padding: 9px 16px !important;
    border-radius: 18px !important;
    gap: 16px !important;
}
.status-card b { font-size: 23px !important; }
.status-card span { margin-top: 1px !important; font-size: 11px !important; }
.status-card i { height: 28px !important; }
.icon-btn,
.ghost-btn,
.primary-btn {
    padding: 9px 14px !important;
    border-radius: 14px !important;
}

.room-layout {
    grid-template-columns: minmax(0, 1fr) 250px !important;
    gap: 12px !important;
}
.game-stage {
    min-height: min(540px, calc(100vh - 178px)) !important;
    padding: 12px !important;
    border-radius: 22px !important;
}
.game-stage::before {
    height: 340px !important;
    top: 52% !important;
}
.room-head {
    min-height: 64px;
    padding: 9px 12px !important;
    border-radius: 16px !important;
}
.room-head strong { font-size: 22px !important; margin-top: 2px !important; }
.room-meta { margin-top: 3px !important; font-size: 11px !important; }
.self-card {
    min-width: min(300px, 100%) !important;
    padding: 7px 10px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    border-radius: 15px !important;
}
.self-avatar { width: 38px !important; height: 38px !important; font-size: 15px !important; }
.self-title { font-size: 13px !important; }
.self-meta { margin-top: 3px !important; gap: 5px !important; font-size: 11px !important; }

.table-shell {
    min-height: min(440px, calc(100vh - 258px)) !important;
    padding: 6px 0 82px !important;
}
.table-shell::before {
    width: min(680px, 56%) !important;
    height: min(300px, 33vw) !important;
}

.players-orbit,
.players-orbit.waiting-orbit,
.players-orbit.playing-orbit {
    inset: 54px 12px 84px !important;
    grid-template-columns: minmax(150px, 225px) minmax(260px, 1fr) minmax(150px, 225px) !important;
    grid-auto-rows: minmax(68px, max-content) !important;
    gap: 8px 18px !important;
}
.players-orbit .player-card,
.players-orbit .player-card[class*="seat-"] {
    max-width: 225px !important;
    min-height: 68px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
}
.players-orbit .avatar,
.player-card .avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
}
.player-name { font-size: 13px !important; }
.player-meta { margin-top: 3px !important; gap: 5px !important; font-size: 11px !important; }
.player-name em,
.state-chip { padding: 1px 6px !important; font-size: 10px !important; }
.kick-btn { padding: 4px 8px !important; font-size: 11px !important; margin-top: -4px !important; }
.player-card .mini-dice-row { display: none !important; }

.waiting-panel {
    min-height: min(360px, calc(100vh - 308px)) !important;
    padding: 80px min(240px, 22vw) 78px !important;
    gap: 9px !important;
}
.waiting-panel::before { top: 34px !important; padding: 5px 12px !important; font-size: 12px !important; }
.waiting-panel h2 { font-size: 28px !important; }
.waiting-dice { gap: 8px !important; margin-bottom: 2px !important; }
.waiting-dice span { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
.waiting-actions { gap: 10px !important; margin-top: 2px !important; }
.tip { line-height: 1.55 !important; font-size: 13px !important; }

.game-panel .stats-row,
.stats-row {
    gap: 8px !important;
    margin: 8px 0 !important;
}
.stats-row div {
    padding: 8px 10px !important;
    border-radius: 14px !important;
}
.stats-row span { margin-bottom: 2px !important; font-size: 11px !important; }
.stats-row b { font-size: 15px !important; }
.table-area {
    min-height: 310px !important;
    padding: 4px 0 0 !important;
}
.game-panel .center-board,
.center-board {
    width: min(340px, calc(100% - 470px)) !important;
    min-width: 280px !important;
    margin: 6px auto 0 !important;
}
.bid-box {
    padding: 10px 12px !important;
    border-radius: 18px !important;
}
.current-bid {
    margin-top: 4px !important;
    font-size: clamp(26px, 2.8vw, 38px) !important;
}
.mini-log-card {
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
}
.section-title { margin-bottom: 8px !important; font-size: 15px !important; }
.log { gap: 6px !important; max-height: 112px !important; }
.log-line {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}
.game-panel .dice-tray,
.dice-tray {
    width: min(520px, calc(100% - 430px)) !important;
    min-width: 300px !important;
    margin: 8px auto 0 !important;
    padding: 10px 14px 12px !important;
    border-radius: 24px !important;
}
.turn-hint { min-height: 18px !important; margin-bottom: 3px !important; font-size: 13px !important; }
.dice-row { gap: 8px !important; }
.my-dice .die {
    width: clamp(48px, 5.1vw, 66px) !important;
    height: clamp(48px, 5.1vw, 66px) !important;
}

.side-panel {
    padding: 14px !important;
    border-radius: 20px !important;
    max-height: calc(100vh - 96px);
    overflow: auto;
}
.host-settings { margin-bottom: 12px !important; padding-bottom: 12px !important; }
.host-settings label,
label { margin-bottom: 9px !important; font-size: 12px !important; }
.host-settings select,
.host-settings input,
select,
input {
    margin-top: 5px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
}
.settings-tip { margin: -2px 0 8px !important; font-size: 11px !important; }
.rule-list { gap: 7px !important; }
.rule-list p { padding: 8px 10px !important; line-height: 1.45 !important; font-size: 12px !important; }

.action-panel {
    grid-template-columns: .9fr .9fr .86fr 1.18fr minmax(132px, .9fr) minmax(108px, .72fr) auto !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 22px !important;
    bottom: 8px !important;
}
.control-item label { margin: 0 0 5px !important; font-size: 12px !important; }
.action-panel select { min-height: 40px !important; padding: 8px 10px !important; }
.switch-box { height: 40px !important; padding: 0 10px !important; border-radius: 13px !important; gap: 8px !important; }
.switch-ui { width: 46px !important; height: 26px !important; }
.switch-ui::before { width: 18px !important; height: 18px !important; }
.switch-box input:checked + .switch-ui::before { transform: translateX(20px) !important; }
.action-btn {
    min-height: 56px !important;
    border-radius: 18px !important;
    font-size: 22px !important;
}
.action-btn::after { left: 12px !important; font-size: 23px !important; }
.next-round { min-height: 46px !important; }

.room-notice {
    top: 70px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
.toast { padding: 10px 12px !important; border-radius: 15px !important; }
.toast-icon { width: 25px !important; height: 25px !important; }

@media (max-height: 760px) and (min-width: 981px) {
    .page { padding-top: 8px !important; padding-bottom: 10px !important; }
    .topbar { margin-bottom: 8px !important; }
    .brand-card { padding: 8px 13px !important; }
    .brand-title { font-size: 18px !important; }
    .brand-sub { display: none !important; }
    .status-card { padding: 7px 12px !important; }
    .status-card b { font-size: 20px !important; }
    .game-stage { min-height: calc(100vh - 164px) !important; }
    .room-head { min-height: 56px !important; padding: 7px 10px !important; }
    .table-shell { min-height: calc(100vh - 236px) !important; padding-bottom: 70px !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        top: 46px !important;
        bottom: 70px !important;
    }
    .waiting-panel { padding-top: 68px !important; padding-bottom: 62px !important; }
    .current-bid { font-size: clamp(24px, 2.4vw, 34px) !important; }
    .log { max-height: 88px !important; }
    .my-dice .die { width: clamp(44px, 4.8vw, 58px) !important; height: clamp(44px, 4.8vw, 58px) !important; }
    .action-panel { padding: 8px 10px !important; gap: 8px !important; }
    .action-btn { min-height: 50px !important; font-size: 20px !important; }
    .switch-box { height: 38px !important; }
    .action-panel select { min-height: 38px !important; }
}

@media (max-width: 1180px) {
    .room-layout { grid-template-columns: 1fr !important; }
    .side-panel { display: none !important; }
    .game-stage { min-height: auto !important; }
    .table-shell { min-height: auto !important; padding: 10px 0 0 !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        order: 1 !important;
    }
    .game-panel .center-board,
    .game-panel .dice-tray,
    .center-board,
    .dice-tray {
        width: min(720px, 96%) !important;
        min-width: 0 !important;
    }
    .action-panel {
        position: static !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .bid-action,
    .open-action,
    .next-round { grid-column: span 2 !important; }
}

@media (max-width: 720px) {
    .page { width: min(100% - 16px, 1500px); }
    .topbar { grid-template-columns: 1fr !important; }
    .room-head { grid-template-columns: 1fr !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit { grid-template-columns: 1fr 1fr !important; }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] { min-height: 74px !important; }
    .stats-row { grid-template-columns: 1fr 1fr !important; }
    .action-panel { grid-template-columns: 1fr 1fr !important; }
    .target-control,
    .bid-action,
    .open-action,
    .next-round { grid-column: span 2 !important; }
}

/* === Patch: align bottom controls, especially the zhai switch === */
.action-panel .control-item {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
}
.action-panel .control-item > label:not(.switch-box) {
    display: block !important;
    height: 18px !important;
    line-height: 18px !important;
    margin: 0 0 5px !important;
    white-space: nowrap !important;
}
.action-panel .control-item select,
.action-panel .switch-box {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}
.action-panel .switch-box {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}
.action-panel .zhai-control .switch-box,
.action-panel .zhai-control label.switch-box,
.action-panel label.switch-box {
    margin: 0 !important;
    padding: 0 10px !important;
}
.action-panel .zhai-control { align-self: stretch !important; }
.action-panel .switch-text {
    line-height: 1 !important;
    min-width: 28px !important;
    text-align: center !important;
}
.action-panel .switch-box:active {
    transform: translateY(1px) scale(.99);
}
.action-panel .switch-box input:focus-visible + .switch-ui {
    outline: 2px solid rgba(255,255,255,.75);
    outline-offset: 2px;
}

@media (max-height: 760px) and (min-width: 981px) {
    .action-panel .control-item > label:not(.switch-box) {
        height: 16px !important;
        line-height: 16px !important;
        margin-bottom: 4px !important;
    }
    .action-panel .control-item select,
    .action-panel .switch-box {
        height: 38px !important;
        min-height: 38px !important;
    }
}

@media (max-width: 720px) {
    .action-panel .control-item > label:not(.switch-box) {
        height: 17px !important;
        line-height: 17px !important;
    }
    .action-panel .control-item select,
    .action-panel .switch-box {
        height: 42px !important;
        min-height: 42px !important;
    }
}

/* === Patch: keep player list below top game info ===
   玩家列表只占左右两侧，并且在游戏中从统计信息下面开始，避免盖住顶部信息。 */
@media (min-width: 981px) {
    .game-stage {
        overflow: hidden !important;
    }

    .table-shell {
        position: relative !important;
    }

    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        z-index: 3 !important;
    }

    /* 等待页没有顶部统计条，玩家可以稍微靠上一点 */
    .players-orbit.waiting-orbit,
    .players-orbit.waiting-orbit[class*="count-"] {
        inset: 64px 12px 84px !important;
    }

    /* 游戏页有“当前局数/当前轮到/本局起叫”等顶部信息，玩家列表必须让出来 */
    .players-orbit.playing-orbit,
    .players-orbit.playing-orbit[class*="count-"] {
        inset: 118px 12px 82px !important;
        align-content: start !important;
    }

    .game-panel,
    .game-panel .stats-row,
    .game-panel .table-area,
    .game-panel .center-board,
    .game-panel .dice-tray,
    .waiting-panel {
        position: relative !important;
        z-index: 6 !important;
    }

    .game-panel .stats-row,
    .stats-row {
        position: relative !important;
        z-index: 8 !important;
    }

    .players-orbit.playing-orbit .player-card,
    .players-orbit.playing-orbit .player-card[class*="seat-"] {
        max-height: 82px !important;
        overflow: hidden !important;
    }
}

@media (max-height: 760px) and (min-width: 981px) {
    .players-orbit.waiting-orbit,
    .players-orbit.waiting-orbit[class*="count-"] {
        inset: 54px 12px 70px !important;
    }
    .players-orbit.playing-orbit,
    .players-orbit.playing-orbit[class*="count-"] {
        inset: 104px 12px 70px !important;
    }
    .players-orbit.playing-orbit .player-card,
    .players-orbit.playing-orbit .player-card[class*="seat-"] {
        min-height: 62px !important;
        max-height: 76px !important;
    }
}

/* === Patch: AI players, chat drawer, and mobile landscape play mode === */
.ai-admin-box {
    margin: 4px 0 12px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
}
.ai-admin-title {
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,.76);
    margin-bottom: 8px;
}
.ai-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}
.ai-add-btn {
    min-width: 66px;
    padding: 9px 12px !important;
}
.player-card.is-ai {
    border-color: rgba(96, 220, 255, .26) !important;
    background: linear-gradient(180deg, rgba(45, 78, 116, .44), rgba(10, 12, 36, .68)) !important;
}
.player-card.is-ai .avatar {
    background: conic-gradient(from 180deg, #26e0ff, #7a5cff, #ff4bb6, #26e0ff) !important;
}
.state-chip.ai-chip {
    color: #061923 !important;
    background: linear-gradient(135deg, #4ee9ff, #70ffbf) !important;
}

.chat-fab {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    z-index: 70;
    width: 78px;
    height: 46px;
    border-radius: 999px;
    color: #fff;
    font-weight: 1000;
    letter-spacing: .04em;
    background: linear-gradient(135deg, rgba(122, 75, 255, .92), rgba(234, 73, 255, .9));
    box-shadow: 0 12px 34px rgba(132, 74, 255, .34), inset 0 1px 0 rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.18);
}
.chat-fab::before { content: "💬"; margin-right: 4px; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-drawer.hidden { display: none; }
.chat-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: auto;
}
.chat-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.38);
    backdrop-filter: blur(4px);
    animation: fadeIn .18s ease both;
}
.chat-panel {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 36px));
    height: min(540px, calc(100vh - 72px));
    padding: 14px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: chatSlideIn .22s cubic-bezier(.2, 1.2, .28, 1) both;
}
.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.chat-head strong { font-size: 18px; }
.chat-head .icon-btn { min-width: 64px; padding: 8px 12px !important; }
.chat-messages {
    padding: 12px 3px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-empty {
    margin: auto;
    color: var(--muted);
    font-size: 13px;
}
.chat-msg {
    max-width: 88%;
    align-self: flex-start;
    animation: chatMsgIn .2s ease both;
}
.chat-msg.mine { align-self: flex-end; }
.chat-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: 11px;
    margin: 0 6px 4px;
}
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-meta b { color: rgba(255,255,255,.82); }
.chat-bubble {
    padding: 10px 12px;
    border-radius: 16px 16px 16px 5px;
    color: rgba(255,255,255,.92);
    line-height: 1.45;
    background: rgba(255,255,255,.095);
    border: 1px solid rgba(255,255,255,.10);
    word-break: break-word;
}
.chat-msg.mine .chat-bubble {
    border-radius: 16px 16px 5px 16px;
    color: #180b28;
    background: linear-gradient(135deg, #ffd86d, #ff9b2d);
}
.chat-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.chat-input-row input { margin: 0 !important; }
.chat-input-row .primary-btn { min-width: 72px; }
.rotate-hint { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chatSlideIn { from { opacity: 0; transform: translate(-18px, 22px) scale(.96); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (orientation: portrait) and (max-width: 900px) {
    .rotate-hint {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 140;
        align-items: center;
        justify-content: center;
        padding: 22px;
        pointer-events: none;
        background: rgba(3, 5, 18, .34);
    }
    .rotate-card {
        width: min(320px, 92vw);
        padding: 22px;
        text-align: center;
        border-radius: 26px;
        animation: noticeFloatIn .28s ease both;
    }
    .rotate-icon {
        width: 62px;
        height: 62px;
        margin: 0 auto 12px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--gold);
        font-size: 38px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.16);
    }
    .rotate-card strong { display: block; font-size: 20px; margin-bottom: 8px; }
    .rotate-card span { display: block; color: var(--muted); line-height: 1.6; }
}

@media (max-width: 940px) and (orientation: landscape) {
    body { overflow: hidden; }
    .page {
        width: calc(100% - 16px) !important;
        height: 100vh !important;
        padding: 6px 0 !important;
        overflow: hidden !important;
    }
    .topbar {
        grid-template-columns: 170px 1fr 72px !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
    }
    .brand-card { padding: 7px 10px !important; }
    .brand-title { font-size: 16px !important; }
    .brand-sub { display: none !important; }
    .status-card { padding: 6px 8px !important; gap: 8px !important; }
    .status-card div { min-width: 56px !important; }
    .status-card b { font-size: 17px !important; }
    .status-card span { display: none !important; }
    .icon-btn { min-width: 62px !important; padding: 7px 9px !important; }
    .room-layout {
        height: calc(100vh - 58px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        overflow: hidden !important;
    }
    .side-panel { display: none !important; }
    .game-stage {
        min-height: 0 !important;
        height: calc(100vh - 128px) !important;
        padding: 7px !important;
        overflow: hidden !important;
    }
    .room-head { min-height: 44px !important; padding: 5px 8px !important; }
    .room-head strong { font-size: 17px !important; }
    .room-meta { display: none !important; }
    .self-card { min-width: 220px !important; padding: 5px 7px !important; grid-template-columns: 30px 1fr !important; }
    .self-avatar { width: 30px !important; height: 30px !important; }
    .self-meta .penalty { display: none !important; }
    .table-shell { padding: 4px 0 0 !important; height: calc(100% - 48px) !important; min-height: 0 !important; overflow: hidden !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        position: absolute !important;
        inset: 50px 6px 58px !important;
        grid-template-columns: 160px minmax(220px, 1fr) 160px !important;
        gap: 6px 8px !important;
        align-content: start !important;
    }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] {
        max-width: 160px !important;
        min-height: 50px !important;
        max-height: 54px !important;
        grid-template-columns: 32px 1fr !important;
        padding: 5px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .players-orbit .avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .player-name { font-size: 11px !important; }
    .player-meta { font-size: 9px !important; gap: 3px !important; }
    .player-card .mini-dice-row { display: none !important; }
    .waiting-panel { min-height: 0 !important; height: 100% !important; padding: 48px 175px 52px !important; }
    .waiting-panel h2 { font-size: 22px !important; }
    .tip { font-size: 11px !important; line-height: 1.35 !important; }
    .game-panel { height: 100% !important; overflow: hidden !important; }
    .stats-row { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; margin: 4px 170px 4px !important; }
    .stats-row div { padding: 5px 7px !important; border-radius: 11px !important; }
    .stats-row span { display: none !important; }
    .stats-row b { font-size: 12px !important; }
    .table-area { min-height: 0 !important; height: calc(100% - 35px) !important; padding: 0 !important; }
    .center-board { width: min(300px, calc(100% - 350px)) !important; min-width: 250px !important; margin-top: 0 !important; }
    .bid-box { padding: 7px 9px !important; }
    .current-bid { font-size: 24px !important; }
    .mini-log-card { margin-top: 5px !important; padding: 7px !important; }
    .log { max-height: 56px !important; gap: 4px !important; }
    .log-line { padding: 4px 6px !important; font-size: 10px !important; }
    .dice-tray { width: min(390px, calc(100% - 320px)) !important; min-width: 260px !important; margin-top: 5px !important; padding: 6px 9px !important; border-radius: 18px !important; }
    .turn-hint { font-size: 11px !important; min-height: 14px !important; }
    .my-dice .die { width: 40px !important; height: 40px !important; }
    .action-panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        grid-template-columns: .8fr .8fr .75fr 1.1fr 1fr .8fr auto !important;
        gap: 6px !important;
        padding: 7px !important;
        border-radius: 16px !important;
        z-index: 80 !important;
    }
    .control-item label { display: none !important; }
    .action-panel select,
    .action-panel .switch-box { height: 34px !important; min-height: 34px !important; padding: 0 7px !important; border-radius: 10px !important; }
    .switch-ui { width: 38px !important; height: 22px !important; }
    .switch-ui::before { width: 16px !important; height: 16px !important; top: 3px !important; left: 3px !important; }
    .switch-box input:checked + .switch-ui::before { transform: translateX(16px) !important; }
    .action-btn { min-height: 38px !important; font-size: 16px !important; border-radius: 12px !important; letter-spacing: .06em !important; }
    .chat-fab { width: 62px; height: 38px; left: 10px; bottom: 64px; font-size: 12px; }
    .chat-panel { width: min(360px, 62vw); height: calc(100vh - 36px); }
}

/* === Patch: mobile landscape usability v2 ===
   等待开局时隐藏叫点操作栏；手机横屏下中间区域不再被底部操作栏盖住。 */
.room-waiting .action-panel {
    display: none !important;
}

@media (max-width: 940px) and (orientation: landscape) {
    html,
    body {
        height: 100%;
        overflow: hidden !important;
    }

    .page {
        width: calc(100% - 12px) !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: 5px 0 !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    .topbar {
        height: 46px !important;
        min-height: 46px !important;
        grid-template-columns: 180px minmax(0, 1fr) 62px !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .brand-card,
    .status-card,
    .icon-btn {
        min-height: 0 !important;
        height: 40px !important;
    }

    .brand-card {
        padding: 5px 10px !important;
        border-radius: 15px !important;
    }

    .brand-title { font-size: 15px !important; line-height: 1.1 !important; }
    .brand-sub { display: none !important; }

    .status-card {
        padding: 5px 8px !important;
        border-radius: 15px !important;
        gap: 8px !important;
    }
    .status-card div { min-width: 50px !important; }
    .status-card b { font-size: 16px !important; line-height: 1 !important; }
    .status-card span { display: none !important; }
    .status-card i { height: 22px !important; }
    .icon-btn { min-width: 62px !important; padding: 5px 8px !important; border-radius: 14px !important; }

    .room-layout {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .game-stage {
        height: calc(100dvh - 56px) !important;
        min-height: 0 !important;
        padding: 6px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .room-head {
        height: 42px !important;
        min-height: 42px !important;
        padding: 4px 8px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(90px, 1fr) minmax(160px, auto) auto !important;
        gap: 7px !important;
    }
    .room-head .muted { font-size: 10px !important; }
    .room-head strong { font-size: 16px !important; line-height: 1 !important; margin-top: 1px !important; }
    .room-meta { display: none !important; }
    .copyRoomBtn { white-space: nowrap; }

    .self-card {
        min-width: 0 !important;
        max-width: 270px !important;
        padding: 4px 7px !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 6px !important;
        border-radius: 13px !important;
    }
    .self-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .self-title { font-size: 12px !important; gap: 4px !important; }
    .self-title em { padding: 1px 5px !important; font-size: 10px !important; }
    .self-meta { margin-top: 2px !important; gap: 4px !important; font-size: 10px !important; }
    .self-meta .penalty { display: none !important; }

    .room-notice {
        top: 50px !important;
        width: min(520px, calc(100% - 24px)) !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    .table-shell {
        height: calc(100% - 46px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .table-shell::before {
        width: 72% !important;
        height: 72% !important;
        top: 54% !important;
        opacity: .78 !important;
    }

    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        top: 8px !important;
        bottom: 8px !important;
        inset: 8px 6px 8px !important;
        display: grid !important;
        grid-template-columns: 150px minmax(190px, 1fr) 150px !important;
        grid-auto-rows: minmax(46px, max-content) !important;
        gap: 5px 8px !important;
        align-content: center !important;
        overflow: hidden !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] {
        width: 100% !important;
        max-width: 150px !important;
        min-height: 46px !important;
        max-height: 50px !important;
        padding: 4px 5px !important;
        border-radius: 12px !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        animation: none !important;
    }
    .players-orbit .avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .player-name { font-size: 11px !important; gap: 3px !important; }
    .player-name em,
    .state-chip { padding: 1px 4px !important; font-size: 9px !important; }
    .player-meta { margin-top: 1px !important; gap: 3px !important; font-size: 9px !important; line-height: 1.15 !important; }
    .player-card .mini-dice-row,
    .player-card .dice-row { display: none !important; }
    .kick-btn { display: none !important; }

    .players-orbit[class*="count-"] > .player-card:nth-child(odd) { grid-column: 1 !important; justify-self: start !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(even) { grid-column: 3 !important; justify-self: end !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(7),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) { grid-row: 4 !important; }

    .waiting-panel,
    .game-panel {
        position: relative !important;
        z-index: 5 !important;
    }

    .waiting-panel {
        width: min(360px, calc(100% - 320px)) !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 42px 8px 10px !important;
        display: grid !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 6px !important;
    }
    .waiting-panel::before { display: none !important; }
    .waiting-dice { gap: 6px !important; margin-bottom: 0 !important; }
    .waiting-dice span { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
    .waiting-panel h2 { font-size: 20px !important; margin: 0 !important; }
    .tip { font-size: 11px !important; line-height: 1.35 !important; max-height: 42px !important; overflow: hidden !important; }
    .waiting-actions { gap: 7px !important; margin-top: 2px !important; }
    .waiting-actions .ghost-btn,
    .waiting-actions .primary-btn { padding: 7px 10px !important; border-radius: 12px !important; font-size: 12px !important; }

    .game-panel {
        height: 100% !important;
        overflow: hidden !important;
        padding-bottom: 58px !important;
    }
    .stats-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
        margin: 2px 158px 4px !important;
    }
    .stats-row div { padding: 4px 6px !important; border-radius: 10px !important; }
    .stats-row span { display: none !important; }
    .stats-row b { font-size: 11px !important; }
    .table-area { height: calc(100% - 30px) !important; min-height: 0 !important; padding: 0 !important; }
    .center-board {
        width: min(292px, calc(100% - 320px)) !important;
        min-width: 240px !important;
        margin: 0 auto !important;
    }
    .bid-box { padding: 6px 8px !important; border-radius: 14px !important; }
    .current-bid { font-size: 22px !important; margin-top: 2px !important; }
    .mini-log-card { margin-top: 4px !important; padding: 6px !important; border-radius: 13px !important; }
    .mini-log-card .section-title { font-size: 12px !important; margin-bottom: 4px !important; }
    .log { max-height: 44px !important; gap: 3px !important; }
    .log-line { padding: 3px 5px !important; font-size: 10px !important; line-height: 1.2 !important; }
    .dice-tray {
        width: min(340px, calc(100% - 300px)) !important;
        min-width: 240px !important;
        margin: 4px auto 0 !important;
        padding: 5px 8px !important;
        border-radius: 16px !important;
    }
    .dice-tray .section-title { display: none !important; }
    .turn-hint { font-size: 10px !important; min-height: 12px !important; margin-bottom: 1px !important; }
    .dice-row { gap: 5px !important; }
    .my-dice .die { width: 34px !important; height: 34px !important; }

    .room-waiting .game-stage { height: calc(100dvh - 56px) !important; }
    .room-waiting .table-shell { height: calc(100% - 46px) !important; }
    .room-waiting .players-orbit,
    .room-waiting .players-orbit.waiting-orbit { bottom: 8px !important; }

    .action-panel {
        left: 6px !important;
        right: 6px !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        grid-template-columns: .78fr .78fr .72fr 1fr 1.02fr .78fr auto !important;
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 14px !important;
        z-index: 80 !important;
    }
    .control-item label { display: none !important; }
    .action-panel select,
    .action-panel .switch-box { height: 32px !important; min-height: 32px !important; padding: 0 6px !important; border-radius: 10px !important; font-size: 12px !important; }
    .switch-ui { width: 34px !important; height: 20px !important; }
    .switch-ui::before { width: 14px !important; height: 14px !important; top: 3px !important; left: 3px !important; }
    .switch-box input:checked + .switch-ui::before { transform: translateX(14px) !important; }
    .switch-text { font-size: 12px !important; min-width: 24px !important; }
    .switch-box input:checked ~ .switch-text::after { font-size: 12px !important; }
    .action-btn { min-height: 34px !important; font-size: 15px !important; border-radius: 11px !important; letter-spacing: .05em !important; }
    .action-btn::after { display: none !important; }
    .next-round { min-height: 34px !important; font-size: 12px !important; }
    .chat-fab { width: 58px !important; height: 34px !important; left: 8px !important; bottom: 50px !important; font-size: 12px !important; }
    .chat-panel { width: min(340px, 62vw) !important; height: calc(100dvh - 28px) !important; left: 10px !important; bottom: 10px !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
    .topbar { grid-template-columns: 138px minmax(0, 1fr) 56px !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        grid-template-columns: 128px minmax(160px, 1fr) 128px !important;
    }
    .players-orbit .player-card,
    .players-orbit .player-card[class*="seat-"] { max-width: 128px !important; }
    .waiting-panel,
    .center-board,
    .dice-tray {
        width: min(260px, calc(100% - 270px)) !important;
        min-width: 200px !important;
    }
    .stats-row { margin-left: 136px !important; margin-right: 136px !important; }
}

/* === Patch: collapsible action bar + game history + landscape scroll v3 === */
.history-card {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.history-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.history-list {
    display: grid;
    gap: 10px;
    max-height: 330px;
    overflow: auto;
    padding-right: 3px;
}
.history-item {
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.09);
    animation: logIn .24s ease both;
}
.history-item.success { border-color: rgba(103,255,88,.22); }
.history-item.fail { border-color: rgba(255,85,112,.22); }
.history-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.history-top b {
    color: rgba(255,255,255,.86);
    font-size: 13px;
    white-space: nowrap;
}
.history-open {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--orange);
    font-weight: 900;
    font-size: 12px;
}
.history-top em {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 1000;
    color: #061a12;
    background: linear-gradient(135deg, #46ff9c, #90ff4f);
}
.history-item.fail .history-top em {
    color: #fff;
    background: linear-gradient(135deg, #ff5570, #ff7d41);
}
.history-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
}
.history-summary {
    margin-top: 6px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1.45;
}
.history-empty {
    padding: 14px;
    border-radius: 14px;
    color: rgba(255,255,255,.55);
    text-align: center;
    background: rgba(0,0,0,.16);
}
.history-open-btn { margin-top: 10px; }

.history-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    z-index: 70;
    width: 78px;
    height: 46px;
    border-radius: 999px;
    color: #fff;
    font-weight: 1000;
    background: linear-gradient(135deg, rgba(255,154,22,.94), rgba(255,195,56,.92));
    box-shadow: 0 12px 34px rgba(255,154,22,.28), inset 0 1px 0 rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.20);
}
.history-drawer {
    position: fixed;
    inset: 0;
    z-index: 86;
}
.history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 18, .56);
    backdrop-filter: blur(6px);
}
.history-panel {
    position: absolute;
    right: max(18px, env(safe-area-inset-right));
    top: max(18px, env(safe-area-inset-top));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 36px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 18px;
    animation: historyIn .25s cubic-bezier(.2, 1.22, .3, 1) both;
}
.history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.history-head strong { font-size: 20px; }
.full-history { max-height: none; overflow: auto; }
@keyframes historyIn { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }

.action-panel {
    transition: transform .26s cubic-bezier(.2, 1.08, .25, 1), opacity .2s ease, box-shadow .2s ease !important;
    padding-top: 18px !important;
}
.action-collapse-btn {
    position: absolute;
    right: 16px;
    top: -30px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px 999px 0 0;
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    background: linear-gradient(135deg, rgba(125,78,255,.96), rgba(192,70,255,.94));
    border: 1px solid rgba(255,255,255,.18);
    border-bottom: 0;
    box-shadow: 0 -8px 22px rgba(124,74,255,.22), inset 0 1px 0 rgba(255,255,255,.25);
    z-index: 3;
}
.action-panel.is-collapsed {
    transform: translateY(calc(100% - 36px)) !important;
    opacity: .98;
}
.action-panel.is-collapsed .control-item,
.action-panel.is-collapsed .action-btn,
.action-panel.is-collapsed .next-round {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.room-layout.actions-collapsed .chat-fab,
.room-layout.actions-collapsed .history-fab {
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 42px)) !important;
}

.room-waiting .action-panel,
.room-waiting .action-collapse-btn {
    display: none !important;
}

@media (min-width: 1181px) {
    .side-panel .history-card { display: block; }
    .history-fab { display: none; }
}

@media (max-width: 1180px) {
    .side-panel .history-card { display: none; }
    .history-fab { display: block; }
}

@media (max-width: 940px) and (orientation: landscape) {
    .page {
        grid-template-rows: auto minmax(0, 1fr) !important;
    }
    .room-layout {
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .room-playing .game-stage {
        height: calc(100dvh - 56px) !important;
        min-height: 0 !important;
    }
    .room-playing .table-shell {
        height: calc(100% - 46px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .room-playing .game-panel {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 64px !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .room-playing.actions-collapsed .game-panel {
        padding-bottom: 12px !important;
    }
    .room-playing .table-area {
        height: auto !important;
        min-height: 245px !important;
    }
    .room-playing .stats-row {
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
        backdrop-filter: blur(10px);
        margin-top: 0 !important;
    }
    .room-playing .center-board,
    .room-playing .dice-tray {
        position: relative !important;
        z-index: 9 !important;
    }
    .action-panel {
        padding-top: 10px !important;
        will-change: transform;
    }
    .action-collapse-btn {
        top: -24px !important;
        right: 10px !important;
        height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }
    .action-panel.is-collapsed {
        transform: translateY(calc(100% - 29px)) !important;
    }
    .chat-fab { bottom: 50px !important; }
    .history-fab {
        width: 58px !important;
        height: 34px !important;
        right: 8px !important;
        bottom: 50px !important;
        font-size: 12px !important;
    }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab { bottom: 38px !important; }
    .history-panel {
        width: min(360px, 64vw) !important;
        height: calc(100dvh - 24px) !important;
        top: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }
    .history-head { margin-bottom: 8px !important; }
    .history-head strong { font-size: 16px !important; }
    .history-item { padding: 8px 9px !important; border-radius: 13px !important; }
    .history-line, .history-summary { font-size: 11px !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
    .room-playing .game-panel { padding-bottom: 58px !important; }
    .room-playing.actions-collapsed .game-panel { padding-bottom: 8px !important; }
    .history-panel { width: min(330px, 68vw) !important; }
}

/* === Patch: history always visible + player-perspective result badges === */
.room-layout:not(.hidden) .history-fab {
    display: flex !important;
    align-items: center;
    justify-content: center;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 70px)) !important;
    z-index: 82;
}
.room-layout.actions-collapsed:not(.hidden) .history-fab {
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 44px)) !important;
}
.history-item.viewer-win {
    border-color: rgba(93, 255, 132, .32) !important;
    background: linear-gradient(180deg, rgba(28, 94, 60, .30), rgba(7, 11, 28, .58)) !important;
}
.history-item.viewer-lose {
    border-color: rgba(255, 93, 112, .34) !important;
    background: linear-gradient(180deg, rgba(115, 35, 50, .32), rgba(7, 11, 28, .58)) !important;
}
.history-item.viewer-neutral {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .055) !important;
}
.history-item.viewer-win .history-top em {
    color: #062916 !important;
    background: linear-gradient(135deg, #6dff95, #c8ff73) !important;
}
.history-item.viewer-lose .history-top em {
    color: #fff !important;
    background: linear-gradient(135deg, #ff4c68, #ff8a4e) !important;
}
.history-item.viewer-neutral .history-top em {
    color: rgba(255,255,255,.78) !important;
    background: rgba(255,255,255,.12) !important;
}
.history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
@media (min-width: 1181px) {
    .room-layout:not(.hidden) .history-fab {
        display: flex !important;
    }
}
@media (max-width: 940px) and (orientation: landscape) {
    .room-layout:not(.hidden) .history-fab {
        right: 8px !important;
        bottom: 54px !important;
        width: 58px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
    .room-layout.actions-collapsed:not(.hidden) .history-fab {
        bottom: 38px !important;
    }
}

/* === Final responsive table layout patch 2026-06-23 ===
   目标：接近参考图的桌面布局；小屏横屏不互相覆盖；隐藏状态永远优先；历史卡片更紧凑。 */

/* 斋开关和其它控件靠左对齐 */
.action-panel .zhai-control .switch-box,
.action-panel .zhai-control label.switch-box {
    justify-content: flex-start !important;
    text-align: left !important;
}
.action-panel .zhai-control .switch-text {
    text-align: left !important;
}

/* 历史记录：右侧卡片压缩成参考图那种轻量列表 */
.side-panel {
    width: 280px !important;
    padding: 14px !important;
}
.history-card {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
}
.history-list.compact-history {
    max-height: 300px !important;
    gap: 7px !important;
}
.compact-history .history-item {
    padding: 8px 9px !important;
    border-radius: 12px !important;
}
.compact-history .history-top b,
.compact-history .history-open,
.compact-history .history-line,
.compact-history .history-summary {
    font-size: 11px !important;
}
.compact-history .history-line,
.compact-history .history-summary {
    margin-top: 5px !important;
}
.history-empty {
    padding: 10px !important;
}

/* 桌面优先：舞台中间只放核心信息，玩家严格左右分布 */
@media (min-width: 1181px) {
    .room-layout {
        grid-template-columns: minmax(0, 1fr) 280px !important;
        gap: 14px !important;
    }
    .game-stage {
        min-height: min(720px, calc(100vh - 130px)) !important;
        padding: 14px !important;
        overflow: hidden !important;
    }
    .room-head {
        min-height: 66px !important;
        padding: 10px 14px !important;
    }
    .table-shell {
        position: relative !important;
        min-height: min(610px, calc(100vh - 224px)) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .room-playing .table-shell {
        padding-bottom: 105px !important;
    }
    .room-waiting .table-shell {
        padding-bottom: 0 !important;
    }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        position: absolute !important;
        inset: 8px 8px 8px !important;
        display: grid !important;
        grid-template-columns: minmax(190px, 250px) minmax(360px, 1fr) minmax(190px, 250px) !important;
        grid-auto-rows: minmax(72px, max-content) !important;
        gap: 10px 18px !important;
        align-content: center !important;
        overflow: hidden !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        width: 100% !important;
        max-width: 250px !important;
        min-height: 72px !important;
        max-height: 88px !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
    }
    .players-orbit > .player-card:nth-child(odd) {
        grid-column: 1 !important;
        justify-self: start !important;
    }
    .players-orbit > .player-card:nth-child(even) {
        grid-column: 3 !important;
        justify-self: end !important;
    }
    .players-orbit > .player-card:nth-child(1),
    .players-orbit > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit > .player-card:nth-child(3),
    .players-orbit > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit > .player-card:nth-child(5),
    .players-orbit > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit > .player-card:nth-child(7),
    .players-orbit > .player-card:nth-child(8) { grid-row: 4 !important; }
    .player-card .avatar,
    .players-orbit .avatar {
        width: 46px !important;
        height: 46px !important;
        font-size: 17px !important;
    }
    .player-name { font-size: 13px !important; }
    .player-meta { gap: 5px !important; font-size: 11px !important; }
    .player-card .mini-dice-row { display: none !important; }

    .waiting-panel,
    .game-panel {
        position: relative !important;
        z-index: 5 !important;
        width: min(520px, calc(100% - 540px)) !important;
        min-width: 360px !important;
        margin: 0 auto !important;
    }
    .waiting-panel {
        min-height: min(520px, calc(100vh - 240px)) !important;
        padding: 38px 8px !important;
    }
    .game-panel {
        min-height: min(520px, calc(100vh - 240px)) !important;
        padding-bottom: 8px !important;
    }
    .stats-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 8px auto 8px !important;
    }
    .stats-row div {
        padding: 8px !important;
        border-radius: 14px !important;
    }
    .stats-row span { font-size: 11px !important; margin-bottom: 2px !important; }
    .stats-row b { font-size: 14px !important; }
    .table-area {
        min-height: auto !important;
        padding: 0 !important;
    }
    .center-board,
    .game-panel .center-board {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }
    .bid-box {
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }
    .current-bid {
        font-size: clamp(26px, 2.6vw, 38px) !important;
    }
    .mini-log-card {
        margin-top: 8px !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }
    .log { max-height: 105px !important; }
    .dice-tray,
    .game-panel .dice-tray {
        width: 100% !important;
        min-width: 0 !important;
        margin: 8px auto 0 !important;
        padding: 11px 12px !important;
        border-radius: 22px !important;
    }
    .my-dice .die {
        width: clamp(48px, 4.6vw, 66px) !important;
        height: clamp(48px, 4.6vw, 66px) !important;
    }
    .action-panel {
        position: sticky !important;
        bottom: 10px !important;
        grid-template-columns: .8fr .8fr .82fr 1.05fr 1.25fr 1fr auto !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 22px !important;
    }
    .action-btn {
        min-height: 54px !important;
        font-size: 21px !important;
        border-radius: 18px !important;
    }
}

/* 平板/普通小屏：改成上下排列，但是不要让游戏信息插到玩家中间 */
@media (max-width: 1180px) and (min-width: 941px) {
    .room-layout {
        grid-template-columns: 1fr !important;
    }
    .side-panel { display: none !important; }
    .game-stage { min-height: auto !important; overflow: hidden !important; }
    .table-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        order: 1 !important;
    }
    .waiting-panel,
    .game-panel {
        order: 2 !important;
        width: min(720px, 96%) !important;
        margin: 0 auto !important;
    }
}

/* 手机横屏：固定顶部，玩家左右，中心区域自己滚动，操作栏可收起 */
@media (max-width: 940px) and (orientation: landscape) {
    html, body {
        height: 100dvh !important;
        overflow: hidden !important;
    }
    .page {
        width: calc(100vw - 10px) !important;
        height: 100dvh !important;
        padding: 5px 0 !important;
        display: grid !important;
        grid-template-rows: 46px minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
    }
    .topbar {
        height: 46px !important;
        grid-template-columns: 180px minmax(0, 1fr) 62px !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    .brand-card,
    .status-card,
    .icon-btn {
        height: 40px !important;
        border-radius: 14px !important;
    }
    .brand-card { padding: 6px 10px !important; }
    .brand-title { font-size: 15px !important; line-height: 1 !important; }
    .brand-sub { display: none !important; }
    .status-card { padding: 5px 8px !important; gap: 8px !important; }
    .status-card div { min-width: 0 !important; flex: 1 !important; }
    .status-card b { font-size: 16px !important; }
    .status-card span { display: none !important; }
    .status-card i { height: 22px !important; }
    .icon-btn { min-width: 58px !important; padding: 0 8px !important; }

    .room-layout {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: hidden !important;
    }
    .game-stage {
        height: 100% !important;
        min-height: 0 !important;
        padding: 6px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }
    .room-head {
        position: relative !important;
        z-index: 20 !important;
        min-height: 46px !important;
        height: 46px !important;
        grid-template-columns: minmax(96px, 1fr) minmax(170px, 240px) auto !important;
        gap: 6px !important;
        padding: 4px 7px !important;
        border-radius: 14px !important;
    }
    .room-head .muted { font-size: 10px !important; }
    .room-head strong { font-size: 16px !important; margin-top: 1px !important; line-height: 1 !important; }
    .room-meta { display: none !important; }
    .self-card {
        min-width: 0 !important;
        max-width: 240px !important;
        padding: 4px 6px !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }
    .self-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .self-title { font-size: 12px !important; gap: 3px !important; }
    .self-title em { padding: 1px 4px !important; font-size: 9px !important; }
    .self-meta { margin-top: 2px !important; gap: 3px !important; font-size: 9px !important; }
    .self-meta .penalty { display: none !important; }
    #copyRoomBtn { padding: 0 10px !important; white-space: nowrap !important; }

    .table-shell {
        position: relative !important;
        height: calc(100% - 50px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .table-shell::before {
        width: 70% !important;
        height: 78% !important;
        top: 52% !important;
        opacity: .62 !important;
    }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        position: absolute !important;
        inset: 5px 5px 5px !important;
        display: grid !important;
        grid-template-columns: 146px minmax(230px, 1fr) 146px !important;
        grid-auto-rows: minmax(48px, max-content) !important;
        gap: 5px 8px !important;
        align-content: center !important;
        overflow: hidden !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        width: 100% !important;
        max-width: 146px !important;
        min-height: 48px !important;
        max-height: 52px !important;
        padding: 4px 5px !important;
        border-radius: 12px !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        animation: none !important;
    }
    .players-orbit > .player-card:nth-child(odd) { grid-column: 1 !important; justify-self: start !important; }
    .players-orbit > .player-card:nth-child(even) { grid-column: 3 !important; justify-self: end !important; }
    .players-orbit > .player-card:nth-child(1),
    .players-orbit > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit > .player-card:nth-child(3),
    .players-orbit > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit > .player-card:nth-child(5),
    .players-orbit > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit > .player-card:nth-child(7),
    .players-orbit > .player-card:nth-child(8) { grid-row: 4 !important; }
    .players-orbit .avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .player-name { font-size: 11px !important; gap: 3px !important; }
    .player-name em,
    .state-chip { padding: 1px 4px !important; font-size: 9px !important; }
    .player-meta { margin-top: 1px !important; gap: 3px !important; font-size: 9px !important; line-height: 1.15 !important; }
    .player-card .mini-dice-row,
    .player-card .dice-row,
    .kick-btn { display: none !important; }

    .waiting-panel,
    .game-panel {
        position: absolute !important;
        left: 154px !important;
        right: 154px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        z-index: 6 !important;
    }
    .waiting-panel {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px !important;
        display: grid !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 6px !important;
    }
    .waiting-panel::before { display: none !important; }
    .waiting-dice { gap: 6px !important; margin: 0 !important; }
    .waiting-dice span { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
    .waiting-panel h2 { margin: 0 !important; font-size: 20px !important; }
    .waiting-panel .tip { max-height: 44px !important; overflow: hidden !important; font-size: 11px !important; line-height: 1.35 !important; }
    .waiting-actions { gap: 6px !important; margin: 0 !important; }
    .waiting-actions .ghost-btn,
    .waiting-actions .primary-btn { padding: 7px 10px !important; border-radius: 12px !important; font-size: 12px !important; }

    .game-panel {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 2px 62px !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .room-playing.actions-collapsed .game-panel { padding-bottom: 12px !important; }
    .stats-row {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 0 5px !important;
        padding-bottom: 3px !important;
        backdrop-filter: blur(10px);
    }
    .stats-row div { padding: 4px 5px !important; border-radius: 10px !important; }
    .stats-row span { display: none !important; }
    .stats-row b { font-size: 11px !important; white-space: nowrap !important; }
    .table-area { height: auto !important; min-height: 0 !important; padding: 0 !important; }
    .center-board,
    .game-panel .center-board,
    .dice-tray,
    .game-panel .dice-tray {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .center-board { margin-top: 0 !important; }
    .bid-box { padding: 6px 8px !important; border-radius: 14px !important; }
    .current-bid { margin-top: 2px !important; font-size: 22px !important; }
    .mini-log-card { margin-top: 4px !important; padding: 6px !important; border-radius: 13px !important; }
    .mini-log-card .section-title { margin-bottom: 4px !important; font-size: 12px !important; }
    .log { max-height: 45px !important; gap: 3px !important; }
    .log-line { padding: 3px 5px !important; font-size: 10px !important; line-height: 1.2 !important; }
    .dice-tray { margin-top: 4px !important; padding: 5px 8px !important; border-radius: 16px !important; }
    .dice-tray .section-title { display: none !important; }
    .turn-hint { min-height: 12px !important; margin-bottom: 1px !important; font-size: 10px !important; }
    .dice-row { gap: 5px !important; }
    .my-dice .die { width: 34px !important; height: 34px !important; }

    .action-panel {
        position: fixed !important;
        left: 6px !important;
        right: 6px !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        grid-template-columns: .78fr .78fr .72fr 1fr 1.02fr .78fr auto !important;
        gap: 5px !important;
        padding: 7px 6px 6px !important;
        border-radius: 14px !important;
        z-index: 80 !important;
    }
    .action-panel .control-item > label:not(.switch-box) { display: none !important; }
    .action-panel select,
    .action-panel .switch-box { height: 32px !important; min-height: 32px !important; padding: 0 6px !important; border-radius: 10px !important; font-size: 12px !important; }
    .action-panel .switch-box { justify-content: flex-start !important; }
    .switch-ui { width: 34px !important; height: 20px !important; }
    .switch-ui::before { width: 14px !important; height: 14px !important; top: 3px !important; left: 3px !important; }
    .switch-box input:checked + .switch-ui::before { transform: translateX(14px) !important; }
    .switch-text { font-size: 12px !important; min-width: 22px !important; }
    .action-btn { min-height: 34px !important; font-size: 15px !important; border-radius: 11px !important; letter-spacing: .05em !important; }
    .action-btn::after { display: none !important; }
    .next-round { min-height: 34px !important; font-size: 12px !important; }
    .action-collapse-btn { top: -23px !important; height: 23px !important; right: 8px !important; padding: 0 10px !important; font-size: 11px !important; }
    .action-panel.is-collapsed { transform: translateY(calc(100% - 28px)) !important; }

    .history-fab,
    .chat-fab {
        width: 54px !important;
        height: 32px !important;
        bottom: 44px !important;
        font-size: 12px !important;
        z-index: 82 !important;
    }
    .chat-fab { left: 8px !important; }
    .history-fab { right: 8px !important; }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab { bottom: 34px !important; }
    .history-panel { width: min(330px, 68vw) !important; right: 8px !important; top: 8px !important; bottom: 8px !important; padding: 10px !important; border-radius: 16px !important; }
    .history-head { margin-bottom: 6px !important; }
    .history-head strong { font-size: 16px !important; }
    .history-item { padding: 7px 8px !important; border-radius: 12px !important; }
    .history-line, .history-summary { font-size: 11px !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
    .topbar { grid-template-columns: 140px minmax(0, 1fr) 56px !important; }
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        grid-template-columns: 126px minmax(170px, 1fr) 126px !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] { max-width: 126px !important; }
    .waiting-panel,
    .game-panel { left: 134px !important; right: 134px !important; }
    .self-card { display: none !important; }
    .room-head { grid-template-columns: minmax(90px,1fr) auto !important; }
}

/* 等待状态：绝不显示叫点操作栏；游戏状态：绝不显示等待面板 */
.room-waiting .action-panel,
.room-waiting .action-collapse-btn,
.room-waiting .game-panel {
    display: none !important;
}
.room-playing .waiting-panel {
    display: none !important;
}
.room-layout.hidden .chat-fab,
.room-layout.hidden .history-fab,
.room-layout.hidden .action-panel {
    display: none !important;
}

/* hidden 必须放在所有覆盖规则最后，避免媒体查询用 display:grid 把隐藏元素重新显示出来 */
.hidden,
.waiting-panel.hidden,
.game-panel.hidden,
.action-panel.hidden,
#readyBtn.hidden,
#startGameBtn.hidden,
#modal.hidden,
#chatDrawer.hidden,
#historyDrawer.hidden,
#hostSettingsPanel.hidden,
#selfCard.hidden {
    display: none !important;
}

/* === Final mobile landscape rebuild patch v4 ===
   目标：电脑端保持正常；手机/小屏横屏使用独立稳定布局：
   - 自己卡片隐藏，释放顶部空间
   - 玩家只在左右两列
   - 中间游戏信息固定在中列并可滚动
   - 底部操作栏变成横向抽屉，不再把斋压扁
   - 历史弹窗变小卡片
*/
.room-layout[data-status="waiting"] .action-panel,
.room-layout[data-status="waiting"] .action-collapse-btn,
body[data-room-status="waiting"] .action-panel,
body[data-room-status="waiting"] .action-collapse-btn {
    display: none !important;
}
.room-layout[data-status="playing"] .waiting-panel,
.room-layout[data-status="round_over"] .waiting-panel,
body[data-room-status="playing"] .waiting-panel,
body[data-room-status="round_over"] .waiting-panel {
    display: none !important;
}

/* 桌面端历史弹窗也不要撑满，像右侧小面板 */
.history-panel {
    max-width: 380px !important;
    max-height: min(680px, calc(100dvh - 36px)) !important;
    bottom: auto !important;
    overflow: hidden !important;
}
.full-history {
    max-height: calc(min(680px, 100dvh - 36px) - 70px) !important;
}
.history-drawer .history-list {
    gap: 8px !important;
}
.history-drawer .history-item {
    padding: 9px 10px !important;
    border-radius: 13px !important;
}
.history-drawer .history-summary {
    font-size: 11px !important;
    margin-top: 5px !important;
}

@media (max-width: 940px) and (orientation: landscape) {
    :root {
        --mobile-side: clamp(112px, 17vw, 148px);
        --mobile-gap: 7px;
    }

    html, body {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .page {
        height: 100dvh !important;
        width: 100vw !important;
        padding: 5px 6px !important;
        grid-template-rows: 44px minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    .topbar {
        height: 44px !important;
        grid-template-columns: minmax(138px, 200px) minmax(0, 1fr) 58px !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    .brand-card,
    .status-card,
    .topbar .icon-btn {
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 14px !important;
    }
    .brand-card { padding: 6px 10px !important; }
    .brand-title { font-size: 15px !important; line-height: 1 !important; }
    .brand-sub { display: none !important; }
    .status-card { padding: 4px 8px !important; gap: 7px !important; }
    .status-card div { min-width: 0 !important; flex: 1 1 0 !important; }
    .status-card b { font-size: 16px !important; line-height: 1 !important; }
    .status-card span { display: none !important; }
    .status-card i { height: 22px !important; }
    .topbar .icon-btn { min-width: 54px !important; padding: 0 8px !important; }

    .room-layout {
        height: 100% !important;
        min-height: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }
    .side-panel { display: none !important; }

    .game-stage {
        height: 100% !important;
        min-height: 0 !important;
        padding: 6px !important;
        border-radius: 17px !important;
        overflow: hidden !important;
    }

    .room-head {
        position: relative !important;
        z-index: 30 !important;
        height: 44px !important;
        min-height: 44px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        padding: 4px 7px !important;
        border-radius: 14px !important;
    }
    .room-head > div:first-child {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .room-head .muted { font-size: 10px !important; }
    .room-head strong { font-size: 15px !important; line-height: 1 !important; margin-top: 2px !important; }
    .room-meta { display: none !important; }
    .self-card { display: none !important; }
    #copyRoomBtn { height: 34px !important; padding: 0 10px !important; border-radius: 12px !important; white-space: nowrap !important; }

    .room-notice {
        position: fixed !important;
        top: 52px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(420px, calc(100vw - 240px)) !important;
        z-index: 90 !important;
        pointer-events: none !important;
    }

    .table-shell {
        position: relative !important;
        height: calc(100% - 50px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 15px !important;
    }
    .table-shell::before {
        width: 72% !important;
        height: 86% !important;
        top: 52% !important;
        opacity: .55 !important;
    }

    /* 其它玩家：左右两侧固定列，永不进中间 */
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        position: absolute !important;
        inset: 5px !important;
        display: grid !important;
        grid-template-columns: var(--mobile-side) minmax(0, 1fr) var(--mobile-side) !important;
        grid-auto-rows: minmax(46px, max-content) !important;
        gap: 5px var(--mobile-gap) !important;
        align-content: center !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        width: 100% !important;
        max-width: var(--mobile-side) !important;
        min-width: 0 !important;
        min-height: 46px !important;
        max-height: 50px !important;
        padding: 4px 5px !important;
        border-radius: 12px !important;
        grid-template-columns: 29px minmax(0, 1fr) !important;
        gap: 5px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        animation: none !important;
    }
    .players-orbit > .player-card:nth-child(odd) { grid-column: 1 !important; justify-self: start !important; }
    .players-orbit > .player-card:nth-child(even) { grid-column: 3 !important; justify-self: end !important; }
    .players-orbit > .player-card:nth-child(1),
    .players-orbit > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit > .player-card:nth-child(3),
    .players-orbit > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit > .player-card:nth-child(5),
    .players-orbit > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit > .player-card:nth-child(7),
    .players-orbit > .player-card:nth-child(8) { grid-row: 4 !important; }
    .players-orbit .avatar { width: 29px !important; height: 29px !important; font-size: 12px !important; }
    .player-name { font-size: 10px !important; gap: 2px !important; line-height: 1.05 !important; }
    .player-name em,
    .state-chip { padding: 1px 3px !important; font-size: 8px !important; }
    .player-meta { margin-top: 1px !important; gap: 2px !important; font-size: 8px !important; line-height: 1.1 !important; }
    .player-card .mini-dice-row,
    .player-card .dice-row,
    .kick-btn { display: none !important; }

    /* 中间面板独立占中列，不跟玩家争位置 */
    .waiting-panel,
    .game-panel {
        position: absolute !important;
        left: calc(var(--mobile-side) + var(--mobile-gap) + 4px) !important;
        right: calc(var(--mobile-side) + var(--mobile-gap) + 4px) !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 7 !important;
    }
    .waiting-panel {
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 4px !important;
        display: grid !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 6px !important;
    }
    .waiting-panel::before { display: none !important; }
    .waiting-dice { gap: 6px !important; margin: 0 !important; }
    .waiting-dice span { width: 24px !important; height: 24px !important; border-radius: 7px !important; }
    .waiting-panel h2 { margin: 0 !important; font-size: 18px !important; line-height: 1 !important; }
    .waiting-panel .tip { max-height: 42px !important; overflow: hidden !important; font-size: 10px !important; line-height: 1.3 !important; opacity: .78 !important; }
    .waiting-actions { gap: 7px !important; margin: 0 !important; }
    .waiting-actions .ghost-btn,
    .waiting-actions .primary-btn { padding: 7px 11px !important; border-radius: 12px !important; font-size: 12px !important; }

    .game-panel {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 2px 50px !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .room-layout.actions-collapsed .game-panel { padding-bottom: 8px !important; }
    .stats-row {
        position: relative !important;
        top: auto !important;
        z-index: 12 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        backdrop-filter: none !important;
    }
    .stats-row div { padding: 4px 5px !important; border-radius: 10px !important; min-width: 0 !important; }
    .stats-row span { display: none !important; }
    .stats-row b { font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .table-area { height: auto !important; min-height: 0 !important; padding: 0 !important; }
    .center-board,
    .game-panel .center-board,
    .dice-tray,
    .game-panel .dice-tray {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .bid-box { padding: 7px 8px !important; border-radius: 14px !important; }
    .current-bid { margin-top: 1px !important; font-size: 22px !important; line-height: 1.05 !important; }
    .mini-log-card { margin-top: 4px !important; padding: 6px !important; border-radius: 13px !important; }
    .mini-log-card .section-title { margin-bottom: 3px !important; font-size: 11px !important; }
    .log { max-height: 44px !important; gap: 3px !important; }
    .log-line { padding: 3px 5px !important; font-size: 10px !important; line-height: 1.2 !important; }
    .dice-tray { margin-top: 4px !important; padding: 5px 8px !important; border-radius: 16px !important; }
    .dice-tray .section-title { display: none !important; }
    .turn-hint { min-height: 12px !important; margin-bottom: 1px !important; font-size: 10px !important; }
    .dice-row { gap: 5px !important; }
    .my-dice .die { width: 34px !important; height: 34px !important; }

    /* 底部操作栏：横向抽屉，不压扁斋，也不参与中间布局 */
    .action-panel {
        position: fixed !important;
        left: 6px !important;
        right: 6px !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        height: 52px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 7px 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 15px !important;
        z-index: 80 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .action-panel::-webkit-scrollbar { display: none !important; }
    .action-panel .control-item {
        flex: 0 0 auto !important;
        min-width: 78px !important;
        height: 36px !important;
        display: grid !important;
        align-items: center !important;
        margin: 0 !important;
    }
    .action-panel .control-item > label:not(.switch-box) { display: none !important; }
    .action-panel select,
    .action-panel .switch-box {
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 9px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
    }
    .action-panel .zhai-control { min-width: 104px !important; }
    .action-panel .target-control { min-width: 150px !important; }
    .action-panel .switch-box {
        justify-content: flex-start !important;
        gap: 8px !important;
        text-align: left !important;
    }
    .switch-ui { flex: 0 0 auto !important; width: 38px !important; height: 22px !important; }
    .switch-ui::before { width: 16px !important; height: 16px !important; top: 3px !important; left: 3px !important; }
    .switch-box input:checked + .switch-ui::before { transform: translateX(16px) !important; }
    .switch-text { flex: 0 0 auto !important; min-width: 26px !important; font-size: 13px !important; text-align: left !important; }
    .action-btn,
    .next-round {
        flex: 0 0 118px !important;
        min-width: 118px !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        letter-spacing: .04em !important;
    }
    .open-action { flex-basis: 78px !important; min-width: 78px !important; }
    .action-btn::after { display: none !important; }
    .action-collapse-btn {
        position: fixed !important;
        right: 12px !important;
        bottom: calc(max(5px, env(safe-area-inset-bottom)) + 51px) !important;
        top: auto !important;
        height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 81 !important;
    }
    .action-panel.is-collapsed {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 8px !important;
        transform: translateY(0) !important;
        overflow: hidden !important;
    }
    .action-panel.is-collapsed .control-item,
    .action-panel.is-collapsed .action-btn,
    .action-panel.is-collapsed .next-round {
        display: none !important;
    }

    .chat-fab,
    .history-fab {
        width: 52px !important;
        height: 31px !important;
        bottom: 40px !important;
        font-size: 12px !important;
        z-index: 82 !important;
    }
    .chat-fab { left: 8px !important; }
    .history-fab { right: 8px !important; }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab { bottom: 33px !important; }

    /* 历史弹窗：小屏只做轻量侧抽屉 */
    .history-panel {
        width: min(300px, 52vw) !important;
        max-width: 300px !important;
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }
    .history-head { margin-bottom: 6px !important; }
    .history-head strong { font-size: 15px !important; }
    .full-history { max-height: calc(100dvh - 82px) !important; }
    .history-list { gap: 6px !important; }
    .history-item { padding: 7px 8px !important; border-radius: 12px !important; }
    .history-top { gap: 5px !important; }
    .history-top b,
    .history-open,
    .history-top em,
    .history-line,
    .history-summary { font-size: 10px !important; }
    .history-line { margin-top: 4px !important; }
    .history-summary { display: none !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
    :root { --mobile-side: 116px; --mobile-gap: 6px; }
    .topbar { grid-template-columns: 132px minmax(0, 1fr) 54px !important; }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        min-height: 43px !important;
        max-height: 47px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
    }
    .players-orbit .avatar { width: 26px !important; height: 26px !important; }
    .player-name { font-size: 9px !important; }
    .player-meta { font-size: 8px !important; }
    .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .center-board,
    .game-panel .center-board,
    .dice-tray,
    .game-panel .dice-tray { max-width: 300px !important; }
    .history-panel { width: min(286px, 56vw) !important; }
}

/* === Adaptive small-landscape fix v5 ===
   修复：小屏/手机横屏玩家卡片仍被旧 seat-* 规则带偏、右侧显示不全；
   聊天弹窗在小屏过大；底部“斋”被压缩。 */
@media (max-width: 940px) and (orientation: landscape) {
    .page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
    }

    .game-stage,
    .table-shell {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 彻底清掉历史 seat-* 的绝对定位，否则右侧玩家会被推到屏幕外 */
    .players-orbit[class*="count-"] > .player-card,
    .players-orbit[class*="count-"] > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(2),
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(4),
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(6),
    .players-orbit[class*="count-"] > .player-card:nth-child(7),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
    }

    :root {
        --mobile-side: clamp(126px, 18vw, 158px);
        --mobile-gap: clamp(6px, 1.2vw, 10px);
    }

    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        inset: 6px !important;
        grid-template-columns: var(--mobile-side) minmax(0, 1fr) var(--mobile-side) !important;
        gap: 5px var(--mobile-gap) !important;
        align-content: center !important;
        overflow: hidden !important;
    }

    .players-orbit[class*="count-"] > .player-card:nth-child(odd) {
        grid-column: 1 !important;
        justify-self: stretch !important;
    }
    .players-orbit[class*="count-"] > .player-card:nth-child(even) {
        grid-column: 3 !important;
        justify-self: stretch !important;
    }
    .players-orbit[class*="count-"] > .player-card:nth-child(1),
    .players-orbit[class*="count-"] > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(3),
    .players-orbit[class*="count-"] > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(5),
    .players-orbit[class*="count-"] > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit[class*="count-"] > .player-card:nth-child(7),
    .players-orbit[class*="count-"] > .player-card:nth-child(8) { grid-row: 4 !important; }

    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .waiting-panel,
    .game-panel {
        left: calc(var(--mobile-side) + var(--mobile-gap) + 8px) !important;
        right: calc(var(--mobile-side) + var(--mobile-gap) + 8px) !important;
    }

    .game-panel {
        scrollbar-width: thin !important;
    }

    .center-board,
    .game-panel .center-board,
    .dice-tray,
    .game-panel .dice-tray {
        max-width: min(380px, 100%) !important;
    }

    .action-panel {
        height: 58px !important;
        min-height: 58px !important;
        padding: 9px 8px 7px !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }
    .action-panel .control-item {
        min-width: 88px !important;
        height: 38px !important;
    }
    .action-panel .zhai-control {
        min-width: 122px !important;
    }
    .action-panel .target-control {
        min-width: 168px !important;
    }
    .action-panel select,
    .action-panel .switch-box {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 13px !important;
    }
    .action-panel .switch-box {
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .switch-ui { width: 40px !important; height: 22px !important; }
    .switch-text { min-width: 32px !important; white-space: nowrap !important; }

    .action-btn,
    .next-round {
        height: 38px !important;
        min-height: 38px !important;
    }
    .action-collapse-btn {
        bottom: calc(max(5px, env(safe-area-inset-bottom)) + 57px) !important;
    }
    .action-panel.is-collapsed {
        height: 28px !important;
        min-height: 28px !important;
    }

    /* 聊天窗口改成小屏侧边抽屉，不再占半个屏幕 */
    .chat-panel {
        left: 8px !important;
        bottom: 8px !important;
        width: min(320px, 48vw) !important;
        max-width: 320px !important;
        height: auto !important;
        max-height: calc(100dvh - 18px) !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
        grid-template-rows: auto minmax(110px, 1fr) auto !important;
    }
    .chat-head {
        padding-bottom: 7px !important;
    }
    .chat-head strong {
        font-size: 15px !important;
    }
    .chat-head .icon-btn {
        min-width: 54px !important;
        height: 30px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }
    .chat-messages {
        max-height: min(210px, calc(100dvh - 120px)) !important;
        padding: 8px 2px !important;
        gap: 7px !important;
    }
    .chat-bubble {
        padding: 7px 9px !important;
        border-radius: 13px 13px 13px 5px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    .chat-meta {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }
    .chat-input-row {
        gap: 6px !important;
        padding-top: 7px !important;
    }
    .chat-input-row input {
        height: 34px !important;
        padding: 0 9px !important;
        font-size: 12px !important;
    }
    .chat-input-row .primary-btn {
        min-width: 58px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    :root {
        --mobile-side: clamp(108px, 16vw, 126px);
        --mobile-gap: 6px;
    }
    .topbar { grid-template-columns: 132px minmax(0, 1fr) 54px !important; }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"] {
        grid-template-columns: 26px minmax(0, 1fr) !important;
        min-height: 43px !important;
        max-height: 47px !important;
        padding: 4px !important;
    }
    .players-orbit .avatar { width: 26px !important; height: 26px !important; }
    .player-name { font-size: 9px !important; }
    .player-meta { font-size: 8px !important; }
    .center-board,
    .game-panel .center-board,
    .dice-tray,
    .game-panel .dice-tray { max-width: min(310px, 100%) !important; }
    .action-panel .target-control { min-width: 144px !important; }
    .chat-panel { width: min(286px, 50vw) !important; max-width: 286px !important; }
    .chat-messages { max-height: min(180px, calc(100dvh - 112px)) !important; }
}

@media (max-height: 390px) and (orientation: landscape) {
    .chat-panel { max-height: calc(100dvh - 12px) !important; }
    .chat-messages { max-height: 145px !important; }
    .log { max-height: 34px !important; }
    .dice-tray { padding-top: 4px !important; padding-bottom: 4px !important; }
    .my-dice .die { width: 30px !important; height: 30px !important; }
}

/* === v6: 主题提示框 + 真正自适应缩放布局 === */
:root { --ui-scale: 1; }

/* 自定义确认/提示框：替换浏览器原生 confirm/alert 风格 */
.app-dialog.hidden { display: none !important; }
.app-dialog {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 18px;
}
.app-dialog-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(139, 76, 255, .26), transparent 38%),
        rgba(2, 4, 18, .68);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .18s ease;
}
.app-dialog-panel {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    border-radius: 24px;
    border-color: rgba(181, 118, 255, .36);
    background:
        linear-gradient(180deg, rgba(50, 36, 96, .94), rgba(10, 12, 34, .96)),
        radial-gradient(circle at 20% 0%, rgba(187, 92, 255, .24), transparent 45%);
    box-shadow:
        0 28px 90px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 42px rgba(133, 72, 255, .22),
        inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(14px) scale(.96);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2, 1.25, .3, 1), opacity .18s ease;
}
.app-dialog.is-visible .app-dialog-backdrop { opacity: 1; }
.app-dialog.is-visible .app-dialog-panel { opacity: 1; transform: translateY(0) scale(1); }
.app-dialog-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #21112c;
    font-size: 26px;
    font-weight: 1000;
    background: linear-gradient(135deg, #ffd76b, #ff9a16);
    box-shadow: 0 0 26px rgba(255, 189, 49, .35), inset 0 1px 0 rgba(255,255,255,.45);
}
.app-dialog-success .app-dialog-icon { background: linear-gradient(135deg, #3cff9d, #8cff55); }
.app-dialog-error .app-dialog-icon { color:#fff; background: linear-gradient(135deg, #ff5570, #ff8e55); }
.app-dialog-body h3 {
    margin: 2px 0 8px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: .02em;
}
.app-dialog-body p {
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    font-size: 14px;
    word-break: break-word;
}
.app-dialog-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
.app-dialog-actions button {
    min-width: 98px;
    height: 42px;
    padding: 0 18px;
}

/* 让 toast 也统一成当前主题的提示框视觉 */
.toast {
    border-radius: 20px !important;
    border-color: rgba(180, 120, 255, .34) !important;
    background:
        linear-gradient(180deg, rgba(43, 34, 92, .96), rgba(9, 11, 32, .94)) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.46),
        0 0 30px rgba(132, 74, 255, .20),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.toast-icon {
    box-shadow: 0 0 18px rgba(255, 215, 107, .32), inset 0 1px 0 rgba(255,255,255,.45);
}
.toast-success { border-color: rgba(82, 255, 150, .34) !important; }
.toast-error { border-color: rgba(255, 85, 112, .42) !important; }

body.fit-scale {
    width: 100vw;
    height: 100dvh;
    overflow: hidden !important;
}
body.fit-scale .page {
    width: calc(100vw / var(--ui-scale)) !important;
    height: calc(100dvh / var(--ui-scale)) !important;
    max-width: none !important;
    min-width: 1180px !important;
    margin: 0 !important;
    padding: 8px !important;
    transform: scale(var(--ui-scale));
    transform-origin: left top;
    overflow: hidden !important;
}
body.fit-scale .topbar {
    height: 54px !important;
    margin: 0 0 8px !important;
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr) 82px !important;
    gap: 8px !important;
    align-items: stretch !important;
}
body.fit-scale .brand-card,
body.fit-scale .status-card,
body.fit-scale .icon-btn {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 16px !important;
    padding: 8px 14px !important;
}
body.fit-scale .brand-sub,
body.fit-scale .status-card span { display: none !important; }
body.fit-scale .brand-title { font-size: 18px !important; line-height: 1.2 !important; }
body.fit-scale .status-card { gap: 18px !important; }
body.fit-scale .status-card div { min-width: 110px !important; }
body.fit-scale .status-card b { font-size: 20px !important; line-height: 1.1 !important; }
body.fit-scale .status-card i { height: 24px !important; }

body.fit-scale .room-layout {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 230px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    height: calc(100% - 62px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
    padding-bottom: 74px !important;
    overflow: hidden !important;
}
body.fit-scale .game-stage {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
body.fit-scale .side-panel {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 18px !important;
}
body.fit-scale .room-head {
    height: 48px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) auto !important;
    align-items: center !important;
}
body.fit-scale .room-head .self-card { display: none !important; }
body.fit-scale .room-head strong { font-size: 18px !important; margin-top: 0 !important; }
body.fit-scale .room-meta { display: none !important; }
body.fit-scale #copyRoomBtn { height: 34px !important; padding: 0 14px !important; border-radius: 13px !important; }
body.fit-scale .room-notice {
    position: absolute !important;
    left: 50% !important;
    top: 58px !important;
    transform: translateX(-50%) !important;
    width: min(520px, 54%) !important;
    margin: 0 !important;
    z-index: 40 !important;
    pointer-events: none !important;
}
body.fit-scale .table-shell {
    position: relative !important;
    height: calc(100% - 54px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}
body.fit-scale .table-shell::before { display: block !important; opacity: .72 !important; }

body.fit-scale {
    --fit-side: 166px;
    --fit-gap: 10px;
}
body.fit-scale .players-orbit,
body.fit-scale .players-orbit.waiting-orbit,
body.fit-scale .players-orbit.playing-orbit,
body.fit-scale .players-orbit[class*="count-"] {
    position: absolute !important;
    inset: 6px !important;
    display: grid !important;
    grid-template-columns: var(--fit-side) minmax(0, 1fr) var(--fit-side) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px var(--fit-gap) !important;
    align-items: center !important;
    align-content: stretch !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
body.fit-scale .players-orbit[class*="count-"] > .player-card,
body.fit-scale .players-orbit[class*="count-"] > .player-card[class*="seat-"],
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(n) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    max-height: 62px !important;
    padding: 6px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    justify-self: stretch !important;
    pointer-events: auto !important;
}
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(odd) { grid-column: 1 !important; }
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(even) { grid-column: 3 !important; }
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(1),
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(2) { grid-row: 1 !important; }
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(3),
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(4) { grid-row: 2 !important; }
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(5),
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(6) { grid-row: 3 !important; }
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(7),
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(8) { grid-row: 4 !important; }
body.fit-scale .players-orbit .avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
body.fit-scale .player-name { font-size: 11px !important; }
body.fit-scale .player-meta { font-size: 9px !important; gap: 3px !important; }
body.fit-scale .state-chip { padding: 1px 4px !important; font-size: 9px !important; }
body.fit-scale .mini-dice-row { display: none !important; }

body.fit-scale .waiting-panel,
body.fit-scale .game-panel {
    position: absolute !important;
    left: calc(var(--fit-side) + var(--fit-gap) + 14px) !important;
    right: calc(var(--fit-side) + var(--fit-gap) + 14px) !important;
    top: 6px !important;
    bottom: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
    z-index: 8 !important;
    scrollbar-width: thin !important;
}
body.fit-scale .waiting-panel {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    padding: 10px !important;
}
body.fit-scale .waiting-dice span { width: 28px !important; height: 28px !important; border-radius: 9px !important; }
body.fit-scale .waiting-panel h2 { font-size: 24px !important; margin: 0 !important; }
body.fit-scale .waiting-actions button { height: 36px !important; padding: 0 14px !important; }
body.fit-scale .stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
}
body.fit-scale .stats-row div { padding: 8px 10px !important; border-radius: 13px !important; }
body.fit-scale .stats-row span { display: none !important; }
body.fit-scale .stats-row b { font-size: 14px !important; }
body.fit-scale .table-area {
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
    gap: 8px !important;
}
body.fit-scale .center-board,
body.fit-scale .game-panel .center-board {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
body.fit-scale .bid-box { padding: 10px 12px !important; border-radius: 16px !important; }
body.fit-scale .current-bid { font-size: 28px !important; margin-top: 4px !important; }
body.fit-scale .mini-log-card { margin-top: 8px !important; padding: 10px !important; border-radius: 16px !important; }
body.fit-scale .mini-log-card .section-title { margin-bottom: 6px !important; font-size: 13px !important; }
body.fit-scale .log { max-height: 76px !important; gap: 5px !important; }
body.fit-scale .log-line { padding: 5px 8px !important; font-size: 11px !important; }
body.fit-scale .dice-tray,
body.fit-scale .game-panel .dice-tray {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border-radius: 18px !important;
}
body.fit-scale .dice-tray .section-title { display: none !important; }
body.fit-scale .turn-hint { font-size: 12px !important; margin-bottom: 4px !important; }
body.fit-scale .my-dice { gap: 8px !important; }
body.fit-scale .my-dice .die { width: 42px !important; height: 42px !important; }

body.fit-scale .action-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 140px 140px 140px minmax(190px, 1fr) 170px 150px auto !important;
    gap: 8px !important;
    align-items: end !important;
    padding: 8px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    z-index: 60 !important;
}
body.fit-scale .action-panel .control-item { min-width: 0 !important; height: auto !important; }
body.fit-scale .action-panel .control-item > label:not(.switch-box) { display: block !important; font-size: 11px !important; margin-bottom: 4px !important; }
body.fit-scale .action-panel select,
body.fit-scale .action-panel .switch-box { height: 36px !important; min-height: 36px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 13px !important; }
body.fit-scale .action-panel .zhai-control { min-width: 0 !important; align-self: end !important; }
body.fit-scale .action-panel .switch-box { justify-content: flex-start !important; gap: 8px !important; }
body.fit-scale .switch-ui { width: 40px !important; height: 22px !important; flex: none !important; }
body.fit-scale .switch-ui::before { width: 18px !important; height: 18px !important; top: 2px !important; left: 2px !important; }
body.fit-scale .switch-box input:checked + .switch-ui::before { transform: translateX(18px) !important; }
body.fit-scale .switch-text { font-size: 13px !important; min-width: 32px !important; white-space: nowrap !important; }
body.fit-scale .action-btn,
body.fit-scale .next-round { min-height: 48px !important; height: 48px !important; border-radius: 16px !important; font-size: 18px !important; }
body.fit-scale .action-btn::after { font-size: 18px !important; left: 12px !important; }
body.fit-scale .action-collapse-btn {
    position: absolute !important;
    right: 14px !important;
    bottom: 68px !important;
    height: 26px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    z-index: 65 !important;
}
body.fit-scale .action-panel.is-collapsed { transform: translateY(calc(100% - 26px)) !important; height: 66px !important; }
body.fit-scale .action-panel.is-collapsed .control-item,
body.fit-scale .action-panel.is-collapsed .action-btn,
body.fit-scale .action-panel.is-collapsed .next-round { opacity: 0 !important; pointer-events: none !important; }
body.fit-scale.room-waiting .action-panel,
body.fit-scale[data-room-status="waiting"] .action-panel,
body.fit-scale[data-room-status="waiting"] .action-collapse-btn { display: none !important; }

body.fit-scale .history-fab,
body.fit-scale .chat-fab {
    width: 54px !important;
    height: 34px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    z-index: 90 !important;
}
body.fit-scale .chat-fab { left: 10px !important; bottom: 10px !important; }
body.fit-scale .history-fab { right: 10px !important; bottom: 10px !important; }
body.fit-scale .chat-panel {
    left: 10px !important;
    bottom: 10px !important;
    width: min(300px, calc(100vw - 20px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
}
body.fit-scale .chat-messages { max-height: min(190px, calc(100dvh - 120px)) !important; }
body.fit-scale .history-panel {
    right: 10px !important;
    top: 10px !important;
    width: min(310px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

@media (max-width: 760px) and (orientation: landscape) {
    body.fit-scale { --fit-side: 154px; --fit-gap: 8px; }
    body.fit-scale .page { min-width: 1120px !important; }
    body.fit-scale .room-layout { grid-template-columns: minmax(0, 1fr) 210px !important; }
    body.fit-scale .side-panel { padding: 8px !important; }
    body.fit-scale .players-orbit[class*="count-"] > .player-card,
    body.fit-scale .players-orbit[class*="count-"] > .player-card[class*="seat-"] {
        max-height: 56px !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }
    body.fit-scale .player-meta { line-height: 1.1 !important; }
    body.fit-scale .log { max-height: 62px !important; }
    body.fit-scale .my-dice .die { width: 38px !important; height: 38px !important; }
}

/* === v7 final: fixed-size scaled canvas + compact themed dialogs ===
   手机横屏/小屏幕不再横向溢出；右侧设置改成浮层；提示框自适应缩小。 */
:root {
    --fit-width: 1080px;
    --fit-height: 530px;
}

/* 主题确认框整体缩小，并且任何屏幕都能自适应 */
.app-dialog {
    padding: clamp(8px, 2vw, 18px) !important;
}
.app-dialog-panel {
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 16px !important;
    border-radius: 20px !important;
}
.app-dialog-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
    font-size: 22px !important;
}
.app-dialog-body h3 {
    margin: 0 0 6px !important;
    font-size: 19px !important;
}
.app-dialog-body p {
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.app-dialog-actions {
    gap: 8px !important;
    margin-top: 8px !important;
}
.app-dialog-actions button {
    min-width: 78px !important;
    height: 36px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
}

.settings-fab { display: none; }

body.fit-scale {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
body.fit-scale .page {
    position: fixed !important;
    left: 50% !important;
    top: 0 !important;
    width: var(--fit-width) !important;
    height: var(--fit-height) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-rows: 46px minmax(0, 1fr) !important;
    gap: 6px !important;
    transform: translateX(-50%) scale(var(--ui-scale)) !important;
    transform-origin: top center !important;
    overflow: hidden !important;
}
body.fit-scale .topbar {
    height: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 78px !important;
    gap: 8px !important;
    margin: 0 !important;
}
body.fit-scale .brand-card,
body.fit-scale .status-card,
body.fit-scale .icon-btn {
    height: 46px !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    padding: 7px 13px !important;
}
body.fit-scale .brand-title { font-size: 17px !important; line-height: 1.1 !important; }
body.fit-scale .brand-sub,
body.fit-scale .status-card span { display: none !important; }
body.fit-scale .status-card {
    justify-self: stretch !important;
    width: 100% !important;
    gap: 18px !important;
}
body.fit-scale .status-card div { min-width: 84px !important; }
body.fit-scale .status-card b { font-size: 19px !important; line-height: 1 !important; }
body.fit-scale .status-card i { height: 24px !important; }
body.fit-scale .icon-btn { min-width: 78px !important; font-size: 14px !important; }

body.fit-scale .room-layout {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
}
body.fit-scale .side-panel {
    display: none !important;
}
body.fit-scale .game-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}
body.fit-scale .game-stage::before {
    left: 50% !important;
    top: 53% !important;
    width: 980px !important;
    max-width: none !important;
    height: 360px !important;
    opacity: .75 !important;
}
body.fit-scale .room-head {
    height: 48px !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-radius: 16px !important;
}
body.fit-scale .room-head strong { font-size: 18px !important; line-height: 1.1 !important; }
body.fit-scale .room-head .muted { font-size: 11px !important; }
body.fit-scale .room-meta,
body.fit-scale .self-card { display: none !important; }
body.fit-scale .room-head .ghost-btn,
body.fit-scale #copyRoomBtn {
    min-width: 96px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}
body.fit-scale .room-notice {
    top: 56px !important;
    max-width: 420px !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    z-index: 150 !important;
}
body.fit-scale .table-shell {
    position: relative !important;
    height: calc(100% - 54px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* 小屏固定左右两列玩家，中间只给核心内容 */
body.fit-scale { --fit-side: 166px; --fit-gap: 10px; }
body.fit-scale .players-orbit,
body.fit-scale .players-orbit.waiting-orbit,
body.fit-scale .players-orbit.playing-orbit,
body.fit-scale .players-orbit[class*="count-"] {
    position: absolute !important;
    inset: 8px !important;
    display: grid !important;
    grid-template-columns: var(--fit-side) minmax(0, 1fr) var(--fit-side) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px var(--fit-gap) !important;
    align-items: center !important;
    align-content: stretch !important;
    overflow: hidden !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
body.fit-scale .players-orbit > .player-card,
body.fit-scale .players-orbit > .player-card[class*="seat-"],
body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(n) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: 60px !important;
    padding: 6px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    justify-self: stretch !important;
    pointer-events: auto !important;
    overflow: hidden !important;
}
body.fit-scale .players-orbit > .player-card:nth-child(odd) { grid-column: 1 !important; }
body.fit-scale .players-orbit > .player-card:nth-child(even) { grid-column: 3 !important; }
body.fit-scale .players-orbit > .player-card:nth-child(1),
body.fit-scale .players-orbit > .player-card:nth-child(2) { grid-row: 1 !important; }
body.fit-scale .players-orbit > .player-card:nth-child(3),
body.fit-scale .players-orbit > .player-card:nth-child(4) { grid-row: 2 !important; }
body.fit-scale .players-orbit > .player-card:nth-child(5),
body.fit-scale .players-orbit > .player-card:nth-child(6) { grid-row: 3 !important; }
body.fit-scale .players-orbit > .player-card:nth-child(7),
body.fit-scale .players-orbit > .player-card:nth-child(8) { grid-row: 4 !important; }
body.fit-scale .players-orbit .avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
body.fit-scale .player-name { font-size: 11px !important; }
body.fit-scale .player-meta { font-size: 9px !important; gap: 3px !important; line-height: 1.05 !important; }
body.fit-scale .state-chip { padding: 1px 4px !important; font-size: 9px !important; }
body.fit-scale .mini-dice-row { display: none !important; }

body.fit-scale .waiting-panel,
body.fit-scale .game-panel {
    position: absolute !important;
    left: calc(var(--fit-side) + var(--fit-gap) + 18px) !important;
    right: calc(var(--fit-side) + var(--fit-gap) + 18px) !important;
    top: 8px !important;
    bottom: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
    z-index: 10 !important;
    scrollbar-width: thin !important;
}
body.fit-scale.room-playing .game-panel,
body.fit-scale[data-room-status="playing"] .game-panel,
body.fit-scale[data-room-status="round_over"] .game-panel {
    bottom: 78px !important;
}
body.fit-scale .room-layout.actions-collapsed .game-panel { bottom: 32px !important; }
body.fit-scale .waiting-panel {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    padding: 10px !important;
}
body.fit-scale .waiting-dice span { width: 28px !important; height: 28px !important; border-radius: 9px !important; }
body.fit-scale .waiting-panel h2 { font-size: 24px !important; margin: 2px 0 4px !important; }
body.fit-scale .waiting-panel .tip { font-size: 12px !important; line-height: 1.45 !important; max-width: 430px !important; }
body.fit-scale .waiting-actions { gap: 8px !important; }
body.fit-scale .waiting-actions button { height: 34px !important; min-height: 34px !important; padding: 0 14px !important; border-radius: 999px !important; }

body.fit-scale .stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
}
body.fit-scale .stats-row div { padding: 7px 10px !important; border-radius: 13px !important; }
body.fit-scale .stats-row span { display: none !important; }
body.fit-scale .stats-row b { font-size: 14px !important; }
body.fit-scale .table-area {
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
}
body.fit-scale .center-board,
body.fit-scale .game-panel .center-board,
body.fit-scale .dice-tray,
body.fit-scale .game-panel .dice-tray {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
body.fit-scale .bid-box { padding: 9px 12px !important; border-radius: 16px !important; }
body.fit-scale .bid-box .muted { font-size: 12px !important; }
body.fit-scale .current-bid { font-size: 28px !important; margin-top: 3px !important; }
body.fit-scale .mini-log-card { margin-top: 8px !important; padding: 9px !important; border-radius: 16px !important; }
body.fit-scale .mini-log-card .section-title { margin-bottom: 5px !important; font-size: 13px !important; }
body.fit-scale .log { max-height: 78px !important; gap: 5px !important; }
body.fit-scale .log-line { padding: 5px 7px !important; font-size: 11px !important; }
body.fit-scale .dice-tray { padding: 9px !important; border-radius: 18px !important; }
body.fit-scale .dice-tray .section-title { display: none !important; }
body.fit-scale .turn-hint { font-size: 12px !important; margin-bottom: 4px !important; min-height: 14px !important; }
body.fit-scale .my-dice { gap: 8px !important; }
body.fit-scale .my-dice .die { width: 40px !important; height: 40px !important; }

/* 底部操作条固定在设计画布内；不产生横向滚动 */
body.fit-scale .action-panel {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    height: 64px !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 126px 126px 122px minmax(170px, 1fr) 160px 126px 66px !important;
    gap: 8px !important;
    align-items: end !important;
    padding: 7px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    z-index: 70 !important;
}
body.fit-scale .action-panel .control-item { min-width: 0 !important; height: auto !important; }
body.fit-scale .action-panel .control-item > label:not(.switch-box) {
    display: block !important;
    font-size: 11px !important;
    margin: 0 0 4px !important;
    text-align: left !important;
}
body.fit-scale .action-panel select,
body.fit-scale .action-panel .switch-box {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}
body.fit-scale .action-panel .zhai-control { min-width: 122px !important; align-self: end !important; }
body.fit-scale .action-panel .zhai-control label:not(.switch-box) { text-align: left !important; }
body.fit-scale .action-panel .switch-box { justify-content: flex-start !important; gap: 8px !important; }
body.fit-scale .switch-ui { width: 39px !important; height: 22px !important; flex: none !important; }
body.fit-scale .switch-ui::before { width: 18px !important; height: 18px !important; top: 2px !important; left: 2px !important; }
body.fit-scale .switch-box input:checked + .switch-ui::before { transform: translateX(17px) !important; }
body.fit-scale .switch-text { font-size: 13px !important; min-width: 32px !important; white-space: nowrap !important; text-align: left !important; }
body.fit-scale .action-btn,
body.fit-scale .next-round {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
}
body.fit-scale .action-btn::after { font-size: 16px !important; left: 12px !important; }
body.fit-scale .action-collapse-btn {
    position: absolute !important;
    right: 12px !important;
    bottom: 68px !important;
    height: 26px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    z-index: 75 !important;
}
body.fit-scale .action-panel.is-collapsed { transform: translateY(calc(100% - 26px)) !important; }
body.fit-scale .action-panel.is-collapsed .control-item,
body.fit-scale .action-panel.is-collapsed .action-btn,
body.fit-scale .action-panel.is-collapsed .next-round { opacity: 0 !important; pointer-events: none !important; }
body.fit-scale[data-room-status="waiting"] .action-panel,
body.fit-scale[data-room-status="waiting"] .action-collapse-btn,
body.fit-scale .room-waiting .action-panel { display: none !important; }

body.fit-scale .history-fab,
body.fit-scale .chat-fab,
body.fit-scale .settings-fab {
    display: flex !important;
    position: absolute !important;
    width: 54px !important;
    height: 32px !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    z-index: 110 !important;
}
body.fit-scale .chat-fab { left: 10px !important; bottom: 10px !important; }
body.fit-scale .history-fab { right: 10px !important; bottom: 10px !important; }
body.fit-scale .settings-fab { right: 72px !important; bottom: 10px !important; }
body.fit-scale .room-layout.actions-collapsed .chat-fab,
body.fit-scale .room-layout.actions-collapsed .history-fab,
body.fit-scale .room-layout.actions-collapsed .settings-fab { bottom: 10px !important; }

body.fit-scale .history-panel,
body.fit-scale .chat-panel {
    position: fixed !important;
    width: 300px !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
body.fit-scale .history-panel { right: 9px !important; top: 9px !important; }
body.fit-scale .chat-panel { left: 9px !important; bottom: 9px !important; }
body.fit-scale .history-head,
body.fit-scale .chat-head { margin-bottom: 8px !important; }
body.fit-scale .history-head strong,
body.fit-scale .chat-head strong { font-size: 16px !important; }
body.fit-scale .history-head .icon-btn,
body.fit-scale .chat-head .icon-btn { min-width: 52px !important; height: 30px !important; padding: 0 8px !important; font-size: 12px !important; }
body.fit-scale .full-history { max-height: calc(100dvh - 86px) !important; overflow: auto !important; }
body.fit-scale .history-item { padding: 7px 8px !important; border-radius: 12px !important; }
body.fit-scale .history-top b,
body.fit-scale .history-open,
body.fit-scale .history-line,
body.fit-scale .history-summary { font-size: 11px !important; }
body.fit-scale .chat-messages { max-height: min(170px, calc(100dvh - 118px)) !important; }
body.fit-scale .chat-msg { max-width: 88% !important; }
body.fit-scale .chat-input-row { gap: 6px !important; }
body.fit-scale .chat-input-row input { height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }
body.fit-scale .chat-input-row .primary-btn { height: 34px !important; min-width: 58px !important; padding: 0 10px !important; }

/* 小屏右侧设置不占布局宽度，需要时作为浮层打开 */
body.fit-scale .room-layout.settings-open .side-panel {
    display: block !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 270px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    overflow: auto !important;
    z-index: 140 !important;
    background: linear-gradient(180deg, rgba(45, 34, 88, .96), rgba(10, 12, 34, .98)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.08) !important;
}
body.fit-scale .room-layout.settings-open::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 130;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
}
body.fit-scale .room-layout.settings-open .settings-fab { z-index: 150 !important; }
body.fit-scale .room-layout.settings-open .side-panel .section-title { font-size: 14px !important; margin-bottom: 8px !important; }
body.fit-scale .room-layout.settings-open .side-panel label { font-size: 11px !important; margin-bottom: 8px !important; }
body.fit-scale .room-layout.settings-open .side-panel select,
body.fit-scale .room-layout.settings-open .side-panel input { min-height: 32px !important; padding: 6px 8px !important; border-radius: 11px !important; font-size: 12px !important; }
body.fit-scale .room-layout.settings-open .history-list.compact-history { max-height: 130px !important; }
body.fit-scale .room-layout.settings-open .rule-list p,
body.fit-scale .room-layout.settings-open .settings-tip { font-size: 11px !important; line-height: 1.35 !important; }
body.fit-scale .room-layout.settings-open .full-btn { min-height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }

body.fit-scale .modal-content {
    width: min(330px, calc(100vw - 24px)) !important;
    padding: 16px !important;
    border-radius: 20px !important;
}
body.fit-scale .modal-content h2 { font-size: 24px !important; }
body.fit-scale .modal-content p { font-size: 13px !important; line-height: 1.55 !important; }

@media (max-width: 760px) and (orientation: landscape) {
    body.fit-scale { --fit-side: 150px; --fit-gap: 8px; }
    body.fit-scale .topbar { grid-template-columns: 210px minmax(0, 1fr) 72px !important; }
    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"] {
        min-height: 44px !important;
        max-height: 54px !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        padding: 5px !important;
    }
    body.fit-scale .players-orbit .avatar { width: 30px !important; height: 30px !important; }
    body.fit-scale .player-name { font-size: 10px !important; }
    body.fit-scale .player-meta { font-size: 8px !important; }
    body.fit-scale .log { max-height: 62px !important; }
    body.fit-scale .my-dice .die { width: 36px !important; height: 36px !important; }
    body.fit-scale .action-panel {
        grid-template-columns: 116px 116px 112px minmax(150px, 1fr) 150px 116px 60px !important;
        gap: 6px !important;
    }
}

/* === v6: 多分辨率布局兜底版
   桌面端保留原桌面布局；手机横屏/小屏幕使用独立布局，不再依赖桌面端缩放。
   目标：页面自身不产生横向滚动，玩家固定左右，中间内容在中区内部滚动。 */
@media (orientation: landscape) and (max-width: 980px), (max-height: 560px) and (max-width: 1180px) {
    html,
    body {
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.fit-scale .page,
    .page {
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body.fit-scale .topbar,
    .topbar {
        height: 48px !important;
        display: grid !important;
        grid-template-columns: clamp(150px, 25vw, 210px) minmax(0, 1fr) 58px !important;
        gap: 6px !important;
        margin: 0 0 5px !important;
        align-items: stretch !important;
    }

    body.fit-scale .brand-card,
    body.fit-scale .status-card,
    body.fit-scale .icon-btn,
    .brand-card,
    .status-card,
    .icon-btn {
        height: 48px !important;
        min-height: 0 !important;
        padding: 6px 10px !important;
        border-radius: 13px !important;
    }

    .brand-title,
    body.fit-scale .brand-title {
        font-size: clamp(14px, 2.1vw, 17px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand-sub,
    body.fit-scale .brand-sub,
    .status-card span,
    body.fit-scale .status-card span {
        display: none !important;
    }

    .status-card,
    body.fit-scale .status-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) !important;
        gap: 0 !important;
        justify-items: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .status-card div,
    body.fit-scale .status-card div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .status-card b,
    body.fit-scale .status-card b {
        font-size: clamp(15px, 2.4vw, 19px) !important;
        line-height: 1 !important;
    }

    .status-card i,
    body.fit-scale .status-card i {
        display: block !important;
        width: 1px !important;
        height: 22px !important;
        background: rgba(255,255,255,.15) !important;
    }

    #leaveBtn,
    body.fit-scale #leaveBtn {
        min-width: 0 !important;
        width: 58px !important;
        padding: 0 !important;
        font-size: 13px !important;
        justify-self: stretch !important;
    }

    body.fit-scale .room-layout,
    .room-layout {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: calc(100dvh - 58px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.fit-scale .game-stage,
    .game-stage {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 6px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    body.fit-scale .game-stage::before,
    .game-stage::before {
        height: 72% !important;
        width: 105% !important;
        top: 56% !important;
        opacity: .72 !important;
    }

    body.fit-scale .side-panel,
    .side-panel {
        display: none !important;
    }

    body.fit-scale .room-head,
    .room-head {
        height: 44px !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(90px, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 5px 8px !important;
        border-radius: 12px !important;
    }

    .room-head .self-card,
    body.fit-scale .room-head .self-card {
        display: none !important;
    }

    .room-head .muted,
    body.fit-scale .room-head .muted {
        font-size: 10px !important;
        display: block !important;
        line-height: 1.1 !important;
    }

    .room-head strong,
    body.fit-scale .room-head strong {
        font-size: 15px !important;
        line-height: 1 !important;
        margin: 2px 0 0 !important;
    }

    .room-meta,
    body.fit-scale .room-meta {
        display: none !important;
    }

    #copyRoomBtn,
    body.fit-scale #copyRoomBtn {
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.fit-scale .table-shell,
    .table-shell {
        --phone-side: clamp(104px, 18vw, 136px);
        --phone-gap: 6px;
        position: relative !important;
        height: calc(100% - 48px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.fit-scale .table-shell::before,
    .table-shell::before {
        display: block !important;
        width: 88% !important;
        height: 72% !important;
        top: 52% !important;
        opacity: .62 !important;
    }

    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit.waiting-orbit,
    body.fit-scale .players-orbit.playing-orbit,
    body.fit-scale .players-orbit[class*="count-"],
    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"] {
        position: absolute !important;
        inset: 7px 4px 8px !important;
        display: grid !important;
        grid-template-columns: var(--phone-side) minmax(0, 1fr) var(--phone-side) !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px var(--phone-gap) !important;
        margin: 0 !important;
        overflow: hidden !important;
        align-items: center !important;
        align-content: stretch !important;
        pointer-events: none !important;
        z-index: 4 !important;
    }

    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"],
    body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(n),
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card:nth-child(n) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: min(54px, 100%) !important;
        max-height: 54px !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 5px !important;
        padding: 5px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        animation: none !important;
    }

    .players-orbit > .player-card:nth-child(odd),
    body.fit-scale .players-orbit > .player-card:nth-child(odd) { grid-column: 1 !important; justify-self: stretch !important; }
    .players-orbit > .player-card:nth-child(even),
    body.fit-scale .players-orbit > .player-card:nth-child(even) { grid-column: 3 !important; justify-self: stretch !important; }
    .players-orbit > .player-card:nth-child(1),
    .players-orbit > .player-card:nth-child(2),
    body.fit-scale .players-orbit > .player-card:nth-child(1),
    body.fit-scale .players-orbit > .player-card:nth-child(2) { grid-row: 1 !important; }
    .players-orbit > .player-card:nth-child(3),
    .players-orbit > .player-card:nth-child(4),
    body.fit-scale .players-orbit > .player-card:nth-child(3),
    body.fit-scale .players-orbit > .player-card:nth-child(4) { grid-row: 2 !important; }
    .players-orbit > .player-card:nth-child(5),
    .players-orbit > .player-card:nth-child(6),
    body.fit-scale .players-orbit > .player-card:nth-child(5),
    body.fit-scale .players-orbit > .player-card:nth-child(6) { grid-row: 3 !important; }
    .players-orbit > .player-card:nth-child(7),
    .players-orbit > .player-card:nth-child(8),
    body.fit-scale .players-orbit > .player-card:nth-child(7),
    body.fit-scale .players-orbit > .player-card:nth-child(8) { grid-row: 4 !important; }

    .players-orbit .avatar,
    body.fit-scale .players-orbit .avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .player-name,
    body.fit-scale .player-name {
        font-size: 10px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .player-name em,
    body.fit-scale .player-name em {
        padding: 0 4px !important;
        font-size: 8px !important;
    }

    .player-meta,
    body.fit-scale .player-meta {
        margin-top: 2px !important;
        gap: 2px !important;
        line-height: 1 !important;
        font-size: 8px !important;
    }

    .state-chip,
    body.fit-scale .state-chip {
        padding: 0 3px !important;
        font-size: 8px !important;
        line-height: 13px !important;
    }

    .player-meta .penalty,
    body.fit-scale .player-meta .penalty,
    .mini-dice-row,
    body.fit-scale .mini-dice-row {
        display: none !important;
    }

    body.fit-scale .waiting-panel,
    body.fit-scale .game-panel,
    .waiting-panel,
    .game-panel {
        position: absolute !important;
        left: calc(var(--phone-side) + var(--phone-gap) + 6px) !important;
        right: calc(var(--phone-side) + var(--phone-gap) + 6px) !important;
        top: 7px !important;
        bottom: 7px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: auto !important;
        z-index: 9 !important;
        scrollbar-width: thin !important;
    }

    body.fit-scale .room-layout.room-playing:not(.actions-collapsed) .game-panel,
    .room-layout.room-playing:not(.actions-collapsed) .game-panel {
        bottom: 74px !important;
    }

    body.fit-scale .waiting-panel,
    .waiting-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        gap: 7px !important;
    }

    .waiting-panel::before,
    body.fit-scale .waiting-panel::before {
        display: none !important;
    }

    .waiting-dice,
    body.fit-scale .waiting-dice { gap: 6px !important; margin: 0 !important; }
    .waiting-dice span,
    body.fit-scale .waiting-dice span { width: 24px !important; height: 24px !important; border-radius: 8px !important; }
    .waiting-panel h2,
    body.fit-scale .waiting-panel h2 { font-size: 20px !important; margin: 0 !important; }
    .waiting-panel .tip,
    body.fit-scale .waiting-panel .tip { font-size: 11px !important; line-height: 1.35 !important; margin: 0 !important; }
    .waiting-actions,
    body.fit-scale .waiting-actions { gap: 6px !important; margin: 0 !important; }
    .waiting-actions button,
    body.fit-scale .waiting-actions button { height: 30px !important; min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; }

    body.fit-scale .stats-row,
    .stats-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 0 6px !important;
    }

    .stats-row div,
    body.fit-scale .stats-row div {
        padding: 6px 7px !important;
        min-width: 0 !important;
        border-radius: 10px !important;
    }

    .stats-row span,
    body.fit-scale .stats-row span { display: none !important; }
    .stats-row b,
    body.fit-scale .stats-row b {
        display: block !important;
        font-size: clamp(11px, 1.8vw, 13px) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.fit-scale .table-area,
    .table-area {
        min-height: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
    }

    body.fit-scale .center-board,
    body.fit-scale .game-panel .center-board,
    .center-board,
    .game-panel .center-board {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .bid-box,
    body.fit-scale .bid-box {
        padding: 8px 10px !important;
        border-radius: 13px !important;
    }

    .bid-box .muted,
    body.fit-scale .bid-box .muted { font-size: 11px !important; }

    .current-bid,
    body.fit-scale .current-bid {
        font-size: clamp(22px, 4.2vw, 28px) !important;
        line-height: 1.1 !important;
        margin-top: 2px !important;
    }

    .mini-log-card,
    body.fit-scale .mini-log-card {
        margin-top: 6px !important;
        padding: 8px !important;
        border-radius: 13px !important;
    }

    .mini-log-card .section-title,
    body.fit-scale .mini-log-card .section-title {
        font-size: 12px !important;
        margin: 0 0 5px !important;
    }

    .log,
    body.fit-scale .log {
        max-height: clamp(58px, 18vh, 86px) !important;
        gap: 4px !important;
        overflow: auto !important;
    }

    .log-line,
    body.fit-scale .log-line {
        padding: 4px 6px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .dice-tray,
    body.fit-scale .dice-tray,
    .game-panel .dice-tray,
    body.fit-scale .game-panel .dice-tray {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 14px !important;
    }

    .dice-tray .section-title,
    body.fit-scale .dice-tray .section-title { display: none !important; }
    .turn-hint,
    body.fit-scale .turn-hint { min-height: 13px !important; font-size: 11px !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
    .my-dice,
    body.fit-scale .my-dice { gap: 5px !important; justify-content: center !important; }
    .my-dice .die,
    body.fit-scale .my-dice .die { width: clamp(28px, 5.4vw, 38px) !important; height: clamp(28px, 5.4vw, 38px) !important; }

    body.fit-scale .action-panel,
    .action-panel {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        height: 66px !important;
        min-height: 66px !important;
        width: auto !important;
        display: grid !important;
        grid-template-columns: 76px 86px 110px minmax(126px, 1fr) 114px 76px 54px !important;
        gap: 5px !important;
        align-items: end !important;
        padding: 6px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        z-index: 70 !important;
    }

    .action-panel .control-item,
    body.fit-scale .action-panel .control-item {
        min-width: 0 !important;
        height: auto !important;
        justify-content: flex-end !important;
    }

    .action-panel .control-item > label:not(.switch-box),
    body.fit-scale .action-panel .control-item > label:not(.switch-box) {
        display: block !important;
        height: 14px !important;
        line-height: 14px !important;
        font-size: 10px !important;
        margin: 0 0 3px !important;
        text-align: left !important;
    }

    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 7px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .action-panel .zhai-control,
    body.fit-scale .action-panel .zhai-control {
        min-width: 110px !important;
        align-self: end !important;
    }

    .action-panel .switch-box,
    body.fit-scale .action-panel .switch-box {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .switch-ui,
    body.fit-scale .switch-ui { width: 34px !important; height: 20px !important; flex: none !important; }
    .switch-ui::before,
    body.fit-scale .switch-ui::before { width: 16px !important; height: 16px !important; top: 2px !important; left: 2px !important; }
    .switch-box input:checked + .switch-ui::before,
    body.fit-scale .switch-box input:checked + .switch-ui::before { transform: translateX(14px) !important; }
    .switch-text,
    body.fit-scale .switch-text { min-width: 30px !important; font-size: 12px !important; text-align: left !important; white-space: nowrap !important; }

    .action-btn,
    .next-round,
    body.fit-scale .action-btn,
    body.fit-scale .next-round {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 13px !important;
        font-size: 16px !important;
    }

    .action-btn::after,
    body.fit-scale .action-btn::after { display: none !important; }

    .action-collapse-btn,
    body.fit-scale .action-collapse-btn {
        position: absolute !important;
        right: 8px !important;
        bottom: 70px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        z-index: 75 !important;
    }

    .action-panel.is-collapsed,
    body.fit-scale .action-panel.is-collapsed {
        transform: translateY(calc(100% - 24px)) !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    .action-panel.is-collapsed .control-item,
    .action-panel.is-collapsed .action-btn,
    .action-panel.is-collapsed .next-round,
    body.fit-scale .action-panel.is-collapsed .control-item,
    body.fit-scale .action-panel.is-collapsed .action-btn,
    body.fit-scale .action-panel.is-collapsed .next-round {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body[data-room-status="waiting"] .action-panel,
    body[data-room-status="waiting"] .action-collapse-btn,
    body.fit-scale[data-room-status="waiting"] .action-panel,
    body.fit-scale[data-room-status="waiting"] .action-collapse-btn,
    .room-layout.room-waiting .action-panel,
    .room-layout.room-waiting .action-collapse-btn {
        display: none !important;
    }

    .chat-fab,
    .history-fab,
    .settings-fab,
    body.fit-scale .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab {
        display: flex !important;
        position: absolute !important;
        width: 48px !important;
        height: 28px !important;
        min-width: 0 !important;
        border-radius: 999px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 11px !important;
        z-index: 90 !important;
    }

    .chat-fab,
    body.fit-scale .chat-fab { left: 6px !important; bottom: 6px !important; }
    .history-fab,
    body.fit-scale .history-fab { right: 6px !important; bottom: 6px !important; }
    .settings-fab,
    body.fit-scale .settings-fab { right: 60px !important; bottom: 6px !important; }
    .room-layout.room-playing:not(.actions-collapsed) .chat-fab,
    .room-layout.room-playing:not(.actions-collapsed) .history-fab,
    .room-layout.room-playing:not(.actions-collapsed) .settings-fab {
        display: none !important;
    }

    .room-notice,
    body.fit-scale .room-notice {
        position: absolute !important;
        top: 50px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(360px, calc(100% - 170px)) !important;
        padding: 7px 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        z-index: 80 !important;
    }

    .chat-panel,
    .history-panel,
    body.fit-scale .chat-panel,
    body.fit-scale .history-panel {
        position: fixed !important;
        width: min(300px, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        padding: 10px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    .chat-panel,
    body.fit-scale .chat-panel { left: 9px !important; bottom: 9px !important; }
    .history-panel,
    body.fit-scale .history-panel { right: 9px !important; top: 9px !important; }
    .chat-head,
    .history-head,
    body.fit-scale .chat-head,
    body.fit-scale .history-head { margin-bottom: 6px !important; }
    .chat-head strong,
    .history-head strong,
    body.fit-scale .chat-head strong,
    body.fit-scale .history-head strong { font-size: 14px !important; }
    .chat-head .icon-btn,
    .history-head .icon-btn,
    body.fit-scale .chat-head .icon-btn,
    body.fit-scale .history-head .icon-btn { min-width: 48px !important; height: 28px !important; padding: 0 8px !important; font-size: 11px !important; }
    .chat-messages,
    body.fit-scale .chat-messages { max-height: min(150px, calc(100dvh - 112px)) !important; }
    .full-history,
    body.fit-scale .full-history { max-height: calc(100dvh - 72px) !important; overflow: auto !important; }
    .history-item,
    body.fit-scale .history-item { padding: 6px 7px !important; border-radius: 10px !important; }
    .history-top b,
    .history-open,
    .history-line,
    .history-summary,
    body.fit-scale .history-top b,
    body.fit-scale .history-open,
    body.fit-scale .history-line,
    body.fit-scale .history-summary { font-size: 10px !important; }

    .app-dialog-panel,
    body.fit-scale .app-dialog-panel,
    .modal-content,
    body.fit-scale .modal-content {
        width: min(280px, calc(100vw - 22px)) !important;
        max-height: calc(100dvh - 22px) !important;
        padding: 12px !important;
        border-radius: 16px !important;
        overflow: auto !important;
    }

    .app-dialog-icon,
    body.fit-scale .app-dialog-icon { width: 34px !important; height: 34px !important; font-size: 18px !important; }
    .app-dialog-body h3,
    body.fit-scale .app-dialog-body h3 { font-size: 16px !important; margin: 0 0 5px !important; }
    .app-dialog-body p,
    body.fit-scale .app-dialog-body p { font-size: 12px !important; line-height: 1.45 !important; }
    .app-dialog-actions,
    body.fit-scale .app-dialog-actions { gap: 8px !important; margin-top: 10px !important; }
    .app-dialog-actions button,
    body.fit-scale .app-dialog-actions button { min-height: 32px !important; padding: 0 12px !important; font-size: 12px !important; }
}

/* 超窄横屏：进一步隐藏非关键文字，保证完整显示。 */
@media (orientation: landscape) and (max-width: 760px) {
    body.fit-scale .table-shell,
    .table-shell { --phone-side: clamp(84px, 17vw, 112px); }
    .player-name em,
    .state-chip.ai-chip,
    .player-meta .penalty { display: none !important; }
    .players-orbit .avatar,
    body.fit-scale .players-orbit .avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; }
    .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card { grid-template-columns: 24px minmax(0, 1fr) !important; padding: 4px !important; }
    .action-panel,
    body.fit-scale .action-panel {
        grid-template-columns: 64px 76px 94px minmax(100px, 1fr) 94px 64px 48px !important;
        gap: 4px !important;
    }
    .action-panel .control-item > label:not(.switch-box),
    body.fit-scale .action-panel .control-item > label:not(.switch-box) { display: none !important; }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box { height: 38px !important; min-height: 38px !important; }
    .action-panel .zhai-control,
    body.fit-scale .action-panel .zhai-control { min-width: 94px !important; }
}

/* === Mobile portrait layout v7: dedicated phone-first play mode ===
   桌面端继续使用大屏游戏桌布局；手机端改为竖屏专用布局，避免横向溢出。 */
@media (max-width: 900px) and (orientation: portrait) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-x: none !important;
    }

    body.fit-scale {
        --ui-scale: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* 手机端不再提示横屏，改为竖屏玩法。 */
    .rotate-hint { display: none !important; }

    .page,
    body.fit-scale .page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 100dvh !important;
        padding: 8px 8px calc(92px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        transform: none !important;
        transform-origin: initial !important;
        overflow: visible !important;
    }

    .topbar,
    body.fit-scale .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 95 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand leave"
            "status status" !important;
        gap: 6px !important;
        margin: 0 0 8px !important;
        padding-top: env(safe-area-inset-top) !important;
        background: linear-gradient(180deg, rgba(8, 10, 27, .96), rgba(8, 10, 27, .72) 82%, transparent) !important;
        backdrop-filter: blur(10px) !important;
    }

    .brand-card,
    body.fit-scale .brand-card {
        grid-area: brand !important;
        min-width: 0 !important;
        padding: 9px 12px !important;
        border-radius: 16px !important;
    }
    .brand-title,
    body.fit-scale .brand-title { font-size: 16px !important; line-height: 1.15 !important; }
    .brand-sub,
    body.fit-scale .brand-sub { display: none !important; }

    .status-card,
    body.fit-scale .status-card {
        grid-area: status !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px 8px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }
    .status-card div,
    body.fit-scale .status-card div { min-width: 0 !important; flex: 1 !important; }
    .status-card b,
    body.fit-scale .status-card b { font-size: 17px !important; white-space: nowrap !important; }
    .status-card span,
    body.fit-scale .status-card span { display: none !important; }
    .status-card i,
    body.fit-scale .status-card i { height: 22px !important; }

    #leaveBtn,
    body.fit-scale #leaveBtn {
        grid-area: leave !important;
        min-width: 58px !important;
        height: 38px !important;
        padding: 0 10px !important;
        justify-self: end !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    .room-layout,
    body.fit-scale .room-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        padding: 0 0 170px !important;
        margin: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }
    .room-layout.actions-collapsed,
    body.fit-scale .room-layout.actions-collapsed { padding-bottom: 58px !important; }
    .room-layout.room-waiting,
    body.fit-scale .room-layout.room-waiting { padding-bottom: 58px !important; }

    .game-stage,
    body.fit-scale .game-stage {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }
    .game-stage::before,
    body.fit-scale .game-stage::before {
        width: 118vw !important;
        height: 58vw !important;
        top: 34% !important;
        opacity: .72 !important;
    }

    .room-head,
    body.fit-scale .room-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 9px 10px !important;
        border-radius: 16px !important;
    }
    .room-head strong,
    body.fit-scale .room-head strong { font-size: 18px !important; margin-top: 2px !important; }
    .room-meta,
    .self-card,
    body.fit-scale .room-meta,
    body.fit-scale .self-card { display: none !important; }
    #copyRoomBtn,
    body.fit-scale #copyRoomBtn {
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .table-shell,
    body.fit-scale .table-shell {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 8px 0 0 !important;
        overflow: visible !important;
    }

    .players-orbit,
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    .players-orbit[class*="count-"],
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit.waiting-orbit,
    body.fit-scale .players-orbit.playing-orbit,
    body.fit-scale .players-orbit[class*="count-"] {
        order: 1 !important;
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 3 !important;
    }

    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card,
    .players-orbit[class*="count-"] > .player-card[class*="seat-"],
    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"],
    body.fit-scale .players-orbit[class*="count-"] > .player-card,
    body.fit-scale .players-orbit[class*="count-"] > .player-card[class*="seat-"] {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 52px !important;
        max-height: none !important;
        padding: 6px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    .player-card .avatar,
    body.fit-scale .player-card .avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .player-name,
    body.fit-scale .player-name { font-size: 11px !important; gap: 3px !important; }
    .player-meta,
    body.fit-scale .player-meta { margin-top: 2px !important; gap: 3px !important; font-size: 9px !important; line-height: 1.15 !important; }
    .state-chip,
    .player-name em,
    body.fit-scale .state-chip,
    body.fit-scale .player-name em { padding: 1px 4px !important; font-size: 9px !important; }
    .player-card .dice-row,
    .mini-dice-row,
    body.fit-scale .player-card .dice-row,
    body.fit-scale .mini-dice-row { display: none !important; }

    .waiting-panel,
    .game-panel,
    body.fit-scale .waiting-panel,
    body.fit-scale .game-panel {
        order: 2 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 4 !important;
    }

    .waiting-panel,
    body.fit-scale .waiting-panel {
        padding: 22px 10px !important;
        gap: 10px !important;
    }
    .waiting-panel h2,
    body.fit-scale .waiting-panel h2 { font-size: 24px !important; }
    .waiting-dice span,
    body.fit-scale .waiting-dice span { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
    .waiting-actions,
    body.fit-scale .waiting-actions { display: flex !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap !important; }
    .waiting-actions button,
    body.fit-scale .waiting-actions button { min-height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; }

    .stats-row,
    body.fit-scale .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin: 0 0 8px !important;
    }
    .stats-row div,
    body.fit-scale .stats-row div { padding: 7px 9px !important; border-radius: 13px !important; }
    .stats-row span,
    body.fit-scale .stats-row span { display: none !important; }
    .stats-row b,
    body.fit-scale .stats-row b { font-size: 13px !important; }

    .table-area,
    body.fit-scale .table-area {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .center-board,
    .game-panel .center-board,
    body.fit-scale .center-board,
    body.fit-scale .game-panel .center-board { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
    .bid-box,
    body.fit-scale .bid-box { padding: 10px !important; border-radius: 15px !important; }
    .current-bid,
    body.fit-scale .current-bid { font-size: 26px !important; margin-top: 2px !important; }
    .mini-log-card,
    body.fit-scale .mini-log-card { margin-top: 8px !important; padding: 9px !important; border-radius: 15px !important; }
    .mini-log-card .section-title,
    body.fit-scale .mini-log-card .section-title { font-size: 13px !important; margin-bottom: 6px !important; }
    .log,
    body.fit-scale .log { max-height: 92px !important; overflow: auto !important; gap: 5px !important; }
    .log-line,
    body.fit-scale .log-line { padding: 5px 7px !important; font-size: 11px !important; border-radius: 9px !important; }

    .dice-tray,
    .game-panel .dice-tray,
    body.fit-scale .dice-tray,
    body.fit-scale .game-panel .dice-tray {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }
    .dice-tray .section-title,
    body.fit-scale .dice-tray .section-title { display: none !important; }
    .turn-hint,
    body.fit-scale .turn-hint { min-height: 20px !important; margin-bottom: 5px !important; font-size: 12px !important; }
    .my-dice,
    body.fit-scale .my-dice { gap: clamp(5px, 2vw, 10px) !important; }
    .my-dice .die,
    body.fit-scale .my-dice .die { width: clamp(42px, 13vw, 58px) !important; height: clamp(42px, 13vw, 58px) !important; }

    /* 手机端侧栏都改为浮层，不占主布局宽度。 */
    .side-panel,
    body.fit-scale .side-panel {
        display: none !important;
        position: fixed !important;
        right: 8px !important;
        top: calc(72px + env(safe-area-inset-top)) !important;
        bottom: 62px !important;
        width: min(300px, calc(100vw - 16px)) !important;
        padding: 10px !important;
        z-index: 130 !important;
        overflow: auto !important;
        border-radius: 18px !important;
    }
    .room-layout.settings-open .side-panel,
    body.fit-scale .room-layout.settings-open .side-panel { display: block !important; }

    .history-fab,
    .settings-fab,
    .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab,
    body.fit-scale .chat-fab {
        position: fixed !important;
        width: 54px !important;
        height: 34px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        z-index: 105 !important;
    }
    .chat-fab,
    body.fit-scale .chat-fab { left: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
    .history-fab,
    body.fit-scale .history-fab { right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
    .settings-fab,
    body.fit-scale .settings-fab { right: 68px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
    .room-layout.room-playing:not(.actions-collapsed) .chat-fab,
    .room-layout.room-playing:not(.actions-collapsed) .history-fab,
    .room-layout.room-playing:not(.actions-collapsed) .settings-fab { display: none !important; }

    /* 底部操作栏：固定底部，展开时是抽屉；收起时只剩小把手，不再露出整块背景卡片。 */
    .action-panel,
    body.fit-scale .action-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(46dvh, 310px) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: end !important;
        padding: 36px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 120 !important;
        transform: none !important;
        box-shadow: 0 -16px 45px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14) !important;
    }
    .action-panel .control-item,
    body.fit-scale .action-panel .control-item { min-width: 0 !important; height: auto !important; }
    .action-panel .control-item > label:not(.switch-box),
    body.fit-scale .action-panel .control-item > label:not(.switch-box) {
        display: block !important;
        height: auto !important;
        margin: 0 0 5px !important;
        font-size: 12px !important;
        text-align: left !important;
    }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }
    .action-panel .zhai-control,
    body.fit-scale .action-panel .zhai-control { min-width: 0 !important; align-self: end !important; }
    .action-panel .switch-box,
    body.fit-scale .action-panel .switch-box { justify-content: flex-start !important; gap: 8px !important; }
    .switch-ui,
    body.fit-scale .switch-ui { width: 42px !important; height: 24px !important; flex: none !important; }
    .switch-ui::before,
    body.fit-scale .switch-ui::before { width: 20px !important; height: 20px !important; top: 2px !important; left: 2px !important; }
    .switch-box input:checked + .switch-ui::before,
    body.fit-scale .switch-box input:checked + .switch-ui::before { transform: translateX(18px) !important; }
    .switch-text,
    body.fit-scale .switch-text { min-width: 36px !important; font-size: 14px !important; text-align: left !important; white-space: nowrap !important; }

    .target-control,
    body.fit-scale .target-control { grid-column: 1 / -1 !important; }
    .action-btn,
    .next-round,
    body.fit-scale .action-btn,
    body.fit-scale .next-round {
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 15px !important;
        font-size: 18px !important;
    }
    .action-btn::after,
    body.fit-scale .action-btn::after { display: none !important; }
    .next-round,
    body.fit-scale .next-round { grid-column: 1 / -1 !important; }

    .action-collapse-btn,
    body.fit-scale .action-collapse-btn {
        position: absolute !important;
        top: 6px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        width: 118px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        z-index: 126 !important;
    }

    .action-panel.is-collapsed,
    body.fit-scale .action-panel.is-collapsed {
        height: calc(42px + env(safe-area-inset-bottom)) !important;
        min-height: calc(42px + env(safe-area-inset-bottom)) !important;
        max-height: calc(42px + env(safe-area-inset-bottom)) !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;
        overflow: hidden !important;
        display: block !important;
        transform: none !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .action-panel.is-collapsed .control-item,
    .action-panel.is-collapsed .action-btn,
    .action-panel.is-collapsed .next-round,
    body.fit-scale .action-panel.is-collapsed .control-item,
    body.fit-scale .action-panel.is-collapsed .action-btn,
    body.fit-scale .action-panel.is-collapsed .next-round {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .action-panel.is-collapsed .action-collapse-btn,
    body.fit-scale .action-panel.is-collapsed .action-collapse-btn {
        top: 8px !important;
    }

    body[data-room-status="waiting"] .action-panel,
    body[data-room-status="waiting"] .action-collapse-btn,
    .room-layout.room-waiting .action-panel,
    .room-layout.room-waiting .action-collapse-btn,
    body.fit-scale[data-room-status="waiting"] .action-panel,
    body.fit-scale[data-room-status="waiting"] .action-collapse-btn {
        display: none !important;
    }

    .room-notice,
    body.fit-scale .room-notice {
        position: fixed !important;
        top: calc(70px + env(safe-area-inset-top)) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        transform: none !important;
        padding: 8px 10px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        z-index: 140 !important;
    }

    .chat-panel,
    .history-panel,
    body.fit-scale .chat-panel,
    body.fit-scale .history-panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, 480px) !important;
        padding: 10px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }
    .chat-messages,
    body.fit-scale .chat-messages { max-height: min(48dvh, 300px) !important; }
    .full-history,
    body.fit-scale .full-history { max-height: min(56dvh, 360px) !important; overflow: auto !important; }

    .app-dialog-panel,
    body.fit-scale .app-dialog-panel,
    .modal-content,
    body.fit-scale .modal-content {
        width: min(320px, calc(100vw - 28px)) !important;
        max-height: calc(100dvh - 44px) !important;
        padding: 14px !important;
        border-radius: 18px !important;
        overflow: auto !important;
    }
    .app-dialog-icon,
    body.fit-scale .app-dialog-icon { width: 38px !important; height: 38px !important; font-size: 20px !important; }
    .app-dialog-body h3,
    body.fit-scale .app-dialog-body h3 { font-size: 17px !important; margin: 0 0 5px !important; }
    .app-dialog-body p,
    body.fit-scale .app-dialog-body p { font-size: 13px !important; line-height: 1.5 !important; }
    .app-dialog-actions button,
    body.fit-scale .app-dialog-actions button { min-height: 34px !important; padding: 0 12px !important; font-size: 13px !important; }

    .toast-root,
    body.fit-scale .toast-root { top: calc(10px + env(safe-area-inset-top)) !important; left: 10px !important; right: 10px !important; width: auto !important; }
    .toast,
    body.fit-scale .toast { padding: 9px 10px !important; border-radius: 14px !important; font-size: 12px !important; }
}

@media (max-width: 380px) and (orientation: portrait) {
    .players-orbit,
    .players-orbit[class*="count-"],
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit[class*="count-"] { grid-template-columns: 1fr !important; }
    .stats-row,
    body.fit-scale .stats-row { grid-template-columns: 1fr 1fr !important; }
    .my-dice .die,
    body.fit-scale .my-dice .die { width: 40px !important; height: 40px !important; }
    .action-panel,
    body.fit-scale .action-panel { grid-template-columns: 1fr !important; }
    .target-control,
    body.fit-scale .target-control { grid-column: auto !important; }
}

/* 手机横屏不再作为主要玩法，给用户一个轻提示，避免继续纠结横屏排版。 */
@media (max-width: 900px) and (orientation: landscape) {
    .rotate-hint {
        display: flex !important;
        position: fixed !important;
        inset: auto 12px 12px auto !important;
        z-index: 220 !important;
        pointer-events: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .rotate-card {
        width: 170px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        text-align: left !important;
        opacity: .92 !important;
    }
    .rotate-icon { display: none !important; }
    .rotate-card strong { display: block !important; font-size: 13px !important; margin: 0 0 2px !important; }
    .rotate-card span { display: block !important; font-size: 11px !important; line-height: 1.35 !important; }
}

/* === v8 final layout fixes: collapsed bar, mobile history safe area, dice safe spacing, fab alignment === */
/* 1) 收起操作栏时只保留一个小把手，不再露出整块 glass-card 背景。 */
.action-panel.is-collapsed,
body.fit-scale .action-panel.is-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: none !important;
}
.action-panel.is-collapsed::before,
.action-panel.is-collapsed::after,
body.fit-scale .action-panel.is-collapsed::before,
body.fit-scale .action-panel.is-collapsed::after {
    display: none !important;
}
.action-panel.is-collapsed .control-item,
.action-panel.is-collapsed .action-btn,
.action-panel.is-collapsed .next-round,
body.fit-scale .action-panel.is-collapsed .control-item,
body.fit-scale .action-panel.is-collapsed .action-btn,
body.fit-scale .action-panel.is-collapsed .next-round {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.action-panel.is-collapsed .action-collapse-btn,
body.fit-scale .action-panel.is-collapsed .action-collapse-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 104px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 130 !important;
    box-shadow: 0 10px 28px rgba(132, 74, 255, .36), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* 2) 电脑/平板端浮动按钮基线统一，展开操作栏时左右按钮保持同一水平。 */
@media (min-width: 901px) {
    .chat-fab,
    .history-fab,
    .settings-fab,
    body.fit-scale .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab {
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
        height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab,
    .room-layout.actions-collapsed .settings-fab,
    body.fit-scale .room-layout.actions-collapsed .chat-fab,
    body.fit-scale .room-layout.actions-collapsed .history-fab,
    body.fit-scale .room-layout.actions-collapsed .settings-fab {
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
    }
}

/* 3) 手机竖屏：展开操作栏时给页面底部留足安全空间，避免骰子被固定操作栏挡住。 */
@media (max-width: 900px) and (orientation: portrait) {
    .room-layout.room-playing:not(.actions-collapsed),
    body.fit-scale .room-layout.room-playing:not(.actions-collapsed) {
        padding-bottom: calc(330px + env(safe-area-inset-bottom)) !important;
    }
    .room-layout.room-playing.actions-collapsed,
    body.fit-scale .room-layout.room-playing.actions-collapsed {
        padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    }
    .game-panel,
    body.fit-scale .game-panel {
        scroll-padding-bottom: calc(330px + env(safe-area-inset-bottom)) !important;
    }

    /* 手机端历史/聊天弹窗避开底部操作栏，最后一条不会被遮住。 */
    body[data-room-status="playing"] .history-panel,
    body[data-room-status="round_over"] .history-panel,
    body[data-room-status="playing"] .chat-panel,
    body[data-room-status="round_over"] .chat-panel,
    body.fit-scale[data-room-status="playing"] .history-panel,
    body.fit-scale[data-room-status="round_over"] .history-panel,
    body.fit-scale[data-room-status="playing"] .chat-panel,
    body.fit-scale[data-room-status="round_over"] .chat-panel {
        bottom: calc(86px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 118px - env(safe-area-inset-bottom)) !important;
    }
    .room-layout.actions-collapsed ~ .history-drawer .history-panel,
    .room-layout.actions-collapsed ~ .chat-drawer .chat-panel,
    body.fit-scale .room-layout.actions-collapsed ~ .history-drawer .history-panel,
    body.fit-scale .room-layout.actions-collapsed ~ .chat-drawer .chat-panel {
        bottom: calc(52px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
    }
    .full-history,
    body.fit-scale .full-history {
        padding-bottom: 12px !important;
    }

    /* 手机端弹窗再压缩一点，内容自适应滚动。 */
    .app-dialog { padding: 12px !important; }
    .app-dialog-panel,
    body.fit-scale .app-dialog-panel,
    .modal-content,
    body.fit-scale .modal-content {
        width: min(300px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 36px) !important;
        padding: 12px !important;
        border-radius: 16px !important;
        overflow: auto !important;
    }
    .app-dialog-icon,
    body.fit-scale .app-dialog-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }
    .app-dialog-body h3,
    body.fit-scale .app-dialog-body h3 { font-size: 16px !important; margin: 0 0 5px !important; }
    .app-dialog-body p,
    body.fit-scale .app-dialog-body p { font-size: 12px !important; line-height: 1.45 !important; }
    .app-dialog-actions,
    body.fit-scale .app-dialog-actions { margin-top: 8px !important; gap: 8px !important; }
    .app-dialog-actions button,
    body.fit-scale .app-dialog-actions button { min-width: 76px !important; height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }

    /* 手机端浮动按钮也统一高度和底线。 */
    .history-fab,
    .settings-fab,
    .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab,
    body.fit-scale .chat-fab {
        height: 34px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .room-layout.room-playing:not(.actions-collapsed) .history-fab,
    .room-layout.room-playing:not(.actions-collapsed) .settings-fab,
    .room-layout.room-playing:not(.actions-collapsed) .chat-fab {
        display: none !important;
    }
}

/* v8 body-level actions-collapsed hook for external drawers. */
@media (max-width: 900px) and (orientation: portrait) {
    body.actions-collapsed .history-panel,
    body.actions-collapsed .chat-panel,
    body.fit-scale.actions-collapsed .history-panel,
    body.fit-scale.actions-collapsed .chat-panel {
        bottom: calc(52px + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
    }
}


/* === v9 stable responsive fixes ===
   目标：电脑端不显示手机设置按钮；手机端不横向溢出；设置浮层不会被轮询关闭；
   收起操作栏只保留小把手，不露整块卡片。 */
*, *::before, *::after { box-sizing: border-box; }

@media (min-width: 901px) {
    .settings-fab,
    body.fit-scale .settings-fab {
        display: none !important;
    }
}

.settings-fab.hidden,
.history-fab.hidden,
.chat-fab.hidden {
    display: none !important;
}

.action-panel.is-collapsed,
body.fit-scale .action-panel.is-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
}
.action-panel.is-collapsed::before,
.action-panel.is-collapsed::after,
body.fit-scale .action-panel.is-collapsed::before,
body.fit-scale .action-panel.is-collapsed::after {
    display: none !important;
}
.action-panel.is-collapsed .control-item,
.action-panel.is-collapsed .action-btn,
.action-panel.is-collapsed .next-round,
body.fit-scale .action-panel.is-collapsed .control-item,
body.fit-scale .action-panel.is-collapsed .action-btn,
body.fit-scale .action-panel.is-collapsed .next-round {
    display: none !important;
}
.action-panel.is-collapsed .action-collapse-btn,
body.fit-scale .action-panel.is-collapsed .action-collapse-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 102px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    z-index: 220 !important;
    background: linear-gradient(135deg, rgba(147, 67, 255, .96), rgba(78, 92, 255, .92)) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    box-shadow: 0 10px 28px rgba(119, 68, 255, .35), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }
    body.fit-scale {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    body.fit-scale .page,
    .page {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 8px 8px calc(74px + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .topbar,
    body.fit-scale .topbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand leave" "status status" !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    .brand-card,
    .status-card,
    body.fit-scale .brand-card,
    body.fit-scale .status-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .room-layout,
    body.fit-scale .room-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    .room-layout.room-playing:not(.actions-collapsed),
    body.fit-scale .room-layout.room-playing:not(.actions-collapsed) {
        padding-bottom: calc(315px + env(safe-area-inset-bottom)) !important;
    }
    .room-layout.room-waiting,
    body.fit-scale .room-layout.room-waiting,
    .room-layout.actions-collapsed,
    body.fit-scale .room-layout.actions-collapsed {
        padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }

    .game-stage,
    body.fit-scale .game-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        border-radius: 18px !important;
    }
    .room-head,
    .table-shell,
    .waiting-panel,
    .game-panel,
    .table-area,
    .center-board,
    .bid-box,
    .mini-log-card,
    .dice-tray,
    body.fit-scale .room-head,
    body.fit-scale .table-shell,
    body.fit-scale .waiting-panel,
    body.fit-scale .game-panel,
    body.fit-scale .table-area,
    body.fit-scale .center-board,
    body.fit-scale .bid-box,
    body.fit-scale .mini-log-card,
    body.fit-scale .dice-tray {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .players-orbit,
    .players-orbit[class*="count-"],
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit[class*="count-"],
    body.fit-scale .players-orbit.waiting-orbit,
    body.fit-scale .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card,
    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"],
    body.fit-scale .players-orbit[class*="count-"] > .player-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .side-panel,
    body.fit-scale .side-panel {
        display: none !important;
        position: fixed !important;
        right: 8px !important;
        left: auto !important;
        top: calc(58px + env(safe-area-inset-top)) !important;
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        width: min(304px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
        overflow: auto !important;
        z-index: 260 !important;
        background: linear-gradient(180deg, rgba(45, 34, 88, .98), rgba(10, 12, 34, .98)) !important;
        box-shadow: 0 22px 70px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.10) !important;
    }
    .room-layout.settings-open .side-panel,
    body.fit-scale .room-layout.settings-open .side-panel {
        display: block !important;
    }
    .room-layout.settings-open::after,
    body.fit-scale .room-layout.settings-open::after {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 250 !important;
        background: rgba(0, 0, 0, .28) !important;
        backdrop-filter: blur(2px) !important;
        pointer-events: none !important;
    }

    .settings-fab:not(.hidden),
    body.fit-scale .settings-fab:not(.hidden) {
        display: inline-flex !important;
    }

    .action-panel,
    body.fit-scale .action-panel {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 36px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        border-radius: 18px !important;
        max-height: min(48dvh, 315px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        z-index: 220 !important;
    }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    .action-panel .zhai-control,
    body.fit-scale .action-panel .zhai-control {
        min-width: 0 !important;
    }
    .target-control,
    body.fit-scale .target-control {
        grid-column: 1 / -1 !important;
    }

    .chat-panel,
    .history-panel,
    .app-dialog-panel,
    .modal-content,
    body.fit-scale .chat-panel,
    body.fit-scale .history-panel,
    body.fit-scale .app-dialog-panel,
    body.fit-scale .modal-content {
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 420px) {
    .players-orbit,
    .players-orbit[class*="count-"],
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit[class*="count-"] {
        grid-template-columns: 1fr !important;
    }
}

/* === V10 stable mobile portrait + fixed drawer controls ===
   目标：手机端单列竖屏完整显示；底部操作栏收起后只露按钮；设置面板可稳定关闭。 */
.settings-panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
.settings-close-btn {
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.92) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

/* 收起操作栏：所有端都只保留一个小把手，不露整块背景卡片 */
.action-panel.is-collapsed,
body.fit-scale .action-panel.is-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
}
.action-panel.is-collapsed > *:not(.action-collapse-btn),
body.fit-scale .action-panel.is-collapsed > *:not(.action-collapse-btn) {
    display: none !important;
}
.action-panel.is-collapsed .action-collapse-btn,
body.fit-scale .action-panel.is-collapsed .action-collapse-btn {
    display: inline-flex !important;
    position: fixed !important;
    left: 50% !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 118px !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    z-index: 420 !important;
    background: linear-gradient(135deg, rgba(130, 72, 255, .98), rgba(255, 171, 45, .92)) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 18px rgba(158,84,255,.5) !important;
    color: #fff !important;
    font-size: 13px !important;
}

@media (min-width: 821px) {
    .settings-fab { display: none !important; }
}

@media (max-width: 820px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }
    body {
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }
    * { box-sizing: border-box !important; }

    .page,
    body.fit-scale .page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 6px calc(78px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        transform: none !important;
    }

    .topbar,
    body.fit-scale .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 60px !important;
        grid-template-areas: "brand leave" "status status" !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        align-items: stretch !important;
    }
    .brand-card,
    body.fit-scale .brand-card {
        grid-area: brand !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 9px 12px !important;
        border-radius: 14px !important;
    }
    .brand-title { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .brand-sub { display: none !important; }
    #leaveBtn,
    body.fit-scale #leaveBtn {
        grid-area: leave !important;
        width: 60px !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #leaveBtn.hidden { display: none !important; }
    .status-card,
    body.fit-scale .status-card {
        grid-area: status !important;
        display: grid !important;
        grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 8px !important;
        border-radius: 15px !important;
    }
    .status-card div { min-width: 0 !important; }
    .status-card b { font-size: 16px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .status-card span { display: none !important; }

    .room-layout,
    body.fit-scale .room-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        transform: none !important;
    }
    .room-layout.room-playing:not(.actions-collapsed),
    body.fit-scale .room-layout.room-playing:not(.actions-collapsed) {
        padding-bottom: calc(330px + env(safe-area-inset-bottom)) !important;
    }

    .game-stage,
    body.fit-scale .game-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .room-head,
    body.fit-scale .room-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 8px !important;
    }
    .room-head > div:first-child { min-width: 0 !important; }
    .room-head .muted { display: block !important; font-size: 11px !important; }
    #roomCodeText { font-size: 17px !important; word-break: break-all !important; }
    .room-meta { display: none !important; }
    #selfCard,
    body.fit-scale #selfCard { display: none !important; }
    #copyRoomBtn,
    body.fit-scale #copyRoomBtn {
        width: auto !important;
        max-width: 96px !important;
        min-width: 78px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .table-shell,
    body.fit-scale .table-shell {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    .players-orbit,
    .players-orbit[class*="count-"],
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit[class*="count-"],
    body.fit-scale .players-orbit.waiting-orbit,
    body.fit-scale .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card,
    .players-orbit[class*="count-"] > .player-card:nth-child(n),
    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"],
    body.fit-scale .players-orbit[class*="count-"] > .player-card,
    body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(n) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 8px 10px !important;
    }

    .waiting-panel,
    .game-panel,
    .table-area,
    .center-board,
    .bid-box,
    .mini-log-card,
    .dice-tray,
    body.fit-scale .waiting-panel,
    body.fit-scale .game-panel,
    body.fit-scale .table-area,
    body.fit-scale .center-board,
    body.fit-scale .bid-box,
    body.fit-scale .mini-log-card,
    body.fit-scale .dice-tray {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    .waiting-panel { padding: 18px 10px !important; }
    .stats-row,
    body.fit-scale .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
    }
    .stats-row > div { min-width: 0 !important; padding: 9px !important; border-radius: 12px !important; }
    .stats-row span { display: none !important; }
    .stats-row b { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .current-bid { font-size: clamp(24px, 8vw, 40px) !important; }
    .log { max-height: 132px !important; overflow-y: auto !important; }
    .dice-tray { margin-top: 10px !important; padding: 12px 10px !important; }
    .dice-row { gap: 5px !important; justify-content: center !important; flex-wrap: wrap !important; }
    .dice-img,
    .my-dice .dice-img { width: clamp(42px, 13vw, 58px) !important; height: auto !important; }

    /* 手机端右侧设置不参与布局，打开时是一个可关闭浮层 */
    .side-panel,
    body.fit-scale .side-panel {
        display: none !important;
        position: fixed !important;
        z-index: 520 !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(56px + env(safe-area-inset-top)) !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(180deg, rgba(44, 34, 82, .98), rgba(13, 12, 34, .99)) !important;
        box-shadow: 0 18px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.10) !important;
    }
    .room-layout.settings-open .side-panel,
    body.fit-scale .room-layout.settings-open .side-panel {
        display: block !important;
    }
    .room-layout.settings-open .history-card,
    .room-layout.settings-open .rules-title,
    .room-layout.settings-open .rule-list {
        display: none !important;
    }
    .room-layout.settings-open #hostSettingsPanel {
        display: block !important;
    }
    .settings-fab:not(.hidden),
    body.fit-scale .settings-fab:not(.hidden) {
        display: inline-flex !important;
        position: fixed !important;
        right: 8px !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        z-index: 430 !important;
        width: auto !important;
        min-width: 58px !important;
        height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
    }
    .room-layout.settings-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.settings-open .settings-fab:not(.hidden) {
        z-index: 540 !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }

    /* 手机端操作栏：展开时固定底部、内部不横向滚；收起只露小按钮 */
    .action-panel,
    body.fit-scale .action-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 42px 8px calc(10px + env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: min(48dvh, 310px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        z-index: 390 !important;
    }
    .action-panel .action-collapse-btn,
    body.fit-scale .action-panel .action-collapse-btn {
        position: absolute !important;
        top: 7px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 112px !important;
        height: 30px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        z-index: 2 !important;
        font-size: 12px !important;
    }
    .action-panel .control-item,
    body.fit-scale .action-panel .control-item {
        min-width: 0 !important;
        width: 100% !important;
    }
    .action-panel .control-item > label:not(.switch-box) { display: block !important; font-size: 11px !important; margin-bottom: 4px !important; }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }
    .action-panel .zhai-control { min-width: 0 !important; }
    .action-panel .target-control { grid-column: 1 / -1 !important; }
    .bid-action,
    .open-action,
    .next-round {
        min-width: 0 !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .chat-fab,
    .history-fab {
        width: auto !important;
        min-width: 56px !important;
        height: 36px !important;
        padding: 0 10px !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        border-radius: 999px !important;
        z-index: 430 !important;
    }
    .chat-fab { left: 8px !important; }
    .history-fab { right: 74px !important; }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab,
    .room-layout.actions-collapsed .settings-fab:not(.hidden) {
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    }

    .chat-panel,
    .history-panel,
    .app-dialog-panel,
    body.fit-scale .chat-panel,
    body.fit-scale .history-panel,
    body.fit-scale .app-dialog-panel {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        max-height: min(72dvh, 520px) !important;
        border-radius: 18px !important;
        padding: 12px !important;
        overflow: auto !important;
    }
    .history-panel .full-history { max-height: calc(min(72dvh, 520px) - 58px) !important; overflow-y: auto !important; }
    .app-dialog-panel { max-height: min(78dvh, 420px) !important; }
}

/* === V11 ultimate mobile portrait / drawer stability patch ===
   - 手机端彻底走竖屏单列，不产生横向滚动
   - 操作栏展开时不再有内部滚动，收起时只剩一个按钮
   - 历史/聊天抽屉层级高于操作栏，列表底部不会被挡住
   - 设置面板作为稳定浮层，关闭按钮始终可点
   - 桌面端聊天/历史按钮底部对齐，设置悬浮按钮强制隐藏
*/
html, body {
    max-width: 100% !important;
}

@media (min-width: 821px) {
    #settingsToggleBtn,
    .settings-fab,
    body.fit-scale #settingsToggleBtn,
    body.fit-scale .settings-fab {
        display: none !important;
    }

    .room-layout:not(.hidden) .chat-fab,
    .room-layout:not(.hidden) .history-fab {
        width: 76px !important;
        height: 44px !important;
        min-width: 76px !important;
        bottom: max(76px, calc(env(safe-area-inset-bottom) + 70px)) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .room-layout:not(.hidden) .chat-fab {
        left: max(16px, env(safe-area-inset-left)) !important;
    }
    .room-layout:not(.hidden) .history-fab {
        right: max(16px, env(safe-area-inset-right)) !important;
    }
    .room-layout.actions-collapsed:not(.hidden) .chat-fab,
    .room-layout.actions-collapsed:not(.hidden) .history-fab {
        bottom: max(52px, calc(env(safe-area-inset-bottom) + 46px)) !important;
    }
}

/* 所有端：收起状态只保留一个独立小按钮，父卡片完全透明。 */
.action-panel.is-collapsed,
body.fit-scale .action-panel.is-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
}
.action-panel.is-collapsed > *:not(.action-collapse-btn),
body.fit-scale .action-panel.is-collapsed > *:not(.action-collapse-btn) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.action-panel.is-collapsed .action-collapse-btn,
body.fit-scale .action-panel.is-collapsed .action-collapse-btn {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 118px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    pointer-events: auto !important;
    z-index: 900 !important;
    background: linear-gradient(135deg, rgba(130, 72, 255, .98), rgba(255, 171, 45, .94)) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 18px rgba(158,84,255,.45) !important;
}

/* 抽屉永远盖过底部操作栏，避免最后一条历史被挡住。 */
.chat-drawer,
.history-drawer {
    z-index: 980 !important;
}
.chat-panel,
.history-panel {
    z-index: 985 !important;
}

@media (max-width: 820px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }
    body {
        min-height: 100dvh !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
    }
    body.fit-scale {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }
    .page,
    body.fit-scale .page {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 6px 6px calc(72px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .topbar,
    body.fit-scale .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58px !important;
        grid-template-areas: "brand leave" "status status" !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .brand-card,
    body.fit-scale .brand-card {
        grid-area: brand !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 8px 11px !important;
        border-radius: 14px !important;
    }
    .brand-title,
    body.fit-scale .brand-title {
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .brand-sub,
    body.fit-scale .brand-sub {
        display: none !important;
    }
    #leaveBtn,
    body.fit-scale #leaveBtn {
        grid-area: leave !important;
        width: 58px !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: stretch !important;
    }
    #leaveBtn.hidden { display: none !important; }
    .status-card,
    body.fit-scale .status-card {
        grid-area: status !important;
        display: grid !important;
        grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        border-radius: 15px !important;
        gap: 0 !important;
    }
    .status-card div,
    body.fit-scale .status-card div {
        width: 100% !important;
        min-width: 0 !important;
    }
    .status-card b,
    body.fit-scale .status-card b {
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .status-card span,
    body.fit-scale .status-card span { display: none !important; }
    .status-card i,
    body.fit-scale .status-card i {
        display: block !important;
        width: 1px !important;
        height: 20px !important;
    }

    .room-layout,
    body.fit-scale .room-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    .room-layout.room-playing:not(.actions-collapsed),
    body.fit-scale .room-layout.room-playing:not(.actions-collapsed) {
        padding-bottom: calc(250px + env(safe-area-inset-bottom)) !important;
    }

    .game-stage,
    body.fit-scale .game-stage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 16px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    .room-head,
    body.fit-scale .room-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 8px !important;
        padding: 8px 9px !important;
        border-radius: 15px !important;
    }
    .room-head > div:first-child,
    body.fit-scale .room-head > div:first-child { min-width: 0 !important; }
    .room-head .muted,
    body.fit-scale .room-head .muted { display: block !important; font-size: 11px !important; }
    #roomCodeText,
    body.fit-scale #roomCodeText { font-size: 17px !important; word-break: break-all !important; }
    .room-meta,
    #selfCard,
    body.fit-scale .room-meta,
    body.fit-scale #selfCard { display: none !important; }
    #copyRoomBtn,
    body.fit-scale #copyRoomBtn {
        width: auto !important;
        max-width: 96px !important;
        min-width: 76px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 999px !important;
    }

    .table-shell,
    body.fit-scale .table-shell {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .players-orbit,
    .players-orbit[class*="count-"],
    .players-orbit.waiting-orbit,
    .players-orbit.playing-orbit,
    body.fit-scale .players-orbit,
    body.fit-scale .players-orbit[class*="count-"],
    body.fit-scale .players-orbit.waiting-orbit,
    body.fit-scale .players-orbit.playing-orbit {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
    .players-orbit > .player-card,
    .players-orbit > .player-card[class*="seat-"],
    .players-orbit[class*="count-"] > .player-card,
    .players-orbit[class*="count-"] > .player-card:nth-child(n),
    body.fit-scale .players-orbit > .player-card,
    body.fit-scale .players-orbit > .player-card[class*="seat-"],
    body.fit-scale .players-orbit[class*="count-"] > .player-card,
    body.fit-scale .players-orbit[class*="count-"] > .player-card:nth-child(n) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 8px 10px !important;
    }
    .player-card .avatar,
    body.fit-scale .player-card .avatar { width: 34px !important; height: 34px !important; }
    .player-name,
    body.fit-scale .player-name { font-size: 12px !important; }
    .player-meta,
    body.fit-scale .player-meta { font-size: 10px !important; gap: 4px !important; }

    .waiting-panel,
    .game-panel,
    .table-area,
    .center-board,
    .bid-box,
    .mini-log-card,
    .dice-tray,
    body.fit-scale .waiting-panel,
    body.fit-scale .game-panel,
    body.fit-scale .table-area,
    body.fit-scale .center-board,
    body.fit-scale .bid-box,
    body.fit-scale .mini-log-card,
    body.fit-scale .dice-tray {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    .waiting-panel,
    body.fit-scale .waiting-panel {
        display: grid !important;
        place-items: center !important;
        padding: 18px 10px !important;
        gap: 10px !important;
    }
    .stats-row,
    body.fit-scale .stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
    }
    .stats-row > div,
    body.fit-scale .stats-row > div {
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }
    .stats-row span,
    body.fit-scale .stats-row span { display: none !important; }
    .stats-row b,
    body.fit-scale .stats-row b {
        display: block !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .current-bid,
    body.fit-scale .current-bid { font-size: clamp(24px, 8vw, 40px) !important; }
    .log,
    body.fit-scale .log { max-height: 132px !important; overflow-y: auto !important; }
    .dice-tray,
    body.fit-scale .dice-tray {
        margin-top: 10px !important;
        padding: 12px 10px !important;
        border-radius: 18px !important;
    }
    .dice-row,
    body.fit-scale .dice-row {
        gap: 5px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .my-dice .die,
    body.fit-scale .my-dice .die,
    .dice-img,
    body.fit-scale .dice-img {
        width: clamp(42px, 13vw, 58px) !important;
        height: clamp(42px, 13vw, 58px) !important;
    }

    /* 设置浮层：高层级，可滚动，关闭按钮吸顶。 */
    .side-panel,
    body.fit-scale .side-panel {
        display: none !important;
        position: fixed !important;
        z-index: 860 !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(56px + env(safe-area-inset-top)) !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: linear-gradient(180deg, rgba(44, 34, 82, .985), rgba(13, 12, 34, .995)) !important;
        box-shadow: 0 18px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.10) !important;
    }
    .room-layout.settings-open .side-panel,
    body.fit-scale .room-layout.settings-open .side-panel { display: block !important; }
    .room-layout.settings-open .history-card,
    .room-layout.settings-open .rules-title,
    .room-layout.settings-open .rule-list { display: none !important; }
    .room-layout.settings-open #hostSettingsPanel { display: block !important; }
    .settings-panel-title {
        position: sticky !important;
        top: -12px !important;
        z-index: 2 !important;
        margin: -12px -12px 12px !important;
        padding: 12px !important;
        background: linear-gradient(180deg, rgba(44, 34, 82, 1), rgba(44, 34, 82, .92)) !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .settings-close-btn {
        min-width: 58px !important;
        height: 32px !important;
        padding: 0 12px !important;
    }
    .settings-fab:not(.hidden),
    body.fit-scale .settings-fab:not(.hidden) {
        display: inline-flex !important;
        position: fixed !important;
        right: 8px !important;
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        z-index: 840 !important;
        width: auto !important;
        min-width: 58px !important;
        height: 36px !important;
        padding: 0 12px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }
    .room-layout.settings-open .settings-fab:not(.hidden) {
        z-index: 880 !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    /* 操作栏：无内部滚动，按钮始终能看到；收起按钮永远固定在面板顶部。 */
    .action-panel,
    body.fit-scale .action-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 39px 8px calc(9px + env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        z-index: 760 !important;
    }
    .action-panel .action-collapse-btn,
    body.fit-scale .action-panel .action-collapse-btn {
        position: absolute !important;
        top: 7px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 112px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        z-index: 3 !important;
        font-size: 12px !important;
    }
    .action-panel .control-item,
    body.fit-scale .action-panel .control-item {
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    .action-panel .control-item > label:not(.switch-box),
    body.fit-scale .action-panel .control-item > label:not(.switch-box) {
        display: block !important;
        height: auto !important;
        margin: 0 0 3px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }
    .action-panel .zhai-control,
    body.fit-scale .action-panel .zhai-control { min-width: 0 !important; }
    .action-panel .switch-box,
    body.fit-scale .action-panel .switch-box {
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .switch-ui,
    body.fit-scale .switch-ui { width: 40px !important; height: 22px !important; flex: 0 0 auto !important; }
    .switch-ui::before,
    body.fit-scale .switch-ui::before { width: 18px !important; height: 18px !important; top: 2px !important; left: 2px !important; }
    .switch-box input:checked + .switch-ui::before,
    body.fit-scale .switch-box input:checked + .switch-ui::before { transform: translateX(18px) !important; }
    .switch-text,
    body.fit-scale .switch-text { min-width: 32px !important; font-size: 13px !important; white-space: nowrap !important; }
    .action-panel .target-control,
    body.fit-scale .action-panel .target-control { grid-column: 1 / -1 !important; }
    .bid-action,
    .open-action,
    .next-round,
    body.fit-scale .bid-action,
    body.fit-scale .open-action,
    body.fit-scale .next-round {
        min-width: 0 !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .chat-fab,
    .history-fab,
    body.fit-scale .chat-fab,
    body.fit-scale .history-fab {
        position: fixed !important;
        width: auto !important;
        min-width: 56px !important;
        height: 36px !important;
        padding: 0 10px !important;
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        border-radius: 999px !important;
        z-index: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .chat-fab,
    body.fit-scale .chat-fab { left: 8px !important; }
    .history-fab,
    body.fit-scale .history-fab { right: 74px !important; }
    .room-layout.actions-collapsed .chat-fab,
    .room-layout.actions-collapsed .history-fab,
    .room-layout.actions-collapsed .settings-fab:not(.hidden) {
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    }

    .history-panel,
    .chat-panel,
    body.fit-scale .history-panel,
    body.fit-scale .chat-panel {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        padding: 12px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }
    .history-panel .full-history,
    body.fit-scale .history-panel .full-history {
        max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        padding-bottom: 6px !important;
    }
    .chat-messages,
    body.fit-scale .chat-messages {
        max-height: calc(100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 380px) {
    .action-panel,
    body.fit-scale .action-panel {
        gap: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .action-panel select,
    .action-panel .switch-box,
    body.fit-scale .action-panel select,
    body.fit-scale .action-panel .switch-box {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }
    .bid-action,
    .open-action,
    .next-round,
    body.fit-scale .bid-action,
    body.fit-scale .open-action,
    body.fit-scale .next-round {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 15px !important;
    }
}

/* =========================
   V12 FINAL MOBILE FLOATING TOOLS
   - 手机端把聊天/历史/设置合并到一个“菜单”按钮里。
   - 这段放在文件最后，专门覆盖前面多轮移动端样式，避免按钮左右分散/互相遮挡。
   ========================= */
.mobile-tools-toggle {
    display: none;
}

@media (min-width: 821px) {
    .mobile-tools-toggle,
    body.fit-scale .mobile-tools-toggle {
        display: none !important;
    }
}

@media (max-width: 820px) {
    .room-layout {
        --mobile-tools-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    .room-layout.room-playing {
        --mobile-tools-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .room-layout.room-playing:not(.actions-collapsed) {
        --mobile-tools-bottom: calc(226px + env(safe-area-inset-bottom));
    }

    .mobile-tools-toggle:not(.hidden),
    body.fit-scale .mobile-tools-toggle:not(.hidden) {
        position: fixed !important;
        right: 12px !important;
        left: auto !important;
        bottom: var(--mobile-tools-bottom) !important;
        z-index: 915 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        border-radius: 999px !important;
        color: #fff !important;
        font-weight: 900 !important;
        font-size: 13px !important;
        letter-spacing: .02em !important;
        background: linear-gradient(135deg, rgba(148, 80, 255, .96), rgba(80, 100, 255, .96)) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 6px rgba(120, 84, 255, .12) !important;
        transform: none !important;
        touch-action: manipulation !important;
    }
    .room-layout.mobile-tools-open .mobile-tools-toggle:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .mobile-tools-toggle:not(.hidden) {
        font-size: 28px !important;
        line-height: 1 !important;
    }

    .room-layout:not(.mobile-tools-open) .chat-fab,
    .room-layout:not(.mobile-tools-open) .history-fab,
    .room-layout:not(.mobile-tools-open) .settings-fab,
    body.fit-scale .room-layout:not(.mobile-tools-open) .chat-fab,
    body.fit-scale .room-layout:not(.mobile-tools-open) .history-fab,
    body.fit-scale .room-layout:not(.mobile-tools-open) .settings-fab {
        display: none !important;
        pointer-events: none !important;
    }

    .room-layout.mobile-tools-open .chat-fab,
    .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab,
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        position: fixed !important;
        left: auto !important;
        right: 12px !important;
        z-index: 910 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 74px !important;
        min-width: 74px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #fff !important;
        transform: none !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.32) !important;
        pointer-events: auto !important;
        white-space: nowrap !important;
    }
    .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .chat-fab {
        bottom: calc(var(--mobile-tools-bottom) + 64px) !important;
    }
    .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab {
        bottom: calc(var(--mobile-tools-bottom) + 112px) !important;
    }
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        bottom: calc(var(--mobile-tools-bottom) + 160px) !important;
        background: linear-gradient(135deg, rgba(28, 30, 44, .96), rgba(67, 57, 95, .96)) !important;
    }
    .settings-fab.hidden,
    .history-fab.hidden,
    .chat-fab.hidden,
    body.fit-scale .settings-fab.hidden,
    body.fit-scale .history-fab.hidden,
    body.fit-scale .chat-fab.hidden {
        display: none !important;
        pointer-events: none !important;
    }

    /* 展开设置时菜单按钮退到面板上层；设置面板仍然可以点外部关闭。 */
    .room-layout.settings-open .mobile-tools-toggle:not(.hidden),
    body.fit-scale .room-layout.settings-open .mobile-tools-toggle:not(.hidden) {
        z-index: 930 !important;
    }
}

@media (max-width: 380px) {
    .room-layout.mobile-tools-open .chat-fab,
    .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab,
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        right: 10px !important;
        width: 68px !important;
        min-width: 68px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12px !important;
    }
    .mobile-tools-toggle:not(.hidden),
    body.fit-scale .mobile-tools-toggle:not(.hidden) {
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
}

/* ===============================
   V13 final: AI 节奏 + 回合强提示
   =============================== */
.status-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(25, 22, 48, .86), rgba(105, 67, 166, .32));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.12);
    overflow: hidden;
}
.status-banner.hidden { display: none !important; }
.status-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
    transform: translateX(-120%);
    animation: statusSweep 2.2s ease-in-out infinite;
    pointer-events: none;
}
.status-banner-icon {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 22px rgba(146, 94, 255, .22);
    font-size: 21px;
    flex: 0 0 auto;
}
.status-banner-body {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.status-banner-body strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: .02em;
}
.status-banner-body span {
    color: rgba(245, 240, 255, .82);
    font-size: 13px;
    line-height: 1.35;
}
.status-banner.status-myturn {
    border-color: rgba(255, 218, 98, .52);
    background: linear-gradient(135deg, rgba(95, 57, 6, .82), rgba(160, 83, 255, .46));
    box-shadow: 0 16px 38px rgba(255, 184, 72, .20), 0 0 0 4px rgba(255, 215, 84, .10), inset 0 1px 0 rgba(255,255,255,.16);
    animation: myTurnPulse 1.15s ease-in-out infinite;
}
.status-banner.status-myturn .status-banner-icon { animation: pointBounce .85s ease-in-out infinite; }
.status-banner.status-ai {
    border-color: rgba(123, 226, 255, .36);
    background: linear-gradient(135deg, rgba(14, 37, 64, .84), rgba(106, 70, 179, .40));
}
.status-banner.status-ended,
.status-banner.status-lose {
    border-color: rgba(255, 126, 126, .42);
    background: linear-gradient(135deg, rgba(76, 30, 42, .88), rgba(75, 55, 126, .38));
}
.status-banner.status-lose {
    box-shadow: 0 18px 42px rgba(255, 85, 85, .18), 0 0 0 4px rgba(255, 100, 100, .08), inset 0 1px 0 rgba(255,255,255,.14);
}

.game-panel.can-act .turn-hint {
    border-color: rgba(255, 218, 98, .62) !important;
    background: linear-gradient(135deg, rgba(255, 208, 70, .20), rgba(146, 80, 255, .24)) !important;
    box-shadow: 0 0 0 4px rgba(255, 214, 82, .10), 0 14px 30px rgba(255, 194, 76, .12) !important;
    color: #fff !important;
    font-weight: 900 !important;
}
.room-layout.my-turn-now .action-panel:not(.is-collapsed) {
    border-color: rgba(255, 218, 98, .42) !important;
    box-shadow: 0 0 0 4px rgba(255, 218, 98, .08), 0 18px 42px rgba(0,0,0,.32) !important;
}
.self-card.self-turn,
.player-card.active {
    border-color: rgba(255, 218, 98, .62) !important;
    box-shadow: 0 0 0 4px rgba(255, 218, 98, .12), 0 18px 38px rgba(255, 190, 64, .14) !important;
}
.self-card.self-done,
.player-card.is-done {
    opacity: .86;
}
.player-card.is-done .avatar,
.self-card.self-done .self-avatar {
    filter: saturate(.85);
}
.player-card.is-loser,
.self-card.self-loser {
    border-color: rgba(255, 116, 116, .50) !important;
    box-shadow: 0 0 0 4px rgba(255, 95, 95, .10), 0 16px 36px rgba(255, 80, 80, .10) !important;
}
.state-chip.done-chip {
    background: rgba(110, 255, 174, .14) !important;
    color: #b6ffd4 !important;
    border-color: rgba(110, 255, 174, .28) !important;
}
.state-chip.loser-chip {
    background: rgba(255, 90, 90, .16) !important;
    color: #ffd1d1 !important;
    border-color: rgba(255, 110, 110, .34) !important;
}
.state-chip.current-chip {
    animation: chipPulse 1.1s ease-in-out infinite;
}
.room-layout.ai-turn-now .player-card.active.is-ai .avatar {
    animation: aiThinking 1s ease-in-out infinite;
}
.room-notice:not(.hidden) {
    font-size: 14px !important;
    font-weight: 850 !important;
}
.modal:not(.hidden) .modal-content {
    border-color: rgba(255, 218, 98, .28) !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.45), 0 0 0 5px rgba(255, 218, 98, .08) !important;
}

@keyframes statusSweep {
    0%, 35% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}
@keyframes myTurnPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}
@keyframes pointBounce {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(3px) scale(1.07); }
}
@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 218, 98, .32); }
    50% { box-shadow: 0 0 0 5px rgba(255, 218, 98, 0); }
}
@keyframes aiThinking {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@media (max-width: 820px) {
    .status-banner {
        margin: 8px 0 10px !important;
        padding: 10px 11px !important;
        border-radius: 15px !important;
        gap: 9px !important;
    }
    .status-banner-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }
    .status-banner-body strong {
        font-size: 14px !important;
    }
    .status-banner-body span {
        font-size: 12px !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .room-layout.my-turn-now .action-panel.is-collapsed .action-collapse-btn {
        border-color: rgba(255, 218, 98, .65) !important;
        background: linear-gradient(135deg, rgba(255, 183, 62, .98), rgba(142, 84, 255, .96)) !important;
        box-shadow: 0 0 0 6px rgba(255, 218, 98, .12), 0 16px 36px rgba(0,0,0,.34) !important;
    }
    .game-panel.can-act .turn-hint {
        font-size: 13px !important;
        line-height: 1.35 !important;
        padding: 9px 10px !important;
    }
}


/* =========================
   V14 FINAL MOBILE TOOLS POSITION FIX
   - 修复手机端“菜单”展开后聊天/历史/设置按钮错位。
   - 统一右下角锚点、统一按钮尺寸，并去掉聊天按钮左侧表情图标，避免视觉偏移。
   ========================= */
@media (max-width: 820px) {
    .room-layout {
        --mobile-tools-right: 12px;
        --mobile-tools-gap: 10px;
        --mobile-tools-item-width: 82px;
        --mobile-tools-item-height: 38px;
        --mobile-tools-anchor-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    .room-layout.room-playing {
        --mobile-tools-anchor-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    .room-layout.room-playing:not(.actions-collapsed) {
        --mobile-tools-anchor-bottom: calc(226px + env(safe-area-inset-bottom));
    }

    .mobile-tools-toggle:not(.hidden),
    body.fit-scale .mobile-tools-toggle:not(.hidden) {
        position: fixed !important;
        inset: auto var(--mobile-tools-right) var(--mobile-tools-anchor-bottom) auto !important;
        z-index: 950 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        line-height: 54px !important;
        transform: translateZ(0) !important;
    }

    .chat-fab::before,
    body.fit-scale .chat-fab::before {
        content: none !important;
        display: none !important;
    }

    .chat-fab,
    .history-fab,
    .settings-fab,
    body.fit-scale .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab {
        left: auto !important;
        right: var(--mobile-tools-right) !important;
        margin: 0 !important;
        width: var(--mobile-tools-item-width) !important;
        min-width: var(--mobile-tools-item-width) !important;
        height: var(--mobile-tools-item-height) !important;
        min-height: var(--mobile-tools-item-height) !important;
        padding: 0 12px !important;
        line-height: var(--mobile-tools-item-height) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        transform: translate3d(0, 8px, 0) scale(.96) !important;
        transform-origin: bottom right !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 940 !important;
        transition: opacity .18s ease, transform .18s ease, bottom .18s ease !important;
    }

    .room-layout.mobile-tools-open .chat-fab,
    .room-layout.mobile-tools-open .history-fab,
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .chat-fab {
        bottom: calc(var(--mobile-tools-anchor-bottom) + 64px) !important;
    }
    .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab {
        bottom: calc(var(--mobile-tools-anchor-bottom) + 64px + var(--mobile-tools-item-height) + var(--mobile-tools-gap)) !important;
    }
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        bottom: calc(var(--mobile-tools-anchor-bottom) + 64px + (var(--mobile-tools-item-height) + var(--mobile-tools-gap)) * 2) !important;
    }

    .settings-fab.hidden,
    .history-fab.hidden,
    .chat-fab.hidden,
    body.fit-scale .settings-fab.hidden,
    body.fit-scale .history-fab.hidden,
    body.fit-scale .chat-fab.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 380px) {
    .room-layout {
        --mobile-tools-right: 10px;
        --mobile-tools-item-width: 76px;
        --mobile-tools-item-height: 36px;
    }
}


/* =========================
   V15 FINAL MOBILE FLOATING MENU STABLE POSITION
   - 悬浮菜单不再跟随底部操作栏高度上下乱跳。
   - 操作栏展开/收起时，菜单固定在右下侧稳定位置，并保持最高层级可点击。
   ========================= */
@media (max-width: 820px) {
    .room-layout {
        --quick-tools-right: max(10px, env(safe-area-inset-right));
        --quick-tools-bottom: calc(84px + env(safe-area-inset-bottom));
        --quick-tools-size: 54px;
        --quick-tools-item-width: 78px;
        --quick-tools-item-height: 38px;
        --quick-tools-gap: 10px;
    }

    /* 不管是不是游戏中、不管操作栏是否展开，都不要再改悬浮菜单的底部锚点 */
    .room-layout.room-playing,
    .room-layout.room-playing:not(.actions-collapsed),
    .room-layout.actions-collapsed,
    .room-layout:not(.actions-collapsed) {
        --quick-tools-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .mobile-tools-toggle:not(.hidden),
    body.fit-scale .mobile-tools-toggle:not(.hidden),
    body.actions-collapsed .mobile-tools-toggle:not(.hidden) {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: var(--quick-tools-right) !important;
        bottom: var(--quick-tools-bottom) !important;
        z-index: 10020 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--quick-tools-size) !important;
        height: var(--quick-tools-size) !important;
        min-width: var(--quick-tools-size) !important;
        min-height: var(--quick-tools-size) !important;
        max-width: var(--quick-tools-size) !important;
        max-height: var(--quick-tools-size) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 999px !important;
        line-height: 1 !important;
        transform: translateZ(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .room-layout.mobile-tools-open .mobile-tools-toggle:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .mobile-tools-toggle:not(.hidden) {
        bottom: var(--quick-tools-bottom) !important;
        right: var(--quick-tools-right) !important;
        z-index: 10030 !important;
    }

    .chat-fab::before,
    body.fit-scale .chat-fab::before {
        content: none !important;
        display: none !important;
    }

    .chat-fab,
    .history-fab,
    .settings-fab,
    body.fit-scale .chat-fab,
    body.fit-scale .history-fab,
    body.fit-scale .settings-fab {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: var(--quick-tools-right) !important;
        bottom: var(--quick-tools-bottom) !important;
        z-index: 10010 !important;
        width: var(--quick-tools-item-width) !important;
        min-width: var(--quick-tools-item-width) !important;
        max-width: var(--quick-tools-item-width) !important;
        height: var(--quick-tools-item-height) !important;
        min-height: var(--quick-tools-item-height) !important;
        max-height: var(--quick-tools-item-height) !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transform: translate3d(0, 8px, 0) scale(.96) !important;
        transform-origin: bottom right !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .room-layout.mobile-tools-open .chat-fab,
    .room-layout.mobile-tools-open .history-fab,
    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        right: var(--quick-tools-right) !important;
        z-index: 10020 !important;
    }

    /* 从“菜单/X”按钮上方开始往上排：聊天 -> 历史 -> 设置 */
    .room-layout.mobile-tools-open .chat-fab,
    body.fit-scale .room-layout.mobile-tools-open .chat-fab {
        bottom: calc(var(--quick-tools-bottom) + var(--quick-tools-size) + var(--quick-tools-gap)) !important;
    }

    .room-layout.mobile-tools-open .history-fab,
    body.fit-scale .room-layout.mobile-tools-open .history-fab {
        bottom: calc(var(--quick-tools-bottom) + var(--quick-tools-size) + var(--quick-tools-gap) + var(--quick-tools-item-height) + var(--quick-tools-gap)) !important;
    }

    .room-layout.mobile-tools-open .settings-fab:not(.hidden),
    body.fit-scale .room-layout.mobile-tools-open .settings-fab:not(.hidden) {
        bottom: calc(var(--quick-tools-bottom) + var(--quick-tools-size) + var(--quick-tools-gap) + (var(--quick-tools-item-height) + var(--quick-tools-gap)) * 2) !important;
    }

    .settings-fab.hidden,
    .history-fab.hidden,
    .chat-fab.hidden,
    body.fit-scale .settings-fab.hidden,
    body.fit-scale .history-fab.hidden,
    body.fit-scale .chat-fab.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 操作栏展开时让悬浮菜单压在操作栏之上，避免“看不到/点不到”。 */
    .action-panel {
        z-index: 800 !important;
    }
}

@media (max-width: 380px) {
    .room-layout {
        --quick-tools-right: max(8px, env(safe-area-inset-right));
        --quick-tools-bottom: calc(76px + env(safe-area-inset-bottom));
        --quick-tools-size: 52px;
        --quick-tools-item-width: 74px;
        --quick-tools-item-height: 36px;
    }
}


/* =========================
   V16 FINAL: MOBILE PORTAL MENU + DICE TURN GLOW + PLAYER ORDER
   ========================= */

/* 玩家序号 */
.player-card {
    position: relative;
}
.player-order {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 4;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 1000;
    color: #150b28;
    background: linear-gradient(135deg, #ffe887, #ffbc3a);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 6px 16px rgba(255, 210, 72, .25);
}
.player-card .avatar {
    margin-left: 10px;
}

/* 轮到自己：中间骰子区发光描边 */
.dice-tray.my-turn-active,
.table-shell.my-turn-active .dice-tray {
    position: relative;
    border-color: rgba(255, 231, 117, .78) !important;
    box-shadow:
        0 0 0 1px rgba(255, 231, 117, .48),
        0 0 24px rgba(255, 210, 72, .28),
        inset 0 0 24px rgba(255, 231, 117, .10) !important;
    animation: myDiceGlowPulse 1.45s ease-in-out infinite;
}
.dice-tray.my-turn-active::after,
.table-shell.my-turn-active .dice-tray::after {
    content: "轮到你了";
    position: absolute;
    right: 12px;
    top: -13px;
    z-index: 8;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 1000;
    color: #251000;
    background: linear-gradient(135deg, #ffe875, #ffb33d);
    box-shadow: 0 10px 26px rgba(255, 186, 56, .38);
    border: 1px solid rgba(255,255,255,.55);
}
@keyframes myDiceGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 231, 117, .42),
            0 0 18px rgba(255, 210, 72, .22),
            inset 0 0 20px rgba(255, 231, 117, .08);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255, 231, 117, .75),
            0 0 34px rgba(255, 210, 72, .45),
            inset 0 0 30px rgba(255, 231, 117, .16);
    }
}

/* 手机端菜单彻底脱离游戏布局：按钮挂到 body 最外层，避免被缩放、操作栏、面板定位影响。 */
.mobile-tools-portal {
    display: contents;
}

@media (max-width: 820px) {
    body {
        --portal-menu-right: max(10px, env(safe-area-inset-right));
        --portal-menu-bottom: calc(88px + env(safe-area-inset-bottom));
        --portal-menu-size: 56px;
        --portal-menu-item-w: 78px;
        --portal-menu-item-h: 38px;
        --portal-menu-gap: 10px;
    }

    #mobileToolsPortal .mobile-tools-toggle:not(.hidden) {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: var(--portal-menu-right) !important;
        bottom: var(--portal-menu-bottom) !important;
        z-index: 2147483000 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--portal-menu-size) !important;
        height: var(--portal-menu-size) !important;
        min-width: var(--portal-menu-size) !important;
        min-height: var(--portal-menu-size) !important;
        max-width: var(--portal-menu-size) !important;
        max-height: var(--portal-menu-size) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 999px !important;
        line-height: 1 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #mobileToolsPortal .chat-fab::before {
        content: none !important;
        display: none !important;
    }

    #mobileToolsPortal .chat-fab,
    #mobileToolsPortal .history-fab,
    #mobileToolsPortal .settings-fab {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: var(--portal-menu-right) !important;
        bottom: var(--portal-menu-bottom) !important;
        z-index: 2147482990 !important;
        width: var(--portal-menu-item-w) !important;
        min-width: var(--portal-menu-item-w) !important;
        max-width: var(--portal-menu-item-w) !important;
        height: var(--portal-menu-item-h) !important;
        min-height: var(--portal-menu-item-h) !important;
        max-height: var(--portal-menu-item-h) !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transform: translate3d(0, 8px, 0) scale(.96) !important;
        transform-origin: bottom right !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .18s ease, transform .18s ease, bottom .18s ease !important;
    }

    #mobileToolsPortal.is-open .chat-fab,
    #mobileToolsPortal.is-open .history-fab,
    #mobileToolsPortal.is-open .settings-fab:not(.hidden) {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    /* 按钮从下到上：聊天、历史、设置，永远在菜单按钮上方 */
    #mobileToolsPortal.is-open .chat-fab {
        bottom: calc(var(--portal-menu-bottom) + var(--portal-menu-size) + var(--portal-menu-gap)) !important;
    }
    #mobileToolsPortal.is-open .history-fab {
        bottom: calc(var(--portal-menu-bottom) + var(--portal-menu-size) + var(--portal-menu-gap) + var(--portal-menu-item-h) + var(--portal-menu-gap)) !important;
    }
    #mobileToolsPortal.is-open .settings-fab:not(.hidden) {
        bottom: calc(var(--portal-menu-bottom) + var(--portal-menu-size) + var(--portal-menu-gap) + (var(--portal-menu-item-h) + var(--portal-menu-gap)) * 2) !important;
    }

    #mobileToolsPortal .settings-fab.hidden,
    #mobileToolsPortal .history-fab.hidden,
    #mobileToolsPortal .chat-fab.hidden,
    #mobileToolsPortal:not(.is-visible) .mobile-tools-toggle,
    #mobileToolsPortal:not(.is-visible) .chat-fab,
    #mobileToolsPortal:not(.is-visible) .history-fab,
    #mobileToolsPortal:not(.is-visible) .settings-fab {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .player-order {
        left: 7px;
        top: 7px;
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .player-card .avatar {
        margin-left: 8px;
    }
}

@media (max-width: 380px) {
    body {
        --portal-menu-right: max(8px, env(safe-area-inset-right));
        --portal-menu-bottom: calc(82px + env(safe-area-inset-bottom));
        --portal-menu-size: 52px;
        --portal-menu-item-w: 74px;
        --portal-menu-item-h: 36px;
    }
}


/* =========================
   V18 FINAL: 历史记录动画回放
   ========================= */
.history-item {
    position: relative;
}
.history-replay-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    min-width: 52px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(137, 85, 255, .94), rgba(255, 154, 48, .9));
    box-shadow: 0 8px 20px rgba(120, 70, 255, .26);
    cursor: pointer;
}
.history-item .history-summary {
    padding-right: 62px;
}

.replay-overlay.hidden {
    display: none !important;
}
.replay-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    pointer-events: auto;
}
.replay-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(125, 83, 255, .22), transparent 34%),
        radial-gradient(circle at 78% 66%, rgba(255, 66, 128, .16), transparent 38%),
        rgba(3, 5, 18, .72);
    backdrop-filter: blur(8px);
    animation: fadeIn .18s ease both;
}
.replay-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(980px, calc(100vw - 28px));
    max-height: min(760px, calc(100dvh - 28px));
    transform: translate(-50%, -50%);
    padding: 16px;
    display: grid;
    grid-template-rows: auto minmax(170px, auto) auto auto auto;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 232, 135, .22);
    box-shadow:
        0 26px 80px rgba(0,0,0,.56),
        0 0 0 1px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.14);
    animation: replayPanelIn .24s cubic-bezier(.2, 1.18, .24, 1) both;
}
@keyframes replayPanelIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.replay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.replay-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.replay-head strong {
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 224, 110, .22);
}
#replayStepText {
    color: rgba(255,255,255,.62);
    font-size: 13px;
    font-weight: 800;
}
.replay-stage {
    position: relative;
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(70, 44, 126, .66), rgba(12, 15, 46, .84)),
        radial-gradient(circle at center, rgba(255,255,255,.09), transparent 50%);
    border: 1px solid rgba(255,255,255,.12);
}
.replay-stage::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 226, 112, .18);
    box-shadow: 0 0 42px rgba(255, 209, 79, .16);
    pointer-events: none;
    animation: replayStagePulse 1.65s ease-in-out infinite;
}
@keyframes replayStagePulse {
    0%, 100% { opacity: .55; transform: scale(.992); }
    50% { opacity: 1; transform: scale(1); }
}
.replay-players {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: start;
    max-height: 260px;
    overflow: auto;
    padding-right: 3px;
}
.replay-player {
    position: relative;
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr);
    grid-template-areas:
        "no avatar name"
        "no avatar tags";
    align-items: center;
    column-gap: 8px;
    min-height: 52px;
    padding: 7px 9px;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.replay-player.is-active {
    transform: translateX(4px);
    border-color: rgba(255, 231, 112, .75);
    background: linear-gradient(135deg, rgba(255, 218, 76, .18), rgba(132, 78, 255, .18));
    box-shadow: 0 0 26px rgba(255, 207, 70, .24);
}
.replay-player.is-done {
    border-color: rgba(107, 255, 174, .36);
}
.replay-player.is-loser {
    border-color: rgba(255, 75, 101, .72);
    box-shadow: 0 0 28px rgba(255, 75, 101, .28);
}
.replay-player-no {
    grid-area: no;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #180f2b;
    font-size: 12px;
    font-weight: 1000;
    background: linear-gradient(135deg, #fff08a, #ffb33d);
}
.replay-player-avatar {
    grid-area: avatar;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    color: #fff;
    font-weight: 1000;
    background: linear-gradient(135deg, rgba(106, 102, 255, .96), rgba(255, 65, 164, .9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.replay-player.is-ai .replay-player-avatar {
    background: conic-gradient(from 180deg, #29e8ff, #7a5cff, #ff4bb6, #29e8ff);
}
.replay-player-name {
    grid-area: name;
    min-width: 0;
    color: #fff;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.replay-player-tags {
    grid-area: tags;
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 800;
}
.replay-center {
    position: relative;
    z-index: 1;
    min-height: 180px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    text-align: center;
    border-radius: 22px;
    padding: 18px;
    background: radial-gradient(circle at center, rgba(255,255,255,.11), rgba(255,255,255,.03) 58%, transparent);
}
.replay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    color: #2a1200;
    background: linear-gradient(135deg, #ffe875, #ffb13d);
    font-weight: 1000;
    box-shadow: 0 14px 28px rgba(255, 179, 61, .26);
}
.replay-badge.replay-thinking,
.replay-badge.replay-open-ready {
    color: #071722;
    background: linear-gradient(135deg, #58eaff, #74ffba);
}
.replay-badge.replay-open {
    color: #fff;
    background: linear-gradient(135deg, #ff405f, #8f55ff);
}
.replay-main-text {
    max-width: 640px;
    color: #fff;
    font-size: clamp(18px, 4vw, 28px);
    font-weight: 1000;
    line-height: 1.28;
    text-shadow: 0 0 22px rgba(255, 231, 112, .25);
}
.replay-bid-text {
    padding: 10px 14px;
    border-radius: 16px;
    color: #ffe66d;
    font-size: clamp(15px, 3vw, 22px);
    font-weight: 1000;
    background: rgba(20, 12, 48, .56);
    border: 1px solid rgba(255,255,255,.10);
}
.replay-dice-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
    max-height: 230px;
    overflow: auto;
    padding-right: 2px;
}
.replay-dice-row {
    display: grid;
    grid-template-columns: minmax(100px, 145px) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.10);
}
.replay-dice-row.is-active {
    border-color: rgba(255, 231, 112, .58);
    box-shadow: 0 0 20px rgba(255, 214, 76, .18);
}
.replay-dice-row.is-loser {
    border-color: rgba(255, 76, 104, .62);
}
.replay-dice-label {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.replay-dice-label b {
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.replay-dice-label span {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 800;
}
.replay-dice-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}
.replay-die {
    width: 28px !important;
    height: 28px !important;
}
.replay-timeline {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 0 4px;
}
.replay-timeline-item {
    flex: 0 0 auto;
    min-width: 86px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.70);
    background: rgba(255,255,255,.065);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.replay-timeline-item.active {
    color: #241100;
    background: linear-gradient(135deg, #ffe875, #ffb13d);
    border-color: rgba(255,255,255,.46);
}
.replay-timeline-item.passed:not(.active) {
    color: #d9fff0;
    border-color: rgba(97, 255, 177, .24);
}
.replay-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.replay-controls button {
    min-width: 88px;
    height: 38px;
}

body.replay-open {
    overflow: hidden !important;
}

@media (max-width: 820px) {
    .history-replay-btn {
        right: 7px;
        bottom: 7px;
        min-width: 48px;
        height: 26px;
        font-size: 11px;
    }
    .replay-panel {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
        padding: 10px;
        gap: 8px;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    }
    .replay-head strong {
        font-size: 17px;
    }
    .replay-stage {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 10px;
        border-radius: 20px;
    }
    .replay-players {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 132px;
        gap: 6px;
    }
    .replay-player {
        grid-template-columns: 22px 30px minmax(0, 1fr);
        min-height: 46px;
        padding: 6px;
        border-radius: 15px;
        column-gap: 6px;
    }
    .replay-player-no {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .replay-player-avatar {
        width: 30px;
        height: 30px;
        border-radius: 12px;
        font-size: 12px;
    }
    .replay-player-name {
        font-size: 12px;
    }
    .replay-player-tags {
        font-size: 10px;
    }
    .replay-center {
        min-height: 122px;
        padding: 12px 8px;
        gap: 8px;
    }
    .replay-badge {
        min-height: 28px;
        padding: 0 12px;
        font-size: 12px;
    }
    .replay-main-text {
        font-size: 18px;
    }
    .replay-bid-text {
        font-size: 15px;
        padding: 8px 10px;
    }
    .replay-dice-table {
        grid-template-columns: 1fr;
        max-height: 210px;
        gap: 6px;
    }
    .replay-dice-row {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 48px;
        padding: 6px 7px;
        border-radius: 14px;
    }
    .replay-dice-label b {
        font-size: 12px;
    }
    .replay-dice-label span {
        font-size: 10px;
    }
    .replay-die {
        width: 24px !important;
        height: 24px !important;
    }
    .replay-timeline {
        gap: 5px;
    }
    .replay-timeline-item {
        min-width: 72px;
        height: 28px;
        font-size: 11px;
        padding: 0 8px;
    }
    .replay-controls {
        gap: 6px;
        flex-wrap: wrap;
    }
    .replay-controls button {
        min-width: 72px;
        height: 34px;
        font-size: 12px !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 380px) {
    .replay-panel {
        padding: 8px;
    }
    .replay-players {
        max-height: 112px;
    }
    .replay-dice-table {
        max-height: 180px;
    }
}


/* =========================
   V19 FINAL: 历史卡片空间 + 每轮重置斋
   ========================= */
.history-list .history-item,
.full-history .history-item,
.compact-history .history-item {
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.full-history .history-item {
    min-height: 112px !important;
    padding: 12px 14px 48px 14px !important;
}

.compact-history .history-item {
    min-height: 96px !important;
    padding: 10px 12px 44px 12px !important;
}

.history-replay-btn {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 8 !important;
    min-width: 66px !important;
    height: 30px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.history-item .history-summary {
    padding-right: 76px !important;
}

.history-item .history-line,
.history-item .history-summary {
    gap: 8px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 820px) {
    .full-history .history-item {
        min-height: 106px !important;
        padding: 10px 11px 44px 11px !important;
    }

    .compact-history .history-item {
        min-height: 92px !important;
        padding: 9px 10px 42px 10px !important;
    }

    .history-replay-btn {
        right: 10px !important;
        bottom: 8px !important;
        min-width: 60px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .history-item .history-summary {
        padding-right: 68px !important;
    }
}


/* =========================
   V20 FINAL: 骰子动画只触发一次
   ========================= */
.my-dice .die {
    animation-duration: .26s !important;
}

.my-dice .die.roll {
    animation: diceRoll .62s cubic-bezier(.2, .8, .18, 1) both !important;
}


/* =========================
   V21 FINAL: 防止刷新后骰子二段动画
   ========================= */
.my-dice .die.roll {
    animation-fill-mode: both !important;
}

/* 如果骰子已经带 roll class，保持为静态最终状态；下一次 JS 会先移除再加回，重新触发真正的摇动。 */
.my-dice .die.roll:not(.force-pop) {
    transform: translateX(0) rotate(0deg) scale(1);
}


/* =========================
   V22 FINAL: 回放骰子动画节奏
   ========================= */
/* 回放每一步都会重绘状态，但骰子默认必须静止，避免切一步动一次。 */
.replay-dice-wrap .replay-die,
.replay-dice-wrap .replay-die.hidden-die {
    animation: none !important;
    transform: translateX(0) rotate(0deg) scale(1) !important;
}

/* 只有回放开始第一帧、最终开骰帧，JS 才会加 replay-roll-once。 */
.replay-dice-wrap .replay-die.replay-roll-once {
    animation: diceRoll .62s cubic-bezier(.2, .8, .18, 1) both !important;
    transform-origin: 50% 62% !important;
}