/* 午后音乐室：独立主题层，保留既有牌局交互。 */
:root {
  --room-bg: #f6f3eb; --room-bg-deep: #efeee4;
  --button-main: #62816d; --button-main-dark: #3e604e;
  --gold: #dfa487; --gold-bright: #efc4ab;
  --felt: #d9e4d6; --felt-dark: #c4d5c2;
  --ink: #344b3e; --ink-muted: #7d887c; --muted: #7d887c;
  --line: #526b4f20; --line-strong: #526b4f38;
  --surface: #fffdf7; --surface-raised: #fffdf7;
  --shadow-soft: 0 8px 28px #4c604209;
  color: var(--ink); background: var(--room-bg);
}
body { background: radial-gradient(ellipse at 4% 0%, #e2e9d8 0, transparent 44%), var(--room-bg); }
body::after { content: '♩   ♫'; color: #71866c24; font-size: 110px; }
.app-shell { max-width: 1320px; padding: 28px; }
.panel, .status-bar { backdrop-filter: none; border-radius: 22px; }
.lobby { min-height: calc(100vh - 100px); background: #fffdf7; }
.entry-panel { position: relative; grid-template-columns: 1.1fr 1fr; gap: 70px; padding: 64px; }
.eyebrow { color: #738363; letter-spacing: .18em; font-size: 11px; }
h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.4; color: #344b3e; }
.entry-panel h1 { font-size: clamp(34px, 4.1vw, 56px); margin: 24px 0; }
.muted { color: #798375; line-height: 1.85; }
.entry-actions { padding: 34px; border: 1px solid #dce2d2; border-radius: 24px; background: #f0f3e9; gap: 17px; }
.entry-actions h2 { font-family: var(--font-display); font-size: 25px; color: var(--ink); }
.entry-actions p { margin: 0; }
.entry-footnote { color: #7c8978; font-size: 11px; text-align: center; margin-top: 4px; }
.button { border-radius: 12px; background: #62816d; border-color: #62816d; color: #fffdf7; box-shadow: none; font-weight: 600; }
.button--primary { background: #426550; border-color: #426550; color: #fffdf7; }
.button--ghost { background: #fffdf780; color: #536f59; border-color: #bfcdb9; }
.button--danger { background: #f6e6df; border-color: #e5c6b8; color: #955e4d; }
.button--large { min-height: 54px; font-size: 15px; }
.music-still-life { position: relative; height: 215px; margin-top: 25px; background: repeating-linear-gradient(transparent 0 13px, #7d946a1c 13px 14px, transparent 14px 24px) left 78px / 90% 80px no-repeat; }
.art-card { position: absolute; top: 20px; left: 80px; display: block; width: 100px; height: 142px; padding: 12px; border: 1px solid #dadbcc; border-radius: 9px; background: #fffef9; font: 25px Georgia, serif; color: #465b45; box-shadow: 0 12px 20px #344b3e12; transform: rotate(-16deg); }
.art-card small { display: block; font-size: 23px; }
.art-card-two { left: 157px; top: 33px; transform: rotate(12deg); color: #bd826c; }
.art-card i { position: absolute; right: 18px; bottom: 15px; font-size: 40px; font-style: normal; }
.art-caption { position: absolute; bottom: 0; left: 0; color: #8a9380; font-size: 9px; letter-spacing: .15em; }
.online-forms { grid-template-columns: 1fr; }
.online-forms form, .nickname-panel { background: #f6f7ef; border-color: #dfe5d6; }
#online-create-form { background: transparent; }
input, select { background: #fffefb; border-color: #d4ddcc; border-radius: 10px; color: #40573f; }
.table-center { background: radial-gradient(ellipse at 50% 35%, #e5eddf, #cbdcc8); border: 5px solid #e8e8db; border-radius: 36px; box-shadow: 0 12px 32px #4c604211, inset 0 0 0 1px #a8bda480; }
.table-center::before { inset: 12px; border: 1px solid #ffffff75; border-radius: 23px; box-shadow: none; }
.table-center::after { content: '♩   ♫'; width: auto; white-space: nowrap; aspect-ratio: auto; border: 0; border-radius: 0; background: none; color: #64845c45; font-size: 24px; letter-spacing: .2em; }
.seat { background: #fffef6c9; border: 1px solid #b9ccb3; box-shadow: 0 3px 10px #526b4f08; color: #41583b; border-radius: 14px; }
.seat.is-viewer { background: #f4f6e9; border-color: #8ca780; }
.seat.is-turn { background: #fff0dc; border-color: #c89e6c; box-shadow: 0 0 0 3px #e7c9a435; }
.table-center, .table-center * { color: #41583b; }
.hand-area { background: #fffdf6; }
.action-panel { background: #f3f5ec; }
.card { border-radius: 8px; box-shadow: 0 2px 5px #344b3e25; }
.card::after { color: #608065; }
.viewer-tab.is-active { background: #62816d; border-color: #62816d; }
.status-bar { background: #fffdf7; }
.orientation-toggle { background: #f7f8ef; color: #526b4f; border-color: #c8d5bd; }
/* 对局紧凑布局：牌桌、手牌相邻，辅助信息退到手牌下方。 */
.table-wrap { display: flex; flex-direction: column; gap: 8px; }
.table-wrap > .table-center { order: 0; min-height: 330px; padding: 12px; gap: 8px; }
.table-wrap > .deal-progress { order: 1; }
.table-wrap > .hand-area { order: 2; margin-top: 0; padding: 0 10px 8px; }
.table-wrap > .action-panel { order: 3; margin-top: 0; padding: 10px 12px; }
.hand-area .hand { min-height: 122px; padding-top: 22px; padding-bottom: 4px; }
.hand-area .section-heading { padding: 5px 4px 0; gap: 8px; flex-wrap: wrap; }
.hand-area .section-heading h2 { font-family: inherit; line-height: 1.4; font-size: 12px; font-weight: 500; color: #798375; }
.hand-heading-tools { gap: 10px; }
.hand-heading-tools .count-badge { padding: 2px 6px; font-size: 11px; }
.seat:is(.seat--top, .seat--bottom) { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 32px; max-width: 100%; padding: 6px 12px; }
.seat--top { grid-row: 1; }
:is(.seat--top, .seat--bottom) .seat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.seat--top, .seat--bottom) .seat-count, :is(.seat--top, .seat--bottom) .seat-played { margin: 0; white-space: nowrap; flex-shrink: 0; }
:is(.seat--top, .seat--bottom) .seat-badges { position: static; flex-shrink: 0; }
.trick-play--empty .trick-card-row { min-height: 40px; }
.trick-play.trick-play--empty { min-height: 44px; padding: 4px; }
.trick-play.trick-play--empty .trick-card-row { min-height: 30px; }
#game > .status-bar { display: flex; flex-wrap: wrap; padding: 10px 14px; gap: 8px 16px; }
#game .status-bar > * { min-width: 0; max-width: 100%; }
#game .status-bar .brand-block { margin-right: auto; flex-wrap: wrap; }
#game .status-item { white-space: normal; overflow-wrap: anywhere; }
#game .status-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#judge-mode-switch { width: auto; min-width: 0; max-width: 100%; padding: 5px 24px 5px 8px; }
#judge-mode-pending { flex-basis: 100%; white-space: normal; }
#judge-mode-pending:empty { display: none; }
#game > .viewer-bar { padding: 10px 14px; gap: 8px; margin-top: 8px; }
#game .game-layout { margin-top: 8px; }
#game .viewer-tab { padding: 6px 10px; }
#game .viewer-meta { gap: 8px; }
@media (max-width: 760px) {
  .table-wrap > .table-center { aspect-ratio: auto; min-height: 280px; padding: 8px; gap: 6px; }
  .seat:is(.seat--top, .seat--bottom) { gap: 7px; padding: 5px 8px; }
  .hand-area .hand { min-height: 114px; }
  .app-shell { padding: 12px; }
  .entry-panel { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
  .entry-panel h1 { font-size: 36px; margin: 16px 0; }
  .music-still-life { height: 165px; margin-top: 5px; }
  .art-card { width: 76px; height: 105px; left: 85px; font-size: 20px; }
  .art-card-two { left: 142px; }
  .art-card i { font-size: 27px; }
  .entry-actions { padding: 23px; gap: 14px; }
  .table-center { border-width: 3px; border-radius: 25px; }
}