.player-stat[data-award]:not(.earned) .icon {
  filter: grayscale(1);
  opacity: 0.4;
}
.player-stat.earned .icon {
  width: 29px;
  height: 31px;
  filter: drop-shadow(0 0 3px #ffda55);
}
.player-stat.earned {
  background: #ffda5533;
  border-radius: 8px;
  padding: 1px 3px;
}
.canvas-table .table-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  position: relative;
  min-height: 50px;
}
.canvas-table .map-dice-result {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #fffaf0d9;
  border: 1px solid #dfcba7;
  border-radius: 14px;
  box-shadow: none;
  pointer-events: auto;
}
.canvas-table .map-dice-result .die {
  width: 35px;
  height: 35px;
}
.canvas-table .map-dice-result strong {
  font:
    800 22px Bricolage,
    sans-serif;
  color: #2446ed;
  margin: 0 3px;
}
.canvas-table .construction-tools,
.canvas-table .game-actions {
  background: #fffaf0d9;
  border: 1px solid #dfcba7;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  padding: 2px 5px;
}
.canvas-table .fixed-hand {
  width: min(800px, 100%);
  max-width: 100%;
  background: #fffaf0e0;
  border: 1px solid #dfcba7;
  box-shadow: 0 3px 14px #39342b0f;
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 7px 12px;
  overflow: hidden;
}
.canvas-table .fixed-hand-heading {
  display: block;
  margin: 0 0 6px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0;
  text-shadow: none;
  color: #625744;
}
.canvas-table .fixed-hand-heading span {
  font-size: 11px;
  letter-spacing: 0;
}
.canvas-table .fixed-hand-heading small {
  display: none;
}
.canvas-table .hand-cards-row {
  height: 76px;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
}
.canvas-table .resource-fan {
  display: flex;
  gap: 10px;
  flex: 0 1 auto;
  max-width: none;
  justify-content: center;
  align-items: end;
  height: 100%;
}
.canvas-table .hand-group {
  display: block;
  position: relative;
  width: 62px;
  min-width: 0;
  flex: 0 0 62px;
  padding: 0;
  height: 76px;
  overflow: visible;
}
.canvas-table .hand-count {
  position: absolute;
  top: 3px;
  right: 3px;
  left: auto;
  bottom: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  background: #39342b;
  color: #fffaf0;
  border: 1px solid #fffaf0;
  border-radius: 7px;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  font:
    800 13px Bricolage,
    sans-serif;
  pointer-events: none;
  transform: none;
}
.canvas-table .fixed-hand .resource-card {
  width: 62px;
  height: 76px;
  margin: 0;
  transform: none;
}
.canvas-table .fixed-hand .resource-card:hover,
.canvas-table .fixed-hand .resource-card:focus-visible {
  transform: none;
}
.canvas-table .hand-resource-symbol {
  height: 48px;
  padding-top: 7px;
}
.canvas-table .hand-resource-symbol .icon {
  width: 46px;
  height: 46px;
}
.canvas-table .fixed-development {
  display: flex;
  gap: 5px;
  width: auto;
  min-width: 0;
  padding: 0 0 0 10px;
  height: 76px;
  overflow-x: auto;
  max-width: 180px;
}
.canvas-table .hand-dev-card {
  flex: 0 0 52px;
  width: 52px;
  height: 76px;
  margin: 0;
}
.canvas-table .hand-dev-card .icon {
  width: 30px;
  height: 34px;
}
.canvas-table .hand-discard-controls {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 2px solid #ef4c39;
  border-radius: 14px;
  background: #fffaf0f5;
  box-shadow: 0 3px 16px #39342b22;
  pointer-events: auto;
  z-index: 6;
}
.canvas-table #discard-progress {
  color: #39342b;
  font-size: 13px;
  font-weight: 700;
}
.canvas-table #confirm-discard {
  background: #2446ed;
  color: #fffaf0;
  border-color: #2446ed;
  box-shadow: 0 2px 0 #152b9d;
}
.canvas-table .discarding-hand .fixed-hand {
  overflow: visible;
  background: #fffaf0f0;
  border: 2px solid #ef4c39;
}
.canvas-table .discarding-hand .resource-fan {
  overflow-x: auto;
  justify-content: flex-start;
  max-width: 100%;
  gap: 18px;
  padding: 14px 2px 4px;
  height: 96px;
}
.canvas-table .discarding-hand .hand-group {
  display: grid;
  grid-template-columns: repeat(var(--quantity), 32px);
  flex: 0 0 auto;
  width: calc((var(--quantity) - 1) * 32px + 62px);
  height: 76px;
}
.canvas-table .discarding-hand .hand-count {
  top: -8px;
  right: 1px;
}
.canvas-table .discarding-hand .resource-card.discard-selected {
  transform: translateY(-10px);
  border: 2px solid #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
.canvas-table .discarding-hand .hand-cards-row {
  height: 90px;
  overflow: visible;
}
.canvas-table .discarding-hand .fixed-development {
  display: none;
}
.canvas-table .roll-prompt {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fffaf0ed;
  border: 1px solid #dfcba7;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 5px 20px #39342b18;
}
.canvas-table .dice-center-result {
  animation: mesa-dice-finish 2.8s ease-out forwards;
  pointer-events: none;
}
@keyframes mesa-dice-finish {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  15%,
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.95);
  }
}
body[data-playing="true"] .room-social,
body[data-playing="true"].focus-mode .room-social {
  position: fixed;
  right: 16px;
  top: 18px;
  bottom: auto;
  width: 270px;
  z-index: 16;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}
body[data-playing="true"] .social-buttons {
  justify-content: flex-end;
  gap: 6px;
}
body[data-playing="true"] .social-buttons .button {
  background: #fffaf0d9;
  border: 1px solid #dfcba7;
  border-radius: 10px;
  min-height: 34px;
  font-size: 11px;
  padding: 6px 10px;
}
body[data-playing="true"] .chat-panel {
  display: flex;
  flex-direction: column;
  background: #fffaf0e8;
  border: 1px solid #dfcba7;
  border-radius: 16px;
  box-shadow: 0 4px 16px #39342b10;
  backdrop-filter: blur(6px);
  opacity: 1;
  max-height: 290px;
  min-height: 240px;
  overflow: hidden;
}
body[data-playing="true"] .chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  flex-shrink: 0;
}
body[data-playing="true"] .chat-heading > div {
  display: block;
}
body[data-playing="true"] .chat-heading h2 {
  display: block;
  font:
    800 16px/1.2 Bricolage,
    sans-serif;
  white-space: normal;
  letter-spacing: 0;
  margin: 0;
  word-spacing: normal;
}
body[data-playing="true"] .chat-heading .eyebrow {
  display: none;
}
body[data-playing="true"] .chat-messages {
  padding: 8px 12px;
  flex: 1;
  min-height: 70px;
  height: 150px;
  overflow-y: auto;
}
body[data-playing="true"] #chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #dfcba7;
  flex-shrink: 0;
}
body[data-playing="true"] #chat-input {
  min-height: 36px;
  height: 36px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  background: #fffaf0;
  color: #39342b;
  padding: 7px 9px;
  border-radius: 9px;
}
body[data-playing="true"] #chat-send {
  height: 36px;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 11px;
}
body[data-playing="true"] .chat-message .message-text,
body[data-playing="true"] .game-event-text {
  font-size: 12px;
  line-height: 1.4;
  color: #39342b;
}
.event-player-name,
.offer-maker {
  color: var(--player-ink, #39342b);
}
.canvas-table .trade-notices {
  position: fixed;
  top: 370px;
  right: 16px;
  left: auto;
  width: 270px;
  max-height: calc(100dvh - 550px);
  transform: none;
}
body[data-playing="true"]:has(#chat-panel[hidden]) .trade-notices {
  top: 82px;
  max-height: calc(100dvh - 270px);
}
.canvas-table .game-drawer:not(.development-confirm) {
  left: auto;
  right: 14px;
  bottom: calc(var(--dock-height) + 16px);
  width: 280px;
  max-height: calc(100% - var(--dock-height) - 32px);
  transform: none;
  background: #fffaf0f5;
}
body[data-playing="true"]:has(.game-drawer:not([hidden])) .room-social {
  display: none;
}
.canvas-table .game-drawer.development-confirm {
  bottom: calc(var(--dock-height) + 22px);
}
.placement-confirm {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-height) + 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #fffaf0f5;
  border: 1px solid #2446ed;
  border-radius: 14px;
  z-index: 8;
  font-size: 12px;
}
.award-gained {
  animation: mesa-award 1s ease-out;
}
.award-lost {
  animation: mesa-award-lost 0.7s ease-out;
}
@keyframes mesa-award {
  35% {
    transform: scale(1.18);
    box-shadow: 0 0 0 8px #ffda5580;
  }
  100% {
    transform: none;
    box-shadow: none;
  }
}
@keyframes mesa-award-lost {
  40% {
    opacity: 0.3;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1000px) and (min-width: 641px) {
  .game-viewport.canvas-table {
    --left-rail: 166px;
    --right-rail: 250px;
  }
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social,
  .canvas-table .trade-notices {
    width: 230px;
  }
  .canvas-table .game-drawer:not(.development-confirm) {
    width: 240px;
  }
}
@media (max-width: 640px) {
  .game-viewport.canvas-table {
    --dock-height: 146px;
    --left-rail: 0px;
    --right-rail: 0px;
    padding: 6px 8px;
    gap: 4px;
    grid-template-rows: 24px 28px minmax(0, 1fr) var(--dock-height);
    border-radius: 16px;
  }
  .canvas-table .game-topbar {
    padding: 0 115px 0 0;
    gap: 5px;
    min-height: 24px;
  }
  .canvas-table .game-topbar h1 {
    font-size: 13px;
    max-width: 140px;
  }
  .canvas-table .game-goal {
    font-size: 10px;
    gap: 2px;
  }
  .canvas-table .game-goal .icon {
    width: 13px;
    height: 16px;
  }
  .canvas-table .game-extras {
    display: none;
  }
  .canvas-table > .turn-notice,
  .canvas-table > .turn-notice.your-turn {
    min-height: 28px;
    max-width: 100%;
    padding: 4px 7px;
    gap: 6px;
    border-radius: 9px;
  }
  .canvas-table .turn-notice strong {
    font-size: 12px;
  }
  .canvas-table .turn-notice p {
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .canvas-table .game-players {
    left: 8px;
    top: 64px;
    width: calc(100% - 16px);
    height: 52px;
    max-height: none;
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 1px;
  }
  .canvas-table .game-player,
  .canvas-table .game-player.current-player {
    flex: 1 0 84px;
    min-width: 0;
    min-height: 46px;
    padding: 4px;
    border-radius: 12px;
  }
  .canvas-table .player-identity {
    gap: 4px;
  }
  .canvas-table .player-identity strong {
    font-size: 11px;
    max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .canvas-table .player-identity strong small,
  .canvas-table .player-turn-label,
  .canvas-table .player-countdown {
    display: none;
  }
  .player-expand {
    width: 32px;
    height: 32px;
    padding: 2px;
  }
  .canvas-table .player-avatar {
    width: 26px;
    height: 26px;
  }
  .canvas-table .player-avatar .avatar-initial {
    font-size: 16px;
  }
  .compact-score {
    display: grid;
    place-items: center;
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #2446ed;
    color: #fffaf0;
    min-width: 17px;
    height: 17px;
    border: 1px solid #fffaf0;
    border-radius: 6px;
    font:
      800 10px Bricolage,
      sans-serif;
  }
  .canvas-table .player-metrics {
    display: none;
  }
  .canvas-table .player-expanded .player-metrics {
    display: flex;
    gap: 6px;
    padding-top: 6px;
  }
  .canvas-table .game-players:has(.player-expanded) {
    height: 140px;
    overflow-y: auto;
    background: #fffaf0f5;
    z-index: 12;
    border-radius: 12px;
  }
  .game-viewport.canvas-table .game-map {
    inset: 120px 4px calc(var(--dock-height) + 12px);
  }
  .canvas-table .game-dock {
    grid-template-rows: 44px 98px;
    gap: 4px;
  }
  .canvas-table .table-toolbar {
    min-height: 44px;
    gap: 5px;
  }
  .canvas-table .map-dice-result {
    padding: 3px 5px;
    gap: 3px;
    border-radius: 10px;
  }
  .canvas-table .map-dice-result .die {
    width: 26px;
    height: 26px;
  }
  .canvas-table .map-dice-result strong {
    font-size: 16px;
    margin: 0;
  }
  .canvas-table .construction-tools,
  .canvas-table .game-actions {
    padding: 1px 2px;
    gap: 1px;
  }
  .canvas-table .build-icon,
  .canvas-table .table-icon-action {
    width: 34px;
    height: 36px;
    padding: 3px;
  }
  .canvas-table .build-icon > .icon,
  .canvas-table .table-icon-action > .icon {
    width: 28px;
    height: 29px;
  }
  .canvas-table .fixed-hand {
    padding: 5px 8px;
    border-radius: 13px;
  }
  .canvas-table .fixed-hand-heading,
  .canvas-table .fixed-hand-heading span {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .canvas-table .resource-fan {
    gap: 6px;
  }
  .canvas-table .hand-cards-row {
    gap: 6px;
    height: 68px;
  }
  .canvas-table .hand-group {
    width: 48px;
    flex-basis: 48px;
    height: 68px;
  }
  .canvas-table .fixed-hand .resource-card {
    width: 48px;
    height: 68px;
  }
  .canvas-table .hand-resource-symbol {
    height: 43px;
  }
  .canvas-table .hand-resource-symbol .icon {
    width: 39px;
    height: 39px;
  }
  .canvas-table .hand-count {
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    top: 2px;
    right: 2px;
  }
  .canvas-table .fixed-hand .card-bottom {
    font-size: 8px;
  }
  .canvas-table .fixed-development {
    padding-left: 5px;
    max-width: 52px;
    height: 68px;
  }
  .canvas-table .hand-dev-card {
    width: 43px;
    flex-basis: 43px;
    height: 68px;
    font-size: 8px;
  }
  .canvas-table .hand-dev-card .icon {
    width: 26px;
    height: 28px;
  }
  .canvas-table .hand-discard-controls {
    padding: 7px 9px;
    gap: 6px;
    max-width: calc(100vw - 24px);
  }
  .canvas-table #discard-progress {
    font-size: 11px;
  }
  .canvas-table #confirm-discard {
    font-size: 11px;
    padding: 7px 9px;
  }
  .canvas-table .discarding-hand .hand-group {
    width: calc((var(--quantity) - 1) * 28px + 48px);
    grid-template-columns: repeat(var(--quantity), 28px);
    height: 68px;
  }
  .canvas-table .discarding-hand .resource-fan {
    height: 90px;
  }
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social,
  body[data-playing="true"]:has(.trade-offer-popup) .room-social {
    top: 8px;
    right: 10px;
    width: 108px;
    gap: 0;
  }
  body[data-playing="true"] .social-buttons {
    gap: 4px;
  }
  body[data-playing="true"] .social-buttons .button {
    font-size: 0;
    width: 32px;
    height: 28px;
    min-height: 28px;
    padding: 4px;
    gap: 0;
  }
  body[data-playing="true"] #chat-toggle .icon {
    width: 21px;
    height: 21px;
  }
  body[data-playing="true"] #fullscreen-toggle::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: center/contain no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232446ed' stroke-width='2' d='M8 3H3v5m13-5h5v5m0 8v5h-5M3 16v5h5'/%3E%3C/svg%3E");
    font-size: 20px;
    color: #2446ed;
  }
  body[data-playing="true"] .chat-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(146px + 18px);
    top: auto;
    width: auto;
    height: min(280px, 34dvh);
    min-height: 0;
    max-height: none;
    background: #fffaf0f2;
    border: 1px solid #dfcba7;
    border-radius: 20px;
    box-shadow: 0 -4px 20px #39342b18;
  }
  body[data-playing="true"]:has(#chat-panel:not([hidden]))
    .canvas-table
    .game-map {
    bottom: calc(var(--dock-height) + 22px + min(280px, 34dvh));
  }
  body[data-playing="true"] .chat-messages {
    height: auto;
    min-height: 40px;
  }
  body[data-playing="true"] .chat-heading {
    padding: 10px 12px;
  }
  .canvas-table .trade-notices,
  body[data-playing="true"]:has(#chat-panel[hidden]) .trade-notices {
    top: auto;
    bottom: calc(146px + 18px);
    right: 8px;
    width: min(270px, calc(100vw - 16px));
    max-height: 180px;
  }
  body[data-playing="true"]:has(.trade-offer-popup) .canvas-table .game-map {
    bottom: calc(var(--dock-height) + 202px);
  }
  body[data-playing="true"]:has(#chat-panel:not([hidden])) .trade-notices {
    bottom: calc(146px + 26px + min(280px, 34dvh));
    max-height: 110px;
  }
  .canvas-table .game-drawer:not(.development-confirm) {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(var(--dock-height) + 12px);
    max-height: calc(100% - var(--dock-height) - 126px);
  }
  .canvas-table .game-drawer.development-confirm {
    bottom: calc(var(--dock-height) + 12px);
  }
  .placement-confirm {
    max-width: calc(100% - 16px);
    width: max-content;
    gap: 6px;
    padding: 8px;
    bottom: calc(var(--dock-height) + 14px);
  }
  .placement-confirm > span {
    display: none;
  }
  .canvas-table:has(.match-result:not([hidden])) .game-dock {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .award-gained,
  .award-lost {
    animation: none;
  }
  .canvas-table .dice-center-result {
    animation: none;
  }
  .canvas-table .rolling {
    animation: none;
  }
}
[hidden] {
  display: none !important;
}
body[data-playing="true"] .social-buttons .button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (min-width: 1000px) {
  .canvas-table:has(.game-drawer:not([hidden]):not(.development-confirm)) {
    --right-rail: 440px;
  }
  .canvas-table .game-drawer:not(.development-confirm) {
    width: 420px;
  }
}
@media (max-width: 640px) {
  body[data-playing="true"] .social-buttons .button {
    width: 32px;
    flex: 0 0 32px;
  }
}
.offer-person-name strong {
  color: var(--player-ink, #39342b);
}
.canvas-table .game-extras {
  margin-right: 294px;
}
@media (max-width: 1000px) and (min-width: 641px) {
  .canvas-table .game-extras {
    margin-right: 230px;
  }
}
@media (max-width: 640px) {
  .canvas-table .game-extras {
    margin-right: 0;
  }
}
@media (max-width: 640px) {
  .game-viewport.canvas-table:has(.player-expanded) .game-map {
    top: 212px;
  }
}
@media (min-width: 641px) {
  .canvas-table:has(.game-drawer:not([hidden])) .trade-notices {
    top: 82px;
    max-height: 220px;
  }
  .canvas-table:has(.trade-offer-popup) .game-drawer:not(.development-confirm) {
    max-height: calc(100% - var(--dock-height) - 325px);
  }
}
@media (max-width: 640px) {
  .canvas-table .game-player:has(.resume-player) .player-identity strong {
    visibility: hidden;
  }
  .canvas-table .game-player .resume-player {
    position: absolute;
    top: 7px;
    right: 4px;
    margin: 0;
    padding: 7px 5px;
    background: #ffda55;
    border: 1px solid #d7b338;
    font-size: 10px;
    z-index: 2;
  }
}

@media (min-width: 641px) {
  .canvas-table #drawer-trade {
    padding: 10px;
  }
  .canvas-table .trade-resource {
    height: 66px;
  }
  .canvas-table .trade-hub {
    gap: 4px;
  }
}
.game-viewport.canvas-table:has(.discarding-hand) .game-map {
  bottom: calc(var(--dock-height) + 78px);
}

/* ==========================================================================
   Mesa · camada visual da partida (out/2026)
   Painéis translúcidos com bordas definidas, barra do topo compacta,
   cartas de desenvolvimento no formato das cartas de recurso, dicas sem
   rolagem lateral, chamada grande para os dados, ferramentas indisponíveis
   e anel do relógio anti-horário. Este bloco vem por último de propósito.
   ========================================================================== */
body[data-playing="true"] {
  --mesa-panel-bg: rgb(255 250 240 / 0.85);
  --mesa-panel-bg-strong: rgb(255 250 240 / 0.91);
  --mesa-panel-border: #c4ad84;
  --mesa-panel-edge: 1.5px solid var(--mesa-panel-border);
  --mesa-panel-shadow:
    0 1px 0 rgb(255 255 255 / 0.55) inset, 0 4px 14px rgb(57 52 43 / 0.13);
  --mesa-panel-radius: 14px;
  --mesa-panel-blur: blur(6px);
  --mesa-ink: #39342b;
  --mesa-ink-muted: #5c513f;
}
/* Without backdrop blur the panels become nearly solid, keeping AA contrast. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  body[data-playing="true"] {
    --mesa-panel-bg: rgb(255 250 240 / 0.97);
    --mesa-panel-bg-strong: rgb(255 250 240 / 0.98);
  }
}

/* --- 4. One panel recipe for every surface over the table --------------- */
.canvas-table .game-topbar,
.canvas-table .game-player,
.canvas-table .game-player.current-player,
.canvas-table .construction-tools,
.canvas-table .game-actions,
.canvas-table .map-dice-result,
.canvas-table .fixed-hand,
.canvas-table .trade-offer-popup,
.canvas-table .game-drawer,
.canvas-table .roll-prompt,
.canvas-table .placement-confirm,
body[data-playing="true"] .chat-panel {
  border: var(--mesa-panel-edge);
  box-shadow: var(--mesa-panel-shadow);
  -webkit-backdrop-filter: var(--mesa-panel-blur);
  backdrop-filter: var(--mesa-panel-blur);
  color: var(--mesa-ink);
  text-shadow: none;
}
.canvas-table .game-player,
.canvas-table .construction-tools,
.canvas-table .game-actions,
.canvas-table .map-dice-result,
.canvas-table .trade-offer-popup,
.canvas-table .game-topbar {
  background: var(--mesa-panel-bg);
}
.canvas-table .fixed-hand {
  background: rgb(255 250 240 / 0.88);
  border-radius: 16px;
}
.canvas-table .game-player.current-player {
  background: var(--mesa-panel-bg-strong);
  border-left: 4px solid var(--player);
}
.canvas-table .game-drawer,
.canvas-table .roll-prompt,
.canvas-table .placement-confirm {
  background: var(--mesa-panel-bg-strong);
  border-radius: 18px;
}
body[data-playing="true"] .chat-panel {
  background: rgb(255 250 240 / 0.91);
  border-radius: 16px;
}
.canvas-table .construction-tools,
.canvas-table .game-actions,
.canvas-table .map-dice-result {
  border-radius: var(--mesa-panel-radius);
}
.canvas-table .fixed-hand-heading,
.canvas-table .fixed-hand-heading span {
  color: var(--mesa-ink-muted);
  text-shadow: none;
}
body[data-playing="true"] .social-buttons .button {
  background: rgb(255 250 240 / 0.92);
  border: var(--mesa-panel-edge);
  color: var(--mesa-ink);
  box-shadow: none;
}
body[data-playing="true"] .social-buttons #chat-toggle {
  background: #ffda55;
  border-color: #c9a72e;
}
body[data-playing="true"] .social-buttons .button:hover,
body[data-playing="true"] .social-buttons .button:focus-visible {
  border-color: #2446ed;
}

/* --- 3. Top bar: one slim panel with room, goal, turn and controls ------- */
.canvas-table .game-topbar {
  --bar-reserve: 238px;
  height: 100%;
  min-height: 0;
  padding: 0 var(--bar-reserve) 0 14px;
  gap: 12px;
  border-radius: 12px;
  pointer-events: auto;
}
body.focus-mode .canvas-table .game-topbar {
  --bar-reserve: 296px;
}
/* The fixed chat controls are hidden while a drawer is open: free the space. */
body[data-playing="true"]:has(.game-drawer:not([hidden]))
  .canvas-table
  .game-topbar {
  --bar-reserve: 14px;
}
.canvas-table .game-topbar h1 {
  flex: 0 1 auto;
  max-width: 300px;
  font-size: 17px;
  line-height: 1.1;
  color: var(--mesa-ink);
}
.canvas-table .game-goal {
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  background: #ffda5540;
  border: 1px solid #e3c14f;
  color: var(--mesa-ink);
  font-weight: 700;
  font-size: 12px;
}
.canvas-table .game-goal .icon {
  width: 17px;
  height: 19px;
}
.canvas-table .game-extras {
  margin: 0 0 0 auto;
  gap: 4px;
  flex-shrink: 0;
}
.canvas-table .game-extras .text-button,
.canvas-table .game-extras a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  color: var(--mesa-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.canvas-table .game-extras .text-button {
  color: #2446ed;
}
.canvas-table .game-extras .text-button:hover,
.canvas-table .game-extras a:hover,
.canvas-table .game-extras .text-button:focus-visible,
.canvas-table .game-extras a:focus-visible {
  background: #2446ed14;
}
.canvas-table .game-extras .icon {
  width: 16px;
  height: 16px;
}
.canvas-table > .turn-notice,
.canvas-table > .turn-notice.your-turn {
  min-height: 0;
  border: var(--mesa-panel-edge);
  border-radius: 11px;
  background: var(--mesa-panel-bg);
  box-shadow: none;
  color: var(--mesa-ink);
  text-shadow: none;
  pointer-events: auto;
}
.canvas-table > .turn-notice.your-turn {
  border-color: var(--player);
  background: color-mix(in srgb, var(--player) 12%, #fffaf0);
}
.canvas-table > .turn-notice p {
  color: var(--mesa-ink);
}

/* Wide screens: the turn notice sits centred inside the bar (one HUD row). */
@media (min-width: 1100px) {
  .game-viewport.canvas-table:not(:has(.neutral-picker)) {
    --play-top: 56px;
    padding: 8px 12px;
    gap: 8px;
    grid-template-rows: 40px minmax(0, 1fr) var(--dock-height);
  }
  .game-viewport.canvas-table:not(:has(.neutral-picker)) > .game-topbar {
    grid-row: 1;
    grid-column: 1;
  }
  .game-viewport.canvas-table:not(:has(.neutral-picker)) > .turn-notice {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    height: 30px;
    max-width: min(560px, calc(100% - 2 * 384px));
    padding: 0 12px;
    z-index: 5;
  }
  .game-viewport.canvas-table:not(:has(.neutral-picker)) > .turn-notice p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .game-viewport.canvas-table:not(:has(.neutral-picker)) > .game-dock {
    grid-row: 3;
  }
}
/* Medium screens (and the neutral picker) keep a second, slim notice row. */
@media (min-width: 641px) {
  .game-viewport.canvas-table {
    --play-top: 88px;
    padding: 8px 12px;
    gap: 6px;
    grid-template-rows: 36px 32px minmax(0, 1fr) var(--dock-height);
  }
  .game-viewport.canvas-table > .turn-notice {
    min-height: 32px;
    padding: 4px 12px;
  }
  .game-viewport.canvas-table:has(.neutral-picker) {
    grid-template-rows: 36px auto minmax(0, 1fr) var(--dock-height);
  }
  .game-viewport.canvas-table .game-players {
    top: var(--play-top);
  }
  .game-viewport.canvas-table .game-map {
    top: var(--play-top);
  }
  /* Fullscreen/chat buttons sit inside the right end of the bar. */
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social {
    top: 22px;
    right: 27px;
    gap: 10px;
  }
  body[data-playing="true"] .social-buttons .button {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
  }
  /* Development cards stay below the bar; the busier trade drawer keeps its
     previous room and may rise over the bar's empty right end. */
  .canvas-table #drawer-development {
    max-height: calc(100% - var(--dock-height) - 20px - var(--play-top));
  }
}
@media (min-width: 1100px) {
  body[data-playing="true"]:has(
      .game-viewport.canvas-table:not(:has(.neutral-picker))
    )
    .room-social {
    top: 23px;
    gap: 13px;
  }
  body[data-playing="true"]:has(
      .game-viewport.canvas-table:not(:has(.neutral-picker))
    )
    .social-buttons
    .button {
    min-height: 30px;
    height: 30px;
  }
  .canvas-table .trade-notices {
    top: 366px;
  }
  body[data-playing="true"]:has(#chat-panel[hidden]) .trade-notices,
  .canvas-table:has(.game-drawer:not([hidden])) .trade-notices {
    top: 66px;
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .canvas-table .game-topbar {
    --bar-reserve: 226px;
  }
  .canvas-table .game-topbar h1 {
    max-width: 220px;
  }
}

/* --- 2. Player panel: compact rows that fit, help never scrolls sideways - */
.canvas-table .game-players {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
@media (min-width: 641px) {
  .canvas-table .game-players {
    gap: 6px;
    max-height: calc(100% - var(--play-top) - var(--dock-height) - 20px);
  }
  .canvas-table .game-player,
  .canvas-table .game-player.current-player {
    padding: 8px 9px;
    border-radius: 13px;
  }
  .canvas-table .game-player.current-player {
    padding-left: 7px;
  }
  .canvas-table .player-identity {
    gap: 7px;
  }
  .canvas-table .player-identity strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .canvas-table .player-identity strong small {
    color: var(--mesa-ink-muted);
  }
  .canvas-table .player-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin-top: 6px;
  }
  .canvas-table .player-stat {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: 0;
    min-width: 0;
    padding: 2px 0 1px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mesa-ink);
  }
  .canvas-table .player-stat .icon,
  .canvas-table .player-stat .toolbar-symbol {
    width: 21px;
    height: 23px;
  }
  .canvas-table .player-stat.earned {
    padding: 2px 0 1px;
  }
  .canvas-table .player-stat.earned .icon,
  .canvas-table .player-stat.earned .toolbar-symbol {
    width: 23px;
    height: 24px;
  }
  .canvas-table .player-turn-label {
    margin-top: 4px;
    font-size: 9px;
    color: var(--mesa-ink-muted);
  }
  /* Five or six players: drop the turn caption, the ring already says it. */
  .canvas-table
    .game-players:has(> .game-player:nth-child(5))
    .player-turn-label {
    display: none;
  }
  .canvas-table .game-players:has(> .game-player:nth-child(5)) .player-metrics {
    margin-top: 3px;
  }
  .canvas-table .game-players:has(> .game-player:nth-child(5)) .game-player {
    padding-block: 6px;
  }
}
.canvas-table .player-stat:hover,
.canvas-table .player-stat:focus-visible {
  background: #2446ed12;
}
/* Shared fixed help layer (ports, terrains, metrics). */
.mesa-port-tooltip,
.mesa-tooltip,
#mesa-port-tooltip {
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 7px 10px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  border: 1.5px solid #c4ad84;
  border-radius: 10px;
  background: rgb(255 250 240 / 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #39342b;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgb(57 52 43 / 0.16);
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .mesa-tooltip,
  #mesa-port-tooltip {
    background: #fffaf0;
  }
}

/* --- 5. Roll prompt as the hero call to action -------------------------- */
.canvas-table .roll-prompt.roll-prompt--hero {
  padding: 18px 34px 20px;
  gap: 0;
  border: 2px solid var(--mesa-ink);
  border-radius: 26px;
  background: rgb(255 250 240 / 0.93);
  box-shadow:
    0 6px 0 var(--mesa-ink),
    0 22px 48px rgb(57 52 43 / 0.28);
  z-index: 6;
}
.canvas-table .roll-prompt--hero .roll-prompt__button {
  display: grid;
  grid-template-areas:
    "dice"
    "text"
    "timer"
    "bar";
  min-width: 260px;
  justify-items: center;
  gap: 10px;
  color: var(--mesa-ink);
}
.canvas-table .roll-prompt--hero .roll-prompt__dice {
  grid-area: dice;
  gap: 20px;
  padding: 6px 4px 4px;
}
.canvas-table .roll-prompt--hero .roll-dice-art .die {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  padding: 15px;
  border-width: 2.5px;
  box-shadow: 0 6px 0 var(--mesa-ink);
}
.canvas-table .roll-prompt--hero .roll-dice-art .die:first-child {
  transform: rotate(-8deg);
}
.canvas-table
  .roll-prompt--hero
  .roll-prompt__button:not(:disabled)
  .roll-dice-art
  .die {
  animation: mesa-roll-invite 1.6s ease-in-out infinite;
}
.canvas-table
  .roll-prompt--hero
  .roll-prompt__button:not(:disabled)
  .roll-dice-art
  .die:nth-child(2) {
  animation-delay: -0.8s;
}
.canvas-table .roll-prompt--hero .roll-prompt__button:hover .roll-dice-art .die,
.canvas-table
  .roll-prompt--hero
  .roll-prompt__button:focus-visible
  .roll-dice-art
  .die {
  animation-play-state: paused;
  transform: rotate(-10deg) translateY(-6px);
}
.canvas-table .roll-prompt--hero.rolling .roll-dice-art .die,
.canvas-table .rolling .roll-prompt--hero .roll-dice-art .die {
  animation: mesa-roll 0.2s alternate infinite;
}
@keyframes mesa-roll-invite {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }
  50% {
    transform: rotate(6deg) translateY(-7px);
  }
}
.canvas-table .roll-prompt--hero .roll-prompt__text {
  grid-area: text;
  display: grid;
  justify-items: center;
  gap: 2px;
}
.canvas-table .roll-prompt--hero .roll-prompt__title {
  font:
    800 36px/1 Bricolage,
    sans-serif;
  letter-spacing: -0.8px;
  color: var(--mesa-ink);
}
.canvas-table .roll-prompt--hero .roll-prompt__subtitle {
  font:
    800 18px/1.15 Bricolage,
    sans-serif;
  color: #2446ed;
}
.canvas-table .roll-prompt--hero .roll-prompt__timer {
  grid-area: timer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 14px;
  border: 1.5px solid var(--mesa-ink);
  border-radius: 999px;
  background: #ffda55;
  font:
    800 16px/1 Bricolage,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--mesa-ink);
}
.canvas-table .roll-prompt--hero .roll-prompt__countdown.urgent {
  color: #b3261e;
}
.canvas-table
  .roll-prompt--hero:has(.roll-prompt__countdown.urgent)
  .roll-prompt__timer {
  background: #ffe1d9;
  border-color: #b3261e;
}
/* Full-width track + fill in one element, drained from the right. */
.canvas-table .roll-prompt--hero .roll-prompt__progress {
  grid-area: bar;
  display: block;
  justify-self: stretch;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--player, #2446ed) calc(var(--turn-remaining, 1) * 100%),
    #e2d6bd 0
  );
  transition: none;
}
.canvas-table
  .roll-prompt--hero:has(.roll-prompt__countdown.urgent)
  .roll-prompt__progress {
  --player: #dc4436;
}
.canvas-table .roll-prompt--hero .roll-prompt__button:focus-visible {
  outline: 3px solid #2446ed;
  outline-offset: 10px;
  border-radius: 18px;
}
@media (prefers-reduced-motion: reduce) {
  .canvas-table .roll-prompt--hero .roll-dice-art .die {
    animation: none !important;
  }
}

/* --- 5. Unavailable build tools: faded, but help stays crisp ------------ */
.canvas-table
  .build-icon:is(:disabled, [aria-disabled="true"], .is-unavailable),
.canvas-table .table-icon-action:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: rgb(233 225 208 / 0.55);
  border: 1.5px dashed #c9bb9e;
  transform: none;
}
.canvas-table
  .build-icon:is(:disabled, [aria-disabled="true"], .is-unavailable)
  > *,
.canvas-table .table-icon-action:disabled > * {
  filter: grayscale(1);
  opacity: 0.42;
}
.canvas-table .tool-slot.is-unavailable {
  cursor: not-allowed;
}
.canvas-table .tool-slot.is-unavailable:hover .build-tooltip,
.canvas-table .tool-slot.is-unavailable:focus-within .build-tooltip {
  display: grid;
  gap: 8px;
  opacity: 1;
}
.canvas-table .tool-slot .build-tooltip {
  opacity: 1;
  filter: none;
  border: var(--mesa-panel-edge);
  background: #fffaf0;
  color: var(--mesa-ink);
}
.canvas-table .build-tooltip small {
  color: var(--mesa-ink-muted);
}
.canvas-table .build-tooltip .build-tooltip__reason {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 7px;
  background: #ffe6de;
  color: #a62a17;
  font-weight: 800;
}

/* --- 1. Development cards: same family as the resource cards ------------ */
.dev-patrol {
  --dev-color: #adcaff;
  --dev-ink: #1d3fc4;
}
.dev-roads {
  --dev-color: #ffcf8f;
  --dev-ink: #8f4300;
}
.dev-supply {
  --dev-color: #c7ebbc;
  --dev-ink: #23683a;
}
.dev-requisition {
  --dev-color: #f8bad6;
  --dev-ink: #98205d;
}
.dev-prestige {
  --dev-color: #ffe16a;
  --dev-ink: #765400;
}
/* Small cards in the fixed hand: 62×76 like resources, stacked when many. */
.canvas-table .fixed-development {
  --dev-w: 62px;
  --dev-room: 196px;
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 76px;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1.5px dashed #b9a988;
  overflow: visible;
}
.canvas-table .hand-dev-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  flex: 0 0 var(--dev-w);
  width: var(--dev-w);
  height: 76px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #a69a82;
  border-radius: 9px;
  background: var(--dev-color, #f9d775);
  box-shadow: 0 3px 0 #bcad8e;
  color: var(--dev-ink, #51432c);
  transition: none;
}
.canvas-table .hand-dev-card + .hand-dev-card {
  margin-left: min(
    6px,
    calc(
      (var(--dev-room) - var(--dev-w)) / (var(--quantity) - 1) - var(--dev-w)
    )
  );
}
.canvas-table .hand-dev-card .icon {
  flex: 0 0 auto;
  align-self: center;
  width: 34px;
  height: 34px;
  margin: 9px auto 0;
  stroke-width: 2.1;
}
.canvas-table .hand-dev-card span {
  display: block;
  margin-top: auto;
  padding: 4px 3px;
  overflow: hidden;
  border-top: 1px solid #66563d14;
  background: #fffaf099;
  color: var(--mesa-ink);
  font:
    700 8.5px/1 "DM Sans",
    sans-serif;
  letter-spacing: -0.1px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No hover lift: a resting pointer must keep hitting the same card. */
.canvas-table .hand-dev-card:hover,
.canvas-table .hand-dev-card:focus-visible {
  z-index: 2;
  transform: none;
  border-color: #2446ed;
  box-shadow: 0 3px 0 #2446ed;
}
/* Stacked (4+): covered cards show a clean colour edge, the top one its name. */
.canvas-table
  .fixed-development:has(> .hand-dev-card:nth-child(4))
  .hand-dev-card:not(:last-child):not(:hover):not(:focus-visible)
  span {
  color: transparent;
}
.canvas-table
  .fixed-development:has(> .hand-dev-card:nth-child(4))
  .hand-dev-card:not(:last-child)
  .icon {
  margin-left: 4px;
  width: 26px;
  height: 26px;
  margin-top: 10px;
}
.canvas-table .hand-dev-card.dev-prestige {
  background: var(--dev-color);
  color: var(--dev-ink);
}

/* The drawer: a tidy grid of real cards, no scrollbars at 1–10 cards. */
.canvas-table #drawer-development {
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.canvas-table #drawer-development::before {
  content: "Cartas de desenvolvimento";
  display: block;
  margin: 0 0 10px;
  padding: 0 44px 0 2px;
  font:
    800 16px/32px Bricolage,
    sans-serif;
  color: var(--mesa-ink);
}
.canvas-table #drawer-development:has(> h2)::before {
  content: none;
}
.canvas-table #drawer-development .close-dialog {
  top: 12px;
  right: 12px;
  background: #ece3cf;
}
.canvas-table .development-hand {
  --dev-art: 62px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
}
.canvas-table .development-hand > .muted {
  grid-column: 1 / -1;
  margin: 4px 2px 8px;
  color: var(--mesa-ink-muted);
}
.canvas-table .development-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 178px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #a69a82;
  border-radius: 12px;
  background: linear-gradient(
    var(--dev-color, #e8e0cc) var(--dev-art),
    #fffaf0 var(--dev-art)
  );
  box-shadow: 0 3px 0 #bcad8e;
  color: var(--mesa-ink);
}
.canvas-table .development-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 var(--dev-art);
  height: var(--dev-art);
  margin: 0;
  border-bottom: 1px solid #66563d24;
  color: var(--dev-ink, var(--mesa-ink));
}
.canvas-table .development-symbol .icon {
  width: 42px;
  height: 42px;
  stroke-width: 2;
}
.canvas-table .development-card h3 {
  margin: 0;
  padding: 8px 8px 2px;
  font:
    800 13px/1.1 Bricolage,
    sans-serif;
  letter-spacing: -0.2px;
  color: var(--mesa-ink);
}
.canvas-table .development-card p {
  flex: 1;
  margin: 0;
  padding: 2px 8px 8px;
  font-size: 10.5px;
  line-height: 1.32;
  color: var(--mesa-ink-muted);
}
.canvas-table .development-card .button,
.canvas-table .development-card > strong {
  display: grid;
  place-items: center;
  width: auto;
  min-height: 28px;
  margin: 0 8px 8px;
  padding: 4px 6px;
  border-radius: 9px;
  font:
    800 11px/1.1 "DM Sans",
    sans-serif;
  text-align: center;
}
.canvas-table .development-card .button {
  border: 1.5px solid var(--mesa-ink);
  background: var(--dev-color, #ffda55);
  color: var(--mesa-ink);
  box-shadow: 0 2px 0 var(--mesa-ink);
  cursor: pointer;
}
.canvas-table .development-card .button:not(:disabled):hover,
.canvas-table .development-card .button:focus-visible {
  border-color: #2446ed;
  box-shadow: 0 2px 0 #2446ed;
}
.canvas-table .development-card .button:disabled {
  border: 1.5px dashed #c9bb9e;
  background: #f3ecdd;
  color: #6f6450;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.canvas-table .development-card > strong {
  background: color-mix(in srgb, var(--dev-color, #ffe16a) 55%, #fffaf0);
  color: var(--mesa-ink);
}
/* Seven or more cards: four slimmer columns so ten still fit unscrolled. */
@media (min-width: 641px) {
  .canvas-table
    #drawer-development:has(.development-card:nth-child(7))::before {
    margin-bottom: 6px;
    line-height: 26px;
  }
  .canvas-table #drawer-development:has(.development-card:nth-child(7)) {
    padding-top: 10px;
  }
  .canvas-table .development-hand:has(> .development-card:nth-child(7)) {
    --dev-art: 46px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .canvas-table
    .development-hand:has(> .development-card:nth-child(7))
    .development-card {
    min-height: 144px;
    border-radius: 10px;
  }
  .canvas-table
    .development-hand:has(> .development-card:nth-child(7))
    .development-symbol
    .icon {
    width: 30px;
    height: 30px;
  }
  .canvas-table .development-hand:has(> .development-card:nth-child(7)) h3 {
    padding: 6px 6px 2px;
    font-size: 11px;
    letter-spacing: -0.3px;
  }
  .canvas-table .development-hand:has(> .development-card:nth-child(7)) p {
    padding: 1px 6px 6px;
    font-size: 9.5px;
    line-height: 1.25;
  }
  .canvas-table .development-hand:has(> .development-card:nth-child(7)) .button,
  .canvas-table
    .development-hand:has(> .development-card:nth-child(7))
    .development-card
    > strong {
    min-height: 24px;
    margin: 0 6px 6px;
    font-size: 10px;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  .canvas-table .development-hand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Phones: same rules, one slim bar, swipe row of development cards --- */
@media (max-width: 640px) {
  .game-viewport.canvas-table {
    --play-top: 72px;
    padding: 6px 8px;
    gap: 4px;
    grid-template-rows: 30px 28px minmax(0, 1fr) var(--dock-height);
  }
  body[data-playing="true"] .chat-panel {
    background: rgb(255 250 240 / 0.95);
    border-radius: 20px;
  }
  .canvas-table .game-topbar {
    --bar-reserve: 84px;
    padding: 0 var(--bar-reserve) 0 9px;
    gap: 6px;
    border-radius: 10px;
  }
  body.focus-mode .canvas-table .game-topbar {
    --bar-reserve: 84px;
  }
  .canvas-table .game-topbar h1 {
    font-size: 13px;
    max-width: none;
    min-width: 0;
    flex: 0 1 auto;
  }
  .canvas-table .game-goal {
    font-size: 10px;
    padding: 1px 6px 1px 3px;
    white-space: nowrap;
  }
  .canvas-table .game-goal .icon {
    width: 13px;
    height: 15px;
  }
  /* Invite stays reachable as an icon; "Mesas" lives in the site menu. */
  body:not(.focus-mode) .canvas-table .game-extras {
    display: flex;
    margin: 0 0 0 auto;
  }
  .canvas-table .game-extras a {
    display: none;
  }
  .canvas-table .game-extras .text-button {
    width: 28px;
    min-height: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .canvas-table .game-extras .text-button .icon {
    width: 18px;
    height: 18px;
  }
  .canvas-table > .turn-notice,
  .canvas-table > .turn-notice.your-turn {
    min-height: 28px;
    border-radius: 9px;
  }
  .canvas-table .game-players {
    top: var(--play-top);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overflow-y: hidden;
  }
  .canvas-table .game-players::-webkit-scrollbar {
    display: none;
  }
  .canvas-table .game-players:has(.player-expanded) {
    overflow-y: auto;
  }
  .canvas-table .game-player {
    scroll-snap-align: start;
  }
  .game-viewport.canvas-table .game-map {
    top: calc(var(--play-top) + 56px);
  }
  .game-viewport.canvas-table:has(.player-expanded) .game-map {
    top: calc(var(--play-top) + 148px);
  }
  body[data-playing="true"] .room-social,
  body[data-playing="true"].focus-mode .room-social,
  body[data-playing="true"]:has(.trade-offer-popup) .room-social {
    top: 19px;
    right: 21px;
  }
  body[data-playing="true"] .social-buttons .button {
    width: 32px;
    height: 24px;
    min-height: 24px;
    border-radius: 8px;
  }
  body[data-playing="true"] #chat-toggle .icon {
    width: 18px;
    height: 18px;
  }
  body[data-playing="true"] #fullscreen-toggle::before {
    width: 17px;
    height: 17px;
  }
  .canvas-table .fixed-development {
    --dev-w: 44px;
    --dev-room: 60px;
    height: 68px;
    padding-left: 6px;
  }
  .canvas-table .hand-dev-card {
    height: 68px;
    border-radius: 8px;
  }
  .canvas-table .hand-dev-card .icon {
    width: 26px;
    height: 26px;
    margin-top: 8px;
  }
  .canvas-table .hand-dev-card span {
    font-size: 7px;
    padding: 4px 2px;
  }
  /* One intentional swipe row; the drawer itself never scrolls. */
  .canvas-table #drawer-development {
    padding: 10px 0 8px;
    overflow: hidden;
  }
  .canvas-table #drawer-development::before {
    margin-bottom: 6px;
    padding: 0 48px 0 14px;
    font-size: 15px;
  }
  .canvas-table #drawer-development .close-dialog {
    top: 10px;
    right: 10px;
  }
  .canvas-table .development-hand {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 14px 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .canvas-table .development-hand::-webkit-scrollbar {
    display: none;
  }
  .canvas-table .development-card {
    flex: 0 0 128px;
    min-height: 176px;
    scroll-snap-align: start;
  }
  .canvas-table .development-hand > .muted {
    flex: 1;
    padding: 0 14px;
  }
  .canvas-table .roll-prompt.roll-prompt--hero {
    padding: 14px 22px 16px;
    border-radius: 22px;
  }
  .canvas-table .roll-prompt--hero .roll-dice-art .die {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--mesa-ink);
  }
  .canvas-table .roll-prompt--hero .roll-prompt__button {
    min-width: 200px;
    gap: 8px;
  }
  .canvas-table .roll-prompt--hero .roll-prompt__title {
    font-size: 26px;
  }
  .canvas-table .roll-prompt--hero .roll-prompt__subtitle {
    font-size: 16px;
  }
  .canvas-table .roll-prompt--hero .roll-prompt__timer {
    font-size: 14px;
    min-height: 26px;
  }
}

/* ==========================================================================
   NATAC · palco em tela cheia (out/2026)
   O tabuleiro em canvas ocupa 100% da janela; todo o resto flutua por cima
   em painéis translúcidos com a mesma receita (borda, desfoque, sombra).
   O mapa recebe as áreas que os painéis costumam cobrir em --board-safe-*,
   para centralizar a ilha no espaço livre. Seletores com .natac-stage
   ganham da cascata antiga sem tocar nos outros jogos.
   ========================================================================== */
/* Sizes live on <body> so the platform chat can dock against them too. */
body:has(.natac-stage) {
  --edge: 12px;
  --gap: 8px;
  --top-h: 44px;
  --left-w: 214px;
  --right-w: 300px;
  --toolbar-h: 56px;
  --hand-h: 116px;
  --dock-h: calc(var(--toolbar-h) + var(--gap) + var(--hand-h));
  --stage-top: calc(var(--edge) + var(--top-h) + var(--gap));
  --rail-top: var(--stage-top);
}
.game-viewport.canvas-table.natac-stage {
  --play-top: var(--stage-top);
  --dock-height: var(--dock-h);
  --left-rail: calc(var(--left-w) + var(--edge));
  --right-rail: calc(var(--right-w) + var(--edge));
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e9dcc0;
}
body:has(.natac-stage.hand-collapsed) {
  --hand-h: 38px;
}
body:has(.natac-stage.players-collapsed) {
  --left-w: 66px;
}
/* --- Board: the whole screen ------------------------------------------- */
.natac-stage > .table-play-area {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
}
.game-viewport.natac-stage .game-map,
.game-viewport.canvas-table.natac-stage .game-map,
.game-viewport.canvas-table.natac-stage:has(.player-expanded) .game-map,
.game-viewport.canvas-table.natac-stage:has(.discarding-hand) .game-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgb(141 196 214 / 0.55),
      rgb(141 196 214 / 0) 62%
    ),
    radial-gradient(circle at 50% 50%, #f1e6cf 0, #e5d6b6 100%);
  overflow: hidden;
}
.game-viewport.canvas-table.natac-stage .board-container {
  --board-safe-top: calc(var(--stage-top) + 4px);
  --board-safe-left: calc(var(--edge) + var(--left-w) + 12px);
  --board-safe-right: calc(var(--edge) + 12px);
  --board-safe-bottom: calc(var(--edge) + var(--dock-h) + 12px);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body:has(#chat-panel:not([hidden])) .natac-stage .board-container,
.natac-stage:has(.trade-offer-popup) .board-container {
  --board-safe-right: calc(var(--edge) + var(--right-w) + 12px);
}
@media (min-width: 641px) {
  .natac-stage:has(#drawer-trade:not([hidden])) .board-container {
    --board-safe-right: calc(var(--edge) + 410px + 24px);
  }
  .natac-stage:has(#drawer-trade:not([hidden])):has(.trade-offer-popup)
    .board-container {
    --board-safe-right: calc(
      var(--edge) + var(--right-w) + 410px + 2 * var(--gap) + 16px
    );
  }
}
.natac-stage .board-svg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  cursor: grab;
  touch-action: none;
}
.natac-stage .board-svg.board-dragging {
  cursor: grabbing;
}
/* --- Panel recipe ------------------------------------------------------ */
.natac-stage > .game-topbar,
.natac-stage > .turn-notice,
.natac-stage .game-players,
.natac-stage .natac-view-controls,
.natac-stage .construction-tools,
.natac-stage .game-actions,
.natac-stage .map-dice-result,
.natac-stage .fixed-hand,
.natac-stage .roll-prompt--dock,
.natac-stage .game-drawer,
.natac-stage .trade-offer-popup,
.natac-stage .placement-confirm {
  border: var(--mesa-panel-edge);
  box-shadow: var(--mesa-panel-shadow);
  -webkit-backdrop-filter: var(--mesa-panel-blur);
  backdrop-filter: var(--mesa-panel-blur);
  color: var(--mesa-ink);
}
/* --- Top row: room, turn notice, platform buttons ---------------------- */
.game-viewport.canvas-table.natac-stage > .game-topbar {
  --bar-reserve: 14px;
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  right: auto;
  z-index: 6;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: min(460px, calc(50% - 176px));
  height: var(--top-h);
  padding: 0 8px 0 14px;
  margin: 0;
  border-radius: var(--mesa-panel-radius);
  background: var(--mesa-panel-bg);
}
.natac-stage > .game-topbar h1 {
  min-width: 72px;
  max-width: none;
  flex: 0 1 auto;
}
.natac-stage > .game-topbar .game-goal {
  flex-shrink: 0;
}
.game-viewport.canvas-table.natac-stage .game-extras {
  margin: 0 0 0 4px;
}
.game-viewport.canvas-table.natac-stage > .turn-notice,
.game-viewport.canvas-table.natac-stage > .turn-notice.your-turn {
  position: absolute;
  top: var(--edge);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(600px, calc(100% - 2 * 450px));
  height: var(--top-h);
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--mesa-panel-radius);
  background: var(--mesa-panel-bg-strong);
}
.game-viewport.canvas-table.natac-stage > .turn-notice.your-turn {
  border: 2px solid var(--player);
  background: color-mix(in srgb, var(--player) 13%, #fffaf0);
}
.natac-stage > .turn-notice p {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}
.natac-stage > .turn-notice strong {
  font-size: 15px;
}
.natac-stage > .turn-notice:has(.neutral-picker) {
  height: auto;
  min-height: var(--top-h);
  flex-wrap: wrap;
  padding-block: 6px;
}
body[data-playing="true"]:has(.natac-stage) .room-social,
body[data-playing="true"].focus-mode:has(.natac-stage) .room-social,
body[data-playing="true"]:has(.natac-stage):has(.trade-offer-popup)
  .room-social {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  bottom: auto;
  left: auto;
  z-index: 16;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: 300px;
  max-width: calc(100vw - 24px);
}
/* A drawer takes over the right side: the chat steps away meanwhile. */
body[data-playing="true"]:has(.natac-stage .game-drawer:not([hidden]))
  .room-social {
  display: none;
}
body[data-playing="true"]:has(.natac-stage) .social-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}
body[data-playing="true"]:has(.natac-stage) .social-buttons .button {
  height: var(--top-h);
  min-height: 0;
  padding: 0 12px;
  border-radius: var(--mesa-panel-radius);
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--mesa-panel-shadow);
  -webkit-backdrop-filter: var(--mesa-panel-blur);
  backdrop-filter: var(--mesa-panel-blur);
}
body[data-playing="true"]:has(.natac-stage) .chat-panel {
  height: min(330px, 42dvh);
  min-height: 0;
  max-height: none;
  background: var(--mesa-panel-bg-strong);
  border-radius: var(--mesa-panel-radius);
}
body[data-playing="true"]:has(.natac-stage) .chat-messages {
  height: auto;
  min-height: 0;
}
/* --- Left: scoreboard -------------------------------------------------- */
.game-viewport.canvas-table.natac-stage .game-players {
  position: absolute;
  top: var(--stage-top);
  left: var(--edge);
  right: auto;
  bottom: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--left-w);
  max-height: calc(100% - var(--stage-top) - var(--edge) - 52px);
  padding: 6px;
  margin: 0;
  border-radius: calc(var(--mesa-panel-radius) + 4px);
  background: rgb(255 250 240 / 0.38);
  overflow-x: hidden;
  overflow-y: auto;
}
.game-viewport.canvas-table.natac-stage .game-players,
.natac-stage .natac-panel-toggle {
  pointer-events: auto;
}
.natac-stage .game-players > .game-player {
  flex-shrink: 0;
  box-shadow: none;
}
.natac-stage .natac-panel-toggle {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--mesa-panel-border);
  border-radius: 8px;
  background: #fffaf0;
  color: var(--mesa-ink);
  font:
    800 13px/1 Bricolage,
    sans-serif;
  cursor: pointer;
}
.natac-stage .natac-panel-toggle:hover,
.natac-stage .natac-panel-toggle:focus-visible {
  border-color: #2446ed;
  color: #2446ed;
  outline: none;
}
.natac-stage .natac-players-toggle {
  align-self: flex-end;
  flex-shrink: 0;
  margin: -2px -2px -4px 0;
}
/* Collapsed scoreboard: one avatar column with points and the timer ring. */
.natac-stage.players-collapsed .game-players {
  align-items: center;
}
.natac-stage.players-collapsed .natac-players-toggle {
  align-self: center;
  margin: 0;
}
.natac-stage.players-collapsed .game-player,
.natac-stage.players-collapsed .game-player.current-player {
  width: 52px;
  padding: 5px;
  border-left-width: 1.5px;
}
.natac-stage.players-collapsed .player-identity {
  justify-content: center;
}
.natac-stage.players-collapsed .player-identity > strong,
.natac-stage.players-collapsed .player-identity > .player-countdown,
.natac-stage.players-collapsed .player-metrics,
.natac-stage.players-collapsed .player-turn-label,
.natac-stage.players-collapsed .resume-player {
  display: none;
}
.natac-stage.players-collapsed .compact-score {
  display: grid;
  place-items: center;
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #2446ed;
  color: #fffaf0;
  font:
    800 11px/1 Bricolage,
    sans-serif;
}
/* --- Bottom-left: map controls ---------------------------------------- */
.natac-stage .natac-view-controls {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--mesa-panel-radius);
  background: var(--mesa-panel-bg);
}
.natac-stage .natac-view-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--mesa-ink);
  cursor: pointer;
}
.natac-stage .natac-view-button .icon {
  width: 20px;
  height: 20px;
}
.natac-stage .natac-view-button:hover,
.natac-stage .natac-view-button:focus-visible {
  background: #2446ed14;
  border-color: #2446ed;
  color: #2446ed;
  outline: none;
}
.natac-stage .natac-view-button[aria-pressed="true"] {
  background: #2446ed;
  color: #fffaf0;
}
/* --- Bottom-centre dock: actions bar + private hand -------------------- */
.game-viewport.canvas-table.natac-stage .game-dock,
.game-viewport.canvas-table.natac-stage .game-dock.discarding-hand {
  position: absolute;
  left: 50%;
  bottom: var(--edge);
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: min(
    820px,
    calc(100% - 2 * (var(--edge) + max(var(--left-w), 172px) + 16px))
  );
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
/* Open trade offers fill the right column down to the bottom edge. */
@media (min-width: 641px) {
  .game-viewport.canvas-table.natac-stage:has(.trade-offer-popup) .game-dock {
    width: min(
      820px,
      calc(
        100% - 2 *
          (var(--edge) + max(var(--left-w), var(--right-w), 172px) + var(--gap))
      )
    );
  }
}
.natac-stage .game-dock > * {
  pointer-events: auto;
}
.game-viewport.canvas-table.natac-stage .table-toolbar {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--gap);
  width: auto;
  max-width: 100%;
  height: var(--toolbar-h);
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.natac-stage .table-toolbar > * {
  pointer-events: auto;
}
.game-viewport.canvas-table.natac-stage .construction-tools,
.game-viewport.canvas-table.natac-stage .game-actions,
.game-viewport.canvas-table.natac-stage .map-dice-result {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  border-radius: var(--mesa-panel-radius);
  background: var(--mesa-panel-bg);
}
.game-viewport.canvas-table.natac-stage .fixed-hand {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--hand-h);
  margin: 0;
  padding: 6px 12px 8px;
  border-radius: calc(var(--mesa-panel-radius) + 2px);
  background: rgb(255 250 240 / 0.88);
  overflow: hidden;
}
.natac-stage .fixed-hand-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-height: 22px;
  margin: 0 0 4px;
}
.natac-stage .fixed-hand-heading [data-natac-collapse="hand"] {
  position: absolute;
  right: -4px;
  top: -1px;
}
.natac-stage.hand-collapsed .hand-cards-row,
.natac-stage.hand-collapsed .fixed-hand .empty-hand {
  display: none;
}
.natac-stage.hand-collapsed .fixed-hand {
  padding-top: 6px;
}
/* Discarding keeps the full hand open; cards scroll sideways if needed. */
body:has(.natac-stage .discarding-hand) {
  --hand-h: 132px;
}
.game-viewport.canvas-table.natac-stage .discarding-hand .fixed-hand {
  height: var(--hand-h);
  overflow: hidden;
}
.game-viewport.canvas-table.natac-stage .discarding-hand .hand-cards-row {
  height: 96px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.game-viewport.canvas-table.natac-stage .discarding-hand .resource-fan {
  height: 92px;
  padding: 14px 4px 2px;
  margin: 0 auto;
  overflow: visible;
}
.game-viewport.canvas-table.natac-stage .hand-discard-controls {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--gap));
  transform: translateX(-50%);
  z-index: 8;
  max-width: calc(100vw - 2 * var(--edge));
}
/* Docked roll call: strong, in the player's colour, never over the map. */
.game-viewport.canvas-table.natac-stage .roll-prompt.roll-prompt--dock {
  position: relative;
  inset: auto;
  transform: none;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid var(--mesa-ink);
  border-radius: var(--mesa-panel-radius);
  background: #ffda55;
  box-shadow:
    0 4px 0 var(--mesa-ink),
    0 10px 24px rgb(57 52 43 / 0.25);
  overflow: hidden;
}
.natac-stage .roll-prompt--dock .roll-prompt__button {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "dice text timer";
  align-items: center;
  gap: 10px;
  height: 100%;
  min-width: 0;
  padding: 0 12px 4px 10px;
  border: 0;
  background: transparent;
  color: var(--mesa-ink);
  cursor: pointer;
}
.natac-stage .roll-prompt--dock .roll-prompt__dice {
  grid-area: dice;
  display: flex;
  gap: 5px;
  padding: 0;
}
.natac-stage .roll-prompt--dock .roll-dice-art .die {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--mesa-ink);
}
.natac-stage .roll-prompt--dock .roll-prompt__button:not(:disabled) .die {
  animation: mesa-roll-invite 1.6s ease-in-out infinite;
}
.natac-stage
  .roll-prompt--dock
  .roll-prompt__button:not(:disabled)
  .die
  + .die {
  animation-delay: -0.8s;
}
.natac-stage .roll-prompt--dock .rolling .die,
.natac-stage .roll-prompt--dock .roll-prompt__button.rolling .die {
  animation: mesa-roll 0.2s alternate infinite;
}
.natac-stage .roll-prompt--dock .roll-prompt__text {
  grid-area: text;
  display: grid;
  justify-items: start;
  gap: 1px;
  text-align: left;
}
.natac-stage .roll-prompt--dock .roll-prompt__title {
  font:
    800 17px/1 Bricolage,
    sans-serif;
  color: var(--mesa-ink);
}
.natac-stage .roll-prompt--dock .roll-prompt__subtitle {
  font:
    800 12px/1.1 Bricolage,
    sans-serif;
  color: #1d3fc4;
}
.natac-stage .roll-prompt--dock .roll-prompt__timer {
  grid-area: timer;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1.5px solid var(--mesa-ink);
  border-radius: 999px;
  background: #fffaf0;
  font:
    800 13px/1 Bricolage,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.natac-stage .roll-prompt--dock .roll-prompt__countdown.urgent {
  color: #b3261e;
}
.natac-stage .roll-prompt--dock .roll-prompt__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--mesa-ink) calc(var(--turn-remaining, 1) * 100%),
    rgb(57 52 43 / 0.18) 0
  );
  transition: none;
}
.natac-stage .roll-prompt--dock:has(.roll-prompt__countdown.urgent) {
  background: #ffd2c6;
}
.natac-stage .roll-prompt--dock .roll-prompt__button:focus-visible {
  outline: 3px solid #2446ed;
  outline-offset: -5px;
}
/* While rolling is the only move, the old result chip steps aside. */
.natac-stage .roll-prompt--dock:not([hidden]) ~ .map-dice-result {
  display: none;
}
/* Dice result: a short toast just above the dock, never over the island. */
.game-viewport.canvas-table.natac-stage .dice-center-result {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(var(--edge) + var(--dock-h) + 14px);
  z-index: 9;
  transform: translateX(-50%);
  animation-name: natac-dice-toast;
}
@keyframes natac-dice-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.92);
  }
  12%,
  70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px) scale(0.96);
  }
}
.natac-stage .placement-confirm {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) + var(--dock-h) + 14px);
  transform: translateX(-50%);
  z-index: 12;
  background: var(--mesa-panel-bg-strong);
  border-radius: var(--mesa-panel-radius);
}
/* --- Right column: offers below chat ----------------------------------- */
.game-viewport.canvas-table.natac-stage .trade-notices,
body[data-playing="true"]:has(#chat-panel[hidden]) .natac-stage .trade-notices,
.game-viewport.canvas-table.natac-stage:has(.game-drawer:not([hidden]))
  .trade-notices {
  position: absolute;
  top: calc(var(--stage-top));
  right: var(--edge);
  bottom: auto;
  left: auto;
  z-index: 6;
  width: var(--right-w);
  max-height: calc(100% - var(--stage-top) - var(--edge));
  transform: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
body[data-playing="true"]:has(#chat-panel:not([hidden]))
  .natac-stage:not(:has(.game-drawer:not([hidden])))
  .trade-notices {
  top: calc(var(--stage-top) + min(330px, 42dvh) + var(--gap));
  max-height: calc(
    100% - var(--stage-top) - min(330px, 42dvh) - var(--gap) - var(--edge)
  );
}
.natac-stage .trade-offer-popup {
  background: var(--mesa-panel-bg-strong);
  border-radius: var(--mesa-panel-radius);
}
/* --- Drawers: same panels, docked next to what opened them ------------- */
.game-viewport.canvas-table.natac-stage .game-drawer:not(.development-confirm) {
  position: absolute;
  top: auto;
  left: auto;
  right: calc(var(--edge) + var(--right-w) + var(--gap));
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  z-index: 14;
  width: min(410px, calc(100% - 2 * var(--edge)));
  max-height: calc(
    100% - var(--stage-top) - var(--edge) - var(--dock-h) - var(--gap)
  );
  margin: 0;
  padding: 14px;
  transform: none;
  border-radius: calc(var(--mesa-panel-radius) + 4px);
  background: var(--mesa-panel-bg-strong);
  overflow-y: auto;
  scrollbar-width: thin;
}
.game-viewport.canvas-table.natac-stage:not(:has(.trade-offer-popup))
  .game-drawer:not(.development-confirm) {
  right: var(--edge);
}
.game-viewport.canvas-table.natac-stage #drawer-development {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  min-width: 320px;
  max-width: min(680px, calc(100% - 2 * var(--edge)));
}
/* Discarding: only the discard bar and the hand matter. */
.game-viewport.canvas-table.natac-stage .discarding-hand .construction-tools,
.game-viewport.canvas-table.natac-stage .discarding-hand .game-actions {
  display: none;
}
.natac-stage .table-toolbar > * {
  flex-shrink: 0;
}
.game-viewport.canvas-table.natac-stage .game-drawer.development-confirm {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  transform: translateX(-50%);
  z-index: 14;
  border-radius: var(--mesa-panel-radius);
  background: var(--mesa-panel-bg-strong);
}
.natac-stage .game-drawer > .close-dialog {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mesa-panel-border);
  border-radius: 9px;
  background: #fffaf0;
  color: var(--mesa-ink);
  font-size: 18px;
  line-height: 1;
}
/* --- Trade panel: same voice as the other panels ----------------------- */
.natac-stage .trade-drawer > h2 {
  margin: 0 44px 10px 2px;
  font:
    800 18px/1.2 Bricolage,
    sans-serif;
  letter-spacing: -0.2px;
  color: var(--mesa-ink);
}
.natac-stage .trade-hub {
  gap: 8px;
}
.natac-stage .trade-mode-switch {
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--mesa-panel-border);
  border-radius: 11px;
  background: rgb(233 222 198 / 0.7);
}
.natac-stage .trade-mode-switch button {
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--mesa-ink-muted);
  font-size: 12px;
}
.natac-stage .trade-mode-switch button[aria-pressed="true"] {
  background: #fffaf0;
  color: var(--mesa-ink);
  box-shadow:
    0 0 0 1.5px var(--mesa-ink),
    0 2px 0 var(--mesa-ink);
}
.natac-stage .trade-palette {
  gap: 4px;
}
.natac-stage .trade-row-label {
  justify-content: flex-start;
  font-size: 11px;
  color: var(--mesa-ink-muted);
  letter-spacing: 0.02em;
}
.natac-stage .trade-row-label > .icon {
  display: none;
}
.natac-stage .trade-row-label small {
  margin-left: auto;
}
.natac-stage .trade-resource-row {
  gap: 6px;
}
.game-viewport.canvas-table.natac-stage .trade-resource {
  height: 64px;
  border: 1.5px solid #b9a77f;
  border-radius: 10px;
  box-shadow: 0 2px 0 #b9a77f;
}
.game-viewport.canvas-table.natac-stage .trade-resource.trade-picked,
.game-viewport.canvas-table.natac-stage .trade-resource:hover:not(:disabled) {
  border-color: #2446ed;
  box-shadow: 0 2px 0 #2446ed;
}
.natac-stage .trade-table {
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid var(--mesa-panel-border);
  border-radius: 12px;
  background: rgb(255 250 240 / 0.7);
}
.natac-stage .trade-selected-line {
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 40px;
}
.natac-stage .trade-selected-line > span {
  color: var(--mesa-ink-muted);
  font-size: 10px;
}
.natac-stage .trade-selected-card {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 9px;
}
.natac-stage .trade-empty-selection {
  color: var(--mesa-ink-muted);
}
.natac-stage .trade-center-arrow {
  display: none;
}
.natac-stage .trade-clear {
  top: 8px;
  bottom: auto;
  right: 10px;
  color: #1d3fc4;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.natac-stage .trade-hub form .button {
  min-height: 40px;
  border-radius: 11px;
  font-size: 13px;
}
.natac-stage .trade-hub-status {
  margin: 0;
  color: var(--mesa-ink-muted);
}
/* --- Result keeps the final island visible around it ------------------- */
.natac-stage .match-result {
  top: var(--stage-top);
  left: calc(var(--edge) + var(--left-w) + var(--gap));
  right: calc(var(--edge) + var(--right-w) + var(--gap));
  max-height: calc(100% - var(--stage-top) - var(--edge) - var(--dock-h) - 8px);
  z-index: 15;
}
/* --- Medium screens: notice drops to a slim second row ----------------- */
@media (min-width: 641px) and (max-width: 1239px) {
  body:has(.natac-stage) {
    --left-w: 190px;
    --right-w: 260px;
    --stage-top: calc(var(--edge) + var(--top-h) + var(--gap) + 38px);
  }
  body:has(.natac-stage.players-collapsed) {
    --left-w: 66px;
  }
  .game-viewport.canvas-table.natac-stage > .game-topbar {
    max-width: calc(100% - 2 * var(--edge) - 300px);
  }
  .game-viewport.canvas-table.natac-stage > .turn-notice,
  .game-viewport.canvas-table.natac-stage > .turn-notice.your-turn {
    top: calc(var(--edge) + var(--top-h) + var(--gap));
    left: var(--edge);
    transform: none;
    height: 32px;
    max-width: calc(100% - 2 * var(--edge) - var(--right-w) - var(--gap));
  }
  body[data-playing="true"]:has(.natac-stage) .room-social,
  body[data-playing="true"].focus-mode:has(.natac-stage) .room-social {
    width: 260px;
  }
  .game-viewport.canvas-table.natac-stage .game-dock {
    width: calc(100% - 2 * var(--edge) - 2 * 180px);
  }
}
/* Short desktop windows keep the dock compact. */
@media (min-width: 641px) and (max-height: 760px) {
  body:has(.natac-stage) {
    --toolbar-h: 50px;
    --hand-h: 108px;
  }
  body:has(.natac-stage.hand-collapsed) {
    --hand-h: 38px;
  }
  body[data-playing="true"]:has(.natac-stage) .chat-panel {
    height: min(290px, 38dvh);
  }
  body[data-playing="true"]:has(#chat-panel:not([hidden]))
    .natac-stage:not(:has(.game-drawer:not([hidden])))
    .trade-notices {
    top: calc(var(--stage-top) + min(290px, 38dvh) + var(--gap));
  }
}
/* --- Phones: map behind everything, panels as bars, drawers as sheets -- */
@media (max-width: 640px) {
  body:has(.natac-stage) {
    --edge: 8px;
    --gap: 6px;
    --top-h: 40px;
    --left-w: 0px;
    --right-w: calc(100vw - 16px);
    --toolbar-h: 48px;
    --hand-h: 100px;
    --stage-top: calc(var(--edge) + var(--top-h) + var(--gap));
    --rail-top: calc(var(--stage-top) + 34px + var(--gap));
  }
  body:has(.natac-stage.hand-collapsed) {
    --hand-h: 36px;
  }
  .game-viewport.canvas-table.natac-stage .board-container,
  body:has(#chat-panel:not([hidden])) .natac-stage .board-container,
  .natac-stage:has(.trade-offer-popup) .board-container {
    --board-safe-top: calc(var(--rail-top) + 56px);
    --board-safe-left: 2px;
    --board-safe-right: 2px;
    --board-safe-bottom: calc(var(--edge) + var(--dock-h) + 52px);
  }
  body[data-playing="true"]:has(.natac-stage) #fullscreen-toggle::before {
    content: none;
  }
  body[data-playing="true"]:has(.natac-stage) .social-buttons .button .icon {
    width: 19px;
    height: 19px;
  }
  /* The roll call takes its own full row above the tools. */
  body:has(.natac-stage .roll-prompt--dock:not([hidden])) {
    --toolbar-h: calc(48px * 2 + 4px);
  }
  .game-viewport.canvas-table.natac-stage
    .table-toolbar:has(.roll-prompt--dock:not([hidden])) {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .game-viewport.canvas-table.natac-stage .roll-prompt.roll-prompt--dock {
    flex: 1 0 100%;
    height: 48px;
  }
  .natac-stage .roll-prompt--dock .roll-prompt__button {
    width: 100%;
    grid-template-columns: auto 1fr auto;
  }
  .game-viewport.canvas-table.natac-stage .table-toolbar > :not(.roll-prompt) {
    height: 48px;
  }
  .game-viewport.canvas-table.natac-stage > .game-topbar {
    left: var(--edge);
    right: var(--edge);
    width: auto;
    max-width: none;
    padding: 0 88px 0 10px;
    gap: 6px;
  }
  .game-viewport.canvas-table.natac-stage > .turn-notice,
  .game-viewport.canvas-table.natac-stage > .turn-notice.your-turn {
    top: var(--stage-top);
    left: var(--edge);
    right: var(--edge);
    transform: none;
    width: auto;
    max-width: none;
    height: 34px;
    padding: 0 10px;
    gap: 8px;
  }
  .natac-stage > .turn-notice p {
    font-size: 12px;
  }
  .natac-stage > .turn-notice strong {
    font-size: 13px;
  }
  body[data-playing="true"]:has(.natac-stage) .room-social,
  body[data-playing="true"].focus-mode:has(.natac-stage) .room-social,
  body[data-playing="true"]:has(.natac-stage):has(.trade-offer-popup)
    .room-social {
    top: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    gap: 0;
  }
  body[data-playing="true"]:has(.natac-stage) .social-buttons .button {
    width: 36px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    font-size: 0;
    box-shadow: none;
  }
  /* Chat sheet docks above the action bar, so playing stays possible. */
  body[data-playing="true"]:has(.natac-stage) .chat-panel {
    position: fixed;
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
    top: auto;
    width: auto;
    height: min(
      52dvh,
      calc(100dvh - var(--rail-top) - var(--dock-h) - 3 * var(--edge))
    );
    border-radius: 18px;
    z-index: 40;
    background: rgb(255 250 240 / 0.95);
  }
  .game-viewport.canvas-table.natac-stage .game-players {
    top: var(--rail-top);
    left: var(--edge);
    right: var(--edge);
    flex-direction: row;
    width: auto;
    max-height: none;
    padding: 0;
    gap: 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .game-viewport.canvas-table.natac-stage .game-players:has(.player-expanded) {
    overflow-y: visible;
  }
  .natac-stage .natac-players-toggle {
    display: none;
  }
  .game-viewport.canvas-table.natac-stage .natac-view-controls {
    left: auto;
    right: var(--edge);
    top: auto;
    bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
    padding: 2px;
  }
  .natac-stage .natac-view-button {
    width: 34px;
    height: 34px;
  }
  .game-viewport.canvas-table.natac-stage .game-dock,
  .game-viewport.canvas-table.natac-stage .game-dock.discarding-hand {
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
  }
  .game-viewport.canvas-table.natac-stage .table-toolbar {
    gap: 4px;
    width: 100%;
  }
  .game-viewport.canvas-table.natac-stage .construction-tools,
  .game-viewport.canvas-table.natac-stage .game-actions,
  .game-viewport.canvas-table.natac-stage .map-dice-result {
    padding: 0 4px;
  }
  .natac-stage .roll-prompt--dock .roll-prompt__button {
    gap: 6px;
    padding: 0 8px 4px 6px;
  }
  .natac-stage .roll-prompt--dock .roll-dice-art .die {
    width: 26px;
    height: 26px;
    padding: 4px;
  }
  .natac-stage .roll-prompt--dock .roll-prompt__title {
    font-size: 15px;
  }
  .game-viewport.canvas-table.natac-stage .fixed-hand {
    padding: 4px 8px 6px;
  }
  .natac-stage .fixed-hand-heading {
    min-height: 20px;
    margin-bottom: 2px;
  }
  body:has(.natac-stage .discarding-hand) {
    --hand-h: 134px;
  }
  .game-viewport.canvas-table.natac-stage:has(.discarding-hand)
    .natac-view-controls {
    bottom: calc(var(--edge) + var(--dock-h) + 70px);
  }
  .game-viewport.canvas-table.natac-stage .discarding-hand .hand-cards-row {
    height: 92px;
  }
  .game-viewport.canvas-table.natac-stage .hand-discard-controls {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
    justify-content: space-between;
  }
  /* Drawers become bottom sheets over the dock. */
  .game-viewport.canvas-table.natac-stage
    .game-drawer:not(.development-confirm),
  .game-viewport.canvas-table.natac-stage:not(:has(.trade-offer-popup))
    .game-drawer:not(.development-confirm),
  .game-viewport.canvas-table.natac-stage #drawer-development {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    max-height: min(86dvh, calc(100% - var(--stage-top)));
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    z-index: 30;
  }
  .game-viewport.canvas-table.natac-stage .game-drawer.development-confirm {
    bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  }
  .game-viewport.canvas-table.natac-stage .trade-notices,
  body[data-playing="true"]:has(#chat-panel[hidden])
    .natac-stage
    .trade-notices,
  body[data-playing="true"]:has(#chat-panel:not([hidden]))
    .natac-stage:not(:has(.game-drawer:not([hidden])))
    .trade-notices {
    top: auto;
    left: var(--edge);
    right: var(--edge);
    bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
    width: auto;
    max-height: min(46dvh, 330px);
  }
  .natac-stage:has(.game-drawer:not([hidden])) .trade-notices {
    display: none;
  }
  .natac-stage .match-result {
    top: var(--stage-top);
    left: var(--edge);
    right: var(--edge);
    max-height: calc(100% - var(--stage-top) - var(--edge));
  }
}
@media (prefers-reduced-motion: reduce) {
  .natac-stage .roll-prompt--dock .die {
    animation: none !important;
  }
  .game-viewport.canvas-table.natac-stage .dice-center-result {
    animation: none;
  }
}
/* Free area of a full-screen board, measured by board-canvas.js. */
.board-container > .board-safe-area {
  position: absolute;
  top: var(--board-safe-top, 0px);
  right: var(--board-safe-right, 0px);
  bottom: var(--board-safe-bottom, 0px);
  left: var(--board-safe-left, 0px);
  visibility: hidden;
  pointer-events: none;
}
/* Spectators: a slim "watching" bar instead of an empty hand. */
body:has(.natac-stage[data-spectator="true"]) {
  --hand-h: 46px;
}
.game-viewport.canvas-table.natac-stage[data-spectator="true"] .fixed-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  padding: 0 8px 0 16px;
}
.natac-stage[data-spectator="true"] .fixed-hand-heading {
  margin: 0;
  gap: 12px;
}
.natac-stage[data-spectator="true"] .fixed-hand .empty-hand {
  margin: 0;
  font-size: 12px;
  color: var(--mesa-ink-muted);
}
/* A pending placement owns the bottom of the screen: tool help steps aside. */
.natac-stage:has(.placement-confirm:not([hidden])) .build-tooltip {
  display: none !important;
}
@media (max-width: 640px) {
  .natac-stage[data-spectator="true"] .fixed-hand .empty-hand {
    display: none;
  }
}
@media (max-width: 640px) {
  .game-viewport.canvas-table.natac-stage .placement-confirm {
    bottom: calc(var(--edge) + var(--dock-h) + 52px);
  }
}