.display-stage {
  --type-meta: 28px;
  --type-body: 32px;
  --type-value: 38px;
  --type-board-title: 48px;
  --type-action-title: 56px;
  position: absolute;
  width: 3240px;
  height: 1920px;
  overflow: hidden;
  transform-origin: top left;
  color: #403a3d;
  background: #f5d8cf;
}

.paris-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.paper-noise { z-index: 20; opacity: .045; }

.action-summary {
  position: absolute;
  z-index: 12;
  top: 48px;
  right: 54px;
  width: 940px;
  height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  padding: 29px 46px;
  overflow: hidden;
  text-align: center;
  border: 4px solid #715562;
  border-radius: 30px;
  background: #fff8f0f2;
  box-shadow: 7px 9px 0 #6f536133, inset 0 0 0 7px #fffaf3;
}

.action-summary::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: #d06e8b;
}

.action-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #c26783;
  font-size: var(--type-meta);
  font-weight: 900;
  text-align: center;
}

.action-meta b {
  font-weight: 800;
  white-space: nowrap;
}

.action-meta i {
  color: #5f5b56;
  font-style: normal;
  letter-spacing: .07em;
}

.action-summary h1 {
  width: 100%;
  display: grid;
  place-items: center;
  max-width: 100%;
  margin: 8px 0 6px;
  overflow: hidden;
  color: #3f393b;
  font: 900 var(--type-action-title)/1.15 Georgia, "Songti SC", serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.action-summary p {
  width: 100%;
  min-height: 82px;
  display: grid;
  place-items: center;
  margin: 8px 0 0;
  color: #675b5f;
  font-size: var(--type-body);
  line-height: 1.28;
  font-weight: 800;
  white-space: normal;
}

.public-counters {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 9px;
  color: #6e6265;
  font-size: 22px;
  font-weight: 900;
}

.public-counters span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-width: 150px;
  height: 38px;
  place-items: center;
  padding: 0 16px;
  border: 1px solid #b98b9a;
  border-radius: 18px;
  background: #fffdf7c9;
}

.public-counters strong { color: #4e765e; }

.tabletop {
  position: absolute;
  z-index: 5;
  left: 470px;
  top: 455px;
  width: 2300px;
  height: 1025px;
}

.oval-table-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(9px 15px 10px #513d3f42);
}

.public-pile {
  position: absolute;
  z-index: 2;
  top: 368px;
  width: 200px;
  height: 315px;
  display: grid;
  grid-template-rows: 237px 48px;
  place-items: center;
  place-content: center;
  row-gap: 0;
}

.public-pile img {
  width: 158px;
  height: 237px;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 6px 7px 0 #5a4e5161, -7px -7px 0 #fff9edb8;
}

.public-pile b {
  min-width: 132px;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 18px;
  color: #443f3c;
  border: 2px solid #557451;
  border-radius: 18px;
  background: #fff7efed;
  font-size: 23px;
  white-space: nowrap;
}

.deck-pile { left: 155px; transform: rotate(-1deg); }
.discard-pile { right: 155px; transform: rotate(1deg); }

.table-action-cards {
  position: absolute;
  z-index: 3;
  left: 405px;
  right: 405px;
  top: 300px;
  bottom: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.table-card {
  flex: 0 0 auto;
  width: 196px;
  height: 294px;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 5px 7px 0 #554b4d50;
}

.table-card:nth-of-type(odd) { transform: rotate(-.8deg); }
.table-card:nth-of-type(even) { transform: rotate(.8deg); }

.action-separator {
  flex: 0 0 auto;
  display: grid;
  min-width: 58px;
  height: 58px;
  place-items: center;
  color: #4a4542;
  border: 2px solid #83706f;
  border-radius: 50%;
  background: #fff9f1e8;
  font: 900 31px/1 Georgia, serif;
}

.table-empty {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  width: 580px;
  height: 96px;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #5c745f;
  border: 2px dashed #6e8670;
  border-radius: 50%;
  background: #fff9ed82;
  font-size: 31px;
  font-weight: 900;
}

.table-action-flow { display: none; }

.lobby-codes {
  position: absolute;
  z-index: 4;
  left: 450px;
  right: 450px;
  top: 300px;
  bottom: 275px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 34px;
}

.lobby-codes h2 {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  margin: 0;
  color: #4d6552;
  font: 900 41px/1.2 Georgia, "Songti SC", serif;
}

.lobby-code-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.lobby-code {
  min-width: 0;
  height: 130px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: 0;
  padding: 18px 34px;
  color: #47413f;
  border: 3px solid var(--team-color);
  border-radius: 28px;
  background: #fff9efdc;
  box-shadow: 4px 6px 0 color-mix(in srgb, var(--team-color) 28%, transparent);
}

.lobby-code span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  font: 900 36px/1.1 Georgia, "Songti SC", serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.lobby-code strong {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--team-color);
  font: 900 51px/1 Georgia, serif;
  letter-spacing: .08em;
}

.tabletop.is-lobby .public-pile { visibility: hidden; }

.player-ring {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.player-board {
  position: absolute;
  transition: transform .25s ease, filter .25s ease;
}

.player-board-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: none;
}

.seat-top {
  left: 1070px;
  top: 18px;
  width: 1040px;
  height: 425px;
}

.seat-bottom {
  left: 1080px;
  top: 1500px;
  width: 1080px;
  height: 416px;
}

.seat-left {
  left: 10px;
  top: 510px;
  width: 450px;
  height: 985px;
}

.seat-right {
  right: 10px;
  top: 510px;
  width: 450px;
  height: 985px;
}

.seat-top-left {
  left: 520px;
  top: 20px;
  width: 760px;
  height: 311px;
}

.seat-top-right {
  left: 1335px;
  top: 20px;
  width: 760px;
  height: 311px;
}

.board-title,
.board-metric {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  place-content: center;
  min-width: 0;
  text-align: center;
}

.seat-top.horizontal .board-title,
.seat-top-left.horizontal .board-title {
  position: absolute;
  left: 5.8%;
  right: 3.8%;
  top: 35%;
  height: 22.2%;
}

.seat-top.horizontal .board-metrics,
.seat-top-left.horizontal .board-metrics {
  position: absolute;
  z-index: 2;
  left: 7.6%;
  right: 4.9%;
  top: 59.7%;
  bottom: 12.8%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.9%;
}

.seat-bottom.horizontal .board-title,
.seat-top-right.horizontal .board-title {
  position: absolute;
  left: 2.2%;
  right: 6.5%;
  top: 33%;
  height: 26.6%;
}

.seat-bottom.horizontal .board-metrics,
.seat-top-right.horizontal .board-metrics {
  position: absolute;
  z-index: 2;
  left: 3.9%;
  right: 8.8%;
  top: 62%;
  bottom: 7.3%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9%;
}

.seat-right.vertical .board-title {
  position: absolute;
  left: 8.7%;
  right: 8.4%;
  top: 22.3%;
  height: 10.6%;
}

.seat-right.vertical .board-metrics {
  position: absolute;
  z-index: 2;
  left: 9.4%;
  right: 8.4%;
  top: 37%;
  bottom: 6.5%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2.4%;
}

.seat-left.vertical .board-title {
  position: absolute;
  left: 9.7%;
  right: 8.5%;
  top: 20.2%;
  height: 8.7%;
}

.seat-left.vertical .board-metrics {
  position: absolute;
  z-index: 2;
  left: 9.6%;
  right: 8.4%;
  top: 31.5%;
  bottom: 11.2%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.8%;
}

.board-title strong {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  max-width: 100%;
  overflow: hidden;
  color: #3f393b;
  font: 900 var(--type-board-title)/1.08 Georgia, "Songti SC", serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.board-turn-state {
  display: block;
  margin-top: 5px;
  color: #725f66;
  font-size: 24px;
  font-weight: 900;
}

.board-metric {
  grid-auto-flow: column;
  place-content: center;
  justify-items: center;
  align-items: center;
  gap: 13px;
  padding: 8px 13px;
  color: #403a3d;
}

.board-metric img {
  width: 58px;
  height: 87px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 2px 3px 0 #594d5150;
}

.metric-label {
  display: grid;
  place-items: center;
  color: #665a5f;
  font-size: 32px;
  font-weight: 800;
}

.metric-value {
  display: grid;
  place-items: center;
  color: #403a3d;
  font: 900 var(--type-value)/1 Georgia, "Songti SC", serif;
  white-space: nowrap;
}

.vertical .board-title strong { font-size: 38px; }
.vertical .board-turn-state { font-size: 20px; }
.vertical .board-metric {
  grid-auto-flow: row;
  gap: 6px;
}
.vertical .board-metric img { width: 70px; height: 105px; }
.vertical .metric-label { font-size: 34px; }
.vertical .metric-value { font-size: 48px; }

.player-board.active { transform: translateY(-7px); filter: drop-shadow(0 0 13px #fffaf0) drop-shadow(0 0 16px #5e9566); }
.player-board.active .board-title strong,
.player-board.active .board-turn-state { color: #357052; }
.player-board.status-winner .board-title strong,
.player-board.status-winner .board-turn-state { color: #8e5b25; }
.player-board.threatened { animation: threatened-board .55s ease-in-out infinite alternate; }

.catch-overlay {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 51%;
  width: 1500px;
  min-height: 680px;
  display: grid;
  grid-template-columns: 610px 1fr;
  align-items: center;
  gap: 60px;
  padding: 60px 72px;
  transform: translate(-50%, -50%);
  border: 6px solid #725563;
  border-radius: 38px;
  background: #fff8f0f7;
  box-shadow: 0 0 0 13px #f0c7d2cf, 0 42px 110px #3d2b367d;
}

.catch-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.catch-copy {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.catch-copy > * { width: 100%; }
.catch-art img {
  width: 225px;
  height: 338px;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 5px 8px 0 #5c4d5150;
}
.catch-art b { color: #bd5873; font-size: 66px; }
.catch-copy > span { color: #c65470; font-size: 34px; font-weight: 900; letter-spacing: .16em; }
.catch-copy h2 { margin: 16px 0 18px; color: #443b40; font: 900 60px/1.2 Georgia, "Songti SC", serif; }
.catch-copy p { min-height: 82px; margin: 0; color: #68595e; font-size: 30px; line-height: 1.45; font-weight: 800; }
.catch-copy small { display: block; margin-top: 18px; color: #806f75; font-size: 22px; font-weight: 800; }
.catch-timer { position: relative; height: 76px; margin-top: 28px; overflow: hidden; border: 4px solid #9e5269; border-radius: 22px; background: #f3d7df; }
.catch-timer i { position: absolute; inset: 0 auto 0 0; width: 100%; background: #dc778a; transition: width .1s linear; }
.catch-timer strong { position: relative; z-index: 2; display: grid; height: 100%; place-items: center; color: #fffdf7; font: 900 41px Georgia, serif; text-shadow: 2px 2px 0 #8e465c; }

.winner-overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #4a3c45;
  background: #fff7eff2;
}
.winner-wines { display: flex; gap: 30px; }
.winner-wines img { width: 230px; height: 345px; object-fit: cover; border-radius: 9px; box-shadow: 5px 8px 0 #6e59625c; }
.winner-wines img:nth-child(1) { transform: rotate(-4deg); }
.winner-wines img:nth-child(3) { transform: rotate(4deg); }
.winner-overlay > span { margin-top: 35px; color: #a65c78; font-size: 38px; font-weight: 900; letter-spacing: .2em; }
.winner-overlay h2 { margin: 24px 0 14px; font: 900 122px Georgia, "Songti SC", serif; text-shadow: 4px 4px 0 #efb9c7; }
.winner-overlay p { margin: 0; font-size: 38px; font-weight: 800; }

@keyframes threatened-board {
  to { transform: translateX(-5px); filter: drop-shadow(0 0 16px #fff8ef) drop-shadow(0 0 20px #c45570); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 实体材质只承载信息 UI；大屏底景保留巴黎阳台庭园。 */
.paris-background { display: block; }
.paper-noise { display: none; }

.action-summary,
.catch-overlay {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.action-summary::before { display: none; }

.public-counters span,
.public-pile b,
.action-separator,
.table-empty,
.lobby-code,
.catch-timer {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-counters span {
  min-width: 168px;
  height: 44px;
  padding: 3px 22px;
}

.public-pile b {
  min-width: 150px;
  height: 48px;
  padding: 4px 22px;
}

.action-separator {
  min-width: 100px;
  height: 68px;
  padding: 0;
}

.table-empty {
  width: 610px;
  height: 112px;
  padding: 0;
}

.lobby-code {
  height: 142px;
  padding: 28px 46px;
}

/* 四家风光看板本身已是无字位图美术；统一补足真实纸张投影，不再另画 CSS 框。 */
.player-board-art {
  filter: drop-shadow(7px 10px 8px #5d4c5540);
}

.catch-overlay {
  padding: 82px 94px 96px;
}

.catch-timer {
  height: 84px;
  padding: 14px 24px;
}

.catch-timer i {
  inset: 14px auto 14px 24px;
  max-width: calc(100% - 48px);
  border-radius: 10px;
}

.winner-overlay {
  isolation: isolate;
  color: #4a3c45;
  background: var(--charcoal-paper, #f4ebd9);
}

.winner-overlay::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 1760px;
  height: 1320px;
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: none;
}